Vibe-koodaus · Oppitunti

Tietokannan lisääminen

Tallentakaa ja ladatkaa oikeita tietoja.

Oppitunti 3/413 vaihetta

Tietokannan lisääminen on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

Tee datastasi pysyvää

Tällä hetkellä sovelluksesi tallentaa työtuntimerkinnät muistiin — kun palvelin käynnistetään uudelleen, ne katoavat. Oikeat sovellukset tarvitsevat tietokannan: paikan, joka tallentaa datan pysyvästi ja jonka avulla sitä voi luotettavasti lukea, lisätä, päivittää ja poistaa.

Tässä oppitunnissa pyydät tekoälyä lisäämään full-stack-sovellukseesi oikean tietokannan ja korvaamaan muistissa olevan taulukon pysyvällä tallennuksella. Parasta on, että kuvaat haluamasi lopputuloksen ja tekoäly hoitaa suurimman osan asetuksista.

Mitä tietokanta oikeastaan tekee

Ajattele tietokantaa älykkäänä, pysyvänä taulukkona. Data sijaitsee tauluissa (tai kokoelmissa), jokainen rivi on yksi tietue ja jokainen sarake on kenttä — aivan kuten aiemmin suunnittelemassasi tietomallissa.

Olet vuorovaikutuksessa sen kanssa CRUD-operaatioilla: Create (luo), Read (lue), Update (päivitä) ja Delete (poista). Lähes kaikki, mitä sovellus tekee datalla, on yksi näistä neljästä toiminnosta.

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 vai NoSQL (valitkaa tekoälyn avulla)

Tietokantoja on kahta yleistä tyyppiä. SQL-tietokannat (kuten PostgreSQL) tallentavat datan rakenteisiin tauluihin ja niiden välisiin suhteisiin — ne sopivat hyvin, kun datalla on selkeä rakenne. NoSQL-tietokannat (kuten MongoDB tai Firestore) tallentavat joustavasti muotoiltuja dokumentteja.

Useimmille vibe codingilla tehdyille sovelluksille ylläpidetty SQL-tietokanta on hyvä oletusvalinta. Pyytäkää tekoälyä suosittelemaan yhtä ja perustelemaan valinta projektinne kannalta.

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.

Ylläpidetyt tietokannat säästävät asennustyötä

Voisitte asentaa tietokannan tietokoneellenne, mutta vibe codingissa ylläpidetty tietokanta on paljon helpompi vaihtoehto — Supabasen, Neonin ja PlanetScalen kaltaiset palvelut suorittavat sitä pilvessä ja antavat käyttöön yhteys-URL-osoitteen.

Luotte projektin palvelun hallintapaneelissa, kopioitte yhteysmerkkijonon ja tekoäly liittää sen sovellukseenne. Palvelimia ei tarvitse hallita.

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.

Anna tekoälyn määrittää skeema

Skeema on taulujesi suunnitelma: nimet, sarakkeet, tyypit ja suhteet. Sen sijaan että kirjoittaisitte skeeman itse, antakaa tekoälylle tietomallinne ja pyytäkää sitä luomaan skeema.

Monissa teknologiapinoissa käytetään Prisman kaltaista ORM:ää, jonka avulla skeeman voi määrittää yhdessä tiedostossa. Tekoäly osaa luoda tällaisen tiedoston erittäin hyvin.

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.

Korvaa muisti tietokannalla

Päivittäkää nyt aiemmin rakentamanne päätepisteet. Niiden pitäisi lukea dataa oikeasta tietokannasta ja kirjoittaa data sinne sen sijaan, että ne käyttäisivät muistissa olevaa taulukkoa.

Kertokaa tekoälylle täsmällisesti, mitkä päätepisteet päivitetään ja mitä tietokanta-asiakasohjelmaa käytetään. Päätepisteiden päivittäminen yksi kerrallaan pitää työn testattavana.

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 tavallisella JavaScriptillä

CRUD tarkoittaa pohjimmiltaan vain tietueiden luettelolle tehtäviä toimintoja. Tässä on pieni muistissa toimiva versio neljästä operaatiosta — sama logiikka, jota tietokanta suorittaa suuressa mittakaavassa. Suorittakaa se nähdäksenne luonnin, lukemisen, päivityksen ja poiston käytännössä.

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());

Lisää päivitys- ja poistopäätepisteet

Tähän asti olette voineet luoda ja lukea tietoja. Oikeiden sovellusten pitää myös voida muokata ja poistaa dataa — esimerkiksi freelancer korjaa tuntimäärässä olevan kirjoitusvirheen tai poistaa väärän merkinnän.

Pyytäkää tekoälyä lisäämään loput CRUD-päätepisteet ja pitämään ne yhdenmukaisina nykyisten päätepisteiden kanssa.

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.

Migraatiot: skeeman turvallinen muuttaminen

Datatarpeenne muuttuvat — lisäätte ehkä sarakkeen tai uuden taulun. Migraatio on tietokannan rakenteeseen tehtävä seurattu ja toistettavissa oleva muutos, jonka avulla tietokantaa voi päivittää ilman olemassa olevan datan menettämistä.

Prisman kaltaiset työkalut luovat migraatiot puolestanne. Pyytäkää aina tekoälyä käyttämään migraatioita tietokannan käsin muokkaamisen sijaan, jotta muutokset ovat turvallisia ja peruttavissa.

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.

Varmista datan säilyminen uudelleenkäynnistyksen jälkeen

Tietokannan tärkein tarkoitus on pysyvyys. Testatkaa se: lisätkää merkintä, pysäyttäkää sovellus ja käynnistäkää se uudelleen, ja ladatkaa sitten sivu uudelleen — merkinnän pitäisi olla edelleen siellä.

Jos data katoaa, jokin osa sovelluksesta saattaa edelleen käyttää muistissa olevaa taulukkoa tai yhteyttä ei ole määritetty. Kuvailkaa oire tekoälylle ja antakaa sen etsiä jäljelle jäänyt koodi.

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.

Oikea data, oikea sovellus

Sovelluksessasi on nyt todellinen pysyvä tallennus: data luodaan, luetaan, päivitetään ja poistetaan oikeassa ylläpidetyssä tietokannassa, ja se säilyy uudelleenkäynnistysten jälkeen. Olette toteuttaneet kaikki neljä CRUD-operaatiota ja oppineet kehittämään skeemaa turvallisesti migraatioiden avulla.

Yksi tärkeä osa puuttuu vielä valmiista tuotteesta: tieto siitä, kuka sovellusta käyttää. Seuraavaksi lisäämme käyttäjätilit ja kirjautumisen.

Pikatarkistus

Varmistakaa, että tietokantojen perusteet ovat hallussa.

Vastaa interaktiivisessa oppitunnissa

Kertaus: pysyvän tallennuksen lisääminen

Annoitte sovelluksellenne pysyvän muistin:

Tietokanta tallentaa datan pysyvästi tauluihin (riveille ja sarakkeisiin)
Käsittelette sitä CRUD-operaatioilla: Create, Read, Update, Delete
Ylläpidetty tietokanta (Supabase, Neon) poistaa asennukseen liittyvän vaivan
Tekoäly loi skeeman ja korvasi muistissa olevan tallennuksen pysyvällä tallennuksella
Migraatioiden avulla skeemaa voi muuttaa turvallisesti

Seuraavaksi lisäämme käyttäjätilit, jotta jokainen freelancer näkee vain omat tietonsa.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 25
Oppitunnit: 100

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tietokannan lisääminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Tietokannan lisääminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tietokannan lisääminen”?

Tallentakaa ja ladatkaa oikeita tietoja. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Tietokannan lisääminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vibe-koodaus-oppitunnilla?

Kyllä. Jokainen Vibe-koodaus-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vibe-koodaus