Panduan Praktikum 🍔 RENCANA APLIKASI DAFTAR MENU KANTIN SMKN 1 BANJAR

 

🍔 RENCANA APLIKASI

DAFTAR MENU KANTIN SMKN 1 BANJAR

1. Gambaran Umum

Pada praktikum ini, kita akan membuat sebuah aplikasi mobile sederhana menggunakan Flutter dengan nama Daftar Menu Kantin SMKN 1 Banjar.

Aplikasi ini dibuat untuk membantu siswa melihat informasi makanan dan minuman yang tersedia di kantin sekolah melalui sebuah aplikasi.

Sebelum membuat program, kita tidak langsung menulis kode. Kita harus memahami terlebih dahulu:

Masalah → Kebutuhan → Rancangan → Program → Pengujian

Jadi, tugas kita bukan hanya membuat aplikasi yang terlihat bagus, tetapi memahami mengapa aplikasi tersebut dibuat dan bagaimana cara kerjanya.

---

2. Masalah yang Ingin Diselesaikan

Di lingkungan sekolah terdapat berbagai makanan dan minuman yang dijual di kantin.

Namun, jika ingin mengetahui menu yang tersedia, siswa biasanya harus:

• datang langsung ke kantin;
• bertanya kepada penjual;
• melihat daftar menu secara manual;
• mencari tahu harga satu per satu.

Karena itu, kita akan mencoba membuat sebuah aplikasi sederhana yang dapat menampilkan informasi menu kantin dalam satu aplikasi.

---

3. Tujuan Aplikasi

Aplikasi dibuat agar pengguna dapat:

1. melihat daftar menu kantin;
2. mengetahui nama makanan atau minuman;
3. mengetahui harga;
4. mengetahui kantin yang menjual menu tersebut;
5. mengetahui kategori menu;
6. melihat detail suatu menu;
7. mencari menu tertentu;
8. memfilter menu berdasarkan kategori.

---

4. Siapa Pengguna Aplikasi?

Target pengguna aplikasi adalah:

👨‍🎓 Siswa

Siswa dapat menggunakan aplikasi untuk mencari informasi makanan dan minuman yang tersedia di kantin.

👩‍🏫 Guru

Guru dapat menggunakan aplikasi untuk melihat daftar menu kantin sekolah.

🏪 Penjual Kantin

Dalam pengembangan lebih lanjut, aplikasi dapat dikembangkan agar penjual dapat mengelola menu dan harga.

Pada praktikum kali ini, kita belum membuat sistem untuk penjual. Kita fokus terlebih dahulu pada aplikasi untuk melihat informasi menu.

---

5. Konsep Sederhana Aplikasi

Secara sederhana, alur aplikasi adalah:

                APLIKASI
                   │
                   ▼
             🏠 BERANDA
                   │
                   ▼
             📋 DAFTAR MENU
                   │
          ┌────────┴────────┐
          ▼                 ▼
       🔎 SEARCH          FILTER
          │                 │
          └────────┬────────┘
                   ▼
             🍔 MENU DIPILIH
                   │
                   ▼
             📄 DETAIL MENU

---

6. Halaman yang Akan Dibuat

🏠 A. Halaman Beranda

Halaman pertama yang dilihat pengguna.

Berisi:

• nama aplikasi;
• informasi singkat;
• kategori menu;
• daftar menu populer.

Contoh:

🍔 KANTIN SMKN 1 BANJAR

Temukan menu favoritmu!

[ Semua ] [ Makanan ] [ Minuman ]

Menu Pilihan

🍜 Mie Goreng
Rp8.000

🍗 Ayam Geprek
Rp12.000

🥤 Es Teh
Rp3.000

---

7. Halaman Daftar Menu

Halaman ini menampilkan semua menu yang tersedia.

Setiap menu minimal memiliki:

Nama Menu
Harga
Kategori
Nama Kantin

Contoh:

┌──────────────────────────┐
│ 🍜 Mie Goreng            │
│                          │
│ Kantin Bu Ani            │
│ Makanan                  │
│ Rp8.000                  │
└──────────────────────────┘

Menu akan ditampilkan menggunakan widget Flutter seperti:

• ListView
• Card
• Row
• Column
• Text
• Icon

---

8. Halaman Detail Menu

Ketika pengguna memilih salah satu menu, aplikasi akan membuka halaman detail.

Contoh:

🍜 Mie Goreng

Kantin:
Kantin Bu Ani

Kategori:
Makanan

Harga:
Rp8.000

Deskripsi:
Mie goreng dengan telur dan sayuran.

Status:
Tersedia

Konsep Flutter yang akan dipelajari:

List Menu → Klik Menu → Navigator → Detail Menu

---

9. Fitur Pencarian 🔎

Aplikasi akan memiliki fitur pencarian menu.

Misalnya pengguna mengetik:

ayam

Maka aplikasi menampilkan:

🍗 Ayam Geprek
🍗 Ayam Bakar
🍜 Mie Ayam

Fitur ini akan membantu kita memahami bagaimana data dapat dicari dan difilter.

---

10. Fitur Kategori

Menu dapat dikelompokkan berdasarkan kategori.

Contoh:

Semua
Makanan
Minuman
Snack

Jika pengguna memilih:

Minuman

maka aplikasi hanya menampilkan menu minuman.

Contoh:

🥤 Es Teh
🥤 Es Jeruk
🥤 Jus Alpukat
☕ Kopi

---

11. Data Menu

Untuk praktikum awal, kita belum menggunakan database.

Data menu akan dibuat terlebih dahulu di dalam program.

Contoh:

Nama	Harga	Kategori	Kantin
Mie Goreng	Rp8.000	Makanan	Bu Ani
Nasi Goreng	Rp10.000	Makanan	Bu Ani
Ayam Geprek	Rp12.000	Makanan	Pak Udin
Es Teh	Rp3.000	Minuman	Bu Ani
Es Jeruk	Rp4.000	Minuman	Pak Udin

Nantinya, pada materi berikutnya data seperti ini dapat dikembangkan menjadi:

List → Model → CRUD → Database/Local Storage → API

---

12. Widget Flutter yang Kemungkinan Digunakan

Dalam proyek ini kita akan menggunakan beberapa widget Flutter.

Kebutuhan	Widget
Struktur aplikasi	MaterialApp
Struktur halaman	Scaffold
Judul halaman	AppBar
Teks	Text
Gambar	Image
Tombol	ElevatedButton / IconButton
Susunan vertikal	Column
Susunan horizontal	Row
Kartu menu	Card
Jarak	Padding / SizedBox
Daftar menu	ListView
Input pencarian	TextField
Pindah halaman	Navigator

---

13. Tampilan Awal yang Ditargetkan

Secara sederhana aplikasi kita akan memiliki tampilan seperti:

┌──────────────────────────────┐
│ 🍔 Kantin SMKN 1 Banjar      │
├──────────────────────────────┤
│                              │
│ Selamat Datang! 👋           │
│ Mau makan apa hari ini?      │
│                              │
│ 🔎 Cari menu...              │
│                              │
│ Kategori                     │
│                              │
│ [Semua] [Makanan] [Minuman] │
│                              │
│ Menu Kantin                  │
│                              │
│ ┌──────────────────────────┐ │
│ │ 🍜 Mie Goreng            │ │
│ │ Kantin Bu Ani            │ │
│ │ Rp8.000                  │ │
│ └──────────────────────────┘ │
│                              │
│ ┌──────────────────────────┐ │
│ │ 🍗 Ayam Geprek           │ │
│ │ Kantin Pak Udin          │ │
│ │ Rp12.000                 │ │
│ └──────────────────────────┘ │
│                              │
└──────────────────────────────┘

Tampilan tersebut adalah contoh rancangan, bukan sesuatu yang harus disalin persis.

Kalian boleh membuat desain sendiri.

---

14. Aturan Penting Praktikum

❌ Jangan hanya Copy-Paste

Dalam pembelajaran ini, kalian boleh menggunakan AI sebagai asisten belajar, tetapi kalian harus memahami kode yang digunakan.

Jika AI memberikan kode:

Jangan langsung copy-paste.

Lakukan:

Baca → Pahami → Jalankan → Ubah → Uji

---

15. Tantangan Modifikasi

Setelah aplikasi dasar selesai, setiap siswa/kelompok harus menambahkan fitur sendiri.

Minimal pilih 2 fitur.

🟢 Challenge Level 1

• Tambahkan foto makanan.
• Tambahkan icon kategori.
• Tambahkan status tersedia/habis.
• Tambahkan deskripsi makanan.
• Tambahkan rating.

🟡 Challenge Level 2

• Fitur pencarian.
• Filter kategori.
• Menu favorit ❤️.
• Menu promo.
• Sorting berdasarkan harga.

🔴 Challenge Level 3

Untuk siswa yang lebih cepat:

• Keranjang sederhana.
• Tombol + dan − jumlah pesanan.
• Perhitungan total harga.
• Halaman checkout.
• Dark mode.

---

16. Alur Pembuatan Aplikasi

Kita akan bekerja secara bertahap.

1️⃣ Analisis masalah
        ↓
2️⃣ Membuat rancangan UI
        ↓
3️⃣ Membuat project Flutter
        ↓
4️⃣ Membuat halaman utama
        ↓
5️⃣ Membuat Card Menu
        ↓
6️⃣ Membuat daftar menu
        ↓
7️⃣ Membuat halaman detail
        ↓
8️⃣ Membuat Search
        ↓
9️⃣ Membuat Filter
        ↓
🔟 Modifikasi & Challenge
        ↓
1️⃣1️⃣ Testing
        ↓
1️⃣2️⃣ Presentasi

---

17. Indikator Keberhasilan

Kalian dianggap berhasil apabila dapat:

• menjalankan project Flutter;
• membuat tampilan aplikasi;
• menampilkan daftar menu;
• menampilkan harga;
• menampilkan kategori;
• menampilkan nama kantin;
• membuka detail menu;
• melakukan pencarian/filter;
• menambahkan minimal 2 fitur hasil modifikasi;
• menjelaskan kode yang kalian buat.

---

18. Pertanyaan yang Harus Bisa Kalian Jawab

Setelah praktikum selesai, kalian harus mampu menjawab:

Pertanyaan 1

Apa fungsi Scaffold?

Pertanyaan 2

Apa perbedaan Row dan Column?

Pertanyaan 3

Mengapa menggunakan ListView?

Pertanyaan 4

Apa fungsi Card?

Pertanyaan 5

Bagaimana cara berpindah dari halaman daftar menu ke halaman detail?

Pertanyaan 6

Bagaimana aplikasi mengetahui menu yang dicari pengguna?

Pertanyaan 7

Apa yang terjadi jika data menu ditambah?

Pertanyaan 8

Apa fitur tambahan yang kalian buat sendiri?

Pertanyaan 9

Bagian kode mana yang paling kalian pahami?

Pertanyaan 10

Jika aplikasi ini dikembangkan lebih lanjut, data menu sebaiknya disimpan di mana?

---

🚀 ARAH PENGEMBANGAN

Aplikasi yang kita buat minggu ini masih sederhana.

Namun, aplikasi ini akan menjadi dasar untuk mempelajari materi berikutnya:

🍔 Daftar Menu Kantin
        ↓
       List
        ↓
     State
        ↓
      CRUD
        ↓
 Local Storage
        ↓
      API
        ↓
    Database
        ↓
🛒 Aplikasi Pemesanan Kantin

Jadi, aplikasi Daftar Menu Kantin bukan tujuan akhir.

Ini adalah langkah pertama untuk belajar bagaimana sebuah aplikasi mobile dikembangkan dari sederhana menjadi aplikasi yang lebih lengkap.

🎯 Target kita

Bukan sekadar "aplikasinya jadi".

Target kita adalah kalian bisa menjelaskan bagaimana aplikasi tersebut bekerja dan mampu mengembangkan fitur baru sendiri.

Read More