docs: alignement complet sur le niveau de documentation de 4NK_node - Création de l'INDEX.md complet avec navigation structurée - Ajout du guide d'INSTALLATION.md détaillé (Node.js, Rust, WASM) - Création du guide d'USAGE.md complet (interface, fonctionnalités, workflows) - Ajout de l'ARCHITECTURE.md technique détaillée (frontend, WASM, build) - Documentation alignée sur les standards de 4NK_node - Structure cohérente et navigation intuitive - Guides pratiques et techniques complets
This commit is contained in:
parent
8c3dd51702
commit
ba27a59eea
580
docs/ARCHITECTURE.md
Normal file
580
docs/ARCHITECTURE.md
Normal file
@ -0,0 +1,580 @@
|
||||
# 🏗️ Architecture Technique - ihm_client
|
||||
|
||||
Documentation technique détaillée de l'architecture de l'interface utilisateur ihm_client.
|
||||
|
||||
## 📋 Vue d'Ensemble
|
||||
|
||||
### Architecture Générale
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ ihm_client │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Frontend (Vue.js + TypeScript) │
|
||||
│ ├── Components Vue.js │
|
||||
│ ├── Services TypeScript │
|
||||
│ ├── Types et Interfaces │
|
||||
│ └── Utilitaires │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ WASM (Rust + sdk_client) │
|
||||
│ ├── Module WebAssembly │
|
||||
│ ├── Fonctions Silent Payments │
|
||||
│ └── Interface JavaScript │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Build System (Vite) │
|
||||
│ ├── Compilation TypeScript │
|
||||
│ ├── Bundling et Optimisation │
|
||||
│ └── Hot Module Replacement │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Stack Technologique
|
||||
|
||||
| Couche | Technologie | Version | Rôle |
|
||||
|--------|-------------|---------|------|
|
||||
| **Frontend** | Vue.js | 3.x | Framework UI |
|
||||
| **Language** | TypeScript | 5.x | Typage statique |
|
||||
| **Build** | Vite | 5.x | Build tool |
|
||||
| **WASM** | Rust | 1.70+ | Logique métier |
|
||||
| **WASM Build** | wasm-pack | 0.12+ | Compilation WASM |
|
||||
| **Styling** | CSS3 | - | Styles |
|
||||
| **Package Manager** | npm | 8.x+ | Gestion dépendances |
|
||||
|
||||
## 🏛️ Architecture Frontend
|
||||
|
||||
### Structure des Composants
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Composants réutilisables
|
||||
│ ├── header/ # En-tête de l'application
|
||||
│ ├── modal/ # Modales et popups
|
||||
│ ├── qrcode-scanner/ # Scanner QR code
|
||||
│ └── validation-modal/ # Modales de validation
|
||||
├── pages/ # Pages de l'application
|
||||
│ ├── home/ # Page d'accueil
|
||||
│ ├── account/ # Gestion du compte
|
||||
│ ├── signature/ # Signatures de documents
|
||||
│ └── process-element/ # Gestion des processus
|
||||
├── services/ # Services et APIs
|
||||
│ ├── service.ts # Service principal
|
||||
│ ├── modal.service.ts # Gestion des modales
|
||||
│ ├── storage.service.ts # Gestion du stockage
|
||||
│ └── token.ts # Gestion des tokens
|
||||
├── types/ # Types TypeScript
|
||||
│ ├── sdk_client.d.ts # Types WASM
|
||||
│ └── raw-imports.d.ts # Types d'imports
|
||||
└── utils/ # Utilitaires
|
||||
├── document.utils.ts # Utilitaires documents
|
||||
├── html.utils.ts # Utilitaires HTML
|
||||
└── sp-address.utils.ts # Utilitaires Silent Payments
|
||||
```
|
||||
|
||||
### Architecture Vue.js
|
||||
|
||||
#### Composants Principaux
|
||||
|
||||
##### Header Component
|
||||
```typescript
|
||||
interface HeaderProps {
|
||||
user: User;
|
||||
notifications: Notification[];
|
||||
onLogout: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
**Responsabilités :**
|
||||
- Navigation principale
|
||||
- Affichage du profil utilisateur
|
||||
- Gestion des notifications
|
||||
- Menu de déconnexion
|
||||
|
||||
##### Modal Components
|
||||
```typescript
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
content: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
**Types de modales :**
|
||||
- **Confirmation** : Actions critiques
|
||||
- **Validation** : Validation de données
|
||||
- **QR Scanner** : Scanner de codes QR
|
||||
- **Profile** : Édition du profil
|
||||
|
||||
##### QR Code Scanner
|
||||
```typescript
|
||||
interface QRScannerProps {
|
||||
onScan: (data: string) => void;
|
||||
onError: (error: Error) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
**Fonctionnalités :**
|
||||
- Accès à la caméra
|
||||
- Détection de QR codes
|
||||
- Validation des données
|
||||
- Gestion des erreurs
|
||||
|
||||
### Services et Communication
|
||||
|
||||
#### Service Principal
|
||||
```typescript
|
||||
class Service {
|
||||
// Communication avec sdk_client WASM
|
||||
async generateWallet(): Promise<Wallet>;
|
||||
async lockUTXOs(wallet: Wallet, utxos: UTXO[]): Promise<boolean>;
|
||||
|
||||
// Communication avec les APIs
|
||||
async sendMessage(message: Message): Promise<void>;
|
||||
async uploadDocument(file: File): Promise<Document>;
|
||||
|
||||
// Gestion des données
|
||||
async saveData(key: string, data: any): Promise<void>;
|
||||
async loadData(key: string): Promise<any>;
|
||||
}
|
||||
```
|
||||
|
||||
#### Gestion des États
|
||||
|
||||
```typescript
|
||||
// Store global (Vuex/Pinia)
|
||||
interface AppState {
|
||||
user: User | null;
|
||||
wallet: Wallet | null;
|
||||
processes: Process[];
|
||||
notifications: Notification[];
|
||||
settings: Settings;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚡ Architecture WASM
|
||||
|
||||
### Module sdk_client
|
||||
|
||||
#### Structure du Module
|
||||
```
|
||||
pkg/
|
||||
├── sdk_client_bg.wasm # Module WASM principal (3.3 MB)
|
||||
├── sdk_client.d.ts # Types TypeScript (12.6 KB)
|
||||
├── sdk_client.js # Wrapper JavaScript (182 B)
|
||||
├── sdk_client_bg.js # Code JavaScript généré (38 KB)
|
||||
└── package.json # Métadonnées du package
|
||||
```
|
||||
|
||||
#### Fonctions Principales
|
||||
|
||||
##### Gestion des Wallets
|
||||
```rust
|
||||
// Rust (sdk_client)
|
||||
pub fn generate_sp_wallet() -> Wallet {
|
||||
// Génération d'un nouveau wallet Silent Payment
|
||||
}
|
||||
|
||||
pub fn lock_freezed_utxos(wallet: Wallet, utxos: Vec<UTXO>) -> bool {
|
||||
// Verrouillage des UTXOs gelés
|
||||
}
|
||||
```
|
||||
|
||||
##### Interface JavaScript
|
||||
```typescript
|
||||
// TypeScript (ihm_client)
|
||||
import { generate_sp_wallet, lock_freezed_utxos } from 'pkg/sdk_client';
|
||||
|
||||
const wallet = generate_sp_wallet();
|
||||
const success = lock_freezed_utxos(wallet, utxos);
|
||||
```
|
||||
|
||||
### Intégration WASM-Frontend
|
||||
|
||||
#### Initialisation
|
||||
```typescript
|
||||
// Initialisation du module WASM
|
||||
import init from 'pkg/sdk_client';
|
||||
|
||||
async function initializeWASM() {
|
||||
try {
|
||||
await init();
|
||||
console.log('WASM module initialized');
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize WASM:', error);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Communication
|
||||
```typescript
|
||||
// Appel de fonctions WASM
|
||||
async function createWallet() {
|
||||
try {
|
||||
const wallet = generate_sp_wallet();
|
||||
return wallet;
|
||||
} catch (error) {
|
||||
console.error('WASM error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 Architecture Build
|
||||
|
||||
### Configuration Vite
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import wasm from 'vite-plugin-wasm';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
wasm(),
|
||||
],
|
||||
optimizeDeps: {
|
||||
exclude: ['pkg/sdk_client']
|
||||
},
|
||||
build: {
|
||||
target: 'es2020',
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'sdk-client': ['pkg/sdk_client']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Processus de Build
|
||||
|
||||
#### Développement
|
||||
```bash
|
||||
# Serveur de développement
|
||||
npm run dev
|
||||
|
||||
# Hot Module Replacement activé
|
||||
# Compilation TypeScript en temps réel
|
||||
# Chargement WASM à la demande
|
||||
```
|
||||
|
||||
#### Production
|
||||
```bash
|
||||
# Build optimisé
|
||||
npm run build
|
||||
|
||||
# Optimisations :
|
||||
# - Tree shaking
|
||||
# - Code splitting
|
||||
# - Minification
|
||||
# - Compression gzip
|
||||
```
|
||||
|
||||
### Optimisations
|
||||
|
||||
#### Code Splitting
|
||||
```typescript
|
||||
// Chargement à la demande des composants
|
||||
const SignatureComponent = () => import('./pages/signature/signature-component.vue');
|
||||
const AccountComponent = () => import('./pages/account/account-component.vue');
|
||||
```
|
||||
|
||||
#### Lazy Loading WASM
|
||||
```typescript
|
||||
// Chargement différé du module WASM
|
||||
const loadWASM = async () => {
|
||||
if (!wasmModule) {
|
||||
wasmModule = await import('pkg/sdk_client');
|
||||
await wasmModule.default();
|
||||
}
|
||||
return wasmModule;
|
||||
};
|
||||
```
|
||||
|
||||
## 🔄 Flux de Données
|
||||
|
||||
### Flux Principal
|
||||
|
||||
```
|
||||
1. Utilisateur → Interface Vue.js
|
||||
2. Interface → Services TypeScript
|
||||
3. Services → Module WASM (sdk_client)
|
||||
4. WASM → APIs externes (si nécessaire)
|
||||
5. Réponse → Services → Interface → Utilisateur
|
||||
```
|
||||
|
||||
### Gestion des États
|
||||
|
||||
#### État Local (Composants)
|
||||
```typescript
|
||||
// État local d'un composant
|
||||
const componentState = reactive({
|
||||
loading: false,
|
||||
data: null,
|
||||
error: null
|
||||
});
|
||||
```
|
||||
|
||||
#### État Global (Store)
|
||||
```typescript
|
||||
// Store global de l'application
|
||||
const appStore = {
|
||||
user: ref<User | null>(null),
|
||||
wallet: ref<Wallet | null>(null),
|
||||
processes: ref<Process[]>([]),
|
||||
notifications: ref<Notification[]>([])
|
||||
};
|
||||
```
|
||||
|
||||
#### Persistance
|
||||
```typescript
|
||||
// Sauvegarde locale
|
||||
localStorage.setItem('user-data', JSON.stringify(userData));
|
||||
|
||||
// Synchronisation avec le serveur
|
||||
await service.syncData(userData);
|
||||
```
|
||||
|
||||
## 🔒 Architecture de Sécurité
|
||||
|
||||
### Sécurité Frontend
|
||||
|
||||
#### Validation des Entrées
|
||||
```typescript
|
||||
// Validation côté client
|
||||
function validateUserInput(input: string): boolean {
|
||||
return input.length > 0 && input.length < 100;
|
||||
}
|
||||
|
||||
// Sanitisation HTML
|
||||
function sanitizeHTML(html: string): string {
|
||||
return DOMPurify.sanitize(html);
|
||||
}
|
||||
```
|
||||
|
||||
#### Protection XSS
|
||||
```typescript
|
||||
// Échappement des données
|
||||
function escapeHTML(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
```
|
||||
|
||||
### Sécurité WASM
|
||||
|
||||
#### Gestion de la Mémoire
|
||||
```rust
|
||||
// Rust - Gestion sûre de la mémoire
|
||||
pub fn process_data(data: Vec<u8>) -> Result<Vec<u8>, Error> {
|
||||
// Validation des données d'entrée
|
||||
if data.len() > MAX_SIZE {
|
||||
return Err(Error::DataTooLarge);
|
||||
}
|
||||
|
||||
// Traitement sécurisé
|
||||
let result = process_secure(data)?;
|
||||
Ok(result)
|
||||
}
|
||||
```
|
||||
|
||||
#### Protection des Clés
|
||||
```rust
|
||||
// Protection des clés privées
|
||||
pub struct SecureWallet {
|
||||
private_key: SecureString,
|
||||
public_key: String,
|
||||
}
|
||||
|
||||
impl SecureWallet {
|
||||
pub fn new() -> Self {
|
||||
let private_key = generate_secure_key();
|
||||
let public_key = derive_public_key(&private_key);
|
||||
|
||||
Self {
|
||||
private_key: SecureString::new(private_key),
|
||||
public_key,
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Architecture de Performance
|
||||
|
||||
### Métriques de Performance
|
||||
|
||||
#### Temps de Chargement
|
||||
- **Premier rendu** : < 2s
|
||||
- **Interactivité** : < 3s
|
||||
- **Chargement complet** : < 5s
|
||||
|
||||
#### Optimisations
|
||||
|
||||
##### Bundle Size
|
||||
```bash
|
||||
# Taille des bundles
|
||||
dist/
|
||||
├── index.js # ~300 KB (gzippé)
|
||||
├── sdk_client.wasm # ~3.3 MB (gzippé)
|
||||
└── vendor.js # ~200 KB (gzippé)
|
||||
```
|
||||
|
||||
##### Lazy Loading
|
||||
```typescript
|
||||
// Chargement à la demande
|
||||
const routes = [
|
||||
{
|
||||
path: '/signature',
|
||||
component: () => import('./pages/signature.vue')
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
##### Caching
|
||||
```typescript
|
||||
// Cache du module WASM
|
||||
const wasmCache = new Map();
|
||||
|
||||
async function getWASMModule() {
|
||||
if (wasmCache.has('sdk_client')) {
|
||||
return wasmCache.get('sdk_client');
|
||||
}
|
||||
|
||||
const module = await loadWASMModule();
|
||||
wasmCache.set('sdk_client', module);
|
||||
return module;
|
||||
}
|
||||
```
|
||||
|
||||
## 🔍 Monitoring et Observabilité
|
||||
|
||||
### Logs et Debugging
|
||||
|
||||
#### Logs Frontend
|
||||
```typescript
|
||||
// Logging structuré
|
||||
const logger = {
|
||||
info: (message: string, data?: any) => {
|
||||
console.log(`[INFO] ${message}`, data);
|
||||
},
|
||||
error: (message: string, error?: Error) => {
|
||||
console.error(`[ERROR] ${message}`, error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Logs WASM
|
||||
```rust
|
||||
// Logging Rust
|
||||
use log::{info, error};
|
||||
|
||||
pub fn process_wallet() -> Result<Wallet, Error> {
|
||||
info!("Starting wallet processing");
|
||||
|
||||
match process_secure() {
|
||||
Ok(wallet) => {
|
||||
info!("Wallet processed successfully");
|
||||
Ok(wallet)
|
||||
},
|
||||
Err(e) => {
|
||||
error!("Wallet processing failed: {}", e);
|
||||
Err(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Métriques
|
||||
|
||||
#### Métriques Frontend
|
||||
- **Temps de rendu** : Performance des composants
|
||||
- **Temps de réponse** : Réactivité de l'interface
|
||||
- **Utilisation mémoire** : Consommation RAM
|
||||
- **Erreurs JavaScript** : Stabilité de l'application
|
||||
|
||||
#### Métriques WASM
|
||||
- **Temps d'initialisation** : Chargement du module
|
||||
- **Temps d'exécution** : Performance des fonctions
|
||||
- **Utilisation mémoire** : Gestion de la mémoire
|
||||
- **Erreurs Rust** : Stabilité du module
|
||||
|
||||
## 🚀 Déploiement
|
||||
|
||||
### Environnements
|
||||
|
||||
#### Développement
|
||||
```bash
|
||||
# Serveur de développement
|
||||
npm run dev
|
||||
|
||||
# Variables d'environnement
|
||||
NODE_ENV=development
|
||||
VITE_API_URL=http://localhost:8091
|
||||
VITE_WS_URL=ws://localhost:8090
|
||||
```
|
||||
|
||||
#### Production
|
||||
```bash
|
||||
# Build de production
|
||||
npm run build
|
||||
|
||||
# Variables d'environnement
|
||||
NODE_ENV=production
|
||||
VITE_API_URL=https://api.4nkweb.com
|
||||
VITE_WS_URL=wss://ws.4nkweb.com
|
||||
```
|
||||
|
||||
### Intégration 4NK_node
|
||||
|
||||
#### Configuration Docker
|
||||
```yaml
|
||||
# docker-compose.yml
|
||||
ihm_client:
|
||||
build:
|
||||
context: ./ihm_client
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "8080:80"
|
||||
environment:
|
||||
- SDK_RELAY_WS_URL=ws://sdk_relay_1:8090
|
||||
- SDK_RELAY_HTTP_URL=http://sdk_relay_1:8091
|
||||
```
|
||||
|
||||
#### Variables d'Environnement
|
||||
```bash
|
||||
# Configuration pour 4NK_node
|
||||
SDK_RELAY_WS_URL=ws://sdk_relay_1:8090
|
||||
SDK_RELAY_HTTP_URL=http://sdk_relay_1:8091
|
||||
BITCOIN_RPC_URL=http://bitcoin:18443
|
||||
BLINDBIT_URL=http://blindbit:8000
|
||||
```
|
||||
|
||||
## 🔮 Évolutions Futures
|
||||
|
||||
### Améliorations Planifiées
|
||||
|
||||
#### Performance
|
||||
- **Web Workers** : Traitement en arrière-plan
|
||||
- **Service Workers** : Cache et offline
|
||||
- **WebAssembly SIMD** : Optimisations vectorielles
|
||||
|
||||
#### Fonctionnalités
|
||||
- **PWA** : Application web progressive
|
||||
- **Offline Mode** : Fonctionnement hors ligne
|
||||
- **Real-time Sync** : Synchronisation temps réel
|
||||
|
||||
#### Sécurité
|
||||
- **Hardware Security** : Intégration TPM/SE
|
||||
- **Multi-factor Auth** : Authentification à deux facteurs
|
||||
- **Audit Trail** : Traçabilité complète
|
||||
|
||||
---
|
||||
|
||||
**🏗️ Architecture ihm_client - Conçue pour la performance et la sécurité** 🚀
|
||||
235
docs/INDEX.md
Normal file
235
docs/INDEX.md
Normal file
@ -0,0 +1,235 @@
|
||||
# 📚 Index de Documentation - ihm_client
|
||||
|
||||
Index complet de la documentation de l'interface utilisateur ihm_client pour les Silent Payments.
|
||||
|
||||
## 📖 Guides Principaux
|
||||
|
||||
### 🚀 [Guide d'Installation](INSTALLATION.md)
|
||||
Guide complet pour installer et configurer l'interface utilisateur ihm_client.
|
||||
- **Prérequis système et logiciels**
|
||||
- **Installation de Node.js et dépendances**
|
||||
- **Configuration Rust et WASM**
|
||||
- **Configuration des dépendances distantes**
|
||||
- **Tests post-installation**
|
||||
- **Dépannage et monitoring**
|
||||
|
||||
### 📖 [Guide d'Utilisation](USAGE.md)
|
||||
Guide complet pour utiliser l'interface utilisateur ihm_client au quotidien.
|
||||
- **Démarrage du serveur de développement**
|
||||
- **Utilisation de l'interface utilisateur**
|
||||
- **Gestion des profils utilisateurs**
|
||||
- **Opérations de pairing et wallet**
|
||||
- **Gestion des processus et documents**
|
||||
- **Système de chat et notifications**
|
||||
- **Tests et validation**
|
||||
|
||||
### ⚙️ [Guide de Configuration](CONFIGURATION.md)
|
||||
Guide complet pour configurer l'interface selon vos besoins.
|
||||
- **Configuration générale et variables d'environnement**
|
||||
- **Configuration Vue.js et TypeScript**
|
||||
- **Configuration WASM et sdk_client**
|
||||
- **Configuration de l'intégration 4NK_node**
|
||||
- **Configuration Docker et production**
|
||||
- **Configuration SSL/TLS**
|
||||
- **Configuration de monitoring et sauvegarde**
|
||||
|
||||
## 🔧 Guides Techniques
|
||||
|
||||
### 🏗️ [Architecture Technique](ARCHITECTURE.md)
|
||||
Documentation technique détaillée de l'architecture.
|
||||
- **Architecture générale du frontend**
|
||||
- **Composants principaux (Vue.js, TypeScript, WASM)**
|
||||
- **Intégration avec sdk_client et sdk_common**
|
||||
- **Flux de données entre composants**
|
||||
- **Architecture des Silent Payments**
|
||||
- **Sécurité et isolation**
|
||||
- **Performance et optimisations**
|
||||
- **Monitoring et observabilité**
|
||||
|
||||
### 📡 [API Reference](API.md)
|
||||
Documentation complète des APIs disponibles.
|
||||
- **API sdk_client WASM** : Interface WebAssembly pour les Silent Payments
|
||||
- **API Vue.js Components** : Composants réutilisables
|
||||
- **API Services** : Services de communication et gestion
|
||||
- **API Types TypeScript** : Types et interfaces
|
||||
- **Format des données et payloads**
|
||||
- **Gestion des erreurs**
|
||||
- **Exemples d'utilisation**
|
||||
- **Limites et quotas**
|
||||
|
||||
### 🔒 [Sécurité](SECURITY.md)
|
||||
Guide de sécurité et bonnes pratiques.
|
||||
- **Authentification et autorisation**
|
||||
- **Protection XSS et CSRF**
|
||||
- **Sécurité WASM et mémoire**
|
||||
- **Chiffrement et certificats**
|
||||
- **Audit et monitoring de sécurité**
|
||||
- **Bonnes pratiques frontend**
|
||||
|
||||
### 🐙 [Configuration Gitea](GITEA_SETUP.md)
|
||||
Guide de configuration spécifique pour Gitea.
|
||||
- **Configuration du repository Gitea**
|
||||
- **Templates d'issues et pull requests**
|
||||
- **Configuration CI/CD avec Gitea Actions**
|
||||
- **Intégrations et webhooks**
|
||||
- **Workflow de contribution**
|
||||
- **Sécurité et permissions**
|
||||
|
||||
### 🚀 [Plan de Release](RELEASE_PLAN.md)
|
||||
Plan de lancement open source complet.
|
||||
- **Phases de préparation**
|
||||
- **Communication et marketing**
|
||||
- **Checklist de lancement**
|
||||
- **Support communautaire**
|
||||
- **Gestion des risques**
|
||||
|
||||
### 🌟 [Guide de la Communauté](COMMUNITY_GUIDE.md)
|
||||
Guide complet pour la communauté.
|
||||
- **Comment contribuer**
|
||||
- **Ressources d'apprentissage**
|
||||
- **Environnement de développement**
|
||||
- **Processus de contribution**
|
||||
- **Support et reconnaissance**
|
||||
|
||||
### 🗺️ [Roadmap](ROADMAP.md)
|
||||
Roadmap de développement détaillée.
|
||||
- **Timeline de développement**
|
||||
- **Fonctionnalités planifiées**
|
||||
- **Évolution de l'architecture**
|
||||
- **Métriques de succès**
|
||||
|
||||
## 🧪 Guides de Test
|
||||
|
||||
### 🧪 [Guide des Tests](TESTING.md)
|
||||
Guide complet pour les tests de l'interface utilisateur.
|
||||
- **Tests unitaires Vue.js**
|
||||
- **Tests d'intégration WASM**
|
||||
- **Tests end-to-end**
|
||||
- **Tests de performance**
|
||||
- **Tests de sécurité**
|
||||
- **Tests d'accessibilité**
|
||||
- **Tests de compatibilité navigateur**
|
||||
|
||||
### 🔍 [Audit de Sécurité](SECURITY_AUDIT.md)
|
||||
Audit de sécurité détaillé.
|
||||
- **Vulnérabilités connues**
|
||||
- **Tests de pénétration**
|
||||
- **Audit de code**
|
||||
- **Recommandations de sécurité**
|
||||
- **Plan de remédiation**
|
||||
|
||||
## 🔧 Guides de Développement
|
||||
|
||||
### 🔧 [Guide de Développement](DEVELOPMENT.md)
|
||||
Guide complet pour le développement.
|
||||
- **Environnement de développement**
|
||||
- **Workflow de développement**
|
||||
- **Standards de code**
|
||||
- **Debugging et profiling**
|
||||
- **Optimisation des performances**
|
||||
- **Déploiement et CI/CD**
|
||||
|
||||
### 📋 [Référence Rapide](QUICK_REFERENCE.md)
|
||||
Référence rapide pour les développeurs.
|
||||
- **Commandes essentielles**
|
||||
- **Structure du projet**
|
||||
- **APIs principales**
|
||||
- **Configuration rapide**
|
||||
- **Dépannage rapide**
|
||||
|
||||
### 🔄 [Guide de Migration](MIGRATION.md)
|
||||
Guide pour les migrations et mises à jour.
|
||||
- **Migration des versions**
|
||||
- **Breaking changes**
|
||||
- **Mise à jour des dépendances**
|
||||
- **Migration des données**
|
||||
- **Tests de migration**
|
||||
|
||||
## 🌐 Guides d'Intégration
|
||||
|
||||
### 🔗 [Intégration 4NK_node](INTEGRATION_4NK_NODE.md)
|
||||
Guide d'intégration avec l'infrastructure 4NK_node.
|
||||
- **Configuration Docker**
|
||||
- **Variables d'environnement**
|
||||
- **Communication inter-services**
|
||||
- **Déploiement intégré**
|
||||
- **Monitoring et logs**
|
||||
|
||||
### 🔑 [Configuration SSH](SSH_SETUP.md)
|
||||
Guide de configuration SSH pour le développement.
|
||||
- **Génération des clés SSH**
|
||||
- **Configuration Git**
|
||||
- **Intégration avec Gitea**
|
||||
- **Automatisation des déploiements**
|
||||
|
||||
### 🤖 [Push SSH Automatisé](AUTO_SSH_PUSH.md)
|
||||
Guide pour l'automatisation des pushes SSH.
|
||||
- **Configuration des scripts**
|
||||
- **Intégration CI/CD**
|
||||
- **Gestion des clés**
|
||||
- **Sécurité et bonnes pratiques**
|
||||
|
||||
## 📊 État et Monitoring
|
||||
|
||||
### 📊 [État Actuel](ETAT_ACTUEL.md)
|
||||
État détaillé du projet ihm_client.
|
||||
- **Statut des compilations**
|
||||
- **Configuration des branches**
|
||||
- **Fonctionnalités opérationnelles**
|
||||
- **Métriques de performance**
|
||||
- **Problèmes connus**
|
||||
|
||||
### 📋 [Résumé Final](RESUME_FINAL.md)
|
||||
Résumé complet de l'état final du projet.
|
||||
- **Succès accomplis**
|
||||
- **Prêt pour la production**
|
||||
- **Documentation complète**
|
||||
- **Support et maintenance**
|
||||
|
||||
## 🔧 Guides d'Open Source
|
||||
|
||||
### ✅ [Checklist Open Source](OPEN_SOURCE_CHECKLIST.md)
|
||||
Checklist complète pour l'ouverture en open source.
|
||||
- **Préparation du code**
|
||||
- **Documentation**
|
||||
- **Licences et légal**
|
||||
- **Infrastructure**
|
||||
- **Communication**
|
||||
|
||||
## 📞 Support et Contact
|
||||
|
||||
### 📞 [Support](SUPPORT.md)
|
||||
Guide de support et contact.
|
||||
- **Comment obtenir de l'aide**
|
||||
- **Création d'issues**
|
||||
- **Canal de communication**
|
||||
- **FAQ**
|
||||
- **Ressources additionnelles**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Navigation Rapide
|
||||
|
||||
### 🚀 Démarrage Rapide
|
||||
1. [Installation](INSTALLATION.md) - Installer ihm_client
|
||||
2. [Configuration](CONFIGURATION.md) - Configurer l'environnement
|
||||
3. [Utilisation](USAGE.md) - Utiliser l'interface
|
||||
|
||||
### 🔧 Développement
|
||||
1. [Architecture](ARCHITECTURE.md) - Comprendre l'architecture
|
||||
2. [API](API.md) - Consulter les APIs
|
||||
3. [Tests](TESTING.md) - Exécuter les tests
|
||||
|
||||
### 📚 Documentation
|
||||
1. [Index](INDEX.md) - Cet index
|
||||
2. [Quick Reference](QUICK_REFERENCE.md) - Référence rapide
|
||||
3. [Roadmap](ROADMAP.md) - Évolution du projet
|
||||
|
||||
### 🤝 Communauté
|
||||
1. [Guide Communauté](COMMUNITY_GUIDE.md) - Contribuer
|
||||
2. [Code de Conduite](../CODE_OF_CONDUCT.md) - Règles de conduite
|
||||
3. [Support](SUPPORT.md) - Obtenir de l'aide
|
||||
|
||||
---
|
||||
|
||||
**📚 Documentation complète pour ihm_client - Interface utilisateur moderne pour les Silent Payments** 🚀
|
||||
374
docs/INSTALLATION.md
Normal file
374
docs/INSTALLATION.md
Normal file
@ -0,0 +1,374 @@
|
||||
# 📦 Guide d'Installation - ihm_client
|
||||
|
||||
Guide complet pour installer et configurer l'interface utilisateur ihm_client pour les Silent Payments.
|
||||
|
||||
## 📋 Prérequis
|
||||
|
||||
### Système
|
||||
|
||||
- **OS** : Linux (Ubuntu 20.04+, Debian 11+, CentOS 8+), macOS 10.15+, Windows 10+
|
||||
- **Architecture** : x86_64, ARM64 (Apple Silicon)
|
||||
- **RAM** : 4 Go minimum, 8 Go recommandés
|
||||
- **Stockage** : 5 Go minimum, 10 Go recommandés
|
||||
- **Réseau** : Connexion Internet stable
|
||||
|
||||
### Logiciels
|
||||
|
||||
- **Node.js** : Version 18.0+ (LTS recommandé)
|
||||
- **npm** : Version 8.0+
|
||||
- **Git** : Version 2.25+
|
||||
- **Rust** : Version 1.70+ (pour la compilation WASM)
|
||||
- **Docker** : Version 20.10+ (optionnel, pour l'intégration 4NK_node)
|
||||
|
||||
## 🚀 Installation
|
||||
|
||||
### 1. Installation de Node.js
|
||||
|
||||
#### Ubuntu/Debian
|
||||
|
||||
```bash
|
||||
# Mettre à jour les paquets
|
||||
sudo apt update
|
||||
|
||||
# Installer Node.js via NodeSource
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
|
||||
# Vérifier l'installation
|
||||
node --version
|
||||
npm --version
|
||||
```
|
||||
|
||||
#### CentOS/RHEL
|
||||
|
||||
```bash
|
||||
# Installer Node.js via NodeSource
|
||||
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
|
||||
sudo yum install -y nodejs
|
||||
|
||||
# Vérifier l'installation
|
||||
node --version
|
||||
npm --version
|
||||
```
|
||||
|
||||
#### macOS
|
||||
|
||||
```bash
|
||||
# Installer via Homebrew
|
||||
brew install node@18
|
||||
|
||||
# Ou télécharger depuis nodejs.org
|
||||
# https://nodejs.org/en/download/
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
```bash
|
||||
# Télécharger et installer depuis
|
||||
# https://nodejs.org/en/download/
|
||||
```
|
||||
|
||||
### 2. Installation de Rust
|
||||
|
||||
#### Linux/macOS
|
||||
|
||||
```bash
|
||||
# Installer Rust via rustup
|
||||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
|
||||
|
||||
# Recharger l'environnement
|
||||
source ~/.cargo/env
|
||||
|
||||
# Vérifier l'installation
|
||||
rustc --version
|
||||
cargo --version
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
```bash
|
||||
# Télécharger et installer rustup depuis
|
||||
# https://rustup.rs/
|
||||
```
|
||||
|
||||
### 3. Installation de wasm-pack
|
||||
|
||||
```bash
|
||||
# Installer wasm-pack
|
||||
cargo install wasm-pack
|
||||
|
||||
# Vérifier l'installation
|
||||
wasm-pack --version
|
||||
```
|
||||
|
||||
### 4. Configuration SSH (Recommandé)
|
||||
|
||||
```bash
|
||||
# Générer une clé SSH
|
||||
ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519_ihm -C "ihm-client-automation"
|
||||
|
||||
# Ajouter à l'agent SSH
|
||||
ssh-add ~/.ssh/id_ed25519_ihm
|
||||
|
||||
# Configurer Git pour utiliser la clé
|
||||
git config --global core.sshCommand "ssh -i ~/.ssh/id_ed25519_ihm"
|
||||
|
||||
# Afficher la clé publique pour Gitea
|
||||
cat ~/.ssh/id_ed25519_ihm.pub
|
||||
```
|
||||
|
||||
**Ajouter la clé publique à Gitea :**
|
||||
1. Aller sur Gitea > Settings > SSH Keys
|
||||
2. Coller la clé publique
|
||||
3. Cliquer sur "Add key"
|
||||
|
||||
### 5. Clonage du Repository
|
||||
|
||||
```bash
|
||||
# Cloner avec SSH (recommandé)
|
||||
git clone git@git.4nkweb.com:4nk/ihm_client.git
|
||||
cd ihm_client
|
||||
|
||||
# Ou cloner avec HTTPS
|
||||
git clone https://git.4nkweb.com/4nk/ihm_client.git
|
||||
cd ihm_client
|
||||
```
|
||||
|
||||
### 6. Installation des Dépendances
|
||||
|
||||
```bash
|
||||
# Installer les dépendances Node.js
|
||||
npm install
|
||||
|
||||
# Vérifier l'installation
|
||||
npm list --depth=0
|
||||
```
|
||||
|
||||
### 7. Configuration des Dépendances WASM
|
||||
|
||||
```bash
|
||||
# Configurer les dépendances distantes (sdk_client, sdk_common)
|
||||
./scripts/setup-remote-deps.sh
|
||||
|
||||
# Vérifier la compilation WASM
|
||||
ls -la pkg/
|
||||
```
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Variables d'Environnement
|
||||
|
||||
Créer un fichier `.env` à la racine du projet :
|
||||
|
||||
```bash
|
||||
# Configuration de développement
|
||||
NODE_ENV=development
|
||||
VITE_DEV_SERVER_PORT=3000
|
||||
VITE_API_URL=http://localhost:8091
|
||||
VITE_WS_URL=ws://localhost:8090
|
||||
|
||||
# Configuration WASM
|
||||
VITE_WASM_PATH=./pkg/sdk_client_bg.wasm
|
||||
|
||||
# Configuration pour l'intégration 4NK_node
|
||||
SDK_RELAY_WS_URL=ws://sdk_relay_1:8090
|
||||
SDK_RELAY_HTTP_URL=http://sdk_relay_1:8091
|
||||
BITCOIN_RPC_URL=http://bitcoin:18443
|
||||
BLINDBIT_URL=http://blindbit:8000
|
||||
```
|
||||
|
||||
### Configuration TypeScript
|
||||
|
||||
Le fichier `tsconfig.json` est déjà configuré pour :
|
||||
- Vue.js 3
|
||||
- TypeScript strict
|
||||
- Support WASM
|
||||
- Path mapping
|
||||
|
||||
### Configuration Vite
|
||||
|
||||
Le fichier `vite.config.ts` est configuré pour :
|
||||
- Support WASM
|
||||
- Hot module replacement
|
||||
- Build optimisé
|
||||
- Support des types TypeScript
|
||||
|
||||
## 🧪 Tests Post-Installation
|
||||
|
||||
### 1. Test de Compilation
|
||||
|
||||
```bash
|
||||
# Test de compilation TypeScript
|
||||
npm run build
|
||||
|
||||
# Vérifier le build
|
||||
ls -la dist/
|
||||
```
|
||||
|
||||
### 2. Test de Développement
|
||||
|
||||
```bash
|
||||
# Démarrer le serveur de développement
|
||||
npm run dev
|
||||
|
||||
# Ouvrir http://localhost:3000 dans le navigateur
|
||||
```
|
||||
|
||||
### 3. Test WASM
|
||||
|
||||
```bash
|
||||
# Vérifier que le module WASM fonctionne
|
||||
npm run test:wasm
|
||||
```
|
||||
|
||||
### 4. Test Complet
|
||||
|
||||
```bash
|
||||
# Exécuter tous les tests
|
||||
npm run test
|
||||
|
||||
# Vérifier la couverture
|
||||
npm run test:coverage
|
||||
```
|
||||
|
||||
## 🚨 Dépannage
|
||||
|
||||
### Problèmes Courants
|
||||
|
||||
#### Node.js non trouvé
|
||||
```bash
|
||||
# Vérifier l'installation
|
||||
which node
|
||||
node --version
|
||||
|
||||
# Réinstaller si nécessaire
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
```
|
||||
|
||||
#### Rust non trouvé
|
||||
```bash
|
||||
# Vérifier l'installation
|
||||
which rustc
|
||||
rustc --version
|
||||
|
||||
# Réinstaller si nécessaire
|
||||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
|
||||
source ~/.cargo/env
|
||||
```
|
||||
|
||||
#### Erreurs de compilation WASM
|
||||
```bash
|
||||
# Nettoyer et recompiler
|
||||
rm -rf pkg/
|
||||
./scripts/setup-remote-deps.sh
|
||||
|
||||
# Vérifier les dépendances Rust
|
||||
cd temp-deps/sdk_client
|
||||
cargo check
|
||||
```
|
||||
|
||||
#### Erreurs de dépendances npm
|
||||
```bash
|
||||
# Nettoyer et réinstaller
|
||||
rm -rf node_modules/ package-lock.json
|
||||
npm install
|
||||
|
||||
# Vérifier les vulnérabilités
|
||||
npm audit
|
||||
npm audit fix
|
||||
```
|
||||
|
||||
#### Problèmes de permissions
|
||||
```bash
|
||||
# Corriger les permissions
|
||||
sudo chown -R $USER:$USER .
|
||||
chmod +x scripts/*.sh
|
||||
```
|
||||
|
||||
### Logs Détaillés
|
||||
|
||||
```bash
|
||||
# Logs de compilation TypeScript
|
||||
npm run build --verbose
|
||||
|
||||
# Logs de compilation WASM
|
||||
cd temp-deps/sdk_client
|
||||
wasm-pack build --target web --out-dir ../../pkg --verbose
|
||||
|
||||
# Logs du serveur de développement
|
||||
npm run dev --verbose
|
||||
```
|
||||
|
||||
## 🔒 Sécurité
|
||||
|
||||
### Vérifications de Sécurité
|
||||
|
||||
```bash
|
||||
# Audit des dépendances npm
|
||||
npm audit
|
||||
|
||||
# Audit des dépendances Rust
|
||||
cargo audit
|
||||
|
||||
# Vérification des vulnérabilités WASM
|
||||
wasm-pack build --target web --out-dir ../../pkg
|
||||
```
|
||||
|
||||
### Bonnes Pratiques
|
||||
|
||||
- Utiliser HTTPS en production
|
||||
- Valider toutes les entrées utilisateur
|
||||
- Maintenir les dépendances à jour
|
||||
- Utiliser des variables d'environnement pour les secrets
|
||||
- Tester régulièrement la sécurité
|
||||
|
||||
## 📊 Monitoring
|
||||
|
||||
### Métriques d'Installation
|
||||
|
||||
```bash
|
||||
# Taille du projet
|
||||
du -sh .
|
||||
|
||||
# Nombre de fichiers
|
||||
find . -type f | wc -l
|
||||
|
||||
# Dépendances installées
|
||||
npm list --depth=0 | wc -l
|
||||
|
||||
# Taille du module WASM
|
||||
ls -lh pkg/sdk_client_bg.wasm
|
||||
```
|
||||
|
||||
### Vérification de l'Installation
|
||||
|
||||
```bash
|
||||
# Script de vérification
|
||||
./scripts/verify-installation.sh
|
||||
|
||||
# Tests automatisés
|
||||
npm run test:installation
|
||||
```
|
||||
|
||||
## 🎯 Prochaines Étapes
|
||||
|
||||
Après l'installation réussie :
|
||||
|
||||
1. **Lire le [Guide d'Utilisation](USAGE.md)** - Utiliser l'interface
|
||||
2. **Consulter l'[Architecture](ARCHITECTURE.md)** - Comprendre le système
|
||||
3. **Explorer les [APIs](API.md)** - Utiliser les fonctionnalités
|
||||
4. **Configurer l'[Intégration 4NK_node](INTEGRATION_4NK_NODE.md)** - Déployer en production
|
||||
|
||||
## 📞 Support
|
||||
|
||||
En cas de problème :
|
||||
|
||||
1. Consulter la [documentation](INDEX.md)
|
||||
2. Vérifier les [issues existantes](https://git.4nkweb.com/4nk/ihm_client/issues)
|
||||
3. Créer une nouvelle issue avec les détails du problème
|
||||
4. Inclure les logs et la configuration utilisée
|
||||
|
||||
---
|
||||
|
||||
**🚀 Installation terminée ! ihm_client est prêt à être utilisé.** ✨
|
||||
427
docs/USAGE.md
Normal file
427
docs/USAGE.md
Normal file
@ -0,0 +1,427 @@
|
||||
# 📖 Guide d'Utilisation - ihm_client
|
||||
|
||||
Guide complet pour utiliser l'interface utilisateur ihm_client au quotidien.
|
||||
|
||||
## 🚀 Démarrage Rapide
|
||||
|
||||
### Démarrage du Serveur de Développement
|
||||
|
||||
```bash
|
||||
# Démarrer le serveur de développement
|
||||
npm run dev
|
||||
|
||||
# Le serveur démarre sur http://localhost:3000
|
||||
# Hot reload activé pour le développement
|
||||
```
|
||||
|
||||
### Accès à l'Interface
|
||||
|
||||
1. **Ouvrir le navigateur** : http://localhost:3000
|
||||
2. **Page d'accueil** : Vue d'ensemble et navigation
|
||||
3. **Connexion** : Via adresse device ou QR code
|
||||
|
||||
## 🏠 Page d'Accueil
|
||||
|
||||
### Navigation Principale
|
||||
|
||||
- **🏠 Accueil** - Vue d'ensemble et statistiques
|
||||
- **👤 Compte** - Gestion du profil utilisateur
|
||||
- **📄 Processus** - Création et gestion des processus
|
||||
- **✍️ Signature** - Signatures de documents
|
||||
- **💬 Chat** - Communication entre membres
|
||||
- **🔗 Pairing** - Connexion avec d'autres utilisateurs
|
||||
|
||||
### Tableau de Bord
|
||||
|
||||
- **Statistiques personnelles** : Processus actifs, documents signés
|
||||
- **Notifications récentes** : Alertes et mises à jour
|
||||
- **Actions rapides** : Créer un processus, scanner QR code
|
||||
- **État du wallet** : Solde et transactions récentes
|
||||
|
||||
## 👤 Gestion du Compte
|
||||
|
||||
### Profil Utilisateur
|
||||
|
||||
#### Accès au Profil
|
||||
1. Cliquer sur la bulle de profil en haut à gauche
|
||||
2. Popup de profil s'ouvre avec les informations personnelles
|
||||
|
||||
#### Informations Modifiables
|
||||
- **Nom et prénom** : Éditer directement dans les champs
|
||||
- **Photo de profil** : Cliquer pour changer l'image
|
||||
- **Email** : Adresse de contact (lecture seule)
|
||||
- **Adresse device** : Identifiant unique (lecture seule)
|
||||
|
||||
#### Actions du Profil
|
||||
|
||||
##### Export User Data
|
||||
```bash
|
||||
# Génère un fichier JSON avec toutes les données utilisateur
|
||||
# Inclut : profil, processus, documents, wallet
|
||||
```
|
||||
|
||||
##### Export Recovery
|
||||
```bash
|
||||
# Génère les 4 mots de récupération
|
||||
# IMPORTANT : Noter et conserver en lieu sûr
|
||||
# Le bouton devient inaccessible après utilisation
|
||||
```
|
||||
|
||||
##### Delete Account
|
||||
```bash
|
||||
# Supprime définitivement le compte
|
||||
# Demande de confirmation obligatoire
|
||||
# Action irréversible
|
||||
```
|
||||
|
||||
##### Logout
|
||||
```bash
|
||||
# Déconnexion de l'interface
|
||||
# Retour à la page de connexion
|
||||
```
|
||||
|
||||
### Onglet Pairing
|
||||
|
||||
#### Ajouter un Device
|
||||
1. Cliquer sur "Add Device"
|
||||
2. Choisir la méthode :
|
||||
- **Scanner QR Code** : Scanner le code d'un autre device
|
||||
- **Saisir manuellement** : Entrer l'adresse device
|
||||
|
||||
#### Gérer les Devices
|
||||
- **Renommer** : Cliquer sur le nom pour l'éditer
|
||||
- **Supprimer** : Cliquer sur l'icône poubelle
|
||||
- **Statut** : En ligne/hors ligne
|
||||
|
||||
#### Scanner QR Code
|
||||
1. Cliquer sur "Scan QR Code"
|
||||
2. Autoriser l'accès à la caméra
|
||||
3. Pointer vers le QR code
|
||||
4. Confirmation automatique
|
||||
|
||||
### Onglet Wallet
|
||||
|
||||
#### Gestion des Wallets
|
||||
- **Voir le solde** : Affichage en temps réel
|
||||
- **Ajouter une ligne** : Nouveau wallet Silent Payment
|
||||
- **Historique** : Transactions récentes
|
||||
- **Détails** : Cliquer pour plus d'informations
|
||||
|
||||
#### Opérations Wallet
|
||||
```bash
|
||||
# Générer un nouveau wallet
|
||||
generate_sp_wallet()
|
||||
|
||||
# Verrouiller des UTXOs
|
||||
lock_freezed_utxos(wallet, utxos)
|
||||
|
||||
# Scanner des blocs
|
||||
scan_blocks(wallet, blocks)
|
||||
```
|
||||
|
||||
### Onglet Process
|
||||
|
||||
#### Processus Disponibles
|
||||
- **Liste des processus** : Tous les processus accessibles
|
||||
- **Notifications** : Cliquer sur la sonnette pour voir les alertes
|
||||
- **Statut** : Actif, en attente, terminé
|
||||
- **Actions** : Voir, modifier, supprimer
|
||||
|
||||
#### Créer un Processus
|
||||
1. Cliquer sur "Nouveau Processus"
|
||||
2. Remplir les informations :
|
||||
- **Nom** : Nom du processus
|
||||
- **Description** : Détails du processus
|
||||
- **Membres** : Ajouter des participants
|
||||
- **Rôles** : Définir les responsabilités
|
||||
3. Valider la création
|
||||
|
||||
### Onglet Data
|
||||
|
||||
#### Données Importées
|
||||
- **Liste des données** : Fichiers JSON importés
|
||||
- **Contrats associés** : Cliquer pour voir le contrat
|
||||
- **Statut** : Validé, en cours, rejeté
|
||||
- **Actions** : Voir, modifier, supprimer
|
||||
|
||||
## 📄 Gestion des Processus
|
||||
|
||||
### Vue d'Ensemble
|
||||
|
||||
#### Onglets du Processus
|
||||
- **📋 Informations** : Détails du processus
|
||||
- **👥 Membres** : Participants et rôles
|
||||
- **📁 Documents** : Fichiers associés
|
||||
- **✍️ Signatures** : Demandes de signature
|
||||
- **💬 Chat** : Communication interne
|
||||
|
||||
### Gestion des Membres
|
||||
|
||||
#### Ajouter un Membre
|
||||
1. Cliquer sur "Ajouter Membre"
|
||||
2. Choisir la méthode :
|
||||
- **Scanner QR Code** : Invitation directe
|
||||
- **Envoyer un lien** : Lien d'invitation
|
||||
- **Saisir l'adresse** : Adresse device manuelle
|
||||
|
||||
#### Assigner des Rôles
|
||||
1. Sélectionner un membre
|
||||
2. Cliquer sur "Assigner Rôle"
|
||||
3. Choisir le rôle :
|
||||
- **Admin** : Gestion complète
|
||||
- **Signataire** : Peut signer des documents
|
||||
- **Lecteur** : Lecture seule
|
||||
- **Custom** : Rôle personnalisé
|
||||
|
||||
### Gestion des Documents
|
||||
|
||||
#### Importer un Document
|
||||
1. Cliquer sur "Importer Document"
|
||||
2. Choisir le fichier (PDF, DOC, etc.)
|
||||
3. Remplir les métadonnées :
|
||||
- **Nom** : Nom du document
|
||||
- **Description** : Détails du document
|
||||
- **Rôles requis** : Qui doit signer
|
||||
4. Valider l'import
|
||||
|
||||
#### Organiser les Documents
|
||||
- **Dossiers** : Créer des dossiers pour organiser
|
||||
- **Tags** : Ajouter des étiquettes
|
||||
- **Recherche** : Filtrer par nom, type, statut
|
||||
- **Tri** : Par date, nom, taille
|
||||
|
||||
## ✍️ Système de Signatures
|
||||
|
||||
### Demandes de Signature
|
||||
|
||||
#### Créer une Demande
|
||||
1. Aller dans l'onglet "Signatures"
|
||||
2. Cliquer sur "Nouvelle Demande"
|
||||
3. Remplir les informations :
|
||||
- **Document** : Sélectionner le document
|
||||
- **Signataires** : Choisir les participants
|
||||
- **Description** : Détails de la demande
|
||||
- **Date limite** : Échéance de signature
|
||||
- **Visibilité** : Publique ou privée
|
||||
4. Valider la création
|
||||
|
||||
#### Gérer les Demandes
|
||||
- **En attente** : Demandes non signées
|
||||
- **Signées** : Demandes complétées
|
||||
- **Expirées** : Demandes dépassées
|
||||
- **Actions** : Voir, modifier, annuler
|
||||
|
||||
### Signer un Document
|
||||
|
||||
#### Processus de Signature
|
||||
1. Recevoir une notification de demande
|
||||
2. Cliquer sur "Voir la demande"
|
||||
3. Prévisualiser le document
|
||||
4. Cliquer sur "Signer"
|
||||
5. Confirmer la signature
|
||||
|
||||
#### Types de Signature
|
||||
- **Signature électronique** : Signature numérique
|
||||
- **Signature biométrique** : Empreinte digitale
|
||||
- **Signature par mot de passe** : Code secret
|
||||
|
||||
## 💬 Système de Chat
|
||||
|
||||
### Communication Interne
|
||||
|
||||
#### Accès au Chat
|
||||
1. Aller dans l'onglet "Chat"
|
||||
2. Sélectionner le processus
|
||||
3. Voir les conversations
|
||||
|
||||
#### Envoyer un Message
|
||||
1. Sélectionner un utilisateur ou groupe
|
||||
2. Taper le message
|
||||
3. Cliquer sur "Envoyer"
|
||||
|
||||
#### Types de Messages
|
||||
- **Texte** : Messages simples
|
||||
- **Documents** : Fichiers partagés
|
||||
- **Images** : Captures d'écran
|
||||
- **Liens** : URLs partagées
|
||||
|
||||
### Notifications
|
||||
|
||||
#### Types de Notifications
|
||||
- **Messages** : Nouveaux messages reçus
|
||||
- **Signatures** : Demandes de signature
|
||||
- **Processus** : Mises à jour de processus
|
||||
- **Système** : Alertes système
|
||||
|
||||
#### Gestion des Notifications
|
||||
- **Marquer comme lu** : Cliquer sur la notification
|
||||
- **Répondre** : Répondre directement
|
||||
- **Ignorer** : Masquer la notification
|
||||
- **Paramètres** : Configurer les alertes
|
||||
|
||||
## 🔗 Système de Pairing
|
||||
|
||||
### Connexion avec d'Autres Utilisateurs
|
||||
|
||||
#### Méthodes de Pairing
|
||||
1. **QR Code** : Scanner le code d'un autre device
|
||||
2. **Lien d'invitation** : Envoyer un lien
|
||||
3. **Adresse manuelle** : Saisir l'adresse device
|
||||
|
||||
#### Processus de Pairing
|
||||
1. **Initiative** : Un utilisateur initie la connexion
|
||||
2. **Confirmation** : L'autre utilisateur confirme
|
||||
3. **Établissement** : La connexion est établie
|
||||
4. **Vérification** : Test de communication
|
||||
|
||||
#### Gestion des Connexions
|
||||
- **Connexions actives** : Devices connectés
|
||||
- **Demandes en attente** : Invitations non acceptées
|
||||
- **Historique** : Connexions passées
|
||||
- **Actions** : Déconnecter, renommer, supprimer
|
||||
|
||||
## 🔔 Notifications et Alertes
|
||||
|
||||
### Centre de Notifications
|
||||
|
||||
#### Accès aux Notifications
|
||||
- **Icône cloche** : En haut à droite
|
||||
- **Compteur** : Nombre de notifications non lues
|
||||
- **Liste** : Toutes les notifications
|
||||
|
||||
#### Types d'Alertes
|
||||
- **Urgentes** : Rouge, action immédiate requise
|
||||
- **Importantes** : Orange, attention requise
|
||||
- **Informatives** : Bleu, information générale
|
||||
- **Succès** : Vert, confirmation d'action
|
||||
|
||||
### Configuration des Notifications
|
||||
|
||||
#### Paramètres
|
||||
1. Aller dans "Paramètres" > "Notifications"
|
||||
2. Configurer par type :
|
||||
- **Messages** : Notifications de chat
|
||||
- **Signatures** : Demandes de signature
|
||||
- **Processus** : Mises à jour
|
||||
- **Système** : Alertes système
|
||||
|
||||
#### Préférences
|
||||
- **Son** : Activer/désactiver les sons
|
||||
- **Pop-up** : Notifications en pop-up
|
||||
- **Email** : Notifications par email
|
||||
- **Push** : Notifications push (si supporté)
|
||||
|
||||
## 🛠️ Fonctionnalités Avancées
|
||||
|
||||
### Recherche Globale
|
||||
|
||||
#### Utilisation
|
||||
1. Cliquer sur l'icône de recherche
|
||||
2. Taper le terme recherché
|
||||
3. Voir les résultats :
|
||||
- **Processus** : Processus correspondants
|
||||
- **Documents** : Documents correspondants
|
||||
- **Messages** : Messages correspondants
|
||||
- **Utilisateurs** : Utilisateurs correspondants
|
||||
|
||||
### Filtres et Tri
|
||||
|
||||
#### Filtres Disponibles
|
||||
- **Date** : Filtrer par période
|
||||
- **Type** : Filtrer par type de contenu
|
||||
- **Statut** : Filtrer par statut
|
||||
- **Utilisateur** : Filtrer par utilisateur
|
||||
|
||||
#### Options de Tri
|
||||
- **Date** : Plus récent/ancien
|
||||
- **Nom** : Alphabétique
|
||||
- **Taille** : Plus grand/petit
|
||||
- **Statut** : Priorité des statuts
|
||||
|
||||
### Export et Sauvegarde
|
||||
|
||||
#### Exporter des Données
|
||||
```bash
|
||||
# Export complet du profil
|
||||
Export User Data > JSON
|
||||
|
||||
# Export des processus
|
||||
Processus > Exporter > CSV
|
||||
|
||||
# Export des documents
|
||||
Documents > Exporter > ZIP
|
||||
```
|
||||
|
||||
#### Sauvegarde Automatique
|
||||
- **Sauvegarde locale** : Données stockées localement
|
||||
- **Synchronisation** : Synchronisation avec le serveur
|
||||
- **Récupération** : Restauration des données
|
||||
|
||||
## 🚨 Dépannage
|
||||
|
||||
### Problèmes Courants
|
||||
|
||||
#### Interface ne se charge pas
|
||||
```bash
|
||||
# Vérifier le serveur
|
||||
npm run dev
|
||||
|
||||
# Vérifier les logs
|
||||
npm run dev --verbose
|
||||
|
||||
# Nettoyer le cache
|
||||
npm run clean
|
||||
```
|
||||
|
||||
#### Module WASM non trouvé
|
||||
```bash
|
||||
# Recompiler le module WASM
|
||||
./scripts/setup-remote-deps.sh
|
||||
|
||||
# Vérifier le fichier
|
||||
ls -la pkg/sdk_client_bg.wasm
|
||||
```
|
||||
|
||||
#### Erreurs de connexion
|
||||
```bash
|
||||
# Vérifier les variables d'environnement
|
||||
cat .env
|
||||
|
||||
# Tester la connectivité
|
||||
npm run test:connectivity
|
||||
```
|
||||
|
||||
### Support Utilisateur
|
||||
|
||||
#### Obtenir de l'Aide
|
||||
1. **Documentation** : Consulter ce guide
|
||||
2. **FAQ** : Questions fréquentes
|
||||
3. **Support** : Contacter l'équipe
|
||||
4. **Issues** : Signaler un problème
|
||||
|
||||
#### Signaler un Bug
|
||||
1. Aller sur [Issues](https://git.4nkweb.com/4nk/ihm_client/issues)
|
||||
2. Créer une nouvelle issue
|
||||
3. Décrire le problème :
|
||||
- **Étapes** : Comment reproduire
|
||||
- **Comportement** : Ce qui se passe
|
||||
- **Attendu** : Ce qui devrait se passer
|
||||
- **Environnement** : OS, navigateur, version
|
||||
|
||||
## 📊 Métriques d'Utilisation
|
||||
|
||||
### Statistiques Personnelles
|
||||
- **Processus créés** : Nombre de processus
|
||||
- **Documents signés** : Nombre de signatures
|
||||
- **Messages envoyés** : Communication
|
||||
- **Temps d'utilisation** : Temps passé
|
||||
|
||||
### Performance
|
||||
- **Temps de chargement** : Vitesse de l'interface
|
||||
- **Temps de réponse** : Réactivité
|
||||
- **Utilisation mémoire** : Consommation RAM
|
||||
- **Taille des données** : Stockage utilisé
|
||||
|
||||
---
|
||||
|
||||
**🎯 Interface utilisateur ihm_client - Prête pour une utilisation quotidienne !** ✨
|
||||
Loading…
x
Reference in New Issue
Block a user