🚀 4NK Client - Application Web5

Application client pour l'écosystème 4NK, permettant la gestion sécurisée des appareils, le pairing, et les signatures de documents.

📋 Table des matières

• 🚀 Démarrage rapide
• 🏗️ Architecture
• 🔧 Développement
• 📊 Qualité du code
• 🤝 Contribution

🚀 Démarrage rapide

Prérequis

• Node.js 18+
• Rust (pour le SDK)
• npm ou yarn

Installation

# 1. Cloner les dépendances
git clone <sdk_common> # commit "doc pcd" from 28.10.2024
git clone <sdk_client>  # commit "Ignore messages" from 17.10.2024
git clone <ihm_client_dev3>

# 2. Build du SDK Rust
cd sdk_common && cargo build
cd ../sdk_client && cargo run

# 3. Build et démarrage de l'application
cd ../ihm_client_dev3
npm install
npm run build_wasm
npm run start

Scripts disponibles

# Développement
npm run start          # Serveur de développement
npm run build          # Build de production
npm run quality        # Vérification de la qualité
npm run quality:fix    # Correction automatique

# Tests et analyse
npm run test           # Tests unitaires
npm run lint           # Linting du code
npm run type-check     # Vérification TypeScript
npm run analyze        # Analyse du bundle

🏗️ Architecture

Structure du projet

src/
├── components/         # Composants UI réutilisables
├── pages/             # Pages de l'application
├── services/          # Services métier
├── utils/             # Utilitaires et helpers
├── models/            # Types et interfaces
└── service-workers/   # Workers pour les opérations async

Technologies

• Frontend: TypeScript, Vite, HTML5, CSS3
• SDK: Rust (WebAssembly)
• Storage: IndexedDB, Service Workers
• Communication: WebSockets, PostMessage API

WebSocket Relay Configuration

• Default relay runs locally on 127.0.0.1:8091 and is exposed securely via wss://relay235.4nkweb.com/ws/
• Nginx TLS termination is defined in nginx.relay235.conf (kept alongside the existing nginx.dev.conf)
• Clients must configure VITE_BOOTSTRAPURL=wss://relay235.4nkweb.com/ws/ to avoid mixed-content issues when the app is served over HTTPS

🔧 Développement

Standards de code

• TypeScript strict
• ESLint + Prettier
• Tests unitaires
• Documentation JSDoc

Workflow

1. Créer une branche feature
2. Développer avec tests
3. Vérifier la qualité: npm run quality
4. Créer une PR avec description détaillée

📊 Qualité du code

Métriques cibles

• Couverture de tests: > 80%
• Complexité cyclomatique: < 10
• Taille des fichiers: < 300 lignes
• Bundle size: < 500KB gzippé

Outils de qualité

• TypeScript strict mode
• ESLint avec règles personnalisées
• Prettier pour le formatage
• Bundle analyzer pour l'optimisation

🤝 Contribution

Voir CONTRIBUTING.md pour les détails complets.

Démarrage rapide

# Fork et clone
git clone <votre-fork>
cd ihm_client_dev3

# Installation
npm install

# Vérification de la qualité
npm run quality

# Développement
npm run start

USER STORIES

1 - I can login with my adress device 2 - I can login with QR code 3 - J'accède à la page Process après ma connexion 4 - Dans l'interface Process, je peux sélectionner un processus avec sa zone 5 - Je reçois des notifications dans la page Process 6 - Dans le menu, je peux importer mes données au format JSON 7 - Dans le menu, je peux accèder à la page Account 8 - Dans la page Account, je peux cliquer sur mon profil via la bulle de profil en haut à gauche et une popup de profil s'ouvre 9 - Dans la popup de profil, je peux voir mes informations personnelles et modifier certaines d'entre elles dont le nom, le prénom 10 - Dans la popup de profil, je peux changer ma photo de profil 11 - Dans la popup de profil, je peux fermer la popup en cliquant sur le bouton "X" en haut à droite de la popup 12 - Dans la popup de profil, je peux cliquer sur le bouton "Export User Data", ce qui me génère un fichier JSON 13 - Dans la popup de profil, je peux cliquer sur le bouton "Delete Account", ce qui me demande à valider mon choix 14 - Dans la popup de profil, je peux cliquer sur le bouton "Logout", ce qui me déconnecte 15 - Dans la popup de profil, je peux cliquer sur le bouton "Export Recovery", ce qui me demandera de confirmer mon choix ou d'annuler, si je confirme, je dois retenir et écrire les 4 mots de récupération, le bouton ne sera plus accessible après cela 16 - Dans l'onglet Pairing de la page Account, je peux ajouter un nouveau "device" en cliquant sur le bouton "Add Device" 17 - Dans l'onglet Pairing de la page Account, je peux supprimer un "device" en cliquant sur l'emoji de la poubelle à côté du device que je souhaite supprimer 18 - Dans l'onglet Pairing de la page Account, je peux cliquer sur le bouton "Scan QR Code" pour scanner le QR Code d'un nouveau device 19 - Dans l'onglet Pairing de la page Account, je peux renommer un "Device" en cliquant sur son nom et en modifiant le nom 20 - Dans l'onglet Wallet de la page Account, je peux ajouter un nouveau "wallet" en cliquant sur le bouton "Add a line" 21 - Dans l'onglet Process de la page Account, je peux voir les Process disponibles et voir leur notifications en cliquant sur sur la sonnette à côté du processus 22 - Dans l'onglet Data de la page Account, je peux voir les données importées 23 - Je peux voir le contrat associé à une Data en cliquant sur le contrat dans la ligne de la Data 24 - Dans le menu je peux accèder à la page Chat 25 - Dans la page Chat, je peux voir les Processus 26 - Dans les Processus, je peux voir utilisateurs assignés à un rôle 27 - Dans les Processus, je peux envoyer des messages et des documents en cliquant sur le nom d'un utilisateur en en envoyant "send" 28 - Dans le menu je peux accèder à la page "Signatures" 29 - Je peux voir les documents à signer et vierge en cliquand sur l'emoji ⚙️ à côté du processus 30 - En cliquand sur l'onglet d'un processus, je peux voir les rôles assignés à un utilisateur en cliquant dessus 31 - En cliquand sur l'emoji 📁 à côté d'un rôle, je peux voir les documents associés à ce rôle 32 - Dans la vue des documents associés à un rôle, je peux créer un évènement de nouvelle signature pour tous les rôles associés à ce Processus, avec le bouton "New Request" 33 - En cliquant sur le bouton "New Request", une nouvelle fenêtre s'ouvre pour me permettre de rentrer la description, la visibilité, la date d'échéance, importer des documents, voir les signataires et "Request" 34 - Dans le menu, je peux me déconnecter avec le bouton "Disconnect"

TO DO