Materi Flutter XI PPLG: Struktur Kontrol Dart dan Praktikum Aplikasi KantinKu

 


MATERI AJAR PEMROGRAMAN PERANGKAT BERGERAK

Struktur Kontrol Dart dalam Pengembangan Aplikasi Flutter

Proyek Praktikum: KantinKu – Aplikasi Kasir Kantin Sekolah

Mata Pelajaran: Pemrograman Perangkat Bergerak
Kelas: XI PPLG
Materi: Struktur Kontrol pada Dart
Media Pengembangan: Flutter dan Dart
Model Pembelajaran: Praktik mandiri berbantuan AI (AI-assisted coding)


A. Pendahuluan

Dalam pengembangan aplikasi, seorang programmer tidak hanya bertugas membuat tampilan yang menarik. Aplikasi juga harus mampu mengambil keputusan, mengolah data, mengulang proses, dan menangani berbagai kondisi yang mungkin terjadi.

Contohnya, aplikasi kasir kantin harus mampu menghitung jumlah belanja, menentukan apakah pelanggan mendapatkan diskon, memilih metode pembayaran, serta menolak transaksi ketika belum ada barang yang dipilih.

Kemampuan tersebut dapat dibangun menggunakan struktur kontrol dalam bahasa pemrograman Dart. Pada pembelajaran ini, kita akan menerapkan struktur kontrol ke dalam proyek sederhana bernama KantinKu, yaitu aplikasi kasir kantin sekolah berbasis Flutter.

Kalian juga diperbolehkan memanfaatkan AI sebagai asisten belajar dan pemrograman. Namun, kode yang dihasilkan AI tetap harus dibaca, diuji, dipahami, dan diperbaiki apabila belum sesuai kebutuhan.

B. Tujuan Pembelajaran

Setelah mempelajari materi dan menyelesaikan praktikum ini, peserta didik diharapkan mampu:

  1. Menjelaskan fungsi struktur kontrol dalam pemrograman Dart.

  2. Menerapkan percabangan if, else if, dan else.

  3. Menggunakan switch untuk memilih tindakan berdasarkan suatu kondisi.

  4. Menggunakan perulangan for, for-in, dan/atau while sesuai kebutuhan.

  5. Menjelaskan fungsi break, continue, dan perulangan bersarang (nested loop).

  6. Mengintegrasikan logika Dart ke dalam aplikasi Flutter.

  7. Memanfaatkan AI untuk membantu proses pengembangan aplikasi secara kritis dan bertanggung jawab.

  8. Menguji aplikasi, menemukan kesalahan, serta memperbaiki kode.

  9. Mendokumentasikan proses dan hasil praktikum dalam blog pribadi.

C. Mengenal Struktur Kontrol Dart

Struktur kontrol adalah bagian dari program yang menentukan bagaimana instruksi dijalankan. Secara umum, struktur kontrol yang akan dipelajari meliputi percabangan, pemilihan, dan perulangan.

1. Percabangan if, else if, dan else

Percabangan digunakan ketika program harus mengambil keputusan berdasarkan kondisi tertentu.

Contoh kasus: pelanggan mendapatkan diskon 10% jika subtotal belanja minimal Rp20.000.

void main() {
  double subtotal = 28000;
  double diskon = 0;

  if (subtotal >= 20000) {
    diskon = subtotal * 0.10;
  } else {
    diskon = 0;
  }

  double totalBayar = subtotal - diskon;

  print('Subtotal: Rp$subtotal');
  print('Diskon: Rp$diskon');
  print('Total bayar: Rp$totalBayar');
}

Penjelasan:

  • if memeriksa apakah subtotal minimal Rp20.000.

  • Jika kondisi benar, diskon dihitung sebesar 10%.

  • else dijalankan jika kondisi tidak terpenuhi.

  • Total pembayaran diperoleh dari subtotal dikurangi diskon.

Pada contoh tersebut, subtotal Rp28.000 menghasilkan diskon Rp2.800 dan total pembayaran Rp25.200.

Contoh penggunaan else if:

if (subtotal >= 50000) {
  print('Diskon kategori A');
} else if (subtotal >= 20000) {
  print('Diskon kategori B');
} else {
  print('Belum mendapat diskon');
}

Urutan kondisi perlu diperhatikan. Kondisi yang lebih tinggi sebaiknya diperiksa lebih dahulu agar keputusan program sesuai aturan yang diinginkan.

2. Percabangan switch

switch digunakan untuk memilih tindakan berdasarkan nilai suatu variabel. Pada aplikasi KantinKu, struktur ini dapat digunakan untuk menentukan petunjuk pembayaran.

String metodePembayaran = 'QRIS';

switch (metodePembayaran) {
  case 'Tunai':
    print('Silakan lakukan pembayaran tunai.');
    break;

  case 'QRIS':
    print('Silakan pindai kode QRIS.');
    break;

  case 'Transfer':
    print('Silakan lakukan transfer.');
    break;

  default:
    print('Metode pembayaran tidak dikenali.');
}

Penjelasan:

  • switch memeriksa nilai metodePembayaran.

  • case menentukan pilihan yang akan dijalankan.

  • break mengakhiri bagian pilihan tersebut.

  • default menjadi pilihan jika tidak ada nilai yang cocok.

3. Perulangan for

Perulangan digunakan untuk menjalankan instruksi berulang kali. Contohnya, menampilkan daftar menu kantin.

void main() {
  List<String> menu = [
    'Nasi Goreng',
    'Roti Bakar',
    'Es Teh',
    'Air Mineral'
  ];

  for (int i = 0; i < menu.length; i++) {
    print('${i + 1}. ${menu[i]}');
  }
}

Variabel i berfungsi sebagai indeks. Perulangan berlangsung selama nilai i masih lebih kecil daripada jumlah menu.

4. Perulangan for-in

for-in memudahkan kita memproses setiap elemen dalam sebuah kumpulan data.

void main() {
  List<int> hargaMenu = [12000, 8000, 4000, 3000];
  int total = 0;

  for (int harga in hargaMenu) {
    total += harga;
  }

  print('Total seluruh harga menu: Rp$total');
}

Dalam aplikasi kasir, perulangan dapat digunakan untuk menghitung subtotal berdasarkan harga dan jumlah setiap barang yang dipilih.

Contoh konsep perhitungan:

subtotal += harga * jumlah;

Baris tersebut berarti subtotal ditambah dengan hasil perkalian harga barang dan jumlah barang yang dibeli.

5. Perulangan while

while menjalankan instruksi selama kondisi masih bernilai benar.

int nomor = 1;

while (nomor <= 3) {
  print('Percobaan ke-$nomor');
  nomor++;
}

Perhatikan penggunaan nomor++. Jika nilai variabel tidak berubah, perulangan bisa berjalan tanpa berhenti.

6. Fungsi break dan continue

Kedua instruksi ini memiliki fungsi yang berbeda.

  • break menghentikan perulangan atau mengakhiri bagian switch yang sedang dijalankan.

  • continue melewati sisa instruksi pada iterasi saat ini dan melanjutkan ke iterasi berikutnya.

Contoh break:

for (int angka = 1; angka <= 10; angka++) {
  if (angka == 5) {
    break;
  }

  print(angka);
}

Program hanya menampilkan angka 1 sampai 4 karena perulangan berhenti ketika angka mencapai 5.

Contoh continue:

for (int angka = 1; angka <= 5; angka++) {
  if (angka == 3) {
    continue;
  }

  print(angka);
}

Program menampilkan angka 1, 2, 4, dan 5. Angka 3 dilewati.

7. Perulangan Bersarang (Nested Loop)

Nested loop adalah perulangan yang berada di dalam perulangan lain. Contohnya, menampilkan daftar menu berdasarkan kategori.

void main() {
  List<List<String>> kategoriMenu = [
    ['Nasi Goreng', 'Roti Bakar'],
    ['Es Teh', 'Air Mineral']
  ];

  for (int i = 0; i < kategoriMenu.length; i++) {
    print('Kategori ${i + 1}:');

    for (String menu in kategoriMenu[i]) {
      print('- $menu');
    }
  }
}

Pada contoh tersebut, perulangan luar memproses kategori, sedangkan perulangan dalam menampilkan menu di setiap kategori.

Tidak semua struktur kontrol harus digunakan dalam satu bagian program. Pilih struktur yang tepat berdasarkan kebutuhan aplikasi.

D. Mengenal Hubungan Dart dan Flutter

Dart merupakan bahasa pemrograman yang digunakan untuk menulis logika aplikasi. Flutter merupakan framework yang digunakan untuk membangun antarmuka dan aplikasi.

Dalam proyek KantinKu:

  • Dart digunakan untuk menghitung subtotal, menentukan diskon, memvalidasi transaksi, dan memilih metode pembayaran.

  • Flutter digunakan untuk menampilkan daftar menu, tombol penambah dan pengurang jumlah, informasi harga, serta total pembayaran.

Contoh tombol untuk menambah jumlah barang:

onPressed: () {
  setState(() {
    jumlah++;
  });
}

onPressed merupakan fungsi yang dijalankan ketika tombol ditekan. setState() memberi tahu Flutter bahwa keadaan (state) berubah sehingga tampilan perlu diperbarui.

Contoh tersebut merupakan potongan kode, bukan aplikasi lengkap. Penempatannya harus disesuaikan dengan struktur widget dan variabel pada proyek kalian.

E. Proyek Praktikum: KantinKu

1. Deskripsi Proyek

Buatlah aplikasi sederhana bernama KantinKu – Aplikasi Kasir Kantin Sekolah.

Aplikasi ini digunakan untuk memilih menu makanan atau minuman, menentukan jumlah pembelian, menghitung subtotal, memberikan diskon sesuai aturan, dan menampilkan informasi pembayaran.

Kalian boleh mengembangkan tampilan dan fitur tambahan selama fitur wajib tetap berfungsi dengan benar.

2. Ketentuan Menu

Gunakan minimal empat menu berikut sebagai data awal:

No.Nama MenuHarga
1Nasi GorengRp12.000
2Roti BakarRp8.000
3Es TehRp4.000
4Air MineralRp3.000

Aturan transaksi:

  • Pelanggan dapat menambah atau mengurangi jumlah setiap menu.

  • Subtotal dihitung dari harga dikalikan jumlah barang.

  • Jika subtotal minimal Rp20.000, pelanggan mendapat diskon 10%.

  • Jika subtotal kurang dari Rp20.000, diskon adalah Rp0.

  • Total bayar dihitung dari subtotal dikurangi diskon.

  • Metode pembayaran terdiri atas Tunai, QRIS, dan Transfer.

  • Aplikasi harus menolak atau memberi peringatan apabila pelanggan mencoba memproses transaksi tanpa memilih barang.

3. Fitur Wajib

Aplikasi KantinKu minimal harus memiliki fitur berikut.

  1. Daftar menu: menampilkan nama dan harga setiap makanan atau minuman.

  2. Pengaturan jumlah: menyediakan tombol tambah dan kurang untuk mengubah jumlah pembelian.

  3. Perhitungan subtotal: menghitung nilai setiap barang dan menjumlahkannya.

  4. Perhitungan diskon: menggunakan if-else sesuai aturan diskon.

  5. Pemilihan pembayaran: menggunakan switch untuk menentukan petunjuk pembayaran.

  6. Perulangan: menggunakan for, for-in, atau struktur perulangan yang sesuai untuk memproses daftar menu atau menghitung total.

  7. Validasi transaksi: mencegah transaksi kosong.

  8. Ringkasan pembayaran: menampilkan subtotal, diskon, metode pembayaran, dan total akhir.

  9. Tampilan yang mudah digunakan: teks terbaca, tombol berfungsi, dan informasi pembayaran jelas.

4. Alur Logika Aplikasi

Secara umum, alur aplikasi dapat disusun sebagai berikut:

  1. Aplikasi menampilkan daftar menu.

  2. Pelanggan memilih menu dan mengatur jumlah pembelian.

  3. Program memeriksa apakah ada barang yang dipilih.

  4. Jika tidak ada barang, program menampilkan peringatan.

  5. Jika ada barang, program menghitung subtotal dengan perulangan.

  6. Program memeriksa syarat diskon menggunakan if-else.

  7. Pelanggan memilih metode pembayaran.

  8. Program menentukan petunjuk pembayaran menggunakan switch.

  9. Program menampilkan ringkasan transaksi.

Sebelum menulis kode, gambarkan alur tersebut dalam bentuk flowchart sederhana. Flowchart boleh dibuat menggunakan kertas, diagrams.net, atau aplikasi lain.

F. Tahapan Praktikum

Praktikum 1 – Analisis Kebutuhan

Tuliskan:

  • Tujuan aplikasi.

  • Pengguna aplikasi.

  • Daftar menu dan harga.

  • Aturan diskon.

  • Metode pembayaran.

  • Kondisi yang harus ditolak atau diberi peringatan.

Praktikum 2 – Rancang Algoritma

Buat flowchart atau pseudocode yang menjelaskan proses pemilihan menu sampai ringkasan pembayaran ditampilkan.

Pastikan rancangan kalian menunjukkan penggunaan percabangan, perulangan, dan validasi.

Praktikum 3 – Membuat Logika Dart

Buat logika dasar untuk:

  • Menyimpan data menu.

  • Menghitung subtotal.

  • Menentukan diskon.

  • Menghitung total bayar.

  • Memilih metode pembayaran.

Uji logika tersebut terlebih dahulu. Kalian dapat menggunakan DartPad atau menjalankannya melalui proyek Flutter.

Praktikum 4 – Membangun Antarmuka Flutter

Buat tampilan yang memuat:

  • Judul aplikasi KantinKu.

  • Daftar menu dan harga.

  • Tombol tambah dan kurang.

  • Informasi jumlah barang.

  • Subtotal dan diskon.

  • Pilihan metode pembayaran.

  • Tombol proses transaksi.

  • Ringkasan pembayaran atau pesan validasi.

Praktikum 5 – Pengujian dan Perbaikan

Jalankan aplikasi pada emulator atau perangkat yang tersedia. Periksa apakah setiap tombol dan perhitungan berjalan sesuai aturan.

Jika terjadi kesalahan, baca pesan error, telusuri penyebabnya, kemudian lakukan perbaikan. Jangan hanya mengganti kode tanpa memahami masalahnya.

Praktikum 6 – Pengembangan Mandiri

Setelah fitur wajib berfungsi, tambahkan minimal satu fitur pengembangan berikut:

  • Tombol reset transaksi.

  • Kembalian untuk pembayaran tunai.

  • Pengelompokan menu makanan dan minuman.

  • Tampilan struk sederhana.

  • Fitur pencarian menu.

  • Fitur lain yang relevan dengan aplikasi kasir.

Jelaskan fitur tambahan yang kalian buat dan struktur kontrol yang digunakan.

G. Penggunaan AI Secara Bertanggung Jawab

Kalian diperbolehkan menggunakan AI untuk membantu memahami materi, merancang algoritma, menulis kode awal, atau memperbaiki error. Namun, AI bukan pengganti proses berpikir dan pengujian.

Gunakan prinsip 3B: Berpikir, Bangun, Buktikan.

  • Berpikir: pahami masalah, aturan transaksi, dan rancangan aplikasi sebelum meminta AI menulis kode.

  • Bangun: gunakan AI sebagai asisten, lalu baca dan sesuaikan kode dengan kebutuhan proyek.

  • Buktikan: jalankan aplikasi, lakukan pengujian, dokumentasikan hasil, dan jelaskan cara kerja kode.

Contoh prompt untuk membantu merancang algoritma:

“Bertindaklah sebagai tutor pemrograman Dart untuk siswa kelas XI PPLG. Bantu saya merancang algoritma aplikasi kasir kantin dengan menu, jumlah barang, subtotal, diskon 10% jika subtotal minimal Rp20.000, dan tiga metode pembayaran: Tunai, QRIS, serta Transfer. Jelaskan penggunaan if-else, switch, dan perulangan. Berikan langkah berpikir dan pseudocode terlebih dahulu, jangan langsung memberikan seluruh kode Flutter.”

Contoh prompt untuk memahami kode:

“Jelaskan potongan kode Dart berikut baris demi baris dengan bahasa yang mudah dipahami siswa SMK. Sebutkan fungsi variabel, kondisi, perulangan, dan kemungkinan kesalahannya. Jangan langsung mengganti seluruh kode; bantu saya memahami penyebab dan cara memperbaikinya.”

Setiap siswa wajib mencatat penggunaan AI dalam dokumentasi praktikum, termasuk prompt penting, bagian yang dibantu AI, perubahan yang dilakukan sendiri, dan hasil pengujian.

Penting: Jangan mengumpulkan kode hasil AI yang tidak kalian pahami. Kalian harus mampu menjelaskan bagian kode yang menjadi tanggung jawab kalian.

H. Skenario Pengujian Aplikasi

Gunakan tabel berikut sebagai acuan pengujian.

No.SkenarioHasil yang Diharapkan
1Membeli 1 Nasi Goreng dan 1 Es TehSubtotal Rp16.000, diskon Rp0, total Rp16.000
2Membeli 2 Nasi GorengSubtotal Rp24.000, diskon Rp2.400, total Rp21.600
3Belum memilih barang lalu menekan tombol prosesTransaksi ditolak atau muncul peringatan
4Memilih metode QRISPetunjuk pembayaran QRIS ditampilkan
5Mengurangi jumlah barang hingga nolJumlah tidak boleh negatif dan total dihitung ulang dengan benar

Tambahkan hasil pengujian kalian sendiri. Catat apakah hasil aktual sesuai dengan hasil yang diharapkan. Jika tidak sesuai, jelaskan penyebab dan perbaikannya.

I. Tugas Individu

Judul Tugas

Membangun Aplikasi KantinKu Menggunakan Flutter dengan Penerapan Struktur Kontrol Dart

Setiap siswa wajib membuat aplikasi KantinKu secara mandiri. Kalian boleh berdiskusi mengenai konsep dan menggunakan AI sebagai asisten, tetapi hasil akhir, pengujian, dan dokumentasi harus menunjukkan pemahaman masing-masing.

Ketentuan Pengumpulan

Kumpulkan hasil belajar dalam bentuk:

  1. Aplikasi: kode sumber atau proyek Flutter yang dapat dijalankan.

  2. Bukti aplikasi: screenshot tampilan dan bukti perhitungan transaksi.

  3. Flowchart atau pseudocode: rancangan alur aplikasi.

  4. Tabel pengujian: minimal tiga skenario, lengkap dengan hasil yang diharapkan dan hasil aktual.

  5. Penjelasan kode: jelaskan minimal satu bagian if-else, satu switch, dan satu perulangan yang digunakan.

  6. Fitur tambahan: jelaskan minimal satu fitur yang kalian kembangkan.

  7. Refleksi AI: tuliskan bagaimana AI digunakan, bagian yang kalian ubah atau perbaiki, serta apa yang kalian pelajari.

  8. Dokumentasi blog: seluruh proses praktikum harus dipublikasikan dalam postingan di blog masing-masing.

J. Dokumentasi Praktikum di Blog Pribadi

Seluruh proses praktikum wajib didokumentasikan dalam blog masing-masing. Blog menjadi portofolio belajar yang menunjukkan proses berpikir, pembuatan aplikasi, pengujian, dan hasil akhir.

Gunakan susunan artikel berikut.

  1. Judul artikel: Praktikum Flutter – Aplikasi KantinKu dengan Struktur Kontrol Dart.

  2. Identitas: nama, kelas, nomor absen, dan mata pelajaran.

  3. Tujuan praktikum: tuliskan kemampuan yang ingin dicapai.

  4. Analisis kebutuhan: jelaskan masalah yang ingin diselesaikan dan aturan transaksi.

  5. Rancangan aplikasi: sertakan flowchart atau pseudocode.

  6. Proses pembuatan: dokumentasikan langkah kerja dan bagian kode penting.

  7. Penerapan struktur kontrol: jelaskan penggunaan if-else, switch, dan perulangan.

  8. Bukti tampilan: sertakan screenshot aplikasi yang benar-benar kalian jalankan.

  9. Pengujian: sertakan tabel skenario dan hasil pengujian.

  10. Fitur tambahan: jelaskan fitur yang berhasil dibuat.

  11. Penggunaan AI: sertakan prompt yang digunakan, bantuan AI, perubahan mandiri, dan hasil verifikasi.

  12. Kesimpulan dan refleksi: tuliskan hal yang dipahami, kendala, cara mengatasi kendala, dan hal yang ingin dikembangkan.

  13. Kode atau repositori: sertakan kode penting atau tautan repositori jika tersedia dan dapat diakses.

Ketentuan dokumentasi:

  • Gunakan gambar dan bukti hasil praktikum sendiri.

  • Screenshot harus berasal dari aplikasi yang benar-benar dijalankan.

  • Jangan hanya menyalin materi atau kode tanpa penjelasan.

  • Hindari membagikan kata sandi, API key, atau informasi pribadi.

  • Pastikan tautan blog dapat dibuka oleh guru.

  • Gunakan bahasa yang jelas, sopan, dan dapat dipertanggungjawabkan.

K. Cara Mengumpulkan Tugas

Setelah artikel selesai dipublikasikan:

  1. Pastikan postingan blog dapat dibuka melalui tautan publik.

  2. Salin URL postingan blog kalian.

  3. Buka postingan materi pembelajaran ini.

  4. Tempelkan URL artikel praktikum pada kolom komentar.

  5. Sertakan identitas singkat dengan format berikut:

Nama:
Kelas:
Judul Praktikum: Praktikum Flutter – Aplikasi KantinKu
Link Blog: tempelkan URL postingan kalian.

Periksa kembali tautan sebelum mengirim komentar. Jangan hanya mengirim tulisan “sudah mengerjakan” tanpa menyertakan link dokumentasi.

L. Kriteria Penilaian

Aspek PenilaianBobot
Ketepatan logika dan perhitungan transaksi25%
Implementasi antarmuka dan fungsi Flutter20%
Pengujian, debugging, dan validasi20%
Pemahaman dan penjelasan kode25%
Refleksi penggunaan AI dan dokumentasi proses10%
Total100%

Penilaian tidak hanya berdasarkan tampilan aplikasi. Pemahaman terhadap logika, kemampuan menguji, dan kejujuran dalam mendokumentasikan proses belajar juga menjadi bagian penting.

M. Refleksi Pembelajaran

Setelah menyelesaikan praktikum, jawablah pertanyaan berikut dalam postingan blog:

  1. Apa perbedaan fungsi if-else, switch, dan perulangan?

  2. Bagian mana yang paling menantang ketika membuat aplikasi KantinKu?

  3. Bagaimana cara kalian memastikan diskon dan total pembayaran dihitung dengan benar?

  4. Kesalahan apa yang ditemukan saat pengujian dan bagaimana cara memperbaikinya?

  5. Bagaimana AI membantu proses belajar kalian? Bagian apa yang tetap harus kalian verifikasi sendiri?

  6. Jika aplikasi dikembangkan lebih lanjut, fitur apa yang ingin kalian tambahkan?

N. Penutup

Menjadi programmer bukan sekadar mampu menulis kode, tetapi juga mampu memahami masalah, menyusun solusi, menguji hasil, dan menjelaskan keputusan yang dibuat dalam program.

Melalui proyek KantinKu, kalian belajar bahwa konsep dasar seperti percabangan dan perulangan dapat diterapkan untuk membangun aplikasi yang dekat dengan kehidupan sehari-hari.

Gunakan AI sebagai asisten untuk mempercepat proses belajar, bukan sebagai pengganti pemahaman. Bangun aplikasi kalian sendiri, uji setiap fitur, dan dokumentasikan prosesnya dengan jujur.

Ingat prinsip kita: Berpikir, Bangun, Buktikan.

Selamat belajar dan berkarya. Tunjukkan bahwa siswa PPLG mampu menghasilkan aplikasi yang berfungsi, memahami kode yang ditulis, serta memiliki portofolio digital yang dapat dibanggakan.

Guru Mata Pelajaran
Pemrograman Perangkat Bergerak
SMK Negeri 1 Banjar

Share:

Tidak ada komentar:

Posting Komentar

Chat Admin

Chat via WhatsApp