Project: BMI Calculator – Build, Test, Explain & Install

 

🧑‍💻 PRAKTIKUM MENDALAM FLUTTER

Project: BMI Calculator – Build, Test, Explain & Install

Target akhirnya bukan hanya APK berhasil dibuat, tetapi setiap siswa mampu:

Memahami → Menganalisis → Membuat → Menguji → Menjelaskan → Memasang → Mengevaluasi

Dengan 6 kelompok, masing-masing kelompok menghasilkan 1 varian aplikasi BMI.

---

1. Tujuan Pembelajaran

Pada akhir pembelajaran, siswa diharapkan mampu:

Pengetahuan

Siswa mampu menjelaskan:

• apa itu BMI;
• rumus BMI;
• input tinggi dan berat badan;
• bagaimana Flutter menerima input;
• bagaimana data diproses;
• bagaimana hasil BMI ditampilkan;
• konsep TextField, Button, State, dan setState();
• bagaimana aplikasi Flutter dibuild menjadi APK.

Keterampilan

Siswa mampu:

• membaca struktur main.dart;
• memodifikasi UI;
• membuat input tinggi dan berat;
• membuat proses perhitungan BMI;
• membuat kategori hasil BMI;
• melakukan testing;
• build APK;
• menginstal APK pada HP.

Sikap

Siswa menunjukkan:

• kerja sama;
• pembagian tugas;
• komunikasi;
• tanggung jawab;
• kemampuan menjelaskan hasil kerja;
• kemampuan menemukan dan memperbaiki kesalahan.

---

2. Konsep Besar Pembelajaran

Saya sarankan setiap kelompok mempunyai peran, bukan hanya 1 siswa yang bekerja di laptop.

Karena:

6 laptop → 6 kelompok → 41 siswa

Misalnya:

Peran	Tugas
👨‍💻 Programmer	Menulis/mengubah kode
🔍 Code Analyst	Membaca dan menjelaskan kode
🎨 UI Designer	Merancang tampilan
🧪 Tester	Menguji aplikasi
📝 Documenter	Mencatat proses
🎤 Presenter	Menyiapkan penjelasan
📱 APK Tester	Menginstal dan mencoba APK

Dalam satu kelompok, peran boleh bergantian.

Ini penting supaya siswa yang tidak memegang laptop tidak menjadi “penonton”.

---

3. ALUR PEMBELAJARAN 08.45–14.15

Total waktu efektif sekitar 5 jam 30 menit.

Saya akan membaginya menjadi 7 fase.

---

🟢 FASE 1 — THINK

08.45–09.10

"Mengapa kita membutuhkan BMI Calculator?"

Jangan langsung membuka Flutter.

Mulai dengan masalah nyata.

Tampilkan pertanyaan:

"Bagaimana sebuah aplikasi bisa menentukan kategori BMI seseorang hanya dari berat dan tinggi badan?"

Minta setiap kelompok mendiskusikan:

1. Data apa yang dibutuhkan?
2. Bagaimana menghitung BMI?
3. Apa rumusnya?
4. Bagaimana aplikasi mengetahui kategori seseorang?
5. Apa yang terjadi jika pengguna memasukkan data yang salah?

Contoh:

Berat: 60 kg
Tinggi: 170 cm

Siswa menghitung manual:

BMI = berat / (tinggi × tinggi)

Karena tinggi harus dalam meter:

BMI = 60 / (1.70 × 1.70)
BMI = 20.76

Kemudian siswa menentukan kategorinya.

Tujuan fase ini

Siswa memahami:

Program bukan dimulai dari kode, tetapi dari masalah dan logika.

---

🟡 FASE 2 — PLAN

09.10–09.35

"Rancang aplikasi sebelum coding"

Setiap kelompok membuat rancangan sederhana.

A. Input

Nama
Berat badan
Tinggi badan

B. Proses

Input
 ↓
Validasi
 ↓
Konversi tinggi
 ↓
Hitung BMI
 ↓
Tentukan kategori

C. Output

Nilai BMI
Kategori
Pesan

Kemudian setiap kelompok menggambar wireframe di kertas.

Contoh:

┌─────────────────────────┐
│      BMI CALCULATOR     │
│                         │
│  Nama                   │
│  ┌───────────────────┐  │
│  │                   │  │
│  └───────────────────┘  │
│                         │
│  Berat Badan (kg)       │
│  ┌───────────────────┐  │
│  │                   │  │
│  └───────────────────┘  │
│                         │
│  Tinggi Badan (cm)      │
│  ┌───────────────────┐  │
│  │                   │  │
│  └───────────────────┘  │
│                         │
│       [ HITUNG BMI ]    │
│                         │
│      BMI: 20.76         │
│      NORMAL             │
└─────────────────────────┘

---

🔵 FASE 3 — EXPLORE

09.35–10.00

Sekarang masuk ke kode.

Tetapi jangan langsung diberikan kode lengkap.

Minta siswa membuka project Flutter dan mencari:

void main()

Kemudian cari:

MaterialApp

Kemudian:

Scaffold

Kemudian:

TextField

dan:

ElevatedButton

dan:

setState()

Tantangan Code Detective

Berikan tabel:

Kode	Menurut kelompok kami fungsinya
main()	...
MaterialApp	...
Scaffold	...
Text()	...
TextField()	...
ElevatedButton()	...
setState()	...

Jangan langsung diberi jawaban.

Biarkan mereka berdiskusi.

Ini bagian penting dari pembelajaran mendalam.

---

☕ 10.00–10.15 — ISTIRAHAT

---

🟠 FASE 4 — CREATE

10.15–11.45

🚀 BUILD THE BMI APP

Ini menjadi inti praktikum.

Tetapi gunakan sistem:

"Laptop adalah milik kelompok, bukan milik satu siswa."

Siswa bergantian.

Misalnya setiap 20 menit rotasi:

Rotasi 1

Programmer A → laptop

Rotasi 2

Programmer B → laptop

Rotasi 3

Programmer C → laptop

dst.

Sementara siswa lain mengerjakan:

• analisis kode;
• desain UI;
• testing;
• dokumentasi;
• menghitung data uji;
• mencari bug;
• menyiapkan presentasi.

---

4. Buat 6 Kelompok Memiliki "Identitas Aplikasi"

Ini bagian yang menurut saya sangat bagus untuk kelas Anda.

Jangan membuat 6 kelompok menghasilkan aplikasi yang 100% sama.

Buat:

Core aplikasi sama, tetapi setiap kelompok mempunyai diferensiasi.

Contohnya:

Kelompok	Tema
Kelompok 1	BMI Minimalist
Kelompok 2	BMI Sport
Kelompok 3	BMI Health
Kelompok 4	BMI Dark Mode
Kelompok 5	BMI Student
Kelompok 6	BMI Modern

Jadi seluruh siswa belajar logika yang sama, tetapi menghasilkan 6 produk berbeda.

---

5. Tantangan Tiap Kelompok

Supaya tidak hanya copy-paste, berikan challenge.

Kelompok 1

Tambahkan:

Reset

Kelompok 2

Tambahkan:

Validasi input kosong

Kelompok 3

Tambahkan:

Icon pada input

Kelompok 4

Tambahkan:

Dark mode / tampilan gelap

Kelompok 5

Tambahkan:

Pesan berbeda berdasarkan kategori BMI

Kelompok 6

Tambahkan:

Riwayat hasil BMI sederhana

Dengan begitu:

semua belajar dasar yang sama + masing-masing punya tantangan.

---

🧪 FASE 5 — TEST

11.45–12.30

Ini jangan dilewatkan.

Siswa sering berpikir:

"Kalau aplikasi bisa jalan berarti selesai."

Padahal programmer harus melakukan testing.

Setiap kelompok wajib membuat minimal 5 test case.

Contoh:

No	Berat	Tinggi	Hasil yang diharapkan	Hasil aplikasi	Status
1	50	165	BMI sesuai	...	✅/❌
2	60	170	BMI sesuai	...	✅/❌
3	80	170	BMI sesuai	...	✅/❌
4	kosong	170	muncul validasi	...	✅/❌
5	60	kosong	muncul validasi	...	✅/❌

Kemudian tambahkan:

"Bug Hunting"

Setiap kelompok harus menemukan minimal 1 masalah.

Misalnya:

• hasil BMI salah;
• input kosong menyebabkan error;
• keyboard menutupi tombol;
• tampilan terlalu kecil;
• kategori salah;
• tombol tidak bekerja.

Kemudian mereka harus memperbaikinya.

---

🟣 FASE 6 — BUILD APK

12.30–13.15

Sekarang masuk ke target akhir:

📱 "Dari source code menjadi aplikasi Android"

Jelaskan konsep:

main.dart
     ↓
Flutter
     ↓
Build
     ↓
APK
     ↓
HP Android
     ↓
Install
     ↓
Aplikasi berjalan

Siswa melakukan:

flutter build apk

Kemudian mencari APK hasil build.

Biasanya:

build/app/outputs/flutter-apk/app-release.apk

Kemudian APK dibagikan ke anggota kelompok.

---

📱 MISI WAJIB: SEMUA SISWA INSTALL APK

Ini bisa dibuat seperti achievement.

Setiap siswa harus memiliki:

✅ APK kelompok terinstal di HP

Kemudian mereka membuka aplikasinya.

Tidak cukup:

"APK sudah dibuat."

Tetapi:

"Saya berhasil menggunakan produk yang kelompok saya buat."

---

🔴 FASE 7 — SHOWCASE

13.15–13.50

Sekarang jangan presentasi panjang.

Gunakan konsep:

🎤 3 MENIT PER KELOMPOK

Setiap kelompok wajib menjawab:

1. Apa yang kalian buat?

2. Bagaimana cara menghitung BMI?

3. Bagian kode mana yang paling penting?

4. Bug apa yang kalian temukan?

5. Bagaimana cara memperbaikinya?

6. Apa perbedaan aplikasi kalian dengan kelompok lain?

---

🏆 Buat "Gallery Walk"

Setelah presentasi singkat, setiap kelompok menunjukkan APK.

Siswa dari kelompok lain mencoba.

Misalnya:

Kelompok 1 mencoba aplikasi kelompok 2.

Mereka memberikan feedback:

UI:
⭐⭐⭐⭐☆

Kemudahan penggunaan:
⭐⭐⭐⭐⭐

Fungsi:
⭐⭐⭐⭐☆

Hal yang menarik:
____________________

Saran:
____________________

Ini membuat siswa belajar dari produk kelompok lain, bukan hanya produk sendiri.

---

🧠 13.50–14.15

REFLEKSI PEMBELAJARAN

Ini bagian yang sering hilang dari praktikum.

Minta setiap siswa menjawab secara individu, bukan kelompok.

Exit Ticket

1. Hari ini saya memahami bahwa...

2. Bagian Flutter yang baru saya pahami adalah...

3. Kesalahan/bug yang saya temui adalah...

4. Saya memperbaikinya dengan cara...

5. Jika diberi kesempatan mengembangkan aplikasi ini, saya akan menambahkan...

6. Kontribusi saya dalam kelompok hari ini adalah...

---

📋 PENILAIAN

Saya menyarankan jangan hanya menilai APK.

Gunakan:

Komponen	Bobot
Pemahaman konsep	15%
Perencanaan/wireframe	10%
Coding	20%
Testing & debugging	15%
Produk APK	15%
Kolaborasi	10%
Presentasi	5%
Refleksi individu	10%
TOTAL	100%

Dengan demikian siswa yang tidak memegang laptop tetap bisa mendapatkan nilai tinggi jika kontribusinya memang kuat.

---

⭐ Sistem "Semua Harus Bisa Menjelaskan"

Saya sangat menyarankan aturan ini:

Guru boleh menunjuk anggota kelompok secara acak untuk menjelaskan kode.

Contoh:

Guru menunjuk siswa yang bukan programmer:

"Coba jelaskan fungsi setState() di aplikasi kalian."

Atau:

"Kenapa tinggi badan harus dibagi 100?"

Atau:

"Apa yang terjadi kalau input berat badan kosong?"

Ini mencegah:

❌ 1 siswa coding
❌ 6 siswa melihat
❌ semua bilang "kami sudah selesai"

Menjadi:

✅ semua memahami
✅ semua berkontribusi
✅ semua mampu menjelaskan.

---

🎯 Target Akhir Jam 14.15

Saya akan membuat indikator keberhasilan yang sangat konkret:

Setiap kelompok:

☑️ Memiliki source code Flutter
☑️ Memiliki desain UI sendiri
☑️ Bisa menghitung BMI
☑️ Bisa menentukan kategori
☑️ Memiliki validasi input
☑️ Melakukan testing
☑️ Menemukan dan memperbaiki bug
☑️ Berhasil build APK
☑️ APK terinstal di HP anggota
☑️ Mampu menjelaskan kode

Setiap siswa:

☑️ Memahami konsep BMI
☑️ Memahami alur input → proses → output
☑️ Mengetahui fungsi widget utama
☑️ Memiliki pengalaman menggunakan APK hasil kelompok
☑️ Mengetahui kontribusinya sendiri
☑️ Menulis refleksi pembelajaran

---

🔥 Saya akan beri nama aktivitas besok

"FLUTTER BMI CHALLENGE — FROM CODE TO APK"

Dengan alur besar:

       MASALAH
          ↓
       ANALISIS
          ↓
        DESAIN
          ↓
       CODING
          ↓
       TESTING
          ↓
     DEBUGGING
          ↓
      BUILD APK
          ↓
       INSTALL
          ↓
      SHOWCASE
          ↓
       REFLEKSI

Ini menurut saya jauh lebih bermakna daripada pembelajaran "hari ini kita membuat aplikasi BMI, ikuti kode berikut sampai selesai."

Karena siswa mengalami siklus pengembangan perangkat lunak secara nyata:

Problem → Design → Development → Testing → Debugging → Deployment → Evaluation.

Dan yang paling penting untuk kondisi 6 laptop : 41 siswa, pembelajaran tetap bisa aktif karena laptop menjadi pusat kerja kelompok, bukan pusat aktivitas satu orang.

Read More