Kemahiran yang diperlukan adalah kemahiran menyalin dan menampal oleh murid.
- Screenshot 2026-08-18 at 10.25.54 PM.png (26.24 KiB) Viewed 1353 times
Code: Select all
Saya seorang guru dan ingin membina satu sistem **Carian ID DELIMa Murid** menggunakan **Google Apps Script + Google Sheet + Google Sites**.
Bina sistem lengkap yang mesra guru dan murid.
### 1. Sumber data
Saya mempunyai Google Sheet dengan satu tab bernama:
`ID Delima`
Struktur data:
* Kolum A = Kelas
* Kolum B = Nama Murid
* Kolum C = ID DELIMa
Data bermula pada baris 2.
Gunakan:
`SpreadsheetApp.openById()`
untuk membaca Google Sheet.
Jangan baca, simpan atau paparkan sebarang password murid.
### 2. Fungsi sistem
Bina Web App Google Apps Script yang mempunyai:
1. Paparan halaman Smart DELIMa.
2. Ruangan Kod Akses sebelum sistem boleh digunakan.
3. Kod akses boleh ditetapkan oleh guru dalam `Code.gs`.
4. Selepas kod akses betul, paparkan sistem carian.
5. Dropdown Pilih Kelas.
6. Ruangan carian nama murid.
7. Senarai nama murid mengikut kelas.
8. Apabila murid dipilih, paparkan ID DELIMa.
9. Butang **Salin ID**.
10. Butang **Tukar Murid / Reset**.
11. Butang **Refresh Data**.
12. Paparkan mesej jika nama tidak dijumpai.
13. Abaikan baris Google Sheet yang kosong.
14. Kendalikan error jika Google Sheet tidak dapat dibaca.
15. Paparkan mesej yang mudah difahami pengguna.
16. Tidak menyimpan password murid.
17. Tidak mengisi atau mengendalikan password Google.
18. Sesuai digunakan oleh murid di makmal komputer.
19. Responsive untuk PC, tablet dan telefon.
### 3. Keselamatan
Gunakan satu kod akses yang boleh saya ubah dalam `Code.gs`, contohnya:
`KELAS2026`
Jangan letakkan ID DELIMa atau data murid secara hard-code dalam HTML atau JavaScript.
Data murid mesti dibaca terus daripada Google Sheet melalui Apps Script.
Jangan gunakan localStorage untuk menyimpan password.
Jika menggunakan cache, cache hanya boleh digunakan untuk data murid yang diperlukan dan bukan password.
### 4. Reka bentuk
Gunakan reka bentuk moden, kemas dan mesra murid.
Gunakan warna yang ceria tetapi tidak terlalu terang.
Paparan utama lebih kurang:
SMART DELIMa
Carian ID Murid
Kod Akses
[____________] [MASUK]
Selepas berjaya:
Pilih Kelas
[ Tahun 5 ▼ ]
Cari Nama Murid
[ Taip nama... ]
Nama Murid
[ Ahmad bin Ali ]
ID DELIMa
[ ahmad123 ]
[ 📋 SALIN ID ]
[ 🔄 Refresh Data ]
### 5. Google Apps Script
Sediakan fail:
`Code.gs`
dan
`Index.html`
Berikan kod lengkap untuk kedua-dua fail.
Gunakan `doGet()` untuk Web App.
Gunakan `ContentService` atau mekanisme yang sesuai untuk komunikasi data jika diperlukan.
Pastikan kod boleh terus disalin ke Google Apps Script.
### 6. Deploy
Terangkan langkah lengkap:
1. Cara mencipta projek Apps Script.
2. Cara memasukkan `Code.gs`.
3. Cara mencipta `Index.html`.
4. Bahagian mana untuk memasukkan Google Sheet ID.
5. Bahagian mana untuk mengubah Kod Akses.
6. Cara Deploy → New Deployment → Web App.
7. Tetapan `Execute as`.
8. Tetapan `Who has access`.
9. Cara mendapatkan URL Web App.
10. Cara menguji Web App.
### 7. Google Sites
Terangkan cara memasukkan Web App tersebut ke dalam Google Sites menggunakan:
Insert → Embed → URL
Terangkan juga jika terdapat masalah paparan iframe dan cara mengatasinya.
### 8. Penting
Berikan semua kod lengkap dan jangan berikan kod separuh.
Gunakan komen dalam kod untuk menunjukkan bahagian yang perlu diubah oleh guru.
Sistem mestilah mudah digunakan oleh guru yang tidak mempunyai pengetahuan pengaturcaraan yang tinggi.
Pada akhir jawapan, berikan checklist ringkas:
☐ Google Sheet siap
☐ Google Sheet ID dimasukkan
☐ Kod Akses ditetapkan
☐ Apps Script siap
☐ Web App telah di-deploy
☐ URL Web App diperoleh
☐ Web App dimasukkan ke Google Sites
☐ Sistem Carian ID DELIMa boleh digunakan