Différences

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

--- front:architecture [2025/09/24 15:36] – paolo
+++ front:architecture [2025/10/01 11:54] (Version actuelle) – paolo
@@ Ligne 1: / Ligne 1: @@
 #Architecture
-{{ .:pasted:20250924-153606.png?200}}
+{{ .:pasted:20250924-153606.png?150}}
-Le dossier mobile d'un projet SmartMaker contient un dossier ''public'', un dossier ''src'' et des quelques fichiers de configuration, modèle que l'on retrouve dans la majorité des projets React.
+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 à la racine :
+  * ''.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.