Katalog UMKM · Lembar Kerja
0 / 6 wajib

Lembar kerja Katalog UMKM

Creative Hub App Talent (CHAT) 2026 — ikuti urutan US-01 sampai US-06. Centang tiap langkah setelah selesai dan terbukti di link Vercel-mu.

Jadwal hari ini

08.00–16.00, termasuk ISHOMA

1
09.00–10.00 — Deploy & setup
Deploy to Vercel, buat proyek Supabase, isi environment variable, jalankan skrip database, clone repo
2
10.00–10.30 — Problem statement & PRD
Dengarkan penjelasan mentor, isi lembar kustomisasi usahamu
3
10.30–12.00 — US-01, US-02, US-03
Katalog, detail produk, tombol WhatsApp
4
12.00–13.00 — ISHOMA
5
13.00–14.15 — US-04, US-05, US-06
Login, ganti password, proteksi admin, klinik debugging
6
14.15–14.45 — Checklist & bonus
Keamanan, pengujian, README, kejar bonus kalau sempat
7
14.45 — Kumpulkan karya
Batas pukul 15.00 tepat
1
US-01 · WAJIB
Katalog dari database
Pengunjung bisa melihat semua produk, diambil dari Supabase — bukan data contoh lagi.
File utama: app/page.jsx · Baca dulu: AGENTS.md, docs/user-stories.md (US-01)

Prompt

⏳ Diisi setelah uji coba kuota
Baca AGENTS.md dan docs/user-stories.md bagian US-01.

Ubah app/page.jsx: ambil semua baris dari tabel "produk" di
Supabase di sisi server (Server Component), lalu tampilkan
memakai komponen KartuProduk yang sudah ada.

Jangan mengubah tampilan KartuProduk. Jangan membuat
client Supabase di file "use client". [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Katalog menampilkan produk dari database, bukan dari lib/data-contoh.js
  • Foto, nama, kategori, dan harga tampil benar dalam format rupiah
  • Catatan "Masih data contoh" sudah hilang dari halaman
Kalau macet
Cek docs/rancangan-teknis.md bagian "Dua jenis koneksi Supabase". Pastikan environment variable di Vercel sudah di-redeploy setelah diisi.
2
US-02 · WAJIB
Detail produk
Klik satu produk membuka halaman detail dengan data dari database.
File utama: app/produk/[id]/page.jsx

Prompt

⏳ Diisi setelah uji coba kuota
Baca docs/user-stories.md bagian US-02.

Ubah app/produk/[id]/page.jsx: ambil satu produk dari Supabase
berdasarkan id di URL, di sisi server. Kalau id tidak ada di
database, panggil notFound(). [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Detail produk menampilkan data asli dari database
  • Produk yang tidak ada menampilkan halaman "tidak ditemukan"
3
US-03 · WAJIB
Pesan via WhatsApp
Tombol di halaman detail membuka WhatsApp dengan pesan otomatis.
File utama: components/TombolWhatsApp.jsx · Nomor di lib/toko.js

Prompt

⏳ Diisi setelah uji coba kuota
Baca docs/rancangan-teknis.md bagian "Pesan WhatsApp (US-03)".

Lengkapi components/TombolWhatsApp.jsx: saat diklik, buka tautan
wa.me ke nomor di lib/toko.js dengan pesan otomatis berisi nama
dan harga produk (format rupiah). [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Tombol membuka WhatsApp ke nomor tokomu
  • Pesan sudah terisi nama dan harga produk yang benar
  • Dicoba dan berhasil di HP, bukan cuma di laptop
4
US-04 · WAJIB
Login admin
Admin bisa masuk dengan email dan password lewat Supabase Auth.
File utama: app/admin/login/page.jsx, app/admin/actions.js

Prompt

⏳ Diisi setelah uji coba kuota
Baca AGENTS.md bagian aturan keamanan dan docs/user-stories.md
bagian US-04.

Buat Server Action login di app/admin/actions.js memakai Supabase
Auth (email + password), lalu sambungkan ke form di
app/admin/login/page.jsx. Login gagal menampilkan pesan error
yang jelas. [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Login dengan email/password yang benar berhasil masuk ke /admin
  • Login salah menampilkan pesan error
  • Tombol "Keluar" mengakhiri sesi
Akun admin kamu
Buat akun lewat dashboard Supabase sesuai panduan mentor — jangan pakai akun default yang sama dengan peserta lain.
5
US-05 · WAJIB
Ganti password
Admin yang login bisa mengganti password bawaan.
File utama: app/admin/password/page.jsx

Prompt

⏳ Diisi setelah uji coba kuota
Baca docs/user-stories.md bagian US-05.

Buat Server Action ganti password di app/admin/actions.js untuk
admin yang sedang login. Validasi: minimal 8 karakter, dan harus
sama dengan konfirmasinya. Sambungkan ke form di
app/admin/password/page.jsx. [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Password berhasil diganti, dan bisa dipakai login ulang
  • Password kurang dari 8 karakter ditolak dengan pesan jelas
  • Password bawaan sudah tidak bisa dipakai login lagi
6
US-06 · WAJIB · KEAMANAN
Proteksi halaman admin
Semua halaman di /admin tertutup untuk siapa pun yang belum login.
File utama: proxy.js (root proyek)

Prompt

⏳ Diisi setelah uji coba kuota
Baca AGENTS.md bagian aturan keamanan nomor 3 dan 4.

Buat proxy.js di root proyek: semua rute /admin/** kecuali
/admin/login wajib login; kalau belum login, alihkan ke
/admin/login. [detail tambahan diisi setelah uji coba]

Selesai kalau

  • Buka /admin di jendela penyamaran (tanpa login) → dialihkan ke login
  • Sama untuk /admin/password dan halaman admin lainnya

Fitur bonus

Kerjakan kalau fitur wajib sudah selesai dan masih ada waktu. Maks. 20 poin.

US-07 — Tambah produk
Form di /admin/produk/baru menyimpan ke database
5 pt
US-08 — Ubah produk
Form terisi data lama, lalu menyimpan perubahan
4 pt
US-09 — Hapus produk
Konfirmasi dulu sebelum menghapus dari database
3 pt
US-10 — Filter / pencarian
Saring produk per kategori atau cari nama produk
3 pt
US-11 — Jumlah / varian
Ikut masuk ke pesan WhatsApp
3 pt
US-12 — PWA
Bisa di-install di HP, pakai ikon di public/icons
4 pt
US-13 — Deskripsi dibuat AI
Pakai Gemini API dari nama dan kategori produk
5 pt

Bonus tambah/ubah/hapus hanya dihitung kalau aksinya ditolak tanpa login (US-06 sudah beres).

Contekan Git

Commit setiap satu fitur selesai. Jangan minta AI menjalankan Git.

1
Simpan perubahan
git add . git commit -m "US-01: katalog dari database"
2
Kirim ke GitHub
git push
Vercel otomatis men-deploy. Cek link Vercel-mu setelah ±1 menit.
3
Format pesan commit
US-xx: deskripsi singkat — contoh: US-03: tombol pesan WhatsApp

10 error umum

Cek di sini dulu sebelum memanggil pendamping.

Halaman blank / error 500 setelah deploy
Buka tab Deployments di Vercel → klik deploy terbaru → baca Build Logs. Biasanya environment variable belum diisi atau salah ketik.
relation "produk" does not exist
Skrip docs/schema.sql belum dijalankan. Buka Supabase → SQL Editor → jalankan ulang.
Perubahan di laptop tidak muncul di link Vercel
Belum git push. Cek dengan git status — kalau ada perubahan belum ter-commit, ulangi langkah commit & push.
Data kosong padahal sudah diisi di Supabase
Cek RLS: kalau kebijakan salah, baca tetap ditolak. Pastikan memakai koneksi server sesuai docs/rancangan-teknis.md, bukan key anon di browser.
Login selalu gagal walau email/password benar
Akun admin belum dibuat di Supabase Authentication, atau salah mengetik email saat setup.
Module not found setelah AI menambah import
AI mungkin memakai package yang belum terpasang. Jangan install sendiri — minta AI memakai cara lain dengan package yang sudah ada.
Tombol WhatsApp membuka nomor yang salah
Cek format nomor di lib/toko.js: internasional, tanpa tanda +, tanpa angka 0 di depan. Contoh benar: 6281234567890.
Build gagal karena error TypeScript
next.config.mjs sudah diatur untuk mengabaikan error tipe — kalau masih gagal, build-nya error lain. Baca pesan error di Build Logs baris demi baris.
Kuota Antigravity habis di tengah jalan
Pindah ke kelompok model lain di Antigravity. Kalau tetap habis, buka VS Code + Cline dengan API key Gemini (lihat panduan tools cadangan).
Tampilan berantakan setelah AI mengedit
Jangan biarkan AI mengganti komponen di components/. Di prompt, tegaskan: "jangan ubah tampilan, hanya sambungkan data".

Checklist sebelum kumpul

Semua poin dicek bot dan juri. Centang yang sudah kamu pastikan sendiri.

Keamanan

Pengujian

Kumpulkan karya

Batas pukul 15.00. Kirim lewat form yang dibagikan panitia.

  • Link Vercel aplikasimu (bisa dibuka siapa saja)
  • Link repo GitHub (publik, berisi PROMPTS.md)