Menambah Pangkalan Data
Simpan dan muatkan data sebenar.
Menambah Pangkalan Data ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Jadikan Data Anda Kekal
Buat masa ini, aplikasi anda menyimpan entri masa dalam ingatan — mulakan semula pelayan dan semuanya hilang. Aplikasi sebenar memerlukan pangkalan data: tempat yang menyimpan data secara kekal serta membolehkan anda membaca, menambah, mengemas kini dan memadamnya dengan boleh dipercayai.
Dalam pelajaran ini, anda akan meminta AI menambahkan pangkalan data sebenar pada aplikasi full-stack anda dan menggantikan tatasusunan dalam ingatan dengan storan sebenar. Bahagian terbaiknya: anda menerangkan perkara yang diingini, dan AI menguruskan kebanyakan persediaan.
Perkara Sebenar yang Dilakukan oleh Pangkalan Data
Anggap pangkalan data sebagai hamparan pintar yang kekal. Data berada dalam jadual (atau koleksi), setiap baris ialah satu rekod dan setiap lajur ialah satu medan — sama seperti model data yang anda rancang sebelum ini.
Anda berinteraksi dengannya melalui operasi CRUD: Cipta, Read (baca), Ubah suai dan Delete (padam). Hampir semua perkara yang dilakukan oleh aplikasi terhadap data termasuk dalam salah satu daripada empat operasi ini.
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 berbanding NoSQL (Pilih dengan AI)
Terdapat dua gaya utama. Pangkalan data SQL (seperti PostgreSQL) menyimpan data dalam jadual berstruktur dengan hubungan — sesuai apabila data anda mempunyai bentuk yang jelas. Pangkalan data NoSQL (seperti MongoDB atau Firestore) menyimpan dokumen yang fleksibel.
Bagi kebanyakan aplikasi yang dikodkan berasaskan gaya, pangkalan data SQL terhos ialah pilihan lalai yang kukuh. Biarkan AI mengesyorkan satu pilihan dan memberikan justifikasi untuk projek anda.
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.Pangkalan Data Terhos Menjimatkan Persediaan
Anda boleh memasang pangkalan data pada komputer anda, tetapi untuk pengekodan berasaskan gaya, pangkalan data terhos jauh lebih mudah — perkhidmatan seperti Supabase, Neon atau PlanetScale menjalankannya dalam awan dan memberikan URL sambungan kepada anda.
Anda mencipta projek dalam papan pemuka mereka, menyalin rentetan sambungan dan AI menyambungkannya kepada aplikasi anda. Tiada pelayan untuk diurus.
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.Biarkan AI Menentukan Skema Anda
Skema ialah pelan tindakan jadual anda — nama, lajur, jenis dan hubungan. Daripada menulisnya sendiri, berikan model data anda kepada AI dan minta AI menghasilkan skema tersebut.
Banyak tindanan menggunakan ORM seperti Prisma, yang membolehkan anda menentukan skema dalam satu fail dan AI sangat mahir menjana fail itu.
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.Gantikan Ingatan dengan Pangkalan Data
Kini naik taraf titik akhir yang anda bina sebelum ini. Di tempat titik akhir tersebut menggunakan tatasusunan dalam ingatan, titik akhir itu kini harus membaca daripada dan menulis kepada pangkalan data sebenar.
Beritahu AI dengan tepat titik akhir yang perlu dikemas kini dan klien pangkalan data yang perlu digunakan. Melakukannya mengikut titik akhir memastikan setiap satunya boleh diuji.
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 dalam JavaScript Biasa
Di sebalik tabir, CRUD hanyalah operasi terhadap senarai rekod. Berikut ialah versi kecil dalam ingatan bagi keempat-empat operasi — logik yang sama seperti yang dilakukan oleh pangkalan data pada skala besar. Jalankannya untuk melihat penciptaan, pembacaan, pengemaskinian dan pemadaman dalam tindakan.
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());Tambahkan Titik Akhir Kemas Kini dan Pemadaman
Setakat ini, anda boleh mencipta dan membaca. Aplikasi sebenar juga perlu mengedit dan membuang data — seorang pekerja bebas mungkin membetulkan kesilapan taip dalam jam kerja atau memadam entri yang salah.
Minta AI menambahkan titik akhir CRUD yang selebihnya dan pastikan semuanya konsisten dengan titik akhir yang telah anda bina.
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.Migrasi: Mengubah Skema dengan Selamat
Keperluan data anda akan berubah — anda mungkin menambahkan lajur atau jadual baharu. Migrasi ialah perubahan yang dijejaki dan boleh diulang terhadap struktur pangkalan data, supaya anda boleh mengemas kininya tanpa kehilangan data sedia ada.
Alat seperti Prisma menjana migrasi untuk anda. Sentiasa minta AI menggunakan migrasi dan bukannya mengedit pangkalan data secara manual, supaya perubahan selamat dan boleh dikembalikan.
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.Sahkan Data Kekal Selepas Dimulakan Semula
Tujuan utama pangkalan data ialah kekekalan. Ujinya: tambahkan satu entri, hentikan dan mulakan semula aplikasi anda, kemudian muat semula — entri itu sepatutnya masih ada.
Jika data hilang, anda mungkin masih mengakses tatasusunan dalam ingatan di suatu tempat, atau sambungan belum ditetapkan. Terangkan gejala itu kepada AI dan biarkan AI mencari kod yang tertinggal.
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.Data Sebenar, Aplikasi Sebenar
Kini aplikasi anda mempunyai kegigihan sebenar: data dicipta, dibaca, dikemas kini dan dipadam dalam pangkalan data terhos sebenar serta kekal selepas aplikasi dimulakan semula. Anda telah meliputi keempat-empat operasi CRUD dan belajar mengembangkan skema dengan selamat menggunakan migrasi.
Satu bahagian besar masih diperlukan untuk melengkapkan produk: mengetahui siapa yang menggunakan aplikasi ini. Seterusnya, kita akan menambahkan akaun pengguna dan log masuk.
Semakan Pantas
Sahkan asas-asas pangkalan data.
Imbas Kembali: Menambahkan Storan Sebenar
Anda telah memberikan aplikasi anda ingatan yang berkekalan:
- Pangkalan data menyimpan data secara kekal dalam jadual (baris dan lajur)
- Anda mengendalikannya dengan CRUD: Create, Read, Update, Delete
- Pangkalan data terhos (Supabase, Neon) menghapuskan kerumitan persediaan
- AI menjana skema anda dan menggantikan storan dalam ingatan dengan kegigihan sebenar
- Migrasi membolehkan anda mengubah skema dengan selamat
Seterusnya: tambahkan akaun pengguna supaya setiap pekerja bebas hanya melihat data mereka sendiri.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 25
- Pelajaran
- 100
Soalan Lazim
Adakah pelajaran “Menambah Pangkalan Data” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Menambah Pangkalan Data”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menambah Pangkalan Data”?
Simpan dan muatkan data sebenar. Anda berlatih Pengekodan Vibe menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pengekodan Vibe?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Menambah Pangkalan Data” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengekodan Vibe ini?
Ya. Setiap pelajaran Pengekodan Vibe menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Merancang Aplikasi dengan Kecerdasan Buatan
- Bahagian Hadapan dan Bahagian Belakang Bersama
- Menambah Pangkalan Data
- Akaun Pengguna dan Log Masuk