Vibe Coding · บทเรียน

การเพิ่มฐานข้อมูล

จัดเก็บและโหลดข้อมูลจริง

การเพิ่มฐานข้อมูล เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vibe Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Make Your Data Permanent

Right now your app stores time entries in memory — restart the server and they're gone. Real apps need a database: a place that stores data permanently and lets you read, add, update and delete it reliably.

In this lesson you'll have AI add a real database to your full-stack app and swap your in-memory array for true storage. The best part: you describe what you want, and AI handles most of the setup.

What a Database Actually Does

Think of a database as a smart, permanent spreadsheet. Data lives in tables (or collections), each row is one record, and each column is a field — exactly like the data model you planned earlier.

You interact with it through CRUD operations: Create, Read, Update, Delete. Almost everything an app does with data is one of those four.

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 vs. NoSQL (Pick With AI)

Two broad styles exist. SQL databases (like PostgreSQL) store data in structured tables with relationships — great when your data has clear shape. NoSQL databases (like MongoDB or Firestore) store flexible documents.

For most vibe-coded apps, a hosted SQL database is a solid default. Let AI recommend one and justify it for your project.

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.

Hosted Databases Save You Setup

You could install a database on your computer, but for vibe coding a hosted database is far easier — services like Supabase, Neon or PlanetScale run it in the cloud and give you a connection URL.

You create a project in their dashboard, copy a connection string, and AI wires it into your app. No servers to manage.

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.

Let AI Define Your Schema

A schema is the blueprint of your tables — names, columns, types and relationships. Instead of writing it by hand, hand AI your data model and ask for the schema.

Many stacks use an ORM like Prisma that lets you define the schema in one file, which AI is very good at generating.

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.

Swap Memory for the Database

Now upgrade the endpoints you built earlier. Where they used an in-memory array, they should now read from and write to the real database.

Tell AI exactly which endpoints to update and which database client to use. Doing this per-endpoint keeps it testable.

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 Plain JavaScript

Under the hood, CRUD is just operations on a list of records. Here's a tiny in-memory version of the four operations — the same logic a database does at scale. Run it to watch create, read, update and delete in action.

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

Add Update and Delete Endpoints

So far you can create and read. Real apps also need to edit and remove data — a freelancer fixes a typo in hours or deletes a wrong entry.

Ask AI to add the remaining CRUD endpoints, keeping them consistent with the ones you have.

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.

Migrations: Changing the Schema Safely

Your data needs will change — you'll add a column or a new table. A migration is a tracked, repeatable change to your database structure so you can update it without losing existing data.

Tools like Prisma generate migrations for you. Always ask AI to use migrations rather than editing the database by hand, so changes are safe and reversible.

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.

Verify Data Survives a Restart

The whole point of a database is permanence. Test it: add an entry, stop and restart your app, then reload — the entry should still be there.

If data vanishes, you may still be hitting the in-memory array somewhere, or the connection isn't set. Describe the symptom to AI and let it find the leftover code.

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.

Real Data, Real App

Your app now has true persistence: data is created, read, updated and deleted in a real hosted database and survives restarts. You've covered all four CRUD operations and learned to evolve your schema safely with migrations.

One big piece remains for a complete product: knowing who is using the app. Next, we'll add user accounts and login.

Quick Check

Confirm the database fundamentals.

Recap: Adding Real Storage

You gave your app a memory that lasts:

A database stores data permanently in tables (rows and columns)
You operate on it with CRUD: Create, Read, Update, Delete
A hosted database (Supabase, Neon) removes setup pain
AI generated your schema and swapped in-memory storage for real persistence
Migrations let you change the schema safely

Next: add user accounts so each freelancer sees only their own data.

คำถามที่พบบ่อย

บทเรียน “การเพิ่มฐานข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเพิ่มฐานข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มฐานข้อมูล”

จัดเก็บและโหลดข้อมูลจริง คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเพิ่มฐานข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม

ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vibe Coding