Week 09 - Monday

4 March 2024

Web Infra - Morning Session

1st Hour

Review From Last Week:

• Our goal:
  • as Front-End Engineer:
    • create a login page that POSTs to /signin on your server
    • create a registration page that POSTs to /signup on your server
  • as Infrastructure Engineer:
    • handle a POST to /signin that checks the given username and password(hash) into your database, and returns a bearer token
    • handle a POST to /signup that writers the given username and password(hash) into your database

This Week:

• Our goal:
  • as Front-End Engineer:
    • use a given JSON response from a GET /api/profile, with a Bearer token header, to render a user profile page
  • as Infrastructure Engineer:
    • handle a GET /api/profile request with a Bearer token header, and return a JSON response of data.

We will practice on the API server in assignments/pham/week8 and then you will adapt it to your own final project.

In-class Activity

We'll go over the following activity, then do it in pairs. Remember these steps are guidelines. Your actual environment and experience will probably differ. When this happens, try to explain to each other what you think is happening and possible solutions. If neither of you can figure out what is going on, ask for help from a TA or the instructor.

1. Open pham-week9 branch in the class monorepo website.

https://github.com/TheEvergreenStateCollege/upper-division-cs/tree/pham-week9

2. Review our use of GitHub Codespaces.

Press . to open up GitHub codespaces.

3. Change to our project directory this week

cd web-24wi/assignments/ppham/week8/

4. Examine the script ./scripts/setup.sh and discuss what you think each line is doing with your partner.

5. The tool telnet is missing on our codespaces. With your partner, add a line to the setup script to install it.

6. Run the script

./scripts/setup.sh

7. Open up a new browser to port 5000 when it asks you. Verify that you see Hello World.

8. Add /map.html to the url and refresh. You should see the following

• Express Middleware Review
  • Pattern Matching on Routes
  • Precedence and Order
  • Global Middleware vs. Route Handlers
  • Middleware Lists
• Error Handling & Validating
  • Thwarting some SQL Injection Attacks

2nd Hour

• Reverse Proxy
• Reverse-Engineering a Front-End
  • JSON Body of Requests
• U.S. City Map Example
  • GET /state/:state to return a single state outline, and cities within that state
  • POST /uscity

Type Features of VSCode

Right-click on any value or its type and select Go to Type Definition

In the definition of the protect middleware, on line 48 begin typing req.us to see allowed members of type Request beginning with the letters us.