Contoh Web App “Mapping Area”

Padangsidimpuan, 01 Juli 2026.

(Diedit kembali tanggal 02 Juli 2026).

Anda dapat melihat hasil web app saya di Link ini. Untuk merasakan fiturnya anda dapat Login menggunakan Username : “admin” dan Password : “adminku123”, TANPA TANDA KUTIP. Jika Anda telah menggunakannya, data yang Anda tambahkan akan masuk ke spreadsheet data saya, dan data yang Anda kirim TIDAK menjadi tanggung jawab saya. Saran saya lebih baik membuat sendiri sesuai kode yang ada, agar punya kontrol dengan data yang diinput. Sebagaimana DISCLAIMER saya di tiap “artikel”, harap dimaklumi. Setiap artikel saya dimaksudkan sebagai bahan pembelajaran bagi Anda dan saya. Saya terbebas dari segala permintaan, tuntutan, apalagi hutang Anda. Hehe..

Mapping Area (Updated : Click Based).

Yang dimaksud oleh penulis artikel ini dengan “Mapping Area” dan menjadikannya sebagai Judul Web App kali ini adalah Suatu kegiatan pencatatan titik-titik GPS suatu area (menggunakan fasilitas GPS Device User) dan menyusun data tersebut ke dalam suatu struktur data (di web app ini menjadi data POLYGON) yang akan digunakan dalam suatu model pelaporan model peta nantinya (Tunggu saja tulisan tentang WEB APP HASIL MAPPING AREA nantinya. Saat tulisan ini diterbitkan disini, web app HASIL MAPPING AREA masih DRAFT). Bahasa sederhananya adalah cara pemetaan garis berbentuk polygon suatu area yang disimpan ke spreadsheet untuk diolah kembali menjadi data atau visual lain nantinya. Misalkan, Anda ingin mendapatkan titik-titik tanah lapangan bola dalam bentuk titik-titik GPS dan menampilkan hasilnya ke dalam suatu web. Nah, tulisan ini sudah diedit sehari setelah diterbitkan. Saya telah mengubah cara kerja aplikasi menjadi model Click Based (berdasarkan titik area di peta yang di klik oleh user).

Kekurangan/Kelemahan Web App ini.

Selaku penulis, saya perlu mengingatkan adanya kekurangan/kelemahan dalam kode GRATIS kita kali ini, diantaranya ;

Tentunya, karena alat/device yang kita gunakan memiliki ketidak-akuratan (inaccuracy) di dalamnya, data yang Anda peroleh juga akan kurang akurasinya. Bagi sebagian GPS HP, akurasi bisa bergesar hingga beberapa meter. Namun, karena keterbatasan alat (ketiadaan Alat GPS khusus) dapat Anda atasi melalui web app ini, apalagi, jika Anda hanya membutuhkan data kasar, untuk mempermudah kegiatan di lapangan (Update : kelemahan ini kami coba atasi dengan mengubah model pengambilan data ke mode Click Based).
Password Disimpan dalam Bentuk Plain Text : Ini adalah kelemahan paling kritis bagi yang mementingkan masalah security. Namun jika untuk Anda gunakan sendiri dan tidak dirasa terlalu penting untuk penggunaan Anda, Anda dapat mengabaikannya selama tidak merugikan Anda (misal, password sama dengan PIN ATM gaji.. hehe..).
Tidak ada Paginasi atau Batasan Data : Fungsi yang ada hanya mengambil semua data dari sheet, lalu memproses semuanya di memori. Jika data sudah mencapai ribuan baris, aplikasi akan menjadi sangat lambat dan berisiko mengalami timeout (batas eksekusi Apps Script adalah 6 menit).
Potensi Konflik Data: Aplikasi ini tidak memiliki mekanisme locking. Jika dua pengguna menyimpan polygon pada saat yang bersamaan, bisa terjadi konflik atau data tertimpa.
Tidak Ada Peta Offline: Aplikasi ini bergantung sepenuhnya pada koneksi internet untuk menampilkan tile peta dari OpenStreetMap. Di area dengan sinyal buruk, ini akan menjadi masalah besar.
Fitur Edit/Hapus Titik Tidak Ada: Setelah pengguna menambahkan titik, tidak ada cara untuk menghapus atau mengedit posisinya. Jika ada kesalahan, pengguna harus mengulang dari awal.
Penyimpanan Menggunakan appendRow: Penggunaan ini bisa menjadi lambat untuk operasi massal. Artinya Web App ini memang tidak cocok untuk melakukan Mapping Area seperti halnya yang dilakukan oleh Badan Geospasial Indonesia (data Polygon mencapai puluhan bahkan ratusan titik GPS untuk 1 Area saja).
Mode “Aktif” Kurang Intuitif : Tombol “Mulai” mengaktifkan mode, tapi pengguna tidak bisa “menjeda” sesi. Saat “Mulai” ditekan, GPS langsung aktif, tetapi pengguna harus menekan “Akhiri” untuk berhenti. Tidak ada indikator yang jelas di peta bahwa mode sedang aktif (selain tombol yang berubah).
Kelemahan Teknis Tingkat Lanjut tentang tidak adanya Validasi Input yang Ketat di Server: Fungsi yang ada dalam code saat ini, memvalidasi panjang koordinat, tetapi tidak memvalidasi apakah koordinat tersebut valid (misalnya, lat antara -90 sampai 90, long antara -180 sampai 180).

Wah.. banyak juga kelemahannya. Wajar kan..? Kalau semua kelemahan ini teratasi dengan fitur GRATIS, alat GPS khusus tidak akan laku lagi donk. Hahaha..

Keunggulan Web App ini.

Meski banyak kekurangan web app ini diupayakan agar tetap dapat Anda gunakan sebaik mungkin dan memberikan hasil yang lumayan. Apalagi bagi Anda yang baru belajar seperti saya. Heheeee… Berikut ini saya sampaikan keunggulan Web App “Mapping Area” kita ini;

Sistem Login sederhana namun Fungsional. Sebagai pemula, Kode memiliki sistem autentikasi yang jelas dengan validasi username/password dari sheet User.Adanya manajemen sesi menggunakan CacheService dan sessionStorage, yang memungkinkan pengguna tetap login saat melakukan refresh halaman (dalam batas tertentu). Fitur “Remember me” (Ingat saya) di sisi frontend untuk pengalaman pengguna yang lebih baik.
Kode dibuat dengan pendekatan “Mobile-First”. Penggunaan viewport dan user-scalable=no menunjukkan bahwa aplikasi ini dirancang untuk digunakan di perangkat mobile, yang sangat penting untuk aplikasi field mapping. Tombol-tombol aksi berukuran besar dan mudah ditekan di layar sentuh.
Code sudah dibuat agar memberikan pengalaman pengguna (UI) yang cukup baik. Terdapat loading indicator yang jelas. Sistem notifikasi alert dengan berbagai tipe (success, error, info, warning) memberikan umpan balik langsung kepada pengguna atas setiap aksi yang dilakukan. Custom Confirm Dialog yang elegan, memberikan tampilan yang lebih terintegrasi. Visualisasi titik di peta menggunakan marker yang berbeda (🏁 untuk awal, 📍 untuk akhir, dan nomor untuk titik tengah) sangat informatif (Update : mode Click Based telah dibuatkan sehingga pengguna lebih mudah dalam memetakan).
Sudah dibuatkan fitur “State Recovery”. Penggunaan sessionStorage untuk menyimpan titik-titik yang sudah diambil memungkinkan pengguna untuk tidak kehilangan progress jika terjadi refresh halaman yang tidak disengaja.
Pemetaan Langsung dan Visualisasi. Pengguna dapat melihat lokasi mereka secara real-time melalui marker GPS. Setiap titik yang ditambahkan langsung divisualisasikan di peta sebagai marker, garis (polyline), dan area (polygon), memberikan kepastian visual yang tinggi.
Integrasi saat ini sudah cukup rapi. Alur kerja aplikasi terintegrasi dengan baik antara pengambilan titik, visualisasi, penyimpanan sementara, dan penyimpanan permanen ke Google Sheets.

Wah.. Cuma ada 6 (enam) point keunggulan, keunggulannya kalah 3 (tiga) point dibanding kelemahannya. Meski mencoba objektif, keunggulan ini justru menjadi point penting perlunya web app “Mapping Area” ini. Karena dengan fitur yang ada, kita tidak perlu membeli alat yang lebih mahal dan hanya menggunakan device/alat yang sudah kita miliki sehari-hari.

Disclaimer.

Aplikasi ini tidak berafiliasi dengan perusahaan manapun dan tidak bermaksud meniru fasilitas dan fungsi dari aplikasi lain manapun, baik berbayar atau gratis. Web App ini sengaja dibuat menurut penafsiran penulis tentang kondisi kebutuhan aplikasi “Mapping Area”.

Pembuatan Web App “Mapping Area”.

Buatlah File Spreadsheet baru.
Di dalam Spreadsheet tersebut, buatlah 3 (tiga) buah sheet bernama User, Mapping, Polygon.
Dalam Sheet User buatlah kolom (1)Username, (2)Password, (3)Nama Lengkap.
Sheet Mapping buat kolom (1)Waktu, (2)Lat, (3)Long.
Sheet Polygon buatlah kolom (1)UID, (2)Nama, (3)Kelurahan, (4)Kecamatan, (5)Polygon.
Di Spreadsheet, cari menu Ekstensi, klik dan kemudian pilih Apps Script. Anda akan dibukakan Tab baru / Halaman baru yang merupakan halaman pengalihan ke Aplikasi Google Apps Script Editor.
Di Apps Script, 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 ini.
Masih di Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama Index (jangan tambahkan “.html” karena akan otomatis dibuatkan google, cukup Index). Pada halaman Index.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file Index.html ini.
Jangan lupa simpan seluruh kode yang telah Anda copy-paste.
Pada tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas, kemudian pilih Terapkan baru (New Deployment).
Klik ikon roda gigi (Jenis konfigurasi), kemudian pilih Aplikasi web. 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).
Klik Terapkan. 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.
Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL Aplikasi Web tersebut dan jalankan di browser handphone Anda.

Pengujian.

Agar web app Mapping Area ini dapat Anda rasakan fiturnya secara maksimal, kami sarankan membuka link hasil Deploy di HP Android Anda. Kegiatan pengujian dimaksudkan untuk memastikan code yang Anda copy-paste benar-benar dapat dieksekusi sebagaimana mestinya. Sehingga, ketika anda login menggunakan data yang Anda input di Sheet User Spreadsheet Anda, Anda memiliki akses masuk ke dalam aplikasi. Web Aplikasi ini mengikuti pendekatan Single Page Application (SPA) mirip native android. Lihatlah gambar pada bagian atas tulisan ini. Anda akan melihat kesamaan model dan fitur dengan web app yang anda buat.

Penutup.

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.
Jika Anda tidak mengisi Sheet User Anda dengan data yang sesuai untuk Anda gunakan di menu Login, maka Anda tidak akan bisa melihat isi dan model aplikasi.
Tak bosan-bosanya saya menyatakan, selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya di blog ini sebagaimana Anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.