3.6 KiB
Executable File
4NK Client SDK (Iframe & Standalone)
Une application Web5 décentralisée construite avec TypeScript, Vite, Web Components et WebAssembly (Rust). Cette application est conçue pour fonctionner de manière autonome ou intégrée via Iframe en tant que SDK pour des applications tierces.
🏗 Architecture
Le projet suit une architecture modulaire stricte (Domain-Driven Design) :
src/services/core: Services bas niveau (Réseaunetwork.service.ts, SDK WASMsdk.service.ts).src/services/domain: Logique métier (Walletwallet.service.ts, Processprocess.service.ts, Cryptocrypto.service.ts).src/services/service.ts: Façade principale (Singleton) orchestrant les sous-services.src/services/iframe-controller.service.ts: Contrôleur dédié à la communication API viapostMessage(mode Iframe).src/service-workers: Gestionnaires d'arrière-plan modulaires (Base de données, Cache).src/pages&src/components: Interface utilisateur basée sur des Web Components natifs (Shadow DOM) et un design system "Glassmorphism".src/config: Configuration centralisée (constants.ts).
🚀 Démarrage Rapide
Prérequis
- Node.js (v20+)
- Rust & Cargo (pour la compilation WASM)
- Nginx (pour la production ou le reverse-proxy local)
Installation
-
Compiler le module WASM :
npm run build_wasmNote : Cette commande compile le code Rust situé dans
../sdk_clientvers./pkg. -
Installer les dépendances JS :
npm install -
Lancer en développement :
npm run startL'application sera accessible sur
http://localhost:3003.
📦 Build & Production
Pour créer une version de production optimisée dans le dossier dist/ :
npm run build
Déploiement Nginx
Utilisez les fichiers de configuration fournis à la racine :
nginx.dev.conf: Pour le développement local (proxy vers Vite).nginx.prod.conf: Pour la production (SSL, Headers de sécurité, Service-Worker-Allowed).
🔧 Configuration
La configuration de l'application est centralisée dans src/config/constants.ts.
Vous pouvez surcharger les URLs via un fichier .env à la racine :
| Variable | Description |
|---|---|
VITE_BASEURL |
URL de base de l'infrastructure. |
VITE_BOOTSTRAPURL |
URL du relais WebSocket. |
VITE_STORAGEURL |
URL du stockage distant. |
VITE_BLINDBITURL |
URL de l'indexeur Bitcoin. |
🧪 Fonctionnalités Clés
1. Auto-Healing WebSocket
Le service réseau maintient la connexion active avec un système de "Heartbeat" et de reconnexion exponentielle automatique. Aucune action utilisateur requise en cas de coupure réseau.
2. Iframe Persistence & Performance
En mode Iframe, l'application charge son état en mémoire et ne nécessite aucun rafraîchissement.
- Stratégie Cache-First : Les requêtes
GET_PROCESSESrépondent instantanément via le cache mémoire. - Verrou d'initialisation : Empêche les conflits si l'iframe est rechargée par erreur.
3. Service Worker Modulaire
Le fichier src/service-workers/sw.ts agit comme un point d'entrée maître, important dynamiquement la logique de base de données (database.ts). Il inclut une logique de nettoyage automatique des anciens workers ("Zombie Killer").
4. UX Moderne
Interface "Glassmorphism" responsive utilisant CSS Grid pour un Layout (App Shell) stable et des Web Components natifs pour l'isolation des styles (Shadow DOM).