90 lines
3.6 KiB
Markdown
Executable File
90 lines
3.6 KiB
Markdown
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éseau `network.service.ts`, SDK WASM `sdk.service.ts`).
|
|
- **`src/services/domain`** : Logique métier (Wallet `wallet.service.ts`, Process `process.service.ts`, Crypto `crypto.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 via `postMessage` (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
|
|
|
|
1. **Compiler le module WASM :**
|
|
```bash
|
|
npm run build_wasm
|
|
```
|
|
*Note : Cette commande compile le code Rust situé dans `../sdk_client` vers `./pkg`.*
|
|
|
|
2. **Installer les dépendances JS :**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Lancer en développement :**
|
|
```bash
|
|
npm run start
|
|
```
|
|
L'application sera accessible sur `http://localhost:3003`.
|
|
|
|
## 📦 Build & Production
|
|
|
|
Pour créer une version de production optimisée dans le dossier `dist/` :
|
|
|
|
```bash
|
|
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_PROCESSES` ré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). |