Pengembangan Aplikasi Pemesanan Makanan “Kantin Bibi Ayam Goreng” Berbasis Flutter dengan Fitur Keranjang dan Integrasi WhatsApp

Deskripsi Aplikasi

Aplikasi Kantin Bibi Ayam Goreng 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:

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

  2. Membuat sistem pemesanan makanan digital yang mudah digunakan dan responsif.

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

  4. Menghubungkan aplikasi dengan WhatsApp untuk proses pengiriman pesan pemesanan.

  5. 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.

Screenshot

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 Bibi Ayam Goreng 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 : Klik!


Komentar

Posting Komentar

Postingan populer dari blog ini

Arya Kegiatan Praktikum Mapel Kejuruan

Gambar
  Kegiatan Praktikum Mapel Kejuruan: Mengasah Kemampuan dan Mempersiapkan Masa Depan Pendidikan kejuruan merupakan salah satu aspek penting dalam sistem pendidikan di Indonesia. Salah satu cara terbaik untuk mempersiapkan siswa dalam menghadapi dunia kerja adalah melalui kegiatan praktikum yang dilakukan dalam mata pelajaran kejuruan. Kegiatan praktikum ini tidak hanya memberikan pengetahuan teoritis, tetapi juga keterampilan praktis yang sangat dibutuhkan di dunia profesional. Mengenal Pentingnya Praktikum dalam Mapel Kejuruan Mata pelajaran kejuruan (mapel kejuruan) di sekolah vokasi atau kejuruan memiliki fokus yang jelas pada pengembangan keterampilan teknis sesuai dengan bidang studi tertentu. Kegiatan praktikum merupakan inti dari pembelajaran kejuruan. Di sini, siswa tidak hanya belajar dari buku teks, tetapi juga mengalami langsung proses produksi atau kerja yang sesungguhnya, sesuai dengan jurusan yang mereka pilih. Misalnya, siswa jurusan teknik komputer akan berlatih mer...
Baca selengkapnya

aplikasi CRUD Flutter + MockAPI

Gambar
CRUD Flutter + MockAPI (Zapp Platform)  Pada project ini, saya membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Flutter yang terhubung dengan MockAPI sebagai backend simulasi. Aplikasi ini dibangun dan dijalankan langsung melalui platform Zapp.run, sebuah layanan cloud IDE yang mendukung proyek Flutter tanpa perlu instalasi lokal. Fitur Aplikasi: ✅ Tambah Data: Menggunakan AlertDialog yang muncul saat tombol tambah ditekan. 📝 Edit Data: Mengedit data yang sudah ada melalui tombol ikon pensil. 🗑️ Hapus Data: Menghapus data menggunakan ikon tempat sampah. 🔄 Realtime Update: Data yang diubah langsung terlihat tanpa perlu refresh manual. 🌐 Integrasi dengan MockAPI: Backend dummy untuk keperluan testing API. Teknologi yang Digunakan: Flutter 3.7.3 (Beta) MockAPI.io untuk simulasi backend Zapp.run sebagai IDE dan platform hosting sementara HTTP Package (versi 0.13.6) untuk koneksi API Cuplikan Kode: showDialog(   context: context,   builder: (con...
Baca selengkapnya