Electronotes est le projet "proof of concept" sur Electron dans le cadre du module conférence de M2 ILI à l'université d'Artois par Arthur Brandao. L'objectif de ce projet est de montré le possibilités d'Electron dans le domaine du développement d'application desktop.
Electronotes est une application écrites avec les technologies web (HTML / CSS / Javascript) qui permet de créer des notes (comme Google Keep par exemple). Il est possible de créer et modifier des notes qui sont visible sur un tableau de bord (qui est la page d'accueil). Les notes sont écritent en Markdown avec l'aide d'un éditeur "What You See Is What You Get" (WYSIWYG).
Plus d'informations sur l'application sont données dans les notes présentents par défaut.
Electron est crée par Github pour permettre de créer des applications desktops native sur tous les OS à partir des langages utilisé dans le web. Il repose sur Node.js et Chromium pour son fonctionnement. De nombreux logiciels de tous types (outils de développement, jeux, musique, ...) fonctionne aujourd'hui grace Electron, en voici une liste non exhaustive :
Une liste plus complete d'application utilisant Electron peut être trouvé sur le site dans la partie Apps.
Plus d'informations sur le fonctionnement d'Electron sont données dans les notes présentents par défaut dans l'application.
Le projet a été testé sur deux environnement différents :
Pour installer le projet il suffit de le télécharger et de lancer la commande d'installation
npm i
# <=>
npm install
Les dépendances vont automatiquement être téléchargées et les fichiers SCSS utilisés dans le projet seront compilés.
Lors du premier lancement en mode desktop Electron Forge (qui est un outils facilitent le développement avec Electron) va vérifiér le système d'exploitation utilisé et les dépendances natives necessaire pour fonctionner sur l'appareil. Par exemple sous Windows il est necessaire d'avoir Visual Studio C++ 2017 ou antérieur pour pouvoir lancer l'application. Sous linux je n'ai jamais eu besoins d'installer un logiciel ou une bibliotheque non présente, je n'ai jamais testé de lancer Electron sous Mac.
Le projet est prévu pour être une demonstration d'Electron et n'ai en aucun cas prévu pour être distribuable ou utilisable tel quel. Le projet a été pensé en deux parties pour montrer les possibilités d'Electron.
Les deux versions du projets possèdent des notes présentent par défaut. Il est fortemment conseillé de les lires, elles expliquent et donnent des informations sur l'utilisation et le fonctionnement de l'application. Les notes ayant le même nom entre les deux versions de l'application possède une part commune d'informations, mais on surtout des informations propre à leur version. Ainsi il est recommandé de lire toutes les notes dans les deux versions de l'pplication.
La première partie une application web qui fonctionne sur n'importe quel navigateur moderne si elle est mise sur un serveur HTTP. Il est donc possible de lancer cette version de l'application sur un serveur web ou sur Electron sans changer aucune ligne de code. L'objectif est de montrer qu'il est extrement facile de transformer une application web en application desktop. Bien évidemment cette version de l'application n'utilise aucune fonctionalitées permise par Electron puisqu'elle ne possède pas de code spécifique pour ce dernier.
Pour lancer la version web il suffit d'utiliser l'une des commandes suivantes :
# Lance la version web sur un serveur HTTP et ouvre la navigateur sur l'URL de l'application
npm run src:web
# Lance la version web de l'application avec Electron
npm run src:electron
Le code source de cette version ce trouve dans le dossier src/
.
La seconde version de l'application est basé sur le code de la version web, mais du code spécifique à Electron et Node.js a été ajouté pour utiliser des fonctionnalitées propres à ces derniers. Cette version est lanceable uniquement avec Electron et ne fonctionne pas si mis sur un serveur web.
Pour lancer la version desktop il suffit d'utiliser l'une des commandes suivantes :
# Lance la version desktop de l'application avec Electron (toutes les commandes sont équivalentes)
npm start
npm run app
npm run app:electron
Le code source de cette version ce trouve dans le dossier app/
.