🥤 Jastip Mobile - Website Jastip Minuman Susu Cimory dengan Flutter

**Halo sobat developer! ** 👋

Kali ini saya mau berbagi project keren yang baru saja saya selesaikan. Namanya Jastip Mobile - sebuah website jastip (jasa titip) khusus untuk minuman Susu Cimory yang dibuat menggunakan Flutter Web. Project ini cocok banget buat kamu yang lagi cari ide project kuliah, tugas akhir, atau bahkan mau buka bisnis jastip sendiri!

Yuk kita bahas lebih detail! ☕

🎯 Apa Itu Jastip Mobile?

Jastip Mobile adalah platform digital yang memudahkan customer untuk memesan berbagai varian produk Susu Cimory secara online. Customer tinggal pilih produk, masukkan ke keranjang, checkout, dan boom! Pesanan otomatis terkirim ke WhatsApp admin dalam format yang rapi dan profesional.

Simpel, cepat, dan efisien! 🚀

✨ Fitur-Fitur Unggulan

Untuk Customer:

  • 🛒 Katalog Produk Lengkap - Berbagai varian Susu Cimory dengan gambar real
  • 🎨 Tampilan Menarik - UI modern dengan warna-warna cerah yang eye-catching
  • 📱 Responsive Design - Tampil sempurna di Mobile, Tablet, dan Desktop
  • 🛍️ Keranjang Belanja - Bisa tambah/kurang quantity dan hapus item
  • 💬 WhatsApp Integration - Checkout langsung ke WhatsApp dengan format pesan otomatis
  • 💰 Real-time Total Harga - Hitung otomatis total belanja

Untuk Admin:

  • 🔐 Login Secure - Halaman admin terproteksi dengan username & password
  • 📊 Dashboard Analytics - Statistik total pesanan dan pemasukan
  • ➕ Input Pesanan Manual - Catat pesanan yang masuk via WhatsApp
  • 💵 Tracking Pemasukan - Monitor pendapatan secara real-time

🎬 Demo Project

🔗 LINK DEMO WEBSITE - KLIK DI SINI
(https://zz5u064az5v0.zapp.page/#/)

🖼️ GAMBAR DEMO WEBSITE - LIHAT DI SINI


🛠️ Teknologi yang Digunakan

  • Framework: Flutter Web
  • Language: Dart
  • Platform: Zapp.run (Online IDE)
  • Design Pattern: Singleton Pattern untuk State Management
  • External Integration: WhatsApp Business API

💻 Sneak Peek: Kode di Balik Project

Penasaran gimana cara buatnya? Yuk intip beberapa code snippet penting!

1. Model Product 📦

File ini mendefinisikan struktur data produk yang akan dijual:

Dart
class Product {
  final String id;
  final String name;
  final double price;
  final String category;
  final String emoji;
  final String?  imageUrl;

  Product({
    required this. id,
    required this.name,
    required this.price,
    required this.category,
    required this.emoji,
    this.imageUrl,
  });

  String get formattedPrice {
    return 'Rp ${price.toStringAsFixed(0).replaceAllMapped(
      RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
      (Match m) => '${m[1]}.',
    )}';
  }
}

Fungsi:
Model ini seperti "blueprint" produk. Setiap produk punya ID, nama, harga, kategori, emoji, dan URL gambar. Fungsi formattedPrice otomatis mengubah angka jadi format Rupiah yang rapi (contoh: 10000 → Rp 10.000).

2. Cart Service 🛒

Ini adalah "otak" dari sistem keranjang belanja:

Dart
class CartService extends ChangeNotifier {
  static final CartService instance = CartService._internal();
  
  factory CartService() {
    return instance;
  }
  
  CartService._internal();

  final List<CartItem> _items = [];

  List<CartItem> get items => _items;
  int get itemCount => _items.fold(0, (sum, item) => sum + item.quantity);
  double get total => _items.fold(0, (sum, item) => sum + item.subtotal);

  void addToCart(Product product) {
    final existingIndex = _items.indexWhere((item) => item.product.id == product.id);
    
    if (existingIndex >= 0) {
      _items[existingIndex].quantity++;
    } else {
      _items.add(CartItem(product: product));
    }
    
    notifyListeners();
  }
}

Fungsi:
CartService menggunakan Singleton Pattern yang artinya cuma ada SATU instance di seluruh aplikasi. Jadi data keranjang konsisten di semua halaman. Fungsi addToCart pintar banget - kalau produk sudah ada, quantity-nya ditambah. Kalau belum, produk baru ditambahkan ke list.

3. WhatsApp Integration 💬

Yang paling seru! Ini yang bikin pesan otomatis terkirim ke WhatsApp:

Dart
class WhatsAppService {
  static const String adminPhoneNumber = '6281934836814';

  static String generateWhatsAppUrl({
    required List<CartItem> items,
    required String name,
    required String jurusan,
    required String kelas,
    required String phone,
    required String notes,
  }) {
    final message = _formatOrderMessage(
      items: items,
      name: name,
      jurusan: jurusan,
      kelas: kelas,
      phone: phone,
      notes: notes,
    );

    return 'https://wa.me/$adminPhoneNumber?text=${Uri. encodeComponent(message)}';
  }
}

Fungsi:
Service ini generate URL WhatsApp yang sudah include pesan pesanan lengkap. Format pesanan dibuat rapi dengan emoji, detail produk, total harga, dan data pemesan. Tinggal klik link, WhatsApp kebuka otomatis dengan pesan siap kirim! Magic banget kan? ✨

4. Product Card Widget 🎴

Widget ini yang bikin tampilan produk jadi cantik:

Dart
class ProductCard extends StatelessWidget {
  final Product product;
  final VoidCallback onAddToCart;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: InkWell(
        onTap: onAddToCart,
        child: Column(
          children: [
            // Gambar produk dari URL
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                product.imageUrl!,
                width: 80,
                height: 80,
                fit: BoxFit. cover,
                errorBuilder: (context, error, stackTrace) {
                  return Text(product.emoji, style: TextStyle(fontSize: 36));
                },
              ),
            ),
            
            Text(product.name),
            Text(product.formattedPrice),
            
            // Button add to cart
            Container(
              decoration: BoxDecoration(
                color: Colors.orange,
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.add, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

Fungsi:
ProductCard adalah komponen reusable yang menampilkan satu produk. Punya gambar dari URL (dengan fallback ke emoji kalau gambar gagal load), nama produk, harga, dan button add. Kalau di-tap, produk langsung masuk keranjang!

🎨 Kenapa Pakai Flutter Web?

1. One Codebase, Multiple Platform 🚀
Write once, run everywhere! Kode yang sama bisa jalan di Web, Android, iOS, Desktop. Efisien banget!

2. Beautiful UI Out of the Box 💎
Material Design bawaan Flutter bikin UI langsung keren tanpa effort besar.

3. Hot Reload ⚡
Ubah kode, langsung lihat hasilnya. Nggak perlu compile berulang-ulang.

4. Growing Community 🌍
Dokumentasi lengkap, tutorial banyak, dan komunitas aktif siap bantu kalau stuck.

🔥 Kelebihan Project Ini

1. Fully Functional

Ini bukan cuma mockup! Website ini beneran bisa dipakai untuk bisnis jastip real. Customer bisa langsung order dan admin bisa track pesanan.

2. No Backend Required

Karena pakai WhatsApp sebagai "backend", kita nggak perlu setup server, database, atau hosting mahal. Tinggal deploy di Zapp.run atau Netlify, done!

3. Mudah Dikustomisasi

Mau ganti produk? Tinggal edit file data.dart. Mau ganti warna? Edit tema di main.dart. Semua straightforward!

4. Responsive & Mobile-First

Layout otomatis menyesuaikan dengan ukuran layar. Desktop tampil 6 kolom, tablet 4 kolom, mobile 3 kolom. User experience terjaga!

5. Real Business Flow

Project ini meniru alur bisnis jastip yang sesungguhnya:

  • Customer browse → Add to cart → Checkout → WhatsApp admin
  • Admin terima order via WhatsApp → Input ke dashboard → Prosess

6. Clean Code Architecture

Struktur folder rapi dengan separation of concerns:

  • models/ - Data structure
  • screens/ - UI pages
  • widgets/ - Reusable components
  • services/ - Business logic
  • constants/ - Static data

7. Gratis & Open Source

Semua teknologi yang dipakai 100% gratis! Flutter gratis, Zapp.run gratis, WhatsApp gratis. Perfect untuk student atau startup!

📈 Potensi Pengembangan

Project ini masih bisa dikembangkan lebih jauh loh:

  • 🔔 Push Notification - Notif real-time saat ada order baru
  • 💳 Payment Gateway - Integrasi dengan Midtrans atau Xendit
  • 📸 Upload Bukti Transfer - Customer upload bukti bayar langsung di website
  • ⭐ Rating & Review - Sistem feedback dari customer
  • 🎁 Promo & Voucher - Fitur diskon dan kode promo
  • 📊 Advanced Analytics - Grafik penjualan, best seller, dll
  • 🔐 Multi-level Admin - Role-based access control
  • 📱 Mobile App - Convert ke native mobile app
  • 🌐 Internationalization - Multi-language support

🎓 Cocok Untuk...

✅ Tugas Kuliah - Project ini bisa jadi tugas besar pemrograman mobile/web
✅ Tugas Akhir/Skripsi - Bisa dikembangkan jadi sistem e-commerce lengkap
✅ Portfolio - Showcase kemampuan Flutter kamu ke recruiter
✅ Bisnis Sampingan - Langsung deploy dan mulai bisnis jastip!
✅ Belajar Flutter - Code yang clean dan terdokumentasi, cocok untuk belajar

🎯 Kesimpulan

Jastip Mobile adalah contoh project yang praktis, fungsional, dan applicable di dunia nyata. Dengan Flutter Web, kita bisa bikin website keren tanpa ribet setup backend. Integration dengan WhatsApp bikin bisnis flow jadi simpel dan familiar buat customer Indonesia.

Yang paling keren? **Project ini bisa langsung kamu pakai atau kamu kembangkan sesuai kebutuhan! ** Mau jual makanan? Ganti produknya. Mau jual fashion? Tinggal edit data. Fleksibel banget!

💬 Penutup

Gimana? Tertarik buat nyobain atau develop lebih lanjut? Jangan ragu buat explore code-nya dan experiment sesuka hati. Yang penting keep learning and keep building! 🚀

Kalau ada pertanyaan, kritik, atau saran, feel free to reach out ya! Happy coding! 💻✨

Tags: #Flutter #FlutterWeb #Dart #WebDevelopment #Jastip #WhatsAppIntegration #ECommerce #ProjectShowcase #CodingIndonesia

⭐ Kalau artikel ini bermanfaat, jangan lupa like dan share ke teman-teman kamu ya! ⭐

Last Updated: December 2025
Author: Aria Rizky Permana

Komentar

Posting Komentar

Postingan populer dari blog ini

✨ Statement dan Expression dalam Dart (Flutter)

Dalam pemrograman menggunakan bahasa Dart , yang menjadi dasar dari pengembangan aplikasi Flutter , kita sering menemui dua istilah penting: statement dan expression . Meskipun terlihat mirip, keduanya memiliki fungsi yang berbeda dalam membentuk logika dan alur kode. 👉 Expression adalah potongan kode yang menghasilkan nilai . Misalnya operasi seperti 3 + 5 , pemanggilan fungsi myWidget.color , atau pembuatan objek Text("Hello") . Expression digunakan untuk membentuk hasil yang nantinya bisa disimpan, ditampilkan, atau dikembalikan oleh fungsi. 👉 Statement , di sisi lain, adalah perintah lengkap yang melakukan aksi tertentu, seperti mendeklarasikan variabel ( int x = 10; ), memanggil fungsi ( print("Hello") ), atau melakukan logika percabangan ( if , for , dan sebagainya). Dalam konteks Flutter, kita akan sering menjumpai kedua konsep ini bekerja berdampingan — misalnya saat kita menulis return Text("Halo Dunia"); Di sini, return adalah stateme...
Baca selengkapnya