Hoppa till huvudinnehåll

Marknadsplats - Repetition 🛒

Ditt uppdrag 🎯​

Du ska bygga en helt nytt projekt som är en marknadsplats där användare kan:

  • Sälja saker (skapa items)
  • Lägga bud på saker (bids)
  • Godkänna eller avslå bud

Men: Du får INTE koda direkt! Först ska du planera och tänka igenom allt.

Varför denna övning? 🤔

Du har lärt dig forum-systemet med meddelanden. Nu ska du tillämpa samma principer på ett annorlunda problem. Detta tränar din förmåga att överföra kunskap till nya situationer!

Fas 1: Tänk och planera (ingen kod än!) 🧠​

Steg 1: Förstå relationen​

I forum-systemet hade du:

  • Forum → kan ha många Meddelanden
  • Ett meddelande tillhör ETT forum

Frågor att fundera på:

  1. Vad motsvarar "Forum" i en marknadsplats?
  2. Vad motsvarar "Meddelanden"?
  3. Vilken är relationen mellan dem?
Skriv ner dina svar! ✏️

Innan du fortsätter - skriv faktiskt ner vad du tror. Detta hjälper dig tänka klart!

Steg 2: Designa din datamodell​

Utan att titta på någon kod, rita upp:

  1. Vilka tabeller behöver du?

    • Vad för fält ska finnas i varje tabell?
    • Vilka är required vs optional?

  2. Vilka relationer finns?

    • Vad kan ha många av vad?
    • Vad tillhör vad?

Exempel-frågor att ställa dig:

  • Kan en item ha flera bud? (Ja/Nej?)
  • Kan ett bud tillhöra flera items? (Ja/Nej?)
  • Vilka fält behöver ett bud ha?
  • Hur spårar du vem som äger en item?

Steg 3: Planera dina routes​

Tänk: Vilka URLs behöver din app ha?

Förslag att fundera på:

  • /market - ?
  • /market/create - ?
  • /market/[item_id] - ?
  • /market/[item_id]/bids - ?

För varje route:

  • Vad ska visas?
  • Vilka formulär behövs?
  • Vilka actions krävs?

Fas 2: Experimentera med datamodellen 🔬​

Steg 1: Skapa grundprojekt​

npm create svelte@latest market-app
cd market-app
npm install
npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

Steg 2: Din första datamodell-iteration​

Öppna prisma/schema.prisma och försök skapa dina modeller baserat på din planering.

Börja enkelt:

model Item {
  id   String @id @default(uuid())
  name String
  // Vad mer behöver en item?
}

model Bid {
  id String @id @default(uuid())
  // Vad behöver ett bud?
  // Hur kopplar du det till Item?
}

Testa din modell:

npx prisma db push

Får du fel? Bra! Det betyder att du lär dig. Läs felmeddelandet och försök igen.

Steg 3: Testa med Prisma Studio​

npx prisma studio
  1. Försök skapa några items manuellt
  2. Försök skapa några bids
  3. Fråga dig: Ser relationen rätt ut?

Fas 3: Bygg steg för steg 🏗️​

Steg 1: Lista items först​

Mål: Visa alla items på /market

Tänk:

  • Hur gjorde du detta i forum-appen?
  • Vilken fil behöver du skapa?
  • Vad ska load-funktionen returnera?

Koda när du vet svaret på frågorna ovan.

Steg 2: Skapa nya items​

Mål: Formulär för att lägga till nya items

Experimentera:

  1. Skapa ett enkelt formulär med bara "name"
  2. Testa att det fungerar
  3. Lägg till fler fält (beskrivning, pris, etc.)

Frågor:

  • Vilken action behöver du?
  • Hur validerar du input?
  • Vad händer efter lyckad skapande?

Steg 3: Visa en specifik item​

Mål: /market/[item_id] visar en item med alla dess bud

Tänk först:

  • Hur löste du detta för /forums/[forum]?
  • Vad är annorlunda här?
  • Hur får du item OCH dess bud?

Tips för när du kodar:

// I din load function
const item = await prisma.item.findUnique({
  where: { id: params.item_id },
  include: { /* Vad ska du inkludera? */ }
});

Fas 4: Bidding-systemet 💰​

Steg 1: Skapa bud​

Mål: Formulär på item-sidan för att lägga bud

Utmaningar att lösa:

  1. Hur kopplar du budet till rätt item?
  2. Vilka fält behöver bid-formuläret?
  3. Hur validerar du att budet är rimligt?

Experimentera:

  • Börja med bara ett "amount"-fält
  • Lägg till "message" senare
  • Testa med olika värden

Steg 2: Visa bud snyggt​

Styling-utmaning: Gör så att buden ser bra ut

Frågor:

  • Hur sorterar du buden? (Högsta först? Senaste först?)
  • Hur visar du timestamp?
  • Hur framhäver du det högsta budet?

Steg 3: Godkänn/avslå bud​

Den svåra delen!

Tänk igenom innan du kodar:

  1. Vem får godkänna bud? (Bara item-ägaren?)
  2. Hur vet du vem som äger en item?
  3. Vad händer när ett bud godkänns?
  4. Ska alla andra bud avslås automatiskt?

Hidden inputs-utmaning:

<!-- Varför behöver du hidden inputs här? -->
<form method="POST" action="?/accept_bid">
  <input type="hidden" name="bid_id" value={/* vad? */} />
  <input type="hidden" name="item_id" value={/* vad? */} />
  <button>Godkänn</button>
</form>

Fundera:

  • Varför kan du inte bara använda URL:en för att få ID:n?
  • Vad skulle hända om du inte skickade item_id?

Fas 5: Förbättringar och reflektion 🎨​

Experiment att prova:​

1. Ägarskap och behörigheter​

  • Bara item-ägaren ska kunna se "godkänn/avslå" knappar
  • Andra ska bara kunna lägga bud
  • Hur löser du detta?

2. Status på items​

  • "Till salu", "Såld", "Avslutad"
  • Bud går bara att lägga på items "Till salu"
  • Var sparar du status? Hur uppdaterar du den?

3. Bud-historik​

  • Visa alla bud (även avslagna) med status
  • Färgkoda: Grönt = accepterat, Rött = avslaget, Grått = väntande
  • Hur sparar du status på bud?

4. Validering och säkerhet​

  • Kan användare lägga bud på sina egna items?
  • Kan användare lägga flera bud på samma item?
  • Vad händer om någon försöker godkänna andras bud?

Utmaningar att lösa själv 🧩​

Grundnivå:​

  1. Få grundfunktionaliteten att fungera
    • Lista items ✓
    • Skapa items ✓
    • Visa item med bud ✓
    • Skapa bud ✓

Mellannivå:​

  1. Lägg till status och logik
    • Godkänn/avslå bud
    • Uppdatera item-status
    • Behörighetshantering

Expertnivå:​

  1. Avancerade features
    • Sökning och filtrering
    • Kategorier på items
    • "Min marknadsplats" - visa bara dina items/bud
    • Email-notifikationer (fake dem med console.log)

Reflektion och lärande 🤔​

Efter varje steg, fråga dig:

  1. Vad var annorlunda från forum-appen?
  2. Vad var samma som forum-appen?
  3. Vilka misstag gjorde du första gången?
  4. Vad skulle du göra annorlunda nästa gång?

Skriv ner dina svar! Detta hjälper dig bli en bättre utvecklare.

Vanliga utmaningar (löses INTE åt dig) ⚠️​

"Jag förstår inte relationer"​

  • Rita på papper: Rita fyrkanter för tabeller och pilar för relationer
  • Använd Prisma Studio för att se vad som händer
  • Testa skapa data manuellt först

"Hidden inputs är förvirrande"​

  • Tänk: Vilken information behöver servern när formuläret skickas?
  • Kan servern lista ut allt från URL:en? Eller behöver den mer info?
  • Testa att ta bort hidden inputs - vad händer?

"Behörigheter är svårt"​

  • Börja utan behörigheter - låt alla göra allt
  • Lägg till behörigheter senare, ett steg i taget
  • Tänk: Hur vet servern vem som är inloggad? (Spoiler: nästa modul!)

Framgångs-tips 💡​

  1. Bygg lite, testa ofta - Gör en sak i taget
  2. Använd Prisma Studio - Se vad som händer i databasen
  3. Läs felmeddelanden - De berättar vad som är fel
  4. Jämför med forum-appen - Samma principer, nya problem
  5. Skriv pseudokod först - Planera innan du kodar

Nästa steg 🚀​

När du har grundfunktionaliteten klar är du redo för nästa utmaning: En spelkaraktärs-tracker där du får träna på mer komplexa relationer och statistik!

Du lär dig genom att göra misstag! 💪

Målet är INTE att göra allt perfekt första gången. Målet är att förstå varför saker fungerar eller inte fungerar. Varje fel du fixar gör dig starkare!