{
    "id": "app",
    "title": "Application",
    "content": "Cette application est écrite entièrement avec des langages web (HTML / CSS / JS) et se base sur node.js. Cette version de l'application ne fonctionne pas dans les navigateurs\r\n\r\n#### Outils\r\n\r\nPlusieurs outils ont été installés avec l'application pour pouvoir l'utiliser simplement et sans installation de dépendances externes :\r\n\r\n- [Electron forge](https://www.electronforge.io) : Outils pour créer, publier et installer facilement des applications Electron\r\n- [Commander](https://github.com/tj/commander.js) : Gestion CLI pour node (permet de gérer les arguments pour savoir quelle version de l'application lancer)\r\n- [node-sass](https://github.com/sass/node-sass) : Compilateur fichier SCSS en CSS\r\n- [del](https://github.com/sindresorhus/del) : Suppression de fichier\r\n\r\n#### Frameworks\r\n\r\nL'application utilise plusieurs frameworks pour faciliter le développement et la mise en page de l'application :\r\n\r\n- [Materialize](https://materializecss.com) : Framework CSS / JS utilisé pour le design et les fonctionnalités graphiques du site (pop-up, toast, chargement, ...)\r\n- [Jquery](https://jquery.com) : Permet de simplifier l'interaction avec le DOM\r\n- [Google code prettify](https://github.com/googlearchive/code-prettify) : Met en forme (couleur, police, ...) les extraits de code présents dans la page\r\n- [Marked](https://marked.js.org/) : Compilateur markdown en HTML\r\n- [DOMPurify](https://github.com/cure53/DOMPurify) : Nettoie l'HTML pour éviter les injections XSS\r\n- [SimpleMDE](https://simplemde.com) : Éditeur markdown WYSIWYG\r\n\r\nToute la partie métier de l'application a été écrite en javascript sans framework particulier. Pour les fichiers de style le format SCSS a été choisi et un compilateur SCSS en CSS est intégré au projet.\r\n\r\n#### Lancement\r\n\r\nCette application ne peut être lancée uniquement qu'avec Electron, il est **impossible** de lancer l'application autrement.\r\nEn effet l'application utilise des fonctionnalités propre à Electron (et node.js) et ne peut donc être lancée que dans cet environnement.\r\n\r\nPour lancer l'application il suffit d'utiliser l'une des commandes suivantes\r\n\r\n```bash\r\nnpm start\r\n\r\nnpm run app\r\n\r\nnpm run app:electron\r\n```\r\n\r\nAu lancement de l'application les fichiers SCSS sont recompilés en CSS. \r\nDe même lors de la fermeture de l'application si des fichiers temporaires on été créés, ils sont supprimés.\r\n\r\n#### Compilation\r\n\r\nIl est théoriquement possible de compiler ce projet pour avoir un exécutable de l'application. Cependant la compilation n'a jamais été testée.\r\nDe plus la structure du projet est prévue pour montrer l'intérêt et les possibilités d'Electron et n'est pas faite pour être compilée et déployée sous forme d'exécutable.\r\nLa compilation est gérée par `Electron forge` et peut être lancée avec la commande suivante :\r\n\r\n```bash\r\nnpm run make\r\n```\r\n\r\nLa configuration pour la création des éxecutables pour les différents OS est dans le fichier `package.json` dans `config.maker`. \r\nLa configuration actuelle est celle par défaut d'Electron forge. \r\nPlus d'informations sur les différents éxecutables qu'il est possible de générer et les conditions pour pouvoir compiler le projet sur les différents OS sont disponibles sur [le site web d'Electron forge](https://www.electronforge.io/config/makers).\r\n\r\n#### Source\r\n\r\nLes sources de cette application sont disponibles dans le dossier `app/` à la racine du projet. Ce dossier possède 3 sous-dossiers :\r\n\r\n- Le dossier `data/` qui contient les données des notes présentes par défaut\r\n- Le dossier `main/` qui contient le code source du processus principal d'Electron (plus d'informations dans la note Electron). \r\nLes fichiers dans le dossier sont les fichiers de code éxecutés par Electron, le dossier `function/` regroupe les fonctions utilitaires pour ces fichiers et\r\nle dossier `asset/` contient les icones utilisés par l'application.\r\n- Le dossier `renderer/` qui contient les fichiers pour le rendu de l'application. C'est dans ce dossier que se trouve la base de code commune entre les deux versions de l'application.\r\nLes fichiers HTML à la racine du dossier sont les pages qui sont chargées par Electron au lancement. \r\nLe dossier `common/` regroupe tous les fichiers Javascript et CSS communs à toutes les pages de l'application.\r\nLe dossier `page/` contient toutes les pages de l'application, chaque page possède son propre dossier avec ces fichiers HTML et Javascript.\r\nEnfin dans le dossier `service/` se trouve des class utilitaires pour gérer par exemple le stockage ou le routage entre les pages.\r\n\r\nDe plus le dossier `helper/` regroupe des fichiers de fonctions utilitaires à thème (par exemple la gestion des fichiers).\r\nCes fonctions sont utilisées dans toute l'application (y compris dans le fichier `main.js` qui est le fichier principal de l'application).\r\nPour finir le dossier `data/` sert à stoquer les infos du dernier lancement (quelle version de l'application a été utilisée, pour reset les données en cas de changement, \r\nainsi que les fichiers temporaires"
}