Cours logiciel - Electron

Chap 1 : Fenêtre principale, frameless bar, icon, lancement…

Préface

Je vais vous présenter comme installer votre environnement de développement, et créer votre première fenêtre, avec quelques astuces de dév, vous permettant d’accélérer vos rendus.

Le code source concernant ce chapitre est disponible sur mon Github.

Résultat du cours

 

Installation des pré-requis

Vous devrez avoir NodeJS d’installé. Je vous renvoi sur un précédent article qui vous explique les démarches à suivre.

 

Initialisation d’un nouveau projet

On va initialiser une nouvelle application angular avec tout le squelette de base qui va bien, afin de nous faire gagner du temps :

  • ng new Nom_de_votre_app

note : ng est une commande de la CLI de Angular

Sélectionner Yes pour avoir le routing du module de base,

Sélectionner ensuite votre langage pour les feuilles de style, je prends SCSS pour ma part.

 

On va ajouter Electron à notre projet via :

  • npm install --save-dev electron

 

Création de la fenêtre principale

On va créer un fichier main.js. C’est lui qui va servir de fichier principal pour créer notre fenêtre, avec le code suivant :

On va ensuite mettre à jour notre fichier package.json pour lui indiquer le point principal d’entrée pour Electron an ajoutant la ligne :

"main": "main.js"

 

De retour sur la console, déplacer vous au sein du projet, vous allez pouvoir lancer votre application dans electron via la commande :

  • electron .

 

Tadaaaaaaaaaaaaa. Ça ne casse pas 3 pattes à un canard, mais ça à le mérite d’être du développement plutôt rapide ! 😂

Première fenêtre sous Electron !

 

Liaison du serveur de dév de Angular vers Electron

Nous n’avons fait que lier de façon statique la page index.html. Cependant, pour le bon fonctionnement de Angular, il va nous falloir un serveur HTTP qui gère le typescript. Celui de base de Angular fonctionne très bien.

On va modifier notre fichier main.js pour qu’il prenne non plus un fichier en entrée, mais une URL qui pointe vers notre serveur de développement.

Lancer depuis une console le serveur de développement de Angular :

  • ng serve

 

Lancer ensuite depuis une seconde console electron. Vous avez désormais accès à Angular depuis votre application Electron. Vous pouvez avoir accès au rechargement à chaud ( mise à jour de l’UI en direct dès une modification du code ) directement dans Electron.

Angular tourne dans Electron

 

Lancement parallèle 

Pour éviter d’avoir deux console, on va pouvoir automatiser le lancement de Electron et Angular depuis un script.

Dans le fichier package.json, rajoutez les scripts suivants :

La première permet de lancer electron. La seconde quant à elle permet de lancer le serveur local de développement de Angular et Electron de façon concurrentielle.

 

Customization de la fenêtre

C’est dans l’ère du temps, donnons un peu de style à notre application 😎

On va supprimer la barre d’outils toute moche, et y incorporer une toolbar un poil plus joli, qui nous permettra de déplacer notre app, ainsi que de l’agrandir via une double tap.

Ajoutons la librairie de base pour les material UI :

  • ng add @angular/material

Nous n’avons pas besoin de HammerJS, mais belle et bien cependant des browser animations pour Angular material, qui seront à préciser à la suite de cette commande.

 

On va ajouter notre toolbar à notre fichier HTML du composant App

<mat-toolbar class="menu">My App</mat-toolbar>

 

Ajouter à notre module principal App le bon import pour la librairie Material :

import { MatToolbarModule} from '@angular/material'

 

Et ajouter MatToolbarModule dans la déclaration du Module principal, dans la partie Import

 

 

Lancement instantané de l’app ( white blank screen )

Quand on lance l’application, on a un écran blanc temporaire qui s’affiche. C’est une chose que l’on ne souhaite pas avoir au sein de notre application une fois buildé. C’est pour cela que l’on va modifier notre fichier main.js pour demander à Electron d’afficher notre fenêtre seulement une fois que celle-ci sera entièrement chargé, ce qui nous donnera l’impression d’avoir une ouverture quasi instantané.

Pour cela on va créer notre fenêtre et demander à Electron de la cacher dans un premier temps. Ajoutez la ligne suivante en paramètre de création lors de l’appel de la méthode :

  • show: false

On va ensuite rajouter un event, qui sera appelé une fois que la fenêtre sera prête :

Notre application va désormais se lancer directement.

 

Icone de l’application

Pour changer l’icone de votre application sur le bureau de windows, ajouter l’option lors de la création de la fenêtre avec le lien pointant vers une image placé dans votre dossier d’assets :

  • icon: './src/assets/icon/icon_transparent.png'

 

Conclusion

Nous venons de créer très simplement et rapidement une simple fenêtre, avec un chouette esthétisme.

Le prochain chapitre va permettre d’y ajouter de nouvelles fonctionnalités, concernant la barre d’outils.

 

 

Cours web frontend - Angular 8

Chap 5 : Gestion de la navigation via les…

Nous avons vu au chapitre précédent, l’ajout de deux composants dans notre application web, dont un menu de navigation. On va souhaiter maintenant de pouvoir nous balader à travers notre app pour afficher tel ou tel composant. Le code source du projet est disponible ici sur Github.

 

Routing entre component

On va commencer par créer deux nouveaux composants pour correspondre à nos deux onglets du menu :

  • ng generate component acheter
  • ng generate component vendre

Automatiquement, ces deux composants vont être déclarés dans notre app.module.ts.

 

On va créer deux alias pour deux routes différentes dans notre nav bar qui permettront de rediriger vers un composant :

 

On va aller ajouter cette redirection de route dans notre fichier app-routing.module.ts. On ajoute aussi l’import de nos deux composants. Quand au fichier de routing, celui ci est crée lors de la création du module si vous ajoutez l’attribut --routing.

On va dire de charger tel ou tel composant selon l’alias renvoyé par notre nav bar :

 

Redirection d’une route

Une chose qui peut être intéressant, c’est de pouvoir rediriger une route vers un composant spécifique. Par exemple, au démarrage de l’application, on souhaite charger par défaut un onglet spécifique.  Nous allons ajouter une directive de redirection dans le fichier app-routing.module.ts comme cela :

 

On est alors automatiquement redirigé lorsque l’on ouvre localhost:4200 vers localhost:4200/acheter, avec le composant ‘acheter’ d’ouvert :

 

Routing pour entre module

On va créer un nouveau module pour imager notre navigation entre module :

  • ng generate module login --routing

Ainsi que trois nouveaux composants :

  • ng generate component inscription
  • ng generate component connexion
  • ng generate component login

On va se service de login pour créer une seconde nav bar, nous permettant de naviguer au seins du module Login pour nous permettre de choisir entre la page d’inscription et de connexion.

 

On ajoute le nouvel onglet à notre nav bar principal:

 

On ajoute la nav bar secondaire :

 

N’oubliez pas d’ajouter dans le constructeur de login.component.ts, les items du sous menu :

La balise <router-outlet></router-outlet> va nous permettre d’inclure le code HTML des enfants dynamiquement, soit login/connexion ou login/inscription à tout moment lors de la navigation.

 

Il nous reste plus qu’a ajouter les routes des enfants du module Login dans notre fichier de routing principal qui est dans le module app :

 

Lazy loading, ou chargement à la demande

Au fur et à mesure que vous ajoutez des fonctionnalités à votre application, il se peut que celle-ci prennent de plus en plus de temps à s’ouvrir. En effet, c’est lors du démarrage que l’ensemble des pages sont récupérés, que les objets sont construits, etc. Afin d’alléger cette phase, on peut donner une nouvelle directive à angular, lui demandant de charger les modules à la demande seulement. Ces composants ou modules ne seront donc crée que lorsque l’un de ses composant sera appelé lors de la navigation.

Premièrement on va modifier notre appel à notre module Login  dans le fichier de routing principal de notre application :

 

Ensuite, on a juste à donner les nouvelles routes au sein du module enfant :

 

Pre loading

Nous venons de voir comment charger nos modules séparément et à la demande. On peut encore optimiser ces temps de chargement au démarrage.

En effet, une fois le module principal chargé, on pourrait demander à Angular de pouvoir pré-charger en arrière plan les autres modules de l’application, alors même que l’utilisateur peut dors et déjà interagir avec le module principal de l’application. Cela permettra ainsi d’avoir une navigation quasi instantané des autres modules.

Pour cela, on va modifier la stratégie de pré-chargement dans le fichier de routing principale de l’application :

 

 

Cours web frontend - Angular 8

Chap 4 : Créer votre premier component ( header…

Maintenant que nous en savons un peu plus sur les briques logiciels mit à disposition par Angular vu au chapitre précédent, nous allons pouvoir ajouter notre premier composant. Pour l’exemple, nous réaliserons un header pour la navigation à travers notre application et un footer. Je vous joint le code Github du projet si vous souhaitez vous en inspirer. N’oublier pas quand vous récupérer le projet, d’y faire un npm install au sein du projet afin d’installer les dépendances inscrite dans le package.json.

 

Création des components

On va se déplacer à la racine du projet et créer un nouveau répertoire que l’on va appeler Core :

  • cd src
  • cd app
  • mkdir Core
  • cd Core

On va générer nos deux components avec la Cli :

  • ng generate component header
  • ng generate component footer

 

Customization du Header

On va s’en servir pour créer un menu afin de permettre la navigation dans notre application.

La première étape et d’y ajouter le contenu de la vue du component Header dans la vue du composant principal de notre application, qui est app.component. Pour cela, on va ajouter le sélecteur du component Header et l’insérer dans app.component.html. Vous pouvez modifier le sélecteur de celui-ci dans l’entête du header.component.ts :

Dans cette en tête, vous avez :

  • selector : représente la balise HTML à appeler pour afficher la vue du composant de Header, donc son fichier HTML
  • templateUrl : c’est le fichier .HTML de la vue du composant
  • styleUrls : c’est le fichier de style .CSS correspondant au composant

 

On ajoute donc dans le fichier app.component.html la balise suivante en haut de fichier :

<app-header></app-header>

En lançant notre application nous avons le changement suivant :

Qui permet de nous indiquer que le contenu du header s’affiche correctement.

 

 

Ne pas oublier de déclarer notre nouveau composant dans son module respectif. Cli s’occupe de lui affecter la déclaration, mais c’est bon de savoir ce qu’il se passe quand on appelle la Cli :

Déclaration du nouveau composant Header dans son module parent

 

Ajout du menu de navigation

On va pouvoir ajouter un menu. Pour cela on va utiliser des material component, une librairie de base qui permet l’ajout d’élément graphique :

npm install @angular/material @angular/cdk @angular/animations

Dans app.module.ts, on va ajouter l’import de cette librairie  :

import { MatTabsModule } from '@angular/material/tabs';

Puis dans la partie imports, on ajoute MatTabsModule. Ajouter aussi le BrowserAnimationsModule, disponible depuis :

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Dans le fichier header.component.ts, on va y créer un tableau à fournir à notre menu pour qu’il puisse avoir des noms d’onglet :

Puis y ajouter notre composant dans le header.component.html :

 

Pour fonctionner enfin, il faut fournir un thème de base à notre application pour Angular/material. Pour cela, aller ajouter la ligne suivante dans le fichier style.css :

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Je vous laisse voir la doc, il existe une multitude de code couleur pré existant. Vous pouvez aussi créer le votre.

 

Customization du Footer

On va réitérer les étapes précédentes, à savoir :

Insertion du sélecteur de Footer dans la vue parente, soit à la fin de app.component.html :

<app-footer></app-footer>

 

Création de la <div> du footer :

 

On lui modifie sa feuille de style pour rester fixé en bas du site :

 

 

Et voila le résultat de l’ajout de notre header et footer sur l’application :

 

Dans le prochain chapitre, on va présenter le système de route permettant de naviguer entre les divers composants et module de l’application.

Cours web frontend - Angular 8

Chap 2 : Initialisation de notre première application

On a vu comment installer les dépendances nécessaires à une application web dans le chapitre précédent.

On va maintenant voir comment générer le squelette de base d’une application en Angular 8.

Création de l’app

On va générer notre application avec la commande CLI suivante :

  • ng new NomdeL’app

 

CLI va nous demander plusieurs questions concernant la génération :

Angular routing : nous le verrons dans un prochain chapitre. Cela permet de gérer la navigation au sein de l’application. On ne va pas s’en servir dans le chapitre actuel, mais vous pouvez mettre Oui.

Choix des feuilles de style : CLI nous propose entre CSS, SCSS et Sass. Le CSS étant le plus commun, on va garder celui-ci. Sachez que le compilateur transformera le SCSS et Sass en CSS. Ces deux derniers permettent juste une écriture des styles de façon plus lisible et rapide. Ce choix n’est pas définitif puisque vous pourrez le changer à n’importe quel moment plus tard dans le développement de votre application.

Comparaison syntaxique entre 3 langages de style

Cli va nous générer des fichiers. Pas besoin de savoir l’utilité de chaque pour le moment, nous le verrons dans le prochain chapitre. On va se déplacer dans le fichier racine du projet :

  • cd NomdeL’app

Pour enfin lancer :

  • ng serve

Cette dernière commande va nous permettre de build notre application. Et celle-ci est pratique, puisqu’il suffira de changer une seule ligne de code dans notre projet, pour que le projet soit re-buildé automatiquement, et que l’on voit les modifications dans le navigateur en temps quasi-réel.

 

Vous n’avez plus qu’a lancer votre navigateur préféré et aller sur :

  • http://localhost:4200/

 

Eeeeeeeeeh TADAAAAAAA

Je vous l’accorde ce n’est pas ouf. Mais c’était rapide non ?

 

Avant d’aller plus loin dans  la customisation de notre application web, dans le prochain chapitre 3, nous ferons une halte pour comprendre l’ensemble des composants crées précédemment.

Cours web frontend - Angular 8

Chap 1 : Installation des pré-requis

Pour créer le frontend d’une application avec le framework Angular, il va nous falloir installer quelques dépendances nécessaires. Rassurez-vous, rien de bien long 🙃

 

Node.Js & NPM

Pour faire simple, c’est un framework en Javascript permettant de réaliser des serveurs pour le backend. On en a besoin puisqu’il va nous fournir NPM. C’est le gestionnaire de packet pour le web, comme NuGet pour le C#, ou encore PiP pour Python. Il va nous permettre d’installer pleins de librairies nous facilitant le développement de notre application.

 

Vous pouvez le récupérer sur son site https://nodejs.org/en/

Installer la version que vous souhaitez cela importe peu. Il va créer un dossier Node sur le disque C. Vous devrez rajouter ce dossier C:\ProgramFiles\Node\ au PATH des variables d’environnement de votre système d’exploitation, pour que nous puissions utiliser les alias dans la console.

On peut alors tester que tout fonctionne correctement :

C’est OK pour nous, on a bien Node.Js et NPM qui sont accessible.

 

Angular & Angular/Cli

La prochaine étape va être d’installer la librairie Angular. Mais pourquoi alors parler de Angular/Cli ? CLI est une interface de ligne de commande pour Angular, une sorte d’extension. Elle va nous permettre de faciliter la création d’une application Angular par la suite en créant à notre place toute sorte d’objets pré codés, nous permettant alors de gagner un certain temps.

Dans une console on va alors se mettre à la racine du projet duquel on souhaite créer, et exécuter :

  • npm i @angular/cli

 

Vous pouvez voir l’ensemble des packets installé via :

  • npm list –depth=0

L’attribut –depth est facultatif. Il permet de réduire l’arbre des dépendances de l’ensemble des packets pour y voir plus claire

 

Nous voilà OK pour le chapitre suivant, auquel on va pouvoir initialiser notre première application !