🚀
Modul Deploy Game Web
Gemini Canvas + Cloudflare Pages
Mula Belajar ↓
✨ Panduan Bergambar Lengkap • 35 Langkah Terperinci

Bina Game Interaktif dengan Gemini Canvas & Terbitkan Percuma di Cloudflare

Langkah demi langkah dari idea, penulisan prompt DSKP, jana game dalam Gemini Canvas, muat turun, susun fail index.html, hingga dapat link rasmi online yang pantas & percuma selamanya!

🤖

1. Prompt & Canvas

Jana kod permainan HTML5 interaktif menggunakan AI Gemini

📁

2. Susun Fail (index.html)

Kunci utama: namakan fail sebagai index.html dalam folder

☁️

3. Akaun Cloudflare

Daftar pantas guna akaun Google / ID DELIMa KPM

🌐

4. Deploy & Siap

Direct upload & terus dapat URL live .pages.dev!

🤖 Fasa 1: Jana Game Pendidikan di Gemini Canvas

Gunakan Google Gemini berserta ciri Canvas untuk membina game interaktif mengikut silibus DSKP.

4 Langkah Utama
1

Masukkan Prompt Game di Google Gemini

Layari gemini.google.com. Dalam kotak perbualan, taipkan prompt spesifik merangkumi topik DSKP, tahun pembelajaran murid, dan mekanik permainan yang anda inginkan.

💡 Contoh Prompt yang Digunakan:
buat games sistem suria sukatan tahun 3 topik sembilan DSKP sekolah rendah. games jenis pancing
Taip prompt game di Gemini 🔍 Klik untuk besarkan
Rajah 1: Kotak sembang Gemini dengan prompt bertulis Sains Tahun 3 Topik Sistem Suria.
2

Aktifkan Ciri 'Canvas' untuk Menjana Kod Game

Sebelum menekan butang hantar, klik ikon tambah (+) di sebelah kiri kotak prompt > pilih More tools > pilih Canvas. Ciri ini membolehkan Gemini menulis kod HTML, CSS, dan Javascript yang boleh diuji dan dipratonton secara interaktif.

Menu More tools di Gemini 🔍 Klik Zoom
Rajah 2: Menu pilihan alat tambahan (More tools > Canvas).
Lencana Canvas terpasang 🔍 Klik Zoom
Rajah 3: Prompt sedia dihantar bersama lencana Canvas.
3

Pratonton Game Interaktif Terus Dalam Gemini Canvas

Gemini akan menjana keseluruhan kod permainan secara langsung dalam ruang Canvas. Anda boleh menguji permainan (termasuk muzik latar, audio efek, dan soalan DSKP) pada panel Preview!

✨
Kehebatan Gemini Canvas: Canvas bukan sekadar menjana teks kod kosong, malah membina UI penuh dengan grafik angkasa, butang audio ON/OFF, Nota DSKP, serta mod permainan seperti Misi Petunjuk, Pancing & Kuiz, dan Urutan Orbit!
Pratonton game dalam Canvas 🔍 Klik Zoom
Rajah 4: Antara muka game yang telah siap dijana di Canvas.
Pilihan mod permainan 🔍 Klik Zoom
Rajah 5: Pilihan 3 Mod Permainan interaktif mengikut sukatan Tahun 3.
4

Muat Turun Fail Permainan ke Komputer

Di bahagian atas kanan panel Canvas, klik butang Download (ikon muat turun dengan anak panah ke bawah) untuk memuat turun kod permainan HTML tersebut ke folder Downloads komputer anda.

Butang Download di Canvas 🔍 Klik Zoom
Rajah 6: Bar alatan Canvas dengan butang Download.
Menu muat turun fail 🔍 Klik Zoom
Rajah 7: Menu muat turun dan simpan fail permainan.

📁 Fasa 2: Susunan Fail & Rename Menjadi index.html

Langkah paling penting agar web server Cloudflare tahu fail mana yang perlu dipaparkan sebagai laman utama.

Langkah Wajib
5

Cipta Folder Projek Baru di Folder Downloads

Buka File Explorer di komputer dan pergi ke folder Downloads. Klik kanan pada ruang kosong > pilih New > Folder. Namakan folder tersebut, contohnya: gamesistemsuria.

Fail muat turun di Downloads 🔍 Klik Zoom
Rajah 8: Fail asal pancingan_angkasa_sistem_suria_tahun_3.html.
Cipta folder baru 🔍 Klik Zoom
Rajah 9: Memilih New > Folder.
Folder dinamakan gamesistemsuria 🔍 Klik Zoom
Rajah 10: Folder dinamakan gamesistemsuria.
Folder siap dicipta 🔍 Klik Zoom
Rajah 11: Masukkan Fail ke dalam Folder.
6

Pindahkan Fail & Namakan Semula Kepada 'index.html'

Pindahkan fail HTML tadi ke dalam folder gamesistemsuria. Klik kanan fail tersebut > pilih Rename (atau tekan kekunci F2) > tukar namanya kepada index (supaya fail menjadi index.html).

⚠️
MENGAPA WAJIB NAMA 'index.html'? Semua pelayan web di dunia (termasuk Cloudflare Pages) secara automatik mencari fail bernama index.html sebagai pintu masuk utama (landing page). Jika anda menggunakan nama lain seperti game.html, pelawat web akan menemui ralat 404 Not Found melainkan mereka menaip nama fail secara manual di hujung URL!
Menu Rename fail 🔍 Klik Zoom
Rajah 12: Memilih pilihan Rename.
Fail bertukar nama kepada index 🔍 Klik Zoom
Rajah 13: Fail kini bernama tepat index.html (50 KB).

☁️ Fasa 3: Pendaftaran Akaun Percuma Cloudflare

Daftar akaun Cloudflare dalam masa 1 minit menggunakan Single Sign-On (SSO) Google.

Pantas & Percuma
7

Layari Cloudflare & Log Masuk dengan Google

Buka laman cloudflare.com dan klik butang Start building for free. Pada paparan daftar masuk, pilih butang Continue with Google untuk pendaftaran pantas tanpa perlu menetapkan kata laluan baru.

Laman Cloudflare.com 🔍 Klik Zoom
Rajah 14: Laman utama cloudflare.com.
Halaman Sign Up Cloudflare 🔍 Klik Zoom
Rajah 15: Klik butang Continue with Google.
8

Pilih Akaun Google & Berikan Kebenaran Akses

Pilih akaun Google anda (contohnya akaun DELIMa Guru KPM atau akaun Gmail peribadi). Klik Continue pada skrin pengesahan untuk melengkapkan akses ke Cloudflare Dashboard.

Pilih akaun Google 🔍 Klik Zoom
Rajah 16: Memilih akaun Google.
Kebenaran akses Google ke Cloudflare 🔍 Klik Zoom
Rajah 17: Klik butang Continue.
Dashboard Cloudflare 🔍 Klik Zoom
Rajah 18: Dashboard Cloudflare sedia digunakan.

⚙️ Fasa 4: Menetapkan Projek Cloudflare Pages

Navigasi ke bahagian Workers & Pages dan cipta aplikasi berasaskan fail statik (Direct Upload).

Konfigurasi Mudah
9

Pergi ke Menu Workers & Pages > Create Application

Pada menu bar sisi kiri, kembangkan tab Compute > klik Workers & Pages. Seterusnya, klik butang biru Create application.

Menu Compute Workers Pages 🔍 Klik Zoom
Rajah 19: Pilih menu Compute > Workers & Pages.
Create application button 🔍 Klik Zoom
Rajah 20: Klik butang Create application.
10

Pilih Aliran Muat Naik Fail Statik (Direct Upload) & Beri Nama Projek

Pilih Upload your static files (atau klik Continue to Pages > Drag and drop your files). Masukkan nama projek yang unik dalam huruf kecil tanpa jarak (cth: gamesistemsuria). Cloudflare akan menjana link subdomain kekal: gamesistemsuria.pages.dev. Akhir sekali, klik Create project.

Pilih kaedah binaan 🔍 Klik Zoom
Rajah 21: Pilih Upload your static files / Continue to Pages.
Drag and drop your files 🔍 Klik Zoom
Rajah 22: Pilih Drag and drop your files > Get started.
Borang nama projek 🔍 Klik Zoom
Rajah 23: Ruang nama projek (Step 1: Create a name).
Menaip sistemsuria 🔍 Klik Zoom
Rajah 24: Menaip nama projek.
Subdomain gamesistemsuria.pages.dev 🔍 Klik Zoom
Rajah 25: Domain ditetapkan: gamesistemsuria.pages.dev. Klik Create project.

🚀 Fasa 5: Muat Naik Folder Projek & Terbit Laman Web

Muat naik keseluruhan folder gamesistemsuria, sahkan fail dan terbitkan ke seluruh dunia!

Pelancaran Rasmi
11

Pilih Folder 'gamesistemsuria' & Tekan Upload

Pada ruangan Upload your project assets, klik perkataan folder (atau seret folder ke dalam kotak). Pilih folder gamesistemsuria daripada folder Downloads anda. Apabila browser memaparkan amaran keselamatan "Upload one file to this site?", klik butang Upload.

Pilih folder gamesistemsuria 🔍 Klik Zoom
Rajah 26: Pilih folder gamesistemsuria > klik Upload.
Popup Upload one file to this site 🔍 Klik Zoom
Rajah 27: Klik Upload pada pop-up pengesahan browser.
12

Klik 'Deploy Site' & Tahniah Laman Web Anda Telah Live!

Pastikan mesej hijau "1/1 files uploaded - All files were successfully uploaded" dipaparkan berserta fail index.html. Kemudian, klik butang biru Deploy site. Dalam beberapa saat sahaja, Cloudflare akan mengeluarkan notis Success! berserta URL rasmi anda.

🎉
GAME ANDA KINI BOLEH DIAKSES OLEH SESIAPA SAHAJA! Laman web anda mempunyai sambungan selamat HTTPS (SSL) percuma secara automatik. Anda boleh berkongsi pautan tersebut di WhatsApp Group murid, Google Classroom, atau dijadikan Kod QR untuk ditampal di buku teks!
Fail berjaya diupload 🔍 Klik Zoom
Rajah 28: Semakan fail index.html > Klik Deploy site.
Proses deploy berlangsung 🔍 Klik Zoom
Rajah 29: Laman sedang diproses untuk pelancaran.
Success deployment 🔍 Klik Zoom
Rajah 30: Success! Laman web anda rasmi aktif!
Senarai deployment aktif 🔍 Klik Zoom
Rajah 31: Status Production di Cloudflare Pages.

🔄 Fasa 6: Cara Kemas Kini (Update) Game Pada Masa Depan

Bagaimana jika anda menambah soalan kuiz baru atau menukar grafik game?

Tips Tambahan
★

Kemaskini Melalui Butang 'Create Deployment'

Jika anda telah menjana kod versi baru di Gemini:

  1. Gantikan fail index.html lama dalam folder gamesistemsuria dengan fail baru.
  2. Buka Cloudflare Dashboard > Workers & Pages > pilih projek gamesistemsuria.
  3. Klik butang Create deployment di sudut kanan atas.
  4. Pilih mod Production dan muat naik semula folder projek anda.
  5. Laman web anda akan serta-merta dikemas kini tanpa mengubah alamat URL sedia ada!

Senarai projek 🔍 Klik Zoom
Rajah 32: Projek dalam senarai Workers & Pages.
Create new deployment 🔍 Klik Zoom
Rajah 33: Pilih Production > klik muat naik folder.
Pilih folder untuk update 🔍 Klik Zoom
Rajah 34: Memilih folder kemas kini daripada komputer.
Sahkan muat naik versi baru 🔍 Klik Zoom
Rajah 35: Klik Save and deploy untuk mengemas kini laman.
📋 Prompt disalin ke papan keratan!