Een database toevoegen
Sla echte gegevens op en laad ze.
Een database toevoegen is een gratis Vibe-coding-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Maak je gegevens blijvend
Op dit moment slaat je app tijdregistraties op in het geheugen. Start de server opnieuw en ze zijn weg. Echte apps hebben een database nodig: een plek die gegevens blijvend opslaat en waarmee je ze betrouwbaar kunt lezen, toevoegen, bijwerken en verwijderen.
In deze les laat je AI een echte database aan je full-stack-app toevoegen en vervang je de array in het geheugen door echte opslag. Het mooie is dat je beschrijft wat je wilt en AI het grootste deel van de installatie regelt.
Wat een database eigenlijk doet
Zie een database als een slim, blijvend spreadsheet. Gegevens staan in tabellen (of verzamelingen), elke rij is één record en elke kolom is een veld, precies zoals in het gegevensmodel dat je eerder hebt gepland.
Je werkt ermee via CRUD-bewerkingen: Create, Read, Update, Delete. Bijna alles wat een app met gegevens doet, valt onder een van deze vier bewerkingen.
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 versus NoSQL (kies met AI)
Er bestaan twee brede stijlen. SQL-databases (zoals PostgreSQL) slaan gegevens op in gestructureerde tabellen met relaties. Ze zijn ideaal wanneer je gegevens een duidelijke structuur hebben. NoSQL-databases (zoals MongoDB of Firestore) slaan flexibele documenten op.
Voor de meeste apps die met vibe coding zijn gemaakt, is een gehoste SQL-database een goede standaardkeuze. Laat AI er één aanbevelen en voor je project onderbouwen waarom.
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.Met gehoste databases bespaar je installatiewerk
Je zou een database op je computer kunnen installeren, maar voor vibe coding is een gehoste database veel eenvoudiger. Diensten zoals Supabase, Neon of PlanetScale draaien de database in de cloud en geven je een verbindings-URL.
Je maakt een project aan in hun dashboard, kopieert een verbindingsreeks en laat AI die in je app verwerken. Je hoeft geen servers te beheren.
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.Laat AI je schema definiëren
Een schema is de blauwdruk van je tabellen: namen, kolommen, typen en relaties. In plaats van het met de hand te schrijven, geef je AI je gegevensmodel en vraag je om het schema.
Veel technologiestapels gebruiken een ORM zoals Prisma, waarmee je het schema in één bestand definieert. AI kan zo'n bestand heel goed genereren.
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.Vervang het geheugen door de database
Werk nu de eindpunten bij die je eerder hebt gebouwd. Waar ze eerst een array in het geheugen gebruikten, moeten ze nu gegevens uit de echte database lezen en ernaartoe schrijven.
Vertel AI precies welke eindpunten moeten worden bijgewerkt en welke databaseclient moet worden gebruikt. Door dit per eindpunt te doen, blijft alles goed testbaar.
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 in gewone JavaScript
Onder de motorkap bestaat CRUD gewoon uit bewerkingen op een lijst met records. Hier is een kleine versie in het geheugen van de vier bewerkingen, dezelfde logica die een database op grote schaal uitvoert. Voer de code uit om aanmaken, lezen, bijwerken en verwijderen in actie te zien.
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());Voeg eindpunten voor bijwerken en verwijderen toe
Tot nu toe kun je gegevens aanmaken en lezen. Echte apps moeten gegevens ook kunnen bewerken en verwijderen: een freelancer corrigeert bijvoorbeeld een typefout in uren of verwijdert een verkeerde invoer.
Vraag AI om de overige CRUD-eindpunten toe te voegen en ze consistent te houden met de eindpunten die je al hebt.
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.Migraties: het schema veilig wijzigen
Je behoeften rond gegevens zullen veranderen: je voegt een kolom of een nieuwe tabel toe. Een migratie is een bijgehouden, herhaalbare wijziging aan de structuur van je database, zodat je die kunt bijwerken zonder bestaande gegevens te verliezen.
Hulpmiddelen zoals Prisma genereren migraties voor je. Vraag AI altijd om migraties te gebruiken in plaats van de database met de hand te bewerken, zodat wijzigingen veilig en omkeerbaar zijn.
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.Controleer of gegevens een herstart overleven
Het hele doel van een database is blijvende opslag. Test dit: voeg een invoer toe, stop en start je app opnieuw en laad de pagina opnieuw. De invoer hoort er nog steeds te staan.
Als gegevens verdwijnen, gebruik je misschien ergens nog de array in het geheugen of is de verbinding niet ingesteld. Beschrijf het verschijnsel aan AI en laat die de achtergebleven code vinden.
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.Echte gegevens, echte app
Je app heeft nu echte blijvende opslag: gegevens worden aangemaakt, gelezen, bijgewerkt en verwijderd in een echte gehoste database en blijven na herstarts behouden. Je hebt alle vier CRUD-bewerkingen behandeld en geleerd hoe je je schema veilig met migraties kunt ontwikkelen.
Er ontbreekt nog één belangrijk onderdeel voor een compleet product: weten wie de app gebruikt. Hierna voegen we gebruikersaccounts en inloggen toe.
Korte controle
Controleer de basisprincipes van databases.
Samenvatting: echte opslag toevoegen
Je hebt je app een blijvend geheugen gegeven:
- Een database slaat gegevens blijvend op in tabellen (rijen en kolommen)
- Je voert bewerkingen uit met CRUD: Create, Read, Update, Delete
- Een gehoste database (Supabase, Neon) neemt lastig installatiewerk uit handen
- AI heeft je schema gegenereerd en de opslag in het geheugen vervangen door echte blijvende opslag
- Met migraties kun je het schema veilig wijzigen
Hierna voeg je gebruikersaccounts toe, zodat elke freelancer alleen de eigen gegevens ziet.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Een database toevoegen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Een database toevoegen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Een database toevoegen”?
Sla echte gegevens op en laad ze. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Een database toevoegen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De app plannen met AI
- Frontend en backend samen
- Een database toevoegen
- Gebruikersaccounts en inloggen