Lanjut ke konten
Samkarsa Logbook

Ketik untuk mencari…

↑↓untuk navigasi
Esc

BiZETO v1.0.0-003: Isolasi Lifecycle Pairing QR WhatsApp dan Auto-Trigger WebSocket

Penyempurnaan modul Connectivity BiZETO: isolasi state pairing node baru, auto-trigger WebSocket WhatsMeow, eliminasi penutupan modal prematur, dan UI pemindaian QR.

1mnt baca

Ketika pengguna membuka menu Connectivity pada BiZETO dan menekan tombol Tambah Node / Hubungkan Perangkat, QR Code WhatsApp tidak muncul di layar. Investigasi menunjukkan tiga akar permasalahan utama:

  1. Polusi State Global Perangkat Lama:
    • Saat halaman dimuat, AppContext.tsx memanggil GET /api/devices?platform=whatsapp.
    • Karena sudah terdapat data perangkat sebelumnya di database, state global status disetel menjadi 'paired'.
  2. Ketiadaan Auto-Trigger WebSocket:
    • Pembukaan modal (setIsModalOpen(true)) tidak secara otomatis memicu pemanggilan fungsi connect() untuk membuka koneksi WebSocket ke /api/ws/pair.
    • Komponen rendering mendeteksi status === 'paired', sehingga area canvas QR Code dilewati (bypassed).
  3. Auto-Close Modal Prematur:
    • Terdapat hook useEffect yang mendeteksi status 'paired' saat modal terbuka, memicu timer penutupan modal secara otomatis dalam waktu 2 detik.

Pembaruan v1.0.0-003 menghadirkan arsitektur pairing terisolasi yang stabil dan responsif:

  • State Terisolasi: Memisahkan siklus hidup pairing (idle, connecting, scanning, success, timeout, error) secara independen dari status perangkat global.
  • Auto-Connect saat Modal Dibuka: Fungsi handleOpenPairing() langsung menginisiasi WebSocket pairing /api/ws/pair dengan otentikasi JWT token terenkripsi.
  • Lifecycle Cleanup: Menutup koneksi WebSocket dan membersihkan memori saat modal ditutup atau saat komponen di-unmount.

  • Rendering QR Instan: Menggunakan QRCodeSVG dengan level koreksi M dan animasi glowing frame saat stream data QR diterima dari WhatsMeow backend.
  • Petunjuk Pemindaian 3-Langkah: Panduan visual yang jelas untuk memandu pengguna menautkan perangkat dari aplikasi smartphone WhatsApp.
  • Mekanisme Retry: Tombol Muat Ulang QR Code yang responsif saat terjadi QR timeout tanpa harus keluar dari modal.

Bundle frontend telah berhasil dikompilasi dengan tsc -b && vite build dan disinkronisasi ke server VPS via ./deploy.sh. Layanan bizeto_frontend dan bizeto_backend telah di-restart dan beroperasi normal.