Module 5 : Architecture SmartMaker
Ce module présente l'architecture globale de SmartMaker : comment les différentes couches s'articulent, de l'interface React jusqu'au backend Dolibarr.
Prérequis
- Modules 1 à 4 complétés
- Comprendre les concepts React (composants, hooks, Redux)
- Connaissance de base de Dolibarr
Vue d'ensemble
SmartMaker est un framework pour construire des Progressive Web Apps (PWA) connectées à Dolibarr. Il combine :
- Frontend React : Interface utilisateur moderne
- SmartCommon : Bibliothèque de composants et hooks
- SmartAuth : Authentification JWT
- Backend PHP : API REST intégrée à Dolibarr
Stack technique
| Couche | Technologie | Usage |
|---|---|---|
| Framework | React 19 | Composants UI |
| Build | Vite 6 | Bundling et dev server |
| CSS | TailwindCSS 4 | Styles utilitaires |
| State | Redux Toolkit 2 | État global |
| HTTP | ky | Requêtes API avec JWT |
| Validation | Zod 4 | Schémas de validation |
| Router | React Router 7 | Navigation |
| i18n | i18next | Traductions |
| DB locale | Dexie | IndexedDB wrapper |
| Animation | Framer Motion | Transitions de pages |
Chapitres
| # | Chapitre | Contenu |
|---|---|---|
| 1 | Structure du projet | Organisation des dossiers et fichiers |
| 2 | Configuration | Provider et appConfig.js |
| 3 | Flux de données | Du clic utilisateur au rendu |
Objectifs du module
À la fin de ce module, vous comprendrez :
- Comment est organisé un projet SmartMaker
- Le rôle de chaque dossier et fichier
- Comment configurer l'application via appConfig.js
- Le flux de données complet (UI → API → Dolibarr → UI)
Schéma global
┌─────────────────────────────────────────────────────────────┐
│ NAVIGATEUR │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ React App │ │
│ │ ┌───────────┐ ┌────────────┐ ┌───────────────┐ │ │
│ │ │ Components│ │ SmartCommon│ │ Redux Store │ │ │
│ │ │ (Pages) │←→│ (Hooks) │←→│ (Global State)│ │ │
│ │ └───────────┘ └──────┬─────┘ └───────────────┘ │ │
│ │ │ │ │
│ │ useApi() │ │
│ └────────────────────────┼─────────────────────────────┘ │
│ │ JWT Auth │
└───────────────────────────┼─────────────────────────────────┘
│ HTTPS
┌───────────────────────────┼─────────────────────────────────┐
│ SERVEUR │
│ ┌────────────────────────┼─────────────────────────────┐ │
│ │ pwa/api.php │ │
│ │ ┌─────────────────────▼───────────────────────┐ │ │
│ │ │ SmartAuth JWT │ │ │
│ │ └─────────────────────┬───────────────────────┘ │ │
│ │ ┌─────────────────────▼───────────────────────┐ │ │
│ │ │ Controllers + Mappers │ │ │
│ │ └─────────────────────┬───────────────────────┘ │ │
│ └────────────────────────┼─────────────────────────────┘ │
│ │ │
│ ┌────────────────────────▼─────────────────────────────┐ │
│ │ DOLIBARR │ │
│ │ (Base de données + Objets) │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Liens avec les autres modules
| Module | Ce qu'il apporte ici |
|---|---|
| Module 6 | Composants SmartCommon (UI) |
| Module 7 | Hooks SmartCommon (logique) |
| Module 8 | Backend API (PHP) |
| Module 9 | Intégration complète |