3.9 KiB

Raw Blame History

SPJ Barcode Scanner

Scanner barcode untuk aplikasi eSPJ yang menggunakan QuaggaJS library.

Fitur

Scanner barcode real-time menggunakan kamera device
Mendukung berbagai format barcode (Code 128, Code 39, EAN, dll)
Input manual sebagai alternatif
Validasi format SPJ
Responsive design untuk mobile dan desktop
Sound feedback saat barcode terdeteksi

Format Barcode yang Didukung

Code 128
Code 39
Code 39 VIN
EAN-13
EAN-8
Code 93

Cara Penggunaan

Untuk User (Driver)

Akses Halaman Scanner
- Buka aplikasi eSPJ
- Navigasi ke halaman "Scan SPJ"
Menggunakan Camera Scanner
- Klik tombol "Mulai Scan"
- Izinkan akses kamera saat diminta browser
- Arahkan kamera ke barcode SPJ
- Scanner akan otomatis mendeteksi dan menampilkan hasil
- Klik "Konfirmasi" untuk melanjutkan atau "Scan Ulang" untuk mencoba lagi
Menggunakan Input Manual
- Masukkan kode SPJ secara manual di field yang disediakan
- Klik tombol search untuk memproses

Browser Requirements

Chrome 21+
Firefox 17+
Safari 11+
Edge 12+
Opera 18+

Permissions

Scanner memerlukan akses kamera. Pastikan:

Akses kamera diizinkan pada browser
Halaman diakses melalui HTTPS (untuk production)
Device memiliki kamera yang berfungsi

Technical Implementation

Dependencies

QuaggaJS: Library untuk barcode scanning
Lucide Icons: Untuk iconography
Tailwind CSS: Untuk styling

File Structure

Views/Admin/Transport/SpjDriver/Scan/
├── Index.cshtml                 # Main scanner page
Controllers/SpjDriverController/
├── ScanController.cs            # Backend logic
wwwroot/driver/css/
├── scanner.css                  # Scanner-specific styles

Key Components

BarcodeScanner Class (JavaScript)
- Handles camera initialization
- Manages QuaggaJS configuration
- Processes scan results
- Handles UI interactions
ScanController (C#)
- Validates scanned codes
- Processes SPJ lookup
- Handles error responses

Configuration

QuaggaJS configuration:

{
    inputStream: {
        type: "LiveStream",
        constraints: {
            width: 320,
            height: 240,
            facingMode: "environment" // Use back camera
        }
    },
    decoder: {
        readers: [
            "code_128_reader",
            "code_39_reader",
            "ean_reader",
            // ... more readers
        ]
    }
}

Customization

Menambah Format Barcode Baru

Edit array readers di file Index.cshtml:

readers: ["code_128_reader", "your_new_reader_here"];

Mengubah Validasi SPJ

Edit method ValidateSpjCode di ScanController.cs:

private async Task<SpjData?> ValidateSpjCode(string barcode)
{
    // Your custom validation logic here
}

Styling

Edit file scanner.css untuk mengubah appearance scanner.

Troubleshooting

Camera Tidak Berfungsi

Pastikan browser memiliki akses kamera
Cek apakah halaman diakses melalui HTTPS
Restart browser jika perlu
Cek device permissions

Barcode Tidak Terdeteksi

Pastikan barcode dalam format yang didukung
Cek pencahayaan - barcode harus jelas terbaca
Jaga jarak optimal (15-30cm dari kamera)
Pastikan barcode tidak rusak atau blur

Performance Issues

Tutup aplikasi lain yang menggunakan kamera
Gunakan browser yang up-to-date
Cek kecepatan internet untuk loading library

Development Notes

Library QuaggaJS dimuat dari CDN (dapat diunduh lokal jika perlu)
Scanner otomatis stop setelah berhasil scan untuk menghemat resource
Implementasi includes sound feedback dan haptic feedback
Mobile-first responsive design

Future Enhancements

Support untuk QR Code
Batch scanning multiple barcodes
Offline scanning capability
Advanced barcode validation
Scan history
Analytics dan reporting

3.9 KiB Raw Blame History