Cette application a été réalisée par des étudiants de Master 1 Génie de l'Informatique Logicielle. Il s'agit d'une réponse à un appel d'offre de Guillaume Leroy et Hugo Mochet. L'application doit correspondre à GitKraken, une interface graphique de git, mais de façon libre et open-source (licence MIT).
Pour cela, nous avons utilisé :
- Angular v7.1.4
- Electron v4.0.0
- Electron Builder v20.36.1
- Bootstrap 4
- le kit de démarrage de maximegris
Pour assurer le fonctionnement de cette application depuis n'importe quel OS, il est nécessaire d'avoir installé Node.js.
Nous utiliserons aussi yarn.
Windows et macOS
Il suffit de se rendre sur le site de Node.js.
Linux
sudo apt install nodejs
sudo apt install npm
sudo npm sous Linux et macOS
Windows
Lancer simplement la commande npm install -g yarn
Linux et macOS
Il existe un problème de permissions sur Linux et macOS. Pour résoudre ce dernier, il existe deux solutions :
- Changer les permissions du répertoire /usr/local/
- Changer le préfixe de npm
La procédure à suivre est disponible ici.
Une fois cela fait, lancer
npm install -g yarn
Cloner le répertoire
git clone https://gitlab.com/Nemtecl/open-terminal.git
Installer les dépendances
yarn install
| Fichier / Dossier | Description |
|---|---|
package.json |
Fichier contenant les dépendances, les scripts et diverses informations sur le projet. |
angular.json |
Fichier de configuration pour Angular. |
.travis.yml |
Fichier de configuration pour travis. |
main.ts |
Fichier d'entré pour Electron. |
electron-builder.json |
Fichier contenant toutes les informations pour la création d'une release. |
node_modules/ |
Dossier contenant les modules natifs et installés. |
release/ |
Dossier contenant la release après génération. |
coverage/ |
Dossier contenant le résultat de la couverture de code. |
units/units.html |
Fichier de rapport des tests unitaires. |
src/styles.scss |
Feuille de style globale. |
src/variables.scss |
Feuille des variables de style. |
src/assets/ |
Dossier contenant les fichiers de traduction. |
src/app/components/ |
Dossier contenant les composants. |
src/app/screens/ |
Dossier contenant les écrans. |
src/app/app.module.ts |
Le fichier app.module.ts. Il faut y indiquer l'ensemble des modules/services à ajouter. Contient de base plusieurs services et modules utiles (TranslateModule, TranslateLoader, HttpClientModule, ElectronService, etc.) |
src/app/app-routing.module.ts |
Fichier pour le routing. |
src/app/providers |
Dossier contenant les services. |
Comme expliqué plus haut, nous avons utilisé le kit de démarrage. Le fichier package.json contenait des commandes très utiles, que nous avons donc utilisées.
| Commande | Description |
|---|---|
yarn start |
Exécution de l'application en mode développement avec hot reload. |
yarn ng:serve:web |
Exécution de l'application dans un navigateur. |
yarn build |
Build l'application. Les fichiers de build se trouvent dans le dossier /dist. |
yarn build:prod |
Build l'application avec Angular aot. Les fichiers de build se trouvent dans le dossier /dist. |
yarn electron:linux |
Sous Linux, build l'application et crée un .AppImage. |
yarn electron:windows |
Sous Windows, build l'application et crée un .exe, exécutable pour les systèmes en 32 et 64 bits. |
yarn electron:mac |
Sous macOS, build l'application et crée un .dmg contenant le .app. |
yarn test:unit |
Lance les tests unitaires |
yarn test:unit:coverage |
Lance les tests unitaires et le couvrage de code |
Il est nécessaire d'avoir installé chrome auparavant sur son ordinateur pour lancer les tests unitaires.
Une fois cette condition réalisée, il suffit de lancé yarn test:unit. Le rapport est alors disponible dans units/units.html.
yarn add [package]
yarn remove [package]
L'application étant lancée avec Electron, il est possible d'ajouter des modules natifs à Node.js. Pour cela, il suffit de les ajouter au service ElectronService. Plusieurs modules sont déjà disponibles (Child Process, File System, OS, etc.).