Fasa 14 — Projek Capstone

Bina SaaS Anda Sendiri — Jual Produk Digital

Ini adalah PROJEK TERAKHIR anda. Selepas ini, anda bukan lagi "pelajar Vibe Coding". Anda adalah PEMBINA SAAS — mampu bina, deploy, dan JUAL aplikasi sendiri. Dengan AI sebagai rakan kreatif, langit adalah had.

Apa Itu SaaS?

SaaS (Software as a Service) adalah aplikasi yang anda akses melalui internet dan bayar yuran bulanan/tahunan untuk menggunakannya. Daripada "beli" software sekali, anda "sewa" software.

Kamu Guna SaaS Setiap Hari

Google Drive (RM10/bulan), Canva (RM55/bulan), Spotify (RM15/bulan), Netflix (RM55/bulan), ChatGPT (RM100/bulan) — semua ni adalah SaaS. Dan sekarang, ANDA boleh bina yang sama.

Kenapa SaaS Adalah Projek Capstone?

  • Gabungan semua kemahiran: HTML, CSS, JS, AI prompting, database, auth, deployment — semua dalam satu projek
  • Boleh dijual: SaaS adalah produk digital yang boleh menjana pendapatan pasif
  • Skalabel: Satu SaaS boleh serve ramai pelanggan tanpa perlu kerja tambahan
  • Portfolio terbaik: SaaS yang berfungsi adalah bukti paling bernilai untuk career anda
  • Micro-SaaS: Anda tak perlu bina "Facebook kedua". Cukup selesaikan SATU masalah kecil dengan baik

Inspirasi: Buffer (tool scheduling social media) bermula sebagai micro-SaaS dengan hanya 3 orang founder. Hari ini mereka serve 75,000+ pelanggan. SaaS terkecil di dunia ada hanya 1 pelanggan — dan masih untung!

1 Pilih Idea SaaS (Gunakan AI untuk Brainstorm)

Langkah pertama adalah paling penting: cari masalah yang nak diselesaikan. Jangan mula coding dulu! Fikir masalah dulu.

Cara Cari Idea SaaS

  • Masalah peribadi: Apa yang menyusahkan hidup anda yang boleh diselesaikan dengan software?
  • Masalah dalam kursus/kerja: Apa yang pelajar/pekerja susah nak buat?
  • Hobi/Minat: Nak bina tool untuk gamers? Foodies? Fitness enthusiast?
  • Niche pasaran: Freelancers, small business owners, teachers, parents

Prompt AI untuk Brainstorm

Gunakan prompt ini dengan ChatGPT/Claude/Gemini:

Prompt: "Brainstorm 5 idea micro-SaaS untuk [niche/industri anda]. Setiap idea perlu ada: 1. Nama SaaS 2. Masalah yang diselesaikan 3. Target pengguna 4. 3 pricing tiers (Free, Pro, Enterprise) 5. Satu feature utama yang membezakan dari pesaing" Contoh: "Brainstorm 5 idea micro-SaaS untuk pelajar universiti di Malaysia."

Pilih Satu Idea

Kriteria pemilihan:

  • Masalah yang ANDA faham (senang nak develop dan market)
  • Cukup kecil untuk disiapkan dalam 4-6 jam (micro-SaaS, bukan mega-SaaS)
  • Ada potensi orang nak bayar (orang betul-betul akan guna)
  • Kurang dari 5 feature utama (lagi banyak, lagi lambat siap)

Tip: Kalau tak boleh decide, pilih yang paling simple. "A task manager for students" atau "A budgeting tool for freelancers" — senang difahami, senang dibina, dan ramai orang perlukan.

2 Bina Landing Page (Hero, Pricing Table, Features)

Landing page adalah muka depan SaaS anda. Ia mesti menerangkan: (1) Apa produk ini, (2) Kenapa orang perlu guna, (3) Berapa harganya, (4) Bagaimana nak mula.

Komponen Landing Page Wajib

  • Hero Section: Headline powerful + subheadline + CTA button (Contoh: "Manage Your Tasks in Seconds. Not Hours.")
  • Features Grid: 4-6 features dengan icon dan penerangan ringkas
  • Pricing Table: 3 tiers (Free, Pro, Premium) dengan harga dan feature list
  • Testimonial/Trust: Apa kata pengguna (guna testimonial rekaan untuk demo)
  • CTA Final: "Start Free Trial" / "Get Started Now"
  • Footer: Links, copyright, social media

Prompt AI untuk Landing Page

Prompt: "Bina satu halaman HTML landing page untuk SaaS [nama SaaS saya]. Guna dark theme (warna gelap). Saya nak: 1. HERO SECTION: - Headline: [headline anda] - Subheadline: [subheadline anda] - CTA button: "Start Free Trial" 2. FEATURES GRID: - Feature 1: [feature] — [penerangan] - Feature 2: [feature] — [penerangan] - Feature 3: [feature] — [penerangan] - Feature 4: [feature] — [penerangan] 3. PRICING TABLE (3 tiers): - Free: RM0 — [features] - Pro: RM19/bulan — [features] - Premium: RM49/bulan — [features] 4. FOOTER dengan social links Guna CSS gradient accents, smooth animations, professional typography."

Hasil: Anda akan dapat satu fail HTML lengkap dengan CSS dalam <style> tag. Simpan sebagai index.html dan buka dalam browser untuk lihat hasilnya. Kalau tak puas hati, minta AI tweak lagi!

Checkpoint: Landing page siap dan nampak professional di browser

3 Setup Authentication (Supabase Auth — Login/Signup)

Seterusnya, anda perlu sistem login/signup supaya pengguna boleh daftar akaun dan log masuk. Kita akan guna Supabase — percuma, mudah, dan berkuasa.

Langkah 1: Setup Supabase Project

1. Buka https://supabase.com 2. Klik "Start your project" 3. Create akaun (guna Google/GitHub) 4. Klik "New project" - Name: [nama-saas-anda] - Database password: [simpan selamat] - Region: Southeast Asia (Singapore) 5. Tunggu 1-2 minit untuk provisioning 6. Dalam dashboard, pergi ke Project Settings -> API 7. Copy "Project URL" dan "anon public key"

Langkah 2: Bina Halaman Auth dengan AI

Prompt: "Saya ada SaaS [nama SaaS]. Saya nak tambah authentication guna Supabase. Bagi saya kod lengkap: 1. signup.html — Borang pendaftaran (nama, email, password) 2. login.html — Borang login (email, password) 3. dashboard.html — Protected page (guna JavaScript check session) 4. script.js — Supabase client integration Supabase details: Project URL: [url anda] Anon Key: [key anda] Pastikan: - Redirect ke dashboard selepas login/signup - Dashboard tak boleh access kalau belum login - Ada logout button - Guna dark theme sama dengan landing page"

Peringatan: Jangan sesekali kongsi "service_role key" atau "secret key" Supabase anda. Hanya guna "anon public key" dalam kod frontend. Service key ada kuasa admin dan boleh delete database!

Checkpoint: Boleh signup, login, dan redirect ke dashboard. Logout pun berfungsi.

4 Bina Dashboard Pengguna (Profile, Subscription Status)

Dashboard adalah ruang peribadi pengguna selepas login. Di sini mereka boleh urus akaun, tengok status subscription, dan guna feature utama SaaS anda.

Komponen Dashboard

  • Sidebar Navigation: Dashboard, Profile, Settings, Logout
  • Profile Section: Nama, email, avatar, tarikh daftar
  • Subscription Status: Plan sekarang (Free/Pro/Premium), harga, bila renew
  • Usage Stats: Berapa banyak feature dah guna (cth: "Tasks Created: 5/10")
  • Quick Actions: "Upgrade to Pro", "View Invoices", "Edit Profile"

Prompt AI untuk Dashboard

Prompt: "Bina dashboard HTML untuk SaaS [nama SaaS]. Guna dark theme dengan sidebar navigation. Komponen: 1. Sidebar kiri: Dashboard, Tasks, Profile, Settings, Logout 2. Main content: - Welcome card: "Welcome back, [user name]!" - Subscription card: tunjuk plan sekarang - Stats cards: Total tasks, Completed, Pending - Quick action buttons: "New Task", "Upgrade Plan", "View Profile" Guna Supabase untuk dapatkan data user: - Nama dan email dari auth.user - Subscription status dari table 'subscriptions' - Task stats dari table 'tasks' CSS: dark theme, smooth transitions, responsive."

Tip: Kalau dashboard nampak kosong, tambah data dummy dulu. "Tasks Created: 5/10" tanpa data sebenar pun ok untuk demo. Nanti bila dah ada database, data akan keluar automatik.

Checkpoint: Dashboard display user info, subscription status, dan navigation links berfungsi

5 Setup Payment (Stripe/PayPal — Test Mode)

Sekarang tiba masanya untuk setup payment. Anda akan guna Stripe dalam TEST MODE — tiada duit sebenar akan ditransfer. Kad kredit test: 4242 4242 4242 4242.

Langkah 1: Setup Stripe Account

1. Buka https://dashboard.stripe.com 2. Daftar akaun (atau login) 3. Enable "Test mode" (toggle di sebelah kiri atas) 4. Dapatkan Publishable Key: - Pergi to Developers -> API Keys - Copy "Publishable key" (mulai dengan pk_test_...) 5. (Optional) Setup webhook — tapi untuk beginner, skip dulu

Langkah 2: Bina Payment Page dengan AI

Prompt: "Saya nak tambah payment subscription ke SaaS [nama SaaS]. Guna Stripe test mode. Pricing: - Free: RM0/month — Basic features - Pro: RM19/month — All features - Premium: RM49/month — All features + priority support Bagi saya: 1. pricing.html — Halaman yang tunjuk 3 plan 2. checkout.js — Redirect ke Stripe Checkout 3. success.html — "Payment successful! Welcome to [plan]!" 4. cancel.html — "Payment cancelled. Try again?" Guna publishable key: [pk_test_...] Stripe test card: 4242 4242 4242 4242 (expiry: 12/34, CVV: 123) Dark theme."

Test Mode: Dalam test mode Stripe, kad 4242 4242 4242 4242 akan "berjaya" tanpa duit sebenar dikeluarkan. Guna kad 4000 0000 0000 0002 untuk simulasikan payment declined. Bagi pelajar test PAYMENT SUCCESS dan PAYMENT FAILED flow.

Checkpoint: Klik "Subscribe", redirect ke Stripe, bayar dengan test card, redirect balik ke dashboard dengan status updated

6 Bina Feature Utama SaaS Anda

Ini adalah "roh" SaaS anda — feature yang membuatkan orang sudi bayar. Untuk task manager, feature utamanya adalah CRUD tasks. Untuk budgeting tool, feature utamanya adalah track income/expense.

Prompt AI untuk Feature Utama

Prompt: "Saya bina SaaS task manager. Saya nak tambah feature utama: CRUD Tasks (Create, Read, Update, Delete). Bagi saya: 1. tasks.html — Halaman senarai tasks dengan Add button 2. Modal/Popup untuk create task (title, description, due date, priority) 3. Task list — tunjuk semua tasks, boleh mark complete 4. Edit dan Delete button untuk setiap task 5. Simpan data dalam Supabase table 'tasks' Guna dark theme, smooth animations, responsive. Supabase table structure: - id: uuid (primary key, default: gen_random_uuid()) - user_id: uuid (references auth.users) - title: text - description: text - due_date: date - priority: text ('low', 'medium', 'high') - status: text ('pending', 'completed') - created_at: timestamp"

Tip: Feature utama tak perlu sempurna. "Done is better than perfect." Sebagai contoh: Cukup kalau user boleh create task, senarai tasks display, dan boleh delete. Update dan mark complete adalah bonus. Fokus pada SATU flow yang berfungsi dari mula ke akhir.

Checkpoint: Feature utama berfungsi — user boleh create, view, edit, delete data

7 Deploy — Domain, HTTPS, Go Live

Sekarang tiba masa untuk siarkan SaaS anda ke internet. Semua orang akan boleh access SaaS anda melalui URL.

Deploy ke Cloudflare Pages

1. Buka https://dash.cloudflare.com 2. Login dengan akaun Google 3. Sidebar -> "Workers & Pages" 4. Klik "Create application" -> "Pages" -> "Connect to Git" 5. Pilih repository GitHub SaaS anda 6. Configure: - Project name: [nama-saas-anda] - Production branch: main - Build command: (kosongkan — HTML tulen) - Build output directory: / 7. Klik "Save and Deploy" 8. URL akan jadi: https://[nama-saas-anda].pages.dev

Custom Domain (Optional — Tapi Disarankan)

Prompt: "Saya nak setup custom domain [domain.com] untuk SaaS saya yang dideploy di Cloudflare Pages. Bagi saya langkah-langkah: 1. Cara add domain di Cloudflare Pages 2. DNS records yang perlu diupdate 3. Cara enable SSL/HTTPS"

Peringatan: Pastikan anda dah Git push semua kod ke GitHub sebelum deploy. Cloudflare Pages akan auto-deploy setiap kali anda push ke main branch. Kalau ada masalah, check error log dalam dashboard Cloudflare.

Checkpoint: SaaS boleh diakses di internet melalui URL. Landing page, auth, dashboard semua berfungsi

8 Marketing Basic — Social Media, SEO

SaaS anda sudah LIVE. Sekarang bagaimana nak bagi orang tahu? Ini adalah asas marketing untuk SaaS baru.

Prompt AI untuk Marketing Copy

Prompt: "Tulis marketing copy untuk SaaS [nama SaaS saya] — tool task manager untuk pelajar universiti. Saya nak: 1. Headline: 5 options (catchy, benefit-focused) 2. Subheadline: 3 options (explain value proposition) 3. CTA: 5 options (for buttons) 4. Social media posts: 3 tweets untuk Twitter/X 5. 3 Instagram caption ideas 6. 3 tagline untuk website header Target audience: Pelajar universiti Malaysia yang struggle nak manage assignments dan deadlines."

Asas Marketing untuk SaaS Baru

  • Product Hunt launch: Platform terbaik untuk SaaS baru — boleh dapat ribu pengunjung hari pertama
  • Twitter/X: Share building journey, tips, dan behind-the-scenes. Guna hashtag: #buildinpublic #indiehacker #microsaas
  • LinkedIn: Post tentang masalah yang SaaS anda selesaikan. Connect dengan target audience
  • SEO Asas: Pastikan landing page ada meta description, title tag yang relevant. Guna AI untuk suggest keywords
  • Community: Share di forum/producthunt/reddit yang relevan. Jangan spam — bagi value dulu
  • Cold email: Reach out kepada potential users secara personal. Offer free access untuk feedback

Mindset: "Launch cepat, improve selalu." Jangan tunggu SaaS sempurna baru nak launch. Launch awal, dapat feedback, improve based on feedback. Iterasi adalah kunci kejayaan SaaS.

Checkpoint: Marketing materials siap — tagline, social posts, SEO meta tags

Seni Bina SaaS — Ringkasan Visual

Ini adalah gambaran keseluruhan bagaimana SaaS anda berfungsi:

[Pelawat] --> [Landing Page] --> [Signup/Login] | v [Supabase Auth] | v [Dashboard (Protected)] | +-----------+-----------+ | | [Subscription] [Feature Utama] (Stripe/Stripe) (CRUD & Data) | | v v [Payment Confirm] [Supabase DB] | | v v [Status Update] [Data Display]

Setiap anak panah adalah flow yang anda akan bina. AI akan tulis 90% kod untuk setiap komponen. Tugas anda: faham flow, beri prompt yang betul, dan integrate semua komponen.

Perjalanan Anda — Dari Pelajar ke Pembina SaaS

Ini Adalah Permulaan, Bukan Pengakhiran

Hari ini anda membina SaaS pertama. Esok, anda boleh bina yang kedua, ketiga, ke-sepuluh. Setiap SaaS adalah aset digital yang boleh menjana pendapatan. Anda kini mempunyai kemahiran yang 99% manusia tidak ada — kemampuan untuk mencipta produk digital dari udara kosong menggunakan AI.

Apa Yang Anda Capai Hari Ini

  • Memahami seni bina SaaS secara menyeluruh
  • Membina landing page profesional
  • Setup sistem auth yang berfungsi
  • Membina dashboard pengguna
  • Integrasi payment gateway
  • Setup database untuk data storage
  • Deploy SaaS ke internet
  • Bersedia untuk marketing dan penjualan

Apa Langkah Seterusnya?

  • Iterasi berdasarkan feedback pengguna
  • Tambah feature baru secara berperingkat
  • Optimasikan landing page untuk conversion
  • Setup analytics (Google Analytics, Mixpanel, dll.)
  • Launch di Product Hunt
  • Bina SaaS kedua, ketiga...

Sumber Rujukan

  • Panduan Pengajar — Nota untuk pengajar sesi ini
  • Latihan — 5 latihan praktikal untuk mengukuhkan pembelajaran
  • Rujukan — Prompt templates, pricing models, common mistakes
  • Modul Utama — Kembali ke senarai modul