# note 🔖 **Ringkasan singkat (untuk dibaca besok)** - Project: API deteksi fraud berbasis Flask. - Status saat ini: semua unit & integration tests lulus (2 passed). - Model files: `ensemble_model_enhanced.joblib` (prioritas) / `ensemble_model.joblib` / `Ensemble_model.joblib`. - Preprocessor files: `preprocessor_enhanced.joblib` (prioritas) / `preprocessor.joblib` / `Preprocessor.joblib`. - Config: `anscombe.json` (cari case-insensitive). - Dependencies penting: `scikit-learn==1.6.1` (dipin), `imbalanced-learn` (untuk unpickle model), `requests` (untuk integrasi). --- ## Cara menjalankan server (cepat) 1. Pastikan dependencies terpasang: ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pip install -r requirements.txt ``` 2. Jalankan server Flask (foreground): ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" app.py ``` Server akan tersedia di: `http://127.0.0.1:5000` (default). Tekan `Ctrl+C` untuk stop. 3. Jalankan server di background dan simpan log: ```powershell Start-Process -FilePath "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -ArgumentList "app.py" -RedirectStandardOutput server_out.log -RedirectStandardError server_err.log -PassThru Get-Content server_out.log -Tail 50 -Wait ``` --- ## Cara menguji endpoint `/predict` - PowerShell: ```powershell Invoke-RestMethod -Uri http://127.0.0.1:5000/predict -Method Post -ContentType 'application/json' -Body '{"features":[200,1,0,500]}' ``` - curl: ```powershell curl -X POST http://127.0.0.1:5000/predict -H "Content-Type: application/json" -d "{\"features\":[200,1,0,500]}" ``` - Python one-liner: ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -c "import requests; print(requests.post('http://127.0.0.1:5000/predict', json={'features':[200,1,0,500]}).json())" ``` Respons contoh: ```json {"fraud":0, "fraud_prediction":0, "probability":0.83} ``` --- ## Menguji frontend (quick smoke test) 1. Pastikan server Flask berjalan (lihat bagian "Cara menjalankan server"). 2. Serving file frontend agar fetch berjalan tanpa masalah CORS dari file://, mis. jalankan dari folder `frontend`: ```powershell cd frontend python -m http.server 8000 # lalu buka http://localhost:8000/fraud_detection_frontend.html di browser ``` 3. Periksa `API_BASE_URL` di `frontend/fraud_detection_frontend.html` — default saya set ke `http://localhost:5000` karena endpoint `/predict` ada di root. 4. Form akan mengirimkan payload lengkap yang mencakup field yang diharapkan preprocessor (contoh payload yang berhasil diuji): ```json { "merchant_name":"Test", "avg_amount_per_transaction":123.45, "day_of_week":2, "amount_deviation_from_location_mean":0, "transaction_category":"retail", "customer_no_transactions":0, "customer_lat":null, "transaction_type":"online", "customer_place_name":null, "merchant_id":null, "location":"New York", "customer_job":null, "age":null, "merchant_long":null, "amount_per_city_pop":0, "customer_long":null, "distance_customer_merchant":0, "transactions_per_customer_ratio":0, "customer_city_population":0, "merchant_lat":null, "customer_no_payments":0, "customer_no_orders":0, "payments_per_order_ratio":0, "hour_of_day":12, "amount":123.45, "customer_zip_code":null, "mean_amount_by_location":0, "fraud_rate_by_location":0, "customer_gender":null } ``` Hasil uji lokal (contoh): server merespons 200 dan body JSON seperti `{"fraud":0,"fraud_prediction":0,"probability":0.766...}` --- ## Menjadikan Frontend ke Aplikasi Mobile (ringkasan & langkah cepat) Jika ingin agar frontend bisa diakses seperti aplikasi mobile, ada 2 jalur praktis yang saya rekomendasikan: - **PWA (Progressive Web App)** — tercepat dan paling mudah dicoba. - Buat `manifest.json` (name, short_name, icons, start_url, display: standalone). - Tambah `sw.js` (service worker) untuk caching (app shell) dan memungkinkan akses offline terbatas. - Pastikan serve via HTTPS (Chrome/Edge mewajibkan HTTPS untuk installable PWA). Untuk development, pakai `ngrok http 8000` atau host sementara. - Pengguna bisa pilih "Add to Home screen" di browser Android/Chrome. - Cocok untuk prototipe dan distribusi cepat tanpa perlu build native. - **Capacitor (WebView wrapper → Android/iOS native app)** — bila mau jadi APK/IPA. - Butuh Node.js dan Android SDK (untuk Android) atau Xcode (untuk iOS). - Langkah ringkas: ```powershell # di folder project root npm init -y npm install @capacitor/core @capacitor/cli npx cap init my-app com.example.myapp # Copy output static (letakkan file html ke folder `www/` atau build pipeline) npx cap add android npx cap copy android npx cap open android ``` - Untuk dev lokal saat backend di localhost, gunakan `ngrok` (atau host backend) supaya device nyata bisa reach API. ### Checklist penting sebelum rilis - Pastikan backend reachable dari device (hosted / ngrok untuk testing). - Gunakan HTTPS untuk API (Play Store & browser modern membatasi HTTP). - Pastikan CORS/Origin sudah diatur (PWA: origin penting; WebView biasanya tidak terkena CORS sama cara). - Otentikasi & keamanan: pakai token, jangan hard-code credentials di kode klien. - Ukuran & performa: minimalkan asset (gambar, script) dan aktifkan caching service worker untuk PWA. - Untuk Play Store: sign APK dengan key, perhatikan kebijakan privasi & permission. ### Contoh resource cepat (starter files) - `manifest.json` (minimal): ```json { "name": "Fraud Detection AI", "short_name": "FraudAI", "start_url": "/fraud_detection_frontend.html", "display": "standalone", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" } ] } ``` - `sw.js` (very small cache-first): ```js const CACHE_NAME = 'fraud-ai-v1'; const ASSETS = ['/', '/fraud_detection_frontend.html', '/styles.css']; self.addEventListener('install', e => { e.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))); }); self.addEventListener('fetch', e => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); }); ``` --- ## Implementasi PWA & Capacitor (yang sudah saya tambahkan) - Sudah saya tambahkan ke repo: - `frontend/manifest.json`, `frontend/sw.js`, `frontend/icons/icon.svg` - `frontend/README_PWA.md` (cara test & catatan) - Perubahan pada `frontend/fraud_detection_frontend.html` (link `manifest.json`, register `sw.js`) - `mobile/README_CAPACITOR.md` berisi langkah awal untuk membungkus aplikasi dengan Capacitor Jika Anda ingin saya lanjut scaffold project Capacitor (init + add android, script npm), saya bisa kerjakan — beri tahu saya, dan saya akan buat branch terpisah karena itu menambahkan file Node.js/platform yang besar. --- ## Menjalankan tests - Jalankan semua tests (unit + integration): ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pytest -q ``` - Hanya unit tests (skip integration): ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pytest -q -m "not integration" ``` - Hanya integration tests: ```powershell & "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pytest -q -m integration ``` > Catatan: integration test men-start server otomatis pada port `5001`. --- ## Debugging cepat (jika error) - Jika mendapat `Connection refused`: server tidak jalan atau port diblokir. Cek log `server_out.log` / `server_err.log` dan jalankan server di foreground untuk melihat traceback. - Jika mendapat `500 Internal Server Error`: buka `server_err.log`, salin traceback, lalu perbaiki (bisa minta saya terjemahkan/diagnosa). Perintah cek log: ```powershell Get-Content server_err.log -Tail 200 ``` --- ## Hal lain yang sudah saya lakukan - Menambahkan file `tests/test_integration.py` dan `scripts/run_integration_debug.py` (debug helper). - Menambahkan `.vscode/settings.json` untuk pytest discovery. - Membuat `pytest.ini` dengan marker `integration`. - Membuat perubahan di `app/model.py` agar lebih fleksibel memuat model/preprocessor dan meng-handle input fitur yang berbeda panjang. --- ## Rencana selanjutnya (opsional) - Commit & push perubahan jika Anda mau (saya bisa bantu buat pesan commit). - Tambahkan CI (GitHub Actions) agar tests jalan otomatis di push/PR. - Buatkan `DEVELOPMENT_NOTES.md` yang lebih panjang (jika Anda mau dokumentasi lebih lengkap). --- Jika mau, saya bisa langsung commit file `note.md` ini (atau buat branch & PR). Mau saya commit sekarang? ✅ --- ## Uji Stabilitas / Load testing Kalau Anda mengalami kesulitan membuat uji stabilitas, berikut langkah praktis yang bisa dilakukan secara lokal untuk mengecek bagaimana backend `predict` berperilaku di bawah beban. 1) Jalankan server dengan server WSGI produksi - Windows: gunakan `waitress` (sederhana dan cocok di Windows) ```powershell python -m pip install waitress waitress-serve --listen=0.0.0.0:5000 app:app ``` - Linux/macOS: gunakan `gunicorn` ```bash python -m pip install gunicorn gunicorn -w 4 -b 0.0.0.0:5000 app:app ``` 2) Jalankan Locust (sudah saya siapkan file `load_tests/locustfile.py`) ```powershell python -m pip install locust locust -f load_tests/locustfile.py --host=http://localhost:5000 # buka http://localhost:8089 untuk mengatur jumlah users dan spawn rate ``` 3) Panduan uji bertahap - Mulai kecil: 5 users, spawn rate 1/s selama 30s. Naikkan perlahan (20 → 50 → 100) sambil memonitor CPU/RAM dan error rate. - Perhatikan latency p50/p95/p99 dan request failures di Locust UI. 4) Jika Anda ingin menguji dari perangkat mobile (Capacitor) atau perangkat nyata: - Pastikan backend dapat dijangkau dari device — gunakan `ngrok http 5000` untuk membuat HTTPS tunnel, lalu gunakan URL ngrok sebagai `API_BASE_URL` di frontend. 5) Interpretasi singkat - Error rate tinggi: kemungkinan server kehabisan worker/connection atau unhandled exceptions. Cek `server_err.log`. - Latency tinggi: periksa penggunaan CPU (model inference mungkin bottleneck). Solusi: batching, memindahkan inference ke worker terpisah, atau skalakan server (multiple instances/load balancer). 6) File & tool yang saya tambahkan - `load_tests/locustfile.py` — contoh script Locust untuk POST `/predict`. Kalau mau, saya siap bantu menjalankan uji ini bersama (saya pandu perintah di terminal Anda), atau scaffold runner otomatis di cloud (mis. k6 script + GitHub Actions) untuk uji berkelanjutan.