Panduan Pengajar — Deployment Module

📋 Ringkasan Sesi

Sesi ini adalah fasa terakhir dalam kursus Vibe Coding, di mana pelajar akan belajar cara menyiarkan (deploy) aplikasi web mereka ke internet supaya boleh diakses oleh orang ramai.

Pelajar akan dibandingkan 10 platform deployment berbeza, melihat demo langsung cara deploy, dan membuat sendiri deployment pertama mereka.

Objektif Pembelajaran

Memahami konsep deployment: static vs serverful, domain, HTTPS
Mampu deploy landing page ke Cloudflare Pages, Netlify, dan GitHub Pages
Memahami perbezaan 10 platform deployment utama
Dapat memilih platform yang sesuai untuk jenis projek berbeza
Memahami asas custom domain dan HTTPS

Prasyarat Pelajar

Telah menyiapkan projek landing page (Fasa 3) atau portfolio (Fasa 5)
Mempunyai akaun GitHub
Mempunyai projek HTML/CSS/JS yang siap untuk dideploy

🔄 Aliran Sesi (2-3 Jam)

1 Pengenalan (15 min) 2 Demo: Cloudflare (25 min) 3 Demo: Netlify (20 min) 4 Perbandingan (20 min) 5 Latihan (45-60 min) 6 Rumusan (10 min)

Langkah 1: Pengenalan Konsep Deployment (15 minit)

Terangkan apa itu deployment dengan analogi mudah:

Analogi: Deployment macam pindah rumah. Kod anda sekarang ada di komputer sendiri (rumah lama). Nak orang lain boleh lawat, kena pindah ke "server" (rumah baru yang sentiasa buka pintu). Platform deployment macam Cloudflare/Netlify tu ejen hartanah — mereka uruskan semua proses pindah dan pastikan rumah sentiasa boleh dikunjungi.

Static site: HTML/CSS/JS sahaja — paling mudah, free tier yang banyak
Serverful: Ada backend/database — lebih kompleks, mungkin berbayar
Free tier: Kebanyakan platform offer hosting percuma dengan had tertentu
Custom domain: Guna nama domain sendiri (contoh: portfoliopelajar.com)

Langkah 2: Demo Live — Cloudflare Pages (25 minit)

Ini adalah platform utama yang disarankan untuk pelajar beginner. Paling mudah, pantas, dan free tier paling generous.

Kenapa Cloudflare Pages dulu? Build pantas, UI clean, integration dengan GitHub seamless, free tier unlimited sites, dan SSL automatik. Paling sesuai untuk beginner.

Langkah 3: Demo Live — Netlify (20 minit)

Tunjukkan alternatif. Netlify lebih mature dan ada lebih banyak feature Forms & Functions, tapi build minit terhad.

Langkah 4: Perbandingan Platform (20 minit)

Gunakan halaman perbandingan untuk menerangkan 10 platform. Fokus pada:

Mana satu free, mana satu perlu bayar
Had free tier — bandwidth, build minutes, storage
Kesesuaian untuk projek static vs backend
Learning curve setiap platform

Langkah 5: Latihan Amali (45-60 minit)

Pelajar menjalankan 4 latihan secara individu atau berpasangan:

Deploy landing page ke Cloudflare Pages
Deploy portfolio ke Netlify
Deploy ke GitHub Pages
Setup custom domain + HTTPS (jika ada masa/domain)

Langkah 6: Rumusan & Q&A (10 minit)

Review apa yang dipelajari
Soalan dan jawapan
Cadangan langkah seterusnya (belajar CI/CD, monitoring, dll.)

🎯 Key Teaching Points

📄

Static vs Serverful: Static site = HTML/CSS/JS tulen, tak perlu backend. Serverful = guna database, API, perlu server yang sentiasa hidup. Static lebih mudah, murah, dan cepat. Serverful lebih power tapi kompleks.

💰

Free Tier Limits: Setiap platform ada had percuma. Cloudflare: 500 build/bulan, bandwidth tak terhad. Netlify: 100GB bandwidth, 300 min build. Vercel: 100GB bandwidth. GitHub Pages: unlimited static. Pelajar kena faham had ni supaya tak terkejut bila kena charge.

🌐

Custom Domain: Domain sendiri (.com, .my) memberi professional look. Platform deployment sediakan subdomain percuma (contoh: projek.pages.dev), tapi custom domain lebih baik untuk portfolio/projek serius. Setup DNS tak sesukar mana — cuma update CNAME record.

🔒

HTTPS Auto: Semua platform modern sediakan SSL/TLS secara automatik. Tak perlu setup manually. HTTPS penting untuk keselamatan dan ranking SEO. Google beri advantage untuk site yang guna HTTPS.

🎬 Demo Script: Cloudflare Pages

Demo ini menggunakan projek landing page dari Fasa 3. Pastikan projek sudah siap dan push ke GitHub.

Langkah 1: Buka Cloudflare Dashboard

Buka https://dash.cloudflare.com
Login dengan akaun Google (atau daftar baru)
Di sidebar kiri, klik "Workers & Pages"
Klik "Create application" → "Pages" → "Connect to Git"

Tip Pengajar: Kalau pelajar takde akaun Cloudflare, suruh daftar dulu sebelum kelas. Proses registrasi ambil 2-3 minit.

Langkah 2: Sambung ke GitHub

Klik "Connect to Git" — akan redirect ke GitHub OAuth
Pilih repository projek landing page
Untuk beginner: pilih repository yang sama dengan yang digunakan di kelas
Klik "Begin setup"

Langkah 3: Konfigurasi Build

Project name: landing-page-[nama pelajar]
Production branch: main
Framework preset: None (static site)
Build command: (kosongkan — tiada build untuk HTML tulen)
Build output directory: / (atau root)
Root directory: (kosongkan)

Klik "Save and Deploy"

Nota: Untuk projek HTML/CSS/JS tulen, tak perlu build command. Kalau guna framework (React, Vue, dll.), baru perlukan build command macam npm run build.

Langkah 4: Tunggu Build Selesai

Cloudflare akan clone repository, detect static files
Build akan siap dalam 10-30 saat
URL akan jadi: https://landing-page-[nama].pages.dev
Klik URL untuk lihat hasil

Langkah 5: Deploy Semula Selepas Update

Cara 1: Auto — Git push ke main branch
Cara 2: Manual — pergi ke dashboard → Workers & Pages
         → pilih projek → "Deployments" → "Deploy latest commit"

Tip Pengajar: Tunjukkan konsep "continuous deployment" — ubah sesuatu dalam kod, Git push, tunjuk yang Cloudflare auto-deploy dalam beberapa saat. Pelajar akan teruja!

🎬 Demo Script: Netlify

Langkah 1: Buka Netlify

Buka https://app.netlify.com
Login dengan GitHub (guna akaun yang sama)
Klik "Add new site" → "Import an existing project"
Pilih "Deploy with GitHub"

Langkah 2: Pilih Repository

Netlify akan senarai repositories GitHub anda
Pilih repository yang sama (atau portfolio dari Fasa 5)
Klik "Deploy site"

Perhatian: Netlify ada had 300 build minutes/bulan untuk free tier. Untuk demo di kelas, build minutes akan berkurang. Tapi untuk projek beginner, 300 minit sebulan lebih dari cukup.

Langkah 3: URL dan Domain

URL akan jadi: https://[random-name].netlify.app
Boleh ubah nama: Site settings → Site details → Change site name
Contoh: https://portfolio-ali.netlify.app

Perbandingan dengan Cloudflare

Aspek	Cloudflare Pages	Netlify
Build Speed	Sangat pantas	Sederhana
Free Tier	500 builds/bln, unlimited bandwidth	300 min build, 100GB bandwidth
UI/UX	Clean, modern	Mature, lebih banyak option
Features	Workers, KV, D1	Forms, Functions, Split testing
Best For	Static + Edge functions	Static + serverless functions

⚠️ Kesilapan Biasa Pelajar & Penyelesaian

1. Build failed — "File not found"

Masalah: Pelajar set build output directory salah. Contoh: letak /dist tapi fail HTML ada dalam root.

✅ Penyelesaian: Set build output directory ke folder yang betul. Untuk HTML tulen, guna / atau ..

2. Tak nampak perubahan selepas deploy

Masalah: Pelajar lupa Git push. Atau deploy cache — browser masih tunjuk version lama.

✅ Penyelesaian: Ajar konsep "hard refresh" (Ctrl+Shift+R / Cmd+Shift+R). Dan biasakan Git add → commit → push sebelum deploy.

3. "I accidentally deleted my repository"

Masalah: Pelajar delete GitHub repo tapi still nak update deployment.

✅ Penyelesaian: Deploy dari folder lokal guna CLI. Netlify: npx netlify deploy. Cloudflare: npx wrangler pages deploy ./folder.

4. Custom domain tak jalan

Masalah: DNS propagation belum complete, atau CNAME record salah set.

✅ Penyelesaian: DNS propagation boleh ambil masa 5 minit hingga 48 jam. Guna whatsmydns.net untuk semak status. Pastikan record type betul — A record untuk root domain, CNAME untuk subdomain.

5. Gambar/asset tak muncul

Masalah: File path guna huruf besar-kecil tak konsisten. Windows tak case-sensitive, tapi server Linux (hosting) adalah case-sensitive.

✅ Penyelesaian: Guna huruf kecil semua untuk nama fail dan folder. Konsisten guna ./ untuk relative paths.

6. Build minutes habis sebelum selesai

Masalah: Pelajar trigger build berkali-kali (setiap Git push trigger build baru).

✅ Penyelesaian: Kumpul perubahan dulu, baru push sekali. Atau guna [skip ci] dalam commit message untuk elakkan auto-build. Cloudflare Pages tiada masalah ni — 500 builds/bulan generous.

🎓 Panduan Fasilitasi

Cara Membantu Pelajar Memilih Platform

Gunakan pendekatan soalan untuk bimbing pelajar membuat keputusan sendiri:

"Apa jenis projek awak?" — Static landing page? Portfolio? Dashboard dengan database?
"Berapa ramai pengguna?" — Personal site? Client project? Aplikasi awam?
"Ada bajet?" — Free tier cukup? Atau perlukan feature premium?
"Selesa dengan CLI?" — Nak GUI je? Atau boleh guna command line?

Cadangan Berdasarkan Profil Pelajar

Profil Pelajar	Platform Disarankan	Sebab
Beginner mutlak (tak pernah deploy)	Cloudflare Pages	Paling mudah, UI clean, free tier paling generous
Nak portfolio profesional	Netlify / Vercel	Domain name yang cantik, banyak template
Static site simple	GitHub Pages	Zero setup — dah ada GitHub, boleh deploy terus
Nak belajar backend	Railway / Render	Free tier untuk backend, deployment mudah
Projek real-time / WebSocket	Fly.io	3 VM percuma, sesuai untuk apps real-time
Projek dengan database	Supabase Hosting	Hosting + database dalam satu platform
Client/enterprise projek	AWS Amplify / Azure SWA	Enterprise features, SLA, compliance

Strategi Pengajaran

Demo dahulu, baru teori: Tunjukkan deployment live dulu (pelajar nampak magik!), baru terangkan konsep di sebaliknya
Pair programming: Suruh pelajar kerja berpasangan — satu pegang keyboard, satu baca arahan. Tukar setiap 10 minit
Celebrate wins: Bila pelajar berjaya deploy, minta mereka share URL dalam group chat. Ini sangat memotivasikan
Jangan takut untuk gagal: Deployment kadang-kadang fail. Tunjukkan cara debug — baca error log, Google error, tanya AI. Ini skill yang lebih berharga daripada deployment sendiri
Gamification: Siapa deploy paling cepat dapat "Deployment Champion" badge. Atau cabar mereka deploy dengan CLI bukan GUI

Untuk kelas lanjutan: Selepas deployment asas, ajar CI/CD pipeline — GitHub Actions untuk auto-deploy, preview deployments untuk pull request, dan blue-green deployments untuk zero-downtime updates.