Vibe Coding dengan Kiro AI — Materi Workshop

Sebelum Mulai · Fondasi ก่อนเริ่มต้น · ปูพื้นฐาน

🌱 Kenalan Dulu dengan Dunia AI 🌱 ปูพื้นฐาน ทำความเข้าใจโลก AI

Sebelum masuk ke Agentic AI dan Kiro, mari pahami dasarnya dulu — dari Machine Learning, Deep Learning, sampai Generative AI dan Foundation Model yang menjadi "otak" di balik Kiro. ก่อนจะก้าวไปสู่ Agentic AI และ Kiro เรามาทำความเข้าใจพื้นฐานกันแบบง่ายๆ ตั้งแต่ Machine Learning, Deep Learning ไปจนถึง Generative AI และ Foundation Model ซึ่งเป็น "หัวใจหลัก" เบื้องหลัง Kiro

Generative AI Adalah Bagian dari AI Generative AI เป็นส่วนหนึ่งของจักรวาล AI

Semua ini saling bersarang — Generative AI ada di dalam Deep Learning, yang ada di dalam Machine Learning, yang ada di dalam AI. เทคโนโลยีเหล่านี้ทำงานซ้อนกันเป็นชั้นๆ — Generative AI อยู่ใน Deep Learning ซึ่งอยู่ใน Machine Learning และครอบด้วย AI อีกที

Artificial Intelligence (AI)
                        Segala teknik yang membuat komputer bisa meniru kecerdasan manusia — lewat
                            logika, aturan if-then, dan machine learning.
                        ภาพรวมเทคนิคทั้งหมดที่ทำให้ระบบคอมพิวเตอร์คิดและประมวลผลได้ชาญฉลาดคล้ายมนุษย์
                    
Machine Learning (ML)
                        Bagian dari AI yang menggunakan mesin untuk mencari pola dalam data, lalu
                            membangun model logika secara otomatis.
                        แขนงของ AI
                            ที่สอนให้ระบบเรียนรู้และจดจำแพตเทิร์นจากชุดข้อมูลได้ด้วยตัวเอง
                    
Deep Learning (DL)
                        Bagian dari ML yang tersusun dari neural network berlapis-lapis dalam —
                            untuk tugas seperti pengenalan suara dan gambar.
                        ขั้นกว่าของ ML ที่ใช้โครงข่ายประสาทเทียมหลายชั้น ซับซ้อนขึ้น
                            เพื่อแยกแยะรูปภาพ เสียง และข้อมูลขนาดใหญ่
                    
Generative AI
                        Ditenagai oleh model besar yang dilatih (pretrained) pada data dalam
                            jumlah sangat besar — biasa disebut Foundation Model (FM).
                        AI ยุคใหม่ที่สร้างสรรค์สิ่งใหม่ได้
                            ขับเคลื่อนด้วยโมเดลยักษ์ใหญ่ที่ผ่านการเทรนข้อมูลมหาศาล (Foundation Model)
                    

Apa itu Machine Learning? Machine Learning คืออะไร?

"Bidang studi yang memberi komputer kemampuan untuk belajar tanpa diprogram secara eksplisit." — Arthur Samuel (1959) "การศึกษาที่ทำให้คอมพิวเตอร์เกิดการเรียนรู้ได้เอง โดยไม่ต้องถูกเขียนคำสั่งทีละบรรทัด" — Arthur Samuel (1959)

Pemrograman Klasik (if/else) การเขียนโปรแกรมแบบเดิม (if/else)

Manusia menuliskan aturannya sendiri. มนุษย์เป็นผู้ป้อนกฎเกณฑ์และเงื่อนไขเองทั้งหมด

Aturanกฎเงื่อนไข+Soalข้อมูล→Jawabanคำตอบ

Machine Learning

Mesin menemukan aturannya sendiri dari contoh. ระบบเรียนรู้และแกะกฎเกณฑ์ได้เองจากตัวอย่างข้อมูล

Soalโจทย์+Jawabanเฉลย→Model Terlatihโมเดลที่เรียนรู้แล้ว

Soal Baru yang Miripโจทย์ใหม่ที่คล้ายกัน→Jawabanคำตอบ

🎮 Coba Sendiri 🎮 ทดลองด้วยตัวเอง

Ajari Mesin Menilai Apel: Segar atau Busuk? สอน AI แยกแยะแอปเปิล: สด หรือ เน่า?

Model ini dilatih dari contoh berlabel untuk satu tugas saja. Geser slider kesegaran apel, lalu lihat jawaban mesin. โมเดลนี้ถูกฝึกมาเพื่อทำงานเฉพาะอย่างเดียว ลองปรับสไลเดอร์ระดับความสด แล้วสังเกตการตัดสินใจของ AI

🍏

Kesegaran apel: ระดับความสดของแอปเปิล: 62%

Segar ✅

Aturan hasil belajar: skor ≥ 55% = Segar. Output hanya berupa label.
🔒 Model ini hanya tahu cara membedakan segar vs busuk. กฎที่ระบบเรียนรู้: คะแนน ≥ 55% = สด โดยผลลัพธ์จะเป็นเพียง Label คำตอบเท่านั้น
🔒 โมเดลนี้เข้าใจเฉพาะงานแยกแยะ สด vs เน่า เท่านั้น

Panduan Lengkap คู่มือปฏิบัติจริง

📚 Materi Tutorial Hands-On 📚 คู่มือปฏิบัติจริงแบบ Step-by-Step

Panduan lengkap untuk pemula hingga developer — pilih topik di bawah untuk membaca detailnya. คู่มือเจาะลึกตั้งแต่ผู้เริ่มต้นจนถึงนักพัฒนา — เลือกแท็บหัวข้อด้านล่างเพื่อศึกษาเนื้อหาแต่ละส่วน

🚀 Langkah 1: Membuat Aplikasi Pertama dengan Kiro 🚀 ขั้นตอนที่ 1: เริ่มต้นสร้างแอปแรกด้วย Kiro

Ikuti 4 langkah sederhana ini untuk membangun aplikasi web fungsional pertama Anda dalam waktu kurang dari 30 menit. ทำตาม 4 ขั้นตอนง่ายๆ นี้เพื่อสร้างเว็บแอปพลิเคชันแรกของคุณให้ใช้งานได้จริงภายในเวลาไม่ถึง 30 นาที

Buka aplikasi Kiro AI di komputer Anda. Klik menu File → Open Folder lalu buat folder baru kosong (misalnya: my-first-app). Folder ini akan menjadi workspace tempat Kiro menyimpan seluruh kode aplikasi Anda. เปิดโปรแกรม Kiro AI บนคอมพิวเตอร์ของคุณ ไปที่เมนู File → Open Folder แล้วสร้างโฟลเดอร์ว่างใหม่ (เช่น my-first-app) โฟลเดอร์นี้จะกลายเป็น Workspace ที่ Kiro ใช้เก็บบันทึกไฟล์และโค้ดทั้งหมด

Gunakan panel chat Kiro (sisi kanan) untuk menjelaskan aplikasi yang ingin dibuat menggunakan bahasa alami. Gunakan rumus: [Tujuan] + [Fitur Utama] + [Gaya Tampilan]. ใช้แถบแชท Kiro (ด้านขวา) อธิบายแอปพลิเคชันที่คุณอยากสร้างด้วยภาษาพูดธรรมดา โดยใช้เทคนิค: [เป้าหมาย] + [ฟีเจอร์หลัก] + [สไตล์หน้าตา]

"Buatkan aplikasi web Calculator Kasir Sederhana. 
Fitur: Tambah nama barang & harga, hitung total otomatis, dan tombol reset.
Desain: Modern, bersih, warna tema dark mode dengan aksen hijau neon."

Kiro akan merencanakan tugas, lalu secara otomatis membuat file index.html, styles.css, dan script.js. Anda cukup mengklik tombol Accept atau Save All ketika Kiro mengusulkan perubahan file. Kiro จะวางแผนการทำงานและสร้างไฟล์ index.html, styles.css และ script.js ให้ทันที คุณเพียงแค่กดปุ่ม Accept หรือ Save All เมื่อ Kiro เสนอแก้ไขไฟล์

Klik tombol Preview di pojok kanan atas Kiro untuk melihat tampilan aplikasi secara live. Jika ada yang kurang, cukup minta Kiro di chat: "Tambahkan fitur diskon 10% saat total belanja di atas 100 ribu." คลิกปุ่ม Preview ที่มุมขวาบนของ Kiro เพื่อดูหน้าตาแอปพลิเคชันที่ทำงานจริง หากต้องการเพิ่มฟีเจอร์ ให้พิมพ์บอก Kiro เพิ่มเติมในแชทได้ทันที เช่น "เพิ่มส่วนลด 10% ให้อัตโนมัติเมื่อยอดรวมเกิน 1,000 บาท"

🎯 Kiro Steering — Mengarahkan AI Sesuai Standar

Kiro Steering adalah fitur untuk "Kustomisasi Otak" Kiro. Anda bisa memberikan instruksi permanen agar Kiro selalu mengikuti aturan koding, gaya desain, dan bahasa pilihan Anda. Kiro Steering คือฟีเจอร์สำหรับ "ตั้งค่ากรอบความคิด" ให้ Kiro เพื่อให้ AI เขียนโค้ดตามกฎเกณฑ์ ดีไซน์ และภาษาที่เรากำหนดไว้เสมอโดยไม่ต้องคอยพิมพ์สั่งซ้ำๆ

📂 Cara Kerja File Steering 📂 วิธีการทำงานของไฟล์ Steering

Kiro membaca folder .kiro/steering/ pada proyek Anda. Setiap file Markdown (.md) di dalam folder ini akan dianggap sebagai "Aturan Wajib" saat Kiro menghasilkan kode. Kiro จะอ่านไฟล์ในโฟลเดอร์ .kiro/steering/ ของโปรเจกต์คุณ ทุกไฟล์ Markdown (.md) ในโฟลเดอร์นี้จะถูกใช้เป็น "กฎเหล็ก" ที่ Kiro ต้องปฏิบัติตามทุกครั้งที่เขียนโค้ด

💡 Contoh Penggunaan Steering 💡 ตัวอย่างการประยุกต์ใช้งาน

design-rules.md: Menentukan warnaหลัก, font, dan spacing UI design-rules.md: กำหนดชุดสีหลัก ฟอนต์ และระยะห่าง UI
tech-stack.md: Meminta Kiro selalu memakai Vanilla JS tanpa framework tech-stack.md: กำหนดให้ใช้ Vanilla JS เท่านั้น ไม่ใช้ Framework
language.md: Mewajibkan komentar kode dalam bahasa Inggris language.md: บังคับเขียน Comment โค้ดเป็นภาษาอังกฤษ

📝 Contoh File Steering: `.kiro/steering/style.md` 📝 ตัวอย่างไฟล์ Steering: `.kiro/steering/style.md`

# Coding & Design Rules

- Always use CSS Variables for colors defined in styles.css.
- Ensure all components are responsive for mobile screens (max-width: 768px).
- Write clean comments in English for JavaScript functions.
- Never use inline CSS attributes in HTML tags.

📋 Spec-Driven Development — Merancang Sebelum Menulis Kode

Pendekatan paling efektif dalam Vibe Coding: Biarkan Kiro membantu Anda menulis dokumen spesifikasi (Spec) terlebih dahulu agar aplikasi dibangun secara terstruktur dan bebas bug. แนวคิดการพัฒนาที่ได้ผลดีที่สุดใน Vibe Coding: ให้ Kiro ช่วยร่างพิมพ์เขียวเอกสารข้อกำหนด (Spec) ก่อนลงมือเขียนโค้ดจริง เพื่อให้แอปพลิเคชันมีโครงสร้างชัดเจนและลดข้อผิดพลาด

1. Requirements (`requirements.md`)
                            Mendefinisikan tujuan proyek, pengguna target, dan daftar fitur (User
                                Stories & Acceptance Criteria).
                            ระบุเป้าหมายของโปรเจกต์ กลุ่มผู้ใช้งานหลัก และรายการฟีเจอร์ที่ต้องมี
                                (User Stories)
                        
2. Design (`design.md`)
                            Merancang arsitektur data, komponen UI, alur navigasi, dan skema warna
                                aplikasi.
                            วางโครงสร้างสถาปัตยกรรมข้อมูล ชิ้นส่วน UI ลำดับการใช้งาน
                                และดีไซน์ระบบ
                        
3. Tasks (`tasks.md`)
                            Memecah spesifikasi menjadi daftar tugas kecil berurutan (Checklist)
                                yang akan dieksekusi Kiro satu per satu.
                            ย่อยข้อกำหนดออกเป็นรายการภารกิจขนาดเล็ก (Checklist) เพื่อให้ Kiro
                                ทยอยลงมือทำทีละข้อ
                        

⚡ Perintah Kiro Spec ⚡ คำสั่งสร้าง Spec ใน Kiro

Ketik perintah ini di Kiro Chat untuk memulai pembuatan spesifikasi otomatis: พิมพ์คำสั่งนี้ในช่องแชท Kiro เพื่อให้ AI ช่วยร่างเอกสาร Spec ให้อัตโนมัติ:

/spec create Initial specification for my Task Management Application

🔌 Model Context Protocol (MCP) — Menghubungkan Kiro ke Dunia Luar

MCP adalah standar terbuka yang memungkinkan Kiro berkomunikasi dengan database, layanan API, browser automation, dan alat pengembang lainnya secara aman. MCP คือมาตรฐานกลางที่เปิดให้ Kiro สามารถสื่อสารและทำงานร่วมกับ Database, External API, ระบบจำลองเว็บ และเครื่องมือภายนอกต่างๆ ได้อย่างปลอดภัย

🗄️ Database Access

Kiro bisa membaca schema database PostgreSQL/MySQL Anda dan membuatkan query SQL atau API endpoint secara langsung. ช่วยให้ Kiro อ่านโครงสร้าง Database (เช่น PostgreSQL/MySQL) และเขียนคำสั่ง SQL หรือสร้าง API Endpoint ให้คุณได้ทันที

🌐 Web Fetching & Search

Kiro dapat mengambil dokumentasi API terbaru dari internet secara real-time saat menulis kode. ช่วยให้ Kiro ค้นหาและอ่านเอกสารคู่มือ API ล่าสุดจากอินเทอร์เน็ตได้เรียลไทม์ขณะกำลังเขียนโค้ด

🌐 Browser Automation

Menguji tampilan UI dan mendeteksi bug tampilan secara otomatis menggunakan headless browser (Puppeteer/Playwright). ทดสอบหน้าตา UI และตรวจจับบั๊กแสดงผลได้อัตโนมัติผ่านระบบการจำลองเบราว์เซอร์

⚙️ Contoh Konfigurasi MCP: `.kiro/mcp.json` ⚙️ ตัวอย่างไฟล์ตั้งค่า MCP: `.kiro/mcp.json`

{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost/mydb"]
    }
  }
}

🏆 Lomba Kreativitas Vibe Coding — Shevibes Challenge

Sesi tantangan 1 - 1.5 jam di mana peserta memanfaatkan Kiro AI untuk membangun ide aplikasi paling inovatif dan solutif. กิจกรรมท้าทายความสามารถ 1 - 1.5 ชั่วโมง ที่เปิดโอกาสให้ผู้เข้าร่วมใช้ Kiro AI สร้างสรรค์แอปพลิเคชันสุดนวัตกรรมเพื่อแก้ไขปัญหาจริง

🎯 Tema Aplikasi Bebas 🎯 ธีมการแข่งขัน (เปิดกว้าง)

Anda boleh membuat aplikasi jenis apa saja! Beberapa contoh inspirasi: คุณสามารถเลือกสร้างแอปประเภทใดก็ได้ตามจินตนาการ! ตัวอย่างไอเดียแรงบันดาลใจ:

Productivity: Pomodoro Timer, Habit Tracker, Note App Productivity: แอปจัดการเวลา, ตัวติดตามนิสัย, แอปบันทึกโน้ต
Lifestyle & Health: Water Tracker, Calorie Counter, Mental Check-in Lifestyle & Health: แอปเตือนดื่มน้ำ, คำนวณแคลอรี, ตรวจเช็กสุขภาพจิต
Tools & Utility: Expense Tracker, Currency Converter, Mini Quiz Tools & Utility: บันทึกรายรับ-รายจ่าย, แปลงคำนวณสกุลเงิน, เกมควิซทายสนุกๆ

📌 Aturan Main Lomba 📌 กฎระเบียบการแข่งขัน

✅ Wajib menggunakan Kiro AI sebagai alat koding utama ✅ ต้องใช้ Kiro AI เป็นเครื่องมือหลักในการพัฒนา
✅ Waktu pengerjaan maksimal 90 menit ✅ ระยะเวลาสร้างสรรค์ผลงานสูงสุด 90 นาที
✅ Aplikasi harus berjalan dengan baik saat di-preview ✅ แอปต้องแสดงผลและใช้งานได้จริงในหน้า Preview
✅ Mempresentasikan karya secara singkat (2 menit) di depan juri ✅ นำเสนอไอเดียและผลงานสั้นๆ (2 นาที) ต่อหน้าคณะกรรมการ

⚖️ Kriteria Penilaian Juri (Jury Evaluation Rubric)

Rubrik resmi penilaian karya peserta workshop Vibe Coding Shevibes. เกณฑ์การประเมินและให้คะแนนผลงานอย่างเป็นทางการ สำหรับคณะกรรมการเวิร์กชอป Shevibes

Kriteria เกณฑ์การประเมิน	Bobot สัดส่วนคะแนน	Deskripsi Penilaian คำอธิบายรายละเอียด
Fungsionalitas (Functionality)	30%	Aplikasi berjalan tanpa error, fitur utama berfungsi sesuai tujuan, dan responsif. แอปพลิเคชันทำงานได้จริงโดยไม่พบบั๊ก ฟีเจอร์หลักใช้งานได้สมบูรณ์และตอบสนองได้ดี
Kreativitas & Ide (Creativity)	25%	Keunikan konsep, solusi yang ditawarkan, dan kejelian menyelesaikan masalah harian. ความแปลกใหม่ของไอเดีย ประโยชน์ของแอป และความสร้างสรรค์ในการแก้ปัญหาในชีวิตประจำวัน
Desain & UX (User Experience)	25%	Tampilan visual rapi, konsistensi warna, dan kenyamanan pengguna saat mencoba aplikasi. หน้าตาแอปพลิเคชันสวยงาม เป็นระเบียบ โทนสีสบายตา และใช้งานง่ายไม่ซับซ้อน
Pemanfaatan AI & Pitching	20%	Efektivitas dalam menggunakan Kiro (Steering/Prompt) serta kejelasan presentasi 2 menit. ความเชี่ยวชาญในการสั่งงาน Kiro AI (Steering/Prompt) และความชัดเจนในการนำเสนอผลงานภายใน 2 นาที

Satu Ruang, Banyak Kemungkinan พื้นที่สร้างสรรค์ กับความเป็นไปได้ไม่รู้จบ

Untuk Siapa เหมาะสำหรับใคร

Format รูปแบบการเรียน

Hasil Akhir ผลลัพธ์ที่จะได้

Durasi Praktik ระยะเวลาปฏิบัติ

🌱 Kenalan Dulu dengan Dunia AI 🌱 ปูพื้นฐาน ทำความเข้าใจโลก AI

Generative AI Adalah Bagian dari AI Generative AI เป็นส่วนหนึ่งของจักรวาล AI

Artificial Intelligence (AI)

Machine Learning (ML)

Deep Learning (DL)

Generative AI

Apa itu Machine Learning? Machine Learning คืออะไร?

Pemrograman Klasik (if/else) การเขียนโปรแกรมแบบเดิม (if/else)

Machine Learning

Ajari Mesin Menilai Apel: Segar atau Busuk? สอน AI แยกแยะแอปเปิล: สด หรือ เน่า?

✨ Dari ML Klasik ke Generative AI ✨ จาก ML ยุคเดิม สู่ Generative AI ยุคใหม่

1. Generative AI 1. Generative AI คืออะไร

2. Foundation Model (FM) 2. Foundation Model (FM)

3. Large Language Model (LLM) 3. Large Language Model (LLM)

🤖 Lompatan ke Agentic AI 🤖 ก้าวกระโดดสู่ Agentic AI

💬 Chat / Prompting Biasa 💬 การใช้ Prompt แบบเดิม (Chat-based)

🧠 Agentic AI (Kiro Style) 🧠 Agentic AI (รูปแบบของ Kiro)

📈 Evolusi Alat Bantu Coding 📈 วิวัฒนาการของเครื่องมือช่วยเขียนโค้ด

Autocomplete

Code Assistant (Copilot)

Agentic AI (Kiro)

⚡ Apa itu Kiro AI? ⚡ Kiro AI คืออะไร?

🎯 Steering (.kiro/steering)

📋 Spec-Driven Dev (.kiro/spec)

🔌 MCP (Model Context Protocol)

🗺️ Perjalanan Workshop Shevibes 🗺️ เส้นทางกิจกรรม Workshop Shevibes

Sesi 1: Pengenalan & Setup (30 Menit) ช่วงที่ 1: แนะนำภาพรวม & จัดเตรียมเครื่องมือ (30 นาที)

Sesi 2: Hands-On Aplikasi Pertama (60 Menit) ช่วงที่ 2: ลงมือทำสร้างแอปพลิเคชันแรก (60 นาที)

Sesi 3: Lomba Kreativitas & Challenge (60–90 Menit) ช่วงที่ 3: กิจกรรมประลองไอเดียสุดสร้างสรรค์ (60–90 นาที)

Sesi 4: Showcase & Penilaian Juri (30 Menit) ช่วงที่ 4: นำเสนอผลงาน & ประกาศรางวัล (30 นาที)