electronotes/text/app/Application.md

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

Outils

Plusieurs outils ont été installé avec l'application pour pouvoir l'utiliser simplement et sans installation de dépendances externes :

• Electron forge : Outils pour créer, publier et installer facilement des applications Electron
• Commander : Gestion CLI pour node (permet de gérer les arguments pour savoir quel version de l'application lancer)
• node-sass : Compilateur fichier SCSS en CSS
• del : Suppression de fichier

Frameworks

L'application utilise plusieurs frameworks pour faciliter le développement et la mise en page de l'application :

• Materialize : Framework CSS / JS utilisé pour le design et les fonctionnalités graphiques du sites (pop-up, toast, chargement, ...)
• Jquery : Permet de simplifier l'interaction avec le DOM
• Google code prettify : Met en forme (couleur, police, ...) les extraits de code présent dans la page
• Marked : Compilateur markdown en HTML
• DOMPurify : Nettoie l'HTML pour éviter les injections XSS
• SimpleMDE : Éditeur markdown WYSIWYG

Toute 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é choisit et un compilateur SCSS en CSS est intégré au projet.

Lancement

Cette application ne peut être lancée uniquement avec Electron, il est impossible de lancer l'application autrement. En effet l'application utilise des fonctionnalités propre à Electron (et node.js) et ne peut donc être lancée que dans cet environnement.

Pour lancer l'application il suffit d'utiliser l'une des commandes suivantes

npm start

npm run app

npm run app:electron

Au lancement de l'application les fichiers SCSS sont recompilés en CSS. De même lors de la fermeture de l'application si des fichiers temporaires on été crées, ils sont supprimés.

Compilation

Il 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. De plus la structure du projet prévu pour montrer l'intéret et les possibilités d'Electron n'est pas fait pour être compilé et déployé sous forme d'exécutable. La compilation est gérée par Electron forge et peut être lancé avec la commande suivante :

npm run make

La configuration pour la création des éxecutables pour les différents OS est dans le fichier package.json dans config.maker. La configuration actuel est celle par défaut d'Electron forge. Plus 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 disponible sur le site web d'Electron forge.

Source

Les source de cette application sont disponible dans le dossier app/ à la racine du projet. Ce dossier possède 3 sous-dossier :

• Le dossier data/ qui contient les données des notes présentent par défaut
• Le dossier main/ qui contient le code source du processus principal d'Electron (plus d'informations dans la note Electron). Les fichiers dans le dossier sont les fichiers de code éxecuté par Electron, le dosser function/ regroupe les fonctions utilitaire pour ces fichiers et le dossier asset/ contient les icones utilisés par l'application.
• Le dossier renderer/ qui contient les fichiers pour le rendus de l'application. C'est dans ce dossier que ce trouve la base de code commune entre les deux versions de l'application. Les fichiers HTML à la racine du dossier sont les pages qui sont chargées par Electron au lancement. Le dossier common/ regroupe tous les fichiers Javascript et CSS commun à toutes les pages de l'application. Le dossier page/ contient toutes les pages de l'application, chaque page possède son propre dossier avec ces fichiers HTML et Javascript. Enfin dans le dossier service/ ce trouve des class utilitaires pour gérer par exemple le stockage ou le routage entre les pages.

De plus le dossier helper/ regroupe des fichiers de fonctions utilitaire à thème (par exemple la gestion des fichiers). Ces fonctions sont utilisé dans toutes l'application (y comprit dans le fichier main.js qui est le fichier principal de l'application). Pour finir le dossier data/ sert à stoquer les infos du dernier lancement (quel version de l'application a été utilisée, pour reset les données en cas de changement, ainsi que les fichiers temporaires