Membuat Aplikasi Pemesanan Kantin SMKN 1 Banjar Menggunakan React, Replit, dan Vercel

 

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:

• Replit Signup

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:

• Vercel

Login menggunakan GitHub.

Kemudian:

1. Import project

2. Klik Deploy

3. 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 🚀