21 Agustus
Tertarik paket tahunan. Minta dikirim proposal.
Pelatihan AI Programmer · 3 Sesi
Dari Ide Menjadi Aplikasi Online — Beneran, Bukan Katanya.
Bukan pelatihan teori berjam-jam yang bikin peserta pindah dari "menyimak" ke "merem". Kita akan membangun satu aplikasi nyata — Kelola Lead Sales — dari nol sampai bisa dibuka lewat HP sendiri, ditemani AI di setiap langkah: menganalisa kebutuhan, merancang tampilan, menulis dokumentasi, membuat kode, menyambungkan database, sampai naik ke internet.
DATANG → modal ide saja
/
PULANG → bawa APLIKASI YANG SUDAH ONLINE
"Jangan buru-buru minta AI coding. Ajak dia kenalan sama bisnisnya dulu — AI itu pintar, tapi bukan cenayang."
IDE→
DESIGN→
DOCUMENT→
GENERATE→
GIT→
AI AGENT→
DATABASE→
TEST→
DEPLOY
Studi kasusnya satu saja, biar fokus
Yang kita bangun: Kelola Lead Sales
Peserta tidak perlu pusing memilih ide — semua orang membangun aplikasi yang sama. Biar energinya habis untuk belajar prosesnya, bukan untuk galau menentukan ide (itu urusan lain, biasanya juga lebih lama dari bikin aplikasinya). Hasilnya pun bukan sekadar catat-mencatat, tapi ada dashboard analisa & laporan yang benar-benar dipakai sales sehari-hari.
Data yang dicatat
- 01 Nama
- 02 No. WhatsApp
- 03 Kota
- 04 Sumber Informasi
- 05 Produk yang diminati
- 06 Status — Cold Warm Hot
- 07 Riwayat Catatan / Follow Up
- 08 Tanggal Lead
- 09 Sales / PIC
125
Total
32
Hot
48
Warm
45
Cold
Budi Santoso
19 Agustus
Pertama kali menghubungi dari Instagram.
9 langkah, 3 sesi
Alur pelatihan dari nol sampai online
| Step | Materi | Tools | Hasil |
|---|---|---|---|
| 01 | Analisa kebutuhan dengan AI | ChatGPT | Konsep aplikasi + flow |
| 02 | Membuat UI / Layout | ChatGPT · Google AI Studio | Mockup & struktur halaman |
| 03 | Dokumentasi untuk AI Coding Agent | ChatGPT | PROJECT.md / dokumentasi teknis |
| 04 | Generate Frontend | Google AI Studio | Source code frontend |
| 05 | Version Control | Git + GitHub | Repository online |
| 06 | Setup AI Programmer | AntiGravity | Repository dibuka AI Agent |
| 07 | Backend + Database | AntiGravity + Supabase | Database + API + integrasi |
| 08 | Testing Lokal | Localhost | Aplikasi berjalan end-to-end |
| 09 | Deployment | Vercel / VPS / Coolify | Aplikasi online |
Sesi 1 · Cold
Dari Ide Menjadi Rancangan
Peserta datang dengan ide yang masih di kepala saja. Keluar dari sesi ini, mereka sudah punya rancangan aplikasi yang jelas — siapa penggunanya, bagaimana alurnya, menu apa saja, fiturnya apa, struktur datanya seperti apa, sampai dashboardnya akan terlihat bagaimana.
Step 1
Ajak ChatGPT ngobrol dulu — biar paham bisnisnya
Saya mau buat aplikasi Kelola Lead untuk Sales.
Sales bisa mencatat: Nama, Nomor WhatsApp, Kota, Sumber
Informasi, Produk, Status Cold/Warm/Hot, Riwayat Catatan.
Aplikasi ini nantinya punya Dashboard Analisa dan Laporan.
1) Pengguna aplikasi = Sales
2) Alur aplikasi => Lead Masuk dicatat di Aplikasi, Update Status Lead, Riwayat Follow Up
3) Menu dan Fitur
4) Struktur data
6) Laporan Lead
Catatan: layout mudah dipahami, istilah mudah dipahami orang
awam, tampilan tidak terlalu ramai, fokus, font size sesuai
pentingnya informasi.
Step 2
Buat layout — dari hasil obrolan jadi tampilan
Login↓
Dashboard↓
Lead↓
Laporan↓
Profil
Dashboard-nya menonjolkan Lead Baru Hari Ini, lalu Lead berdasarkan Produk, Sumber, Kota, dan Sales — informasi terpenting diberi ukuran font paling besar, biar sekali lihat langsung paham (tanpa perlu kacamata baca dua kali).
Buatkan Mockup Tampilannya
1. Responsive (Mobile dan Desktop)
2. Layout tidak terlalu rame
3. Istilah mudah dipahami orang awam
4. Fokus
5. Font Size sesuai pentingnya Informasi
6. Perbanyak Klik, kurangi Input Text
Setelah hasilnya keluar, download file mockup-nya dari ChatGPT — file ini yang nanti dibawa ke langkah berikutnya, bukan cuma disalin teksnya.
Sesi 2 · Warm
Giliran AI yang Mulai Membangun
Mulai masuk ke dunia developer. Ini bagian paling penting di seluruh pelatihan, jadi tolong disimak baik-baik (nanti bisa keluar di ujian... bercanda, tidak ada ujian): prompt itu beda dengan dokumentasi. Prompt untuk memberi perintah sesaat, dokumentasi untuk jadi pedoman yang terus dibaca AI selama proyek berjalan.
Step 3
Menulis dokumentasi — "buku panduan" untuk AI Agent
Saya mau susun hasil analisa dan mockup yang sudah dibuat
sebelumnya jadi dokumentasi project yang siap diberikan ke
AI Coding Agent, dengan struktur berikut:
01-project-overview.md — tujuan aplikasi & penggunanya
02-user-flow.md — alur penggunaan tiap menu
03-feature.md — daftar fitur per halaman
04-database.md — struktur tabel & relasi antar data
05-ui-guideline.md — gaya visual & komponen tampilan
06-business-rule.md — aturan bisnis (misal kapan status
lead berubah dari Cold ke Warm ke Hot)
Tulis dengan bahasa yang jelas dan tidak ambigu — anggap
yang membacanya belum pernah tahu apa-apa soal project ini.
Hasilnya berupa file-file berikut
docs/
01-project-overview.md
02-user-flow.md
03-feature.md
04-database.md
05-ui-guideline.md
06-business-rule.md
users
id · name · email · password · role
leads
id · name · whatsapp · city · source · product · status · sales_id · created_at
lead_notes
id · lead_id · note · created_by · created_at
User→
Lead→
Lead Notes
Stack sudah dikunci — biar tidak bingung memilih teknologi
Frontend
Next.js · TypeScript · Tailwind
Database
Supabase PostgreSQL
Authentication
Supabase Auth
Repository
Step 4a
Minta ChatGPT tuliskan prompt untuk Google AI Studio
Daripada mikir sendiri kalimat promptnya, minta saja ChatGPT yang menuliskan — dia sudah tahu semua konteksnya dari obrolan sebelumnya, jadi promptnya biasanya lebih rapi dan lengkap.
Saya mau lanjut generate frontend-nya di Google AI Studio.
Tolong buatkan prompt yang siap saya copy-paste ke sana,
berdasarkan hasil analisa dan mockup di atas.
Sertakan: teknologi (Next.js, TypeScript, Tailwind CSS), style
tampilan, daftar menu (Dashboard, Lead, Laporan, Profil), dan
bahwa aplikasinya berbentuk PWA (Progressive Web App) yang
responsive untuk Desktop dan Mobile.
Catatan: layout mudah dipahami, istilah mudah dipahami orang
awam, tampilan tidak terlalu ramai, fokus, font size sesuai
pentingnya informasi.
Step 4b
Copy-paste ke Google AI Studio — sekalian upload file mockup
Bukan langsung "Ide → Google AI Studio → jadi aplikasi" — hasilnya biasanya random, seperti nembak dalam gelap. Yang dikirim ke Google AI Studio itu dua hal sekaligus, bukan cuma teks saja.
📎 Yang dikirim
1) Copy-paste prompt hasil ChatGPT dari Step 4a + 2) Upload file mockup hasil download dari ChatGPT (Step 2)
Contoh hasil prompt dari ChatGPT (isinya bisa beda-beda tergantung obrolan kamu)
Saya mau buat aplikasi Lead Management berdasarkan
spesifikasi dan file mockup yang saya lampirkan (hasil dari
ChatGPT).
Teknologi: Next.js, TypeScript, Tailwind CSS
Style: Light mode, clean, simple, modern SaaS
Menu: Dashboard, Lead, Laporan, Profil
Aplikasinya berbentuk PWA (Progressive Web App) yang
responsive — harus enak dipakai baik dari Desktop maupun
Mobile.
Catatan: layout mudah dipahami, istilah mudah dipahami orang
awam, tampilan tidak terlalu ramai, fokus, font size sesuai
pentingnya informasi.
Step 5
🙋 Manual — dikerjakan peserta
Git & GitHub — secukupnya saja
Git menyimpan "riwayat perubahan" kode, GitHub adalah tempat online untuk menyimpan kodenya. Cukup dua konsep itu dulu — belum perlu belajar sampai jadi ahli Git.
Sesi 3 · Hot
Dari Frontend Menjadi Aplikasi Nyata
Ini momen "wah, ternyata AI bisa bikin aplikasi sampai jadi" — repository dibuka AI Agent, disambungkan ke database, diuji lokal, lalu dinaikkan ke internet.
Step 6
🤖 Diminta ke AI Agent
AntiGravity membuka repository
Baca seluruh dokumentasi di folder /docs.
Jangan melakukan perubahan coding terlebih dahulu.
Pelajari: tujuan aplikasi, user flow, database, fitur,
business rule.
Setelah selesai, jelaskan pemahamanmu terhadap aplikasi ini.
Aturan mainnya sederhana: AI harus paham proyek dulu, baru boleh coding.
Step 7a
🤖 Diminta ke AI Agent
Minta AI membuat rencana kerja — belum boleh coding dulu
Setelah AI paham dokumentasi, jangan langsung disuruh menggarap backend sekaligus. Minta dulu rencana kerjanya, dipecah tahap demi tahap, supaya progresnya bisa dipantau — AI itu rajin, tapi kalau dilepas tanpa rencana, hasilnya bisa seperti nyetir tanpa GPS: sampai juga, tapi entah lewat mana.
Berdasarkan pemahamanmu terhadap project ini, buatkan rencana
kerja untuk membangun aplikasi ini dari awal sampai akhir —
backend, database, sampai siap dites lokal.
Pecah menjadi tahapan kecil dan berurutan. Untuk setiap tahap,
jelaskan: apa yang dikerjakan, file/komponen apa yang terlibat,
dan bagaimana cara memverifikasinya berhasil atau tidak.
Tulis rencana ini ke file step-backend.md di root project —
jangan cuma ditampilkan di chat.
Setelah file-nya jadi, tampilkan juga isinya di sini supaya
saya bisa baca. Jangan mulai coding dulu sebelum saya setujui.
Urutan yang gampang diingat: Pahami → Rencanakan → Kerjakan → Verifikasi — bukan langsung "Pahami → Kerjakan" saja. Dengan ditulis ke step-backend.md, rencananya tidak hilang ditelan scroll chat, dan bisa terus dijadikan acuan sepanjang proyek berjalan.
Step 7b
🤖 Diminta ke AI Agent
Eksekusi rencana — backend & Supabase per tahap
Implementasikan backend aplikasi Lead Management
berdasarkan dokumentasi project dan step-backend.md yang
sudah dibuat. Gunakan Supabase PostgreSQL. Kerjakan sesuai
urutan di step-backend.md, satu tahap dulu, lalu tunggu saya
cek sebelum lanjut ke tahap berikutnya.
Jangan mengubah desain frontend kecuali diperlukan
untuk integrasi data.
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
Tahapan yang biasanya keluar dari rencana AI Agent
- 01Setup project & environmentKoneksi ke Supabase, isi .env, cek koneksi berhasil sebelum lanjut (jangan sampai semangat coding tapi lupa colokin listriknya).
- 02Database schema & migrationBuat tabel users, leads, lead_notes sesuai 04-database.md.
- 03AuthenticationSetup Supabase Auth, halaman login, proteksi halaman yang butuh login.
- 04CRUD LeadCreate, read, update, delete lead — dihubungkan ke form & tabel di frontend.
- 05CRUD Lead NotesTambah catatan/follow-up per lead, riwayat tampil urut tanggal.
- 06Dashboard statisticsQuery agregasi total lead, per status, produk, sumber, kota, sales.
- 07Filter & pencarianFilter status/produk/sumber, pencarian nama atau nomor WhatsApp.
- 08Integrasi ke frontendGanti data dummy di UI Sesi 2 dengan data asli dari Supabase.
- 09Validasi & error handlingPesan error jelas saat input salah atau koneksi gagal — jangan sampai penggunanya cuma dikasih layar putih dan doa.
- 10Verifikasi tiap tahapAI Agent menjalankan npm run dev dan mengecek sendiri sebelum lanjut ke tahap berikutnya.
Step 7c
🙋 Manual — dikerjakan peserta
Detail alur setup Supabase
Bagian yang sering bikin peserta bingung sebentar di awal — padahal cuma enam langkah, dan sebagian besar dikerjakan sendiri oleh AI Agent begitu kredensialnya sudah ada.
Daftar / Login supabase.com↓
Buat Project Baru↓
Copy Project URL & anon key↓
Tempel ke .env↓
Buka SQL Editor↓
AI Agent jalankan schema↓
Aktifkan Auth↓
Tes koneksi
- 1Buat project di SupabaseDaftar/login di supabase.com/dashboard, klik "New Project", pilih nama & password database.
- 2Ambil kredensialDi menu Project Settings → API, salin Project URL dan anon public key.
- 3Isi environment variableTempel kredensial tadi ke .env di project — ini yang bikin frontend bisa "ngobrol" sama database.
- 4Jalankan schema databaseLewat SQL Editor di dashboard Supabase, atau biarkan AI Agent yang menjalankannya sesuai 04-database.md.
- 5Aktifkan AuthenticationNyalakan metode login yang dipakai (misal Email/Password) di menu Authentication → Providers.
- 6Tes koneksiJalankan aplikasi lokal, coba login & tambah satu lead — kalau datanya muncul di tabel Supabase, berarti sudah nyambung.
Step 8a
🤖 Diminta ke AI Agent
Jalankan di port 3003 & uji end-to-end
Login↓
Tambah Lead↓
Lead muncul↓
Tambah Catatan↓
Cold → Warm → Hot↓
Dashboard berubah↓
Laporan berubah
Port 3003 dipakai (bukan default 3000) supaya tidak bentrok kalau di komputer peserta ada project lain yang sudah jalan di port 3000 — hal kecil, tapi lumayan sering bikin bingung kalau tidak dijelaskan.
Jalankan aplikasi ini di port 3003 (bukan default 3000).
Setelah jalan, coba alur berikut dan laporkan hasilnya:
login, tambah lead baru, ubah status Cold → Warm → Hot,
tambah catatan, cek Dashboard dan Laporan ikut berubah.
Kalau ada error, perbaiki dulu sebelum lanjut. Jangan bilang
"selesai" kalau masih ada bagian yang error.
npm install → npm run dev -- -p 3003 → http://localhost:3003. Di sinilah peserta langsung paham: Frontend + Backend + Database = Aplikasi (bukan cuma tampilan cantik yang tidak bisa apa-apa).
Step 8b
🤖 Diminta ke AI Agent
Kalau sudah oke, push ke GitHub
Jangan push sebelum dites — kebiasaan baik yang berlaku baik untuk AI maupun manusia. Setelah semua alur di Step 8a lancar tanpa error, baru kodenya dikirim ke repository.
Semua fitur sudah dites dan berjalan lancar di port 3003.
Tolong commit semua perubahan dengan pesan yang jelas
(misal: "feat: implement backend Lead Management"), lalu
push ke branch main di GitHub.
Sebelum push, pastikan file .env tidak ikut ter-commit.
Cek sekali lagi: buka repository di GitHub, pastikan file .env memang tidak ada di sana. Kalau sampai ke-push, kredensial Supabase-nya bocor ke publik.
Step 9a
🙋 Manual — dikerjakan peserta
Konekkan repository ke Vercel
Ini bagian yang dikerjakan sendiri oleh peserta lewat dashboard, bukan lewat AI Agent. Santai, tinggal klik-klik saja — tidak ada barisan kode yang perlu diketik.
- 1Buka vercel.comKlik "Sign Up" atau "Log In", pilih opsi Continue with GitHub supaya akun Vercel langsung terhubung ke akun GitHub yang tadi dipakai push.
- 2Klik "Add New..." → "Project"Tombolnya biasanya ada di pojok kanan atas dashboard Vercel.
- 3Pilih repository-nyaCari nama repository yang tadi di-push AI Agent (misal lead-management), klik Import. Kalau repo tidak muncul, klik "Adjust GitHub App Permissions" dan berikan akses ke repo tersebut.
- 4Biarkan Vercel mendeteksi otomatisKarena project-nya Next.js, Vercel biasanya sudah otomatis mengisi Framework Preset, Build Command, dan Output Directory dengan benar. Tidak perlu diubah.
- 5Jangan klik Deploy duluLanjut dulu ke Step 9b untuk mengisi Environment Variables — kalau langsung deploy tanpa itu, aplikasinya akan online tapi tidak bisa konek ke database.
Step 9b
🙋 Manual — dikerjakan peserta
Atur Environment Variables & buat domain
- 1Buka bagian Environment VariablesMasih di halaman yang sama sebelum Deploy, cari bagian Environment Variables (biasanya di bawah pengaturan Build).
- 2Isi dua variabelCopy dari file .env lokal: NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_ANON_KEY, tempel nilainya masing-masing.
- 3Klik "Deploy"Tunggu proses build, biasanya 1–3 menit. Kalau gagal, buka log error-nya dan tempelkan ke AI Agent supaya diperbaiki.
- 4Aplikasi sudah onlineVercel otomatis memberi domain gratis seperti nama-project.vercel.app — ini sudah bisa langsung dibuka dan dites dari HP.
- 5(Opsional) pakai domain sendiriBuka menu Settings → Domains di project Vercel, klik Add, masukkan domain yang sudah dibeli (misal kelolalead.com), lalu ikuti instruksi Vercel untuk mengatur DNS di tempat domain dibeli.
Biar gampang diingat
Satu alur, dua versi bahasa
IDEDESIGNDOCUMENT
GENERATEGITAI AGENT
DATABASETESTDEPLOY
PikirkanGambarkanDokumentasikan
BuatSambungkanJalankan
Onlinekan
AI Programmer
Masuk pelatihan membawa IDE.
Masuk pelatihan membawa IDE.
Pulang membawa APLIKASI yang sudah ONLINE.
Dari ide menjadi aplikasi online dengan AI — satu studi kasus, tiga sesi, sembilan langkah, tanpa teori berkepanjangan yang cuma jadi obat tidur.