DEMO APLIKASI
Praktikum Pemrograman Mobile Kelas XI RPL :
Membuat Aplikasi Pemesanan Kantin SMKN 1 Banjar Menggunakan React, Replit, dan Vercel
Halo semuanya 👋
Pada pembelajaran pemrograman mobile kali ini kita akan membuat sebuah aplikasi sederhana namun sangat dekat dengan kehidupan sehari-hari siswa, yaitu aplikasi pemesanan kantin digital untuk lingkungan sekolah.
Project ini dibuat agar siswa belajar bagaimana membuat aplikasi modern mulai dari tampilan, pengolahan data, hingga deploy aplikasi ke internet.
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
Kenapa Menggunakan React + Replit + Vercel?
Pada pembelajaran kali ini kita tidak menggunakan Android Studio terlebih dahulu.
Alasannya:
Setup lebih cepat
Tidak membutuhkan laptop spesifikasi tinggi
Tidak perlu emulator Android
Bisa langsung dijalankan di browser
Hasil aplikasi bisa langsung online
Teknologi yang digunakan:
| Teknologi | Fungsi |
|---|---|
| React | Membuat tampilan aplikasi |
| Replit | Tempat coding online |
| Vercel | Hosting/deploy aplikasi |
| WhatsApp URL API | Mengirim pesanan |
Gambaran Aplikasi
Fitur yang akan dibuat:
✅ Daftar kantin sekolah
✅ Menu makanan dan minuman
✅ Keranjang gabungan antar kantin
✅ Form nama dan kelas
✅ Pengiriman pesanan ke WhatsApp kurir
Prototype Tampilan
Berikut contoh prototype aplikasi yang akan dibuat:
Jadwal Praktikum
| Waktu | Kegiatan |
|---|---|
| 07.15 – 07.45 | Pembukaan & demo aplikasi |
| 07.45 – 08.15 | Setup Replit |
| 08.15 – 09.30 | Membuat UI daftar menu |
| 09.30 – 10.00 | Istirahat |
| 10.00 – 11.10 | Membuat keranjang & checkout |
| 11.10 – 12.30 | Sholat Jumat |
| 12.30 – 13.15 | Integrasi WhatsApp |
| 13.15 – 13.40 | Deploy ke Vercel |
| 13.40 – 14.00 | Presentasi hasil |
Langkah 1 — Membuat Akun Replit
Buka:
Kemudian login menggunakan:
Google
GitHub
Email
Langkah 2 — Membuat Project React
Klik:
Create Repl
Pilih:
React
Nama project:
kantin-smkn1
Klik:
Create Repl
Langkah 3 — Struktur Project
Susunan folder yang akan digunakan:
src/
├── components/
├── data/
├── pages/
└── App.js
Langkah 4 — Membuat Data Menu
Buat folder:
src/data
Buat file:
menu.js
Isi dengan data berikut:
export const menuData = [
{
id: 1,
kantin: "Kantin Bu Sari",
nama: "Nasi Goreng",
harga: 12000,
},
{
id: 2,
kantin: "Kantin Pak Budi",
nama: "Bakso",
harga: 10000,
},
{
id: 3,
kantin: "Kantin Bu Rina",
nama: "Ayam Geprek",
harga: 13000,
},
];
Langkah 5 — Membuat Tampilan Utama
Buka file:
src/App.js
Ganti isi dengan:
import React, { useState } from "react";
import { menuData } from "./data/menu";
function App() {
const [cart, setCart] = useState([]);
return (
<div style={{ padding: 20 }}>
<h1>Kantin SMKN 1 Banjar</h1>
{menuData.map((item) => (
<div
key={item.id}
style={{
border: "1px solid #ccc",
padding: 10,
marginBottom: 10,
borderRadius: 10,
}}
>
<h3>{item.nama}</h3>
<p>{item.kantin}</p>
<p>Rp {item.harga}</p>
<button
onClick={() =>
setCart([...cart, item])
}
>
Tambah
</button>
</div>
))}
<h2>Total Keranjang: {cart.length}</h2>
</div>
);
}
export default App;
Penjelasan Kode
useState
Digunakan untuk menyimpan data sementara.
const [cart, setCart] = useState([]);
map()
Digunakan untuk menampilkan daftar menu.
menuData.map((item) => (
onClick()
Digunakan ketika tombol ditekan.
onClick={() =>
setCart([...cart, item])
}
Langkah 6 — Membuat Form Checkout
Tambahkan di bawah keranjang:
<input
type="text"
placeholder="Nama"
/>
<input
type="text"
placeholder="Kelas"
/>
Langkah 7 — Integrasi WhatsApp
Tambahkan tombol:
<button>
Kirim Pesanan
</button>
Tambahkan function:
const kirimPesanan = () => {
let pesan = "Pesanan Kantin:%0A";
cart.forEach((item) => {
pesan += `${item.nama}%0A`;
});
window.open(
`https://wa.me/6281234567890?text=${pesan}`
);
};
Hubungkan ke tombol:
<button onClick={kirimPesanan}>
Kirim Pesanan
</button>
Hasil yang Diharapkan
Jika berhasil, aplikasi dapat:
✅ Menampilkan menu
✅ Menambahkan keranjang
✅ Menampilkan total item
✅ Mengirim pesanan ke WhatsApp
Langkah 8 — Deploy ke Vercel
Setelah aplikasi selesai, kita akan membuat aplikasi online.
Buka:
Login menggunakan GitHub.
Kemudian:
Import project
Klik Deploy
Tunggu proses selesai
Setelah selesai, siswa akan mendapatkan link website online.
Contoh:
https://kantin-smkn1.vercel.app
Tantangan Tambahan untuk Siswa
Jika selesai lebih cepat, tambahkan fitur:
Level 1
Tambah gambar menu
Level 2
Hitung total harga
Level 3
Hapus item keranjang
Level 4
Dark mode
Level 5
Riwayat pesanan
Penilaian Praktikum
| Aspek | Nilai |
|---|---|
| Tampilan UI | 20 |
| Keranjang berjalan | 20 |
| Checkout berjalan | 20 |
| WhatsApp berjalan | 20 |
| Kerapihan kode | 20 |
Kesimpulan
Melalui project ini siswa belajar:
React dasar
Komponen
State
Event
Deploy website
Integrasi WhatsApp
Konsep aplikasi mobile modern
Model pembelajaran seperti ini sangat cocok untuk siswa RPL karena lebih dekat dengan workflow industri modern.
Selamat mencoba dan semoga praktikum berjalan lancar 🚀
