📱 Group Study Online – Belajar Bareng Teman Meski Jarak Jauh

Membangun Aplikasi Transaksi Kantin Digital dengan Flutter dan Integrasi WhatsApp

Ditulis oleh: Zullul Ardan Rafayanto | Kelas: XII RPL 2

---

1. Deskripsi Aplikasi dan Tujuan Proyek

Aplikasi **Kantin Sekolah Digital** adalah mini-project yang dikembangkan menggunakan **Dart dan Flutter** sebagai bagian dari Ujian Praktik Pemrograman Mobile. Aplikasi ini dirancang untuk mensimulasikan alur pemesanan dan transaksi di kantin sekolah.

Tujuan utama dari proyek ini adalah:

• Mengukur pemahaman dasar struktur proyek Flutter dan widget esensial (seperti ListView, Card, dan *StatefulWidget*).
• Melatih kemampuan mengelola *state* sederhana (mengupdate jumlah pesanan).
• Mengimplementasikan alur *checkout* dan menghitung total pembayaran.
• Mengintegrasikan fitur pengiriman pesanan otomatis melalui *deep linking* ke WhatsApp.

2. Fitur Utama Aplikasi

Aplikasi ini memiliki tiga fitur inti yang wajib diimplementasikan:

2.1 Halaman Daftar Menu dan Penentuan Jumlah

Halaman utama menampilkan daftar menu kantin ([Jumlah Menu] item: Nasi Goreng, Mie Ayam, dll.). Pengguna dapat menambah dan mengurangi jumlah pesanan dengan menekan tombol plus (+) dan minus (-). Logika penentuan jumlah diimplementasikan menggunakan setState() untuk memperbarui variabel quantity pada model MenuItem.

2.2 Halaman Checkout dan Total Pembayaran

Halaman *checkout* menampilkan ringkasan pesanan yang sudah memiliki jumlah > 0. Halaman ini bertanggung jawab menghitung total pembayaran akhir dengan menjumlahkan semua subtotal.

2.3 Integrasi Pesanan ke WhatsApp

Fitur ini memanfaatkan *package* url_launcher untuk membuat *deep link* ke aplikasi WhatsApp. Pesan otomatis disusun dalam format *string* yang berisi detail pesanan dan total yang harus dibayar, kemudian di-*encode* agar aman dalam format URL.

3. Potongan Kode Penting

Berikut adalah potongan kode kunci yang menjadi inti fungsionalitas aplikasi:

3.1 Model Data Menu (`lib/models/menu.dart`)

        
class MenuItem {
  final String nama;
  final int harga;
  final String iconPath; // URL Gambar
  int quantity;

  MenuItem({required this.nama, required this.harga, required this.iconPath, this.quantity = 0});

  // Getter untuk Subtotal
  int get subtotal => harga * quantity;
}
        
    

3.2 Logika Kirim Pesanan ke WA (`lib/pages/checkout_page.dart`)

        
import 'package:url_launcher/url_launcher.dart'; 
// ...
void kirimPesananWA() async {
  String detail = "Pesanan Kantin:\n";
  for (var item in orderedItems) {
    // Membangun detail pesan
    detail += "- ${item.nama} x${item.quantity} = ${item.subtotal.toStringAsFixed(0)}\n";
  }
  detail += "Total: ${totalAmount.toStringAsFixed(0)}";

  String noWA = "6281234567890"; 
  // Encoding dan pembuatan URL link
  String url = "https://wa.me/$noWA?text=${Uri.encodeComponent(detail)}";

  final uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    // Handle error
  }
}
        
    

4. Kesimpulan

Proyek mini aplikasi kantin ini memberikan pengalaman langsung dalam mengelola *state* dan navigasi di Flutter. Tantangan utama terletak pada penanganan *state* saat perubahan jumlah pesanan terjadi dan memastikan *string* pesan WA di-*encode* dengan benar. Secara keseluruhan, proyek ini berhasil mencapai semua tujuan praktikum, menghasilkan aplikasi yang fungsional dan siap untuk diuji coba.

---

Lampiran dan Hasil Pengujian

• Link Project: Link Project Zapp.run

***