Back to Web Engineering '24 Winter Calendar

To keep your AWS server up-to-date with new features from our in-class activities, follow our week-by-week, comprehensive AWS Server Setup

For Lap 1 this week in Web Infrastructure, we have these goals

• design and implement an appropriate, maintainable database schema for Prisma + Postgres, our ORM and database management system.
• improve our fundamental Javascript programming skills
• write GET/POST/UPDATE/DELETE route handlers in your API using JSON bodies
• test and document these calls with example curl commands
• offer this documentation to your front-end teammates and selves

• This excerpt from Martin Kleppman's Designing Data-Driven Applications
  • If you continue in the craft and practice of Web Engineering, the book is well worth the purchase.

Work on these questions in your directory for week 8

<REPO_DIR>/web-24wi/assignments/<YOUR_GITHUB_USERNAME>/infra/week8

Create an example JSON document that represents what your API (backend) server would send to your front-end in order to render one "detail page" of your web app. Write this into a file with a .json filename extension.

Don't try to be as complete as possible. Remember, you only have less than two weeks left to finish your project. Focus on your Minimum Exciting Product (MEP), what you would still be excited to see on the web, even if it's two models in a schema, and what would help your front-end teammate (which could be you) know what to implement next.

For example, in the reading's LinkedIn clone example:

{
  "user_id": 251,
  "first_name": "Bill",
  "last_name": "Gates",
  "summary": "Co-chair of the Bill & Melinda Gates... Active blogger.",
  "region_id": "us:91",
  "industry_id": 131,
  "photo_url": "/p/7/000/253/05b/308dd6e.jpg",
  "positions": [
    {
      "job_title": "Co-chair",
      "organization": "Bill & Melinda Gates Foundation"
    },
    {
      "job_title": "Co-founder, Chairman",
      "organization": "Microsoft"
    }
  ],
  "education": [
    {
      "school_name": "Harvard University",
      "start": 1973,
      "end": 1975
    },
    {
      "school_name": "Lakeside School, Seattle",
      "start": null,
      "end": null
    }
  ],
  "contact_info": {
    "blog": "http://thegatesnotes.com",
    "twitter": "http://twitter.com/BillGates"
  }
}

You may like to use VSCode's Prettify JSON command in the command-palette by selecting all your JSON text, pressing Ctrl+Shift+P (on Windows and Linux) or Cmd+Shift+P (on Mac).

On the command-line, you can cat any JSON file to the jq command, which you may need to install first.

sudo apt install -y jq
cat <filename>.json | jq .

Diagram any one-to-many, many-to-one, or many-to-many relations that are needed by your web app. Feel free to use draw.io or similar drawing programs.

Add and commit this PNG, SVG, or other image file format into your repo.

Watch this section to conclude the API design course with NodeJS and Express.

• Section 8: Config, Performance, Testing

You will be asked to write 5 unit tests as part of your final project, and you should complete 3 of them as tests of your API using Jest as described in this video section.

Commit these in your final project directory, in a subdirectory called tests or __tests__.

The entire course for reference, to give context to those sections, let you review previous sections, or look ahead to upcoming sections. https://frontendmasters.com/courses/api-design-nodejs-v4/

Some short notes accompanying the above. https://hendrixer.github.io/API-design-v4/

You should apply this assignment to begin work on your final project. By now, you should have developed your project through at least one round of wireframe and userflow diagrams, and you've discussed partnering with classmates who have similar ideas or compatible interests. You should have developed a Prisma schema to described your data, deployed it to your Postgres database, and be actively designing and implementing a REST API with JSON data to communicate with a front-end (being developed by a partner or possibly also by yourself in the Web Front-End track).

You can apply the code that you type from the videos and in class, and adapt them for your project in the following directory.

You will need to use the cd and mkdir commands to change to correct directory and create the new directory as necessary.

<repo_dir>/web-24wi/projects/<your_project_name>

In either case, follow our Git Workflow.

If you get stuck outside of class times or office hours, reach out on the class discord.

For your code interview, you will be asked to demonstrate a curl command to the following routes on your HTTPS server (https://<YOUR_SUBDOMAIN>.arcology.builders)

Unprotected routes (no Bearer Token needed)

• POST /signup
  • accepting at least a username and a password hash in the JSON body
  • resulting in a user id from the newly registered user
• POST /signin
  • accepting at least a username and a password hash in the JSON body
  • getting a Bearer Token in reply

Protected routes (using a Bearer Token returned from signin)

• GET /profile
  • returns all database rows created by the logged in user
  • for example, if this is a photo-sharing website, return all photos uploaded by this user
• GET /users
  • returns all created users
  • on a real website, only administrative users usually have the authorization to view all users, but we allow it here for debugging

It does not have to work perfectly for you to request a code interview, just that you be willing to attempt to describe what is happening, and to keep making progress on it.

These were requested as part of Web Infra HW 06. If you have not done this part yet, please go back and do this homework, but in your final project directory and applied to your final project database. From this point on, we won't ask you to do anything that doesn't benefit your final project.

This will be the last Rust Lap 2 assignment with a reading and quizzes assigned from the Rust interactive book. In the next assignment, you will be asked to optimize a compute-intensive operation for your final web project using Rust to generate a WebAssembly module that will be served as a static asset alongside your HTML/CSS/JS files.

This operation can be, for example, computing an AI for playing a board game, or evaluating an LLM, with Javascript bindings for the other front-end game to interface with it, running entirely in the user's browser and able to make use of client-side CPU, GPU, and other hardware acceleration.

Solve the quiz problems in each chapter.

Rust Book: Chapter 11 - Testing

Rust Book: Chapter 12 - I/O Project

Read the Rust Wasm book

• Sections 1 until 4.4

Complete the code (typing it character-by-character) until you can get a local game of life to display. Include building and running instructions in a README.md file. Commit it into your directory

<REPO_DIR>/web-24wi/assignments/<YOUR_GITHUB_USERNAME>/rust/week8