Latihan — SaaS dengan AI

Gambaran Keseluruhan Latihan

Setiap latihan adalah langkah dalam perjalanan membina SaaS anda. Lengkapkan mengikut urutan — setiap latihan membina dari latihan sebelumnya.

#	Latihan	Anggaran Masa	Hasil
1	Brainstorm 3 idea SaaS & pilih satu	15-20 minit	Idea SaaS yang jelas + value proposition
2	Bina landing page + pricing table	30-45 minit	Landing page profesional dengan 3 tiers
3	Setup auth + protected dashboard	30-45 minit	Signup/login/logout + dashboard protected
4	Setup payment page (test mode)	20-30 minit	Stripe checkout functional dalam test mode
5	Deploy SaaS ke internet	15-20 minit	SaaS live di URL awam

Jumlah masa: Semua latihan boleh disiapkan dalam 2-3 jam dengan bantuan AI. Jangan tulis kod manually — prompt AI untuk setiap latihan.

Latihan 1: Brainstorm & Pilih Idea SaaS

Latihan 1

Brainstorm 3 Idea SaaS & Pilih Satu

Objektif: Hasilkan 3 idea micro-SaaS dan pilih satu untuk dibina. Fokus pada masalah spesifik yang boleh diselesaikan dengan software ringkas.

Arahan:

Gunakan AI untuk brainstorm: "Brainstorm 5 idea micro-SaaS untuk [niche/pasaran]. Setiap idea perlu: masalah, target pengguna, 3 pricing tiers, satu feature utama."
Pilih 3 idea terbaik dari output AI
Untuk setiap idea, tulis: (a) Nama SaaS, (b) Masalah yang diselesaikan, (c) Target pengguna, (d) Bagaimana ia menjana duit
Pilih SATU idea untuk dibina. Gunakan kriteria: paling mudah dibina, paling difahami, paling ramai target pengguna
Tulis value proposition dalam satu ayat: "[Nama SaaS] membantu [target pengguna] untuk [masalah] dengan [penyelesaian]."

Prompt rujukan: Prompt #1 di halaman rujukan — "Brainstorm 5 idea micro-SaaS untuk [niche/industry]"

Contoh Output:

Idea Terpilih: "AssignMate" — Task manager untuk pelajar universiti
Value Proposition: "AssignMate membantu pelajar universiti
untuk tidak tertinggal deadlines dengan smart task management,
automatic prioritization, dan progress tracking."
Target: 10,000 pelajar universiti di Malaysia
Pricing: Free (3 projects), Pro RM19/bln (unlimited),
         Premium RM49/bln (unlimited + AI scheduling)

Tip: Kalau susah nak decide, pilih yang paling simple. SaaS yang selesaikan satu masalah kecil dengan baik > SaaS yang cuba buat semuanya tapi tak sempurna.

Latihan 2: Landing Page + Pricing Table

Latihan 2

Bina Landing Page dengan Pricing Table

Objektif: Bina landing page profesional untuk SaaS anda dengan hero section, features grid, pricing table 3 tiers, dan CTA yang meyakinkan.

Arahan:

Gunakan AI untuk bina landing page: "Bina landing page HTML untuk SaaS [nama]. Dark theme. Ada hero, features grid, pricing table Free/Pro/Premium, CTA, footer. Design professional."
Simpan output sebagai index.html
Bukak dalam browser dan semak:

Hero section ada headline + subheadline + CTA?
Features grid ada sekurang-kurangnya 4 features?
Pricing table ada 3 tiers dengan harga dan feature list?
Ada testimonial atau trust signal?
Footer ada links dan copyright?

Minta AI improve mana yang kurang: "Make the hero section more impactful. Add better CTA."
Gunakan git init && git add . && git commit -m "Landing page SaaS"
Push ke GitHub: buat repo baru, kemudian git remote add origin [url] && git push -u origin main

Prompt rujukan: Prompt #2 di halaman rujukan — "Bina landing page SaaS dengan hero, features grid, pricing table (3 tiers)"

Senarai Semak Landing Page:

[ ] Hero — Headline powerful + subheadline + CTA
[ ] Features Grid — 4-6 features dengan icon
[ ] Pricing Table — 3 tiers (Free, Pro, Premium)
[ ] Testimonial/Trust — "Apa kata pengguna"
[ ] CTA Final — "Start Free Trial" / "Get Started"
[ ] Footer — Links, copyright, social media
[ ] Responsive — Nampak ok di mobile
[ ] Dark theme konsisten
[ ] Git init + commit + push ke GitHub

Latihan 3: Auth + Protected Dashboard

Latihan 3

Setup Authentication & Protected Dashboard

Objektif: Setup Supabase Auth dengan signup, login, logout, dan dashboard yang hanya boleh diakses oleh pengguna yang telah login.

Arahan:

Buka https://supabase.com dan buat project baru
Copy "Project URL" dan "anon public key" dari Project Settings -> API
Gunakan AI untuk setup auth: "Bina signup.html, login.html, dashboard.html untuk SaaS [nama]. Guna Supabase Auth. Project URL: [url], anon key: [key]."
Uji flow:

Buka signup.html -> daftar dengan email baru
Check email untuk confirmation link (Supabase hantar automatik)
Login dengan email dan password
Selepas login, redirect ke dashboard
Cuba buka dashboard.html direct (tanpa login) — mesti redirect ke login
Klik logout -> redirect ke landing page

Jika ada masalah, prompt AI: "My Supabase auth is not working. Here's my code... [paste code]. What's wrong?"

Prompt rujukan: Prompt #3 di halaman rujukan — "Setup auth dengan Supabase — login, signup, dashboard protected"

Senarai Semak Auth:

[ ] Signup form berfungsi — email confirm diterima
[ ] Login form berfungsi — redirect ke dashboard
[ ] Dashboard protected — tak boleh access tanpa login
[ ] Logout berfungsi — redirect ke landing page
[ ] User info (nama, email) display kat dashboard
[ ] Error handling — wrong password tunjuk message
[ ] Dark theme konsisten dengan landing page

Masalah Biasa: Kalau redirect loop berlaku, check Supabase Auth settings -> Redirect URLs. Pastikan URL dashboard anda ada dalam senarai. Atau guna window.location.href = 'dashboard.html' manual selepas login success.

Latihan 4: Payment Page (Test Mode)

Latihan 4

Setup Payment Page dengan Stripe Test Mode

Objektif: Setup halaman subscription dengan Stripe Checkout dalam test mode. Pelanggan boleh pilih plan, bayar dengan kad test, dan redirect balik ke dashboard.

Arahan:

Buka https://dashboard.stripe.com dan enable "Test mode"
Copy "Publishable key" (pk_test_...)
Gunakan AI untuk setup payment: "Bina pricing page dan Stripe Checkout untuk SaaS [nama]. Guna publishable key: [pk_test_...]. Dark theme."
Uji payment flow:

Buka pricing page
Klik "Subscribe" untuk plan Pro (RM19/bln)
Redirect ke Stripe Checkout page
Guna kad test: 4242 4242 4242 4242, expiry: 12/34, CVV: 123
Selepas bayar, redirect ke success page
Cuba payment failed: guna kad 4000 0000 0000 0002

Simpan subscription status dalam Supabase table:

Buat table subscriptions dalam Supabase SQL editor
Columns: id (uuid), user_id (uuid ref auth.users), plan (text), status (text), created_at (timestamp)
Selepas payment success, update table dengan plan yang dipilih

Prompt rujukan: Prompt #5 di halaman rujukan — "Integrate payment — Stripe checkout session untuk plan [basic/pro/premium]"

Senarai Semak Payment:

[ ] Pricing page tunjuk 3 plan dengan harga
[ ] Klik "Subscribe" redirect ke Stripe Checkout
[ ] Stripe test mode functional — guna card 4242...
[ ] Payment success -> redirect ke success page
[ ] Payment failed -> redirect ke cancel page
[ ] Subscription status update dalam dashboard
[ ] Cuba test BOTH success dan failed scenarios

Tip: Untuk test mode, anda boleh guna mana-mana kad nombor 4242 4242 4242 4242 dengan apa-apa expiry date masa depan dan apa-apa CVV. Kad 4000 0000 0000 0002 akan simulate payment declined. Guna ni untuk test error handling.

Latihan 5: Deploy SaaS ke Internet

Latihan 5

Deploy SaaS ke Internet dengan Custom Domain

Objektif: Deploy SaaS ke Cloudflare Pages dan boleh diakses oleh sesiapa sahaja di internet. (Bonus: setup custom domain.)

Arahan:

Pastikan semua kod sudah di-push ke GitHub repository
Buka https://dash.cloudflare.com -> Workers & Pages -> Create application -> Pages -> Connect to Git
Pilih repository SaaS anda
Configure deployment:
- Project name: [nama-saas-anda]
- Production branch: main
- Build command: (kosongkan untuk HTML tulen)
- Build output directory: /
Klik "Save and Deploy" — tunggu 30-60 saat
Buka URL: https://[nama-saas-anda].pages.dev
Uji semua flow di URL live:
- Landing page display dengan betul
- Signup dan login berfungsi
- Dashboard accessible selepas login
- Payment page muncul (test mode still works)
(Bonus) Setup custom domain — beli domain murah (RM15-30/tahun), add ke Cloudflare Pages

Prompt rujukan: Prompt #7 di halaman rujukan — "Setup custom domain [domain.com] dengan Cloudflare"

Senarai Semak Deployment:

[ ] Semua kod di-push ke GitHub
[ ] Cloudflare Pages connected ke GitHub repo
[ ] Build success — URL pages.dev accessible
[ ] Landing page display dengan betul
[ ] Auth flow berfungsi (signup/login/logout)
[ ] Dashboard protected (redirect kalau belum login)
[ ] Payment page muncul (test mode)
[ ] Responsive — nampak ok di mobile
[ ] (Bonus) Custom domain setup
[ ] (Bonus) HTTPS/SSL aktif

Congratulation! SaaS anda kini LIVE di internet. Kongsikan URL dengan kawan-kawan, keluarga, dan di media sosial. Anda kini adalah pembina SaaS! Ambil masa untuk menghargai pencapaian ini — dari kosong hingga ke produk yang berfungsi dan boleh diakses sesiapa sahaja.

Cabaran Tambahan (Jika Ada Masa)

Jika anda siap semua 5 latihan awal, cuba cabaran berikut untuk memperkasakan SaaS anda:

Analytics: Tambah Google Analytics / Plausible untuk track pengunjung
Email notification: Setup email confirmation selepas signup dan payment
Multi-language: Tambah bahasa kedua (English option)
Dark/Light mode toggle: Bagi user pilihan tema
Referral system: Tambah "Rakan dapat RM5, anda dapat RM5"
User feedback: Tambah in-app feedback form (guna AI untuk build)
Loading states: Tambah spinner/skeleton loading untuk better UX
Error boundaries: Better error messages untuk user

Tip: Pilih SATU cabaran tambahan sahaja. "Done is better than perfect." Jangan cuba buat semua sekali gus.

Refleksi Selepas Latihan

Selepas siap semua latihan, luangkan masa 5 minit untuk refleksi:

Apa bahagian paling mudah dalam proses ni?
Apa bahagian paling susah? Macam mana anda atasi?
Apa yang anda belajar tentang AI dalam pembinaan SaaS?
Jika anda nak bina SaaS kedua, apa yang akan buat berbeza?
Berapa banyak kod yang AI tulis? Berapa banyak yang anda tulis manual?

Anda Kini Seorang Pembina SaaS

Dengan AI, halangan untuk membina produk digital hampir sifar. Yang membezakan anda dari orang lain bukanlah kemahiran coding — tetapi kebolehan untuk mengenal pasti masalah, membayangkan penyelesaian, dan bertindak. Teruskan membina.