Membina Apl dengan Pengaturcaraan Pasangan AI: Pelajaran daripada Sprint kami

Sebagai pembangun, kami sentiasa mencari cara untuk meningkatkan produktiviti kami dan memperkemas aliran kerja kami. Dengan kemajuan terkini dalam AI (dan keyakinan teguh saya bahawa teknologi ini akan mengubah permainan), saya memutuskan untuk menguji alatan ini dalam senario pembangunan dunia sebenar.

• Matlamat Saya: Bina apl penjejakan makanan berkuasa AI tindanan penuh PoC dalam masa 7 jam sahaja.

• Hasilnya: Ia berfungsi dengan baik! Tetapi bukan tanpa cabaran.

Berikut ialah perkara yang saya pelajari tentang menggunakan AI sebagai rakan pembangunan.

Projek

Matlamatnya bercita-cita tinggi tetapi tertumpu: cipta apl mudah alih yang membolehkan pengguna mengambil gambar makanan mereka dan log masuk secara automatik ke penjejak makanan menggunakan pengecaman AI. Tindanan teknologi termasuk pilihan saya: Quasar Framework (VueJS Framework), Google Firebase dan Capacitor (Mobile Dev Framework), dengan Google Gemini 2.0 Flash for AI inferens.

Tiada apa-apa yang super mewah, tetapi lebih daripada cukup kerumitan untuk menguji bantuan AI.

A.I. Alatan

Saya menggunakan gabungan alatan AI untuk membantu dengan pelbagai aspek projek:

1. ChatGPT (Model o1): Untuk perancangan peringkat tinggi, pengumpulan keperluan dan panduan am
2. Claude 3.5 Sonnet melalui WindSurf/Cascade: Untuk penjanaan kod dan tugas pembangunan khusus, saya menggunakan alat yang dipanggil WindSurf oleh Codeium. Ia pada asasnya adalah IDE yang dibina dari Kod Visual Studio dengan A.I. penulis kod terbina dalam. Ia mempunyai akses terus kepada fail dan boleh menulis dan mengedit keseluruhan fail dengan cepat dengan kawalan versi.
3. Google Gemini 2.0 Flash: Untuk pengecaman imej dan klasifikasi makanan. Model ini sangat berkuasa dan sangat murah.

Pendekatan "AI sebagai Dev Intern".

Salah satu cerapan paling berharga yang saya peroleh ialah memikirkan AI sebagai pembangun junior atau pelatih. Model mental ini benar-benar mengubah cara saya mendekati kerjasama. Sama seperti anda tidak akan membuang keseluruhan projek pada meja pelatih baharu dan mengharapkan hasil yang sempurna, saya belajar untuk:

• Tegaskan dengan arahan
• Pecahkan tugas kepada bahagian yang boleh diurus
• Semak output dan berikan maklum balas
• Jangan mengharapkan terlalu banyak sekaligus
• Beri tunjuk ajar dan arahan apabila diperlukan

Pendekatan ini membawa kepada hasil yang lebih baik, dan berfungsi lebih baik daripada menganggap AI sebagai sama ada "semua tahu" atau "tidak boleh dipercayai sepenuhnya".

Apa yang Berfungsi dengan Baik

Perancangan dan Keperluan

AI terbukti sangat membantu dalam fasa perancangan. Saya bermula dengan garis besar projek kasar dan menggunakan gesaan berulang untuk memperhalusinya. Contohnya, salah satu gesaan awal saya ialah:

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Ini mencetuskan bolak-balik yang membantu menggambarkan skop dan garis masa projek, yang membawa kepada pelan yang lebih realistik dan terperinci.

Dokumentasi

Alat AI cemerlang dalam menjana dan menyelenggara dokumentasi. Ia boleh mencipta fail penurunan harga yang komprehensif dengan cepat dan memastikannya dikemas kini semasa projek berkembang. Ini membebaskan masa yang berharga untuk kerja pembangunan sebenar.

Perkembangan Berulang

Memecahkan pembangunan kepada gesaan berfokus yang lebih kecil terbukti sangat berkesan. Daripada cuba menjana keseluruhan komponen sekaligus, saya menggunakan rangkaian gesaan, setiap membina pada yang sebelumnya. Contohnya:

1. Mula-mula, sediakan infrastruktur bahagian belakang Firebase
2. Kemudian, bina pelat dandang bahagian hadapan
3. Mengikuti dengan ciri khusus seperti skrin tangkapan kamera
4. Akhir sekali, menambah pemprosesan data dan fungsi paparan

Helah kemas yang saya dapati, ialah memiliki A.I. simpan nota kemajuan dan langkah seterusnya, supaya ia boleh mempunyai sesuatu untuk dirujuk di antara gesaan. Memandangkan saya menggunakan WindSurf, saya boleh menggunakan "master prompt" untuk meneruskan perbualan. Gesaan induk akan mengarahkan A.I. untuk merujuk kembali pada nota dan menambahnya sambil menulis kod.

Pembetulan Pepijat dan Pembangunan Pasca

Satu lagi tempat di mana WindSurf bersinar adalah dalam pembetulan pepijat dan tugas pasca pembangunan.

Selepas menguji apl saya dan mencatat beberapa pepijat, saya menyerahkan senarai saya kepada WindSurf dan ia boleh mengenal pasti dan membetulkan isu dengan cepat, malah menjana kes ujian untuk memastikan pembetulan berjaya. Ini menjimatkan banyak masa dan usaha saya.

Saya mempunyai senarai pepijat berikut dan hanya beberapa kali sahaja saya perlu membetulkannya secara manual:

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

• [x] BUG> Kamera menjadi kosong selepas mengambil gambar dan menekan batal (Pelaksanaan web)
• [x] BUG> Dalam Paparan Makanan yang Dikesan Jika tiada makanan dikesan, senarai kosong, itu bagus, tetapi kita harus menunjukkan beberapa jenis ikon dan teks untuk menjelaskan bahawa tiada makanan telah ditambahkan atau dikesan
• [x] BUG> Dalam Paparan Makanan yang Dikesan, adalah baik untuk menambah setiap Item (tajuk teks, keyakinan, butang padam, pilih lungsur makanan yang sepadan) dikumpulkan dengan lebih baik untuk menjelaskan bahawa semua elemen tersebut adalah sebahagian daripada pengesanan makanan yang sama. Ini boleh dilakukan melalui kad q, penggayaan yang lebih baik, atau apa sahaja
• [ * ] BUG> Dalam Paparan Makanan Yang Dikesan, lungsur turun Pilih Makanan yang sepadan tidak dibuka semula dengan betul apabila cuba membuka menu lungsur untuk sesuatu yang ditambahkan semata-mata melalui carian (bukannya item yang ditambahkan melalui kamera )
• [x] BUG> Dalam Paparan Makanan Dikesan, butang Batal harus mengembalikan pengguna ke Papan Pemuka debounceSearch tidak seharusnya menyala jika input kosong
• [-] CIRI> Penyerahan Kemasukan (Backend) - Ambil IMG, dan ubah saiz, pangkas, mampatkan, dsb. untuk menjadikan imej muat dengan baik dalam segi empat sama 128*128 dengan baik. Cipta berbilang saiz untuk imej dan tambahkan pautan pada imej dalam rekod untuk diserahkan (bersebelahan imageUrl)
• [x] CIRI> Papan pemuka - Tunjukkan IMG untuk setiap kemasukan hidangan yang ditangkap, memuatkan saiz yang sesuai
• [x] CIRI> Tambah Lihat Halaman Makanan -> tunjukkan semua butiran dan carta dan bahan
• [x] CIRI> Tambah Edit Fungsi Makanan -> Kembalikan modal daripada paparan halaman Kamera, tetapi gunakan modal sahaja. Jangan mulakan kamera.
• [x] CIRI> Tambah Fungsi Padam Hidangan
• [x] CIRI> Sejarah Lihat Hidangan: Keupayaan untuk melihat SEMUA entri MAKAN, dinomborkan, mengikut hari. Gunakan Garis Masa Quasar -> mempunyai butang Makanan dalam menu pergi ke halaman ini. Halaman ini harus menunjukkan jenis kad yang sama yang ditunjukkan untuk penyertaan makanan pada IndexPage.vue
• [x] CIRI> Sejarah Lihat Air: Keupayaan untuk melihat SEMUA entri WATER, dinomborkan, mengikut hari, Gunakan garis masa Quasar -> mempunyai butang Air dalam menu pergi ke halaman ini. Halaman ini harus menunjukkan jenis kad yang sama yang ditunjukkan untuk kemasukan air pada IndexPage.vue
• [x] BUG> Sejarah air Suntingan tidak berfungsi
• [x] BUG> Data sejarah air adalah pelik

Cabaran dan Gotchas

Tidak semuanya berjalan lancar. Beberapa cabaran utama muncul:

Isu Penyuntingan Fail

Saya menemui beberapa batasan apabila melibatkan pengubahsuaian fail:

• Fail terbuka kadangkala seolah-olah terkunci / menjadi tidak boleh diedit oleh WindSurf
• Perbualan yang lebih lama benar-benar mengurangkan kualiti penyuntingan kod

NOTA: Semasa menulis ini, nampaknya pepijat penyuntingan fail kunci/gagal telah dibetulkan dalam versi terkini WindSurf.

Pengurusan Konteks

Kualiti bantuan AI merosot dalam perbualan yang lebih panjang. Saya belajar untuk memulakan perbualan baharu untuk komponen baharu dan menyediakan konteks yang padat daripada cuba mengekalkan satu sesi yang panjang.

Memandangkan kod semakin panjang dan kompleks, AI bergelut untuk bersaing. Saya terpaksa membahagikan tugas kepada bahagian yang lebih kecil dan lebih mudah diurus untuk mengekalkan kualiti atau perlu memberikan banyak butiran dan konteks untuk memastikan AI berada di landasan yang betul.

Menyingkir dari landasan akan memerlukan ciri yang digugurkan, memadamkan kod yang berkaitan atau kadangkala membina perkara yang salah sepenuhnya. Ini adalah masa yang besar, dan saya perlu berhati-hati untuk memastikan AI berada di landasan yang betul atau memutuskan untuk membuat kod secara manual.

Mengetahui Masa Kod Secara Manual

Kadangkala, melakukannya sendiri adalah lebih pantas. Belajar mengenali detik-detik ini menjimatkan banyak masa dan kekecewaan. Seperti yang dinyatakan dalam log pembangunan saya: "Apabila ia berfungsi, ia berfungsi dengan baik. Apabila ia tidak, ia boleh menjadi tenggelam masa."

Amalan Terbaik Yang Muncul

1. Git Commit Kerap: Sebelum AI membuat perubahan ketara, lakukan keadaan semasa anda. Ini memberikan sandaran yang mudah jika berlaku kesilapan.

2. Sediakan Kod Boilerplate: Sediakan struktur projek dan konfigurasi asas anda sebelum menggunakan bantuan AI. Dalam kes saya, ini bermakna:

   • Menyediakan Quasar/Vue CLI
   • Mengkonfigurasi Firebase CLI dan komponen
   • Mewujudkan struktur projek asas

3. Gesaan yang Jelas dan Terperinci: Jadikan sespesifik mungkin dengan keperluan anda. Sertakan konteks dan contoh yang berkaitan. Luangkan seberapa banyak masa yang anda boleh dalam keperluan dan fasa reka bentuk anda, dan berikan seberapa banyak perincian yang mungkin. Nota dan arahan ini bukan sahaja akan membantu anda melaksanakan projek anda dengan lebih baik, tetapi ia meningkatkan kualiti kod yang dihasilkan oleh AI secara drastik.

4. Maklum Balas Berulang: Jangan teragak-agak untuk membetulkan atau membimbing AI. Sebagai contoh, apabila saya menerima output yang tidak sepadan dengan keperluan, saya memberikan maklum balas khusus:
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Maklum balas khusus jenis ini biasanya membawa kepada pembetulan yang cepat dan tepat.

Keputusan

Menggunakan AI mempercepatkan pembangunan secara mutlak. Walaupun ia memerlukan bimbingan dan pembetulan sekali-sekala, gabungan ChatGPT dan Claude bersama-sama dengan WindSurf membolehkan saya maju lebih jauh daripada yang saya boleh lakukan bersendirian dalam jangka masa yang sama.

Namun, kejayaan memerlukan pemahaman kedua-dua keupayaan dan batasan alat ini. Kuncinya ialah mencari keseimbangan yang tepat antara bantuan AI dan kepakaran manusia, menggunakan setiap tempat di mana mereka cemerlang.

Memandang ke Hadapan

Percubaan ini mencadangkan masa depan di mana alatan AI menjadi sebahagian daripada aliran kerja pembangunan - buat masa ini, bukan menggantikan pembangun, tetapi menambah keupayaan mereka. Perkara utama ialah belajar menggunakan alatan ini dengan berkesan, memahami kekuatan dan batasannya serta membangunkan aliran kerja yang memaksimumkan faedahnya sambil meminimumkan kelemahannya.

Bagi pembangun yang berminat untuk memasukkan AI ke dalam aliran kerja mereka, saya syorkan bermula dari kecil, mewujudkan corak interaksi yang jelas dan secara beransur-ansur mengembangkan peranan AI apabila anda menjadi lebih selesa dengan keupayaan dan batasannya.

Alat berada pada tahap pembangun junior, dan tidak lama lagi dengan data latihan dan lelaran yang mencukupi, mereka akan dapat melakukan lebih banyak lagi. Saya dapat melihat alat ini akhirnya menulis keseluruhan aplikasi dan mengendalikan sebahagian besar proses pembangunan. Sehingga model boleh mensimulasikan pembangun kanan, kami masih memerlukan pengawasan dan bimbingan manusia.

Kekuatan:

• Dokumentasi: Menjana dan menyelenggara dokumentasi
• Pembetulan Pepijat Kecil / Penyelesaian Masalah: Mengenal pasti dan membetulkan pepijat
• Ujian Unit: Menjana kes ujian dan memastikan kualiti kod
• Penjanaan Kod / Komponen Kecil: Menulis kod boilerplate dan komponen asas untuk membantu anda bermula
• Perhimpunan Perancangan dan Keperluan: Menggariskan skop dan garis masa projek
• Persediaan Infrastruktur: Mengkonfigurasi struktur dan persediaan projek asas, dengan Terraform, Dockerfiles, dsb.
• Pembelajaran Pantas dan Penjanaan Prototaip: Mempelajari rangka kerja baharu dengan pantas dan menjana prototaip

Kelemahan:

• Logik Kompleks: Mengendalikan logik perniagaan yang rumit atau algoritma kompleks
• Reka Bentuk dan UX: Mencipta antara muka atau pengalaman pengguna yang menarik secara visual
• Menulis Komponen Lebih Besar: Menulis modul kompleks atau komponen yang lebih besar hujung ke hujung
• Konteks / Memori: Mengekalkan konteks sepanjang perbualan yang panjang atau merentas berbilang komponen
• Penyahpepijatan Kompleks: Menyelesaikan masalah rumit atau kes tepi, selalunya memerlukan bimbingan untuk menjadi berguna
• Terkini dengan Teknologi Terkini: Mengikuti rangka kerja, perpustakaan dan amalan terbaik terkini

Saya teruja untuk melihat ke mana perginya teknologi ini dan bagaimana ia akan membentuk masa depan pembangunan perisian.

Gambar-gambar!!!

Berikut ialah beberapa tangkapan skrin pantas apl yang saya dapat bina dalam masa 7 jam. Ia tidak sempurna, tetapi ia adalah permulaan yang kukuh!

(Menggunakan Kamera untuk Menangkap Makanan)

(Menghantar Imej kepada AI untuk Pengecaman Makanan)

(Melihat Keputusan - Menambah Makanan pada Penjejak)

(Mengesahkan Kemasukan Makanan)

(Paparan Papan Pemuka)

(Pandangan Kemasukan Makanan)

Palam Tidak Malu, Tetapi Relevan:

Semasa saya masih mengusahakan apl makanan yang disebut dalam siaran ini, saya dapat menyelesaikan projek lain dengan agak pantas menggunakan WindSurf dan A.I.

Jika anda berminat dengan penolong Git CLI yang dikuasakan AI untuk menjadikan mesej komit dan nota keluaran lebih mudah diselenggara, lihat eGit

Atas ialah kandungan terperinci Membina Apl dengan Pengaturcaraan Pasangan AI: Pelajaran daripada Sprint kami. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!