Lektion 13 — Øvelser

Man lærer routes bedst ved at omskrive serveren og kalde den uden browseren. Detaljerne, der ikke står på slidesne, står her.

Hvis du ikke nåede forberedelsen, så læs Express-lectures og kør my-app, før du rører gruppens server.js.

Øvelse 1 — Fra http.createServer til Express

Mål: server.js kører med Express. GET /api/patients og 404 opfører sig som i lektion 11, og tabellen henter stadig JSON fra localhost:3000.

Arbejd i gruppens projekt. Behold filnavnet server.js.

Det skal du lave

1. npm init -y og npm install express i projektmappen. Opret en .gitignore med linjen node_modules/, hvis I ikke har en.
2. Erstat http.createServer med Express som på slidesne: require, app.use til CORS, express.json(), patients-array.
3. app.get("/api/patients", …) svarer med res.json(patients).
4. Sidste middleware, under alle routes: 404 og { error: "not found" }.
5. app.listen(3000). Start med node server.js.
6. Tjek http://localhost:3000/api/patients, og at / giver 404 JSON.
7. Bekræft at tabellen viser de samme navne som før omskrivningen.

Udgangspunkt

server.js fra lektion 11 — mindst to patienter med cpr og navn.

Tjekliste

• http.createServer og writeHead er væk fra server.js
• package.json og package-lock.json findes; node_modules/ er ikke committet
• GET /api/patients giver 200 med listen
• GET / og andre ukendte stier giver 404 JSON
• CORS-headeren er sat, så fetch fra en lokal HTML-side virker
• Tabellen og browser-JSON viser samme data

Øvelsen er i hus når…

du kan stoppe processen, starte igen og vise JSON plus tabelrækker uden at ændre fetch-URL'en.

Hvis du sidder fast

• Cannot find module 'express': kør npm install express i mappen, hvor server.js ligger.
• require is not defined in ES module scope: jeres package.json har "type": "module" (fx fra Vite). Kør npm init -y i mappen med server.js, så den får sin egen package.json.
• EADDRINUSE: address already in use :::3000: en anden proces kører stadig — fx my-app eller jeres gamle server. Find terminalen og tryk Ctrl+C.
• 404 på /api/patients: kører den gamle proces stadig? Stop den med Ctrl+C og start node server.js igen. Tjek også stavningen af stien, og at 404-handleren står under routen.
• Tom tabel, JSON OK: CORS eller forkert fetch-URL.

Hvis du har ekstra tid

Tilføj en tredje patient i arrayet i filen. Genstart og tjek tabellen. Skriv ikke POST endnu — det er øvelse 3.

Øvelse 2 — Én patient via :cpr

Mål: GET /api/patients/:cpr henter én patient fra samme array. En ukendt CPR giver 404.

Det skal du lave

1. Tilføj app.get("/api/patients/:cpr", …) som på slidesne, over 404-handleren.
2. Genstart node server.js.
3. Åbn http://localhost:3000/api/patients/ plus en CPR fra jeres liste.
4. Prøv en CPR, der ikke står i listen.

Tjekliste

• En kendt CPR giver 200 og den ene patient — ikke en liste
• Ukendt CPR giver 404 JSON, ikke en tom liste
• GET /api/patients virker stadig som før

Øvelsen er i hus når…

du kan vise begge svar i browseren og pege på req.params.cpr i koden.

Hvis du sidder fast

• 404 på en CPR, du ved er i listen: :cpr-routen står under catch-all. Flyt den op. Eller CPR står som tal i arrayet — den skal stå som tekst ("2512489996"), fordi req.params.cpr altid er en streng.
• Du får hele listen: du kalder res.json(patients) i stedet for res.json(patient).

Hvis du har ekstra tid

Åbn DevTools → Network, hent en kendt og en ukendt CPR, og find statuskoden for hver.

Øvelse 3 — POST fra api.http

Mål: POST /api/patients tilføjer en patient til listen i hukommelsen. Du kan bevise det fra en .http-fil i VS Code uden at åbne DevTools.

Serveren skal køre, mens du sender requests.

Det skal du lave

1. Installér extension REST Client (Huachao Mao) i VS Code under Extensions.
2. Tilføj app.post("/api/patients", …) over 404-handleren.
3. Læs cpr og navn fra req.body ?? {}. Svar 400, hvis et felt mangler.
4. push til patients. Svar 201 og den nye patient som JSON.
5. Genstart node server.js.
6. Lav api.http i projektmappen med de tre requests nedenfor.
7. Klik Send Request over POST-requestet med body. Tjek, at svaret er 201.
8. Send GET og find den nye patient. Åbn samme URL i browseren og sammenlign.
9. Send POST uden body. Svaret skal være 400, ikke 500.

### Hele listen
GET http://localhost:3000/api/patients

### Opret patient
POST http://localhost:3000/api/patients
Content-Type: application/json

{"cpr":"0201029994","navn":"Ny Test Person"}

### Uden body — skal give 400
POST http://localhost:3000/api/patients

### skiller requests ad. Den tomme linje skiller headers fra body — som i selve HTTP-beskeden. Commit api.http; I bruger den igen i lektion 17.

Tjekliste

• express.json() står før POST-routen
• POST uden body eller uden cpr/navn giver 400 — ikke 500
• Vellykket POST giver 201
• GET efter POST viser den nye patient
• Genstart af processen fjerner den oprettede patient igen (listen var kun i RAM)

Øvelsen er i hus når…

du kan vise svaret fra POST og derefter GET i api.http, hvor den nye CPR står i arrayet.

Hvis du sidder fast

• Ingen Send Request over requestet: filen skal ende på .http, og REST Client skal være installeret.
• req.body er undefined: mangler express.json(), Content-Type-linjen eller den tomme linje før body.
• 500 med Cannot destructure property 'cpr': skriv req.body ?? {}.
• POST giver 404: routen er registreret efter catch-all — flyt app.post op.
• 400 med Expected property name eller Unexpected token: JSON'en er ugyldig. Tjek anførselstegn og kommaer i body.
• connect ECONNREFUSED: serveren kører ikke. Start node server.js.

Hvis du har ekstra tid

Send POST med samme CPR to gange. Beslut i gruppen, om det er OK i mockuppet — I behøver ikke løse dubletter endnu. Notér det til lektion 15.

Samme request kan sendes fra terminalen med curl. Det er nyttigt, når der ikke er en editor — fx mod en server i skyen:

curl.exe -i http://localhost:3000/api/patients

Skriv curl.exe på Windows — i PowerShell er curl et alias for Invoke-WebRequest.

Øvelse 4 — Tabellen mod jeres server

Mål: Gruppens patienttabel viser data fra jeres Express-server, også efter I har tilføjet en patient fra api.http.

Det skal I nå

1. Åbn mockuppet lokalt (HTML-fil eller dev-server), mens node server.js kører. fetch kører i browseren, så localhost betyder den maskine, browseren kører på. Åbner en anden jeres Vercel-side, peger localhost på deres maskine — ikke jeres server.
2. Bekræft at fetch peger på http://localhost:3000/api/patients.
3. Send POST fra api.http for en patient, I kan genkende i jeres domæne (navn fra jeres testcase — ikke rigtige CPR).
4. Genindlæs siden eller kør den funktion, der henter listen igen. Den nye række skal vises.
5. Skriv tre korte bullets til jeres projektlog: hvad ligger i browseren nu, hvad ligger på serveren, og hvad kommer i PostgreSQL i lektion 15.

Tjekliste

• Tabellen og GET i api.http viser samme antal patienter
• I kan forklare, hvorfor en anden, der åbner jeres Vercel-side, ikke ser patienterne fra jeres laptop
• Gruppen ved, at genstart af serveren sletter de oprettede patienter

Øvelsen er i hus når…

en anden i gruppen kan demo: POST fra api.http, refresh af tabellen, og forklaring af hvor listen bor.

Hvis I sidder fast

Samme fejlsøgning som lektion 11: JSON i browseren på localhost:3000, men tom tabel peger på URL eller CORS — ikke på Express syntaks.

Hvis I har ekstra tid

Tegn sekvensdiagram: bruger, browser, Express — med GET efter POST. Databasen som livlinje med note «lektion 15».

Prøver I at POST'e med fetch fra siden i stedet for api.http, fejler det på CORS. Browseren sender først et OPTIONS-request (preflight), som jeres server svarer 404 på. Det er ikke en del af dagens øvelse.