Bina Web-App Menggunakan Claude Code untuk Pemula – Workshop 22-23 Julai 2026
Workshop Live · 22–23 Julai 2026

Bina Web-App
Guna Claude Code
untuk Pemula

Belajar membina web-app tanpa coding yang rumit. Mulai dari nol hingga berhasil membuat aplikasi Kaunter & Pesanan Online yang saling terintegrasi menggunakan Claude AI.

Sertai Workshop Lihat Kurikulum
22–23 Julai 2026 2 Jam per Hari Zoom & YouTube Live Cocok untuk Pemula
8+
Sesi Materi
2
Hari Workshop
4 Jam
Jumlah Tempoh Live
2
Aplikasi Dibina
70+
Telah Mendaftar

Penceramah Workshop

Belajar terus dari pengamal,
bukan sekadar teori

Aulia Hanifan
Senior Full-stack Developer

Berpengalaman membina aplikasi web skala produksi. Spesialis dalam membantu non-developer memahami dan memanfaatkan AI untuk membina produk digital nyata.

Full-stack Dev AI Builder Trainer

Yang Anda Bina

Dua aplikasi sebenar yang
boleh terus digunakan

Bukan sekadar contoh sederhana — kamu membina sistem kaunter dan pesanan online yang benar-benar berfungsi dan saling terintegrasi.

Aplikasi Kaunter Bayar (POS)

Papan pemuka kaunter lengkap dengan pengurusan produk, troli, daftar keluar, diskaun, cukai, cetak resit, dan laporan jualan.

Web-App Pesanan Online

Halaman menu produk untuk pelanggan — boleh pesan, pilih kaedah pembayaran, dan semak status pesanan secara masa nyata.

Sistem Bersepadu

Order dari web masuk otomatis ke kaunter, stok update sendiri, dan laporan penjualan mencatat setiap transaksi secara real-time.

Kemahiran Pembinaan dengan Claude

Cara prompt yang betul, alur kerja AI coding, dan cara menambah ciri baharu ke aplikasi anda selepas workshop tamat.

Kajian Kes Sebenar

Web-app yang telah kami
bina untuk pelanggan

Web-app ini yang telah kami bina menggunakan Claude Code untuk klien — dari sifar, tanpa coding manual yang rumit.

App Kaunter Sewa
namadomain.com/kaunter
📋 Kaunter Sewa Sen, 25 Jul
1. Pelanggan
2. Gear
3. Konfirmasi
Data Pelanggan
Nama penuh *
Budi Santoso
No. HP (notif WA)
08xxxxxxxxxx
Pakej sewa *
2H1M
2 Hari 1 Malam
3H2M
3 Hari 2 Malam
Tarikh sewa *
25/07/2026
📅 Paket 2H1M · Sewa: 25 Jul 2026 → Kembali: 26 Jul 2026
Tujuan / catatan
Naik Merbabu, weekend…
Pilih Gear →
● Tersimpan · Terhubung Sheets
📋
Kaunter
📄
Transaksi
📦
Stok
📊
Laporan
⚙️
Setelan
Input Pelanggan Pilih Gear Stok Masa Nyata Laporan Segerak Sheets
App Pesanan Online
namadomain.com/pesan
Highland Adventure
Pilih Gear Sewa
Pilih Pakej & Tanggal
2H1M
2 Hari 1 Malam
3H2M
3 Hari 2 Malam
Tarikh sewa
25/07/2026
Tarikh pulang
26/07/2026
📦 Paket Bundling — Lebih Hemat!
Paket Simple Tek Tok
RM 8
Spesial trail ringan · 2 item · 2H1M
• Hydropack Bogaroo Zoya 10L ×1 • Trekking Pole Blue & Teal ×1
+ Pilih Pakej Ini
Paket Happy Tek Tok
RM 18
Seru buat tek tok · 5 item · 2H1M
• Hydropack ×1 • Trekking Poles ×1 • Headlamp ×1 • Sepatu ×1
+ Pilih Pakej Ini
Pilih Pakej Paket Bundling Tanggal Sewa Daftar Keluar Online Status Pesanan
Tab Stok — 24 jenis gear · 271 unit tersedia · Segerak Google Sheets
📦 Stok ↻ Segerak Sheets
24
Jenis Gear
271
Unit Tersedia
0
Sedang Disewa
271
Jumlah Unit
TRACKING POLE
RM 4 2H1M · RM 6 3H2M
20/20
SEPATU (TRACKING)
RM 9 2H1M · RM 13 3H2M
15/15
EMERGENCY BLANKET
RM 3 2H1M
30/30
SEPATU (TRAIL RUN)
RM 11 2H1M · RM 15 3H2M
4/4

Kurikulum

8 Sesi dalam 2 Hari

Dari memahami Claude hingga aplikasi live di internet — semua praktikal langsung, bukan teori semata.

Hari 1 Membina Aplikasi Kaunter Bayar dengan Claude 2 Jam
Session 01

Mengenali Claude untuk Membina Web-App

  • Apa itu Claude dan kenapa unggul untuk coding
  • Claude vs ChatGPT vs Gemini untuk development
  • Cara berfikir seperti pembina semasa guna AI
  • Cara menulis prompt yang menghasilkan kod kemas
Session 02

Merancang Aplikasi Sebelum Coding

  • Membuat Dokumen Keperluan Produk (PRD) dengan Claude
  • Merancang pangkalan data: jadual produk, transaksi, pengguna
  • Menentukan halaman dan alur aplikasi kaunter
  • Sediakan projek dan struktur folder
Session 03

Membina UI Aplikasi Kaunter Bayar

  • Halaman log masuk untuk admin kaunter
  • Tataletak papan pemuka dengan bar sisi navigasi
  • Halaman senarai produk dan borang tambah produk
  • Paparan responsif dan mod gelap (pilihan)
Session 04

Ciri Transaksi Kaunter Lengkap

  • Keranjang belanja, checkout, diskon & pajak
  • Cetak resit dan sejarah transaksi
  • Pengurusan stok barang berkurang secara automatik
  • Laporan jualan harian dan bulanan
Output Hari 1: Aplikasi kaunter berjalan di namadomain.com/kaunter
Hari 2 Pesanan Online & Integrasi ke Kaunter 2 Jam
Session 05

Membina Halaman Pesanan Online

  • Halaman utama dan paparan menu produk
  • Butiran produk dan troli belanja pelanggan
  • Borang daftar keluar dan pilih kaedah pembayaran
  • Halaman pengesahan dan penjejakan status pesanan
Session 06

Menghubungkan Pesanan Online ke Kaunter

  • Pangkalan data dikongsi: satu sumber data untuk dua aplikasi
  • Pesanan online masuk secara automatik ke papan pemuka kaunter
  • Notifikasi masa nyata apabila ada pesanan baharu
  • Stok berkurang automatik apabila pesanan disahkan
Session 07

Membinakan Ciri Tambahan dengan Claude

  • Cara meminta Claude menambah ciri baharu ke kod sedia ada
  • Contoh: baucar, keahlian, pelbagai cawangan, pesanan QR
  • Papan pemuka analitik dan eksport laporan ke Excel
  • Corak prompt agar kod kekal kemas dan berstruktur
Session 08

Deploy dan Terbitkan ke Internet

  • Deploy aplikasi ke hosting percuma atau berbayar
  • Pasang domain dan ujian sebelum live
  • Cara penyelenggaraan dan kemas kini aplikasi bersama Claude
  • Langkah seterusnya: meneruskan projek sendiri
Output Hari 2: Dua aplikasi terintegrasi, live di internet

Cara Kerja Integrasi

Pesanan online masuk automatik
ke papan pemuka kaunter anda

Sistem yang kamu bina bekerja seperti ini — pelanggan pesan, kaunter langsung tahu, stok berkurang, laporan tercatat sendiri.

Pelanggan Pesan
namadomain.com/order
Masuk ke Kaunter
Terpapar automatik
Notifikasi
Kaunter terima amaran
Diproses
Status dikemas kini secara langsung
Selesai
Notif pelanggan
Laporan Bertambah
Direkod automatik

Harga Workshop

Pilih pakej yang sesuai

Investasi terjangkau untuk skill yang boleh terus digunakan membina aplikasi nyata.

Pakej Basic
RM RM 20
Akses penuh ke semua sesi workshop
Workshop Langsung via Zoom & YouTube
Rakaman Seumur Hidup
Sesi QnA Interaktif
Pilih Pakej Basic

⚠️ Batch 2 harga akan naik

Pembayaran selamat · Rakaman Seumur Hidup · Akses materi selamanya

FAQ

Soalan Lazim

Adakah workshop ini sesuai untuk pemula mutlak?
Ya, workshop ini dirancang khusus untuk pemula yang belum pernah coding sama sekali. Kamu akan belajar step by step dengan panduan langsung. Yang penting punya keinginan untuk belajar dan laptop yang terhubung internet.
Adakah perlu install perisian tertentu terlebih dahulu?
Sebagian besar tools bisa diakses lewat browser. Detail persiapan teknis akan dikirimkan ke email peserta sebelum workshop dimulai. Pastikan kamu memiliki akun Claude AI — versi percuma sudah cukup untuk belajar.
Bagaimana jika tidak dapat hadir semasa sesi live?
Semua sesi akan direkam dan rekaman tersedia seumur hidup untuk seluruh peserta. Kamu bisa menonton ulang kapan saja dan sebanyak yang kamu mau tanpa batas waktu.
Apakah perbezaan Pakej Basic dan Complete?
Keduanya mendapat akses penuh ke semua sesi live, rekaman lifetime, dan QnA interaktif. Pakej Complete tambah 2 ebook eksklusif (Rangkuman Workshop + Panduan Claude AI) dan E-Sijil resmi.
Selepas workshop, bolehkah terus bina aplikasi sendiri?
Ya! Justru itu tujuan utama workshop ini. Di akhir hari ke-2 kamu sudah punya dua aplikasi yang berjalan. Kamu juga akan belajar workflow dan cara prompt Claude agar bisa terus mengembangkan aplikasi sendiri tanpa perlu tergantung orang lain.

Mulakan Sekarang

Bersedia bina web-app
pertama anda?

Workshop bermula 22 Julai 2026. Daftar sekarang dan bina aplikasi kaunter & pesanan online sendiri dalam 2 hari.

Daftar Sekarang

22–23 Julai 2026 · Live via Zoom & YouTube · Rakaman Seumur Hidup