Transformasi Digital Pendidikan Karakter dengan Aplikasi Pelaporan G7Kaih

Pendidikan karakter adalah jantung dari proses belajar mengajar di satuan pendidikan. Kita sepakat bahwa menanamkan kebiasaan baik—seperti bangun pagi, rajin beribadah, hingga gemar belajar—sama pentingnya dengan pencapaian akademik siswa. Namun, kita juga tahu bahwa memantau dan merekap kebiasaan ratusan siswa setiap harinya secara manual adalah tugas yang sangat menyita waktu dan energi. Kertas laporan yang menumpuk, data yang terselip, hingga proses rekapitulasi akhir bulan seringkali menjadi beban tambahan di tengah kesibukan mengajar.

Aplikasi ini bukanlah sistem rumit yang membutuhkan biaya server mahal, sewa hosting maupun beli domain atau keahlian coding tingkat dewa. Kita akan membangunnya dengan memanfaatkan ekosistem yang sudah sangat akrab dengan kita, yaitu Google Workspace (Google Sheets dan Google Apps Script) yang sudah bisa kita manfaatkan secara gratis dan di bantu oleh kecerdasan artifisial yaitu Gemini.

Mengapa Aplikasi G7Kaih Ini Sangat Membantu?

  • Bebas Kertas & Otomatis: Siswa dapat mengisi laporan dari HP mereka sendiri di rumah. Data tersebut akan otomatis masuk dan tersusun rapi di Google Sheets kita.
  • Ramah Pengguna (Mobile-First): Tampilan aplikasi dirancang khusus untuk layar HP. Tombolnya besar, mudah ditekan, dan anti-zoom, sehingga sangat nyaman digunakan oleh siswa, guru, maupun orang tua.
  • Pemantauan Cepat (Satu Klik): Bapak/Ibu tidak perlu lagi merekap satu per satu. Dengan fitur dashboard guru, Anda bisa memfilter laporan berdasarkan kelas atau tanggal, memberikan catatan, dan menyetujui laporan secara massal.
  • Keterlibatan Orang Tua: Wali murid memiliki portal login sendiri untuk memantau langsung perkembangan anak mereka dari minggu ke minggu, menciptakan sinergi yang transparan antara sekolah dan rumah.

Apa yang Akan Kita Lakukan Hari Ini? Dalam sesi tutorial ini, kita akan belajar langkah demi langkah mulai dari:

  1. Menyiapkan database gratis menggunakan Google Sheets.
  2. Menyematkan kode backend (Google Apps Script) dan antarmuka (Frontend HTML/CSS) yang sudah disediakan.
  3. Melakukan Deployment agar aplikasi bisa langsung diakses melalui link (URL) di HP siswa dan orang tua.

Bapak/Ibu tidak perlu khawatir jika belum pernah membuat aplikasi sebelumnya. Cukup ikuti langkah-langkahnya, praktikkan secara bertahap, dan dalam waktu singkat, satuan pendidikan kota Semarang akan memiliki sistem pelaporan karakter yang modern, efisien, dan mandiri.

Mari kita mulai langkah pertama menuju digitalisasi pendidikan karakter yang lebih baik! kita mulai yuk…!

Langkah 0: Meminta Gemini Membuatkan Aplikasi

Sebelum memasukan prompt, ingat untuk merubah mode menjadi 3.1.Pro

Prompt :

“Bertindaklah sebagai Ahli Web Developer dan spesialis Google Apps Script. Buatkan kode untuk aplikasi Web App berbasis Google Apps Script (HTML, CSS, JavaScript) dengan database Google Sheets yang dirancang khusus untuk layar HP (Mobile-First Responsif) menggunakan Bootstrap 5.

Nama Aplikasi: Aplikasi Pembiasaan Baik SD Negeri Kota Semarang

DESAIN ANTARMUKA:

Aplikasi memiliki 3 Tab Utama menggunakan Navigasi Bawah (Bottom Navigation) ala aplikasi mobile asli. Gunakan ukuran font besar (minimal 16px untuk input/select agar anti-zoom di HP), tombol tebal (padding longgar), loading spinner (overlay), dan layout bersih.

SISTEM DATABASE (Google Sheets) WAJIB SESUAI URUTAN KOLOM BERIKUT:

1. Sheet “Data Siswa” (6 Kolom): [NIS, Nama Siswa, Kelas, Jenis Kelamin, Nama Bapak, Password]

2. Sheet “Guru” (2 Kolom): [Nama Guru, Password]

3. Sheet “Laporan” (16 Kolom): [Timestamp, Tanggal, NIS, Nama Siswa, Kelas, Jenis Kelamin, Bangun Pagi, Taat Beribadah, Berolahraga, Makan Sehat Bergizi, Gemar Belajar, Aktif Bermasyarakat, Tidur Cepat, Keterangan, Status, Catatan Guru]

FITUR PADA TIAP HALAMAN (TAB):

1. HALAMAN SISWA (Tab 1 – Default)

– Dropdown “Pilih Kelas” (data unik dari sheet Data Siswa).

– Dropdown “Pilih Nama Anda” (otomatis muncul sesuai kelas yang dipilih, disabled sebelum kelas dipilih).

– 7 Checkbox indikator kebiasaan (Bangun Pagi, Taat Beribadah, Berolahraga, Makan Sehat Bergizi, Gemar Belajar, Aktif Bermasyarakat, Tidur Cepat). Value jika dicentang = “Dilakukan”.

– Textarea untuk Keterangan Opsional.

– Tombol Simpan Laporan. Kolom ‘Tanggal’ di-generate format yyyy-MM-dd di sisi klien. Kolom Jenis Kelamin harus ditarik dari cache data siswa. Kolom Status default “Menunggu”, Catatan Guru default “-“.

2. HALAMAN GURU (Tab 2)

– Form Login Guru (mencocokkan Nama & Password di sheet Guru).

– Jika sukses, tampilkan Dashboard dengan Navigasi “Pills” untuk 2 Sub-Menu: “Daftar Harian” dan “Rekap Bulanan”.

– [Sub-Menu: Daftar Harian] Berisi tombol “✓ Setuju Semua” (ubah status Menunggu jadi Selesai). Terdapat filter Kelas dan Tanggal real-time. Tiap kartu laporan menampilkan identitas (Nama, Kelas, Jenis Kelamin), badge warna-warni untuk status 7 kebiasaan, serta form inline untuk ubah Status, input Catatan Guru, dan tombol “Simpan”.

– [Sub-Menu: Rekap Bulanan] Berisi dropdown Kelas, input type=”month” (Bulan), dan tombol Proses.

– [Logika Rekap Bulanan]: Tarik data siswa dari sheet Data Siswa berdasarkan kelas untuk mengetahui total laki-laki dan perempuan. Hitung centang kebiasaan di bulan terkait. Threshold: >=18 (Terbiasa/Sudah Terbiasa), 10-17 (Cukup Terbiasa), <10 (Belum Terbiasa).

– [Output Rekap Bulanan] Hasilkan 2 Tabel bergaris (border 1px hitam):

  a. Tabel “Rekap Jenis Kelamin”: Menampilkan baris Perempuan, Laki-laki, dan Total. Kolom: Jenis Kelamin, Jml Siswa, Terbiasa, Cukup Terbiasa, Belum Terbiasa.

  b. Tabel “Rekap Pembiasaan”: Menampilkan 7 baris kebiasaan. Kolom untuk tiap status (Sudah, Cukup, Belum) dibagi 2: “Jumlah Anak” dan “Persentase (%)”. Beri warna hijau untuk Sudah Terbiasa, Kuning untuk Cukup, Merah untuk Belum.

3. HALAMAN ORANG TUA (Tab 3)

– Form Login (NIS Anak & Password dari sheet Data Siswa).

– Jika sukses, tampilkan nama & kelas anak, dan riwayat laporan milik NIS tersebut (urut dari terbaru).

– Terdapat Filter Per Minggu menggunakan Input type=”week” (Format YYYY-Www).

– Tiap riwayat laporan menampilkan badge kebiasaan, teks keterangan anak, dan kotak alert khusus untuk Respons/Catatan Guru.

INSTRUKSI KODE:

Berikan struktur kode utuh, bersih, dan menggunakan try-catch untuk anti-error:

1. File ‘Kode.gs’ (Seluruh fungsi backend GAS, pastikan format tanggal aman dari bug timezone GAS).

2. File ‘Index.html’ (Satu file utuh gabungan HTML, CSS, dan JS Frontend).

akan menghasilkan :

1. File Backend: Kode.gs

Kode ini menangani routing, integrasi database dengan Google Sheets, dan memvalidasi setiap proses menggunakan blok try-catch. Pastikan Anda telah membuat spreadsheet dengan nama Sheet yang sama persis (Data Siswa, Guru, Laporan).

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('G7KAIH App')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
}

dst (ini hanya contoh code hasil dari gemini)

2. File Frontend: Index.html

Kode HTML ini sudah merangkum elemen struktur, styling antarmuka, dan seluruh proses manipulasi client-side seperti login, filter real-time, hingga rendering badge dinamis secara efisien di perangkat seluler.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Aplikasi G7KAIH</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  
  <style>
    /* CSS RESET & MOBILE SIMULATOR */
    body {
     
dst (ini hanya contoh code hasil dari gemini)

Selanjutnya mulai

Langkah 1: Menyiapkan Database di Google Sheets

Google Sheets akan bertindak sebagai “otak penyimpan” dari aplikasi kita. Semua data siswa, akun login, hingga laporan harian akan bermuara dan tersimpan dengan rapi di sini. Sangat penting bagi kita untuk menamai setiap bagian dengan tepat, karena kode aplikasi nanti akan mencari data berdasarkan nama-nama tersebut.

File contoh di : https://docs.google.com/spreadsheets/d/1y5xJkVPmPU6_bGBsViG0TkkI8ls8ZweGOiewKDH77HU/edit?usp=sharing

Mari kita ikuti panduannya langkah demi langkah:

A. Membuat File Google Sheets Baru

  1. Buka browser di laptop/komputer Anda, lalu masuk ke Google Drive (drive.google.com) menggunakan akun Google/Belajar.id Bapak/Ibu.
  2. Klik tombol + Baru (atau + New) di pojok kiri atas.
  3. Pilih Google Spreadsheet > Spreadsheet kosong.
  4. Di pojok kiri atas (tempat yang bertuliskan “Spreadsheet tanpa judul”), klik dan ganti namanya menjadi: Database G7Kaih

B. Membuat 3 Lembar Kerja (Sheet) Utama

Secara otomatis, file Bapak/Ibu hanya akan memiliki satu sheet (lembar) di bagian bawah yang bernama “Sheet1”. Kita perlu mengubah namanya dan menambahkan dua sheet lagi sehingga totalnya ada 3.

PENTING: Pastikan ejaan, spasi, dan huruf besar/kecilnya sama persis seperti panduan di bawah ini agar aplikasi tidak error.

  1. Klik kanan pada tulisan “Sheet1” di bagian kiri bawah layar, pilih Ganti nama, lalu ketik: Data Siswa (tekan Enter).
  2. Klik tanda + (Tambahkan sheet) di pojok kiri bawah untuk membuat sheet baru. Ganti namanya menjadi: Guru.
  3. Klik tanda + sekali lagi, lalu ganti nama sheet ketiga tersebut menjadi: Laporan.

C. Membuat Kolom (Header) di Masing-masing Sheet

Sekarang, mari kita isi baris pertama pada masing-masing sheet sebagai “Judul Kolom” (Header).

1. Buka sheet “Data Siswa”, lalu ketik judul berikut secara berurutan di Baris 1 (dari kolom A sampai E):

  • Kolom A1: NIS
  • Kolom B1: Nama Siswa
  • Kolom C1: Kelas
  • Kolom D1: Nama Bapak
  • Kolom E1: Password .

2. Buka sheet “Guru”, lalu ketik judul berikut di Baris 1:

  • Kolom A1: Nama Guru
  • Kolom B1: Password (Silakan isi baris kedua dan seterusnya dengan nama dan password rekan-rekan guru yang akan menggunakan aplikasi ini. Contoh: Nama Guru : Nurul Password :  guru123).

3. Buka sheet “Laporan”, lalu ketik judul berikut di Baris 1 (dari kolom A sampai O). Sheet ini akan berisi banyak kolom:

  • Kolom A1: Timestamp
  • Kolom B1: Tanggal
  • Kolom C1: NIS
  • Kolom D1: Nama Siswa
  • Kolom E1: Kelas
  • Kolom F1: Bangun pagi
  • Kolom G1: Beribadah
  • Kolom H1: Berolah Raga
  • Kolom I1: Makan Sehat dan Bergizi
  • Kolom J1: Gemar Belajar
  • Kolom K1: Bermasyarakat
  • Kolom L1: Tidur Cepat
  • Kolom M1: Keterangan
  • Kolom N1: Status
  • Kolom O1: Catatan Guru

💡 Tips Tambahan (Membekukan Baris Header): Agar judul kolom (Baris 1) tidak ikut tergulung (scroll) saat data nantinya sudah ribuan, kita bisa “membekukan” baris tersebut. Caranya: Klik Baris 1 (angka 1 di sebelah kiri) agar tersorot > Klik menu Tampilan di atas > pilih Bekukan > klik 1 baris. Ulangi langkah ini untuk ketiga sheet.

Selamat! Fondasi database aplikasi G7Kaih Bapak/Ibu sudah siap sempurna.

Langkah 2: Memasukkan Kode Program (Google Apps Script)

Setelah database kita siap, sekarang saatnya kita memasukkan “mesin” dan “tampilan” aplikasi menggunakan Google Apps Script. Di sini kita akan membagi program menjadi dua bagian: Kode.gs (sebagai mesin belakang yang mengatur data) dan Index.html (sebagai wajah aplikasi yang akan dilihat siswa di HP).

Mari kita ikuti langkah-langkah di bawah ini:

A. Membuka Jendela Google Apps Script

  1. Pastikan Bapak/Ibu masih membuka file Google Sheets “Database G7Kaih” yang dibuat pada Langkah 1.
  2. Pada menu bagian atas, klik menu Ekstensi (atau Extensions).
  3. Pilih dan klik Apps Script.
  4. Sebuah tab baru akan terbuka di browser Anda. Ini adalah halaman editor tempat kita menaruh kode aplikasi.
  5. Di pojok kiri atas halaman tersebut, ubah tulisan “Proyek tanpa judul” menjadi: Aplikasi G7Kaih.

B. Mengisi File Kode.gs (Mesin Aplikasi)

Secara default, Google sudah menyiapkan satu file bernama Kode.gs yang berisi beberapa baris kode kosong (function myFunction() { … }).

  1. Hapus seluruh kode bawaan yang ada di dalam file Kode.gs tersebut hingga bersih (kosong sama sekali).
  2. Ambil seluruh kode dari bagian 1. File Backend: Kode.gs – Hasil dari hemini
  3. Copy (Salin) seluruh kode tersebut, lalu Paste (Tempel) ke dalam file Kode.gs yang kosong tadi.

C. Membuat dan Mengisi File Index.html (Tampilan Aplikasi)

Sekarang kita perlu membuat file kedua untuk menampung desain tampilan aplikasi agar responsif di layar HP.

  1. Perhatikan kolom sebelah kiri pada layar Apps Script (di bawah tulisan “File”). Ada tanda plus (+) di samping tulisan “File”.
  2. Klik tanda plus (+) tersebut, lalu pilih HTML.
  3. Kotak kecil akan muncul meminta nama file. Ketik nama: Index (Cukup ketik Index saja dengan huruf ‘I’ besar, tidak perlu menambah tulisan .html karena sistem akan membuatnya otomatis). Tekan Enter.
  4. Sekarang Bapak/Ibu akan melihat file baru bernama Index.html telah terbentuk.
  5. Sama seperti sebelumnya, hapus semua kode bawaan yang ada di dalam file Index.html tersebut sampai bersih.
  6. Ambil seluruh kode dari bagian 2. File Frontend: Index.html (yang berisi kode HTML, Bootstrap, dan JavaScript Hasil dari gemini).
  7. Copy (Salin) seluruh kode tersebut, lalu Paste (Tempel) ke dalam file Index.html yang kosong.

D. Menyimpan Seluruh Kode

Ini adalah bagian krusial agar kode yang sudah kita tempel tidak hilang.

  1. Perhatikan ikon-ikon di bagian atas editor kode.
  2. Klik ikon Cakram Flopi / Save (ikon berbentuk disket hitam) untuk menyimpan proyek Anda. Alternatifnya, Bapak/Ibu bisa menekan tombol Ctrl + S di keyboard (atau Cmd + S jika menggunakan Mac).
  3. Pastikan tanda titik oranye di samping nama file Kode.gs dan Index.html sudah hilang, yang menandakan bahwa semua file telah sukses tersimpan.

⚠️ Catatan Penting untuk Diperiksa Kembali:

  • Pastikan nama file HTML Anda adalah Index (menggunakan huruf ‘I’ kapital). Jika ditulis index (huruf kecil), mesin di Kode.gs tidak akan bisa memanggil tampilannya dan aplikasi akan memunculkan pesan error.
  • Jangan mengubah satu karakter pun dari kode yang ditempel kecuali Bapak/Ibu sudah memahami fungsinya, karena salah menghapus satu tanda koma atau tanda kurung saja bisa membuat aplikasi macet.

Luar biasa! Proses pengodean sudah selesai kita lakukan. Langkah terakhir adalah mengaktifkan aplikasi ini agar bisa menghasilkan link (URL) resmi yang dapat dibuka dari HP siapa saja.

Mari kita lanjut ke

Berikut adalah draf untuk Langkah 3: Meluncurkan Aplikasi (Deployment). Tahap ini sangat penting karena kita akan mengubah barisan kode tadi menjadi sebuah link (URL) yang bisa diakses layaknya aplikasi web pada umumnya.

Langkah 3: Meluncurkan Aplikasi (Deployment)

Selamat, Bapak/Ibu Guru! Kita sudah sampai di langkah terakhir. Ibarat memasak, bahan-bahan dan resepnya sudah kita olah, dan sekarang saatnya kita “menghidangkan” aplikasi ini agar bisa digunakan oleh siswa, guru, dan orang tua melalui smartphone mereka.

Proses ini disebut Deployment (Peluncuran). Mari kita ikuti langkah-langkahnya:

A. Memulai Proses Deployment

  1. Di halaman editor Google Apps Script yang masih terbuka, perhatikan pojok kanan atas layar.
  2. Klik tombol berwarna biru bertuliskan Terapkan (atau Deploy).
  3. Dari menu kecil yang muncul, pilih Deployment baru (atau New deployment).

B. Mengatur Setelan Aplikasi Web

Sebuah kotak dialog bernama “Deployment baru” akan muncul. Di sini kita akan mengatur siapa saja yang boleh mengakses aplikasi kita.

  1. Di sebelah tulisan “Pilih jenis” (Select type), klik ikon roda gigi ⚙️, lalu centang Aplikasi web (Web app).
  1. Pada kolom Deskripsi (Description), Bapak/Ibu bisa mengetik: Versi 1 – G7Kaih.
  2. Di bagian Jalankan sebagai (Execute as), pastikan pilihannya adalah Saya (Me). (Ini sangat krusial agar siswa dan orang tua tidak perlu repot-repot login atau meminta izin akses ke Google Sheet kita).
  3. Di bagian Siapa yang memiliki akses (Who has access), klik kotak pilihannya dan ubah menjadi Siapa saja (Anyone).
  4. Jika sudah sesuai, klik tombol biru Terapkan (Deploy) di pojok kanan bawah kotak dialog.

C. Memberikan Izin Akses (Langkah Paling Penting)

Karena aplikasi ini akan membaca dan menulis data ke Google Sheets milik Bapak/Ibu, Google akan meminta konfirmasi keamanan. Jangan panik jika muncul peringatan warna merah/kuning, itu adalah prosedur standar Google.

  1. Kotak dialog akan memunculkan tulisan “Otorisasi diperlukan”. Klik tombol Berikan akses (Authorize access).
  1. Sebuah jendela baru akan muncul. Klik Akun Google/Belajar.id Bapak/Ibu yang sedang digunakan.
  2. Google mungkin akan menampilkan layar peringatan bertuliskan “Google belum memverifikasi aplikasi ini”. Di layar ini, klik tulisan kecil di bagian kiri bawah: Lanjutan (Advanced).
  3. Setelah itu, akan muncul teks tambahan di bawahnya. Klik tulisan: Buka Aplikasi G7Kaih SMPN 33 (tidak aman) / Go to Aplikasi G7Kaih (unsafe).
  4. Terakhir, gulir ke bawah dan klik tombol Izinkan (Allow).

D. Mendapatkan Link (URL) Aplikasi

  1. Setelah Bapak/Ibu mengklik “Izinkan”, layar akan memproses sebentar dan memunculkan tulisan Deployment berhasil diperbarui.
  2. Di bagian bawah kotak dialog tersebut, terdapat tulisan URL Aplikasi web beserta tautan panjang (link).
  3. Klik tombol Salin (Copy) yang ada di bawah link tersebut.
  4. Klik Selesai (Done).

🎉 Selamat! Aplikasi G7Kaih Resmi Berjalan! 🎉

Link yang Bapak/Ibu salin tadi adalah link sakti aplikasi kita. Cobalah buka tab baru di browser laptop atau kirim link tersebut ke WhatsApp Bapak/Ibu sendiri, lalu buka melalui layar HP.

Bapak/Ibu akan melihat tampilan aplikasi G7Kaih yang sudah siap digunakan. Siswa kini bisa memilih nama mereka, mencentang kebiasaan baik, dan menekan tombol simpan, di mana datanya akan langsung mengalir secara real-time ke file Google Sheets yang sudah kita buat di Langkah 1.

Tips Pasca-Peluncuran: Link asli dari Google Apps Script biasanya sangat panjang dan sulit dihafal (contoh: https://script.google.com/macros/s/AKfycbxWOVNNbuF0d0AirNu7iqtyLY27T_UlK9ZsKyV1suL7iQdC3JO7hvr_4MwnVCXhwhKRXQ/exec). Agar terlihat lebih profesional dan mudah dibagikan ke grup WhatsApp paguyuban wali murid atau siswa, Bapak/Ibu bisa memperpendek link tersebut menggunakan layanan gratis seperti bit.ly atau s.id (contoh menjadi: bit.ly/G7Kaih-SMPN33). Tutorial untuk membuat s.id bisa di https://lpmp.net/konsep-otomatis/ 

Dengan cara sederhana, kita bisa membuat aplikasi yang cukup powerfull untuk kemudahan kita. Aplikasi contoh diatas masih sangat sederhana, masih perlu banyak ditambah fungsi, kita bisa membuat ulang dengan memperbaiki prompt dan membuat database google sheet yang baru atau memperbaiki dengan menambahi prompt di percakapan yang ada. Misalkan kita ingin menambahkan fungsi rekap di halaman guru,

masukan di prompt

maka gemini akan menghasilkan script gs dan html yang baru, hapus isi yang lama ganti dengan yang baru. Misalkan aplikasi tidak berjalan jangan sungkan komplain ke gemini

“masih error, buat ulang dari awal”

Selamat, Bapak/Ibu Guru yang luar biasa! Jika Anda telah sampai di halaman ini dan berhasil memunculkan link aplikasi Anda sendiri, maka Anda baru saja melakukan sebuah pencapaian yang hebat. Anda telah berhasil menyulap barisan kode dan lembaran spreadsheet kosong menjadi sebuah sistem Aplikasi G7Kaih (7 Kebiasaan Baik) yang siap pakai.

Proses dari Langkah 1 hingga Langkah 3 mungkin terasa menantang, terutama jika ini adalah pengalaman pertama Bapak/Ibu bersentuhan dengan coding dan Google Apps Script. Namun, dedikasi Bapak/Ibu untuk belajar dan mencoba adalah bukti nyata semangat inovasi demi kemajuan peserta didik kita.

Lebih dari Sekadar Aplikasi Rekapitulasi

Mari kita ingat kembali tujuan utama kita. Aplikasi G7Kaih yang baru saja kita bangun bukanlah sekadar alat untuk menyingkirkan tumpukan kertas. Lebih dari itu, aplikasi ini adalah:

  • Jembatan Sinergi: Membuka transparansi antara sekolah dan rumah. Orang tua kini bisa langsung melihat perkembangan karakter anaknya setiap minggu, sementara guru bisa memberikan apresiasi atau catatan yang langsung terbaca oleh wali murid.
  • Katalisator Kedisiplinan: Dengan kemudahan mengisi dari layar HP (yang sangat ramah pengguna), siswa akan merasa lebih termotivasi dan bertanggung jawab untuk melaporkan kebiasaan baik mereka setiap hari.
  • Asisten Cerdas Guru: Fitur “Rekap Bulanan” yang secara otomatis menghitung persentase kebiasaan berdasarkan jenis kelamin dan indikator pembiasaan akan menghemat berjam-jam waktu rekapitulasi Bapak/Ibu Guru di akhir bulan.

Langkah Selanjutnya: Implementasi dan Konsistensi

Aplikasi yang hebat akan memberikan dampak maksimal jika digunakan secara konsisten. Berikut adalah beberapa langkah tindak lanjut yang bisa Bapak/Ibu lakukan:

  1. Bagikan Link Aplikasi: Distribusikan URL (link) aplikasi yang sudah Bapak/Ibu buat ke grup WhatsApp kelas atau paguyuban orang tua. Jangan lupa berikan panduan singkat cara menggunakannya.
  2. Pantau dan Apresiasi: Luangkan waktu 5-10 menit setiap hari atau di akhir minggu untuk melihat dashboard Guru. Berikan “Catatan Guru” yang menguatkan (misalnya: “Hebat, pertahankan bangun paginya!”) dan klik “Setuju Semua” untuk memvalidasi laporan siswa.
  3. Gunakan Data untuk Evaluasi: Manfaatkan fitur Rekap Bulanan saat rapat evaluasi wali kelas. Data tersebut kini bukan lagi sekadar angka, melainkan peta jalan untuk mengetahui area kebiasaan mana yang perlu ditingkatkan secara klasikal di Sekolah

Pendidikan karakter memang bukan proses instan yang bisa diukur dalam semalam. Ia butuh pembiasaan, pemantauan, dan keteladanan. Dengan G7Kaih, kita telah memodernisasi cara kita memantau proses tersebut, menjadikannya lebih mudah, akurat, dan terukur.(Abi)

Contoh Aplikasi lain yang bisa kita buat :

Tindak sebagai Ahli Web Developer dan Google Apps Script (GAS). Tolong buatkan kode lengkap untuk Aplikasi Web "Form Pendaftaran" yang terintegrasi dengan Google Spreadsheet dan Google Drive.

Aplikasi ini membutuhkan 2 file:
1. `Code.gs` (sebagai backend)
2. `Index.html` (sebagai frontend antarmuka pengguna)

**Spesifikasi Form & Kolom Data:**
Formulir harus memiliki input berikut yang nantinya akan disimpan ke dalam Google Spreadsheet dari kolom A sampai H:
1. Timestamp (Waktu submit, otomatis dari backend)
2. Nama Lengkap (Teks)
3. NIP (Teks/Angka)
4. Asal Instansi (Teks)
5. No. WhatsApp (Teks/Angka)
6. Email (Email)
7. Kota/Kabupaten (Dropdown, khusus seluruh 35 kabupaten dan kota di provinsi Jawa Tengah, Indonesia)
8. TTD (Fitur Tanda Tangan Digital)

**Persyaratan Khusus Fitur:**
- **Dropdown Kota/Kabupaten:** Untuk menghindari kode HTML terpotong karena terlalu panjang, JANGAN menuliskan tag <option> satu per satu di HTML. Gunakan JavaScript array di dalam file Index.html untuk membuat list 35 Kabupaten/Kota di Jawa Tengah, lalu gunakan looping untuk memasukkannya ke elemen <select>.
- **Fitur Tanda Tangan (TTD):** Gunakan library eksternal `signature_pad` (via CDN). Sediakan area Canvas yang responsif agar user bisa tanda tangan di layar sentuh (HP) maupun mouse. Berikan juga tombol "Hapus TTD" jika user ingin mengulang.
- **Penyimpanan TTD:** Saat disubmit, ubah canvas tanda tangan menjadi data base64 (gambar PNG). Kirim data ini ke backend `Code.gs`. Di `Code.gs`, decode base64 tersebut, jadikan file gambar PNG, dan simpan ke folder Google Drive menggunakan Folder ID.
- **Penyimpanan Spreadsheet:** Setelah gambar tersimpan di Drive, ambil URL gambar tersebut, dan simpan bersama data teks lainnya (Nama, NIP, dll) sebagai baris baru di Spreadsheet yang aktif.

**Persyaratan Desain (UI/UX):**
- Desain harus rapi, modern, dan mobile-friendly (responsive).
- Gunakan CSS internal di dalam file `Index.html`.
- Berikan state "Mengirim..." pada tombol submit saat proses berjalan, dan ubah menjadi pesan sukses jika data berhasil masuk.
- Cegah user mengirim form jika ada field yang kosong atau jika tanda tangan masih kosong.

Berikan kodenya secara utuh (Code.gs dan Index.html) beserta panduan singkat cara deploy dan setup ID Folder Drive-nya.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses