Aplikasi Pemantau Lokasi Tabung

joyoalkes cek tabung

Rencana mau bikin aplikasi pemantau lokasi tabung menggunakan leaflet, SUpabase untuk backend database. Tujuannya adalah agar bisa diketahui tabungnya dimana saja, sekaligus secara tidak langsung tau jangkauan customer dimana saja. Nah langkah langkah yang saya lakukan seperti ini.

1. Desain Database dan Pembuatan Tabel

Langkah pertama adalah mempersiapkan data, karena semua elemen peta nantinya akan bergantung pada data yang tersimpan dalam database. Di Supabase, saya membuat tabel bernama tabung dengan beberapa kolom penting, antara lain:

• id: Kode unik untuk setiap tabung.
• barcode: Identifikasi barcode tabung.
• jenis_tabung: Tipe tabung (misalnya, "Argon6m3").
• status: Status isi tabung (misalnya, "isi" atau "kosong").
• lokasi: Nama lokasi tempat tabung disimpan.
• koordinat_gps: Koordinat GPS tabung untuk ditampilkan di peta.
• created_at dan updated_at: Tanggal pembuatan dan pembaruan data tabung.

Tabel ini menjadi dasar dari seluruh aplikasi, karena semua lokasi, ikon, dan informasi lainnya di peta bergantung pada data yang tersimpan di dalamnya.

2. Memilih Leaflet untuk Menampilkan Peta

Setelah data siap, saya perlu library untuk menampilkan peta. Saya memilih Leaflet, karena library ini ringan, mudah digunakan, dan mendukung berbagai integrasi, seperti OpenStreetMap. Leaflet juga memungkinkan saya menambahkan marker (penanda) dengan mudah dan memiliki opsi kustomisasi yang fleksibel.

Untuk memulai dengan Leaflet, saya mengimpor CSS dan script Leaflet di dalam proyek:

import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

Lalu, saya mengatur posisi default peta dan menambahkan peta menggunakan OpenStreetMap sebagai tile layer.

3. Menghubungkan Aplikasi dengan Supabase

Selanjutnya, saya perlu mengambil data tabung dari Supabase agar dapat menampilkan lokasinya di peta. Saya memanfaatkan fungsi fetchTabungData dengan bantuan Supabase SDK untuk mengambil data dengan mudah. Fungsi ini mengambil kolom id, koordinat_gps, jenis_tabung, status, dan lokasi dari tabel tabung.

const fetchTabungData = async () => {
  const { data, error } = await supabase
    .from('tabung')
    .select('id, koordinat_gps, jenis_tabung, status, lokasi');

  if (error) {
    console.error('Error fetching tabung:', error.message);
  } else {
    setTabungList(data);
  }
};

Data ini disimpan dalam state tabungList, yang kemudian digunakan untuk menampilkan penanda di peta.

4. Menggunakan Data Koordinat untuk Lokasi Marker

Setiap tabung memiliki koordinat_gps, yang merupakan lokasi tepatnya di peta. Koordinat ini diambil dari database dan dikonversi untuk digunakan oleh Leaflet sebagai posisi lat dan lng dari setiap marker. Saya menggunakan split dan parseFloat untuk memastikan data dalam format yang benar.

const coords = tabung.koordinat_gps.replace(/[()]/g, '').split(',');
const lat = parseFloat(coords[0]);
const lng = parseFloat(coords[1]);

Dengan koordinat ini, setiap tabung dapat ditempatkan di peta pada posisi yang sesuai.

5. Menambahkan Marker dan Popup di Peta

Langkah terakhir adalah menambahkan marker untuk setiap tabung ke peta, beserta informasi tambahan di popup. Dengan menggunakan data dari tabungList, saya menampilkan marker di peta, dan setiap marker memiliki informasi seperti jenis tabung, status, dan jumlah tabung yang berdekatan dalam radius tertentu.

const marker = L.marker([lat, lng], { icon: markerIcon });
marker.bindPopup(`<strong>${jenis_tabung}</strong><br>Status: ${status}<br>Lokasi: ${lokasi}`);
marker.addTo(markerGroupRef.current);

Popup ini memberi pengguna informasi mendetail tentang setiap tabung ketika mereka mengklik penanda.

Dengan menggunakan Leaflet dan Supabase, saya dapat membangun aplikasi peta interaktif yang menampilkan lokasi dan status tabung dengan mudah. Proses ini, mulai dari desain tabel hingga penempatan marker di peta, memungkinkan pengguna untuk melacak distribusi tabung secara efisien dan informatif.