Ide Project #7: Ubah Aplikasi Stok Gudang Jadi PWA Buat Staf Lapangan

Aplikasi stok gudang yang bagus di layar komputer belum tentu enak dipakai staf yang harus mondar-mandir di rak barang sambil pegang HP. Layar admin panel biasa terlalu ramai untuk dipakai sambil berdiri, tombolnya kecil, dan setiap kali mau catat barang masuk harus login ke admin panel dulu lewat browser. Di artikel ini kita lanjutkan project "Manajemen Stok Gudang" yang sudah dibangun di Ide Project #6, tapi kali ini kita tambahkan satu halaman baru khusus staf lapangan berupa PWA (Progressive Web App) yang bisa diinstal di HP seperti aplikasi native.

Levelnya naik ke Menengah-Berat karena bukan sekadar bikin halaman baru, tapi juga bikin halaman itu bisa dipasang ke home screen, tetap terasa seperti aplikasi (bukan tab browser), dan nyaman dipakai dengan satu tangan sambil berdiri di gudang.

Apa yang bakal kita bangun

Hasil akhirnya adalah halaman "Scan Stok" bertema mobile: staf memilih namanya, mencari barang lewat kolom pencarian, lalu mencatat stok masuk atau stok keluar lewat form dengan tombol besar dan kontrol jumlah yang gampang disentuh. Setiap kali transaksi tercatat, sisa stok langsung diperbarui dan ditampilkan di layar yang sama.

Catatan: base project (cara bikin Create New project dan kirim prompt pertama) sudah dijelaskan lengkap di Ide Project #6: Bikin Aplikasi Manajemen Stok Gudang dalam Satu Prompt. Kalau belum baca, sebaiknya baca dulu itu supaya tahu struktur data barang dan stok yang jadi dasar project ini.

Step 1: Susun prompt PWA yang lengkap

Karena permintaannya kompleks (harus mobile-first, harus bisa diinstal, harus tetap jalan tanpa internet), prompt yang dikirim juga perlu detail. Berikut prompt lengkap yang kami kirim ke chat, dikembangkan dari template permintaan PWA yang mencakup fitur utama, dukungan offline-sync, daftar halaman, dan aturan tampilan native-like:

Buat aplikasi PWA Scan Stok Gudang menggunakan Ionic dengan tampilan mobile-first, sederhana, modern, responsif, dan terasa seperti aplikasi native. Tujuan utama aplikasi adalah membantu staf lapangan mencatat stok barang masuk dan keluar langsung dari HP saat berada di gudang, tanpa harus kembali ke komputer admin.

Fitur Utama

Aplikasi harus memiliki fitur:

• Pilih/Login Staf — staf memilih namanya sebelum mulai mencatat transaksi
• Cari Barang Cepat — cari barang berdasarkan nama atau kode, tampil dengan stok saat ini
• Catat Stok Masuk — form cepat: pilih barang, isi jumlah, catat otomatis waktu dan nama staf
• Catat Stok Keluar — form cepat dengan validasi stok tidak boleh minus, tampilkan sisa stok setelah transaksi
• Riwayat Transaksi Hari Ini — daftar transaksi terbaru yang dilakukan staf, lengkap dengan status sinkronisasi

Data & Offline Support

Aplikasi harus dapat digunakan baik online maupun offline. Gunakan abstraction layer untuk data sehingga UI tidak bergantung langsung pada API atau storage tertentu.

Saat online, aplikasi dapat mengambil dan memperbarui data melalui API/server. Saat offline, aplikasi harus tetap dapat menampilkan dan mengubah data menggunakan local storage/database yang tersedia di perangkat, seperti SQLite, IndexedDB, atau LocalStorage sesuai kebutuhan aplikasi.

Perubahan yang dilakukan saat offline harus disimpan secara lokal dan kemudian disinkronkan dengan server ketika koneksi kembali tersedia. Sinkronisasi harus menangani:

• Data baru dari local ke server.
• Perubahan data dari local ke server.
• Data baru dari server ke local.
• Update data dari server ke local.
• Queue perubahan ketika sedang offline.
• Automatic sync ketika koneksi kembali tersedia.
• Pencegahan duplicate data saat sync.
• Conflict resolution sederhana menggunakan last-write-wins berdasarkan updated_at.

UI harus tetap dapat digunakan tanpa koneksi internet dan tidak boleh bergantung sepenuhnya pada response API untuk menampilkan data yang sebelumnya sudah tersedia.

Tampilkan status sederhana seperti Online, Offline, Syncing, dan Synced jika diperlukan.

Halaman

Sediakan halaman:

• Pilih Staf — daftar staf, klik untuk mulai sesi
• Beranda / Cari Barang — pencarian barang dan daftar stok saat ini
• Form Transaksi — catat Stok Masuk atau Stok Keluar
• Riwayat & Status Sync — daftar transaksi hari ini beserta status sinkronisasi tiap transaksi

PWA & Native-like UX

Aplikasi harus dapat di-install ke Home Screen dan kompatibel dengan iOS Safari dan Android Chrome, termasuk standalone mode dan safe-area untuk notch/Dynamic Island.

Nonaktifkan pinch-to-zoom, cegah horizontal scrolling dan horizontal overflow, sehingga pengguna tidak dapat menggeser aplikasi ke kanan atau kiri. Saat keyboard virtual muncul, pastikan layout tetap stabil, tidak bergeser secara aneh, tidak mengalami overflow, dan input yang aktif tetap terlihat di atas keyboard.

Saat dibuka di desktop, tampilkan aplikasi dalam container berukuran mobile sekitar 390×844px yang berada di tengah layar dengan border radius dan shadow sederhana. Jangan gunakan device mockup realistis. Pada perangkat mobile sebenarnya, container harus memenuhi seluruh viewport tanpa border dan shadow.

UI & Architecture

Gunakan komponen UI Ionic seperti IonCard, IonList, IonItem, IonInput, IonModal, IonCheckbox, IonSegment, IonTabs, dan komponen Ionic lainnya jika diperlukan.

Gunakan struktur kode yang sederhana dan mudah dipahami. Pisahkan dengan jelas: UI/Components, Business Logic, Data Access Layer, API/Server Layer, Local Storage Layer, dan Synchronization Service.

Gunakan data access abstraction sehingga implementasi storage dapat diganti tanpa mengubah UI. Jangan mengasumsikan bahwa aplikasi selalu online atau selalu offline.

Hindari overengineering. Prioritaskan aplikasi yang sederhana, stabil, cepat, mudah digunakan, dan mudah dikembangkan.

Prompt ini sengaja ditulis detail karena permintaannya menyentuh banyak aspek sekaligus, mulai dari UI, penyimpanan data, sampai perilaku offline. Semakin spesifik kebutuhan yang kamu jelaskan, semakin AI bisa langsung membangun struktur kode yang sesuai tanpa banyak bolak-balik revisi.

Satu catatan penting: stack asli builder TanpaNgoding adalah Laravel 13 dengan Livewire/Blade, bukan Ionic/Angular/React. AI mengadaptasi konsep dari prompt (mobile-first, native-like, offline-sync) ke komponen Blade dan Tailwind, bukan memasang framework Ionic secara literal. Hasil akhirnya tetap sesuai tujuan (PWA installable, mobile-first, offline-capable), meski nama frameworknya tidak identik dengan yang diminta di prompt.

Setelah prompt dikirim dalam mode BUILD, AI langsung menyusun rencana dan mengeksekusinya tanpa perlu review manual dulu.

Step 2: AI sempat salah di event handler dropdown, tapi berhasil perbaiki sendiri

Bagian menarik dari proses build kali ini: percobaan pertama sempat ada bug. Waktu staf memilih barang dari dropdown "Pilih Barang", detail barang dan kontrol jumlah tidak muncul. Root cause-nya, komponen dropdown yang dipakai tidak mendukung atribut event langsung di dalam template string, jadi event pemilihan barang tidak pernah terpicu.

AI mendeteksi masalah ini sendiri lewat proses cek ulang setelah build, lalu memperbaikinya dengan memasang event listener secara terpisah setelah elemen selesai dirender ke halaman, bukan menempelkannya langsung di dalam kode template. Setelah perbaikan itu, begitu staf memilih barang dari dropdown, detail barang dan form pencatatan langsung muncul dengan benar.

Catatan: kejadian ini menunjukkan kenapa selalu baik untuk mencoba fitur yang baru dibangun sebelum dianggap selesai. AI di TanpaNgoding memang mengecek ulang hasil build-nya sendiri, tapi tetap ada baiknya kamu coba juga dari sisi pengguna sebelum project dianggap siap dipakai staf beneran.

Step 3: Coba catat stok masuk

Buka halaman Scan Stok, pilih barang dari dropdown "Pilih Barang". Detail barang beserta stok saat ini langsung tampil, lalu atur jumlah barang yang masuk lewat tombol plus atau minus, dan isi keterangan seperti nama supplier.

Setelah tombol "Catat Stok Masuk" ditekan, muncul konfirmasi sukses dengan sisa stok terbaru langsung di layar yang sama, tanpa perlu pindah halaman atau refresh manual.

Step 4: Coba catat stok keluar

Sama seperti stok masuk, tapi lewat tab "Keluar". Pilih barang, atur jumlah yang keluar, isi tujuan pengeluaran barang.

Begitu dikonfirmasi, sisa stok langsung berkurang sesuai jumlah yang dicatat, dan pesan sukses tampil di tempat yang sama seperti alur stok masuk.

Validasi anti-minus yang sudah ada sejak Ide Project #6 tetap berlaku di halaman PWA ini: kalau staf mencoba mencatat stok keluar melebihi stok yang tersedia, sistem akan menolak transaksi dan menampilkan pesan bahwa stok tidak mencukupi.

Pengembangan Lanjutan: kenapa perlu PWA, bukan cukup website biasa saja

Bedanya PWA dengan halaman website biasa ada di tiga hal yang sudah diminta lewat prompt di atas. Pertama, bisa dipasang ke home screen HP sehingga staf tinggal tap ikon seperti membuka aplikasi biasa, tidak perlu buka browser dan ketik alamat setiap kali. Kedua, tampilannya dikunci supaya tidak bisa di-zoom atau digeser ke samping secara tidak sengaja, jadi terasa stabil seperti aplikasi native. Ketiga, ada dukungan offline: kalau sinyal di area gudang lemah, staf tetap bisa mencatat transaksi, dan data akan disinkronkan otomatis begitu koneksi kembali tersedia.

Kalau kamu punya tim lapangan lain yang butuh pola serupa, misalnya sales yang mencatat kunjungan pelanggan atau teknisi yang mencatat hasil servis di lokasi, template prompt yang sama bisa dipakai ulang: tinggal ganti nama aplikasi, tujuan, fitur utama, dan daftar halamannya.

Seri Ide Project berikutnya akan naik ke level Berat, project dengan relasi antar entity yang lebih banyak seperti sistem distribusi multi-kota atau CRM sederhana. Sampai jumpa di project berikutnya.