Fasa 15 — Latihan

Latihan Polishing

4 latihan hands-on untuk mempolish projek capstone atau fasa sebelumnya — visual, security, SEO, dan QA. Guna AI pada setiap langkah.

Gambaran Keseluruhan Latihan

Setiap latihan fokus pada satu aspek polishing. Anda boleh buat ikut urutan atau pilih yang paling relevan dengan projek anda.

# Latihan Anggaran Masa Checklist Hasil
1Polish Projek Anda — Visual45-60 minit15 itemsScreenshot BEFORE vs AFTER
2Security Audit Projek Anda30-45 minit10 itemsScreenshot findings
3Setup SEO untuk Projek Anda20-30 minit8 itemsSocial preview berfungsi
4QA Sweep — Lighthouse 90+20-30 minit7 itemsLighthouse >90

Latihan 1: Polish Projek Anda — Visual

🎨 Latihan 1: Visual Polish — 15 Checklist Items ▼

Polish Projek Anda — Visual

Objektif: Ambil projek capstone atau fasa sebelumnya dan polish visualnya menggunakan AI. Target: projek nampak 10x lebih profesional selepas polish.

Arahan:

  1. Buka projek anda — capstone, landing page, portfolio, atau mana-mana projek dari fasa sebelumnya
  2. Gunakan AI untuk polish visual:
Prompt: "Polish CSS untuk [URL/description projek]. Saya nak: 1. Responsive — 375/768/1024/1440 2. Color contrast — WCAG AA (4.5:1) 3. Animations — ease-in-out 300ms 4. Spacing — consistent 4/8/16/24/32 grid 5. Loading state — skeleton/spinner 6. Empty state — 'Tiada data' message 7. Print CSS — hide nav, A4 layout Bagi saya specific CSS changes untuk setiap point."

Checklist 15 Items:

Responsive: 375/768/1024/1440 — tiada overflow/broken layout
Contrast: WCAG AA 4.5:1 — semua text pairs pass
Font hierarchy: H1 > H2 > H3 > Body — size konsisten
Spacing: Padding/margin/gap guna sistem 4/8/16/24/32
Animation: Transition ease-in-out, max 300ms
Loading state: Skeleton/spinner untuk async content
Empty state: "Tiada data" message dengan ikon
Hover states: Semua interactive element ada hover
Focus states: Keyboard outline untuk input/button/link
Theme: Dark/light konsisten
Images: Alt text, lazy loading, WebP format
Typography: Line-height 1.6-1.7, max-width 70ch
Shadow: Subtle depth pada cards/modals
Border radius: Konsisten untuk semua element
Print CSS: Nav hidden, A4 friendly

Screenshot BEFORE vs AFTER:

📷 BEFORE: Ambil screenshot landing page SEBELUM polish
📷 AFTER: Ambil screenshot landing page SELEPAS polish

Tip: Screenshot kedua-dua versi dan letak side-by-side. Perbezaan akan nampak dramatik. Simpan sebagai bukti portfolio anda.

Latihan 2: Security Audit Projek Anda

🛡️ Latihan 2: Security Audit — 10 Checklist Items ▼

Security Audit Projek Anda

Objektif: Lakukan security audit penuh pada projek anda. Cari dan fix API keys yang exposed, RLS issues, CORS misconfiguration, dan vulnerabilities lain.

Arahan:

  1. Buka folder projek anda di VS Code atau file explorer
  2. Gunakan AI untuk audit:
Prompt: "Audit security untuk projek saya di [folder path]. Check: 1. API keys — scan semua fail untuk pattern 'sk-' 'pk_' 2. .env — adakah dalam .gitignore? 3. Hardcoded secrets — password, tokens, keys 4. XSS — user input guna innerHTML? 5. CORS — Access-Control-Allow-Origin specific? 6. RLS — Supabase Row Level Security enabled? 7. npm audit — dependencies vulnerabilities? 8. HTTPS — redirect HTTP ke HTTPS? Bagi saya report: [ISU] -> [RISK] -> [FIX]"

Checklist 10 Items:

API Keys: Tiada exposed keys dalam kod
RLS: Row Level Security di-enable untuk semua tables
Auth URLs: Redirect URLs configured untuk production
CORS: Allowed origins spesifik, bukan *
HTTPS: HTTP redirect ke HTTPS — SSL aktif
XSS: User input sanitized — tiada innerHTML
.gitignore: .env, secrets, API keys dalam .gitignore
Rate limiting: API endpoints protected
Security headers: CSP, X-Frame, X-Content-Type configured
Dependencies: npm audit clean — 0 critical

Screenshot Findings:

📷 Screenshot 1: AI audit report — senarai isu security yang ditemui
📷 Screenshot 2: Bukti fix — API keys removed, RLS enabled, etc.

Peringatan: Jangan screenshot API keys yang sebenar. Gunakan dummy keys atau blur bahagian sensitive. Sekiranya terjumpa API key yang exposed, ROTATE KEY SEGERA (generate key baru) dan remove dari git history.

Latihan 3: Setup SEO untuk Projek Anda

🌐 Latihan 3: SEO Setup — 8 Checklist Items ▼

Setup SEO untuk Projek Anda

Objektif: Setup SEO lengkap supaya projek anda boleh ditemui di Google, social media, dan WhatsApp. Test social preview untuk pastikan semuanya berfungsi.

Arahan:

  1. Gunakan AI untuk generate meta tags:
Prompt: "Generate complete SEO tags untuk [URL projek]. Bagi saya: 1. title tag — 55-60 chars, keyword depan 2. meta description — 155-160 chars, ada CTA 3. OG tags — og:title, og:description, og:image (1200x630) 4. Twitter card — summary_large_image 5. JSON-LD schema — [Article/Product/Organization] 6. sitemap.xml — senarai semua public pages 7. robots.txt — allow all, block admin Description projek: [penerangan ringkas] Primary keyword: [keyword utama]"
  1. Social preview test: Paste URL di WhatsApp — preview keluar dengan betul?
  2. Guna Facebook Sharing Debugger untuk troubleshoot: https://developers.facebook.com/tools/debug/

Checklist 8 Items:

Title tag: 50-60 char, primary keyword di depan
Meta description: 150-160 char, CTA included
OG image: 1200x630, share preview berfungsi
Sitemap.xml: Generated, submitted to GSC
Robots.txt: Allow all, disallow /admin /api
Schema markup: JSON-LD dipasang
Heading hierarchy: H1 > H2 > H3 — betul urutan
Alt text: Semua imej ada alt description

Screenshot Social Preview:

📷 Screenshot: WhatsApp/Facebook preview — tunjuk title, description, image

Tip: Kalau OG image tak keluar di WhatsApp, tunggu beberapa minit (WhatsApp cache). Atau guna Facebook Sharing Debugger untuk force refresh cache. Pastikan OG image URL adalah absolute (https://domain.com/image.png), bukan relative (/image.png).

Latihan 4: QA Sweep — Lighthouse 90+

🔍 Latihan 4: QA Sweep — Lighthouse 90+ (7 Items) ▼

QA Sweep — Lighthouse 90+

Objektif: Run Lighthouse audit dan fix semua isu sehingga target minimum tercapai: Performance >90, Accessibility >90, Best Practices >90, SEO >90.

Arahan:

  1. Run Lighthouse audit di Chrome DevTools (F12 -> Lighthouse -> Generate report)
  2. Catat skor semasa untuk setiap kategori
  3. Gunakan AI untuk fix issues:
Prompt: "Baiki Lighthouse issues untuk [URL/page]. Current scores: - Performance: [score] - Accessibility: [score] - Best Practices: [score] - SEO: [score] Issues from Lighthouse: [paste semua suggestions dari Lighthouse report] Bagi saya specific code fixes untuk setiap issue. Target: semua kategori >90."

Checklist 7 Items:

Console: 0 errors — tiada JS/CSS errors
Links: Semua berfungsi — 0 broken links
Forms: Validation test pass — semua scenarios
Lighthouse: Performance >90, Accessibility >90
Load time: <3 saat
Cross-browser: Chrome + Safari + Firefox OK
Mobile real device: Test di phone sebenar

Screenshot Lighthouse:

📷 Screenshot: Lighthouse report — Performance 95, Accessibility 95, Best Practices 95, SEO 100

Tip: Jangan frust kalau skor Lighthouse rendah. Setiap point yang AI suggest untuk fix akan naikkan skor. Fokus pada "Lowest hanging fruit" — image optimization dan render-blocking resources biasanya yang paling senang dibaiki dan memberi impak besar pada skor.

Refleksi Selepas Latihan

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

  • Apa bahagian polishing yang paling memberi impak besar pada projek anda?
  • Adakah anda rasa projek anda kini "launch-ready"? Kenapa?
  • Apa isu security yang paling kritikal yang anda jumpa?
  • Berapa banyak yang AI bantu vs manual? Apa yang anda belajar?
  • Apa yang akan anda buat berbeza untuk projek akan datang?

Anda Telah Mencapai 40/40

Projek anda kini telah melalui 40 langkah quality assurance. Dari visual hingga security, dari SEO hingga performance — semuanya telah dipolish. Anda layak untuk berasa bangga. Launch dengan keyakinan.