Merencanakan dan Membangun Aplikasi dengan Conductor Gemini CLI

1. Pengantar

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

Yang akan Anda lakukan

Menginstal Gemini CLI dan ekstensi Conductor
Membangun aplikasi web "Picker Wheel" dari awal menggunakan kemampuan perencanaan dan penerapan Conductor
Tambahkan 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 Anda butuhkan

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

2. Sebelum memulai

Buat Project Google Cloud

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

Mulai Cloud Shell

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

Klik Activate Cloud Shell di bagian atas konsol Google Cloud.
Setelah terhubung ke Cloud Shell, verifikasi autentikasi Anda:
```
gcloud auth list
```
Pastikan project Anda dikonfigurasi:
```
gcloud config get project
```

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 apa pun 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

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.
Mulai ulang terminal agar gemini ditambahkan ke PATH Anda.
Verifikasi penginstalan telah menginstal versi terbaru:
```
gemini --version
```
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
```
Authenticate:
- Mulai Gemini CLI.
```
gemini
```
- Saat ditanya "Apakah Anda memercayai file di folder ini?", pilih Percayai folder (roda pemilih)
- Saat ditanya "Bagaimana Anda ingin melakukan autentikasi untuk project ini?", pilih Vertex AI. Ikuti panduan autentikasi untuk mendapatkan kunci API Google Cloud dan menetapkan variabel lingkungan GOOGLE_API_KEY. Luangkan waktu untuk mempelajari berbagai tingkatan penggunaan dan batas kapasitas API yang sesuai.
Keluar dari Gemini CLI: Ketik /quit dari terminal CLI untuk mengakhiri sesi Gemini CLI langsung Anda sebelum melanjutkan.

Menginstal Ekstensi Conductor

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

Instal ekstensi:

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

Verifikasi penginstalan:
- Mulai Gemini CLI.
```
gemini
```
- Ketik /conductor dan Anda akan melihat daftar perintah seperti setup, newTrack, implement, dll.
Keluar dari Gemini CLI: Ketik /quit dari terminal CLI untuk mengakhiri sesi Gemini CLI langsung Anda sebelum melanjutkan.

4. Pengembangan Project Baru: Roda Pemilih

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

Menyiapkan Konteks Produk

Pastikan Anda berada di direktori picker-wheel yang Anda buat di bagian sebelumnya:
```
pwd
```
Mulai Gemini CLI: Mulai sesi Gemini CLI baru dari direktori project Anda.
```
gemini
```
Lakukan inisialisasi Conductor: Jalankan perintah penyiapan untuk membuat struktur project dan menyiapkan lingkungan Conductor.
```
/conductor:setup
```
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.
  - Target Audiens → Masyarakat Umum
  - Interaksi → Ketuk/Klik untuk Memutar
  - Penyesuaian → Dasar
  - Platform → Desktop-First
- Panduan produk: Buat otomatis.
- Tech stack:
  - Bahasa → TypeScript/JavaScript - Ideal untuk web full-stack
  - Frontend → Vue.js - Antarmuka web yang 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 → Khusus Sisi Klien, Performa Tinggi
  - Non-Fungsional → Cakupan Pengujian Tinggi, TypeScript & Vue.js, Desain Responsif
Conductor akan membuat file konteks di direktori conductor/.

Membuat Jalur Baru

"Track" di Conductor mewakili fitur atau unit kerja.

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

Menerapkan Jalur

Mulai penerapan:
```
/conductor:implement
```
Conductor kini akan menjalankan rencana, menulis kode untuk project.
Tips: Untuk menghindari masalah saat menggunakan shell interaktif atau proses yang berjalan lama (seperti server dev atau pemantau pengujian), kita harus memastikan bahwa Conductor tahu persis cara menangani perintah tertentu ini. Alat seperti Vite (npm run dev) dan Vitest (npm run test) sering berjalan dalam "mode pengamatan" secara default, yang membuat proses tetap terbuka tanpa batas. Anda dapat menginstruksikan Conductor untuk menonaktifkan mode pengamatan atau menggunakan is_background: true saat menjalankan perintah dengan memperbarui workflow.md.
Verifikasi aplikasi: Selama fase penerapan, Conductor akan meminta Anda untuk menguji aplikasi secara manual. Misalnya, Anda akan diminta untuk membuka server web lokal, melihat pratinjau aplikasi di browser, dan memverifikasi perubahan. Setelah implementasi selesai, Anda akan melihat roda pemilih yang berfungsi.
Pemecahan masalah: Jika kode yang dihasilkan berperilaku tidak terduga, periksa conductor/tracks/.../plan.md untuk mengetahui langkah-langkah atau error yang terlewat.
Tinjau penerapan: Sebagai langkah terakhir, Anda dapat meminta Conductor untuk meninjau penerapan. Fitur ini 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 kualitas aplikasi web roda pemilih dari bagian sebelumnya sehingga pengguna yang login dapat menyimpan dan memulihkan konfigurasi roda pemilih mereka.

Membuat Jalur Personalisasi

Dalam contoh "brownfield" berikut, kita akan menggunakan Firebase untuk autentikasi dan penyimpanan. Instal ekstensi Firebase Gemini CLI agar dapat digunakan oleh Conductor.
```
gemini extensions install https://github.com/gemini-cli-extensions/firebase
```
Mulai Gemini CLI: Mulai sesi Gemini CLI baru dari direktori project Anda.
```
gemini
```

Mulai trek baru: Mulai trek baru.

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

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.
- Lacak sasaran:
  - Penyedia Auth → 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}.
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 melakukan percakapan dengan Gemini untuk memahami dan mendiskusikan rencana sebanyak mungkin sebelum melanjutkan ke penerapan.
Terapkan: Jika semuanya sudah oke, Anda dapat memulai penerapan.
```
/conductor:implement
```
Verifikasi: Muat ulang aplikasi Anda. Anda akan melihat aplikasi yang telah diperbarui.
Jika AI mengalami masalah saat menguji penerapan autentikasi, jangan lupa untuk mengaktifkan Login dengan Google di Firebase Console di bagian Authentication > Sign-in method.

Berikut adalah kode emas 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 pada 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 project sepenuhnya.

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

Atau, jika Anda ingin mempertahankan project tetapi menghapus resource:

Menghapus Database Firestore: Buka Firebase Console > Firestore, lalu hapus database.
Menghapus Authentication: Buka Firebase Console > Authentication > Sign-in method, nonaktifkan Google.

7. Selamat

Selamat! Anda telah berhasil menggunakan ekstensi Gemini CLI Conductor untuk membangun 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
Pelajari lebih lanjut Ekstensi Gemini CLI