Contoh Web App “Aktivitasku”.

Padangsidimpuan, 17 Mei 2026

Untuk melihat hasilnya dalam tulisan ini, saya sengaja membuat versi short link-nya menggunakan s.id di Aktivitasku hanya agar singkat saja. Tentunya link anda dan saya akan berbeda meski kodingnya sama. Setidaknya Anda sudah punya versi anda sendiri. Jika anda ingin menguji Web App versi saya anda bisa masuk menggunakan akun Guru (username: GuruPAI, password : guru123) dan Murid (username : Muridpaiku, password : murid123).

APA NIH.. AKTIVITASKU?.

Aktivitasku adalah sebuah website (saya menyebutnya Web App) yang diperuntukkan bagi para siswa di sekolah tertentu dalam memudahkan pelaporan kegiatannya dan untuk membantu guru (di sekolah yang sama) dalam memantau “kegiatan” para siswa, sekaligus melihat kepatuhan pelaporan dan pelaksanaan target harian / mingguan / bulanan para siswa. Web App ini dibuat menggunakan layanan GRATIS dari Google. Saya memanfaatkan software bernama Gemini, Google Apps Script, dan Google Spreadsheet.

Gratis?.

Yah. Gratis karena memang software dan alat bantu utamanya tidak dikenakan biaya oleh Google. Gemini dapat Anda gunakan dalam mode Free Tier dengan kapasitas harian (token AI Gratis) yang sangat besar. Saya juga dibantu Deepseek AI dalam proses pembelajaran alur kerja web app. Begitu pula Google Apps Script dan Google Spreadsheet. Bahkan 2 software terakhir disebut hampir tidak akan mengeluarkan biaya, kecuali anda melebihi kapasitas 15GB media penyimpanan. Nah, itu pun masih bisa diakali.

Bagaimana caranya?.

Baiklah. Ada beberapa langkah persiapan yang tidak dapat saya jelaskan dalam tulisan ini, seperti tahapan pendefinisian “proses bisnis” web app, penentuan metode “prompting” AI agar tidak keliru menafsirkan kebutuhan coding, dan lain sebagainya. Oleh sebab itu, bagi teman-teman yang ingin mencoba “hasil mengupas Nangka”-nya, cukup ikuti tahapan berikut ini :

  1. Siapkan akun google “aktif” milik anda, akun yang sudah tidak dapat diakses tentunya tidak berguna. Kenapa harus akun google?. Karena semua fasilitas layanannya menggunakan software/aplikasi milik Google. Selaku penulis blog ini, Akun Microsoft dan Akun Apple belum pernah saya gunakan di platform Google Management System (GMS) atau ekosistem google.
  2. Saya merekomendasikan menggunakan “Browser” Google Chrome (juga punya dia) dan Login ke browser menggunakan akun google anda.
  3. Masuk ke Google Drive Anda, kemudian:
  • Buat Sebuah Folder bernama “Aktivitasku”
  • Kemudian buat sebuah file “Spreadsheets” di dalamnya bernama “Aktivitasku”
  • Buat Sheet sebanyak 5 Sheet, masing-masing bernama “Users”, “Kegiatan”, “Relasi”, “LaporanSiswa”, “Pemantauan”. Perhatikan penulisan nama sheet, huruf besar/kecil dan tanpa spasi. Karena perbedaan sebuah spasi saja bisa menyebabkan kode tidak berjalan.

4. Buat isi setiap sheet dengan kolom seperti data berikut ini :

  • “Users”: UID, Username, Password, Role, Nama, DibuatPada.
  • “Kegiatan”: IDKegiatan, Kegiatan, Sifat, Target, Satuan.
  • “Relasi”: IDRelasi, IDGuru, IDSiswa.
  • “LaporanSiswa”: IDLaporan, IDSiswa, IDKegiatan, Kegiatan, Sifat, Hasil, Satuan, WaktuPelaksanaan, TanggalLapor.
  • “Pemantauan”: IDPantau, IDLaporan, Status, ValidatedBy, Keterangan.

Khusus Sheet “Users”, lakukan pengisian secara langsung di Spreadsheet untuk akun Admin, karena kode tidak menanamkan akun Admin dan harus dibuat secara manual di Spreadsheet. Contoh : UID (USR0001), Username (admin), Password (1212ok), Role (Admin), Nama (Administrator), DibuatPada (01/01/2026 12:00:00). Data Admin ini hanya contoh, modifikasi sesuai kebutuhan Anda.

  1. Setelah seluruh data di Spreadsheet selesai. Masih di file Spreadsheet yang sama ;

Klik menu “Extensions”—>”Apps Script”.

  1. Anda akan berpindah ke tab (halaman) baru dan beri nama file “Apps Script” Anda, lihat di kiri atas layar Anda, beri nama “AktivitasKu”.
  2. Secara default akan ada Code.gs (English) atau Kode.gs (Indonesia) di bagian panel kiri dibawah Navigasi Editor Files. Anda sekarang perlu membuat 2 file baru bernama Index.html dan JavaScript.html**.

Caranya : Klik tanda “+” pada bagian kanan Files, pilih Html, pada panel yang muncul ketik Index. Huruf besar kecil diperhatikan. Harus sama persis. Lakukan cara yang sama untuk file JavaScript.

  1. Buka link dibawah ini, hapus seluruh kode di Apps Script anda dan ganti dengan kode yang sudah disiapkan.

Sebelum kita lupa, pada bagian awal Code.gs, ganti SPREADSHEET_ID dengan Spreadsheet ID file anda. Contoh URL Spreadsheet anda adalah : https://docs.google.com/spreadsheets/d/1qpyC0XzvTcKT6EISywvqESX3A0MwQoFDE8p-Bll4hps/edit#gid=0 berdasarkan model URL tersebut, Spreadsheet ID Anda adalah: 1qpyC0XzvTcKT6EISywvqESX3A0MwQoFDE8p-Bll4hps masukkan ID ini di Code.gs anda.

  1. Masih di Tab “Apps Script” pastikan semua file telah berhasil disimpan dengan mengklik logo Disket Floppy atau tekan tombol Ctrl dan S di keyboard anda untuk menyimpan.
  2. Pada bagian kanan layar “Apps Script” anda akan ada tombol bertuliskan Deploy/Kelola. Klik dan pilih New deployment.

Untuk pertama kali deploy/run script, google akan meminta Anda memberikan izin akses ke aplikasi melalui layanan email anda. Akan muncul jendela popup yang meminta kita memilih. Karena ini adalah skrip yang Kita buat atau pasang sendiri dan belum diverifikasi secara publik oleh Google, layar peringatan bertuliskan Google hasn’t verified this app akan muncul. Untuk melanjutkan, klik opsi Advanced (Lanjutan) yang berada di bagian bawah. Klik tautan Go to [Nama Proyek] (unsafe) (Buka [Nama Proyek] (tidak aman)). Lanjutkan tahapan hingga proses izin selesai.

  1. Setelah memilih New deployment, pada window yang muncul, di samping tulisan Select Type, klik logo roda bergerigi, dan pilih Web App. Berpindah ke bagian kanan, isi Description dengan “versi 1” (sebenarnya bebas buat pengingat apa saja), isi bagian Web App execute as dengan Me(email anda), dan isi bagian Who has access pilih Anyone. Agar bisa diakses secara publik.
  2. Pada jendela berikutnya akan muncul link web app yang sudah berhasil dibuat. Klik tulisan copy link di bagian bawah bagian Web App agar link web app “Aktivitasku” yang anda buat di copy ke “Clipboard” komputer anda dan bisa anda buka secara langsung di tab/halaman browser baru. Sampai disini website anda TELAH SELESAI, SILAHKAN UJI dengan akun yang sudah anda buat**.

Akun Admin, guru dan siswa akan memberikan Tampilan Dashboard yang berbeda. Anda bisa menambahkan akun guru dan siswa dari akun admin. Tata cara pemakaiannya rasanya tidak perlu dijabarkan ditulisan ini.

Kenapa pakai s.id?

Alasan yang terlihat jelas saat ini adalah kata GRATIS. Kalau anda mencari di internet saat ini, bahkan Cara membuat script ini menjadi website yang dipublish via Google sites juga sudah banyak tutorialnya. Jadi, silahkan pilih yang anda suka.

Gambar Tampilan View ID “Guru”

Gambar Tampilan View ID “Murid”

Scroll to Top