# Panduan Teknis Wi-Fi Rumah (v1.0.0)
Dokumentasi Arsitektur Sistem, Script Scraper Router, dan Utilitas Jaringan Lokal
Pengembang: Fathi Fadhil (@Fathii3) | Repositori: https://github.com/Fathii3/Wifi-Rumah

---

## 1. Ikhtisar Sistem
Wi-Fi Rumah adalah aplikasi utilitas jaringan lokal dan portal tamu yang dirancang untuk menyederhanakan akses internet tamu sekaligus memberikan visibilitas perangkat aktif bagi pemilik jaringan lokal tanpa memerlukan instalasi aplikasi di sisi klien.

Sistem terdiri dari dua komponen utama:
1. Frontend Web Client: Portal mandiri berbasis web untuk koneksi QR-code Wi-Fi instan, pengujian kecepatan jaringan (Speedtest), dan dashboard pemantauan perangkat.
2. Backend Automation Script (server.js): Server otomasi Node.js berbasis Puppeteer yang melakukan autentikasi ke panel admin router lokal (192.168.1.1) dan mengekstrak tabel DHCP/koneksi aktif menjadi endpoint JSON.

---

## 2. Struktur Modul Antarmuka Web

### A. Portal Tamu (index.html)
- Generator QR Code WPA/WPA2 dinamis untuk koneksi otomatis kamera ponsel tanpa input manual kata sandi.
- Utilitas penyalin kata sandi 1-klik ke clipboard.
- Deteksi parameter jaringan klien (alamat IP publik, ISP, dan estimasi lokasi).
- Access lock berbasis localStorage untuk pembatasan durasi sesi per perangkat.

### B. Uji Kecepatan Jaringan (kecepatan.html)
- Pengukuran performa koneksi: Latensi Ping (ms), Jitter, Download (Mbps), dan Upload (Mbps).
- Berjalan 100% di sisi klien (client-side) menggunakan CDN multi-region sehingga tetap berfungsi normal tanpa bergantung pada backend lokal.
- Penyimpanan riwayat pengujian lokal (browser storage) untuk pembanding performa berkala.

### C. Pemantauan Klien Terhubung (perangkat.html)
- Menampilkan daftar perangkat terhubung: Nama Host, Alamat IP Lokal, Alamat MAC, dan status koneksi.
- Sinkronisasi otomatis ke endpoint backend lokal via REST API /api/devices.
- Konfigurasi host fleksibel untuk peralihan antara IP lokal (http://localhost:3000) dan tunnel HTTPS publik.

---

## 3. Konfigurasi dan Menjalankan Backend Scraper (server.js)

Backend script bertugas menjembatani antarmuka web dengan panel web-admin router lokal yang umumnya tidak memiliki REST API publik.

### Prasyarat Sistem
- Node.js versi 18 LTS atau lebih baru.
- Mesin/komputer server (PC/server mini/Raspberry Pi) harus berada dalam satu segmen jaringan (LAN/WLAN) dengan router gateway (default: 192.168.1.1).

### Langkah 1: Instalasi Dependensi
Buka terminal pada direktori proyek dan pasang paket yang diperlukan:
```bash
npm install express puppeteer dotenv cors
```

### Langkah 2: Konfigurasi File Lingkungan (.env)
Salin berkas template dan sesuaikan dengan parameter router Anda:
```bash
cp .env.example .env
```
Konfigurasi nilai variabel di dalam file .env:
```env
ROUTER_HOST=http://192.168.1.1
ROUTER_USER=admin
ROUTER_PASS=PasswordAdminRouter
PORT=3000
HEADLESS=true
```

### Langkah 3: Menjalankan Server Otomasi
Jalankan daemon backend dengan perintah:
```bash
node server.js
```
Endpoint API data perangkat akan aktif di:
```text
http://localhost:3000/api/devices
```
Respon JSON akan mengembalikan daftar perangkat aktif dalam format:
```json
{
  "status": "success",
  "totalDevices": 4,
  "devices": [
    { "ip": "192.168.1.101", "mac": "AA:BB:CC:DD:EE:01", "name": "Galaxy-S24" },
    { "ip": "192.168.1.105", "mac": "AA:BB:CC:DD:EE:02", "name": "MacBook-Pro" }
  ]
}
```

---

## 4. Integrasi Web Cloud (Vercel HTTPS) via HTTPS Tunnel

Jika antarmuka web diakses melalui domain HTTPS publik (misalnya Vercel di https://wifi-rumah.vercel.app), pemanggilan langsung ke http://localhost:3000 akan diblokir oleh browser karena kebijakan Mixed Content (HTTPS memanggil HTTP).

Gunakan metode tunnel aman untuk mengekspos API backend lokal ke HTTPS:

### Menggunakan Ngrok:
1. Jalankan tunnel HTTP pada port backend:
```bash
ngrok http 3000
```
2. Salin URL publik HTTPS yang dihasilkan, contoh:
```text
https://a1b2-your-subdomain.ngrok-free.dev
```
3. Buka halaman perangkat.html, klik menu Pengaturan (ikon gear), dan tempel URL tunnel tersebut. Antarmuka web sekarang dapat menarik data router secara aman tanpa kendala Mixed Content.

---

## 5. Referensi Akses Panel Admin Router Bawaan

| Parameter | Spesifikasi Pengujian Bawaan |
| :--- | :--- |
| Perangkat Uji | ONU / ONT HSGQ (Fiber Optic GPON / EPON) |
| URL Portal Admin | http://192.168.1.1/admin/login.asp |
| Default Username | admin |
| Default Password | admin |
| Selector Login | input[name="username"], input[name="password"] |

Catatan Adaptasi Router:
Jika menggunakan merek router lain (ZTE F609/F670, Huawei HG8245, Fiberhome, atau TP-Link), sesuaikan selector input form login dan parser tabel DOM pada file server.js agar sesuai dengan struktur HTML halaman status DHCP router tersebut.

---
Dokumen ini disusun untuk katalog repositori berkas dist.nex.biz.id.