Pojok Lab (Barcode-Based Loan System)
Sistem inventarisasi modern untuk laboratorium sekolah dengan fitur pemindaian barcode untuk barang dan identitas peminjam.
Ikhtisar Proyek
Sistem inventarisasi dan sirkulasi peminjaman laboratorium komputer dengan pemindaian barcode instan untuk mempercepat transaksi peminjaman barang dan pencatatan ID siswa.
Dirancang khusus untuk lab TI sekolah saya, sistem Pojok Lab membantu asisten lab memantau lalu lintas peralatan. Aplikasi ini mengandalkan pemindaian barcode untuk memverifikasi item fisik dan ID siswa secara instan, didukung dengan antarmuka dua peran: Admin (untuk manajemen inventaris) dan Peminjam.
Masalah yang Dihadapi
Di laboratorium komputer sekolah, puluhan siswa meminjam mouse, keyboard, kabel LAN, dan toolkit secara bersamaan saat pergantian jam pelajaran. Pencatatan manual membuat antrean panjang dan sering salah catat nomor seri perangkat.
Pencatatan manual nomor seri perangkat dan nama siswa memakan waktu saat pergantian kelas.
Asisten lab sering salah membaca tulisan tangan nomor seri, menyulitkan pelacakan saat ada alat yang rusak.
Antrean peminjaman manual berpotensi menunda dimulainya jam praktikum.
Pengguna Sasaran
Siswa Praktikan (Peminjam)
Proses peminjaman yang lancar agar bisa langsung memulai praktikum di meja lab.
Harus mengantre di depan meja asisten lab untuk mengisi lembaran formulir manual.
Cukup tap kartu pelajar ber-barcode dan scan alat secara langsung (Scan & Go).
Asisten Lab / Pengawas (Admin)
Tampilan layar yang langsung menampilkan status peminjaman, identitas siswa, dan daftar alat.
Harus mencatat berulang kali atau memeriksa tumpukan kertas saat siswa mengembalikan alat.
Antarmuka scanner responsif dengan pembaruan status inventaris secara langsung.
Solusi & Prinsip Desain
Mengembangkan aplikasi web Next.js dengan antarmuka scanner reaktif yang menghubungkan input barcode fisik (hardware scanner USB / kamera web) langsung ke sistem data inventaris lab.
Alur Transaksi 'Scan & Go'
Meminimalisir pengetikan manual selama peminjaman: Scan ID Siswa -> Scan Alat -> Selesai.
Validasi Status Alat
Validasi otomatis memverifikasi bahwa barcode yang dipindai adalah alat yang terdaftar dan belum sedang dipinjam.
Antarmuka Ramah Pengguna
Tampilan kontras jelas dengan tata letak rapi agar mudah dipantau asisten lab dari meja kerja.
Dibangun menggunakan arsitektur web Next.js modern. Antarmuka dirangkai secara presisi dengan komponen shadcn/ui dan Tailwind CSS, menyajikan pengalaman UI admin yang rapi serta scanner interface yang reaktif.
Fitur Utama & Dampak
Pemindai Barcode Reaktif Cepat
Integrasi pembacaan barcode yang langsung memproses input serial barcode ke dalam alur transaksi peminjaman.
Dashboard Monitor Inventaris Real-Time
Menampilkan daftar peralatan lab dengan indikator status yang jelas (Tersedia, Dipinjam, Servis).
Log Pengembalian & Riwayat Kerusakan
Sistem pencatatan waktu kembali secara digital disertai catatan kondisi fisik perangkat saat dikembalikan.
Alur Pengembangan
1. Observasi Kebutuhan Lab
Menganalisis alur peminjaman peralatan laboratorium komputer sekolah dan titik hambatan pencatatan manual.
2. Eksperimen Integrasi Barcode
Menguji pembacaan input barcode scanner pada antarmuka web untuk memastikan data terbaca dengan baik.
3. Pengembangan Frontend Next.js
Membangun arsitektur state di Next.js untuk alur peminjaman, pengembalian, dan pencarian data inventaris.
4. Desain Dashboard dengan shadcn/ui
Merangkai antarmuka manajemen inventaris yang bersih, padat informasi, dan responsif dengan Tailwind CSS.
5. Pengujian Alur Pemindaian
Menguji coba alur pemindaian barcode pada perangkat lab untuk memastikan kecepatan dan ketepatan pencatatan.
Tantangan & Pemecahan Masalah
Pengelolaan Fokus Input Scanner pada Komponen Web
Hardware barcode scanner mengirimkan data sebagai keystroke keyboard cepat berurutan, yang memerlukan kursor berada pada elemen input agar data terbaca.
Mengatur pengelolaan fokus (focus management) pada elemen input agar selalu siap menerima input dari scanner barcode tanpa perlu klik manual berulang.
Asisten lab dapat memindai barcode alat dan kartu siswa secara berkelanjutan dan lancar.
Efisiensi Pencatatan Transaksi saat Jam Sibuk Lab
Saat pergantian jam praktikum, banyak siswa yang meminjam atau mengembalikan alat dalam rentang waktu yang berdekatan.
Mengoptimalkan pembaruan state lokal pada antarmuka scanner agar transaksi langsung tercatat dan antarmuka segera siap untuk pemindaian berikutnya.
Alur transaksi peminjaman berjalan lancar tanpa jeda reload halaman, membantu mengurangi antrean siswa.
Dampak (Sebelum vs Sesudah)
- Pencatatan manual di buku antrean memperlambat sirkulasi peminjaman alat di awal dan akhir jam lab.
- Nomor seri perangkat sering salah dicatat karena tulisan tangan tidak terbaca.
- Asisten lab kesulitan mengetahui alat mana saja yang masih berada di luar lab secara instan.
- Pencatatan dipercepat menggunakan pemindaian langsung ID siswa dan barcode alat.
- Meminimalkan kesalahan penulisan nomor seri perangkat berkat input otomatis barcode.
- Monitor lab menampilkan inventaris yang tersedia dan sedang dipinjam secara langsung.
Keputusan Teknologi
Menyediakan rendering cepat, performa responsif di browser lab, dan struktur komponen modular untuk halaman scanner & admin.
Komponen tabel, badge, dan modal yang aksesibel dan ringan, cocok untuk PC lab.
Standar input yang kompatibel dengan barcode scanner laser USB maupun pemindaian kamera web browser.
Galeri & Bukti Visual
Sistem Pemindaian Barcode Lab
Pratinjau antarmuka peminjaman dan pengelolaan inventaris berbasis barcode Pojok Lab.
Pelajaran & Refleksi
Menghubungkan input perangkat lunak berbasis web dengan input perangkat keras (seperti scanner) menuntut pengelolaan fokus (focus management) DOM yang teliti di React.
Koleksi komponen shadcn/ui adalah pilihan yang sangat sangat efisien untuk dashboard internal bergaya profesional tanpa bloatware framework.
Usability yang tinggi lewat proses satu langkah (seperti scan & go) sangat disukai pengguna sistem dibanding mengisi form manual.