Studi kasus · 2023
Dkampus Food Delivery
DKampus adalah platform online food delivery yang menghubungkan mahasiswa kampus universitas Telkom dengan berbagai warung makan (UMKM) di sekitar area kampus. Platform ini memungkinkan pengguna untuk memesan makanan secara online, melakukan pembayaran digital, dan menggunakan layanan antar makanan (delivery) atau jasa titip (jastip).
01Masalahnya
DKampus menghubungkan mahasiswa Telkom University dengan warung UMKM di sekitar kampus: memesan makanan, membayar secara digital, lalu diantar kurir atau dibantu lewat jasa titip (jastip). Tantangannya ada di alurnya, bukan di satu halaman. Ada tiga peran dengan layar berbeda (pelanggan, kurir, admin), status pesanan yang harus berubah langsung di sisi pelanggan dan kurir, dan warung yang tidak punya sistem sendiri sehingga katalog resto dan menunya dikelola admin.
02Prosesnya
Aplikasi monolit Laravel 10. Tampilan memakai Blade dengan komponen sendiri (x-ui.*), Tailwind CSS 3 dan DaisyUI, Alpine.js, serta Motion untuk animasi, dibangun dengan Vite. Data yang bertahan lama (akun, resto, menu, riwayat, alamat, favorit, rating, kode OTP) ada di MySQL. Keranjang, pesanan yang sedang berjalan, dan chat ada di Firebase Realtime Database, sehingga status pesanan (Searching, On Delivery, Completed) muncul langsung; pesanan yang selesai dipindahkan ke tabel riwayat di MySQL. Kurir diberi tahu lewat Firebase Cloud Messaging, dan setiap pesanan yang dikonfirmasi diteruskan ke grup Telegram lewat bot. Akses dipisah per peran dengan middleware, dan admin bisa membatasi akun. Pendaftaran dan reset kata sandi memakai kode OTP lewat email. Ongkir dihitung dari jarak lewat Google Distance Matrix dengan tarif bertingkat Rp 4.000 sampai Rp 12.000. Repositori memuat 147 fungsi test dengan Firebase palsu, dan antarmukanya dirancang ulang mengikuti desain di Figma.
03Solusinya
Pelanggan membuka beranda dengan promo dari menu berdiskon, kategori, resto terdekat, dan rekomendasi makanan. Ia bisa mencari menu, menandai favorit, membuka detail resto dan makanan, memasukkan pesanan ke keranjang, memilih alamat antar (boleh lebih dari satu), lalu membayar lewat QRIS. Status pesanan bisa dipantau, ada chat dengan kurir, dan setelah selesai pelanggan memberi rating pelayanan dan makanan. Lewat Jastip, pelanggan bisa menitip beli dari beberapa warung dalam satu pesanan. Kurir melihat daftar order, mengambilnya, lalu menyelesaikannya dengan foto bukti atau membatalkannya dengan alasan, dan punya riwayat serta chat. Admin mengelola akun (ubah role, nonaktifkan), resto dan produk, melihat transaksi, dan membalas chat customer service.
Alur per peran
Pelanggan
- Selamat datang, masuk, dan daftar, dengan verifikasi kode OTP lewat email
- Beranda: promo, kategori, resto terdekat, dan rekomendasi makanan, ditambah halaman Promo, Favorit, dan pencarian
- Detail resto dan detail makanan, termasuk catatan untuk restoran
- Keranjang, pilih alamat, konfirmasi pesanan, dan pembayaran QRIS
- Status pesanan (Searching, On Delivery, Completed), detail pengiriman, dan chat dengan kurir
- Rating setelah pesanan selesai, dan Jastip untuk titip beli dari beberapa warung
Kurir: beranda dengan pesanan yang harus diantar, daftar orderan, riwayat, chat dengan pelanggan, dan profil.
Admin: beranda, kelola akun, kelola resto dan produk (tambah, edit, hapus), transaksi, chat customer service, dan profil.
Keputusan teknis
- Dua penyimpanan dengan tugas berbeda. MySQL untuk data yang bertahan lama. Firebase Realtime Database untuk keranjang, pesanan berjalan, dan chat yang harus berubah seketika.
- Kode OTP tidak disimpan polos. Kode di-hash dengan HMAC-SHA256, berlaku 10 menit, bisa dikirim ulang setelah 60 detik, dan dibatasi 5 percobaan.
- Peran dan pembatasan akun. Middleware memisahkan pelanggan, kurir, dan admin. Admin tidak bisa menonaktifkan akunnya sendiri atau menurunkan admin terakhir.
- Ongkir bertingkat. Dihitung dari jarak Google Distance Matrix, Rp 4.000 sampai Rp 12.000, dan ditolak bila lebih dari 3 km.
- API ber-token. Laravel Sanctum melindungi endpoint daftar produk dan warung untuk klien lain.
- Redesain tanpa memutus kontrak. Skrip
hooks-auditmembandingkan id, nama field, rute, dan teks yang diuji sebelum dan sesudah redesain, sedangkancontrast-checkmemeriksa kontras warna menurut WCAG. - Galeri pratinjau. Rute
/_ui(hanya di lingkungan lokal) merender 33 layar dengan data contoh tanpa MySQL dan Firebase. Demo di halaman ini dibuat darinya.
Status: demo statis
Demo di halaman ini adalah snapshot statis dari aplikasi Laravel yang dijalankan secara lokal, bukan aplikasi yang hidup. Halaman dirender dari source asli, lalu disimpan sebagai berkas HTML bersama data contoh.
- Tidak ada backend. MySQL, Firebase (keranjang, pesanan, chat), notifikasi push, Telegram, Google Maps, dan pengiriman email OTP tidak berjalan di demo.
- Data contoh bersifat fiktif (resto, menu, dan satu akun pelanggan contoh) dan tersimpan lokal di demo. Layar keranjang, status, chat, Kurir, dan Admin memakai data contoh bawaan source.
- Tombol favorit dan jumlah di keranjang bisa diklik, tetapi tidak ada yang tersimpan dan semuanya kembali saat halaman dimuat ulang. Aksi lain, seperti memesan, masuk, atau mengirim formulir, menampilkan pemberitahuan demo.
- Foto resto dan menu memakai gambar contoh. Yang tidak punya foto menampilkan ikon pengganti bawaan aplikasi.
- Label Buka atau Tutup resto dan bulan di spanduk promo dibekukan pada saat snapshot diambil.
- Satu berkas CSS khusus demo menjaga beberapa kartu tidak melebar di layar 390 px. Source yang bisa diunduh tidak diubah.
Mockup desain
Rancangan antarmukanya tersedia sebagai prototype di Figma, dengan layar mobile 390 × 844 untuk pelanggan, driver, dan admin: buka mockup di Figma.
Mencoba demo
Buka Live demo; aplikasi tampil di bingkai ponsel dengan daftar layar di sampingnya (di layar sempit, di bilah bawah). Halaman pelanggan tampil seolah sudah masuk sebagai pelanggan contoh, sedangkan layar Kurir dan Admin dibuka langsung dari daftar. Source bisa diunduh lewat tombol Source code.