Practice Demo Day

On Thursday morning, Feb 8th, at 10am, we will have the following activities, during our normal Web Front-End class time. It will be organized by the TAs, who will divide the class into two shifts, just like the real Demo Day at the end of Week 10.

You will log into your computers as normal, but treat it as a "Shop Window" where you are open to business during either the first shift (Shift A) or the second shift (Shift B), presenting to potential teammates and ask for feedback. "Customers", or potential teammates, will come by to talk to you about your idea, and filling out feedback forms. Halfway through, Shift B will go back to their shop windows, and Shift A will now go around as customers.

• 15 minute introduction, everyone logs in and prepares their "Shop Window"
  • Put out your userflow and wireframe diagrams prepared in Final-Project-05
  • Open your web browser to show any relevant code, demos, example interactions, or slides.
• 45 minutes: Shift A is open for business at their "shop windows",
  • Shift B moves around and are feedback customers
• 45 minutes: Shift B is "open for business" at their shop windows,
  • Shift A moves around and are feedback customers
• 15 minutes: everyone finishes up feedback forms, debrief, conclusion

30 minutes:

Review the database table and activity from before. Verify that you have Users written into your table from a curl command.

postgres=# \l
                                 List of databases
   Name    |  Owner   | Encoding |  Collate   |   Ctype    |   Access privileges
-----------+----------+----------+------------+------------+-----------------------
 dev       | postgres | UTF8     | en_US.utf8 | en_US.utf8 |
 postgres  | postgres | UTF8     | en_US.utf8 | en_US.utf8 |
 template0 | postgres | UTF8     | en_US.utf8 | en_US.utf8 | =c/postgres          +
           |          |          |            |            | postgres=CTc/postgres
 template1 | postgres | UTF8     | en_US.utf8 | en_US.utf8 | =c/postgres          +
           |          |          |            |            | postgres=CTc/postgres
(4 rows)

postgres=# \c dev
You are now connected to database "dev" as user "postgres".
dev=# SELECT * FROM "User";
                  id                  |        createdAt        | username | password
--------------------------------------+-------------------------+----------+----------
 b5fc9d95-abe6-469e-82e0-8ede8a37f43c | 2024-02-02 21:16:44.08  | abc      |
 415b1773-21c6-4315-9e4e-b10cf3605d72 | 2024-02-05 05:58:37.012 | def      |
(2 rows)

dev=#

You are allowed to search the class monorepo, your own notes, the Mozilla developer docs, and the Prisma documentation. No AI chat or a general search in web engines like Google or Discord.

1. What are the pros and cons of running your own server? Give at least three reasons for and against.

2. In an asymmetric cryptosystem like RSA or ECDSA, a user's credentials are a keypair consisting of a public key and a private key. If you login into a remote system using SSH from your laptop, where should a copy of the public key and private key get stored for you to identify yourself securely without letting others impersonate you? Choose all that apply a. public key on laptop b. private key on server c. private key on GitHub d. public key on server e. private key on laptop f. public key on GitHub

3. MVC a. What is the Model-View-Controller paradigm in your own words? b. What part of MVC does a database and its schema belong in? Think of what keyword in Prisma you use to describe a table. c. What language(s) have we been writing the View part in so far? d. What language(s) have we been writing the Controller part in so far? e. Draw a picture to show how the Model-View-Controller parts are divided between front-end and back-end in a client-server web architecture? f. (For Lap 2 students: Does it change in React with client-side rendering? What about React with server-side rendering?)

4. Name the purpose of each token in the following curl command, which is calling a REST API, as well as a guess as to the overall effect of running this command. (MIME stands for Multipurpose Internet Mail Extensions, originally used to identify types of email attachments, but now used for HTTP transfers ) curl -X PUT https://adopt-pet.com/dogs/rosa -h "Content-Type: application/json" -d '{ "ownerName": "Xu", "": "" }' a. curl b. -X PUT use the word "HTTP method" in your response c. https://adopt-pet.com/dogs/rosa use the words "hostname", "scheme", "route", and "sub-route" in your response d. -h "Content-Type: application/json" use the words "header", "key", "value", and "MIME-type" in your response e. -d '{ "ownerName": "Xu", "": "" }' use the words "JSON", "key", and "value" in your response

5. Describe two ways of making a service start on boot and restart on crash on a Linux server.

6. What are two ways of hosting a website if you know the path to a static HTML, CSS, and JS file on a Linux server? Consider how you demonstrated, or how you would demonstrate, your Google-search-hits example, your HTML blog or CSS coffeeshop / JS calculator / word guessing game, or React pet adoption scheme to someone by giving them your URL, e.g. https://<my_subdomain>.arcology.builders

Follow this tutorial to install nginx and get a TLS certificate for <your_subdomain>.arcology.builders Don't worry about the ufw firewall for now, unless you have extra time.

https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04