🏠 Kembali ke Portal Utama (tawau.netlify.app) Bengkel AI Agentic TVET 2026
Lembaran Amali 5 Penerbitan Web Pantas 1-Click Live Hosting

Penerbitan Web Pantas & Hos Percuma (Netlify & Vercel)

Panduan Langkah Demi Langkah Memindahkan Projek Localhost ke Internet Sebenar (Sifar Bayaran)
Tempoh Masa Amali 20 Minit (Amali Berpandu)
Platform Terbitan Netlify Drop / Vercel CLI
Kos Infrastruktur RM 0.00 (Pelan Komuniti Percuma)
Hasil Amali Pautan URL Rasmi & Kod QR

1. Pengenalan & Mengapa Pensyarah Memerlukannya?

Semasa sesi pembangunan amali menggunakan Antigravity IDE, sistem atau laman web yang kita bina berada di dalam komputer makmal (contohnya http://localhost:8000 atau file:///C:/Users/...).

Untuk sesi Showcase Inovasi Pensyarah Hari Ke-3, perkongsian dengan pelajar, atau penilaian kualiti MQA/JPPKK, kita perlukan cara terpantas untuk menerbitkan keseluruhan projek ke internet sebenar dengan pautan rasmi seperti https://inovasi-tvet-papar.netlify.app supaya sesiapa sahaja boleh membukanya dari telefon bimbit atau komputer riba di mana-mana sahaja.

💡 Kelebihan Netlify Drop untuk TVET:
• Tanpa Perlu Pasang Server: Tidak memerlukan Apache/Nginx fizikal.
• Perlindungan HTTPS Automatik: Sijil SSL percuma (kunci hijau selamat).
• 1-Klik Drag & Drop: Hanya tarik folder dari File Explorer terus ke pelayar web.

2. Langkah Amali Demi Langkah (1-Click Deployment)

01
Semak Struktur Folder Projek Anda

Pastikan fail utama laman web anda dinamakan sebagai index.html (huruf kecil sepenuhnya). Pelayan web Netlify secara automatik akan mencari index.html sebagai pintu masuk utama.

📁 Projek_Inovasi_TVET/ ├── 📄 index.html <-- [WAJIB] Fail utama ├── 📄 netlify.toml <-- [PILIHAN] Konfigurasi header ├── 📁 assets/ <-- Folder imej / ikon └── 📁 03_Modul/ <-- Dokumen sokongan
⚠️ Elakkan Ralat Pautan Tempatan:
Pastikan semua pautan gambar menggunakan pautan relatif seperti src="assets/logo.png" dan BUKAN pautan mutlak komputer seperti src="C:/Users/Jusdy/...".
02
Jana Pakej Bersih (Production Bundle)

Untuk memastikan projek anda bersih daripada fail sementara atau cache, anda boleh jalankan skrip pembungkus Python di terminal Antigravity IDE:

# Jalankan skrip pembungkus Netlify di Terminal: python prepare_netlify_bundle.py

Skrip ini akan menghasilkan satu folder bersih bernama dist_netlify/ yang 100% sedia untuk diheret ke Netlify.

03
Heret Folder ke Netlify Drop (Drag & Drop)

1. Buka pelayar web anda dan pergi ke pautan: https://app.netlify.com/drop.
2. Buka File Explorer di komputer anda.
3. Heret (*Drag & Drop*) folder dist_netlify terus ke dalam kotak bulat Netlify di pelayar web anda.

4. Dalam masa 10 hingga 20 saat, Netlify akan menjana satu pautan unik yang boleh terus diakses oleh sesiapa sahaja di seluruh dunia!

Buka Netlify Drop Sekarang
04
Tukar Nama Pautan URL Mengikut Nama Anda

Secara lalai, Netlify akan memberi nama rawak seperti dazzling-unicorn-1234.netlify.app. Anda boleh menukarnya kepada nama profesional secara percuma:

  • Klik butang Site configuration di papan pemuka Netlify.
  • Klik Change site name.
  • Masukkan nama pilihan anda, contoh: bengkel-ai-tvet-papar.
  • Pautan anda kini menjadi: https://bengkel-ai-tvet-papar.netlify.app.
05
Jana Kod QR untuk Slaid & Penilaian Showcase

Gunakan alatan di bawah untuk menjana Kod QR bagi pautan projek anda. Salin atau ambil tangkapan skrin Kod QR ini untuk diletakkan di dalam slaid pembentangan Hari Ke-3 anda!

Kod QR akan dikemas kini secara automatik dalam masa nyata.

Kod QR

3. Senarai Semak Pengesahan Terbitan (*Pre-Flight Checklist*)

Sila tandakan senarai semak ini sebelum mempersembahkan hasil projek anda kepada penilai: