1st Hour: Discussing data and Express

Synonymous: { REST , API, backend server } routes

2nd Hour: Analyzing data needs behind the userflow and wireframe diagrams from last Thursday

Reminder: come up with userflow / wireframe for practice demo fair this Thursday morning

The data model we have been using in FrontEndMasters so far to set up the Prisma ORM, the Postgres database, and our Express REST server is inspired by this website: https://chronos.framer.website/

https://hendrixer.github.io/API-design-v4/lessons/data-modeling/creating-models

---
title: Product Updates
---
erDiagram
    User ||--o{ Update : authors
    Product ||--|{ Update : contains
    Update ||--|{ UpdatePoints : includesFeatures

Are graphs equivalent in expressive power to relational databases?

That is, can any system which is representable in a relational database also representable in a graph? What about vice versa?

If you are interested, try drawing a graph to represent the example data of inventors and their product updates above.

Prisma is our chosen ORM in this class. (Object relational mapping). It is what interfaces between our programming language and the database, and it uses an object-oriented paradigm on the programming language side, and a relational paradigm on the database side.

graph LR
  Server(Our server in NodeJS) <---> ORM(Our ORM, Prisma) 
  ORM <---> Database(Our database management system, Postgres)

It includes the following parts

• A schema, or model, of what the data looks like.
  • This is the M in the MVC paradigm, and are the column names in our CSV.
  • It's the fields, their names and types, that every row or datapoint or record in our dataset will have.
  • This will rule out a whole class of errors and messy data as soon as possible. The database, and the ORM, will help us by doing this "typechecking" every time we enter in new data, to make sure our dataset begins and stays in a valid state.
• A client
  • This is tailored to our database type (Postgres) and our programming language of choice (Javascript).
• Migrations * A migration is a change in schema, for example, adding an "email_address" field to the schema above for the "User" table when there was no email address before. * Schemas change for a web app over its lifetime, and we need to be able to handle those changes while remaining backward compatible. * the data in the database lives separate from the code, so changing the schema is like a code change that indirectly tells us how to handle the data. * If we add an email_address field, we need to say what will happen to the existing database rows which have no email_address * For example, give them an empty email_address. But then, what if we also want to require all email_address's to be unique? * if we later remove an email_address field, we likely cannot do this without losing data. * This is a lengthy subject in itself, worthy of a separate class on databases, which this is not.
  • (History Lesson): Starting with Ruby on Rails in the 2000s, web startups discovered that a key part of keeping consistent data and making reliable web apps was, counter-intuitively, keeping track of all changes to the schema over time.
  • RoR and its author introduced the idea of versioning and focusing on migrations as a key need, to be versioned in your repository alongside code. * Rails includes its own ORM, but we use Prisma to bring the benefits of ORM to other non-rails languages and ecosystems, such as Python, Rust, and NodeJS.

Creating a user in the database

1. Log into your AWS server

Make sure you have Postgres installed following these steps: https://github.com/TheEvergreenStateCollege/upper-division-cs/blob/main/web-24wi/docs/AWS-EC2-Setup.md#week-3

2. Change to the directory with your API server It should have a server.js

2a. In this directory, create a .env file which will contain the following line, which is a key-value pair

DATABASE_URL='postgres://postgres:lol@localhost:5432/dev'

3. Run npx prisma init if you don’t have a prisma/schema.prisma file

3a. copy the schemas into prisma/schema.prisma https://hendrixer.github.io/API-design-v4/lessons/data-modeling/creating-models

4. Format the foreign key relations withnpx prisma format and then generate the client with

npx prisma generate

5. Migrate the schema to the Postgres DBnpx prisma migrate dev --name init

Open one of the prisma/migrations/*.sql files and try to explain to a pair programming partner what is going on.

6. Open your server.js and add the following

!Pasted image 20240205205821.png !Pasted image 20240205205935.png in the POST handler above, add a line at the end to respond to the client with

res.json(req.body);

that way, when you call curl to test this POST handler in the step below, you'll receive back the username the server receives (and a blank password, because we currently don't save it).

7. Start a tmux and create a second pane with splitting screen vertically:

• Ctrl+B (then let go of all keys) %

To switch between the two panes

• Ctrl+B (then let go of all keys) leftarrow
• Ctrl+B (then let go of all keys) rightarrow

8. Start your server with node server.js

9. In the second pane, make a curl call to create a user

curl -H "Content-Type: application/json" -X POST http://localhost:5000/user -d '{ "username": "def", "password": "123" }'

• HackerRank practice
  • 30 minutes solo
  • 30 minutes pair discussion