Ngoding Bareng AI: Dari Kenalan Sampai Jadian

Kelas 5 jam yang ngebantu kamu bikin project POS sederhana sambil belajar ngobrol bener sama AI, bukan sekadar copy–paste kode.

Project: POS Kasir Sederhana buat warung kopi atau toko kecil

Target peserta: pemula sampai yang sering ditinggal error

Tools: VS Code + GitHub Copilot Free

Output: 1 project POS yang beneran bisa dipakai

Gambaran Kelas

Runtutan 5 Jam

Jam 1: PDKT sama AI Jam 2: Resmi jadian sama Copilot Jam 3: Belajar prompt yang niat Jam 4: Brainstorming POS Jam 5: Ngoding bareng AI

● Peserta paham dulu konsep AI dan cara mikirnya.
● Peserta nyaman pakai VS Code + Copilot untuk ngoding sehari-hari.
● Peserta bisa nulis prompt yang jelas, sopan, dan niat.
● Peserta bareng-bareng ngerancang dan bikin project POS kasir sederhana.

Output Akhir

POS Kasir Sederhana

● Aplikasi POS sederhana untuk warung kopi atau toko kecil.
● Fitur: daftar produk, keranjang, total belanja, bayar, dan kembalian.
● Peserta punya kumpulan prompt siap pakai untuk React, FastAPI, dan Flutter.
● Mindset: AI sebagai partner, bukan pengganti otak.

Rundown 5 Jam

Dari kenalan sama AI sampai project POS jalan, pelan-pelan tapi pasti.

Jam 1

PDKT Sama AI

Kenalan dulu, jangan langsung minta nikah

AI itu temen satu tim yang cepet tapi kadang sotoy.

● Bedain AI, tukang sulap, dan otak kita sendiri.
● Contoh kesalahan: copy–paste tanpa paham, prompt ngasal.
● Ngeliat gimana AI bisa salah dan gimana cara benerinnya.

“AI itu nurut, tapi kamu yang harus dewasa.”

Jam 2

Resmi Jadian Sama Copilot

Install dulu, baru mesra

Belajar pakai VS Code + Copilot tanpa takut salah tekan.

● Setup VS Code, login GitHub, dan aktifkan Copilot Free.
● Cobain inline suggestion dan comment jadi kode.
● Pakai Copilot Chat buat jelasin kode dan rapihin fungsi.

“AI makin pinter kalau kamu komunikatif.”

Jam 3

Cara Ngobrol Biar AI Nempel

Prompting biar ga PHP

Belajar nulis prompt yang jelas, bukan cuma “tolong bikinin”.

● Rumus prompt: lagi ngapain, maunya apa, batasan apa, output apa.
● Bedain prompt ngasal vs prompt niat dengan contoh nyata.
● Latihan prompt khusus buat project POS.

“Bukan AI-nya yang salah, kamu aja yang ga jelas.”

Jam 4

Brainstorming Project POS

Ngimpiin masa depan bareng

Dari ide random sampai blueprint POS kasir sederhana.

● Nentuin tujuan aplikasi: bantu kasir di warung kecil.
● Milih fitur inti: produk, keranjang, total, bayar, kembalian.
● Rancang flow, layout, dan struktur file bareng AI.

“Project kecil tapi jalan lebih baik dari ide gede tapi wacana.”

Jam 5

Ngoding Bareng AI

Bukti cinta itu aksi

Ngoding POS kasir sederhana dari nol sampai bisa dipakai.

● Generate struktur project dan kerangka halaman.
● Ngoding 1–2 fitur inti: keranjang, total, kembalian.
● Debug bareng AI dan review hasilnya bareng-bareng.

“Ngoding ga sendirian lagi.”

Framework yang Dipakai

Satu ide POS, tiga rasa implementasi: React untuk front-end, FastAPI untuk back-end, dan Flutter untuk mobile.

React

Single Page App

Buat tampilan POS kasir berbasis web yang interaktif, dengan daftar produk dan keranjang yang responsif.

Komponen State Event handler

FastAPI

REST API

Backend ringan untuk nyimpen data produk dan transaksi POS dalam bentuk API yang rapi.

Endpoint Model Validasi

Flutter

Mobile App

Aplikasi mobile POS sederhana yang bisa dibawa kasir ke mana-mana di HP atau tablet.

Widget Stateful ListView

Prompt POS Sederhana untuk React

Satu halaman, satu komponen, satu keranjang. React dipakai buat bikin tampilan POS kasir yang interaktif dan enak dipakai.

Level: Pemula React bisa dari nol atau dari Vite/CRA

Fokus: komponen, state, dan event

Output: Single Page App POS kasir

Prompt Step-by-Step React POS

Prompt ini bisa kamu pakai di Copilot Chat atau AI lain. Edit sesuai kebutuhan kelas.

1. Setup project React untuk POS

Anggap kamu mentor React untuk pemula.
Aku mau bikin aplikasi POS kasir sederhana menggunakan React.
Tolong:
- Sarankan cara paling simpel untuk membuat project React baru (boleh pakai Vite atau CRA),
- Jelaskan struktur folder minimal yang aku butuhkan,
- Jelaskan singkat apa fungsi setiap file.
Gunakan bahasa Indonesia yang santai dan jelaskan seolah aku belum terlalu hafal React.

2. Komponen daftar produk

Sekarang aku mau bikin komponen daftar produk untuk POS kasir React.
Spesifikasi:
- Ada array produk berisi nama dan harga,
- Tampilkan produk dalam bentuk list atau card,
- Setiap produk punya tombol "Tambah ke Keranjang".
Buatkan:
- Contoh kode komponennya,
- Jelaskan penggunaan props dan event handler yang dipakai,
- Jelaskan pelan-pelan karena aku masih pemula.

3. State keranjang belanja

Sekarang bantu aku menambahkan fitur keranjang belanja di React.
Kebutuhan:
- Pakai useState untuk menyimpan keranjang,
- Saat tombol "Tambah ke Keranjang" diklik, item dimasukkan ke keranjang,
- Jika item yang sama ditambahkan lagi, jumlahnya bertambah, bukan bikin baris baru.
Tolong:
- Tulis contoh kode React (boleh gabung dalam satu komponen dulu),
- Jelaskan bagaimana struktur state keranjang yang kamu pilih,
- Jelaskan bagaimana cara perhitungan subtotal per item.

4. Hitung total, bayar, dan kembalian

Sekarang tambahkan fitur total, bayar, dan kembalian di aplikasi POS React.
Detail:
- Hitung total dari semua item di keranjang,
- Ada input untuk jumlah uang yang dibayar,
- Saat tombol "Bayar" ditekan, tampilkan kembalian,
- Jika uang kurang, tampilkan pesan bahwa uang tidak cukup.
Tolong berikan:
- Contoh kode React-nya,
- Penjelasan singkat tiap bagian kode,
- Tips validasi sederhana untuk input angka.

5. Rapikan dan refactor

Ini kode lengkap aplikasi POS React yang sudah aku buat. Tolong:
- Review struktur komponen dan state yang kupakai,
- Sarankan pemisahan komponen yang lebih rapi (misalnya ProductsList, Cart, Summary),
- Ganti nama variabel/fungsi yang kurang jelas,
- Beri saran singkat bagaimana cara membuat kode ini lebih mudah dipahami pemula.
Jangan mengubah terlalu banyak fitur, fokus di kerapihan dan keterbacaan.

Prompt POS Sederhana untuk FastAPI

FastAPI dipakai sebagai dapur belakang: nyiapin data produk, nyimpen transaksi, dan ngasih API yang rapi buat front-end.

Level: Pemula Python fokus di REST API dasar

Fokus: endpoint, model, dan validasi

Output: API POS sederhana dengan SQLite

Prompt Step-by-Step FastAPI POS

Prompt ini membantu kamu bikin backend POS yang siap dihubungkan ke React atau Flutter.

1. Setup project FastAPI

Anggap kamu mentor Python yang sabar untuk pemula.
Aku mau bikin backend POS kasir sederhana menggunakan FastAPI dan SQLite.
Tolong:
- Jelaskan langkah instalasi FastAPI dan uvicorn,
- Berikan contoh struktur folder project yang simpel,
- Jelaskan singkat fungsi masing-masing file utama.
Gunakan bahasa Indonesia dan jelaskan seolah aku belum pernah bikin API sebelumnya.

2. Model dan endpoint produk

Sekarang aku mau membuat model dan endpoint produk untuk POS di FastAPI.
Kebutuhan:
- Setiap produk punya id, nama, dan harga,
- Data disimpan di SQLite melalui ORM yang sederhana (boleh pakai SQLModel atau SQLAlchemy),
- Ada endpoint untuk: list semua produk, tambah produk baru, dan update harga produk.
Tolong:
- Buatkan contoh kode model dan endpoint FastAPI,
- Jelaskan alur request → validasi → simpan ke database.

3. Endpoint transaksi POS

Sekarang tambahkan fitur transaksi POS kasir di FastAPI.
Kebutuhan:
- Satu transaksi berisi beberapa item (produk dan jumlah),
- Backend menghitung total belanja,
- Backend menyimpan transaksi ke database,
- Ada endpoint untuk:
  - membuat transaksi baru,
  - melihat daftar transaksi terakhir.
Tolong:
- Buatkan contoh model transaksi dan endpoint FastAPI,
- Jelaskan bagaimana perhitungan total dilakukan di backend,
- Jelaskan singkat bagaimana cara menghindari input yang tidak valid.

4. Validasi dan dokumentasi API

Sekarang bantu aku menambahkan validasi dan dokumentasi untuk API POS FastAPI ini.
Kebutuhan:
- Pastikan harga dan jumlah produk tidak boleh negatif atau nol,
- Tambahkan response model yang rapi untuk transaksi,
- Tunjukkan bagaimana memanfaatkan dokumentasi otomatis FastAPI (Swagger UI).
Tolong jelaskan:
- Potongan kode yang perlu ditambahkan,
- Cara menjelaskan API ini ke front-end developer React atau Flutter.

Prompt POS Sederhana untuk Flutter

Flutter dipakai buat bikin aplikasi POS kasir versi mobile yang bisa dibawa keliling warung.

Level: Pemula Flutter fokus di widget dan state dasar

Fokus: widget, stateful, dan ListView

Output: app POS sederhana di emulator/HP

Prompt Step-by-Step Flutter POS

Flutter enak untuk demo POS mobile di kelas. Prompt ini bantu dari nol sampai bisa testing di emulator.

1. Setup project Flutter POS

Anggap kamu mentor Flutter untuk pemula.
Aku mau bikin aplikasi POS kasir sederhana menggunakan Flutter.
Tolong:
- Berikan perintah untuk membuat project Flutter baru,
- Jelaskan struktur folder utama yang perlu aku kenali,
- Tunjukkan di file mana aku akan mulai menulis tampilan POS.
Gunakan bahasa Indonesia yang santai.

2. Halaman utama dan daftar produk

Sekarang bantu aku membuat halaman utama aplikasi POS Flutter.
Kebutuhan:
- Menggunakan StatefulWidget,
- Menampilkan daftar produk dalam bentuk ListView,
- Setiap produk menampilkan nama, harga, dan tombol "Tambah".
Tolong:
- Buatkan contoh kode Dart lengkap untuk halaman ini,
- Jelaskan singkat setiap bagian penting dari widget yang kamu buat.

3. State keranjang dan ringkasan

Sekarang tambahkan fitur keranjang belanja di halaman POS Flutter.
Kebutuhan:
- Menyimpan keranjang sebagai list di dalam state,
- Saat tombol "Tambah" diklik, produk masuk ke keranjang,
- Tampilkan ringkasan keranjang: jumlah item dan total harga.
Tolong:
- Tambahkan kode pada State untuk mengelola keranjang,
- Jelaskan bagaimana setState dipakai untuk memperbarui tampilan.

4. Fitur bayar dan kembalian

Sekarang tambahkan fitur bayar dan kembalian di aplikasi POS Flutter.
Kebutuhan:
- Ada input (TextField) untuk jumlah uang yang dibayar,
- Saat tombol "Bayar" ditekan, hitung kembalian,
- Jika uang kurang, tampilkan pesan error yang ramah.
Tolong:
- Berikan contoh kode untuk bagian input dan tombol bayar,
- Jelaskan bagaimana cara menangani input angka di Flutter,
- Berikan sedikit saran bagaimana merapikan UI agar mudah dipakai kasir.