Contoh Web App “Survey Gang”

Padangsidimpuan, 30 Mei 2026

Hasil Pembuatan aplikasi saya berdasarkan kode yang ada dapat anda lihat di Survey Gang. Namun jika anda telah membuat sendiri silahkan gunakan URL yang sudah anda miliki untuk login sesuai data di google spreadsheet Anda. Anda tidak akan bisa login di URL milik saya dengan data user Anda sendiri.

Survey Gang?.

Web app survey gang ini tidak dibuat sebagaimana kebutuhan “Real” di lapangan untuk kebutuhan Kota Padangsidimpuan, meski mungkin sangat mirip dengan kebutuhan “minimal”. Web App ini hanyalah sebatas model “contoh” adanya peran Surveyor untuk pendataan dan peran Admin dalam mendaftarkan petugas yang akan melakukan pendataan gang ke dalam data dan memiliki hak akses. Nantinya halaman Admin dan Surveyor akan berbeda fungsi dan tampilan. Bagi Anda yang membuat aplikasi-lah yang akan melihat secara langsung hasilnya. Namun, jika anda melihat langsung contoh hasil web yang saya, Anda hanya akan berhasil “mendarat” di Halaman LOGIN, karena tidak memiliki akses masuk.

Disclaimer.

Sebagaimana web app Survey LPJU yang saya buat sebelumnya, Web app ini juga tidak berafiliasi dengan instansi yang mengemban tugas terkait Gang di Kota Padangsidimpuan atau Instansi manapun di Indonesia. Tulisan ini masih bagian dari my way to expand my creativity. Tulisan ini juga memanfaatkan “geo-location” dari GPS mobile handphone Surveyor dan disajikan dengan bantuan fasilitas peta “Leaflet” yang di “lock” secara khusus menggunakan Koordinat Area “Kota Padangsidimpuan”. Ada 2 peran dalam web aplikasi ini yakni; (1)Admin, dan (2)Surveyor.

Langkah pembuatan web app.

  1. New File Google Spreadsheet. Buatlah sebuah Google Spreadsheet Baru dan beri nama (nama file terserah Anda).
  2. Ganti Sheet 1 menjadi Users, kemudian buat 2 sheet baru bernama Wilayah dan Gang.
  3. Sheet Users terdiri dari Kolom (1)UID, (2)username, (3)password, (4)role, data didalamnya hanya akan berisi Admin atau Surveyor dan (5)nama.
  4. Sheet Wilayah terdiri dari Kolom (1)Kecamatan, dan (2)Kelurahan. Silahkan isi data Kecamatan dan Kelurahan di Kota Padangsidimpuan (saya mengisinya secara manual dan Anda dapat meng-“copy”-nya di Link ini.
  5. Sheet “Gang” terdiri dari Kolom (1)idgang, (2)namagang, (3)titikkoordinat, (4)foto, (5)kategori, (6)pengirim, (7)tanggal, (8)kecamatan, (9)kelurahan.
  6. Pastikan agar file google spreadsheet anda telah di-Simpan.
  7. Cari menu Ekstensi, klik dan kemudian pilih Apps Script.
  8. Anda akan dibukakan “Tab” baru / Halaman baru yang merupakan halaman pengalihan ke Aplikasi Google Apps Script Editor.
  9. Klik Kode.gs (sebagian akan melihat Code.gs di bagian kiri, tergantung bahasa akun google Anda). Hapus semua kode bawaan yang ada di dalam Kode.gs dan ganti dengan code dari file Code.gs.

Berbeda dengan tulisan saya tentang Contoh Web App Survey LPJU sebelumnya, kali ini, Anda tidak perlu menambahkan SPREADSHEET_ID_ANDA, karena dalam code kali ini, setiap fungsi yang membutuhkan koneksi telah saya tambahkan code khusus yang berbunyi const ss = SpreadsheetApp.getActiveSpreadsheet();. Kode tersebut ada disetiap fungsi yang membutuhkan koneksi dengan file google spreadsheet sehingga anda tidak perlu mencari ID Spreadsheet anda dan menambahkannya ke code.gs, selama anda membuka Apps Script secara langsung dari file di menu Google Spreadsheet Anda yang aktif (atau mengikuti tahapan ini satu persatu).

  1. Kembali ke halaman Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama Index. Pada halaman Index.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file Index.html.
  2. Jangan lupa, simpan seluruh perubahan Kode.gs dan Index.html. (Klik gambar disket floppy atau tekan tombol Ctrl + S di keyboard Anda dan beri nama file Apps Script Anda.
  3. Masih di halaman Apps Script, klik tombol Terapkan (Deploy) di kanan atas > Pilih Terapkan baru (New Deployment).
  4. Klik ikon roda gigi (Jenis konfigurasi) > Pilih Aplikasi web.
  5. Lakukan pengisian dan pengaturan di jendela yang muncul sebagai berikut :
  • Deskripsi : versi 1.0 (bisa anda namai secara bebas).
  • Jalankan sebagai: Diri Anda sendiri (Email Anda).
  • Yang memiliki akses: Pilih Siapa saja / Anyone (agar pengguna lain/HP lain bisa membuka tautan login).
  1. Klik Terapkan.
  2. Sistem akan meminta otorisasi akses data spreadsheet Anda pertama kali. Pilih akun Google Anda, klik Advanced / Lanjutan > Klik Go to… (unsafe) / Buka… (tidak aman), lalu klik Allow / Izinkan.
  3. Setelah sukses, Anda akan mendapatkan URL Aplikasi Web. Salin URL tersebut dan jalankan di browser laptop atau handphone Anda.

Testing Web App.

Ikuti tahapan berikut ini :

Lakukan pengisian secara langsung di Spreadsheet (Sheet Users) untuk akun Admin dan Surveyor, karena kode tidak menanamkan akun Admin dan Surveyor dan harus dibuat secara manual di Spreadsheet. Contoh :

(1) UID (USR0001), username (admin@gmail.com), password (123456), role (Admin), nama (Administrator)

(2) UID (USR0002), username (surveyor@gmail.com), password (123456), role (Surveyor), nama (Petugas 1)

Data ini hanya contoh, modifikasi sesuai kebutuhan Anda.

  1. Untuk menguji apakah web ini berfungsi, anda harus menambahkan 2 user Pertama di Sheet Users untuk pengujian. 1 User Admin dan 1 User Surveyor.
  2. Buka URL yang sudah anda Deploy hingga muncul halaman Login. Login-lah menggunakan akun Admin yang telah anda buat, pastikan username dan password-nya tidak salah. Silahkan uji seluruh halaman yang bisa Anda buka.
  3. Buka kembali URL-nya atau logout dari Akun Admin sebelumnya dan masukkan akun Surveyor. Silahkan lakukan pengujian di halaman yang bisa anda akses.

Jika terjadi masalah dalam pembuatan atau pengujian.

Selaku penulis saya tidak menyediakan layanan tanya jawab dan tidak menyediakan forum diskusi. Hal ini karena saya memang hanya menunjukkan sebagian dari tahapan yang saya lakukan untuk pembuatan Contoh Web App Survey Gang ini.

Informasi lain.

  1. Silahkan gunakan dan modifikasi code yang ada sesuai kebutuhan jika Anda memiliki kemampuan Google Apps Script Developer. Seluruh code yang ada di dalam dan/atau dikaitkan dengan tulisan ini bersifat gratis dan tidak mengikat. Oleh sebab itu, segala KEUNTUNGAN DAN KERUGIAN penggunaan, pemanfaatan dan sebagainya di luar tanggung jawab saya selaku penulis.
  2. Koordinat yang muncul di peta akan tergantung dengan ke-akurat-an data titikkoordinat yang Anda input menggunakan handphone surveyor. Juga tergantung dengan “data load” yang mampu ditampung oleh fasilitas yang ada (seperti leafleat).
  3. Selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya (tidak hanya tulisan ini) di blog ini sebagaimana Anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.

Gambar View ID “Admin”

Gambar View ID “Surveyor”

Scroll to Top