Spaces:
Sleeping
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)
- Pastikan dependencies terpasang:
& "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pip install -r requirements.txt
- Jalankan server Flask (foreground):
& "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.
- Jalankan server di background dan simpan log:
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:
Invoke-RestMethod -Uri http://127.0.0.1:5000/predict -Method Post -ContentType 'application/json' -Body '{"features":[200,1,0,500]}'
- curl:
curl -X POST http://127.0.0.1:5000/predict -H "Content-Type: application/json" -d "{\"features\":[200,1,0,500]}"
- Python one-liner:
& "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:
{"fraud":0, "fraud_prediction":0, "probability":0.83}
Menguji frontend (quick smoke test)
- Pastikan server Flask berjalan (lihat bagian "Cara menjalankan server").
- Serving file frontend agar fetch berjalan tanpa masalah CORS dari file://, mis. jalankan dari folder
frontend:
cd frontend
python -m http.server 8000
# lalu buka http://localhost:8000/fraud_detection_frontend.html di browser
- Periksa
API_BASE_URLdifrontend/fraud_detection_frontend.htmlβ default saya set kehttp://localhost:5000karena endpoint/predictada di root. - Form akan mengirimkan payload lengkap yang mencakup field yang diharapkan preprocessor (contoh payload yang berhasil diuji):
{
"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 8000atau host sementara. - Pengguna bisa pilih "Add to Home screen" di browser Android/Chrome.
- Cocok untuk prototipe dan distribusi cepat tanpa perlu build native.
- Buat
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:
# 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):
{
"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):
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.svgfrontend/README_PWA.md(cara test & catatan)- Perubahan pada
frontend/fraud_detection_frontend.html(linkmanifest.json, registersw.js) mobile/README_CAPACITOR.mdberisi 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):
& "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pytest -q
- Hanya unit tests (skip integration):
& "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pytest -q -m "not integration"
- Hanya integration tests:
& "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 logserver_out.log/server_err.logdan jalankan server di foreground untuk melihat traceback. - Jika mendapat
500 Internal Server Error: bukaserver_err.log, salin traceback, lalu perbaiki (bisa minta saya terjemahkan/diagnosa).
Perintah cek log:
Get-Content server_err.log -Tail 200
Hal lain yang sudah saya lakukan
- Menambahkan file
tests/test_integration.pydanscripts/run_integration_debug.py(debug helper). - Menambahkan
.vscode/settings.jsonuntuk pytest discovery. - Membuat
pytest.inidengan markerintegration. - Membuat perubahan di
app/model.pyagar 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.mdyang 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.
- Jalankan server dengan server WSGI produksi
- Windows: gunakan
waitress(sederhana dan cocok di Windows)
python -m pip install waitress
waitress-serve --listen=0.0.0.0:5000 app:app
- Linux/macOS: gunakan
gunicorn
python -m pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:app
- Jalankan Locust (sudah saya siapkan file
load_tests/locustfile.py)
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
- 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.
- Jika Anda ingin menguji dari perangkat mobile (Capacitor) atau perangkat nyata:
- Pastikan backend dapat dijangkau dari device β gunakan
ngrok http 5000untuk membuat HTTPS tunnel, lalu gunakan URL ngrok sebagaiAPI_BASE_URLdi frontend.
- 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).
- 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.