50 docs oppdater readme for innlevering 2 og merge dev til main

README.md

@@ -3,17 +3,39 @@
 Repository for team IT2810-H26-T36 in IT2810-H26.
 
 Webapplikasjon for leie og gratis utlån av verktøy mellom studenter og
-privatpersoner i Trondheim. Bygget med React, TypeScript og Vite.
+privatpersoner i Trondheim. Bygget med React, TypeScript og Vite, med
+GraphQL-backend i Node og PostgreSQL.
+
+## Prøv appen
+
+Appen kjører på gruppens VM: <https://it2810-36.idi.ntnu.no/project2/>
+
+VM-en er bare tilgjengelig fra NTNU-nettet. Utenfor campus må du koble til
+[NTNU VPN](https://i.ntnu.no/vpn) først. Hvis VM-en ikke svarer, kan appen
+kjøres lokalt med egen database og backend, se
+[Frontend og backend sammen](#frontend-og-backend-sammen).
 
 ## Om prototypen
 
 Første innlevering var en klikkbar **frontend-prototype** som viste idéen og
 hvordan løsningen er tenkt brukt.
 
-**Innlevering 2:** PostgreSQL, migrasjon, seed og GraphQL-API ligger i
-`backend/`. Katalogen og detaljvisningen henter nå annonsene fra backenden med
-Apollo Client, én side om gangen, og utleieskjemaet lagrer nye annonser i
-databasen. Leieforespørselen er fortsatt demo. Se [Frontend mot GraphQL](#frontend-mot-graphql) og
+**Innlevering 2** kobler prototypen til en ekte database og backend:
+
+- **Backend:** PostgreSQL med migrasjoner og seed, og et GraphQL-API i Node
+  og TypeScript i `backend/`. Backenden kjører som en systemd-tjeneste på VM-en,
+  og Apache sender `/project2/api/` videre til den.
+- **Katalogen** henter annonsene fra backenden, 24 om gangen med de nyeste
+  først. Databasen på VM-en har 10 010 annonser.
+- **Detaljvisningen** henter én annonse fra backenden, også når lenken åpnes
+  direkte.
+- **Utleieskjemaet** lagrer nye annonser i databasen. Serveren validerer dem
+  på nytt, og den nye annonsen vises øverst i katalogen.
+
+Leieforespørselen er fortsatt demo. Søk, filtre og sortering er midlertidig
+tatt ut av katalogen til serveren støtter dem, se
+[Søk, filtre og sortering](#søk-filtre-og-sortering). Se også
+[Frontend mot GraphQL](#frontend-mot-graphql) og
 [Backend og database](#backend-og-database).
 
 ### Idé
@@ -42,15 +64,18 @@ annonser viser for eksempel «150 kr/døgn», mens gratis annonser viser
 
 ### Hva som er mockup
 
-- **Annonsene er oppdiktede eksempler.** De 10 annonsene i
-  `src/data/mockListings.ts` er skrevet for prototypen. De er ikke ekte tilbud
-  og inneholder ingen personopplysninger. Illustrasjonene er laget for
-  prosjektet. Ekstern datakilde, for eksempel for produktdata, er ikke valgt.
+- **Annonsene er oppdiktede eksempler.** Appen henter annonsene fra
+  databasen, men de er ikke ekte tilbud og inneholder ingen
+  personopplysninger. 10 håndskrevne annonser seedes fra
+  `backend/src/seed/listings.ts`, og 10 000 til genereres med ekte
+  verktøytyper og merker fra Wikidata, se [docs/datasett.md](docs/datasett.md).
+  Illustrasjonene er laget for prosjektet.
 - **Leieforespørselen er en demo.** Knappen heter «Send forespørsel (demo)».
   Ingen forespørsel blir sendt, og verktøyet blir ikke reservert.
-- **Appen lagrer ikke leie ennå.** Leieforespørselen er demo. Katalogen og
-  detaljvisningen leser fra databasen, og utleieskjemaet lagrer nye annonser
-  der. Det finnes ingen innlogging, så alle kan legge ut annonser.
+- **Ingen innlogging.** Alle kan legge ut annonser, og annonsene har ingen
+  eier ennå.
+
+`src/data/mockListings.ts` brukes nå bare i tester og på designsiden.
 
 ### Data
 
@@ -76,14 +101,13 @@ mens selve annonsene genereres. Se [docs/datasett.md](docs/datasett.md).
 
 ### Planlagt videre
 
-- **GraphQL og VM:** API i Node og TypeScript, deploy på gruppens VM uten
-  Docker. Appen under Apache `/project2`, backend på port 3001.
 - **Søk i hele databasen:** Søk, filtre og sortering skjer på serveren, før
   resultatet deles opp i sider. Katalogen får blaing med «Forrige» og
   «Neste», og endrede valg starter på første side. Søket venter til brukeren
   har sluttet å skrive (debouncing), og svar på utdaterte søk forkastes.
-- **State:** Apollo Client henter og bufrer data fra backenden. Søk, filtre og
-  sortering ligger fortsatt i URL-en.
+- **State:** Apollo Client henter og bufrer allerede data fra backenden. Søk,
+  filtre og sortering skal fortsatt ligge i URL-en, slik at de kan deles som
+  lenke.
 - **Innlogging og egne annonser:** Brukere kan opprette, redigere og
   deaktivere egne annonser. Serveren sjekker at bare eieren kan endre dem.
 - **Booking:** Eieren godkjenner eller avslår leieforespørsler, og begge
@@ -96,8 +120,8 @@ mens selve annonsene genereres. Se [docs/datasett.md](docs/datasett.md).
 - **Bærekraft:** Små bilder som lastes når de trengs, systemfont, buffring og
   spørringer som bare henter feltene som vises. Vi måler datamengde og antall
   forespørsler.
-- **Testing:** Komponenttester med Vitest finnes allerede. Senere kommer
-  API-tester mot en testdatabase og en ende-til-ende-test med Playwright av en
+- **Testing:** Komponenttester med Vitest og API-tester mot en testdatabase
+  finnes allerede. Senere kommer en ende-til-ende-test med Playwright av en
   hel leieflyt.
 
 Betaling, depositum, frakt og chat er ikke en del av planen. Hvis kjernen blir
@@ -106,9 +130,25 @@ bokhylle», med verktøyene som trengs.
 
 ### Dette ønsker vi tilbakemelding på
 
+**Oppsett og samspill mellom klient og backend:**
+
+- Var det lett å finne ut hvordan appen kjøres, både på VM-en og lokalt? Hvor
+  stoppet du opp?
+- Er det forståelig hvordan Apache, backenden og databasen henger sammen på
+  VM-en, ut fra [docs/vm-backend.md](docs/vm-backend.md) og
+  [deploy/apache/README.md](deploy/apache/README.md)?
+- Er GraphQL-skjemaet i `backend/src/graphql/schema.ts` lett å forstå? Ville
+  du delt opp spørringene eller feltene annerledes?
+- Føles katalogen rask nok når du blar, og er det tydelig hva som skjer mens
+  data lastes eller hvis backenden ikke svarer?
+- Dukket annonsen du la ut via «Lei ut verktøy», opp i katalogen slik du
+  forventet?
+
+**Idé og brukeropplevelse:**
+
 - Er idéen og forskjellen på leie og gratis utlån lett å forstå?
-- Mangler katalogen filtre eller sorteringer du ville brukt, for eksempel
-  område eller ledige datoer?
+- Hvilke filtre og sorteringer ville du brukt mest når søket kommer tilbake,
+  for eksempel område eller ledige datoer?
 - Er det tydelig hvordan en leieforespørsel fungerer?
 - Er det noe i datamodellen over som virker unødvendig, eller som mangler?
 
@@ -194,8 +234,8 @@ for å se katalogen med 10 010 annonser.
 ## Backend og database
 
 Backend ligger i `backend/` og bruker PostgreSQL. Apollo Server 5 eksponerer
-GraphQL på port 3001 (lokalt). Migrasjon og seed fyller `listings` med de samme
-eksempelannonsene som mock i frontend.
+GraphQL på port 3001. Migrasjon og seed fyller `listings` med de samme
+eksempelannonsene som mockdataene som brukes i testene.
 
 | Miljø            | Dokumentasjon                                                                                            |
 | ---------------- | -------------------------------------------------------------------------------------------------------- |
@@ -504,11 +544,12 @@ leieforespørsel. Henting og retur samme dag regnes som ett døgn.
 
 `src/utils/listingForm.ts` validerer skjemaet for å legge ut verktøy. Alle
 felt er påkrevd, og døgnprisen må være et helt tall fra 0 til 10 000 kroner.
-Serveren skal senere gjøre den samme kontrollen.
+Serveren gjør den samme kontrollen i `backend/src/validation/createListingInput.ts`.
 
 `src/data/mockListings.ts` har 10 eksempelannonser som dekker gratis og betalt
-utlån, korte og lange titler, tomt tilbehør og annonser uten bilde. Se
-[Hva som er mockup](#hva-som-er-mockup) for hvor dataene kommer fra.
+utlån, korte og lange titler, tomt tilbehør og annonser uten bilde. De brukes i
+testene og på designsiden. Se [Hva som er mockup](#hva-som-er-mockup) for hvor
+dataene i appen kommer fra.
 
 ## Dokumentasjon