ANPR-using-GUI-ReactNative

Proyek ini merupakan aplikasi mobile berbasis React Native + Expo yang terintegrasi dengan backend Python Flask untuk mendeteksi dan membaca teks dari plat nomor kendaraan menggunakan OpenCV dan Tesseract OCR.

---

🧩 Fitur

• Upload/capture gambar kendaraan dari galeri atau kamera
• Kirim gambar ke server lokal
• Proses OCR pada server menggunakan OpenCV + Tesseract
• Tampilkan hasil bacaan OCR di aplikasi

---

📱 Frontend: React Native + Expo

Install & Jalankan

npm install
npx expo start

Fitur Utama UI

• Expo ImagePicker
• Upload gambar ke backend via fetch POST
• Menampilkan hasil OCR sebagai respons JSON

---

🖥️ Backend: Python Flask + OpenCV + Tesseract

Struktur Sederhana

server/
├── app.py
├── requirements.txt
└── uploads/

Requirements

pip install -r requirements.txt
sudo apt install tesseract-ocr

Jalankan Flask

python app.py

⚠️ Pastikan app.py dijalankan di alamat IP LAN (bukan localhost) agar bisa diakses oleh HP (misalnya: host='0.0.0.0' dan port 5000)

---

🧠 API Endpoint

POST /upload

• Request: multipart/form-data
  • file: gambar (.jpg, .png, dll.)
• Response: JSON

  {
    "text": "B 1234 ABC"
  }

---

🛠️ Tools yang Digunakan

• React Native (Expo)
• TypeScript
• Flask (Python)
• OpenCV
• Tesseract OCR

---

📶 Koneksi React Native ⇄ Flask

• Gunakan IP lokal PC (bukan localhost/127.0.0.1)
• Contoh URL:

  const API_URL = 'http://192.168.100.79:5000/upload';

• Jangan lupa izinkan permissions kamera & galeri di aplikasi Expo

---

📌 Catatan

• Jalankan Flask dan Expo dalam jaringan WiFi yang sama
• Port 8081 untuk React Native, dan 5000 untuk Flask backend

---

🤝 Kontribusi

Silakan fork dan pull request jika ingin menambahkan fitur atau memperbaiki bug.