- 1. Pendahuluan
- 2. Apa itu Google Apps Script
- 3. Arsitektur Aplikasi
- 4. Persiapan Spreadsheet sebagai Database
- 5. Membuat Project Google Apps Script
- 6. Backend Apps Script
- 7. Membuat Form Input Data
- 8. Dashboard Melihat Data
- 9. Deploy Menjadi Web App
- 10. Contoh Tampilan Aplikasi
- 11. Pengembangan Fitur Lanjutan
- 12. Kesimpulan
1. Pendahuluan
Dalam banyak sistem informasi sederhana seperti:
- aplikasi absensi
- input data pelanggan
- input data penelitian
- pengumpulan data survey
kita membutuhkan sistem input data yang cepat dan mudah dibuat.
Salah satu solusi terbaik adalah menggunakan Google Apps Script yang dapat langsung terhubung dengan Google Spreadsheet sebagai database.
Keuntungan pendekatan ini:
✔ Tidak perlu server hosting
✔ Database langsung menggunakan Google Sheets
✔ Bisa dibuat menjadi web app
✔ Gratis dan cepat dibuat
Dalam artikel ini kita akan membuat aplikasi web sederhana yang memiliki fitur:
- Form input data
- Penyimpanan otomatis ke Spreadsheet
- Dashboard untuk melihat data
2. Apa itu Google Apps Script
Google Apps Script adalah platform scripting berbasis JavaScript yang memungkinkan kita mengotomatisasi berbagai layanan Google seperti:
- Google Sheets
- Google Docs
- Gmail
- Google Drive
- Google Forms
Dengan Apps Script kita bisa membuat:
- Web App
- Sistem absensi
- Sistem input data
- Dashboard laporan
- Automasi email
Apps Script menggunakan JavaScript berbasis server Google sehingga kita tidak perlu membuat backend sendiri.
3. Arsitektur Aplikasi
Struktur aplikasi yang akan kita buat:
User (Browser)
│
│ Form Input
▼
Google Apps Script (Backend)
│
▼
Google Spreadsheet (Database)
│
▼
Dashboard Web
Fitur utama:
- Form input data
- Data tersimpan otomatis
- Dashboard menampilkan data
4. Persiapan Spreadsheet sebagai Database
Pertama buat Google Spreadsheet baru
Contoh nama:
Database Input Data
Buat tabel seperti berikut:
| Timestamp | Nama | Kota |
|---|
Sheet diberi nama:
DATA
Spreadsheet ini akan menjadi database aplikasi.
5. Membuat Project Google Apps Script
Buka:
Extensions
→ Apps Script
Buat file berikut:
Code.gs
index.html
dashboard.html
6. Backend Apps Script
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}function simpanData(data) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DATA");
sheet.appendRow([
new Date(),
data.nama,
data.email,
data.kota
]);
return "Data berhasil disimpan";
}function getData(){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DATA");
return sheet.getDataRange().getValues();
}
7. Membuat Form Input Data
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{
font-family: Arial;
padding:40px;
} input{
width:100%;
padding:10px;
margin:8px 0;
} button{
padding:10px;
background:#2c7be5;
color:white;
border:none;
}
</style>
</head><body><h2>Form Input Data</h2><input type="text" id="nama" placeholder="Nama"><input type="email" id="email" placeholder="Email"><input type="text" id="kota" placeholder="Kota"><button onclick="simpan()">Simpan</button><p id="status"></p><script>function simpan(){var data = {
nama: document.getElementById("nama").value,
email: document.getElementById("email").value,
kota: document.getElementById("kota").value
};google.script.run.withSuccessHandler(function(res){
document.getElementById("status").innerHTML = res;
}).simpanData(data);}</script></body>
</html>
8. Dashboard Melihat Data
dashboard.html
<!DOCTYPE html>
<html>
<head>
<style>table{
border-collapse:collapse;
width:100%;
}th,td{
border:1px solid #ddd;
padding:8px;
}</style>
</head><body><h2>Dashboard Data</h2><table id="tabel">
</table><script>function loadData(){google.script.run.withSuccessHandler(function(data){var html = "<tr>";data[0].forEach(function(col){
html += "<th>"+col+"</th>";
});html += "</tr>";for(var i=1;i<data.length;i++){html += "<tr>";for(var j=0;j<data[i].length;j++){
html += "<td>"+data[i][j]+"</td>";
}html += "</tr>";
}document.getElementById("tabel").innerHTML = html;}).getData();}loadData();</script></body>
</html>
9. Deploy Menjadi Web App
Langkah deploy:
Deploy
→ New Deployment
→ Web App
Setting:
Execute as: Me
Who has access: Anyone
Klik Deploy
Anda akan mendapatkan URL aplikasi web.
10. Contoh Tampilan Aplikasi
Form Input
Dashboard Data
11. Pengembangan Fitur Lanjutan
Aplikasi ini dapat dikembangkan menjadi sistem yang lebih kompleks seperti:
Login System
- Admin
- User
Upload Foto
disimpan ke Google Drive
Export Data
- Excel
Grafik Dashboard
- Chart.js
- Statistik data
Sistem CRUD
- Edit data
- Hapus data
- Update data
12. Kesimpulan
Google Apps Script memungkinkan kita membuat aplikasi web sederhana tanpa server dengan sangat cepat.
Dengan menghubungkan form input → Apps Script → Google Spreadsheet, kita bisa membangun sistem seperti:
- aplikasi absensi
- input data survey
- database pelanggan
- sistem administrasi
Kelebihan utama:
- cepat dibuat
- gratis
- integrasi penuh dengan Google Workspace
Pendekatan ini sangat cocok untuk:
- mahasiswa
- data analyst
- developer pemula
- bisnis kecil
yang membutuhkan sistem input data sederhana tetapi powerful.