1. 1

   Unduh dan instal Kiro

   Buka kiro.dev/downloads, pilih installer untuk sistem operasi Anda, lalu jalankan instalasi.

2. 2

   Masuk ke Kiro

   Buka Kiro dan pilih metode sign-in yang tersedia, misalnya GitHub, Google, atau AWS Builder ID. Akun AWS tidak diwajibkan untuk menggunakan Kiro.

3. 3

   Periksa credit balance

   Buka dashboard subscription/usage dari Kiro dan lihat saldo awal Anda. Pembaruan usage dapat tidak langsung terlihat, jadi periksa lagi di antara fase bila perlu.

1. 1

   Instal Node.js LTS dan npm

   Lakukan langkah ini sebelum workshop. Unduh rilis LTS dari Node.js Downloads. npm ikut terpasang bersama Node.js.

   Windows

   Jalankan Windows Installer .msi dan pertahankan pilihan default, termasuk penambahan Node.js ke PATH. Alternatif dengan winget:

   PowerShell / Windows TerminalCopy

   winget install OpenJS.NodeJS.LTS

   macOS

   Cara termudah: unduh macOS Installer .pkg versi LTS lalu ikuti wizard. Jika diminta memilih arsitektur, gunakan ARM64 untuk Mac Apple Silicon atau x64 untuk Mac Intel. Jika Homebrew sudah tersedia, Anda juga bisa memakai:

   Terminal · macOSCopy

   brew --version
   brew install node

   Jika brew belum terpasang, gunakan installer .pkg. Memasang Homebrew saat workshop berjalan terlalu lama. Terminal macOS memakai zsh, tetapi seluruh command lab tetap sama.

   Linux atau WSL

   Gunakan installer atau version manager LTS yang direkomendasikan pada halaman Node.js Downloads. Hindari package distro yang terlalu lama karena bisa tidak kompatibel dengan Vite.

   Setelah instalasi pada sistem operasi apa pun, tutup dan buka kembali Kiro agar PATH terbaca.

2. 2

   Verifikasi Node.js dan npm

   Buka terminal baru di Kiro dan jalankan:

   TerminalCopy

   node --version
   npm --version

   Kedua command harus menampilkan nomor versi. Jika muncul not recognized pada Windows atau command not found pada macOS/Linux, restart Kiro lalu buka terminal baru dan pastikan Node.js tersedia pada PATH.

   Khusus macOS: jika memakai Homebrew atau nvm, pastikan terminal Kiro memuat profil shell Anda. Homebrew berada di /opt/homebrew/bin pada Apple Silicon dan /usr/local/bin pada Intel.

3. 3

   Buat folder project

   Buat folder bernama kiro-task-tracker, lalu buka folder tersebut melalui File → Open Folder di Kiro.

   Struktur awal

   kiro-task-tracker/
   └── (empty)

4. 4

   Pastikan mode Spec tersedia

   Pada chat Kiro pilih sesi Spec. Untuk lab ini gunakan alur Feature → Requirements-First, bukan Quick Spec, agar setiap keputusan dapat ditinjau.

1. 1

   Buat Feature Spec

   Pada panel Specs, klik +, pilih Feature lalu Requirements-First. Gunakan nama task-tracker.

2. 2

   Kirim prompt requirement

   Salin prompt berikut tanpa menambah fitur lain.

   Prompt 1 · Create requirementsCopy prompt

   Buat feature spec Requirements-First untuk aplikasi Task Tracker full-stack.
   
   Tujuan pengguna:
   1. Melihat daftar task.
   2. Menambahkan task dengan judul wajib.
   3. Menandai task selesai atau belum selesai.
   
   Gunakan struktur monorepo dengan folder backend dan frontend. Backend memakai Node.js dengan Express dan penyimpanan in-memory. Frontend memakai React dengan Vite. Aplikasi hanya satu halaman.
   
   API dibatasi menjadi:
   - GET /api/tasks
   - POST /api/tasks
   - PATCH /api/tasks/:id/toggle
   
   Acceptance criteria harus mencakup happy path, judul kosong, task yang tidak ditemukan, kegagalan API, loading state, dan empty state. Gunakan format EARS yang jelas.
   
   Jangan tambahkan autentikasi, database cloud, deployment, Docker, state-management library, pagination, search, real-time update, atau styling kompleks.

3. 3

   Review sebelum approve

   Buka .kiro/specs/task-tracker/requirements.md. Pastikan requirement menjelaskan perilaku yang teramati, bukan detail kode.

   • Menampilkan daftar dan empty state.
   • Menambah judul valid.
   • Menolak judul kosong.
   • Toggle status selesai.
   • Menangani not found dan API error.

1. 1

   Generate design

   Lanjutkan workflow Spec dan minta Kiro membuat design.md. Jika diminta konteks tambahan, gunakan prompt pembatas berikut.

   Prompt 2 · Design guardrailCopy prompt

   Buat design sesederhana mungkin untuk workshop pemula.
   
   Gunakan monorepo dengan folder backend dan frontend. Backend hanya berisi API task (Express, array in-memory, tiga endpoint). Frontend hanya berisi halaman React (React hooks bawaan, native fetch) yang mengonsumsi API tersebut. Sertakan data flow, kontrak tiga endpoint, model Task, validasi, dan error handling.
   
   Sertakan juga spesifikasi UI/UX yang konkret: struktur DOM halaman (judul, form, kartu, daftar task), token warna sebagai CSS variable, dan gaya task yang sudah selesai (strikethrough, warna pudar). Ini requirement wajib, bukan opsional.
   
   Hindari repository pattern, ORM, Docker, authentication, cloud services, UI framework/icon package, dan abstraksi yang tidak diperlukan.

2. 2

   Cocokkan design dengan target

   TaskPagestate & fetch

   →

   TaskFormcreate task

   +

   TaskListrender & toggle

   Method	Path	Success	Error utama
   GET	/api/tasks	200 + array	500
   POST	/api/tasks	201 + task	400 title kosong
   PATCH	/api/tasks/:id/toggle	200 + task	404 not found

3. 3

   Periksa spesifikasi UI/UX

   Pastikan design.md memuat struktur DOM (judul halaman, kartu, form, daftar task), token warna sebagai CSS variable, dan gaya task selesai (strikethrough + warna pudar). Ini bagian wajib, bukan pelengkap.

4. 4

   Approve design

   Approve bila design hanya memiliki komponen, endpoint, dan spesifikasi UI/UX yang dibutuhkan. Periksa sisa credit di dashboard Kiro sebelum lanjut ke fase tasks.

1. 1

   Generate tasks

   Lanjutkan workflow untuk membuat tasks.md. Gunakan pembatas ini jika task terlalu banyak.

   Prompt 3 · Task plan guardrailCopy prompt

   Buat tepat lima required implementation tasks:
   1. Scaffold project dengan folder backend dan frontend beserta shared scripts.
   2. Implementasikan backend: in-memory store dan tiga endpoint Express.
   3. Implementasikan frontend: React UI dan state.
   4. Integrasikan frontend dengan backend termasuk loading, empty, validation, dan error state.
   5. Jalankan validasi build dan smoke test.
   
   Setiap task harus merujuk requirement terkait. Jangan menambahkan optional tasks, deployment, authentication, database, atau test framework baru.

2. 2

   Review dependencies

   Pastikan scaffolding dikerjakan sebelum backend/frontend, dan validasi menjadi task terakhir. Untuk lab ini jalankan task satu per satu agar konsumsi dan perubahan mudah diamati.

Mengapa ada dua pilihan Run All Tasks?

Pada versi Kiro IDE yang diuji untuk workshop ini, required dan optional task dibedakan pada tasks.md dengan format berikut. Konvensi marker, label, dan kapan chooser tampil dapat berubah pada versi Kiro berikutnya.

- [ ] 1. Implementasikan fitur inti
- [ ]* 1.1 Tambahkan property-based tests

Kiro membuat dependency graph dan menjalankan task terpilih dalam beberapa wave. Task independen dapat berjalan paralel; task dependent menunggu prerequisite selesai.

Jika implementasi berhenti atau terlalu luas

Gunakan satu prompt koreksi yang menyebut gejala dan hasil yang diharapkan. Jangan meminta Kiro “perbaiki semuanya”.

Periksa implementasi saat ini terhadap requirements dan design task-tracker.

Perbaiki hanya masalah yang menghalangi vertical slice berikut:
- backend dapat dijalankan,
- frontend dapat dijalankan,
- daftar task dapat dimuat,
- task valid dapat ditambahkan,
- status task dapat di-toggle.

Jangan refactor, menambah dependency, mengubah styling, atau menambahkan fitur baru. Jelaskan file yang diubah setelah selesai.

Jalankan aplikasi

Pastikan terminal berada di root project yang berisi package.json, backend/, dan frontend/. Pasang seluruh workspace dependency:

npm install

Cara A — satu command (default)

Dari root project:

npm run dev

Client dan API berjalan bersamaan dalam satu terminal lewat concurrently.

Cara B — dua terminal, backend dulu

Gunakan bila Cara A tidak berhasil, atau Anda ingin log backend dan frontend terpisah.

Terminal 1 — backend lebih dulu:

cd backend
npm run dev

Tunggu sampai log menunjukkan server aktif di port 3001. Jangan lanjut sebelum backend aktif, karena Vite proxy pada frontend akan gagal terhubung.

Terminal 2 — baru frontend:

cd frontend
npm run dev

Buka http://localhost:5173 di browser. Biarkan terminal tetap terbuka selama smoke test — pada Cara B, kedua terminal harus tetap terbuka bersamaan. Untuk menghentikan, fokuskan terminal lalu tekan Ctrl + C.

Pada macOS gunakan Ctrl + C, bukan Cmd + C. Jika port masih terpakai karena terminal lama tertutup, periksa dengan lsof -ti :3001 pada macOS/Linux atau Get-NetTCPConnection -LocalPort 3001 pada Windows PowerShell, lalu hentikan process tersebut setelah memastikan itu milik lab ini.

Development server adalah proses jangka panjang dan harus dijalankan manual pada terminal Kiro. Jangan mengubah port atau menambahkan CORS package; Vite proxy sudah diarahkan ke API port 3001.

Validasi build

npm run build

Jika build gagal, kirim satu error aktual kepada Kiro dan minta perbaikan terbatas:

Perbaiki hanya error build berikut tanpa refactor atau fitur tambahan:

[PASTE ERROR TERMINAL DI SINI]

Setelah memperbaiki, jalankan kembali build satu kali dan ringkas perubahan.

Catat hasil eksperimen

Pertanyaan evaluasi fasilitator

1. Apakah total penggunaan maksimal 50 credits?
2. Fase mana yang menggunakan credits paling besar?
3. Apakah ada prompt yang sebenarnya bisa dihilangkan?
4. Apakah semua peserta dapat mencapai vertical slice dalam 60 menit?
5. Checkpoint mana yang perlu disediakan sebagai backup?

Next step ke AWS

Ekstensi cloud sengaja tidak dilakukan dalam lab 60 menit. Requirement inti dapat dipertahankan; perbarui design.md dan tasks.md untuk migrasi implementasi.