Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Merencanakan dan Membangun Aplikasi dengan Plugin Conductor

1. Pengantar

Dalam codelab ini, Anda akan mempelajari cara merencanakan dan membuat aplikasi software dengan plugin Conductor. Conductor adalah plugin open source buatan Google yang memungkinkan fitur pengembangan berbasis spesifikasi seperti perencanaan dan pelacakan penerapan. Anda akan memulai dengan membangun aplikasi "greenfield" sepenuhnya dari awal. Kemudian, Anda akan memperlakukannya sebagai project "brownfield", yang diulang untuk menambahkan autentikasi dan penyimpanan.

Yang akan Anda lakukan

Menginstal plugin Conductor di Antigravity CLI atau Claude Code
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 plugin Conductor untuk merencanakan, menerapkan, dan meninjau aplikasi "greenfield"
Cara menggunakan plugin 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
Agen coding seperti Antigravity CLI atau Claude 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 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 dan mengautentikasi agen coding CLI

Pada langkah ini, Anda akan menyiapkan lingkungan pengembangan lokal dengan menginstal dan mengautentikasi Antigravity CLI atau Claude Code di editor kode lokal menggunakan kredensial Google Cloud Anda.

Menginstal dan Mengautentikasi Antigravity CLI

Instal Antigravity CLI versi terbaru.

# MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd

Mulai ulang terminal agar agy ditambahkan ke PATH Anda.
Verifikasi penginstalan telah menginstal versi terbaru.
```
agy --version
```
Lakukan autentikasi menggunakan kredensial Google Cloud Anda.
- Mulai Antigravity CLI.
```
agy
```
- Saat diminta untuk Pilih metode login, pilih Gunakan project Google Cloud. Buka URL otorisasi yang aman di browser web. Login dengan kredensial yang disetujui dan selesaikan autentikasi. Browser menampilkan kode otorisasi alfanumerik unik. Salin kode ini, kembali ke terminal, lalu tempelkan ke perintah.
Anda juga dapat memilih metode login lainnya. Codelab ini bertujuan untuk menunjukkan cara menggunakan project Google Cloud.
Keluar dari Antigravity CLI.Ketik /exit dari terminal CLI untuk mengakhiri sesi Antigravity CLI langsung sebelum melanjutkan.

Menginstal dan Mengautentikasi Kode Claude

Atau, Anda dapat menggunakan Plugin Conductor dengan Kode Claude. Di sini kita akan menginstal dan mengautentikasi Claude Code menggunakan kredensial Google Cloud Anda.

Instal Claude Code versi terbaru.
Lakukan autentikasi menggunakan kredensial Google Cloud Anda.
- Mulai Claude Code.
```
claude
```
- Ketik /login untuk memilih metode login Anda. Pilih opsi Platform pihak ketiga · Amazon Bedrock, Microsoft Foundry, atau Vertex AI dan Google Vertex AI. Untuk menyiapkan Google Vertex AI, pilih Kredensial Default Aplikasi (autentikasi google), lalu selesaikan penyiapan seperti yang diminta.
Anda juga dapat memilih metode login lainnya. Codelab ini bertujuan untuk menunjukkan cara menggunakan project Google Cloud.
Mulai ulang Claude Code.

4. Instal Plugin Conductor

Conductor adalah plugin open source buatan Google yang memungkinkan fitur pengembangan berbasis spesifikasi seperti perencanaan dan pelacakan penerapan.

Menginstal di Antigravity CLI

Instal plugin:

Antigravity CLI

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

Verifikasi penginstalan:
- Mulai Antigravity CLI.
```
agy
```
- Ketik /conductor dan Anda akan melihat daftar perintah seperti /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement, dll.
Keluar dari CLI.Ketik /exit dari terminal untuk mengakhiri sesi CLI langsung sebelum melanjutkan.

Menginstal di Claude Code

Daftarkan repositori marketplace dan instal plugin Conductor langsung di sesi Claude Code Anda.

/plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin

Verifikasi penginstalan.
- Ketik /conductor dan Anda akan melihat daftar perintah seperti /conductor-setup, conductor-new-track, conductor-implement, dll.
Keluar dari CLI.Ketik /exit dari terminal Claude Code untuk mengakhiri sesi CLI langsung sebelum melanjutkan.

5. Pengembangan Greenfield: Roda Pemilih

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

Menyiapkan Konteks Produk

Buat dan ubah ke direktori project baru.Sekarang kita mengerjakan project di direktori picker-wheel. Buat direktori ini dan ubah ke direktori tersebut.
```
mkdir picker-wheel
cd picker-wheel
```
Mulai Antigravity CLI.Mulai sesi CLI baru dari direktori project Anda dengan Antigravity CLI atau Claude Code.
```
# Antigravity CLI
agy

# Claude Code
claude
```
- Saat ditanya "Do you trust the files in this folder?", pilih Trust folder (picker-wheel)
Lakukan inisialisasi Conductor.Jalankan perintah penyiapan untuk membuat struktur project dan menyiapkan lingkungan Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/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 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-new-rack.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 benar, Conductor akan meminta Anda untuk menyimpan dan melakukan commit pada file penyiapan awal.

Menerapkan Jalur

Mulai penerapan.
```
# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/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 menonton 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 yang terlewat atau error.
Tinjau penerapan.Sebagai langkah terakhir, Anda dapat meminta Conductor untuk meninjau penerapan. Agen harus meninjau kode sumber, menyinkronkan dokumentasi project, dan mengarsipkan jalur.
```
# Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review
```

6. 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 keterampilan Firebase agar Conductor dapat menggunakannya.

Mulai agen CLI Anda.Mulai sesi CLI baru.

# Antigravity CLI
/new

# Claude Code
/new

Mulai jalur baru.Mulai jalur baru.

# Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "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 trek 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}/.

Terapkan.Jika semuanya sudah oke, Anda dapat memulai penerapan.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/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.

7. 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.

8. Selamat

Selamat! Anda telah berhasil menggunakan plugin Conductor di agen coding pilihan Anda (Antigravity CLI atau Claude Code) untuk membangun aplikasi web dari awal, lalu melakukan iterasi dengan fitur kompleks seperti integrasi autentikasi dan database.

Langkah berikutnya

Mempelajari dokumentasi plugin Antigravity CLI
Mempelajari dokumentasi plugin Claude Code