Merencanakan dan Membangun Aplikasi dengan Conductor Gemini CLI

1. Pengantar

Ekstensi Gemini CLI Conductor telah berkembang untuk bekerja dengan pilihan agen coding yang lebih luas, termasuk Antigravity CLI dan Claude Code. Lihat codelab baru tentang plugin Conductor.

Dalam codelab ini, Anda akan mempelajari cara merencanakan dan membuat aplikasi software dengan ekstensi Gemini CLI Conductor. Anda akan mulai dengan membuat aplikasi "greenfield" sepenuhnya dari awal. Kemudian, Anda akan memperlakukannya sebagai project "brownfield", dengan melakukan iterasi untuk menambahkan autentikasi dan penyimpanan.

Yang akan Anda lakukan

• Menginstal Gemini CLI dan ekstensi Conductor
• Membuat aplikasi web "Picker Wheel" dari awal menggunakan kemampuan perencanaan dan penerapan Conductor
• Menambahkan personalisasi ke aplikasi dengan menambahkan autentikasi dan penyimpanan menggunakan Firebase

Yang akan Anda pelajari

• Cara menggunakan ekstensi Conductor untuk merencanakan, menerapkan, dan meninjau aplikasi "greenfield"
• Cara menggunakan ekstensi Conductor untuk menambahkan fitur ke aplikasi "brownfield"

Yang akan Anda butuhkan

• Browser web seperti Chrome
• Project Google Cloud yang mengaktifkan penagihan
• Node.js terinstal (versi 18+ direkomendasikan)
• Editor kode Lokal seperti Visual Studio Code

2. Sebelum memulai

Membuat Project Google Cloud

1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan diaktifkan di project.

Mulai Cloud Shell

Dengan menggunakan Cloud Shell, kita dapat menyelesaikan bagian ini tanpa harus menginstal alat CLI gcloud dan firebase secara lokal.

Cloud Shell adalah lingkungan command line yang berjalan di Google Cloud dan sudah dilengkapi dengan alat yang diperlukan.

1. Klik Activate Cloud Shell di bagian atas konsol Google Cloud.
2. Setelah terhubung ke Cloud Shell, verifikasi autentikasi Anda:

   gcloud auth list
   

3. Pastikan project Anda dikonfigurasi:

   gcloud config get project
   

4. Jika project Anda tidak ditetapkan seperti yang diharapkan, tetapkan project:

   export PROJECT_ID=<YOUR_PROJECT_ID>
   gcloud config set project $PROJECT_ID
   

Mengaktifkan API

Aktifkan Firebase Management API di project Google Cloud Anda.

gcloud services enable firebase.googleapis.com

Menambahkan Firebase ke project Anda

Firebase CLI sudah terinstal di Cloud Shell. Dari Cloud Shell, login dengan Akun Google yang sama yang memberi Anda akses ke project Google Cloud. Jika Anda bekerja secara lokal, instal Firebase CLI dengan mengikuti petunjuk.

firebase login

Jalankan perintah berikut untuk menambahkan Firebase ke project Google Cloud Anda:

firebase projects:addfirebase

Jika ini adalah pertama kalinya Anda menjalankan firebase CLI, jawab pertanyaan yang diajukan kepada Anda.

Keluar dari Cloud Shell

Anda dapat menutup jendela Cloud Shell. Di bagian berikut, kita akan mengonfigurasi lingkungan lokal Anda.

3. Menginstal Gemini CLI dan Conductor secara lokal

Pada langkah ini, Anda akan menyiapkan lingkungan pengembangan lokal dengan menginstal Gemini CLI dan ekstensi Conductor menggunakan editor kode dan terminal lokal.

Menginstal Gemini CLI

1. Instal Gemini CLI versi terbaru secara global menggunakan npm:

   npm install -g @google/gemini-cli
   

   Jika Anda melihat error izin, Anda mungkin perlu menggunakan pengelola versi seperti nvm, atau menjalankan perintah ini sebagai root menggunakan sudo.

2. Mulai ulang terminal agar gemini ditambahkan ke PATH Anda.
3. Verifikasi penginstalan telah menginstal versi terbaru:

   gemini --version
   

4. Buat dan ubah ke direktori project baru: Di bagian selanjutnya, kita akan membuat project di direktori picker-wheel. Buat direktori tersebut sekarang dan ubah ke direktori ini:

   mkdir picker-wheel
   cd picker-wheel
   

5. Autentikasi:
   • Mulai Gemini CLI.

     gemini
     

   • Saat ditanya "Do you trust the files in this folder?", pilih Trust folder (picker-wheel)
   • Saat ditanya "How would you like to authenticate for this project?", pilih Vertex AI. Ikuti panduan autentikasi untuk mendapatkan kunci Google Cloud API dan menetapkan variabel lingkungan GOOGLE_API_KEY. Luangkan waktu untuk mempelajari berbagai tingkat penggunaan dan batas tarif API yang sesuai.
6. Keluar dari Gemini CLI: Ketik /quit dari terminal CLI untuk mengakhiri sesi Gemini CLI live Anda sebelum melanjutkan.

Menginstal Ekstensi Conductor

Conductor adalah ekstensi Gemini CLI open source yang dibuat Google yang memungkinkan fitur pengembangan berbasis konteks seperti pelacakan perencanaan dan penerapan.

1. Instal ekstensi:

   gemini extensions install https://github.com/gemini-cli-extensions/conductor
   

2. Verifikasi penginstalan:
   • Mulai Gemini CLI.

     gemini
     

   • Ketik /conductor dan Anda akan melihat daftar perintah seperti setup, newTrack, implement, dll.
3. Keluar dari Gemini CLI: Ketik /quit dari terminal CLI untuk mengakhiri sesi Gemini CLI live Anda sebelum melanjutkan.

4. Pengembangan Greenfield: Picker Wheel

Setelah lingkungan Anda disiapkan, Anda akan membuat aplikasi baru dari awal. Anda akan membuat "Picker Wheel" — aplikasi web ringan yang berputar untuk memilih opsi acak.

Menyiapkan Konteks Produk

1. Pastikan Anda berada di picker-wheel direktori yang Anda buat di bagian sebelumnya:

   pwd
   

2. Mulai Gemini CLI: Mulai sesi Gemini CLI baru dari direktori project Anda.

   gemini
   

3. Inisialisasi Conductor: Jalankan perintah penyiapan untuk membuat kerangka project dan menyiapkan lingkungan Conductor.

   /conductor:setup
   

4. Ikuti perintah interaktif: Perintah interaktif yang Anda lihat tidak akan sama persis dengan contoh ini. Fokus pada desain yang lebih sederhana untuk membiasakan diri dengan alur kerja Conductor.
   • Sasaran produk: Aplikasi web yang menampilkan roda berputar yang dapat dikonfigurasi untuk memilih item acak dari daftar.
     • Audiens Target → Masyarakat Umum
     • Interaksi → Ketuk/Klik untuk Memutar
     • Penyesuaian → Dasar
     • Platform → Desktop-First
   • Pedoman produk: Buat otomatis.
   • Teknologi:
     • Bahasa → TypeScript/JavaScript - Ideal untuk web full-stack
     • Frontend → Vue.js - Antarmuka web intuitif
     • Backend → Express.js - Backend Node cepat
     • Database → Tidak Ada - Tidak memerlukan database
   • Alur kerja: Standar.
   • Persyaratan produk:
     • Kisah Pengguna → Opsi yang Dapat Disesuaikan, Tampilan Pemenang yang Jelas
     • Fitur Utama → Daftar Opsi yang Dapat Diedit, Warna Acak
     • Batasan → Sisi Klien Saja, Performa Tinggi
     • Non-Fungsional → Cakupan Pengujian Tinggi, TypeScript &Vue.js, Desain Responsif
   Conductor akan membuat file konteks di direktori conductor/.

Membuat Jalur Baru

"Jalur" di Conductor mewakili fitur atau unit kerja.

1. Mulai jalur baru menggunakan /conductor:newTrack. Conductor mungkin mengusulkan jalur awal berdasarkan konteks produk. Atau, Anda dapat mengusulkan jalur Anda sendiri atau meminta Conductor untuk menyarankan jalur.
2. Tinjau rencana yang dibuat: Conductor akan membuat index.md, spec.md, dan plan.md di dalam conductor/tracks/{track-id}/. Luangkan waktu untuk membacanya. Jika semuanya terlihat bagus, Conductor akan meminta Anda untuk menyimpan dan melakukan commit file penyiapan awal.

Menerapkan Jalur

1. Mulai penerapan:

   /conductor:implement
   

   Conductor kini akan menjalankan rencana, menulis kode untuk project.

   Tips: Untuk menghindari masalah pada shell interaktif atau proses yang berjalan lama (seperti server pengembangan atau pemantau pengujian), kita harus memastikan bahwa Conductor mengetahui persis cara menangani perintah tertentu ini. Alat seperti Vite (npm run dev) dan Vitest (npm run test) sering kali berjalan dalam "mode pemantauan" secara default, yang membuat proses tetap terbuka tanpa batas waktu. Anda dapat menginstruksikan Conductor untuk menonaktifkan mode pemantauan atau menggunakan is_background: true saat menjalankan perintah dengan memperbarui workflow.md.

2. Verifikasi aplikasi: Selama fase penerapan, Conductor akan meminta Anda untuk menguji aplikasi secara manual. Misalnya, Conductor akan meminta Anda untuk membuka server web lokal, melihat pratinjau aplikasi di browser, dan memverifikasi perubahan. Setelah penerapan selesai, Anda akan melihat picker wheel yang berfungsi.

   Pemecahan masalah: Jika kode yang dibuat berperilaku tidak terduga, periksa conductor/tracks/.../plan.md untuk mengetahui langkah atau error yang dilewati.

3. Tinjau penerapan: Sebagai langkah terakhir, Anda dapat meminta Conductor untuk meninjau penerapan. Conductor harus meninjau kode sumber, menyinkronkan dokumentasi project, dan mengarsipkan jalur.

   /conductor:review
   

5. Iterasi Brownfield: Menambahkan Personalisasi

Sekarang Anda akan beralih ke pengembangan "brownfield". Anda akan meningkatkan aplikasi web picker wheel dari bagian sebelumnya sehingga pengguna yang login dapat menyimpan dan memulihkan konfigurasi picker wheel mereka.

Jika ingin langsung menggunakan aplikasi brownfield, Anda dapat mendownload kode golden dari bagian terakhir untuk implementasi referensi dan terus membangunnya.

Membuat Jalur Personalisasi

1. Dalam contoh "brownfield" berikut, kita akan menggunakan Firebase untuk autentikasi dan penyimpanan. Instal ekstensi Firebase Gemini CLI agar Conductor dapat menggunakannya.

   gemini extensions install https://github.com/firebase/agent-skills
   

2. Mulai Gemini CLI: Mulai sesi Gemini CLI baru dari direktori project Anda.

   gemini
   

3. Mulai jalur baru: Mulai jalur baru.

   /conductor:newTrack "I want users to be able to log in to their accounts and
   save their picker wheel configurations."
   

4. Ikuti perintah interaktif: Perintah interaktif yang Anda lihat tidak akan sama persis dengan contoh ini. Fokus pada desain yang lebih sederhana untuk membiasakan diri dengan alur kerja Conductor.
   • Sasaran jalur:
     • Penyedia Autentikasi → Firebase Auth
     • Konfigurasi Tersimpan → Opsi Roda
     • Penyimpanan Data → Firestore
     • UI Login Firestore → Overlay Modal
   Conductor akan membuat file konteks untuk jalur baru di dalam conductor/tracks/{track-id}.
5. Tinjau rencana yang dibuat: Luangkan waktu untuk membaca index.md, spec.md, dan plan.md di dalam conductor/tracks/{track-id}/.

   Tips: Anda dianjurkan untuk berkomunikasi dengan Gemini untuk memahami dan membahas rencana sebanyak mungkin sebelum melanjutkan ke penerapan.

6. Terapkan: Jika semuanya terlihat bagus, Anda dapat memulai penerapan.

   /conductor:implement
   

7. Verifikasi: Muat ulang aplikasi Anda. Anda akan melihat aplikasi yang telah diperbarui.

   Jika AI mengalami masalah saat menguji penerapan autentikasi, ingatlah untuk mengaktifkan Login dengan Google di Firebase Console di bagian Authentication > Sign-in method.

   

Berikut adalah kode golden untuk implementasi referensi. Anda harus memberikan project Firebase di .firebaserc dan konfigurasi Firebase di firebase.ts untuk memulai aplikasi dengan benar.

6. Pembersihan

Untuk menghindari biaya berkelanjutan ke akun Google Cloud Anda, hapus resource yang dibuat selama codelab ini.

Menghapus Project Firebase (dan Project Google Cloud)

Cara termudah untuk membersihkan adalah dengan menghapus seluruh project.

1. Di Konsol Google Cloud, pilih project yang Anda buat.
2. Klik DELETE.

Atau, jika Anda ingin mempertahankan project tetapi menghapus resource:

1. Hapus Database Firestore: Buka Firebase Console > Firestore dan hapus database.
2. Hapus Autentikasi: Buka Firebase Console > AuthenticationSign-in method, nonaktifkan Google.

7. Selamat

Selamat! Anda telah berhasil menggunakan ekstensi Gemini CLI Conductor untuk membuat aplikasi web dari awal, lalu melakukan iterasi dengan fitur kompleks seperti autentikasi dan integrasi database.

Langkah berikutnya

• Mempelajari Mode Rencana Gemini CLI untuk perencanaan ringan
• Mempelajari Ekstensi Gemini CLI lainnya