Tilføj en database
Gem og indlæs rigtige data.
Tilføj en database er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Gør dine data permanente
Lige nu gemmer din app tidsregistreringer i hukommelsen — genstart serveren, og de er væk. Rigtige apps har brug for en database: et sted, der gemmer data permanent og lader dig læse, tilføje, opdatere og slette dem på en pålidelig måde.
I denne lektion får du AI til at tilføje en rigtig database til din full-stack-app og erstatte dit array i hukommelsen med reel lagring. Det bedste er, at du beskriver, hvad du ønsker, mens AI håndterer det meste af opsætningen.
Hvad gør en database egentlig
Tænk på en database som et intelligent, permanent regneark. Data ligger i tabeller (eller samlinger), hver række er en post, og hver kolonne er et felt — præcis som den datamodel, du planlagde tidligere.
Du arbejder med den gennem CRUD-handlinger: Create, Read, Update, Delete. Næsten alt, en app gør med data, er en af de fire handlinger.
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 eller NoSQL (vælg med AI)
Der findes to overordnede typer. SQL-databaser (som PostgreSQL) gemmer data i strukturerede tabeller med relationer — det er godt, når dine data har en tydelig struktur. NoSQL-databaser (som MongoDB eller Firestore) gemmer fleksible dokumenter.
For de fleste vibe-coded apps er en hostet SQL-database et solidt standardvalg. Lad AI anbefale en og begrunde valget til dit 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.Hostede databaser sparer dig for opsætning
Du kunne installere en database på din computer, men til vibe coding er en hostet database langt nemmere — tjenester som Supabase, Neon eller PlanetScale kører den i skyen og giver dig en forbindelses-URL.
Du opretter et projekt i deres kontrolpanel, kopierer en forbindelsesstreng, og AI forbinder den med din app. Du skal ikke administrere nogen servere.
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.Lad AI definere dit skema
Et skema er planen for dine tabeller — navne, kolonner, typer og relationer. I stedet for at skrive det i hånden kan du give AI din datamodel og bede om skemaet.
Mange teknologistakke bruger en ORM som Prisma, der lader dig definere skemaet i én fil, og det er AI meget god til at generere.
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.Erstat hukommelsen med databasen
Nu skal du opgradere de slutpunkter, du byggede tidligere. Hvor de før brugte et array i hukommelsen, skal de nu læse fra og skrive til den rigtige database.
Fortæl AI præcis, hvilke slutpunkter der skal opdateres, og hvilken databaseklient der skal bruges. Når du gør det ét slutpunkt ad gangen, forbliver det nemt at teste.
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 almindelig JavaScript
Under overfladen er CRUD bare handlinger på en liste med poster. Her er en lille version i hukommelsen af de fire handlinger — den samme logik, som en database udfører i stor skala. Kør den for at se oprettelse, læsning, opdatering og sletning i praksis.
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());Tilføj slutpunkter til opdatering og sletning
Indtil videre kan du oprette og læse. Rigtige apps skal også kunne redigere og fjerne data — en freelancer retter en tastefejl i antal timer eller sletter en forkert post.
Bed AI om at tilføje de resterende CRUD-slutpunkter og holde dem konsistente med dem, du allerede 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.Migrationer: Skift skemaet sikkert
Dine databehov vil ændre sig — du vil måske tilføje en kolonne eller en ny tabel. En migration er en sporet og gentagelig ændring af databasestrukturen, så du kan opdatere den uden at miste eksisterende data.
Værktøjer som Prisma genererer migrationer for dig. Bed altid AI om at bruge migrationer i stedet for at redigere databasen manuelt, så ændringerne er sikre og kan rulles tilbage.
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.Bekræft, at data overlever en genstart
Hele pointen med en database er, at dataene bliver bevaret. Test det: Tilføj en post, stop og genstart appen, og genindlæs derefter siden — posten bør stadig være der.
Hvis dataene forsvinder, bruger du måske stadig arrayet i hukommelsen et sted, eller forbindelsen er ikke konfigureret. Beskriv symptomet for AI, og lad den finde den resterende kode.
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.Rigtige data, rigtig app
Din app har nu ægte varig lagring: Data oprettes, læses, opdateres og slettes i en rigtig hostet database og overlever genstarter. Du har gennemgået alle fire CRUD-handlinger og lært at udvikle dit skema sikkert med migrationer.
Der mangler én vigtig del, før du har et komplet produkt: at vide hvem der bruger appen. Dernæst tilføjer vi brugerkonti og login.
Hurtigt tjek
Bekræft det grundlæggende om databaser.
Opsummering: Tilføjelse af rigtig lagring
Du har givet din app en hukommelse, der varer ved:
- En database gemmer data permanent i tabeller (rækker og kolonner)
- Du arbejder med den ved hjælp af CRUD: Create, Read, Update, Delete
- En hostet database (Supabase, Neon) fjerner besværet med opsætning
- AI genererede dit skema og erstattede lagring i hukommelsen med reel varig lagring
- Migrationer lader dig ændre skemaet sikkert
Næste skridt: Tilføj brugerkonti, så hver freelancer kun ser sine egne data.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Tilføj en database” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Tilføj en database”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Tilføj en database”?
Gem og indlæs rigtige data. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Tilføj en database”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Planlæg appen med AI
- Frontend og backend sammen
- Tilføj en database
- Brugerkonti og login