Praktikum Pemrograman Mobile Kelas XI RPL : Membuat Aplikasi Pemesanan Kantin SMKN 1 Banjar Menggunakan React, Replit, dan Vercel

 

Tujuan Pembelajaran

Pada praktikum ini siswa diharapkan mampu:

✅ Membuat tampilan aplikasi mobile modern
✅ Menampilkan daftar kantin sekolah
✅ Menampilkan menu dan harga makanan
✅ Membuat keranjang pesanan
✅ Membuat form checkout
✅ Mengirim pesanan otomatis ke WhatsApp
✅ Deploy aplikasi ke internet menggunakan Vercel


Penjelasan Alur Aplikasi Kantin Digital SMKN 1 Banjar

Aplikasi ini dirancang untuk mempermudah siswa dan warga sekolah dalam memesan makanan secara digital, efisien, dan terintegrasi langsung ke WhatsApp merchant (penjual). Berikut adalah penjelasan tiap halaman berdasarkan antarmuka pengguna (UI):



1. Halaman Utama: Pilih Kantin (tugas 1.png)

Halaman ini merupakan tampilan awal (beranda) ketika pengguna membuka aplikasi.

  • Header Informasi: Di bagian paling atas terdapat identitas lokasi, yaitu Kantin SMKN 1 Banjar yang beralamat di Jl. Perintis Kemerdekaan, Banjar.

  • Fitur Pencarian: Terdapat kolom pencarian bertuliskan "Cari kantin atau menu..." untuk memudahkan pengguna menemukan makanan atau stan kantin tertentu dengan cepat.

  • Daftar Kantin Tersedia: Aplikasi menginfokan bahwa terdapat 5 kantin tersedia. Setiap kantin ditampilkan dalam bentuk kartu (card) yang memuat:

    • Foto suasana/representasi kantin.

    • Rating penilaian (contoh: Kantin Bu Siti mendapat rating 4.8, Kantin Pak Joko mendapat rating 4.9).

    • Deskripsi singkat menu andalan (contoh: "Masakan rumahan yang lezat dan terjangkau" atau "Spesialis bakso dan mie ayam sejak 2010").

    • Jumlah menu yang tersedia di kantin tersebut.

2. Halaman Detail Kantin dan Menu (tugas 2.png)

Ketika pengguna memilih salah satu kantin (dalam contoh ini Kantin Bu Siti), mereka akan diarahkan ke halaman detail menu.

  • Banner Kantin: Menampilkan nama kantin secara jelas lengkap dengan rating dan jumlah total menu di pojok kiri atas.

  • Kategori Menu: Terdapat tab filter kategori makanan untuk mempermudah navigasi pengguna, yang dibagi menjadi: Makanan Berat, Minuman, dan Snack.

  • Daftar Item Menu: Menu makanan berat ditampilkan dalam bentuk daftar (list) yang rapi, mencakup:

    • Foto makanan yang menggugah selera.

    • Nama menu dan deskripsi komposisinya (contoh: Nasi Goreng Spesial – Nasi goreng dengan telur, ayam, dan sayuran segar).

    • Harga yang transparan (contoh: Rp 15.000 untuk Nasi Goreng dan Rp 12.000 untuk Mie Goreng).

    • Tombol "+ Tambah" berwarna hijau di sisi kanan untuk memasukkan makanan langsung ke dalam keranjang belanja.


3. Halaman Keranjang Belanja & Form Pemesanan (TUGAS 3.png)

Setelah memilih menu, pengguna akan membuka halaman Keranjang berbentuk sidebar atau pop-up untuk melakukan checkout.

  • Detail Pesanan: Menampilkan asal kantin dan item yang dipilih (Nasi Goreng Spesial, Rp 15.000). Terdapat tombol kuantitas (- 1 +) untuk menambah/mengurangi porsi, serta ikon trash bin merah untuk menghapus pesanan.

  • Informasi Pemesan (Form): Sebelum mengirim pesanan, siswa wajib mengisi data pengiriman agar tidak tertukar:

    • Nama Lengkap: Kolom input teks (pada gambar diisi: AHMAD).

    • Kelas / Lokasi Pengantaran: Menggunakan menu dropdown pilihan kelas untuk memudahkan kurir/penjual mengantar makanan (pada gambar dipilih kelas: X MM 2).

    • Catatan (Opsional): Kolom tambahan jika ada permintaan khusus (seperti: "tidak pakai pedas").

  • Total Pembayaran: Menampilkan jumlah uang yang harus dibayarkan secara jelas di bagian bawah (Rp 15.000).

  • Metode Integrasi: Terdapat tombol utama "Kirim Pesanan via WhatsApp". Ketika diklik, sistem otomatis menyusun format teks pesanan dan mengarahkannya ke nomor WhatsApp pengelola Kantin Bu Siti agar pesanan bisa langsung diproses.

Kesimpulan

Berdasarkan alur sistem yang ditampilkan pada gambar, dapat disimpulkan bahwa:

  1. Efisiensi Sistem Pemesanan: Aplikasi Kantin Digital SMKN 1 Banjar berhasil memodernisasi proses jajan di sekolah yang dulunya konvensional menjadi digital. Proses ini memotong waktu antrean siswa melalui fitur pencarian kantin dan menu yang terstruktur.

  2. Kemudahan Pengguna (User-Friendly): Desain antarmuka aplikasi sangat intuitif. Pemisahan kategori menu (Makanan Berat, Minuman, Snack) serta alur pemesanan yang ringkas memudahkan siswa dari berbagai jenjang kelas untuk menggunakannya tanpa bingung.

  3. Kepraktisan Operasional via WhatsApp: Sistem checkout yang terintegrasi langsung dengan WhatsApp merchant merupakan solusi cerdas dan hemat biaya. Dengan menyertakan formulir Nama dan Kelas/Lokasi Pengantaran, penjual dapat memproses dan mengantarkan pesanan secara akurat ke ruang kelas siswa tanpa risiko tertukar.

Oleh : Rian Rama Romansah




Komentar

Posting Komentar

Postingan populer dari blog ini

Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman

Gambar
  Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman Pada pelajaran kali ini, kita belajar bagaimana membuat aplikasi kuliner Nusantara menggunakan Flutter , mulai dari membuat tampilan utama, navigasi antar halaman, hingga implementasi login sederhana di halaman profil. Berikut hal-hal penting yang dipelajari: Struktur Aplikasi Flutter dengan StatefulWidget Kita membuat aplikasi menggunakan StatefulWidget agar aplikasi bisa merespon perubahan data, seperti tema gelap/terang dan daftar favorit kuliner . Navigasi dengan BottomNavigationBar Aplikasi memiliki 5 halaman : Beranda, Kuliner, Pencarian, Favorit, dan Profil. Navigasi dilakukan menggunakan BottomNavigationBar , yang memungkinkan pengguna berpindah antar halaman dengan mudah. Menampilkan Data Kuliner dengan GridView Daftar kuliner ditampilkan menggunakan GridView.builder . Setiap item memiliki gambar dan nama , serta dapat ditandai sebagai favorit . Fitur Favori...
Baca selengkapnya

Materi Widget

Gambar
 Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana. 📘 Tugas: Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku” Syarat: ✅ Minimal 5 widget berbeda ✅ Ada foto/ilustrasi, nama, jurusan ✅ Deskripsi hobi atau cita-cita ✅ Tombol “Hubungi Saya” Hasil :  Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run import 'package:flutter/material.dart'; void main() => runApp(const MyProfileApp()); class MyProfileApp extends StatelessWidget {   const MyProfileApp({super.key});   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false,       home: Scaffold(         backgroundColor: const Color.fromARGB(255, 149, 155, 160),         appBar: AppBar(           title: const Text('Profil'),           backgroundColor: Color.fr...
Baca selengkapnya

2 ARTIKEL PENGEMBANGAN GIM

Gambar
 Artikel 1 Pengertian dan Tahapan Pengembangan Gim Pengembangan gim adalah proses pembuatan permainan digital dari awal hingga siap dimainkan. Proses ini dimulai dari mencari ide, merancang konsep permainan, membuat desain visual, melakukan pemrograman, hingga tahap pengujian. Setiap tahapan harus dilakukan dengan teliti agar gim dapat berjalan dengan baik. Pada tahap perencanaan, pengembang menentukan jenis gim, tujuan, dan aturan permainan. Selanjutnya, pada tahap desain, dibuat karakter, latar, serta alur permainan. Setelah itu, programmer mulai membuat sistem gim agar dapat dimainkan sesuai dengan rencana yang telah dibuat. Tahap terakhir adalah pengujian gim untuk memastikan tidak ada kesalahan atau bug. Jika ditemukan masalah, pengembang akan melakukan perbaikan. Setelah semua tahapan selesai, gim siap untuk dirilis dan dimainkan oleh pengguna. Artikel 2  Perkembangan Pengembangan Gim di Era Digital Pengembangan gim mengalami perkembangan yang sangat pesat seiring dengan...
Baca selengkapnya