Buka folder
Pilih folder proyek sebagai folder kerja untuk obrolan baru dan pilih Ask first, sehingga setiap perubahan yang menulis file menunggu keputusan Anda. Letakkan file ABI di folder tersebut sebelum memulai.
Alur Kerja
Buat dApp dari folder kosong hingga layar yang teruji
03
Mulai dari folder proyek kosong
Untuk membuat dApp, mulailah dengan folder yang hanya berisi file ABI dari kontrak Anda sendiri. Buka folder tersebut sebagai folder kerja untuk obrolan baru, pilih Ask first, dan jelaskan halaman yang Anda inginkan: tombol sambungkan dompet, saldo, dan baris status transaksi. Agen memetakan folder, mengusulkan file sebagai diff, dan membuat halaman hanya setelah Anda menerima setiap perubahan. Putuskan sebelum memulai di mana proyek akan dijalankan. Rantai lokal di PC Anda cocok untuk percobaan pertama karena koin di dalamnya tidak bernilai, dan jaringan uji publik adalah langkah selanjutnya setelah halaman berfungsi. Gunakan akun sekali pakai di keduanya, jangan gunakan akun yang menyimpan dana asli, dan simpan setiap kunci pribadi dan frasa pemulih di luar folder, obrolan, dan repositori. Hasilnya adalah halaman kecil yang teruji dan README yang dapat diikuti oleh orang lain.
Jelaskan layar
Tuliskan data apa yang ditampilkan halaman dan status transaksi apa yang harus ditangani, dalam kalimat sederhana. Sebutkan fungsi kontrak yang dipanggilnya dan jaringan yang dituju, misalnya rantai lokal Anda.
Tinjau setiap diff
Baca setiap perubahan file yang diusulkan di obrolan, lalu terima atau tolak dengan catatan singkat. Perluas kartu saat Anda ingin melihat diff lengkap, dan tolak apa pun yang tidak dapat Anda jelaskan dalam satu kalimat.
Jalankan dan periksa
Biarkan Shell menjalankan perintah build dan perintah tes Anda, lalu baca kode keluaran pada setiap kartu. Buka halaman terhadap rantai lokal dan bandingkan apa yang ditampilkan dengan harapan Anda. Perbaiki apa yang gagal sebelum menambahkan fitur berikutnya.
File ABI kecil untuk memulai
Baca balanceOf dari ABI dan tampilkan hasilnya di halaman.
- read_file
balance-abi.jsonloaded - write_file
app.jssaved - edit_file
index.html+4 baris - Shell
your build commandexit 0
menunggu persetujuan Anda sebelum melanjutkanTolakTerima
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Bagian JSON ini mendeskripsikan satu fungsi hanya-baca, balanceOf, fungsi pembaca saldo yang digunakan oleh token ERC-20. Fungsi ini menerima alamat bernama account dan mengembalikan uint256. Antarmuka depan menggunakan ABI seperti ini untuk memanggil kontrak, dan file ini tidak menyimpan kunci maupun rahasia. Simpan sebagai balance-abi.json di folder proyek, dan ganti dengan ABI penuh kontrak Anda sendiri setelah halaman berfungsi, karena kontrak asli biasanya memiliki lebih banyak fungsi.
Panduan untuk dApp pertama
Petakan folder dan baca ABI
Cara yang baik untuk mulai belajar web3 adalah membaca satu file ABI kecil sebelum menulis apa pun. Minta agen untuk membuka balance-abi.json. read_file menampilkan file, list_dir menunjukkan apa lagi yang ada di folder, dan grep mengonfirmasi nama fungsi yang tepat. Agen kemudian menjelaskan di obrolan bahwa balanceOf adalah fungsi view: ia membaca data dan tidak mengirim transaksi, sehingga memanggilnya tidak mengubah apa pun di rantai. Belum ada yang ditulis. Agen juga mencantumkan apa yang akan dibutuhkan halaman, yaitu koneksi ke node, alamat kontrak yang telah dideploy, dan akun untuk dilihat. Periksa setiap pernyataan terhadap JSON di kartu, karena model dapat salah membaca tipe atau menamai fungsi yang tidak ada di file, dan minta koreksi sebelum melanjutkan.
Sambungkan halaman ke rantai lokal
Minta halaman yang membaca saldo akun uji sekali pakai. write_file membuat app.js dengan panggilan ke rantai lokal Anda melalui JSON-RPC, dan edit_file menambahkan baris skrip ke index.html. Anda hanya memerlukan alat lintas rantai ketika dApp berbicara ke beberapa rantai; proyek pertama di satu rantai lokal tidak memerlukan apa pun, jadi tinggalkan saja. Dalam mode Ask first, kedua perubahan menunggu sebagai diff. Bacalah dan terimalah. Shell kemudian menjalankan perintah build Anda, dan kartu menampilkan kode keluaran yang sebenarnya. Buka halaman, bandingkan angka yang ditampilkan dengan angka yang dilaporkan rantai lokal Anda untuk akun yang sama, dan minta agen memperbaiki halaman jika keduanya berbeda. Simpan alamat rantai di satu tempat, sehingga mengubah jaringan nanti berarti mengedit satu baris saja.
Kelola status transaksi
Beralih dari web2 ke web3 sebagai pengembang sebagian besar berarti menambahkan dompet, jaringan, dan status transaksi ke layar yang sudah Anda ketahui cara bangunnya. Minta agen menambahkan baris status dengan 5 status: belum dikirim, menunggu dompet, tertunda, dikonfirmasi, dan gagal. edit_file mengubah skrip dan lembar gaya, dan grep menemukan tempat di mana status masih hilang. Dompet menandatangani; kode Anda tidak pernah menyentuh kunci pribadi atau frasa pemulih. Juga minta pesan untuk dompet yang hilang, jaringan yang salah, dan penandatanganan yang ditolak, karena pengguna asli akan menemui mereka suatu hari nanti. Jalankan halaman di jaringan uji dengan akun sekali pakai, tolak tanda tangan secara sengaja, dan periksa apakah status gagal muncul dengan pesan yang jelas.
Uji, lalu dokumentasikan proyek
Minta agen menulis tes antarmuka depan untuk setiap status dan README singkat yang menjelaskan cara menjalankan proyek. write_file membuat kedua file tersebut, Shell menjalankan perintah tes Anda, dan kartu melaporkan kode keluaran yang sebenarnya. Pengembang dApp yang kembali ke proyek sebulan kemudian akan membaca README itu terlebih dahulu, jadi periksa apakah itu hanya menyebutkan perintah yang benar-benar Anda gunakan dan apakah itu menyebutkan jaringan yang diharapkan halaman. Gunakan mode Plan only terlebih dahulu jika Anda ingin melihat daftar langkah sebelum file dibuat, lalu beralih ke Ask first untuk melaksanakannya. Baca setiap diff, jalankan tes sendiri sekali di jaringan uji dengan akun sekali pakai, dan simpan README di sebelah file ABI agar keduanya tetap sinkron.
