Case Study & Portfolio

Studi Kasus SIMPATIK: Merekayasa Ekosistem Smart Parking Terpadu Dishub Kuansing Berbasis Laravel 13 & Flutter

Rahmad Riskiadi Rahmad Riskiadi
15 Oktober 2026
26 Views
Studi Kasus SIMPATIK: Merekayasa Ekosistem Smart Parking Terpadu Dishub Kuansing Berbasis Laravel 13 & Flutter

Dilema Klasik Retribusi Parkir Tradisional di Sektor Publik

Pengelolaan retribusi parkir tepi jalan umum di banyak daerah di Indonesia selama bertahun-tahun menghadapi kebocoran Pendapatan Asli Daerah (PAD). Hambatan ini berakar dari sistem manual berbasis karcis kertas konvensional yang rentan disalahgunakan, minimnya pengawasan petugas di lapangan, ketiadaan transparansi volume transaksi per titik parkir, serta rekonsiliasi manual yang memakan waktu berhari-hari. Di Kabupaten Kuantan Singingi, Riau, Dinas Perhubungan menghadapi tantangan serupa: bagaimana mentransformasi sistem pemungutan retribusi parkir manual menjadi ekosistem digital transparan, akuntabel, dan efisien tanpa mengorbankan kemudahan operasional juru parkir (jukir) di jalanan.

Kebutuhan instansi bukan sekadar aplikasi pencatat angka statis, melainkan platform *end-to-end* yang sanggup menghubungkan komando pengawasan terpusat di kantor dinas dengan dinamika lapangan bersuhu tinggi di bawah terik matahari. Solusi umum di pasaran sering kali gagal karena memaksakan antarmuka yang terlalu rumit bagi petugas operasional, membebani bandwidth kuota dengan transfer berkas foto resolusi tinggi, atau tidak memiliki audit trail yang memenuhi standar transparansi sektor pemerintahan.

Berangkat dari problematika fundamental tersebut, Radevanka Project dipercaya sebagai mitra pengembang teknologi eksklusif untuk merancang, mengarsiteki, dan membangun SIMPATIK (Sistem Informasi Manajemen Parkir Terintegrasi). Dibangun di atas fondasi moto "Build with logic. Secure with discipline. Deliver with pride.", SIMPATIK dirancang sebagai solusi *Platinum Enterprise* yang mengintegrasikan pilar *Admin Command Center* berbasis web dan aplikasi *Mobile Jukir* berbasis Android.


Arsitektur Sistem: Integrasi Dua Pilar Utama

SIMPATIK mengadopsi model sistem terdistribusi dua arah yang terbagi ke dalam dua pilar arsitektur:

  1. Admin Command Center (Web Platform): Berfungsi sebagai pusat kendali sentral bagi Dinas Perhubungan untuk monitoring transaksi harian secara real-time, manajemen inventarisasi zona parkir spasial, penerbitan Kartu Tanda Anggota (KTA) digital jukir, rekonsiliasi audit pendapatan, hingga analitik data berbasis visualisasi interaktif.
  2. Simpatik Mobile for Jukir (Android Client): Aplikasi mobile khusus lapangan yang dirancang ergonomis bagi para jukir untuk melayani pembayaran non-tunai berbasis QRIS, menangkap bukti transaksi kamera berkecepatan tinggi, serta memantau penugasan zona kerja harian.

Kedua subsistem berkomunikasi secara asinkronus melalui protokol REST API yang diamankan dengan enkripsi token berbasis *bearer authorization*, memastikan data setoran lapangan tersinkronisasi instan ke basis data operasional pusat.


Bedah Teknologi Backend & Web Dashboard: Laravel 13 & Livewire 4

Dalam membangun *Admin Command Center*, tim arsitek Radevanka Project memilih kombinasi teknologi modern: Laravel 13, Livewire 4, Alpine.js, dan Tailwind CSS 4 (TALL Stack), didukung mesin basis data MySQL 8.

1. Reaktivitas Tinggi Tanpa Kompleksitas SPA Tradisional

Livewire 4 dipadukan dengan Alpine.js memungkinkan tim membangun antarmuka dashboard reaktif, dinamis, dan cepat tanpa harus memecah basis kode ke dalam framework Single Page Application (SPA) terpisah seperti React atau Vue yang membutuhkan manajemen state kompleks. Modul validasi rekonsiliasi pembayaran dan papan pantauan (*monitoring view*) bekerja secara instan tanpa perlu memuat ulang seluruh halaman peramban.

2. Visualisasi Spasial & Analisis Metrik Finansial

Untuk kebutuhan pengawasan zona parkir, SIMPATIK mengintegrasikan pemetaan spasial berbasis Leaflet.js dan OpenStreetMap. Tim Dishub dapat memantau persebaran zona, koordinat batas parkir, dan titik konsentrasi jukir secara visual lengkap dengan status operasional. Sementara itu, untuk evaluasi pendapatan, dashboard mempekerjakan engine grafik ApexCharts guna menyajikan tren setoran harian, mingguan, bulanan, serta leaderboard performa produktivitas jukir (Top 5 dan Bottom 5).

3. Pelaporan Otomatis dan Penerbitan KTA Digital

Kepatuhan administrasi birokrasi dijawab lewat implementasi barryvdh/laravel-dompdf dan maatwebsite/excel. Dinas Perhubungan dapat mengunduh rekapitulasi formal siap cetak kapan saja berdasarkan filter tanggal, zona, maupun identitas petugas. Selain itu, generator kartu identitas jukir memanfaatkan simplesoftwareio/simple-qrcode untuk menyematkan QR code verifikasi identitas unik berbasis UUID pada setiap cetakan KTA PDF.


Rekayasa Klien Mobile Lapangan: Flutter Berdaya Tahan Tinggi

Mengembangkan aplikasi mobile bagi petugas lapangan memiliki serangkaian parameter teknis yang sangat berbeda dibanding aplikasi konsumen ritel. Jukir bertugas di ruang terbuka dengan paparan cahaya matahari langsung, variasi tipe ponsel Android yang beragam, serta kendala fluktuasi sinyal seluler di titik-titik tertentu. Untuk menjamin keandalan dan performa tinggi, aplikasi mobile SIMPATIK dibangun menggunakan Flutter (SDK ^3.11.5) dan Dart (^3.11.5).

1. Prinsip High-Contrast Outdoor UI/UX

Antarmuka mobile dirancang dengan tema *Dark Navy* elegan yang dipadukan dengan tombol navigasi berukuran ekstra besar (*giant tap-targets*) dan elemen bergradien kontras tinggi (*emerald and gold accents*). Desain ini memastikan jukir dapat membedakan opsi kendaraan Roda 2 (Motor) dan Roda 4 (Mobil) dalam sepersekian detik di bawah terik sinar matahari tanpa salah menekan tombol.

2. Alur Pembayaran QRIS Fase 1 & Validasi Kamera Fluid

Pada rilis implementasi Fase 1, SIMPATIK mengadopsi model verifikasi QRIS Statis Bank Daerah. Pengendara memindai kode QR yang tertera pada layar aplikasi jukir. Segera setelah pengendara melakukan transfer di aplikasi perbankan/e-wallet mereka, jukir memanfaatkan kamera bawaan aplikasi (diakses via package camera) untuk mengambil foto layar bukti transaksi pengendara secara instan tanpa jeda shutter.

3. Keamanan Biometrik & Enkripsi Data Sensitif

Keamanan sesi di perangkat mobile dilindungi berlapis. Sesi token API dikelola melalui flutter_secure_storage yang memanfaatkan Android Keystore terenkripsi. Untuk memudahkan operasional tanpa mengorbankan integritas, jukir dibekali fitur Quick Login berbasis biometrik sidik jari (*fingerprint*) atau Face ID menggunakan local_auth. Fitur ini memangkas waktu login manual tanpa mengharuskan jukir mengetik kredensial setiap kali aplikasi dibuka di sela-sela memandu kendaraan.


Tantangan Rekayasa & Solusi Cerdas Radevanka Project

"Kecemerlangan arsitektur perangkat lunak tidak diuji di atas meja kerja yang nyaman, melainkan saat sistem berhadapan dengan keterbatasan dunia nyata: sinyal lemah, memori perangkat terbatas, dan lonjakan volume data."

1. Masalah Payload Gambar dan Lonjakan Bandwidth (The WebP Compression Engine)

Tantangan: Jika setiap transaksi jukir mengunggah foto bukti kamera beresolusi mentah (2 MB - 5 MB per transaksi), ratusan transaksi harian dari puluhan jukir akan menguras paket data petugas, memperlambat proses pengunggahan di area bersinyal edge/3G, dan membebani kapasitas penyimpanan server cloud Dishub dalam waktu singkat.

Solusi: Radevanka Project merancang *pipeline* kompresi citra ganda di sisi klien mobile dan backend:

  • Di aplikasi Flutter, gambar hasil jepretan kamera langsung dipotong otomatis (*auto-crop*) dengan rasio 1:1 via image_cropper dan dikompresi menggunakan flutter_image_compress ke format modern WebP dengan target ukuran berkas di bawah 50 KB sebelum dikirimkan ke jaringan.
  • Di backend Laravel, berkas diverifikasi kembali melalui Intervention Image 4.x untuk memastikan rasio kompresi optimal tanpa merusak keterbacaan teks angka bukti transaksi di layar admin. Hasilnya: pengunggahan selesai dalam waktu kurang dari 1 detik bahkan di jaringan seluler yang tidak stabil.

2. Audit Trail Granular untuk Menjamin Integritas Sektor Publik

Tantangan: Menghilangkan potensi perselisihan atau tuduhan manipulasi data retribusi internal antara operator verifikator dan petugas lapangan.

Solusi: Kami menanamkan sistem Granular Activity Log terintegrasi pada model data Laravel. Setiap tindakan CRUD atau perubahan status rekonsiliasi (dari Pending menjadi Valid atau Invalid) mencatat metadata lengkap secara otomatis: ID pengguna eksekutor, nilai sebelum perubahan (*old values*), nilai setelah perubahan (*new values*), alamat IP, serta identitas *User-Agent* peramban. Basis log ini dirancang read-only dan tidak dapat disunting melalui antarmuka web.


Rangkuman Integrasi REST API SIMPATIK

Interaksi data antara klien Android jukir dan server Laravel terangkum rapi melalui antarmuka REST API terproteksi:

  • POST /api/login: Otentikasi kredensial petugas dan pengembalian bearer token via Laravel Sanctum.
  • POST /api/logout: Pencabutan token sesi secara aman dari tabel personal access tokens.
  • GET /api/jukir/profile: Pengambilan informasi personal, foto, nomor registrasi, dan zona penugasan jukir.
  • POST /api/jukir/profile/photo: Pembaruan foto profil resmi jukir dengan pemotongan 1:1.
  • POST /api/jukir/transaksi: Endpoint krusial untuk payload transaksi setoran QRIS beserta berkas WebP bukti transfer.
  • GET /api/jukir/transaksi/riwayat: Pengambilan ringkasan rekap transaksi harian yang disajikan pada *bottom sheet* aplikasi jukir.


Dampak Nyata, Hasil Implementasi, dan Pelajaran Berharga

Implementasi perdana SIMPATIK di lingkungan Dinas Perhubungan Kabupaten Kuantan Singingi membuktikan bahwa transformasi digital pemerintahan tidak harus rumit dan membebani aparatur lapangan. Digitalisasi retribusi parkir melalui SIMPATIK menghadirkan dampak signifikan:

  • Transparansi Finansial Riil: Menutup celah ketidaksesuaian setoran retribusi melalui verifikasi bukti transaksi visual yang terpusat.
  • Efisiensi Rekonsiliasi: Rekapitulasi bulanan yang dahulunya membutuhkan konsolidasi dokumen kertas selama berhari-hari kini dapat diselesaikan dan diekspor dalam hitungan detik.
  • Peningkatan Kredibilitas Petugas: Penerbitan KTA digital ber-QR code dan sistem kerja berbasis aplikasi meningkatkan profesionalisme jukir resmi binaan Dishub di mata masyarakat.
  • Kesiapan Integrasi Fase 2: Arsitektur modular SIMPATIK telah disiapkan untuk integrasi langsung (*Host-to-Host / H2H API*) dengan core banking Bank Daerah pada tahapan modernisasi berikutnya.

Bagi tim Radevanka Project, keberhasilan proyek SIMPATIK menegaskan kembali nilai fundamental kami: bahwa rekayasa perangkat lunak terbaik lahir dari perpaduan logika arsitektur yang kokoh, disiplin keamanan tanpa kompromi, dan kebanggaan dalam menghadirkan solusi berdampak bagi masyarakat.


Bangun Ekosistem Digital Enterprise Bersama Radevanka Project

Apakah instansi pemerintahan, perusahaan, atau organisasi Anda menghadapi tantangan digitalisasi operasional lapangan yang kompleks? Radevanka Project siap menjadi mitra arsitektur teknologi terpercaya Anda dalam merancang sistem web skala enterprise, aplikasi mobile tangguh berdaya saing tinggi, dan infrastruktur cloud yang aman.

Kunjungi portofolio dan konsultasikan cetak biru solusi digital Anda bersama tim kami melalui halaman kontak resmi Radevanka Project.

Tags: Studi Kasus Laravel Flutter Smart City GovTech Case Study

Bagikan