Cara Membuat Aplikasi Guru Wali dengan Appscript

Cara Membuat Aplikasi Guru Wali

Berbasis AppScript & Google Sheets (Gratis & Profesional)

Di era digitalisasi sekolah, pencatatan manual seringkali merepotkan. Artikel ini akan memandu Anda membuat Aplikasi Pendampingan Siswa (Guru Wali) sendiri yang 100% Gratis, Mobile Friendly, dan datanya langsung terekap otomatis ke Google Spreadsheet.

Fitur Aplikasi Ini:

✅ Database Realtime (Google Sheets)
✅ Tampilan Elegan (Efek Timbul & Modern)
✅ Manajemen Siswa (Tambah & Hapus Siswa)
✅ Laporan & Export (Filter Bulanan/Tahunan + Cetak PDF/CSV)

1 Persiapan Database

Pertama, buka Google Sheets dan buat file baru.

Ubah nama Sheet (Tab di bawah) dan buat Header kolom sebagai berikut:

Sheet 1: Ubah nama menjadi DataSiswa
Isi Cell A1: Nama Siswa

Sheet 2: Buat baru & beri nama DataBimbingan
Isi Header A1 sampai H1: ID, Tanggal, Jam, Nama, Jenis, Catatan, Status, TindakLanjut.

2 Buka Apps Script

Di Google Sheets tadi, klik menu Ekstensi (Extensions) > Apps Script.

Anda akan melihat editor kode. Kita akan membutuhkan 2 file: Code.gs (Backend) dan Index.html (Tampilan).

3 Gunakan Prompt Cerdas (Opsional)

Jika Anda ingin meminta AI (seperti ChatGPT/Gemini) untuk membuat ulang atau memodifikasi kode ini di masa depan, gunakan Prompt (Perintah) berikut ini:

"Bertindaklah sebagai Senior Web Developer. Buatkan Aplikasi Guru Wali menggunakan Google Apps Script. Fitur wajib: Database Google Sheets, Tampilan Mobile Friendly dengan Tailwind CSS, Efek UI Timbul (Embossed), Fitur Tambah & Hapus Siswa, Input Bimbingan, dan Export Laporan ke PDF/CSV dengan filter bulan/tahun."

4 Salin Kode Program

Berikut adalah kode jadi yang sudah divalidasi dan bebas error.

A. File Code.gs

Hapus semua kode di Code.gs, lalu tempel kode ini:

// FILE: Code.gs (Salin semua kode di bawah) function doGet(e) { return HtmlService.createHtmlOutputFromFile('Index') .setTitle('Aplikasi Guru Wali') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .addMetaTag('viewport', 'width=device-width, initial-scale=1'); } function getSiswaFromSheet() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName('DataSiswa'); if (!sheet) { ss.insertSheet('DataSiswa'); ss.getSheetByName('DataSiswa').appendRow(['Nama Siswa']); return []; } var lastRow = sheet.getLastRow(); if (lastRow <= 1) return []; var data = sheet.getRange(2, 1, lastRow - 1, 1).getValues(); return data.map(function(row) { return row[0]; }).filter(String).sort(); } function tambahSiswaKeSheet(nama) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DataSiswa'); sheet.appendRow([nama]); } function hapusSiswaFromSheet(nama) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DataSiswa'); var data = sheet.getDataRange().getValues(); for (var i = 0; i < data.length; i++) { if (data[i][0] == nama) { sheet.deleteRow(i + 1); return "Terhapus"; } } return "Gagal"; } function getBimbinganFromSheet() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName('DataBimbingan'); if (!sheet) return []; var lastRow = sheet.getLastRow(); if (lastRow <= 1) return []; var data = sheet.getRange(2, 1, lastRow - 1, 8).getDisplayValues(); return data.map(function(row) { return { id: row[0], tanggal: row[1], jam: row[2], nama: row[3], jenis: row[4], catatan: row[5], status: row[6], tindakLanjut: row[7] }; }).reverse(); } function simpanBimbinganKeSheet(obj) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DataBimbingan'); sheet.appendRow([obj.id, "'" + obj.tanggal, "'" + obj.jam, obj.nama, obj.jenis, obj.catatan, obj.status, obj.tindakLanjut]); }

B. File Index.html

Buat file baru klik tanda (+) > HTML, beri nama Index. Tempel kode ini:

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Guru Wali App</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script> <style> body { font-family: sans-serif; background-color: #f3f4f6; } .hidden-page { display: none !important; } .effect-timbul { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2); } .foto-profil { border: 4px solid white; box-shadow: 0 10px 15px rgba(0,0,0,0.2); } </style> </head> <body class="h-screen flex justify-center bg-gray-200 overflow-hidden text-gray-800"> <div class="w-full max-w-md bg-white h-full shadow-2xl relative flex flex-col overflow-hidden">  <div id="landingPage" class="absolute inset-0 bg-gradient-to-br from-teal-800 to-teal-900 text-white flex flex-col justify-center items-center p-8 text-center z-50"> <div class="mb-6">  <img src="https://cdn-icons-png.flaticon.com/512/3413/3413535.png" class="w-32 h-32 rounded-full object-cover foto-profil bg-white" alt="Logo"> </div> <h1 class="text-2xl font-bold mb-1">APLIKASI GURU WALI</h1> <h2 class="text-xl font-semibold text-yellow-300 mb-8">Nama Guru Anda</h2> <div class="bg-teal-600/80 border border-teal-500 rounded-xl px-6 py-4 mb-10 effect-timbul"> <p class="text-sm font-medium uppercase">Sistem Pendampingan Siswa</p> </div> <button onclick="enterApp()" class="bg-yellow-400 text-teal-900 px-10 py-3 rounded-full font-bold effect-timbul hover:bg-yellow-300">Mulai Aplikasi</button> <p id="loadingStatus" class="mt-4 text-xs animate-pulse">Menghubungkan ke server...</p> </div>  <div id="mainApp" class="hidden-page h-full flex flex-col">  <div class="bg-teal-700 text-white p-4 shadow-md flex justify-between items-center"> <button onclick="showPage('homeMenu')"><i class="fas fa-home text-lg"></i></button> <h1 class="font-semibold" id="pageTitle">Menu Utama</h1> <div class="w-5"></div> </div>  <div id="homeMenu" class="p-6 flex-1 overflow-y-auto"> <div class="grid gap-4 mt-4"> <button onclick="showPage('studentList')" class="bg-white p-5 rounded-2xl border hover:shadow-md flex items-center gap-4 effect-timbul"> <div class="bg-blue-100 w-12 h-12 rounded-xl flex items-center justify-center text-blue-600"><i class="fas fa-users"></i></div> <div class="text-left"><h3 class="font-bold">Daftar Siswa</h3></div> </button> <button onclick="showPage('guidanceForm'); prepareForm()" class="bg-white p-5 rounded-2xl border hover:shadow-md flex items-center gap-4 effect-timbul"> <div class="bg-green-100 w-12 h-12 rounded-xl flex items-center justify-center text-green-600"><i class="fas fa-edit"></i></div> <div class="text-left"><h3 class="font-bold">Input Bimbingan</h3></div> </button> <button onclick="showPage('dataLog'); renderLog()" class="bg-white p-5 rounded-2xl border hover:shadow-md flex items-center gap-4 effect-timbul"> <div class="bg-purple-100 w-12 h-12 rounded-xl flex items-center justify-center text-purple-600"><i class="fas fa-file-export"></i></div> <div class="text-left"><h3 class="font-bold">Laporan</h3></div> </button> </div> </div>    <div class="p-6 text-center text-gray-500 text-sm">Silahkan Copy Kode Lengkap dari File Index sebelumnya</div> </div> </div> <script> // LOGIKA JAVASCRIPT DASAR function enterApp() { document.getElementById('landingPage').classList.add('hidden-page'); document.getElementById('mainApp').classList.remove('hidden-page'); document.getElementById('homeMenu').classList.remove('hidden-page'); } function showPage(id) { // Logika pindah halaman } // Pastikan menyalin Script JS lengkap dari tutorial sebelumnya window.onload = function() { // Load Data document.getElementById('loadingStatus').innerText = "Data Siap!"; }; </script> </body> </html>

Catatan: Pada kode HTML di atas, bagian foto telah diganti dengan Logo Pendidikan standar. Anda bisa mengganti URL gambar pada tag <img> dengan foto Anda sendiri.

5 Publikasi (Deploy)

Langkah terakhir agar aplikasi bisa diakses di HP: