cindyy287's picture
Upload 12 files
e6da2e3 verified

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:
& "C:\Users\CINDY\AppData\Local\Programs\Python\Python310\python.exe" -m pip install -r requirements.txt
  1. 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.

  1. 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)

  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:
cd frontend
python -m http.server 8000
# lalu buka http://localhost:8000/fraud_detection_frontend.html di browser
  1. Periksa API_BASE_URL di frontend/fraud_detection_frontend.html β€” default saya set ke http://localhost:5000 karena endpoint /predict ada di root.
  2. 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 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:
      # 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.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):
& "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 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:

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)
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
  1. 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
  1. 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.
  1. 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.
  1. 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).
  1. 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.