🔥 Aplikasi Jastip Soteng: Solusi Modern untuk Pemesanan Kantin Sekolah

📱 Deskripsi Aplikasi

Jastip Baso Soteng adalah aplikasi mobile berbasis Flutter yang dirancang khusus untuk memudahkan pemesanan makanan dan minuman di kantin sekolah. Aplikasi ini mengusung konsep "Jasa Titip" (Jastip) yang memungkinkan siswa untuk memesan menu favorit mereka secara praktis melalui smartphone, kemudian pesanan dikirim langsung ke WhatsApp penjual.

Aplikasi ini menampilkan interface yang modern, clean, dan user-friendly dengan dominasi warna merah dan putih yang menggugah selera, mencerminkan kehangatan dan kelezatan makanan yang ditawarkan.

🎯 Tujuan Pembuatan Aplikasi

Aplikasi Jastip Baso Soteng dibuat dengan beberapa tujuan utama:

  1. Efisiensi Waktu: Mengurangi waktu antrian di kantin dengan sistem pre-order digital
  2. Kemudahan Pemesanan: Memberikan platform yang mudah digunakan untuk memesan makanan
  3. Transparansi Harga: Menampilkan harga yang jelas dan perhitungan total otomatis
  4. Integrasi WhatsApp: Memanfaatkan platform komunikasi yang sudah familiar (WhatsApp) untuk konfirmasi pesanan
  5. Pengalaman Modern: Memberikan pengalaman berbelanja online yang menyenangkan dengan UI/UX yang menarik

✨ Fitur-Fitur Aplikasi

1. Katalog Menu Interaktif

  • Tampilan card untuk setiap menu dengan foto, nama, deskripsi, dan harga
  • Animasi hover dan transisi yang smooth
  • Foto produk yang jelas dan menarik

2. Keranjang Belanja Real-time

  • Badge notifikasi jumlah item di cart
  • Update otomatis saat menambah/mengurangi quantity
  • Perhitungan total harga secara real-time

3. Kontrol Quantity yang Intuitif

  • Tombol (+) dan (-) untuk mengatur jumlah pesanan
  • Tombol reset (X) untuk menghapus item dari keranjang
  • Animasi pulse saat menambah quantity

4. Header dengan Gradient Modern

  • Background gradient merah yang eye-catching
  • Dot pattern untuk sentuhan premium
  • Info jumlah menu dan tagline

5. Halaman Checkout Lengkap

  • Ringkasan pesanan yang detail
  • Informasi subtotal per item
  • Total pembayaran yang jelas
  • Tombol edit pesanan

6. Integrasi WhatsApp

  • Kirim pesanan langsung ke WhatsApp penjual
  • Format pesan yang rapi dan terstruktur
  • Loading state saat proses pengiriman
  • Konfirmasi sukses dengan SnackBar

7. Responsive Design

  • Tampilan yang optimal di berbagai ukuran layar
  • Scroll yang smooth
  • Touch-friendly interface

8. Animasi & Transisi

  • Fade-in animation untuk menu cards
  • Slide transition saat navigasi
  • Scale animation pada button hover
  • Staggered animation untuk user experience yang lebih baik

📸 Dokumentasi Tampilan

Halaman Utama (Home Page)

















Fitur yang terlihat:

  • Header dengan gradient merah dan dot pattern
  • Badge cart dengan jumlah item
  • Katalog menu dengan foto dan harga
  • Kontrol quantity untuk setiap item
  • Bottom bar dengan summary dan tombol checkout

Halaman Checkout



















Fitur yang terlihat:

  • Header gradient dengan tombol back
  • List pesanan dengan detail quantity dan subtotal
  • Total pembayaran dengan highlight
  • Tombol "Ubah Pesanan" dan "Pesan via WhatsApp"
  • Loading state saat proses

Pesan WhatsApp













Format pesan yang dikirim:

🔥 *Pesanan Kantin Baso Soteng*
━━━━━━━━━━━━━━━━━

• Baso Bonteng
  1x @ Rp 5.000
  Subtotal: Rp 5.000

━━━━━━━━━━━━━━━━━
💰 *TOTAL: Rp 5.000*
━━━━━━━━━━━━━━━━━

Terima kasih! 🙏

💻 Potongan Kode Penting

1. Model Data Menu Item

class MenuItem {
  final String name;
  final int price;
  final String image;
  final String description;
  int quantity;

  MenuItem({
    required this.name,
    required this.price,
    required this.image,
    required this.description,
    this.quantity = 0,
  });

  int get subtotal => price * quantity;
}

Penjelasan: Model ini menyimpan data menu dengan computed property subtotal untuk menghitung harga berdasarkan quantity.

2. Format Rupiah

String _formatRupiah(int value) {
  return value.toString().replaceAllMapped(
    RegExp(r'(\d)(?=(\d{3})+(?!\d))'),
    (Match m) => '${m[1]}.',
  );
}

Penjelasan: Fungsi ini memformat angka menjadi format Rupiah dengan pemisah titik setiap 3 digit (contoh: 5000 → 5.000).

3. Gradient Header dengan Custom Painter

Container(
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFFE53935), Color(0xFFFF5252)],
    ),
  ),
  child: Stack(
    children: [
      Positioned.fill(
        child: Opacity(
          opacity: 0.1,
          child: CustomPaint(
            painter: _DotPatternPainter(),
          ),
        ),
      ),
      // Content here
    ],
  ),
)

Penjelasan: Membuat header dengan gradient merah dan pattern dots menggunakan CustomPainter untuk efek visual yang menarik.

4. Kirim Pesan ke WhatsApp

void _sendToWhatsApp(BuildContext context) async {
  setState(() => _isProcessing = true);

  final items = widget.menuItems.where((item) => item.quantity > 0).toList();

  String message = '🔥 *Pesanan Kantin Baso Soteng*\n';
  message += '━━━━━━━━━━━━━━━━━\n\n';
  
  for (var item in items) {
    message += '• ${item.name}\n';
    message += '  ${item.quantity}x @ Rp ${_formatRupiah(item.price)}\n';
    message += '  Subtotal: Rp ${_formatRupiah(item.subtotal)}\n\n';
  }
  
  message += '━━━━━━━━━━━━━━━━━\n';
  message += '💰 *TOTAL: Rp ${_formatRupiah(widget.totalPrice)}*\n';

  const String sellerNumber = '62882000574632';
  final url = 'https://wa.me/$sellerNumber?text=${Uri.encodeComponent(message)}';

  html.window.open(url, '_blank');
  
  // Show success message
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('✅ Pesanan berhasil dikirim!')),
  );
}

Penjelasan: Fungsi ini membuat format pesan yang rapi, encode URL, dan membuka WhatsApp dengan pesan yang sudah terformat.

5. Staggered Animation untuk Menu Cards

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0.0, end: 1.0),
  duration: Duration(milliseconds: 300 + (index * 50)),
  curve: Curves.easeOutCubic,
  builder: (context, value, child) {
    return Transform.translate(
      offset: Offset(0, 20 * (1 - value)),
      child: Opacity(
        opacity: value,
        child: child,
      ),
    );
  },
  child: MenuCard(item: item, ...),
)

Penjelasan: Setiap card muncul dengan animasi fade-in dan slide-up yang di-delay berdasarkan index untuk efek staggered yang smooth.

🎨 Teknologi yang Digunakan

Teknologi Fungsi
Flutter Framework utama untuk pengembangan aplikasi cross-platform
Dart Bahasa pemrograman yang digunakan
Material Design 3 Design system untuk UI yang modern
dart:html Library untuk integrasi web (WhatsApp URL)
CustomPainter Untuk membuat pattern visual custom
Animation Controllers Untuk mengatur animasi yang kompleks

🚀 Cara Menggunakan Aplikasi

  1. Buka Aplikasi - Tampilan home page akan muncul dengan katalog menu
  2. Pilih Menu - Tap tombol (+) untuk menambah quantity
  3. Atur Jumlah - Gunakan tombol (+/-) atau reset (X)
  4. Cek Keranjang - Lihat badge cart di kanan atas untuk jumlah item
  5. Checkout - Tap tombol "Lanjut Pesan" di bottom bar
  6. Review Pesanan - Periksa detail pesanan di halaman checkout
  7. Kirim ke WhatsApp - Tap "Pesan via WhatsApp" untuk mengirim
  8. Konfirmasi - WhatsApp akan terbuka dengan pesan terformat

📊 Hasil Pengujian

Test Case 1: Menambah Item ke Keranjang

  • ✅ Status: PASSED
  • Hasil: Quantity bertambah, badge cart update, total harga terhitung
  • Screenshot: 


















Test Case 2: Menghapus Item dari Keranjang

  • ✅ Status: PASSED
  • Hasil: Item berhasil dihapus, total harga update otomatis
  • Screenshot: 
















Test Case 3: Navigasi ke Checkout dengan Keranjang Kosong

  • ✅ Status: PASSED
  • Hasil: SnackBar muncul dengan pesan "Pilih minimal 1 item dulu ya! 😊"
  • Screenshot: 
















Test Case 4: Kirim Pesanan ke WhatsApp

  • ✅ Status: PASSED
  • Hasil: WhatsApp terbuka dengan format pesan yang benar
  • Screenshot: 
















Test Case 5: Format Rupiah

  • ✅ Status: PASSED
  • Hasil: Angka terformat dengan benar (5000 → Rp 5.000)
  • Screenshot: 















Summary Pengujian

Total Test Cases Passed Failed Pass Rate
5 5 0 100% ✅

📝 Kesimpulan

Aplikasi Jastip Baso Soteng berhasil dikembangkan sebagai solusi modern untuk pemesanan makanan di kantin sekolah. Aplikasi ini menggabungkan desain yang menarik dengan fungsionalitas yang praktis, menghasilkan user experience yang menyenangkan.

Kelebihan Aplikasi:

✅ User Interface Modern - Desain yang clean, attractive, dan menggunakan Material Design 3 ✅ Animasi Smooth - Transisi dan animasi yang membuat aplikasi terasa responsive dan alive ✅ Integrasi WhatsApp - Pemanfaatan platform yang sudah familiar untuk kemudahan komunikasi ✅ Real-time Update - Perhitungan harga dan quantity yang update secara instant ✅ Easy to Use - Interface yang intuitif dan mudah dipahami ✅ Responsive - Tampilan optimal di berbagai ukuran layar

Pembelajaran yang Didapat:

  1. Implementasi state management menggunakan StatefulWidget
  2. Membuat custom widget yang reusable (MenuCard, ModernButton)
  3. Menggunakan AnimationController untuk animasi kompleks
  4. Integrasi dengan platform eksternal (WhatsApp)
  5. Implementasi responsive design dengan CustomScrollView
  6. Penggunaan CustomPainter untuk visual effect

Aplikasi ini membuktikan bahwa teknologi dapat membuat kehidupan sehari-hari lebih mudah, bahkan untuk hal sederhana seperti memesan makanan di kantin sekolah. Dengan tampilan yang menarik dan fitur yang lengkap, Jastip Baso Soteng siap menjadi solusi digital untuk kebutuhan kantin modern! 🚀

🔗 Link & Resource

Main Code

📦 Main Code : [ https://pastecode.io/s/jgtf7jua ] , [ https://pastecode.io/s/giqwj0mq ] , [ https://pastecode.io/s/g166wn9q ] , [ https://pastecode.io/s/0e6tfo2u ] , [ https://pastecode.io/s/3pi520tj ]

Demo 

📱 Live Demo: [ https://ztem06uuten0.zapp.page/#/ ]

Contact

Nama : Afrizal Herlambang

📧 Email : deterjen17@gmail.com 💬 WhatsApp : +62 895-37043-3500 

📜 Lisensi

Project ini dibuat untuk tujuan pembelajaran dan dapat digunakan secara bebas dengan mencantumkan kredit kepada pembuat.

Dibuat dengan ❤️ menggunakan Flutter

Artikel ini dipublikasikan pada: [Rabu. 09-12-2025]

Tags

#Flutter #MobileApp #Jastip #KantinSekolah #WhatsAppIntegration #MaterialDesign #DartProgramming #UIUXDesign 


Komentar

Posting Komentar

Postingan populer dari blog ini

🍲 Aplikasi Jastip Baso Soteng dengan Flutter

Gambar
Halo semuanya! 👋 Di artikel ini saya Afrizal Herlambang mau berbagi project kecil yang saya buat menggunakan **Flutter**. Project ini berupa aplikasi **Jastip Baso Soteng**, yaitu aplikasi sederhana untuk memesan makanan online. Aplikasi ini saya buat dengan tujuan belajar **Flutter Web** dan juga biar lebih mudah kalau ada yang mau pesan jajanan lewat WhatsApp. --- ### ✨ Fitur Utama * Menampilkan daftar menu jajanan (**Baso Soteng, Piscok, Karoket Bihun, dan Donat**). * Bisa menambah/mengurangi jumlah pesanan. * Hitung otomatis total harga pesanan. * Tersedia tombol **Pesan Sekarang** yang langsung terhubung ke WhatsApp penjual. * Desain simpel tapi modern, cocok untuk UMKM kuliner. --- ### 🛠️ Teknologi yang digunakan * **Flutter** (untuk frontend aplikasi) * **Dart** (bahasa pemrograman) * **WhatsApp API (wa.me)** untuk mengirim pesanan --- ### 📸 Tampilan Aplikasi Aplikasi ini tampilannya sederhana, ada list menu dengan foto, deskripsi, dan tombol tambah/kurangi jumlah pesanan. Di...
Baca selengkapnya

🚀 Project Flutter Web: Lokasi Mie Gacoan dengan Google Maps & WhatsApp 📍📱

Hai teman-teman! 👋 Kali ini aku mau share project Flutter Web yang aku buat untuk tugas, yaitu aplikasi sederhana yang membantu kita menemukan lokasi Mie Gacoan Banjar Mayjen dengan mudah lewat peta Google Maps dan langsung bisa chat via WhatsApp! ✨ Fitur Utama 🗺️ Tampilan peta interaktif menggunakan Google Maps embed iframe 📍 Mendapatkan lokasi kamu secara otomatis (kalau diizinkan browser) 🚗 Tombol navigasi yang langsung mengarahkan kamu ke Gacoan lewat Google Maps 💬 Tombol WhatsApp untuk chat langsung ke nomor Gacoan tanpa ribet 🛠️ Teknologi yang Digunakan 💙 Flutter Web : untuk UI modern dan responsif 🌐 dart:html : akses fitur browser seperti geolocation dan membuka link baru 🗺️ Google Maps Embed API : tampilkan peta tanpa ribet dengan iframe 🔥 Kode Main Code [ https://pastecode.io/s/mx3i4opd] 🎨 Tampilan Aplikasi Aplikasi ini hadir dengan desain yang fresh dan clean, pakai warna merah khas Gacoan, tombol besar yang mudah ditekan, s...
Baca selengkapnya