Legge til en database
Lagre og last inn ekte data.
Legge til en database er en gratis leksjon i Vibe-koding på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vibe-koding, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vibe-koding inneholder totalt 4 leksjoner.
Gjør dataene permanente
Akkurat nå lagrer appen tidsregistreringer i minnet – start serveren på nytt, så er de borte. Virkelige apper trenger en database: et sted som lagrer data permanent og lar deg lese, legge til, oppdatere og slette dem på en pålitelig måte.
I denne leksjonen skal du få AI til å legge til en ekte database i fullstack-appen din og bytte ut tabellen i minnet med reell lagring. Det beste er at du beskriver hva du ønsker, mens AI håndterer det meste av oppsettet.
Hva en database faktisk gjør
Tenk på en database som et smart, permanent regneark. Data ligger i tabeller (eller samlinger), hver rad er én post, og hver kolonne er et felt – akkurat som datamodellen du planla tidligere.
Du samhandler med den gjennom CRUD-operasjoner: Create, Read, Update og Delete. Nesten alt en app gjør med data, er én av disse fire operasjonene.
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 (velg med AI)
Det finnes to hovedtyper. SQL-databaser (som PostgreSQL) lagrer data i strukturerte tabeller med relasjoner – perfekt når dataene har en tydelig struktur. NoSQL-databaser (som MongoDB eller Firestore) lagrer fleksible dokumenter.
For de fleste vibe-kodede apper er en driftet SQL-database et godt standardvalg. La AI anbefale en og begrunne valget for prosjektet ditt.
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.Driftede databaser sparer deg for oppsett
Du kan installere en database på datamaskinen din, men for vibe-koding er en driftet database mye enklere – tjenester som Supabase, Neon eller PlanetScale kjører den i skyen og gir deg en tilkoblings-URL.
Du oppretter et prosjekt i kontrollpanelet deres, kopierer en tilkoblingsstreng, og AI kobler den til appen din. Du slipper å administrere 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.La AI definere skjemaet ditt
Et skjema er en plan for tabellene dine – navn, kolonner, typer og relasjoner. I stedet for å skrive det for hånd kan du gi AI datamodellen din og be om et skjema.
Mange teknologistakker bruker en ORM som Prisma, som lar deg definere skjemaet i én fil. Dette er AI svært god til å 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.Bytt ut minnet med databasen
Nå skal du oppgradere endepunktene du bygde tidligere. Der de før brukte en tabell i minnet, skal de nå lese fra og skrive til den ekte databasen.
Fortell AI nøyaktig hvilke endepunkter som skal oppdateres, og hvilken databaseklient som skal brukes. Når du gjør dette per endepunkt, blir det enklere å 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 vanlig JavaScript
Under panseret er CRUD bare operasjoner på en liste med poster. Her er en liten versjon av de fire operasjonene i minnet – den samme logikken som en database utfører i stor skala. Kjør den for å se opprette, lese, oppdatere og slette 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());Legg til endepunkter for oppdatering og sletting
Så langt kan du opprette og lese. Virkelige apper må også kunne redigere og fjerne data – en frilanser retter en skrivefeil i antall timer eller sletter en feil oppføring.
Be AI legge til de gjenværende CRUD-endepunktene 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.Migreringer: Endre skjemaet på en trygg måte
Behovene dine for data vil endre seg – du vil kanskje legge til en kolonne eller en ny tabell. En migrering er en sporet og gjentakbar endring i databasestrukturen, slik at du kan oppdatere den uten å miste eksisterende data.
Verktøy som Prisma genererer migreringer for deg. Be alltid AI bruke migreringer i stedet for å redigere databasen manuelt, slik at endringene er trygge og kan reverseres.
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.Kontroller at data overlever en omstart
Hele poenget med en database er at dataene skal være permanente. Test det: Legg til en oppføring, stopp og start appen på nytt, og last deretter siden på nytt – oppføringen skal fortsatt finnes.
Hvis dataene forsvinner, kan det hende at du fortsatt bruker tabellen i minnet et sted, eller at tilkoblingen ikke er konfigurert. Beskriv symptomet for AI, og la den finne den gjenværende 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.Ekte data, ekte app
Appen din har nå ekte varig lagring: Data opprettes, leses, oppdateres og slettes i en ekte driftet database, og overlever omstarter. Du har dekket alle de fire CRUD-operasjonene og lært å videreutvikle skjemaet på en trygg måte med migreringer.
Én viktig del gjenstår for et komplett produkt: å vite hvem som bruker appen. Neste steg er å legge til brukerkontoer og innlogging.
Kort kontroll
Kontroller det grunnleggende om databaser.
Oppsummering: Legg til ekte lagring
Du ga appen et minne som varer:
- En database lagrer data permanent i tabeller (rader og kolonner)
- Du opererer på den med CRUD: Create, Read, Update, Delete
- En driftet database (Supabase, Neon) gjør oppsettet enklere
- AI genererte skjemaet ditt og byttet ut lagring i minnet med varig lagring
- Migreringer lar deg endre skjemaet på en trygg måte
Neste steg: Legg til brukerkontoer, slik at hver frilanser bare ser sine egne data.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 25
- Leksjoner
- 100
Ofte stilte spørsmål
Er leksjonen «Legge til en database» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vibe-koding, inkludert «Legge til en database», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vibe-koding inneholder totalt 4 leksjoner.
Hva lærer jeg i «Legge til en database»?
Lagre og last inn ekte data. Du øver på Vibe-koding med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vibe-koding?
Ingen tidligere erfaring er nødvendig. Vibe-koding på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Legge til en database»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vibe-koding-leksjonen?
Ja. Alle Vibe-koding-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Planlegge appen med AI
- Frontend og backend sammen
- Legge til en database
- Brukerkontoer og innlogging