Lägga till en databas
Lagra och läsa in riktiga data.
Lägga till en databas är en gratis lektion i Vibe Coding på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vibe Coding, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Gör dina data permanenta
Just nu lagrar appen tidsregistreringar i minnet — starta om servern så är de borta. Riktiga appar behöver en databas: en plats som lagrar data permanent och låter dig läsa, lägga till, uppdatera och ta bort den på ett tillförlitligt sätt.
I den här lektionen låter du AI lägga till en riktig databas i din fullstack-app och byta ut arrayen i minnet mot riktig lagring. Det bästa är att du beskriver vad du vill ha och att AI hanterar det mesta av konfigurationen.
Vad en databas faktiskt gör
Tänk på en databas som ett smart, permanent kalkylblad. Data lagras i tabeller (eller samlingar), varje rad är en post och varje kolumn är ett fält — precis som den datamodell du planerade tidigare.
Du arbetar med den genom CRUD-operationer: Create, Read, Update och Delete. Nästan allt en app gör med data är en av dessa fyra operationer.
Explain databases to a beginner using my freelancer hours app.
Cover:
- what a table/row/column is, using TimeEntry as the example
- what CRUD means with one example operation each
- how this maps to the data model in my PROJECT.md
No jargon dumps — keep it concrete and short.SQL kontra NoSQL (välj med AI)
Det finns två breda varianter. SQL-databaser (som PostgreSQL) lagrar data i strukturerade tabeller med relationer — utmärkt när dina data har en tydlig struktur. NoSQL-databaser (som MongoDB eller Firestore) lagrar flexibla dokument.
För de flesta appar som byggs med vibe coding är en hostad SQL-databas ett bra standardval. Låt AI rekommendera en och motivera valet för ditt projekt.
For my freelancer hours app (clients and time entries with clear relationships), recommend ONE database.
Compare SQL vs NoSQL in 3 sentences for my case, then pick one. Favor a hosted, beginner-friendly option that works smoothly with Next.js and deploys easily (e.g. a Postgres host like Supabase or Neon). Explain why.Hostade databaser sparar konfigurationsarbete
Du kan installera en databas på datorn, men för vibe coding är en hostad databas mycket enklare — tjänster som Supabase, Neon och PlanetScale kör den i molnet och ger dig en anslutnings-URL.
Du skapar ett projekt i deras kontrollpanel, kopierar en anslutningssträng och låter AI koppla in den i appen. Du behöver inte hantera några servrar.
Walk me through, step by step, how to create a free Postgres database on Supabase and get my connection string.
Then tell me exactly where to put that connection string in a Next.js project so it stays secret (not in my code, not in my prompts). List the steps as a numbered checklist.Låt AI definiera ditt schema
Ett schema är ritningen för dina tabeller — namn, kolumner, typer och relationer. I stället för att skriva det för hand kan du ge AI din datamodell och be om schemat.
Många teknikstackar använder ett ORM som Prisma, där du kan definiera schemat i en enda fil. Det är något AI är mycket bra på att generera.
Using Prisma with Postgres, write a schema for my freelancer hours app based on this data model:
- Client: id, name
- TimeEntry: id, hours, date, note, belongs to a Client
Give me the schema.prisma file, and the commands to create the tables in my database. Explain the relation line so I understand it.Byt ut minnet mot databasen
Uppgradera nu de endpoints du byggde tidigare. Där de använde en array i minnet ska de nu läsa från och skriva till den riktiga databasen.
Säg exakt till AI vilka endpoints som ska uppdateras och vilken databasklient som ska användas. Om du gör detta endpoint för endpoint blir det lättare att testa.
Update my /api/entries endpoints to use Prisma instead of the in-memory array.
- POST /api/entries: create a TimeEntry row in the database
- GET /api/entries: return all entries ordered by date, newest first
Keep the same JSON shape the frontend already expects. Show the updated route code and note anything I must run before it works.CRUD i vanlig JavaScript
Under huven är CRUD bara operationer på en lista med poster. Här är en liten version i minnet av de fyra operationerna — samma logik som en databas utför i stor skala. Kör den för att se create, read, update och delete i praktiken.
let entries = [];
let nextId = 1;
function create(data) { const row = { id: nextId++, ...data }; entries.push(row); return row; }
function readAll() { return entries; }
function update(id, changes) { const row = entries.find(e => e.id === id); if (row) Object.assign(row, changes); return row; }
function remove(id) { entries = entries.filter(e => e.id !== id); }
create({ client: "Acme", hours: 3 });
create({ client: "Globex", hours: 2 });
update(1, { hours: 5 });
remove(2);
console.log(readAll());Lägg till endpoints för uppdatering och borttagning
Hittills kan du skapa och läsa. Riktiga appar behöver också kunna redigera och ta bort data — en frilansare rättar ett skrivfel i antalet timmar eller tar bort en felaktig post.
Be AI lägga till de återstående CRUD-endpointsen och hålla dem konsekventa med de du redan har.
Add the remaining CRUD endpoints for time entries using Prisma:
- PUT /api/entries/[id]: update an entry's fields
- DELETE /api/entries/[id]: delete an entry
Validate the id, return clear errors if the entry doesn't exist, and match the style of my existing GET/POST routes. Show me how the frontend would call each one.Migreringar: ändra schemat säkert
Dina behov av data kommer att förändras — du kanske lägger till en kolumn eller en ny tabell. En migrering är en versionshanterad och upprepningsbar ändring av databasens struktur, så att du kan uppdatera den utan att förlora befintliga data.
Verktyg som Prisma genererar migreringar åt dig. Be alltid AI använda migreringar i stället för att redigera databasen manuellt, så att ändringarna blir säkra och går att återställa.
I want to add an 'hourlyRate' field to the Client table without losing existing data.
Update my Prisma schema, then give me the exact migration command to apply this change safely. Explain why using a migration is safer than editing the database directly, and what happens to existing rows.Kontrollera att data överlever en omstart
Hela poängen med en databas är att data ska finnas kvar. Testa det: lägg till en post, stoppa och starta om appen och ladda sedan om sidan — posten ska fortfarande finnas kvar.
Om data försvinner kanske du fortfarande använder arrayen i minnet någonstans, eller så är anslutningen inte konfigurerad. Beskriv symptomet för AI och låt den hitta den kvarvarande koden.
I added the database, but after I restart the server my time entries disappear. They should be stored in Postgres.
Help me figure out why. What should I check to confirm the endpoints are actually hitting the database and not a leftover in-memory array? Give me a short diagnostic checklist.Riktiga data, riktig app
Appen har nu riktig beständig lagring: data skapas, läses, uppdateras och tas bort i en riktig hostad databas, och överlever omstarter. Du har gått igenom alla fyra CRUD-operationerna och lärt dig att utveckla schemat säkert med migreringar.
En viktig del återstår för en komplett produkt: att veta vem som använder appen. Nästa steg är att lägga till användarkonton och inloggning.
Snabb kontroll
Bekräfta grunderna i databaser.
Sammanfattning: Lägg till riktig lagring
Du gav appen ett minne som varar:
- En databas lagrar data permanent i tabeller (rader och kolumner)
- Du arbetar med den genom CRUD: Create, Read, Update och Delete
- En hostad databas (Supabase, Neon) eliminerar besväret med konfiguration
- AI genererade ditt schema och bytte ut lagring i minnet mot riktig beständig lagring
- Migreringar låter dig ändra schemat säkert
Nästa steg: lägg till användarkonton så att varje frilansare bara ser sina egna data.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 25
- Lektioner
- 100
Vanliga frågor
Är lektionen ”Lägga till en databas” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vibe Coding, inklusive ”Lägga till en databas”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Vad lär jag mig i ”Lägga till en databas”?
Lagra och läsa in riktiga data. Ni övar på Vibe Coding med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vibe Coding?
Du behöver inga förkunskaper. Utbildningen i Vibe Coding på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Lägga till en databas”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vibe Coding-lektionen?
Ja. Varje Vibe Coding-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Planera appen med AI
- Frontend och backend tillsammans
- Lägga till en databas
- Användarkonton och inloggning