Cara Buat Absensi Digital Integrasi Canva dan Appscript

Tutorial: Membuat Absensi Digital Menggunakan Canva AI & Rekapan ke Spreadsheet

Panduan langkah-demi-langkah untuk menyiapkan spreadsheet yang benar, membuat Google Apps Script (via Gemini / AI), dan membuat tampilan absensi online.

1. Siapkan Spreadsheet

Buat sebuah Google Spreadsheet dengan **dua sheet** seperti ketentuan berikut:

a. Sheet pertama: Absensi

Contoh tampilan sheet "Absensi" (header & layout):

b. Sheet kedua: Siswa

Isi sheet "Siswa" dengan data siswa (NO, NAMA, KELAS, dsb.). Contoh tampilan:

2. Buka Apps Script (via ekstensi)

1. Di Google Spreadsheet: klik menu Extensions → Apps Script.
2. Di Apps Script, Anda akan menempelkan kode Google Apps Script yang dibuat oleh AI.

3. Prompt untuk Gemini / AI (minta kode Google Apps Script)

Gunakan prompt berikut untuk menghasilkan kode Google Apps Script yang berfungsi sebagai backend absensi:

Prompt:
Buatkan saya kode Google Apps Script untuk sistem absensi siswa dengan ketentuan:

1. Ada dua sheet utama:
   - Sheet "Siswa" untuk data siswa.
   - Sheet "Absensi" untuk mencatat kehadiran.

2. Fitur yang harus ada:
   - Fungsi `saveToSheet(data)` untuk menyimpan data absensi ke sheet "Absensi".
     Format: NO | NAMA | KEHADIRAN | TANGGAL | WAKTU_DISIMPAN
   - Fungsi `getStudentData()` untuk membaca data siswa dari sheet "Siswa".
   - Fungsi `doGet(e)` untuk mengambil data siswa dalam format JSON.
   - Fungsi `doPost(e)` untuk menerima data absensi (baik dari fetch JSON maupun form HTML).

3. Jika sheet belum ada, otomatis buat dengan header.
4. Pastikan ada penanganan error (try...catch) dan kembalikan respon JSON dengan status success / failed.

Tolong tuliskan kode GS lengkap sesuai ketentuan di atas.
    

4. Deploy Web App & ganti link pada prompt HTML

Setelah AI menghasilkan kode GS, langkah:

1. Paste kode ke Apps Script, lalu pilih Deploy → New deployment.
2. Pilih tipe deployment: Web app, atur akses (mis. Anyone with link) sesuai kebutuhan.
3. Salin link Web App yang diberikan (link https://script.google.com/macros/s/...).
4. Ganti link Web App tersebut pada prompt HTML front-end (lihat bagian berwarna merah di bawah).

5. Prompt / Template HTML + JS untuk di-minta ke AI (atau Anda buat sendiri)

Gunakan template berikut untuk menghasilkan atau menyalin tampilan HTML + JS yang terhubung ke Web App Anda. Ganti link berikut dengan link Web App Apps Script Anda (yang Anda dapat setelah deploy):

Contoh placeholder link (HARUS DI-GANTI):

https://script.google.com/macros/s/WE...

Berikut contoh prompt / template front-end (masukkan link Anda di tempat yang berwarna merah di atas):

Prompt HTML/JS:
Buatkan tampilan HTML + CSS + JavaScript sederhana untuk sistem absensi siswa yang terhubung ke Google Apps Script Web App. Berikut ketentuannya:

Fitur yang harus ada:
1. Form input absensi (nama, NIS, kelas, status kehadiran, tanggal)
2. Tombol submit untuk mengirim data ke Google Script
3. Tampilkan pesan sukses/gagal setelah submit
4. Daftar siswa (diambil dari fungsi getStudentData() di Google Script)

Desain:
1. Responsif (bisa dibuka di HP/PC)
2. Minimalis, rapi, dan mudah digunakan
3. Gunakan Bootstrap atau CSS sederhana
4. Koneksi ke Google Script: https://script.google.com/macros/s/WE...
5. Gunakan fetch() JavaScript untuk mengirim data (POST) dan mengambil data siswa (GET)
6. Handle error jika koneksi gagal
7. Pastikan bisa mengirim data sesuai struktur di Google Script (NO, NAMA, KELAS, KEHADIRAN, TANGGAL)
    

6. Cara mencoba absensi online

1. Deploy script Anda dan pastikan akses Web App sudah diatur (mis. Anyone, even anonymous — atau sesuai kebutuhan organisasi).
2. Masukkan link Web App ke bagian prompt di atas (ganti placeholder merah).
3. Jalankan front-end yang dihasilkan oleh AI (atau gunakan file static HTML yang dihasilkan) lalu coba submit data.
4. Cek sheet "Absensi" apakah data masuk sesuai format.

7. Tips & Peringatan

• Jika Anda men-set akses Web App menjadi publik, pertimbangkan keamanan data (jangan masukkan data sensitif tanpa otentikasi).
• Jika fetch POST gagal: periksa CORS, pengaturan deployment, dan apakah Anda menggunakan method POST/GET sesuai implementasi Apps Script.
• Gunakan try...catch pada Apps Script dan juga tangani error di front-end agar pengguna mendapat pesan yang jelas.

8. Contoh implementasi singkat (struktur data yang dikirim via POST)

Contoh JSON yang dikirim ke Web App (POST):
{
  "NO": "01",
  "NAMA": "Budi Santoso",
  "NIS": "12345",
  "KELAS": "7A",
  "KEHADIRAN": "Hadir",
  "TANGGAL": "2025-09-07"
}
    

Semoga tutorial ini membantu. Kalau Anda mau, saya bisa juga buatkan contoh file HTML + JS lengkap (yang siap Anda paste ke Google Sites / hosting) atau langsung menuliskan kode Google Apps Script lengkapnya. Mau lanjut yang mana?

— Tutorial disusun otomatis sesuai instruksi Anda. Pastikan mengganti link Web App Apps Script Anda pada bagian yang diberi highlight merah.

Berbagi :