IHT AI × GAS
Masdiyono Oget
1/1
IN HOUSE TRAINING • PEMBUATAN APLIKASI DENGAN AI
GOOGLE APPS SCRIPT × AI

Membuat
Aplikasi dengan AI

Dari ide sederhana menjadi aplikasi web yang dapat digunakan sekolah — langsung dari browser.

Tanpa instalasiChatGPT / GeminiGoogle SpreadsheetGAS Web App
MO
Masdiyono Oget
Operator Dapodik & Pengembang Website dan Aplikasi Sekolah
6+ tahun pengembangan • 17+ aplikasi sekolah
Pemateri • Masdiyono Oget · Operator Dapodik SMA Negeri 1 Sekayam
01 • PERKENALAN PEMATERI
MO

Masdiyono Oget

Operator Dapodik & Pengembang Website dan Aplikasi Sekolah

Pengembang website dan aplikasi yang berfokus pada digitalisasi administrasi dan kebutuhan sistem informasi sekolah sejak 2020.

6+Tahun pengembangan
17+Aplikasi sekolah
4+Tahun Operator Dapodik
SD–SMKJenjang pengguna

Ringkasan ini disusun dari Curriculum Vitae Masdiyono Oget.

02 • PENGALAMAN

Berangkat dari kebutuhan nyata sekolah

2020Pengembang Website & Aplikasi

Mengembangkan website dan aplikasi pendidikan berdasarkan kebutuhan pengguna.

2022 — SEKARANGOperator Dapodik — SMA Negeri 1 Sekayam

Mengelola data dan administrasi pendidikan, website sekolah, serta membantu digitalisasi kebutuhan sekolah.

“Aplikasi yang baik bukan yang paling rumit, tetapi yang menyelesaikan masalah penggunanya.”

03 • PORTOFOLIO

Beberapa proyek unggulan

01TU + Jurnal + Absensi + NilaiSMAN 1 Rasau Jaya
02TU & Manajemen Data SekolahSMAN 2 Tebas & SMPN 1 Tarakan
03Jurnal Guru & Wali KelasSMKS Trampil Jakarta & SMPN 2 Kawedanan
04Perpustakaan ModernBerbagai sekolah
05Website MTQ Kabupaten SanggauKecamatan Sekayam • 2025
Data proyek diringkas dari CV pemateri.
04 • KOMPETENSI

Teknologi yang digunakan

Google Apps ScriptJavaScriptHTML & CSSPHP Google DriveGoogle WorkspaceAIWordPress DatabaseWebsite SekolahSistem Informasi PendidikanDigitalisasi Administrasi
05 • PEMBUKA
“Kalau saya tidak bisa coding,
apakah saya tetap bisa membuat aplikasi?
Hari ini kita buktikan. 🚀
06 • TARGET IHT

Hari ini kita tidak sekadar belajar teori

💡Punya ide

Menentukan masalah yang ingin diselesaikan.

📝Bisa memberi instruksi

Menyusun prompt yang jelas untuk AI.

⚙️Bisa membangun

Menghubungkan AI, GAS, dan Spreadsheet.

🚀Bisa deploy

Menghasilkan Web App yang dapat dibuka.

07 • TOOLS

Yang dibutuhkan: cukup browser

🌐BrowserChrome / Edge
🤖AIChatGPT / Gemini
☁️DriveGoogle Drive
📊DataSpreadsheet
⚙️GASApps Script
Tanpa VS Code • Tanpa XAMPP • Tanpa Node.js • Tanpa database server • Tanpa hosting sendiri
08 • KONSEP

Apa itu Google Apps Script?

Platform berbasis JavaScript milik Google untuk mengotomatisasi layanan Google dan membangun aplikasi web.

📊 Spreadsheet
⚙️ Apps Script
🌐 Web App
09 • ARSITEKTUR

Satu ekosistem, beberapa komponen

🤖ChatGPT / GeminiIde • Prompt • Kode • Debugging
⚙️Google Apps ScriptLogika aplikasi + Web App
📊Google SpreadsheetDatabase sederhana
10 • PERAN AI

AI menjadi coding assistant

🧱Membangun

Struktur aplikasi, HTML, CSS, JS, dan Apps Script.

🐞Debugging

Membaca error dan membantu mencari penyebab.

Iterasi

Menambahkan fitur tanpa selalu mulai dari nol.

AI membantu menulis kode. Kita tetap menentukan kebutuhan, menguji, dan memvalidasi.

11 • WORKFLOW

Inilah perjalanan aplikasi kita

💡 IDE📝 PROMPT🤖 AI💻 KODE📊 DATA🧪 TEST🚀 DEPLOY

Jangan mulai dari kode. Mulai dari masalah.

12 • PROMPT

Rahasia utama: jangan biarkan AI menebak

Buat aplikasi data siswa.

AI harus menebak kebutuhan kita.

Buat Web App GAS untuk admin sekolah dengan Spreadsheet sebagai database, CRUD siswa, pencarian, pagination, dan tampilan mobile-first.

AI mendapat konteks yang jelas.

13 • FORMULA PROMPT

Gunakan formula sederhana

PERAN+TUJUAN+TEKNOLOGI+FITUR+DATABASE+TAMPILAN+ATURAN
Prinsip: semakin penting sesuatu dalam aplikasi, semakin spesifik instruksinya.
14 • STUDI KASUS

Kita akan membuat Aplikasi Data Siswa

Aplikasi Data Siswa + Tambah Siswa
328
Total Siswa
12
Rombel
164
Laki-laki
164
Perempuan
NISN  Nama Siswa     Kelas  JK

0054  Andi Pratama    X-A  L
0055  Siti Rahma     X-A  P
0056  Budi Santoso    X-B  L
15 • SPESIFIKASI

Sebelum coding, tentukan kebutuhan

PENGGUNAAdmin Sekolah
TUJUANMengelola data siswa
DATABASEGoogle Spreadsheet
TAMPILANModern + Mobile-first
DashboardTambahEditHapusPencarianPagination
16 • DATABASE

Rancang struktur data

KolomFungsiContoh
IDIdentitas unikSTU-0001
NIS / NISNNomor siswa1001 / 00...
NamaNama lengkapAndi Pratama
JK / KelasProfilL / X-A
CreatedAt / UpdatedAtJejak perubahan2026-08-31
17 • PRAKTIK

Buat folder di Google Drive

📁 IHT AI — Aplikasi Data Siswa
📊 DB — Aplikasi Data Siswa
⚙️ APP — Manajemen Data Siswa
1 Buka Drive 2 Buat folder 3 Simpan semua komponen
18 • PRAKTIK

Buat Google Spreadsheet

📊 DB — Aplikasi Data Siswa
Siswa +
ID | NIS | NISN | Nama | JK | Kelas | Alamat | No HP | CreatedAt
STU-001 | 1001 | 123... | Andi | L | X-A | Sintang | 08... | ...

Buat Sheet bernama Siswa dan siapkan header database.

19 • PRAKTIK

Buat project Apps Script

1 Buka Spreadsheet
2 Extensions → Apps Script
3 Beri nama project
4 Siapkan file aplikasi
20 • STRUKTUR KODE

Pisahkan tanggung jawab file

⚙️ APP — Manajemen Data Siswa
📄 Code.gs Backend
📄 Index.html Halaman utama
📄 CSS.html Desain
📄 JavaScript.html Interaksi
21 • PROMPT KE AI

Berikan instruksi secara lengkap

Anda adalah developer Google Apps Script berpengalaman.

Buat aplikasi “Manajemen Data Siswa” untuk admin sekolah.
Gunakan Google Spreadsheet sebagai database.

Teknologi:
• Google Apps Script
• HTML, CSS, JavaScript

Fitur:
• Dashboard
• CRUD siswa
• Pencarian & pagination
• Responsive mobile-first

Sheet “Siswa”:
ID, NIS, NISN, Nama, Jenis Kelamin,
Kelas, Alamat, No HP, CreatedAt, UpdatedAt.

Pisahkan kode:
Code.gs | Index.html | CSS.html | JavaScript.html

Sebelum coding, analisis struktur aplikasi dan alurnya.
22 • COPY → PASTE

Dari AI ke Apps Script

🤖 AI
Generate
📋 COPY
Sesuai file
⚙️ GAS
Paste
Code.gs → Code.gs   |   Index.html → Index.html   |   CSS.html → CSS.html
23 • KONFIGURASI

Hubungkan aplikasi ke database

const SPREADSHEET_ID = 'ID_SPREADSHEET_ANDA';
const SHEET_NAME = 'Siswa';
🔒 Jangan membagikan password, token, API key, atau data pribadi/sensitif kepada AI.
24 • TESTING

Sebelum deploy, uji semuanya

25 • DEBUGGING

Error bukan akhir. Jadikan bahan belajar.

🐞 ERROR
📋 COPY
🤖 AI
🔧 FIX
🧪 TEST
Saya mendapat error berikut:
[PASTE ERROR]

Tolong analisis penyebabnya.
Pertahankan fitur lain yang sudah berjalan.
Berikan perbaikan kode yang lengkap.
26 • ITERASI

Tambahkan fitur secara bertahap

“Pertahankan semua fitur yang sudah berjalan. Tambahkan fitur …”
🔎 Filter Kelas📥 Export📊 Statistik🖨️ Cetak🔐 Login
27 • DEPLOY

Ubah project menjadi Web App

⚙️ Apps Script
Deploy
New deployment
🌐 Web app

Execute as: Me

Who has access: Sesuaikan kebutuhan

28 • HASIL

Dan sekarang… aplikasi online!

🌐 https://script.google.com/macros/s/XXXXXXXX/exec
💻 Laptop
📱 Smartphone
📟 Tablet
29 • TANTANGAN

Sekarang giliran Anda

Buat 1 aplikasi sederhana

Minimal: dashboard, database Spreadsheet, form input, tabel data, CRUD, pencarian, responsive, dan Web App.

🎯 Target: pulang membawa aplikasi yang sudah online.
30 • PENUTUP

Jangan mulai dari kode.
Mulai dari masalah.

Ide → Prompt → AI → Kode → Test → Deploy

Masdiyono OgetOperator Dapodik & Pengembang Website dan Aplikasi Sekolah
🚀 Selamat berkarya!
Tekan F untuk fullscreen