note.md

# 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.