SmarMaker - Documentation
Docs» front:architecture

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
front:architecture [2025/10/01 10:13] – paolofront:architecture [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
Ligne 1: Ligne 1:
-#Architecture 
  
-{{ .:pasted:20250924-153606.png?150}} 
- 
-Le dossier mobile d'un projet SmartMaker contient un dossier ''node_modules'', un dossier ''public'' (fichiers statiques non compilés), un dossier ''src'' (code source) et quelques fichiers de configuration, modèle que l'on retrouve dans la majorité des projets React. 
- 
-Dans le dossier ''public'' : 
-  * ''images'' rassemble les icônes de l'application (pwa) et autres images statiques. 
-  * ''locales'' contient les ichiers de traductions json. 
-Vous pouvez bien évidemment agencer et/ou rajouter des dossiers comme ''videos'', ''audios'', ... comme vous le souhaitez. 
- 
-Dans le dossier ''src'': 
- 
-  * ''assets'' contient les fichiers statiques pris en charges par la compilation. 
-  * ''components'' regroupe les composants jsx de l'application. 
-  * ''i18n'' contient les fichiers de configuration des traductions. 
-  * ''redux'' contient les fichiers de gestion de l'état global de Redux. 
-  * ''utils'' contient les constantes, les fonctions utilitaires, ... 
-  * ''App.jsx'' est le premier composant de l'application englobant les pricipaux. 
-  * ''main.jsx'' est le point d'entrée de tout le code source de l'application importé dans ''index.html''. 
-  * ''appConfig.js'' est un fichier de configuration globale de l'application. 
- 
-Fichiers de configuration : 
- 
-  * ''.env'' contient les variables d'environnement ignoré par le ''.gitignore''. 
-  * ''.env.example'' est le modèle du fichier ''.env''. 
-  * ''.gitignore'' contient la liste des dossiers/fichiers ignorés par Git. 
-  * ''eslint.config.js'' est la configuration de ESLint qui analyse le code et renvoie des erreurs. 
-  * ''index.html'' est le fichier HTML dans lequel React monte l'application. 
-  * ''package-lock.json'' est un fichier généré par npm afin de vérouiller les versions exactes des dépendances. 
-  * ''package.json'' contient la configuration du projet, les dépendances, srcipts, ... 
-  * ''README.md'' est un fichier de documentation. 
-  * ''vite.config.js'' contient la configuration de Vite (c'est ici que l'on retrouve celle de la PWA). 
- 
-Vous serez probablement amené à ajouter, supprimer des dossiers/fichiers ou, plus généralement, modifier cette architecture. Vous remarquerez que la position de la plupart de ces dossiers/fichiers n'a pas une importance technique particulière, mais relève surtout d'une question d'organisation. 
Made with ❤ by CAP-REL · SmartMaker · GNU AGPL v3+
Code source · Faire un don
SmarMaker - Documentation

Table of Contents

  • SmartAuth
  • SmartMaker - Back (PHP)
    • Mapping Dolibarr - React
  • SmartMaker - Front (React)
    • Animations de pages
    • Architecture
    • Astuces
    • Calendar
    • Composants et pages
    • Configuration du Provider
    • Debug et Logs
    • Hooks SmartCommon
    • PWA (Progressive Web App)
    • Requêtes API
    • Routage
    • SmartCommon
    • Stockage de données
    • Synchronisation offline
    • Thèmes
    • Traductions
  • HowTo - Pas à pas - Votre première application
    • Développement PHP (back)
    • Développement React (front)
    • Première étape : Module Builder Dolibarr
    • SmartAuth
    • SmartBoot : Un squelette prêt à l'emploi
  • Formation SmartMaker
    • Module 1 : Fondamentaux JavaScript ES6+
      • Chapitre 1 : Variables et Scope
      • Chapitre 2 : Fonctions
      • Chapitre 3 : Programmation Asynchrone
      • Chapitre 4 : Modules ES6
    • Module 2 : Introduction à React
      • Chapitre 1 : Philosophie React
      • Chapitre 2 : JSX
      • Chapitre 3 : Composants
    • Module 3 : Hooks React Fondamentaux
      • Chapitre 1 : useState
      • Chapitre 2 : useEffect
      • Chapitre 3 : useRef
      • Chapitre 4 : useContext
    • Module 4 : React Avancé
      • Chapitre 1 : useCallback et useMemo
      • Chapitre 2 : Custom Hooks
      • Chapitre 3 : Redux et Redux Toolkit
    • Module 5 : Architecture SmartMaker
      • Chapitre 1 : Structure du projet
      • Chapitre 2 : Configuration
      • Chapitre 3 : Flux de données
    • Module 6 : SmartCommon - Composants
      • Chapitre 1 : Mise en page
      • Chapitre 2 : Navigation
      • Chapitre 3 : Formulaires
      • Chapitre 4 : Affichage
    • Module 7 : SmartCommon - Hooks
      • Chapitre 1 : useApi
      • Chapitre 2 : Gestion d'état
      • Chapitre 3 : Hooks utilitaires
      • Chapitre 4 : Synchronisation Offline
    • Module 8 : Backend API (PHP)
      • Chapitre 1 : Routage
      • Chapitre 2 : Controllers
      • Chapitre 3 : Mappers
      • Extrafields et formulaires dynamiques
    • Module 9 : Intégration complète
      • Chapitre 1 : Backend
      • Chapitre 2 : Frontend
      • Chapitre 3 : Déploiement
    • Module 10 : Fonctionnalités avancées
      • Chapitre 1 : Mode offline
      • Chapitre 2 : Internationalisation (i18n)
      • Chapitre 3 : Autres fonctionnalités
    • Module 11 : Bonnes pratiques
  • Démonstration
  • Start
  • Composants et pages