Pengembangan Aplikasi Pemesanan Makanan “Kantin baso ikan ” Berbasis Flutter dengan Fitur Keranjang dan Integrasi WhatsApp

 

Deskripsi Aplikasi

Aplikasi Kantin baso ikan adalah aplikasi pemesanan makanan digital sederhana berbasis Flutter.

Tujuan aplikasi ini adalah mempermudah proses pemesanan menu makanan di lingkungan kantin dengan sistem yang cepat, praktis, dan langsung terhubung ke WhatsApp penjual.


Aplikasi ini memiliki tampilan antarmuka sederhana namun modern, dilengkapi keranjang belanja, dialog konfirmasi, serta perhitungan total otomatis. Semua pemesanan dapat langsung dikirim ke WhatsApp menggunakan format pesan otomatis sehingga mempermudah penjual dalam menerima order.


Tujuan Pengembangan

Pengembangan aplikasi ini memiliki beberapa tujuan utama:


Mengimplementasikan dasar-dasar Flutter seperti widget, state management, navigasi, dan UI layout.


Membuat sistem pemesanan makanan digital yang mudah digunakan dan responsif.


Menerapkan modularisasi kode sesuai struktur folder Flutter (pages, widgets, models).


Menghubungkan aplikasi dengan WhatsApp untuk proses pengiriman pesan pemesanan.


Melatih kemampuan pengembangan aplikasi mobile dengan pendekatan clean code.


Fitur Aplikasi

Berikut adalah fitur lengkap yang telah diimplementasikan:


1. Daftar Menu dengan Gambar

Pengguna dapat melihat berbagai pilihan menu lengkap dengan:


gambar makanan


nama menu


harga dengan format mata uang


tombol tambah dan kurang


2. Keranjang Belanja (Cart)

Setiap item yang dipilih pengguna dimasukkan ke keranjang dan dapat dilihat melalui bottom sheet.


Isi keranjang meliputi:


tombol tambah/kurang


total keseluruhan


3. Form Pemesan

Sebelum mengirim pesanan, pengguna diminta untuk:


Nama lengkap


Nomor WhatsApp


4. Checkout & Konfirmasi

Setelah mengisi data, pengguna akan melihat halaman checkout berupa dialog yang menampilkan:


detail pemesan


ringkasan pesanan


total pembayaran


5. Integrasi Kirim Pemesanan ke WhatsApp

Seluruh pesanan otomatis diformat menjadi pesan dan dikirim ke nomor penjual melalui WhatsApp.


6. Reset Order

Fitur “Pesanan Baru” untuk menghapus seluruh keranjang dan memulai pesanan dari awal.


7. Tampilan Modern & Responsive

UI menggunakan:


Card menu


InkWell


Bottom sheet


Dialog konfirmasi


Warna utama oranye


Aplikasi nyaman digunakan untuk kelas mobile.









Potongan Kode Penting

int get _totalPrice {

  int total = 0;

  for (var item in _menuItems) {

    total += item.price * item.quantity;

  }

  return total;

}


final url = Uri.parse(

  "https://wa.me/$waNumber?text=${Uri.encodeComponent(pesan)}",

);

launchUrl(url, mode: LaunchMode.externalApplication);

7. Kesimpulan

aplikasi kantin baso ikan berhasil dibangun dengan Flutter menggunakan struktur file profesional dan fitur pemesanan yang lengkap. Pengguna dapat memilih menu, mengelola keranjang belanja, mengisi identitas pemesan, mendapatkan ringkasan checkout, dan mengirim pesanan langsung ke WhatsApp.


Melalui proyek ini, pengembang mempelajari:


implementasi UI di Flutter


pengelolaan state sederhana


membuat komponen custom (widget)


penggunaan model data


integrasi aplikasi dengan WhatsApp


penyusunan struktur folder clean architecture


Aplikasi ini sangat cocok sebagai aplikasi digital pemesanan sederhana untuk kantin sekolah maupun UMKM.




Demo : https://z7s006ng7s10.zapp.page/#/

Komentar

Posting Komentar

Postingan populer dari blog ini

Pitch Deck: Marketplace Produk Siswa (SMK)

 Nama: Rega Nursidiq Pitch Deck: Marketplace Produk Siswa (SMK) 1. Cover / Opening Judul: Marketplace Produk Siswa Tagline: “Wadah Kreativitas & Inovasi Pelajar SMK” Logo (jika ada) + gambar ilustrasi siswa berjualan online. 2. Masalah (Problem) Banyak karya siswa SMK hanya berhenti di sekolah (tidak dikenal publik). Sulitnya akses pasar untuk produk kreatif pelajar. Belum ada platform khusus yang menampilkan karya pelajar. 3. Solusi (Solution) Membuat marketplace online khusus produk siswa SMK. Menyediakan wadah promosi & transaksi digital. Membantu pelajar belajar langsung dunia bisnis digital. 4. Produk (Product) Aplikasi berbasis web & mobile. Fitur utama: Upload & etalase produk Sistem pembayaran online Profil toko tiap sekolah/siswa Review & rating produk 5. Target Market Konsumen umum (masyarakat yang ingin beli produk unik & buatan lokal). Sekolah SMK se-Indonesia. Komunitas pendidikan & industri kreatif. 6. Value Proposition Memberi kesempatan n...
Baca selengkapnya

MEMBUAT CRUD dan MockAPI

Gambar
 📘 Materi CRUD Flutter + MockAPI 1. Apa itu CRUD? CRUD adalah singkatan dari: Create → Menambahkan data baru Read → Menampilkan data Update → Mengubah data Delete → Menghapus data Dalam aplikasi Flutter, CRUD biasanya terhubung dengan API agar data bisa disimpan di server. 2. Tools yang digunakan Flutter → Framework untuk membuat aplikasi mobile multiplatform. MockAPI → API palsu (fake API) untuk simulasi backend (mirip database online). HTTP package (http) → Untuk komunikasi Flutter dengan API (GET, POST, PUT, DELETE). 3. Struktur Proyek main.dart → Tempat logika UI dan pemanggilan API. pubspec.yaml → Untuk menambahkan dependency seperti http. 4. Alur CRUD di Flutter a) Create (Tambah Data) Menggunakan POST request: void createData(String name, String email) async {   final response = await http.post(     Uri.parse("https://yourapi.mockapi.io/users"),     body: {"name": name, "email": email},   ); } b) Read (Tam...
Baca selengkapnya