Padangsidimpuan, 03 Juli 2026.
Hasil Web App Tracking Area ini dapat anda akses di sini. Untuk merasakan fiturnya anda dapat Login menggunakan Username : “Admin” dan Password : “adminku123”, TANPA TANDA KUTIP. Gunakan aplikasi dengan bijak, dan perlu kami INGATKAN bahwa, meski anda berhasil menggunakan dan melakukan kegiatan Tracking Area di web app yang saya buatkan, data yang Anda entri sudah tidak menjadi milik Anda. 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. Ingat..!! ada DISCLAIMER saya di tiap “artikel”, harap dimaklumi. Setiap artikel saya dimaksudkan sebagai bahan pembelajaran bagi Anda dan saya. Dengan membuat sendiri, Anda dapat melihat model dan hasil data Anda, dan akan dapat Anda gunakan kedepannya untuk pembuatan laporan dan/atau keperluan pengolahan data lainnya.
Tracking Area (Click Based).
Saya tidak bertanggungjawab jika Anda merasakan ambiguitas dengan judul web app kali ini. Namun, perlu Anda ketahui, bahwa kenapa web app kali ini saya beri nama “Tracking Area” diawali dengan keinginan memudahkan kegiatan pencatatan data titik GPS yang akan dibuat dalam bentuk data LINESTRING. Jenis data ini dapat Anda lihat jika anda pernah melihat gambar jalan raya/gang di Google Map. Nah.. data di Google Map berasal dari kontributor dengan kepentigan yang bervariasi. Sedangkan web app yang kita buat tentunya akan dapat memberikan kita untuk memiliki linestring sendiri sesuai kebutuhan kita saja. Seperti teman-teman di suatu Pemerintahan Daerah yang ingin membuat sebuah Laporan berbasis peta dan menyimpan serta mengarsipkan data yang diinginkan di dalamnya. Fasilitas ini sebenarnya secara lengkap dapat Anda miliki dari aplikasi Google bernama MyMaps.
Jadi, yang saya maksud dengan Web App Tracking Area dalam tulisan ini adalah aplikasi berbasis Google Apps Script untuk pendataan titik GPS dengan metode click-based yang terintegrasi dengan Google Sheets. Aplikasi ini dirancang untuk memudahkan pengguna dalam membuat dan menyimpan linestring (rute) dengan informasi jarak dan lokasi.
Web App Tracking Area ini merupakan solusi praktis untuk pendataan titik GPS dengan metode click-based, cocok untuk penggunaan di lapangan dengan atau tanpa koneksi GPS. Meskipun memiliki beberapa keterbatasan teknis dan fungsional, aplikasi ini menawarkan kemudahan penggunaan dan integrasi yang baik dengan Google Sheets untuk pengelolaan data.
Fitur Tracking Area ini.
- Sistem Autentikasi Pengguna. Login dengan username dan password, manajemen sesi pengguna (session caching), dan informasi pengguna (nama lengkap) ditampilkan.
- Metode Tracking Click-Based. Pengguna mengklik pada peta untuk menambahkan titik Minimal 3 titik untuk membentuk LineString, marker titik dengan nomor urut (1, 2, 3, …), titik pertama berwarna hijau (start), titik terakhir kuning (end), kursor akan berubah menjadi crosshair saat mode tracking aktif.
- Perhitungan Jarak Real-time. Menggunakan rumus Haversine untuk akurasi jarak (dalam meter), menampilkan jarak setiap segmen (antar titik), menampilkan total jarak kumulatif, dan label jarak muncul di tengah setiap segmen pada peta.
- GPS Opsional. Mendeteksi lokasi pengguna jika GPS aktif, titik default: Padangsidimpuan, Sumatera Utara (jika GPS tidak aktif), tombol GPS 📡 untuk memusatkan peta ke lokasi pengguna, dan status GPS ditampilkan di status bar (aktif/tidak aktif).
- Penyimpanan Data ke Google Sheets. Menyimpan data ke spreadsheet terintegrasi, kolom yang disimpan: ID, Username, Tanggal, Jumlah Titik, LineString, Points (JSON), Nama Lokasi, Kelurahan, Kecamatan, Jarak (meter).
- Form Input Data Lokasi. Modal form untuk mengisi: Nama Lokasi (wajib), Kelurahan (wajib), Kecamatan (wajib), Validasi input sebelum menyimpan
- Visualisasi Peta Interaktif. Menggunakan Leaflet.js dengan tile layer dark mode, Zoom control custom di bagian bawah, LineString dengan warna biru (#60A5FA), dan Popup pada marker menampilkan koordinat titik.
- UI/UX Modern & Responsif. Dark mode dengan tema gelap profesional, desain mobile-first (responsif), animasi halus (splash screen, transisi halaman), dan tombol aksi dengan efek touch/click.
- Status Bar Informasi. Indikator status GPS (aktif/tidak aktif), informasi jumlah titik dan total jarak saat tracking, dan status aplikasi (siap/tracking)
- Manajemen Tracking. Mulai tracking, hapus semua titik, batalkan tracking, simpan LineString (dengan validasi minimal 3 titik), dan auto-disable tombol simpan jika titik < 3.
Kelemahan dan Kekurangan Tracking Area ini.
- Keterbatasan Infrastruktur. Ketergantungan pada Google Services: Membutuhkan koneksi internet dan akses ke Google Apps Script & Google Sheets. Rate Limiting: Google Apps Script memiliki batas kuota harian (misal: 20.000 eksekusi per hari). Cache Session: Session menggunakan CacheService yang bersifat sementara (maksimal 6 jam).
- Keterbatasan Fungsionalitas. Tidak Ada Edit Data: Data yang sudah disimpan tidak dapat diedit melalui aplikasi. Tidak Ada Hapus Data: Tidak ada fitur untuk menghapus data tracking yang sudah tersimpan. Tidak Ada Ekspor Data: Data hanya bisa diakses melalui Google Sheets. Tidak Ada Histori Tracking: Pengguna tidak bisa melihat riwayat tracking sebelumnya di dalam aplikasi. Tidak Ada Fitur Search: Tidak bisa mencari data berdasarkan nama lokasi atau tanggal.
- Keterbatasan Teknis. GPS Hanya Opsional: Tidak mendukung tracking otomatis berbasis GPS real-time. Tidak Ada Offline Mode: Membutuhkan koneksi internet untuk mengakses peta dan Google Sheets. Satu LineString Per Penyimpanan: Hanya bisa membuat 1 linestring per sesi tracking. Browser Compatibility: Performa mungkin bervariasi di browser yang berbeda. Tidak Ada Dukungan Peta Offline: Menggunakan tile server online (CartoDB).
- Keterbatasan Keamanan. Autentikasi Sederhana: Password tidak di-hash (disimpan plain text di spreadsheet). Tidak Ada Session Timeout Otomatis: Session hanya di-cache tanpa batas waktu aktif. Tidak Ada Enkripsi Data: Data dikirim via Google Apps Script (HTTPS tetap, tapi tidak ada enkripsi tambahan).
- Keterbatasan Pengalaman Pengguna. Tidak Ada Panduan Pengguna: Tidak ada tutorial atau help desk dalam aplikasi. Tidak Ada Feedback Visual untuk Loading: Beberapa proses (seperti menyimpan data) mungkin terasa lambat. Tidak Ada Notifikasi Error yang Detail: Error handling hanya menampilkan pesan umum. Tidak Ada Fitur Zoom ke Titik: Tidak bisa klik pada marker untuk zoom ke titik tersebut.
- Keterbatasan Data. Tidak Ada Validasi Koordinat: Tidak memastikan bahwa titik yang dipilih berada di area yang valid. Tidak Ada Batasan Jumlah Titik: Bisa menambahkan titik sebanyak-banyaknya (potensi performa menurun). Tidak Ada Metadata Tambahan: Tidak menyimpan informasi seperti kecepatan, waktu, atau ketinggian.
- Keterbatasan Mobile. Touch Event Handling: Mungkin kurang optimal pada perangkat dengan touchscreen (perlu pengujian). Ukuran Tombol: Tombol aksi mungkin terlalu kecil untuk penggunaan di layar sangat kecil. Virtual Keyboard: Form input mungkin terhalang keyboard pada device tertentu.
Spesifikasi Teknis
| Komponen | Spesifikasi |
| Platform | Google Apps Script + HTML Service |
| Library Peta | Leaflet.js 1.9.4 |
| Tile Layer | CartoDB Dark All |
| Database | Google Sheets (Spreadsheet) |
| GPS | HTML5 Geolocation API (opsional) |
| Session | Google CacheService |
| Responsif | CSS Media Queries |
| Animasi | CSS Transitions & Keyframes |
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 “Tracking Area”.
Pembuatan Web App “Tracking Area”.
- Buatlah File Spreadsheet baru.
- Di dalam Spreadsheet tersebut, buatlah 2 (dua) buah sheet bernama Users dan TrackingData.
- Dalam Sheet Users buatlah kolom (1)Username, (2)Password, (3)Nama Lengkap.
- Sheet TrackingData buat kolom (1)ID, (2)Username, (3)Tanggal, (4)Jumlah Titik, (5)LineString, (6)Points, (7)Nama, (8)Kelurahan, (9)Kecamatan, dan (10)Jarak.
- 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.
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 Users Spreadsheet Anda, Anda memiliki akses masuk ke dalam aplikasi. Web Aplikasi ini mengikuti pendekatan Single Page Application (SPA), namun akan tetap berjalan lancar jika Anda gunakan PC atau Laptop Anda.
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 Users Anda dengan data yang sesuai untuk Anda gunakan di menu Login, maka Anda tidak akan bisa melihat isi dan model aplikasi.
- 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.