From 1e9734adeb3314a2c5f9e8d005a15d9a78326ab2 Mon Sep 17 00:00:00 2001 From: tordtst Date: Fri, 16 Oct 2026 19:17:27 +0200 Subject: [PATCH 1/3] =?UTF-8?q?docs(docs):=20beskriv=20innlevering=202=20o?= =?UTF-8?q?g=20hvor=20appen=20kan=20pr=C3=B8ves?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: sebasti --- README.md | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1a1543f..0ea1422 100644 --- a/README.md +++ b/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: + +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é From e9aec8f0ca711441d35c322d241befcc3a17ef23 Mon Sep 17 00:00:00 2001 From: tordtst Date: Fri, 16 Oct 2026 19:17:32 +0200 Subject: [PATCH 2/3] docs(docs): rett utdaterte avsnitt om mockdata og plan Co-Authored-By: andretg --- README.md | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 0ea1422..3da8d37 100644 --- a/README.md +++ b/README.md @@ -64,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 @@ -98,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 @@ -118,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 @@ -216,8 +218,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 | | ---------------- | -------------------------------------------------------------------------------------------------------- | @@ -526,11 +528,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 From 14c41bb7c5e7a8380c0bb3708a5b0da29580eabd Mon Sep 17 00:00:00 2001 From: tordtst Date: Fri, 16 Oct 2026 19:17:32 +0200 Subject: [PATCH 3/3] =?UTF-8?q?docs(docs):=20legg=20til=20sp=C3=B8rsm?= =?UTF-8?q?=C3=A5l=20om=20oppsett=20og=20samspill=20med=20backend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: birkjr --- README.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3da8d37..41be805 100644 --- a/README.md +++ b/README.md @@ -130,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?