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

Rencana 🍔 PRAKTIKUM FLUTTER Aplikasi Daftar Menu Kantin SMKN 1 Banjar

Rencana Pembelajaran Mingguan Untuk 14 JP (Senin 2 JP, Selasa 6 JP, Kamis 6 JP), saya berencana mengarahkan prakikum pembelajaran membuat aplikasi 🍔 Daftar Menu Kantin dijadikan proyek bertahap, bukan langsung memberikan main.dart lengkap.

Target akhirnya:

Siswa mampu membuat aplikasi Flutter sederhana yang menampilkan daftar kantin, menu makanan/minuman, harga, kategori, dan detail menu, kemudian memodifikasinya dengan fitur hasil pemikiran sendiri.

---

🍔 PRAKTIKUM FLUTTER

Aplikasi Daftar Menu Kantin SMKN 1 Banjar

⏱️ Total: 14 JP

Hari	JP	Fokus
Senin	2 JP	🧠 Konsep + Demo + mulai UI
Selasa	6 JP	💻 Praktik membangun aplikasi
Kamis	6 JP	🚀 Penyempurnaan + Challenge + Presentasi

Pola pembelajaran

Aktivitas	Porsi	Total 14 JP
🧠 Konsep	15%	±2 JP
👨‍🏫 Demo	20%	±3 JP
💻 Praktik	45%	±6 JP
🚀 Challenge	20%	±3 JP

---

🎯 TARGET AKHIR

Pada akhir praktikum siswa memiliki aplikasi:

🍔 KANTIN SMKN 1 BANJAR

Contoh tampilan:

┌──────────────────────────────┐
│ 🍔 Kantin SMKN 1 Banjar      │
│ Temukan menu favoritmu!      │
├──────────────────────────────┤
│ 🔎 Cari menu...              │
├──────────────────────────────┤
│ Kategori                     │
│ [Semua] [Makanan] [Minuman]  │
├──────────────────────────────┤
│                              │
│ 🍜  Mie Goreng               │
│     Kantin Bu Ani            │
│     Rp 8.000                 │
│                              │
│ 🍗  Ayam Geprek              │
│     Kantin Pak Udin          │
│     Rp 12.000                │
│                              │
│ 🥤  Es Teh                   │
│     Kantin Bu Ani            │
│     Rp 3.000                 │
│                              │
└──────────────────────────────┘

Tidak harus persis seperti ini. Yang penting struktur dan konsepnya dipahami siswa.

---

🟦 SENIN — 2 JP

"Kenalan dengan Aplikasi yang Akan Dibuat"

🎯 Tujuan

Siswa mampu:

• memahami tujuan aplikasi;
• mengidentifikasi komponen UI;
• memahami MaterialApp;
• memahami Scaffold;
• menggunakan AppBar;
• menggunakan Text;
• menggunakan Container;
• menggunakan Column;
• menggunakan Row;
• menggunakan Card.

---

JP 1 — KONSEP + ANALISIS

1. Guru membuka dengan masalah nyata

Jangan langsung mulai dari kode.

Tanyakan:

"Kalau kalian ingin membeli makanan di kantin sekolah, informasi apa yang kalian butuhkan?"

Biarkan siswa menjawab:

• nama makanan;
• harga;
• kantin;
• kategori;
• foto;
• ketersediaan;
• dll.

Kemudian guru:

"Nah, hari ini kita akan mengubah informasi tersebut menjadi aplikasi mobile."

---

🧠 Aktivitas 1 — Analisis UI

Tampilkan rancangan sederhana:

KANTIN SMKN 1 BANJAR

[ 🔎 Cari Menu ]

Kategori:
[ Semua ] [ Makanan ] [ Minuman ]

-------------------------
🍜 Mie Goreng
Kantin Bu Ani
Rp8.000
-------------------------

🍗 Ayam Geprek
Kantin Pak Udin
Rp12.000
-------------------------

Siswa mengisi tabel:

Komponen	Widget Flutter yang mungkin digunakan
Judul aplikasi	?
Nama makanan	?
Harga	?
Kartu menu	?
Tombol	?
Gambar	?

Jangan langsung diberikan jawabannya.

Tujuannya supaya mereka mulai berpikir:

"Masalah → desain → widget."

---

JP 2 — DEMO GURU

Guru membuat aplikasi dari kosong bersama siswa.

Urutannya:

flutter create kantin_app
        ↓
main.dart
        ↓
MaterialApp
        ↓
Scaffold
        ↓
AppBar
        ↓
Body
        ↓
Column
        ↓
Card

Guru cukup membuat 1 kartu menu.

Misalnya:

🍜 Mie Goreng
Kantin Bu Ani
Rp8.000

Jangan membuat seluruh aplikasi.

Ini penting.

Guru hanya memberikan:

"Contoh 1 item. Sisanya kalian lanjutkan."

---

📌 TUGAS SENIN

Siswa harus menghasilkan:

Minimal

AppBar
   ↓
Judul
   ↓
1 Card Menu
   ↓
Nama
   ↓
Kantin
   ↓
Harga

Bukti pekerjaan

Siswa mengumpulkan:

1. Screenshot aplikasi.
2. Screenshot kode.
3. Menjawab 5 pertanyaan.

Contoh:

1. Apa fungsi Scaffold?

2. Apa fungsi Column?

3. Apa fungsi Card?

4. Mengapa Text digunakan untuk nama makanan?

5. Apa yang terjadi jika Column diganti dengan Row?

---

🟨 SELASA — 6 JP

"Membangun Daftar Menu"

Ini sesi pembangunan aplikasi utama.

---

JP 3 — MEMBUAT DATA MENU

Guru mengenalkan konsep:

List

Contoh konsep:

Daftar menu

1. Mie Goreng
2. Nasi Goreng
3. Ayam Geprek
4. Es Teh
5. Es Jeruk

Siswa membuat beberapa data.

Target:

Minimal 5 menu.

---

JP 4 — MEMBUAT LIST MENU

Masuk ke:

ListView

Siswa mengubah:

satu Card

menjadi:

banyak Card.

Konsep:

List data
    ↓
perulangan
    ↓
Widget
    ↓
ListView

---

JP 5 — MEMBUAT MODEL MENU

Mulai dikenalkan struktur data sederhana.

Misalnya setiap menu memiliki:

nama
harga
kategori
kantin

Contoh secara konsep:

Menu
├── nama
├── harga
├── kategori
└── kantin

Guru menjelaskan bahwa aplikasi nyata tidak menyimpan semua informasi sebagai teks acak.

---

JP 6 — MEMBUAT UI LEBIH MENARIK

Siswa menambahkan:

• Icon;
• warna;
• Card;
• spacing;
• border radius;
• typography;
• gambar jika memungkinkan.

Challenge kecil

Guru memberikan:

"Buat kartu menu kalian berbeda dari contoh guru."

Misalnya:

• harga diberi warna;
• icon makanan;
• badge kategori;
• layout harga di sebelah kanan.

---

JP 7 — DETAIL MENU

Ketika menu diklik:

Daftar Menu
     ↓
Klik Mie Goreng
     ↓
Detail Menu

Halaman detail:

🍜

Mie Goreng

Kantin Bu Ani

Rp8.000

Kategori:
Makanan

Deskripsi:
Mie goreng dengan telur...

Siswa belajar:

Navigator

dan konsep:

Halaman → halaman lain

---

JP 8 — CHECKPOINT SELASA

Di akhir Selasa, aplikasi minimal harus sudah memiliki:

✅ Wajib

• AppBar
• Daftar menu
• Minimal 5 menu
• Nama menu
• Harga
• Kantin
• Kategori
• Card
• ListView
• Klik menu
• Halaman detail

📸 Bukti

Siswa mengumpulkan:

Screenshot 1

Halaman daftar menu.

Screenshot 2

Halaman detail.

Screenshot 3

Kode program.

---

🟩 KAMIS — 6 JP

"Jangan Copy-Paste — Buat Aplikasi Versimu"

Ini bagian yang saya sarankan dibuat lebih serius.

Karena setelah dua hari siswa sudah memiliki produk dasar, Kamis digunakan untuk:

MODIFIKASI + CHALLENGE + PRESENTASI

---

JP 9 — SEARCH MENU

Guru memperkenalkan:

TextField

Siswa membuat:

🔎 Cari menu...

Ketika mengetik:

ayam

yang ditampilkan:

🍗 Ayam Geprek
🍗 Ayam Bakar

---

JP 10 — FILTER KATEGORI

Tambahkan:

[ Semua ]
[ Makanan ]
[ Minuman ]
[ Snack ]

Contoh:

Semua
 ↓
semua menu

Minuman
 ↓
Es Teh
Es Jeruk
Jus Alpukat

Siswa belajar konsep:

data → filter → tampilan

---

JP 11 — PERSONALISASI UI

Sekarang guru tidak memberikan desain.

Instruksi:

"Buat aplikasi kalian memiliki identitas sendiri."

Siswa memilih:

• warna utama;
• logo;
• nama kantin;
• icon;
• layout Card;
• font;
• background.

Aturan:

Tidak boleh semua siswa memiliki UI identik.

---

JP 12 — 🚀 CHALLENGE

Nah, ini bagian 20% Challenge.

Setiap siswa/kelompok wajib mengambil minimal 2 challenge.

🟢 Level 1

• Tambahkan foto menu.
• Tambahkan kategori.
• Tambahkan icon.
• Tambahkan rating.
• Tambahkan deskripsi.

🟡 Level 2

• Search menu.
• Filter kategori.
• Tombol favorit ❤️.
• Menu "Promo".
• Status tersedia/habis.

🔴 Level 3

Untuk siswa yang lebih cepat:

• Keranjang sederhana.
• Hitung total harga.
• Quantity +/−.
• Halaman checkout.
• Dark mode.
• Sorting harga termurah → termahal.

---

🧠 ATURAN ANTI COPY-PASTE AI

Saya sangat menyarankan membuat aturan AI seperti ini:

AI BOLEH:

✅ bertanya tentang error
✅ meminta penjelasan kode
✅ meminta contoh konsep
✅ meminta bantuan memahami widget
✅ meminta alternatif solusi

AI TIDAK BOLEH:

❌ "Buatkan seluruh aplikasi saya."

❌ copy-paste main.dart tanpa memahami.

❌ mengumpulkan kode yang tidak bisa dijelaskan.

---

🎤 TES LISAN 3 MENIT

Setiap kelompok dipilih secara acak.

Guru menunjuk kode:

ListView

dan bertanya:

"Apa fungsi kode ini?"

Kemudian:

Navigator.push(...)

"Apa yang terjadi ketika kode ini dijalankan?"

Kemudian:

setState(...)

"Mengapa kita menggunakan ini?"

Kalau siswa bisa menjelaskan, berarti dia tidak sekadar copy-paste.

---

JP 13 — TESTING

Siswa melakukan pengujian.

Buat tabel:

No	Fitur	Hasil	Status
1	Aplikasi dibuka	Berhasil	✅
2	Menu tampil	Berhasil	✅
3	Klik menu	Berhasil	✅
4	Detail tampil	Berhasil	✅
5	Search	Berhasil	✅
6	Filter	Berhasil	✅
7	Challenge	Berhasil	✅

Kemudian siswa melakukan:

🐞 Bug Hunting

Cari minimal 3 hal yang perlu diperbaiki.

Contoh:

Harga salah.

Gambar tidak muncul.

Tombol tidak berfungsi.

Layout overflow.

---

JP 14 — PRESENTASI MINI

Setiap kelompok mendapat sekitar 3–5 menit.

Format:

1. Masalah

"Kami membuat aplikasi daftar menu kantin karena..."

2. Demo

Tunjukkan aplikasi.

3. Fitur

Jelaskan:

• daftar menu;
• detail;
• search;
• filter;
• challenge.

4. Kode

Guru meminta satu siswa menjelaskan kode.

5. Refleksi

"Bagian tersulit dari pembuatan aplikasi ini adalah..."

---

📊 RUBRIK PENILAIAN

Saya sarankan jangan hanya menilai "aplikasinya bagus".

Komponen	Bobot
Pemahaman konsep Flutter	15
Struktur & kerapihan kode	15
Fitur wajib	20
UI/UX	15
Challenge/modifikasi	15
Testing & debugging	10
Presentasi & kemampuan menjelaskan	10
TOTAL	100

⭐ Prinsip penting

Aplikasi bagus tetapi siswa tidak bisa menjelaskan kode → nilainya tidak maksimal.

Sebaliknya:

Aplikasi sederhana tetapi siswa memahami dan mampu menjelaskan → tetap mendapatkan nilai baik.

---

📦 HASIL AKHIR YANG DIKUMPULKAN

Setiap siswa/kelompok memiliki:

📁 kantin_app
│
├── Source Code Flutter
│
├── Screenshot aplikasi
│
├── LKPD
│
├── Testing
│
├── Dokumentasi
│
└── Presentasi

Dan saya sarankan ditutup dengan satu pertanyaan refleksi:

"Jika aplikasi ini dikembangkan selama 1 bulan lagi, fitur apa yang akan kalian tambahkan?"

Ini akan menjadi jembatan yang bagus menuju proyek berikutnya: CRUD → penyimpanan lokal → API.

🔥 Urutan kompetensi yang terbentuk

🍔 DAFTAR MENU KANTIN
        │
        ▼
Flutter UI
        │
        ▼
Widget & Layout
        │
        ▼
List & Data
        │
        ▼
Navigation
        │
        ▼
Search & Filter
        │
        ▼
State
        │
        ▼
CRUD
        │
        ▼
Local Storage
        │
        ▼
API
        │
        ▼
🚀 FINAL PROJECT

Dengan pola ini, Daftar Menu Kantin bukan sekadar tugas membuat tampilan, tetapi menjadi proyek pertama yang memperkenalkan hampir seluruh pola berpikir yang nantinya diperlukan siswa untuk membuat aplikasi Flutter yang lebih kompleks.

Read More

🗺️ ROAD MAP FLUTTER KELAS XI — 1 TAHUN

Untuk kelas XI SMK/PPLG-RPL, saya berencana pembelajaran Flutter tidak terlalu berorientasi pada “menghafal widget”, tetapi dibuat project-based: setiap minggu siswa menghasilkan aplikasi kecil yang bisa langsung dijalankan.

Target satu tahun: dari belum menguasai Flutter → mampu membuat aplikasi CRUD sederhana → memakai API → menyimpan data lokal → membuat 1 project akhir yang layak dipresentasikan.

🗺️ ROAD MAP FLUTTER KELAS XI — 1 TAHUN

Saya buat dalam 36 minggu efektif, dengan asumsi 1 pertemuan utama per minggu. Setiap minggu ada produk/aplikasi sederhana.

FASE 1 — FUNDAMENTAL DART & FLUTTER

Minggu 1–6

Minggu	Materi	Aplikasi/Produk
1	Pengenalan Flutter, Dart, struktur project	👋 Hello Flutter App
2	main(), MaterialApp, Scaffold, Text, Icon	🪪 Kartu Profil Siswa
3	Container, Row, Column, Padding, SizedBox	🏠 Dashboard Sekolah
4	Image, Card, ListView	🍔 Daftar Menu Kantin
5	Button, TextField, input pengguna	📝 Form Data Siswa
6	State dasar, setState()	🔢 Counter App

Target akhir fase:

Siswa sudah bisa:

• membuat project Flutter;
• memahami main.dart;
• menggunakan widget dasar;
• membuat layout;
• menerima input;
• mengubah tampilan berdasarkan state.

---

FASE 2 — UI/UX & NAVIGASI

Minggu 7–12

Minggu	Materi	Aplikasi
7	Tema, warna, typography, ButtonStyle	🎨 Aplikasi Profil Modern
8	Form & validasi input	📋 Form Pendaftaran Siswa
9	Navigator, route	📱 Multi Page School App
10	Passing data antar halaman	👤 Data Profil Siswa
11	BottomNavigationBar	🏫 School Information App
12	Mini Project	📚 Aplikasi Perpustakaan Mini

Project minggu 12

Contoh:

SMKN 1 Banjar Library

Halaman:

• Beranda
• Daftar Buku
• Detail Buku
• Profil

Siswa mulai belajar bahwa aplikasi bukan sekadar kumpulan widget, tetapi memiliki alur pengguna.

---

FASE 3 — STATE MANAGEMENT DASAR

Minggu 13–18

Di sini siswa mulai membuat aplikasi yang benar-benar "hidup".

Minggu	Materi	Aplikasi
13	State & setState() lebih dalam	🔢 Counter Plus/Minus/Reset
14	Conditional UI	🚦 Status Kehadiran
15	List & manipulasi data	🛒 Shopping List
16	Add/Delete data	✅ To Do List
17	Edit data	📋 Task Manager
18	Mini Project	🧹 Aplikasi Piket Kelas

Project utama:

Aplikasi Piket Kelas

Fitur:

Dashboard
   ↓
Daftar Petugas
   ↓
Tambah Petugas
   ↓
Checklist Tugas
   ↓
Status Selesai/Belum
   ↓
Hapus/Edit

Ini sangat cocok untuk siswa SMK karena dekat dengan kehidupan sekolah.

---

FASE 4 — FORM + CRUD

Minggu 19–24

Ini salah satu fase terpenting.

Siswa mulai memahami konsep:

Create → Read → Update → Delete

Minggu	Materi	Aplikasi
19	Konsep CRUD	👥 Data Siswa
20	Create & Read	📚 Data Buku
21	Update	📦 Data Barang
22	Delete + confirmation	🛍️ Data Produk
23	Search & filtering	🔎 Pencarian Produk
24	Mini Project CRUD	🏪 Aplikasi Inventaris Sekolah

Project minggu 24

Inventaris Barang Sekolah

Contoh:

Laptop
Proyektor
Kursi
Meja
Kamera
Printer

Fitur:

• tambah barang;
• lihat barang;
• edit barang;
• hapus barang;
• pencarian;
• kategori;
• kondisi barang.

---

FASE 5 — PENYIMPANAN DATA LOKAL

Minggu 25–28

Sekarang siswa belajar bahwa data aplikasi tidak boleh hilang ketika aplikasi ditutup.

Minggu	Materi	Aplikasi
25	Konsep local storage	💾 Save Name App
26	SharedPreferences	⚙️ Settings App
27	Penyimpanan list/data	📝 Persistent To Do List
28	Mini Project	💰 Catatan Keuangan Siswa

Project:

Catatan Keuangan Siswa

Contoh transaksi:

Uang Masuk
+ Rp20.000

Uang Keluar
- Rp5.000
- Rp3.000

Saldo
Rp12.000

Siswa belajar konsep data yang persistent.

---

FASE 6 — API & INTERNET

Minggu 29–33

Ini fase yang sangat penting sebelum naik ke level pengembangan aplikasi modern.

Minggu	Materi	Aplikasi
29	Apa itu API & JSON	🌐 API Explorer
30	HTTP GET	👥 User API App
31	JSON → Model	📰 News Reader
32	Loading, Error, Empty State	🌦️ Weather App
33	Mini Project API	🍳 Recipe API App

Siswa belajar alur:

Flutter
   ↓
HTTP Request
   ↓
API
   ↓
JSON
   ↓
Model
   ↓
Flutter UI

Ini akan menjadi jembatan menuju backend/API/database.

---

FASE 7 — PROJECT AKHIR

Minggu 34–36

Di tiga minggu terakhir siswa membuat aplikasi yang lebih lengkap.

Minggu 34 — Analisis

Siswa menentukan:

• masalah;
• target pengguna;
• fitur;
• user flow;
• wireframe;
• database/data structure.

Minggu 35 — Development

Siswa mengembangkan:

UI
 ↓
Navigation
 ↓
State
 ↓
CRUD
 ↓
Storage/API

Minggu 36 — Presentasi

Setiap kelompok melakukan:

Demo → Presentasi → Testing → Dokumentasi

---

🚀 CONTOH PROJECT AKHIR

Saya sarankan jangan semua siswa membuat aplikasi yang sama.

Beri beberapa pilihan:

Kelompok 1

🍱 Aplikasi Pemesanan Kantin

Kelompok 2

📚 Aplikasi Perpustakaan

Kelompok 3

🧹 Aplikasi Piket Kelas

Kelompok 4

💰 Aplikasi Keuangan Siswa

Kelompok 5

📦 Aplikasi Inventaris

Kelompok 6

📝 Aplikasi To Do List

Kelompok 7

🎫 Aplikasi Event Sekolah

Kelompok 8

🏫 Aplikasi Informasi Sekolah

---

🎯 SKEMA KEMAMPUAN SISWA

Road map tersebut sebenarnya membentuk tangga kemampuan:

LEVEL 1
DART
│
├── Variable
├── Function
├── List
└── Conditional
       ↓
LEVEL 2
FLUTTER UI
│
├── Widget
├── Layout
├── Form
└── Theme
       ↓
LEVEL 3
INTERACTION
│
├── Button
├── Input
├── setState
└── Navigation
       ↓
LEVEL 4
CRUD
│
├── Create
├── Read
├── Update
└── Delete
       ↓
LEVEL 5
DATA
│
├── Local Storage
├── JSON
└── Model
       ↓
LEVEL 6
API
│
├── HTTP
├── REST API
└── JSON
       ↓
LEVEL 7
PROJECT
│
└── Aplikasi Mobile
      siap dipresentasikan

⭐ Pola pembelajaran setiap minggu

Agar siswa tidak hanya copy-paste kode dari AI, saya sarankan setiap pertemuan menggunakan pola:

15% → Konsep

Guru menjelaskan konsep baru.

20% → Demo

Guru membuat contoh kecil bersama siswa.

45% → Praktik

Siswa memodifikasi dan mengembangkan aplikasi.

20% → Challenge

Berikan fitur tambahan yang tidak ada di contoh guru.

Misalnya:

"Aplikasi To Do List sudah bisa tambah dan hapus tugas. Sekarang tambahkan fitur prioritas tugas."

Dengan demikian AI boleh digunakan sebagai asisten coding, tetapi siswa tetap harus memahami program.

---

📱 Target produk selama satu tahun

Jika konsisten dengan pola ini, satu siswa/kelompok akan memiliki portofolio seperti:

1. 👋 Hello Flutter
2. 🪪 Kartu Profil
3. 🏫 Dashboard Sekolah
4. 🍔 Menu Kantin
5. 📝 Form Siswa
6. 🔢 Counter
7. 🎨 UI Modern
8. 📋 Form Pendaftaran
9. 📱 Multi Page App
10. 👤 Profil Siswa
11. 🏫 School App
12. 📚 Library App
13. 🔢 Counter Pro
14. 🚦 Kehadiran
15. 🛒 Shopping List
16. ✅ To Do List
17. 📋 Task Manager
18. 🧹 Piket Kelas
19. 👥 Data Siswa
20. 📚 Data Buku
21. 📦 Data Barang
22. 🛍️ Data Produk
23. 🔎 Search App
24. 🏪 Inventaris
25. 💾 Local Storage
26. ⚙️ Settings
27. 📝 Persistent To Do
28. 💰 Keuangan
29. 🌐 API Explorer
30. 👥 User API
31. 📰 News App
32. 🌦️ Weather App
33. 🍳 Recipe App
    34–36. 🚀 Final Project

Hasil akhirnya bukan hanya nilai, tetapi portofolio aplikasi Flutter yang bisa mereka dokumentasikan di blog/GitHub dan dipresentasikan sebagai karya PPLG/RPL.

Read More