Membina App Sebenar Bersama AI

20 minitPertengahanHTML · CSS · JS

Dalam pelajaran ini

Tulis spesifikasi ringkas dengan kriteria penerimaan, edge case dan skop
Pecahkan satu ciri kepada langkah kecil yang setiap satunya mudah disemak dan diuji
Hantar satu ciri dengan tabiat semakan dan pengujian daripada track ini

Idea utama

Pembantu AI paling pantas bila anda jelas. Tentukan maksud "siap", kemudian bergerak dalam langkah yang cukup kecil supaya anda faham setiap baris sebelum mengambil langkah seterusnya.

Pelajaran ini menggabungkan keseluruhan track untuk satu ciri yang kecil tetapi sebenar: penjejak duit poket memerlukan penapis kategori. Anda akan memainkan dua peranan — orang yang mengarahkan pembantu AI, dan penyemak yang memutuskan apa yang dihantar. (Kod ada dalam editor; tiada panggilan AI di sini, jadi anda akan tulis atau tampal setiap langkah sendiri.)

Aliran kerja

Spesifikasi — tulis maksud "siap": matlamat, kriteria penerimaan, edge case, dan apa yang di luar skop. Ini menjadi context untuk setiap prompt dan pelan ujian anda.
Rancang langkah kecil — minta pembantu AI beri pelan sebelum kod. Susun semula supaya bahagian yang paling mudah diuji didahulukan: function tulen, kemudian sambungan UI, kemudian kemasan.
Satu langkah bagi setiap prompt — sertakan spesifikasi, kod yang berkaitan dan kekangan. Minta perubahan paling kecil.
Semak → jalankan → uji — baca diff, jalankan, semak berdasarkan kriteria penerimaan dan edge case.
Commit bila lulus — commit selepas setiap langkah yang berfungsi bermakna langkah seterusnya yang buruk hanya satu git restore jauhnya.

Satu prompt gergasi

Markdown

Add filtering, editing, charts, dark mode and
saving to localStorage to my expense app.

Langkah 1 daripada 3

Markdown

Spec: <paste spec.md>
Code: <paste the expenses array and render()>

Step 1 only: write filterExpenses(items, category)
and totalOf(items) as pure functions. "all" returns
every item. Don't touch the DOM yet. Don't mutate
items. Include 3 example calls with expected results.

Prompt gergasi menghasilkan diff gergasi yang tiada siapa boleh semak. Prompt langkah menghasilkan dua function kecil yang boleh diuji dalam beberapa saat.

Tahu bila perlu berhenti memberi prompt

Jika anda sudah minta pembaikan yang sama tiga kali dan ia masih salah, pembantu AI kekurangan context atau masalahnya disalah faham. Berhenti, debug sendiri (pelajaran 5), kemudian kembali dengan bukti.

Senarai semak akhir

Sebelum menghantar: baca keseluruhan diff · setiap kriteria penerimaan disemak · edge case dicuba sendiri · ujian lulus dan boleh gagal · tiada input pengguna dalam innerHTML, tiada rahsia di frontend · tiada arahan yang tidak difahami dijalankan · anda boleh menerangkan setiap baris kepada rakan sepasukan.

Isi spec.md untuk penapis kategori. Gantikan nota dalam kurungan dengan kandungan sebenar:

- Kriteria penerimaan yang boleh disemak oleh penguji satu demi satu, - sekurang-kurangnya satu edge case (bagaimana jika satu kategori tiada perbelanjaan?), - apa yang di luar skop.

Guna senarai (baris yang bermula dengan - ). Bahasa Inggeris atau Melayu, kedua-duanya boleh.

Semakan

Sekurang-kurangnya 4 poin senarai sebenar
Menyebut satu edge case
Nota templat telah diganti

Semak sendiri

Latihan ini terbuka, jadi anda yang menilai. Tandakan setiap item dengan jujur apabila ia benar.

Setiap kriteria penerimaan ialah sesuatu yang boleh saya semak dengan klik atau dengan memanggil function.

Uji kefahaman

Susunan langkah manakah yang menjadikan ciri binaan AI paling mudah disemak?

Jana keseluruhan ciri, kemudian baca semuanya di hujungSpesifikasi → function tulen kecil dengan ujian → sambungan UI → semakan akhirUI dahulu, ujian hanya jika ada yang rosak

Kenapa sertakan "Di luar skop" dalam spesifikasi yang diberi kepada pembantu AI?

Ia menjadikan prompt nampak profesionalIa menghalang tambahan yang "membantu" tetapi tidak diminta daripada menyelinap masuk ke dalam diffPembantu AI memerlukannya

Anda sudah minta pembantu AI membaiki bug yang sama tiga kali, dan ia masih rosak. Apakah langkah terbaik seterusnya?

Tanya kali keempat dengan ayat yang samaDebug sendiri untuk mengumpul bukti, kemudian beri prompt semula dengan apa yang anda temuiTerima versi terkini dan teruskan

Apa yang anda pelajari

Mulakan dengan spesifikasi: matlamat, kriteria penerimaan, edge case, di luar skop.
Bina dalam langkah kecil, bahagian yang boleh diuji dahulu; satu langkah bagi setiap prompt.
Semak → jalankan → uji → commit, setiap langkah.
Anda yang menghantarnya, jadi anda mesti memahaminya — pembantu AI ialah rakan kerja yang pantas, bukan yang bertanggungjawab.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.