Dossier de Projet: Formation Développeur Web Et Web Mobile Session 2021/2022

Dossier de projet
Formation Développeur Web et Web Mobile
Session 2021/2022
DOSSIER DE PROJET 1
Sommaire
Introduction
1.Environnement de stage
1.1 Présentation de l’entreprise PLANAR SAS
1.2 Présentation du Pole recherche et développement
1.3 Environnement et méthodologie de travail
2.Réalisation interne
2.1 Cahier des charges
2.1.1 Contexte et genèse du projet
2.1.2 Spéci cations fonctionnelle
2.1.3 Spéci cations technique
2.2 Présentation de l’application
2.2.1 Maquette de l’application
2.2.2 Organisation dans la construction de l’application
2.2.3 Gestion de projet
2.2.4 Base de données
2.3 Développement
2.3.1 Mise en place de l’environnement de développement
2.3.2 Initialisation du projet et création de l’application
3 Conception et développement
3.1 Le routage
3.2 Page de connexion
3.3 Page principale : Af chage des Tables sous forme de liste et tableaux
3.4 Page secondaire : Af chage des Tables sous forme graphique
3.5 Options
4 Les différents composants
Electron.js
Conclusion
Lexique
Bibliographie
Extrait du site Anglophone
Annexes
Annexe 1 : Suite de présentation des maquettes
Annexe 2 : Rendu nal de l’application
DOSSIER DE PROJET 2
fi
fi
fi
fi
fi
Introduction
Au cours de ce stage de 2 mois, j’ai accompli ma mission qui était de créer une
application interne pour améliorer et simpli er la lecture des tables dans les bases de données
des serveurs. Cette application permet à son utilisateur (interne) de voir la liste des tables sur
le serveur choisi en se connectant.
Il se connecte avec l’adresse IP[1] du serveur choisi ainsi qu’un login et un mot de
passe. Il peut aussi af cher les liens entre les tables elles-mêmes et modi er, entrer des valeurs
à l’intérieur de celle-ci.
Nous n’avons pas choisi de sécurité avancée pour notre application car c’est une
application qui va rester dans leurs locaux en interne et qu’il y’a pas de données
compromettantes à récupérer.
Dans ce rapport, je vais présenter dans un premier temps, l’environnement de travail
de la société ainsi que les méthodologie utilisés. Ensuite, je détaillerai la conception et de le
développement de l’application interne réalisée.
Liste des compétences couvertes par ce projet :
Réalisation durant le stage Compétences professionnelles
Maquette de l’application Maquetter une application
Conception du corps de l’application Réaliser une interface utilisateur web statique et

adaptable
Connexion à la base de donnée du système et
af chage dynamique des tables de cette BDD
+ mise à jour dynamique des composants dans l'App Développer une interface utilisateur web dynamique
en fonction de la sélection des Tables et des Relations
+ mise à jour des informations af chées lors de
modi cations dans la BDD
Backend: ecriture d'une fonction dans le backend
pour obtenir la liste des tables
Développer les composants d’accès au données
Front-end: écriture/intégration des services Angular
pour la gestion des WebSockets + le parsing des
réponses du backend aux demandes de données
Ecriture du code et des commentaires en Anglais Utiliser l’anglais dans son activité professionnelle en
développement web et web mobile
Réunions en Anglais avec les collègues Américains
DOSSIER DE PROJET 3
fi
fi
fi
fi
fi
fi
1.Environnement de stage
1.1 Présentation de l’entreprise
J’ai effectué mon stage dans l’entreprise PLANAR SAS, liale de la
société Américaine PLANAR SYSTEM Inc, située à Beaverton, dans
l'Orégon.
L’activité principale de l’entreprise est la production et la distribution
d'écrans LCD de grande taille et de murs d'images LCD et LED.
Fondée en 1983 en tant que spin-off de Tektronix , elle a été

le premier fabricant américain d' écrans
numériques électroluminescents (EL).
A l'origine, il y avait une entreprise Française, fondée en 1995 par Gil Souviron et
jean-Claude Belle, à Saint-Sernin-sur-rance (Aveyron), nommée SYNELEC, dont l'activité
était la production et la vente de murs d'images.
Longtemps, SYNELEC servit de porte-étendard à tout ceux qui croyaient que l’on pouvait
concilier développement d’entreprise de nouvelles technologies en milieu rural. SYNELEC
partit à la conquête du monde avec ses écrans géants a été rattrapé, par la folle course du
monde . Après une première mise en redressement en 2004, SYNELEC avait été repris par
l’entreprise américaine CLARITY Visual Systems.
Cette dernière avait été, elle rachetée par la société américaine PLANAR SAS le 12
septembre 2006.
PLANAR est une entreprise américaine qui comporte plus de 400 salariés, elle
fait partie du groupe chinois LEYARD.
PLANAR à plusieurs pôle comme tout entreprise qui commercialise des

produits à grande échelle ( production, administration, marketing, support,
service après-vente, achat, nance, installation…), mais tout ses services ne
sont pas basés en France, donc nous allons resté sur notre pôle qui est Recherche et
Développement.
DOSSIER DE PROJET 4
fi
fi
L’équipe de PLANAR SAS en France est constitué de 19 personnes : 10 salariés à la R&D, 1
RAF, 2 commerciaux (basés sur Paris), 1 assistante commerciale, 1 ingénieur avant-vente, 2
responsables de projets clients, 1 SAV/Hotline, 1 installateur.
1.2 Présentation de l’équipe de recherche et

développement
Anciennement SYNELEC, le pôle recherche et développement à plus de 16 ans
d’existence dans l’entreprise PLANAR SAS.
Mon équipe de constitué de mon tuteur Jean Romier informaticien de formation et

développeur web con rmer ainsi que Jean-François Terral et Patrick Fradin.
Les services recherche et développement est divisé en 2 groupe, un groupe soft qui
inclue tout les ingénieur software, ingénieur R&D, ingénieur Firmware et un second groupe
qui s’occupe du hard : les ingénieurs électronique.
En n, deux stagiaires, Vincent Raucoules ingénieur électronique en formation et
Mathias Philipe en stage de découverte.
Voici le seul effectif basé en France, la plus grande partie des équipes de PLANAR sont basé
en Amérique et en Chine.
DOSSIER DE PROJET 5
Organigramme de mon équipe de travail en France
fi
fi
L‘entreprise fonctionne en méthode AGILE[2] plus particulièrement la méthode SCRUM[3]:
chaque Mardi soir nous avons une réunion avec les équipes Américaine pour faire la revue du
SPRINT[4] en cours.
Puis le jeudi nous avons une réunion avec l’équipe R&D au complet pour voir l’avancement
de chacun : chacun son tour nous présentons les taches en cours depuis la semaine dernière,
les dif cultés que nous pouvons rencontrer, etc…
Nous faisons ça aussi tout les mercredi à 11h avec l’équipe PLANAR France.
1.3 Environnement et méthodologie de

travail
Nous travaillons avec le système d’exploitation[5] que nous préférons ainsi qu’avec des
machines virtuelle tel que Virtual box ou Parallels Desktop. Pour ma part je travaille sur
MacOS avec Parallels Desktop en tant que machine virtuelle.
L’ensemble des réalisations sont effectuées avec un IDE : Visual Studio Code. La
gestion de con guration du projet est géré avec Git et le serveur GitLab de Planar.
L'utilisation de Git permettant d'avoir une copie locale du projet qui peut être mise à jour en
local ou sur le serveur très facilement. Le serveur Gitlab de Planar est situés aux USA et
hébergé sur une machine Linux.
L'utilisation de l'application GitKraken facilite la gestion des commandes Git, pour la partie
développement et certaines productions.
L’équipe dispose de plusieurs outils pour l’optimisation du travail :
L’utilisation de avec des canaux de discussions dédiés aux projets et pour

les réunions avec les équipes américaines.
Une boite mail professionnel Outlook
Une plateforme nommé Redmine pour suivre les taches à faire
Un wiki stockés sur Redmine pour se documenter sur les anciens projets ou les projets
actuel
Dès le premier jour de mon stage, j’ai dû m’appliquer à utiliser l’ensemble de ces outils.
DOSSIER DE PROJET 6
fi
fi
2. Réalisation interne
2.1 Cahier des charges
2.1.1 Contexte et genèse du projet
Le projet à réaliser au cours de mon stage constituait à réaliser une application Web
permettant aux développeur de la R&D d'af cher ‘et éventuellement de modi er’ les tables
(attributs et relations) de la base de données d'un système donné.
Après une conversation avec mon tuteur, j'ai débuté mon stage par une présentation
de la société faite par le directeur de la R1D France. Ensuite, mon tuteur m'a présenté
l'architecture interne de leurs systèmes et le fonctionnement de l'application Web de gestion
des murs d'image qu'ils développent à la R&D et ses interactions avec le back-end.
Ensuite, il m'a fourni les spéci cations de l'application à développer pendant le stage.
Cette application devant, suite à une étape de connexion sécurisée à un système, af cher la
liste des Tables de la base de donnée du système et sur sélection d'une table, la liste des
enregistrements de cette Table, sous forme de tableau, en montrant les relations et les attributs
d'un enregistrement. Un af chage graphique des Tables et de leurs relations était aussi
potentiellement prévu.
Mon tuteur m'a indiqué, que le développement ce cette application devrait être fait en
utilisant les technologies déjà utilisées à la R&D pour les autres projets, à savoir, méthode
Agile, TypeScript avec le Framework Angular[9], gestion de con guration avec Git...
2.1.2 Spéci cations fonctionnelles

Liste des spéci cations fonctionnelles :
Connexion sur le serveur de notre choix
Af chage des tables
Af chage des relations ainsi que des attributs
Possibilité d’entrée ou de modi er des attributs
Avoir une vue graphique
Pouvoir se déconnecter
L’application doit être modulable pour que l’entreprise puisse y rajouter des
fonctionnalités au cours du temps
DOSSIER DE PROJET 7
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
2.1.3 Spéci cations techniques
Liste des choix techniques pour la réalisations de l’application :
Développer l’application à partir du Framework[6] Angular
Bibliothèque Javascript
Node.js pour créer une application Angular
Visual studio code comme IDE
npm (node package manager) version 8.13.2
GitKraken
GitHub
Angular CLI[8]
DOSSIER DE PROJET 8
fi
2.2 Présentation de l’application
Lorsque PLANAR vend un mur d'image à ses clients, il est généralement fourni avec
l'électronique d'acquisition, de découpage et de gestion de l'af chage du contenu sur le mur.
Cette électronique est conçue et développée à Albi par l'équipe française et est distribuée sous
forme d'éléments rackables. La partie logicielle est développée en collaboration entre la
France et les USA. Ces logiciels, embarqués, tournent sur une CPU intégrée à l'électronique,
autour d'un noyau micro-linux et sont écrits en divers langages: C, C+
+, python, pour la gestion de l'électronique et du back-end et
javascript+Angular pour la partie front-end.
L'ensemble des données internes est géré via une base de donnée SQL-
lite.
L'objectif de l'application développée au cours de mon stage est de Ceci est un wall director
créer une application Web (en javascript avec le framework Angular)

permettant de visualiser le modèle des données d'une électronique donnée, en se connectant
sur son back-end.
Le matériel utilisé ?
Nous avons utilisé différents ordinateur avec différents système d’exploitation,
puis nous avons surtout travaillé avec Angular sur Visual studio code.
La gestion de con guration de l'application développée au cours du stage a été
fait avec Git et gérée via le serveur Gitlab de PLANAR.
A n de faciliter la gestion des branches de développement et des commits, j'ai
utilisé le logiciel Gitkraken.
Pour la présentation des documents of ciel comme celui-ci j’ai utilisé pages sur
Macos, puis keynote pour le powerpoint.
Pour la maquette de l’application nous avons utilisé l’application sur MacOs
qui s'appelle Origami Studio.
Pour qui ?
J’ai conçu cette application pour facilité la lecture des tables aux développeurs de l’entreprise
et voir visuellement les liens qu’il y a entre les tables elles-même.
La sécurité de l'application ?
Nous avons pas vraiment besoin de sécurité dans cette application car c’est une application
qui reste en local, qui restera dans les bureau pour les développeurs de l’entreprise.
DOSSIER DE PROJET 9
fi
fi
fi
fi
2.2.1 Maquette de l’application
Pourquoi faire une maquette ?
La création d’une maquette vous permet de gagner du temps. Certaines personnes le voient
comme une perte de temps car cela ajoute une étape lors de la création de leur site ou
application web. Ils pensent à tort qu’il est plus rapide de créer directement son site internet.
Or, le temps que vous passez à travailler votre maquette est nettement inférieur à celui que
vous allez passer à créer votre site au « feeling ». Sans compter le temps que vous allez
prendre à repasser derrière votre création que vous avez réalisé sans plan prédé ni.
La création d’une esquisse pour votre site internet vous permet d’entrevoir le résultat nal de
votre projet web. Vous pouvez alors imaginer, créer, rendre vivant ce que vous avez en tête.
Cette étape du processus de création vous permet de concevoir un site à l’image de votre
entreprise. Vous avez alors la possibilité de faire tous les changements que vous souhaitez a n
que le projet soit en adéquation totale avec votre image.
Présentation de notre maquette :
• Page de connexion
Le but de l’application étant de permettre l’af chage des tables de la base de donnée d’un
système donné, la première chose devant être faite est la connexion à ce système. De ce fait, la
première chose que l’application doit montrer est une page de connexion dans laquelle
l’utilisateur fournira l’URL du système à explorer, l’identi ant et le mot de passe utilisateur.
Un composant Angular devra être créé pour effectuer cette première étape.
Zone de saisis pour l’adresse IP
Zone de saisis pour l’identi ant
Zone de saisis pour le mot de passe
DOSSIER DE PROJET 10
fi
fi
fi
fi
fi
fi
• Page principale
Une fois l'étape de login passée, l'application devra af cher la page principale qui contiendra
une ligne d'en-tête, af chant des boutons et des informations, une ligne de pied de page,
af chant le logo de la société et quelques informations et la partie centrale devra af cher la
liste des tables (à gauche) et la ou les tables sélectionnées sur le reste de la page.
Le passage de la page de login à la page principale devra être fait grâce à un changement de
route au sein de l'application. De ce fait un composant doit être créé pour la page principale
et j'ai choisi de découper l'af chage des différentes parties de cette page, énoncées ci-dessus,
en plusieurs composants:
- un composant pour l'en-tête,
- un composant pour le pied de page,
- un composant pour la partie centrale,
- des composants pour les divers éléments à af cher dans cette partie.
• Vue graphique
La vue graphique, doit montrer l'ensemble des Tables sous forme d'un rectangle contenant le
nom de la table et les relations entre les tables sous forme de lignes joignant ces rectangles.
L'utilisation du Canvas HTML sera la solution pour cela.
Un composant devra aussi être créé pour cette page, et le passage entre la vue des tables et la
vue graphique se fera aussi grâce à un changement de route.
fi
fi
fi
fi
fi
fi
2.2.2 Organisation dans la construction de
l'application
Diagramme de gantt
Comment s’est déroule l’organisation pour l’application ?

L’organisation s’est déroulé de façon assez naturelle, lors du premier jour, Jean m’a donné ma
mission du stage qui était de développer cette application.
Nous avons commencé par faire une maquette puis nous nous sommes mis au code et choisis
Angular pour développer cette application.
2.2.3 Gestion de projet

Un entretien avec mon tuteur a permis me mettre en place avec l’objectif de
l’application. J’ai ensuite mis en place un tableau Kanban[7] sur taiga.io ainsi qu’un carnet
de bord. J’ai pris le partis d’utiliser les méthodes agiles de travail en revenant très
régulièrement vers mon tuteur, mes collègues et même d’autres personne de l’entreprise a n
de m’assurer de la direction tout au long du développement. L’objectif est que cet outil puisse
être utilisé par toute l’équipe Planar. J’ai eu par la même occasion une grande liberté sur le
choix des technologies : j’ai donc décidé d’utiliser le Framework Angular a n de créer un outil
extrêmement modulable pour pouvoir y ajouter de nouvelle fonctionnalités au l du temps.
fi
fi
fi
J’ai choisis de déployer tous ces outils après une grande ré exion et des concertations
avec mon tuteur dès le début de mon projet pour pouvoir rapidement obtenir de la
productivité et de la qualité.
2.2.4 Base de données

La conception de la base de données ayant été fait au démarrage du projet, donc j’ai
dû partir sur celle fournis par l’entreprise. La gure suivante a représente une partie de la
spéci cation de l'architecture de la base de données, montrant quelques Tables et leurs
relations.
MCD[10] d’un vidéo contrôleur
fi
fi
fl
Tables avec leur attributs
La base de donnée est entièrement gérée dans le backend par un programme python qui
s'appuie sur le modèle de la base.
2.3. Développement
2.3.1 Mise en place de l’environnement de développement
Tout d’abord pour pouvoir développer une application avec le Framework Angular, il
nous faut installer Node.js.
Node.js est un environnement d’exécution JavaScript construit sur le moteur
JavaScript V8 de Chrome. Il est ainsi le point central qui va permettre d'exécuter des
programmes écrits en javascript côté serveur. Node.js utilise un outil npm (Node Package
Manager), il simpli e la vie du développeur en permettant de publier et de partager des
librairies Node.js.
Il permet notamment de simpli er l'installation, la mise à jour ou la désinstallation de
ces librairies. Donc par la suite j’ai installé Node.js en version 16.16 puis npm en version
8.13.2.
Une fois l'installation effectuée on peut véri er que Node.js est correctement installé sur notre
poste de travail.
# Vérification de la version de Node.js et de npm (méthode 1)
node --version
npm --version
# Vérification de la version de Node.js et de npm (méthode 2)

node -v
npm -v
fi
fi
fi
# Mise à jour de npm
npm install npm -g
# Vérification de la mise à jour de npm

npm -v
En ajout de npm, les développer Web de PLANAR utilisent le gestionnaire de dépendance

Yarn qui propose une approche plus rapide et plus sécurisée que npm.
J'ai donc aussi installé Yarn en ligne de commande:
brew install yarn
Et véri e ensuite que l'installation avait été correctement faite:

yarn —-version
> 1.22.19
Maintenant place à l’installation de notre IDE Visual Studio Code. J’ai utilisé la dernière
version de Visual studio code qui est la version 1.69.0.
Ensuite nous allons télécharger Angular CLI , c’est une Command Line Interface (interface
en ligne de commande, en français) développée par les équipes d'Angular même. Cette CLI
permet de créer des projets dans lesquels la CLI pourra ajouter des chiers et plus exactement
des entités Angular. J’ai donc télécharger la dernière version qui est la version 14.1.1.
Angular CLI est une librairie (ou package), je l’ai donc installé avec npm le gestionnaire de
node.js
Maintenant que tout mon environnement est installé, je vais donc passer à l’initialisation du
projet et la création de mon application.
# Installation d'angular-cli dernière version disponible

npm install -g @angular/cli
# Installation d'angular-cli version spécifique

npm install -g @angular/cli@14.1.1
# Test de version installée

ng version
fi
fi
2.3.2 Initialisation du projet et création de l’application
Angular CLI est un outil pour initialiser, développer et maintenir des applications
Angular, il nous offre un certain nombre de commandes. Ces commandes
m’évitent d'effectuer des tâches répétitives.
La première commande que j’ai utilisé est ng new ou ng n

• Elle va créer notre application.
• Elle va générer tous les chiers nécessaires à cette application.
• Elle va évidemment suivre les meilleures pratiques préconisées par l'équipe de Google.
J’ai choisit le nom de mon application Mad-model-ui (déja dé nis par mon tuteur).
J’ai tapé la commande ng new avec les paramètres correspondants
- J’ai générée le projet (cette partie prend quelques minutes)
• Répondus oui pour le routing
• Choisis le type CSS[12]
Je me suis positionné dans le projet puis je l’ai exécuté.
ng new Mad-model-ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/
documentation/syntax#scss ]
CREATE mad-model-ui/angular.json (3243 bytes)
CREATE mad-model-ui/package.json (1075 bytes)
CREATE mad-model-ui/README.md (1064 bytes)
CREATE mad-model-ui/tscon g.json (863 bytes)
CREATE mad-model-ui/.editorcon g (274 bytes)
CREATE mad-model-ui/.gitignore (548 bytes)
CREATE mad-model-ui/.browserslistrc (600 bytes)
CREATE mad-model-ui/karma.conf.js (1429 bytes)
CREATE mad-model-ui/tscon g.app.json (287 bytes)
CREATE mad-model-ui/tscon g.spec.json (333 bytes)
CREATE mad-model-ui/.vscode/extensions.json (130 bytes)
CREATE mad-model-ui/.vscode/launch.json (474 bytes)
CREATE mad-model-ui/.vscode/tasks.json (938 bytes)
CREATE mad-model-ui/src/favicon.ico (948 bytes)
CREATE mad-model-ui/src/index.html (296 bytes)
CREATE mad-model-ui/src/main.ts (372 bytes)
CREATE mad-model-ui/src/poly lls.ts (2338 bytes)
CREATE mad-model-ui/src/styles.scss (80 bytes)
CREATE mad-model-ui/src/test.ts (745 bytes)
CREATE mad-model-ui/src/assets/.gitkeep (0 bytes)
CREATE mad-model-ui/src/environments/environment.prod.ts (51 bytes)
fi
fi
fi
fi
fi
fi
fi
CREATE mad-model-ui/src/environments/environment.ts (658 bytes)
CREATE mad-model-ui/src/app/app-routing.module.ts (245 bytes)
CREATE mad-model-ui/src/app/app.module.ts (393 bytes)
CREATE mad-model-ui/src/app/app.component.html (23364 bytes)
CREATE mad-model-ui/src/app/app.component.spec.ts (1091 bytes)
CREATE mad-model-ui/src/app/app.component.ts (217 bytes)
CREATE mad-model-ui/src/app/app.component.scss (0 bytes)
✔ Packages installed successfully.
Successfully initialized git.
Au cours de cette étape, Angular-cli a créé les répertoires et chiers de base pour l'application,
a initialisé le dépôt Git et téléchargé tous les modules Node nécessaires au développement de
l'application. Ci-dessous, la vue de l'arborescence de l'application, après la création:
# Se positionner dans le projet

cd Mad-model-ui
# Exécuter
ng serve
# Exécuter et lancer automatiquement l'application dans le

navigateur
ng serve -o
En mode développement si nous voulons personnaliser le port il suf t de modi er le script

start dans le chier package.json.
fi
fi
fi
fi
Par exemple pour utiliser le port 4201 le script serait le suivant "start": "ng serve --port 4201 »
"scripts": {
"ng": "ng",
"start": "ng serve --port 4200",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
3.Conception et
développements
3.1 Le routage
Une application Web Angular est constituée de composants, de templates, de services et hérite
de la collection de librairies fournies par Angular.
Notre application est une application de type monopage (single page App) qui doit permettre
de montrer différentes pages.
La meilleure manière d'appréhender ce problème est d'utiliser le Router d'Angular
permettant d'af cher telle ou telle page en fonction de l'url de la page. Ce router offre en plus
des outils de navigation permettant de changer l'url à partir du code TypeScript.
Comme lors de la création du projet, j'ai validé l'utilisation du routage, le chier app-
routing.module.ts a été créé. C'est dans ce chier que l'on fait l'association des routes et des
composants.
Comme décrit dans la phase de maquettage, notre application a besoin de deux routes
principales: le login et la page principale. Cette dernière devant af cher 2 vues différentes,
cela sera aussi géré via le routage en dé nissant des routes secondaires. La page de
déconnexion, sera aussi gérée comme une route secondaire.
Voici, ci-dessous le contenu de ce chier app-routing.module.ts
export const routes: Routes = [

{
path: 'login',
component: LoginComponent
},
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'tables',
component: TablesComponent,
outlet: 'tab'
},
{
path: 'graph',
component: GraphComponent,
outlet: 'tab'
fi
fi
fi
fi
fi
fi
},
{
path: 'option',
component: OptionComponent,
outlet: 'tab'
},
{
path: 'deco',
component: DecoComponent,
outlet: 'tab'
}
]
},
{
component: LoginComponent,
path: '',
pathMatch: 'full',
redirectTo: '',
},
{
component: LoginComponent,
path: '**',
pathMatch: 'full',
redirectTo: '',
}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
Chaque route est décrite par son url (path:) et le composant associé (component:).
Pour les routes secondaire, il convient de rajouter à la route principale, un nouvel élément
(children:) contenant la liste des routes secondaires. le nom donné sur la ligne 'outlet:' servira à
indiquer la route secondaire dans le template.
Lors de la création du projet, le composant 'app' a été créé par angular-cli. Ce composant est
le composant de base de l'application, directement chargé depuis le point d'entrée de
l'application, le chier 'index.html'.
Le template de ce composant contiendra uniquement l'information de routage de la page à
af cher en fonction de l'url indiquée dans le navigateur
<router-outlet></router-outlet>
Le but de l'application a développer est de visualiser (voir de modi er) les tables constituants
la base de données du système sur lequel elle sera connectée.
Chaque système contient un serveur Web (qui est le point d'entrée entre l'application front-
end (notre application) et le backend. Le backend est constituée d'un serveur écrit en python,
qui gère les accès à la base de donnée et l'ensemble des mécanismes pour envoyer des
fi
fi
fi
commandes et gérer les noti cations du hardware (ceci au travers d'autres modules écrits en
C++, python, ...) et de l'application front-end.
La communication entre notre application front-end et le back-end doit être sécurisée. Pour
cela au cours de l'étape de login, faite via le protocole https, un 'token' est généré par le
backend et il doit être intercepté par l'application qui devra s'en servir par la suite pour
chaque message envoyé au backend, via un protocole de WebSockets[11].
3.2 Page de connexion
La première chose que l'application à developper doit faire est l'af chage d'une page dans
laquelle l'utilisateur pourra choisir le système sur lequel il veut se connecter en donnant, l'url
de ce système, le login de l'utilisateur et le mot de passe a n d'établir la connexion vers le
backend du système.
Pour cela, comme indiqué dans le maquettage, un composant doit être créé pour gérer cette
page.
Pour se faire, j'utilise la commande angular-cli
ng generate component components/login
Cette commande a pour effet de créer le component LoginComponent dans le répertoire
'components', à la racine du répertoire 'app'. Un sous-répertoire 'login' est créé dans
fi
fi
fi
'components', contenant 4 chiers: un chier de script (.ts), un chier de template (.html), un
chier pour la feuille de style (.scss) et un chier de tests (.specs.ts)
La première partie du travail à réaliser dans ce composant est la création du template HTML
et des sélecteurs de classe CSS qui donneront le visuel de la page.
La saisie des champs URL, login et password seront fait par l'utilisation d'un formulaire
(<form></form>).
Pour cela, il convient de rajouter une fonction dans le chier de script, ainsi que des variables
pour chacun des champs....
D'autres éléments doivent être aussi utilisés, pour gérer la communication avec le backend, au
travers des protocoles https et WebSockets.
Pour cela, j'ai dû utiliser des services Angular déjà développés et testés par l'équipe soft de
PLANAR.
J'ai donc importé ces services pour les rajouter à mon application. A n d'avoir une structure
cohérente des chiers, ces services ont été ajouté dans un répertoire nommé 'services'.
fi
fi
fi
fi
fi
fi
fi
fi
Ces services sont:
- HttpService,
- JwtInterceptor (en charge de la gestion du token)
- WsBackendService
- UserService
Le service UserService étant le service de haut niveau, s'appuyant sur HttpService et
JwtInterceptor, pour la gestion du login et du token.
authenticate(): void {
window.localStorage.setItem('base_url',
JSON.stringify(this.loginForm.value.baseUrl));
this.authenticationFailed = false;
this.userService.authenticate({ login:
this.loginForm.value.login, password:
this.loginForm.value.password }).subscribe(
() => this.router.navigate(['/home']),
() => (this.authenticationFailed = true)
);
}
La fonction ci-dessus est appelée lorsque l'utilisateur cliques sur le bouton 'Log me in' et
permet d'effectuer la phase d'authenti cation (via le service UserService) qui sera validée ou
rejetée en fonction des données fournies dans les champs de Login et Password.
Si cette étape est rejetée, les champs sont effacées et l'application reste sur cette page. Dans le
cas contraire, le Router d'Angular permet à l'application de naviguer vers la page principale,
gérée par le composant 'HomeComponent' (route ‘/home')
ngOnInit(): void {
this.tableRead = false;
this.wsbackendService.connect();
this.updateReadyState(this.wsbackendService.wsService.getReady
State());
}
fi
send(payload: string): number {
const stringifiedIdToken =
window.localStorage.getItem('auth_token');
let data: any;
const id = WsbackendService.uniqueId++;
if (stringifiedIdToken) {
const authToken = JSON.parse(stringifiedIdToken);
data = { id, auth_token: authToken, payload };
} else {
data = { id, payload };
}
constructor(
private httpService: HttpService,
public wsService: MadWebsocketService
)
3.3 Page principale : Affichage des Tables
sous forme de liste et tableaux
Voici la première partie de l’application, elle permet de réaliser l’objectif principal qui
est d’af cher les tables présentes puis ensuite de voir les relations entre elles et leurs attributs.
Dès que nous cliquons sur une des relations une nouvelle fenêtre s’ouvre avec ainsi les
attributs et les relations de la table sélectionné.
Avec l’application nous pouvons aussi modi er la valeur des attributs.
fi
fi
onTableSelected(table: string, event: MouseEvent) {
if ( event && event.ctrlKey &&
this.selectedTablesName.length > 0 && !
this.selectedTablesName.includes(table) ) {
// get selected table rows to backend
this.selectedTables.splice(1);
this.selectedTablesName.splice(1);
this.selectedTablesName.push( table );
this.selectedTablesKey.splice(1);
this.selectedTablesKey.push( -1 );
this.secondSelectedTableName = table;
const request = table + '.* get';
this.wsbackendService.send(request);
} else if ( table !== this.selectedTablesName[0] ) {
this.selectedTables.splice(0);
this.selectedTablesName.splice(0);
this.selectedTablesKey.splice(0);
// get selected table rows to backend

this.selectedTablesName[0] = table;
this.selectedTablesKey[0] = -1;
const request = table + '.* get';
this.wsbackendService.send(request);
}
}
La partie droite de la page principale
<div class="view-table-area">
<div class="view-table-internal">
<div class="view-table-element"
*ngIf="selectedTables.length > 0">
<app-table-data *ngFor="let tableName of
selectedTablesName; let i =
index" [tableList]="selectedTables[i]" [selectedKey]="selected
TablesKey[i]" (closing)="onClosingTableData(i)" (selectedRelat
ion)="onSelectedRelation(i,
$event)" (editAttribute)="onEditAttribute($event)"></app-
table-data>
</div>
</div>
</div>
L’utilisation du *ngFor qui permet de créer ou d’enlever des composant TableData en

fonction des éléments des tableaux selectedTablesName (qui contient la liste des noms de
Tables à af cher) et selectedTables (qui contient la liste des enregistrements (attributs +
relations) pour chaque Table à af cher).
onClosingTableData(index: number) {
if ( index === 0 || this.selectedTablesName[index] ===
this.secondSelectedTableName ) {
this.secondSelectedTableName = '';
}
this.selectedTables.splice(index);
this.selectedTablesName.splice(index);
this.selectedTablesKey.splice(index);
if ( index > 0 && this.tableDataComponentList ) {
this.tableDataComponentList.forEach((tableDataComponent:
TableDataComponent, i) => {
if ( i === index - 1 ) {
tableDataComponent.unselectRelation();
}
});
}
}
Ceci est le code qui permet de fermer la fenêtre et ainsi on fait juste que supprimer les
éléments des 2 tableaux (selectedTablesName et selectedTables) à partir de l’indice passé à la
fonction.
Grâce au *ngFor, les instances données des composants TableData sont automatiquement
supprimées de la vue.
fi
fi
3.4 Page secondaire : Affichage des Tables
sous forme graphique
Le développement de la vue des tables sous forme graphique ne faisait pas partie du travail
qui m'était con é, aussi c'est mon tuteur qui s'en est chargé?
Le développement de cette vue a été fait avec l'élément HTML <canvas> et de la librairie
javascript fabric.js (déjà utilisée en interne pour les éléments graphiques des autres
applications Web).
fi
Cette librairie fournit une liste d'objets qui permettent de gérer le canvas HTML. Pour
l'utiliser, il faut rajouter 'fabric' à la liste des dépendances du chier package.json et de
l'installer via yarn.
Une fois installé, il suf t d'insérer une ligne dans le template du composant qui doit gérer le
canvas :
<canvas class="g-canvas" id="graphViewCanvas" #graphViewCanvas></canvas>
et importer fabric dans le code typescript.

Ensuite, dans ce code, il faut associer l'élément HTML canvas à une variable de type 'fabric',
en le paramétrant si nécessaire.
Et on peut ensuite gérer la taille du canvas:
this.fCanvas = new fabric.Canvas('graphViewCanvas', {

// Next line for can resize objects not proportionnaly from corners
// (if no de ned, unproportionnal scaling can be done using SHIFT key)
// Forbid multiple seleciton in canvas
reRightClick: true,
preserveObjectStacking: true,
selection: false,
});
this.fCanvas.setWidth(this.width);
this.fCanvas.setHeight(this.height);
Pour la vue des Tables, 4 objets de fabric ont été utilisés:

• Rect (pour créer les rectangles pour chaque Table)
• Text (pour af cher le nom des Tables dans ces rectangles)
• Group (pour grouper le Text avec le Rect)
• Line (pour créer les lignes représentant les relations entre les tables).
Extrait de la fonction créant le graphique d'une table
fi
fi
fi
fi
fi
const rect = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 0,
top: 0,
width: this.rectWidth,
height: this.rectHeight,
fill: '#ffffff',
borderColor: '#515151',
evented: false,
hasControls: false,
selectable: false,
stroke: '#515151',
strokeWidth: 2,
});
const cLabel = new fabric.Text(modelRelation.class, {

fontSize: 14,
fontFamily: 'Helvetica',
fill: '#383838',
left: this.rectWidth / 2,
top: this.rectHeight / 2,
originX: 'center',
originY: 'center',
hoverCursor: 'context-menu',
selectable: true,
evented: true,
hasControls: false,
visible: true,
});
const group = new fabric.Group([rect, cLabel], {
originX: 'left',
originY: 'top',
left: position.x,
top: position.y,
angle: 0,
selectable: true,
evented: true,
hasControls: false,
lockScalingX: true,
lockScalingY: true,
lockScalingFlip: true,
transparentCorners: true
});
this.fCanvas.add(group);
Les rectangles des tables pouvant être déplacés à la souris, quelques événements ont été
interceptés pour gérer le re-dessin des lignes
group.on('moving', () => this.tableMoving(cvsTable));

group.on('modified', () => this.tableMoved(cvsTable));
group.on('mouseover' , () => this.mouseEvent(cvsTable,
'over'));
group.on('mouseout', () => this.mouseEvent(cvsTable, 'out'));
group.on('mousedblclick', () => this.mouseDblClick(cvsTable));
});
3.5 Options
L'en-tête de l'application dispose d'un bouton 'OPTIONS' qui lorsqu'il est cliqué par
l'utilisateur permet d'af cher une boite de dialogue modale pour la gestion des options de
l'application.
Dans ce dialogue, seules 2 options sont gérées pour le moment et ces options correspondant à
des variables de type booléen, nous avons utilisé des checkbox (voir le screenshot).
fi
Le template du composant Option est construit à l'intérieur du sélecteur <BusyBg> qui
permet l'af chage de l'arrière plan rayé, positionné au premier plan (a n de donner au
dialogue Options son aspect modal)
<busy-bg mode="light">
<div id="optionDlg" class="box-content">
<div class="header">
<div class="header-text">{{title}}</div>
</div>
<div class="center-area">
<input class="allow-edit" type="checkbox"
id="allowEditting"name="allowEditting" [(ngModel)]="allowEditt
ing" (click)="onAllowEditting()">
<label for="allowEditting"> Allow Attributes Edition</
label><br>
<div class="graph-section">
<div class="graph-title">Graph view</div>
<input type="checkbox" id="alignToGrid"
name="alignToGrid" [(ngModel)]="alignTablesToGrid" (click)="on
AlignTablesToGrid()">
<label for="alignToGrid"> Align Tables to a grid</
label><br>
</div>
</div>
<div class="footer">
<button (click)="onClose()">Close</button>
</div>
</div>
</busy-bg>
Si on regarde le template du composant BusyBg, on peut voir qu'il est très simple
<div [ngClass]="{'mad-sb-bg-dark': (mode === 'dark'), 'mad-sb-

bg-light': (mode === 'light'), 'text-color tertiary-
background': true}" id="strippedBg" *ngIf="showWindow"
title="">
<ng-content></ng-content>
</div>
Seulement une <div> dont le contenu est géré par la feuille de style du composant, de façon à
ce que cette <div> occupe toute la page, soit au premier plan et avec un arrière plan rayé
fi
fi
.mad-sb-bg-dark, .mad-sb-bg-light {
top: 0px;
position: fixed;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-image: url(/assets/images/dotted-background.png);
/* Next line to have the background div on top */
z-index: 1000;
}
/* Dark dotted-background used with modal dialogs */

.mad-sb-bg-dark {
background-color: rgba(0,0,0,0.9);
}
/* Light dotted-background at startup with shifted top to see

main tabs labels */
.mad-sb-bg-light {
background-color: rgba(0,0,0,0.2);
}
L'élément Angular <ng-content></ng-content> permet d'ajouter du contenu à l'intérieur du

sélecteur <busy-bg></busy-bg>, soit la boite dialogue d'Options dans notre cas.
Et l'utilisation de la directive Angular *ngIf permet d'af cher ce composant, uniquement
lorsque la variable 'showWindow' (gérée dans le code Typescript) vaut 'true'.
L'accès à cette variable du composant 'BusyBg' est géré dans le code typescript du composant
Option.
Angular permet d'accéder aux composants utilisés dans le composant courant, grâce au
décorateur @ViewChild et fournit une variable sur la classe de ces composants.
@ViewChild(BusyBgComponent, { static: true })

busyBgComponent: BusyBgComponent;
A partir de cette déclaration, la variable 'busyBgComponent' permet l'accès aux fonctions et

variables du composant BusyBg.
Dans le code Typescript du composant Option, nous avons créé une fonction qui appèle la
fonction 'show()' du composant BusyBg et permet l'af chage du fond rayé et de la boite de
dialogue d’options.
fi
fi
show() {
this.busyBgComponent.show();
}
Ensuite j’ai mis en place une option graphique qui permet d’aligner tout les tables dans la
partie Graph.
<div class="graph-section">
<div class="graph-title">Graph view</div>
<input type="checkbox" id="alignToGrid"
name="alignToGrid" [(ngModel)]="alignTablesToGrid" (click)="on
AlignTablesToGrid()">
<label for="alignToGrid"> Align Tables to a grid</
label><br>
</div>
Et pour nir, j’ai mis en place un bouton close qui permet de fermer la fenêtre et de continuer
sur l’application.
<div class="footer">
fi
<button (click)="onClose()">Close</button>
</div>
Je rappelle encore le composant BusyBg qui permet d’enlever le « gel » mis en place ainsi que
le fond quadrillé.
onClose() {
this.busyBgComponent.hide();
}
}
4. Les différents composants

Voici la listes des différents composants qui permet de faire
fonctionner cette application.
Busy-bg : permet d’af cher le fond ‘rayé’ sur toute la page du

navigateur a n d’éviter des clics non désirés sur les boutons
principaux de l’application quand la boite d’option est af chée.
Deco : Il permet la déconnexion du serveur sur lequel nous nous

sommes identi é.
Edit-attribute : composant qui ouvre une boite de dialogue, de

type modale, pour l'af chage (et la modi cation, sous condition) de
l'attribut sélectionné, de l'enregistrement de la Table af ché, dans
le composant TableData
Footer : Ce composant permet d’af cher le footer dans

l’application après la connexion.
Graph :
Header : Permet d’af cher le header sur l’application.
Home : Composant de la page d’accueil
Login : Permet de se connecter avec l’adresse IP, un identi ant et un mot de passe
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
Modal-dialog : composant qui af che d'une boite de dialogue modale d'information. Ce
composant est constitué d'une ligne de titre, une ligne pour un texte d'information et une
ligne contenant un bouton pour sa fermeture. Il permet d'af cher des messages d'information
ou d'alerte pour l'utilisateur.
Option : Permet d’af cher une fenêtre qui nous offre la possibilité de modi er des option sur
la partie graphique
Resizable-split-view : composant, récupéré du projet principale de Planar, qui permet

d'af cher deux éléments l'un en dessous de l'autre, ou côte à côte et dont les éléments peuvent
être retaillés (avec la souris) à l'intérieur du cadre principal.
Il est utilisé dans le composant TableData pour séparer l'af chage des relations et des
attributs.
-> screenshot ?
Table-data : composant qui gère l'af chage d'une Table. Il contient une ligne de titre, dans
lequel est af ché le nom de la Table et le nombre d'enregistrements.
En dessous du titre, la vue est séparée en une liste contenant la clé de tous les enregistrements
de la Table, à gauche et la liste des relations et des attributs de l'enregistrement sélectionné
dans la liste de gauche.
Tables : composant principale de la vue 'TABLES'. Il permet d'af cher la liste des tables sur
la partie gauche et une ou plusieurs instances du composant TableData sur la partie droite
InfoField: composant, récupéré de l'application principale de Planar et adapté à nos

besoins, qui gère l'af chage d'un attribut ou d'une relation
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
Electron.js
A la demande du directeur Américain, qui souhaitait pouvoir transformer cette application,
ainsi que d'autres application Web gérées par la R&D, en 'Application Desktop', nous avons
testé le framework ‘Electron'.
Electron est une librairie open source développée par la fondation OpenJS et une
communauté active de contributeurs, sous licence MIT pour créer des applications desktop
cross-platform avec HTML, CSS et JavaScript.
C’est en combinant le navigateur libre Chromium et Node.js en un seul runtime qu’Electron

accomplit cette tâche. Ainsi les applications peuvent être empaquetées pour Mac, Windows et
Linux.
Electron est un environnement permettant de développer des applications
multi-plateformes de bureau avec des technologies web.
Electron a notamment permis de développer les éditeurs de texte
libres Atom de GitHub et Visual Studio Code de Microsoft.
A n de pouvoir transformer notre application Web en application de bureau, il est donc

nécessaire d'ajouter electron au projet.
Pour cela, depuis une console, après s'être placé à la racine du projet, il convient de taper:
yarn add electron@latest --dev
Cette commande a pour effet d'ajouter les chier d'electron dans le répertoire node_modules
du projet, de mettre à jour le chier package.json, qui contient les noms et versions des
modules de dépendance du projet.
Ensuite, il faut créer 2 chiers à la racine du projet:
- app.js
- preload.js
fi
fi
fi
fi
et les compléter en suivant les préconisations du site electronjs.org.
Modi er à nouveau le chier package.json, pour indiquer le chier app.js comme point
d'entrée de l'application
"main": "app.js"
et y ajouter une ligne pour l'exécution de l'application avec électron
"start-electron": "ng build --base-href ./ && electron .",
A cet instant, l'application peut être compilée pour être exécutée dans une fenêtre
indépendante, hors navigateur
Ceci sont des screenshot de l’application sous electron.
fi
fi
fi
Conclusion
Je suis très satisfait d’avoir pu réaliser une application complète, modulable et rentable
pour mon entreprise. Produit de façon autonome avec l’aide parfois de toute l’équipe de
Recherche et Développement mais surtout de mon tuteur de stage, mon outil permet de
facilité la lecture des relations dans tout les serveurs de mon entreprise.
Ce stage m’a permis de réaliser bien plus que les objectifs de la certi cation en
prenant par au monde de l’entreprise et en collaborant avec de nombreux corps de métiers
complémentaire avec celui de développeur. De l’ingénieur Hardware au testeur de qualité
tout cet univers est extrêmement relié. Ajoutons à cela la gestion de projet et le travail en
équipe. Ce stage fut une expérience merveilleuse pour con rmer ma passion pour le métier
de développeur web.
fi
fi
Lexique
1-Adresse IP : L'adresse IP (Internet Protocol) désigne un numéro unique attribué de
manière provisoire ou durable à un ordinateur connecté à un réseau informatique qui utilise
l'internet protocole. Cette suite de chiffres joue une rôle d'identi cation du branchement et
permet l'acheminement (c'est-à-dire le routage) des paquets de données sur Internet.
2-Méthode AGILE : En ingénierie logicielle, les pratiques agiles mettent en avant la

collaboration entre des équipes auto-organisées et pluridisciplinaires et leurs clients. Elles
s'appuient sur l'utilisation d'un cadre méthodologique léger mais suf sant centré sur l'humain
et la communication.
3-SCRUM : Scrum est la méthode agile la plus utilisée. A l'instar des autres méthodes agiles,
Scrum est une démarche de gestion de projet qui fait du client (ou utilisateur) le principal
pilote de l'équipe en charge des développements.
4-SPRINT : En développement logiciel, un sprint est un rassemblement de personnes

impliquées dans un projet a n de se concentrer sur le développement de ce projet. Un sprint
dure en général de deux à sept jours. Ce type d'évènement est devenu populaire au sein de
certains projets de logiciels libres.
5-Système d’exploitation : En informatique, un système d'exploitation est un ensemble de

programmes qui dirige l'utilisation des ressources d'un ordinateur par des logiciels applicatifs.
6-Framework : En programmation informatique, un framework est un ensemble cohérent

de composants logiciels structurels qui sert à créer les fondations ainsi que les grandes lignes
de tout ou partie d'un logiciel, c'est-à-dire une architecture.
7-Kanban : La méthode Kanban fonctionne à partir d'un système de cartes. Elle a d'ailleurs
été baptisée en référence à ce procédé. Kanban signi e étiquettes en langue japonaise. Les
fi
fi
fi
fi
cartes ou étiquettes vont représenter les tâches à accomplir en vue de répondre à la
commande d'un client.
8-CLI : CLI est l'acronyme utilisé pour Command Line Interface, des interfaces
classiques.Une interface de ligne de commande (CLI) permet aux utilisateurs d'écrire des
commandes dans un terminal ou une fenêtre de console pour communiquer avec un système
d'exploitation.
9-Angular : Angular est un framework côté client, open source, basé sur TypeScript, et
codirigé par l'équipe du projet « Angular » à Google et par une communauté de particuliers
et de sociétés.
10-MCD : (Modèle Conceptuel des Données) : un MCD est un diagramme permettant de

donner une représentation schématique de tout ou partie d'une base de données relationnelle.
Lorsqu'une base de données devient consistante, on a tendance à diviser le modèle en sous-
modèles.
11-Websocket : WebSocket est un standard du Web désignant un protocole réseau de la

couche application et une interface de programmation du World Wide Web visant à créer des
canaux de communication full-duplex par-dessus une connexion TCP pour les navigateurs
web.
12-CSS : CSS (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet
article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en
présentera la syntaxe, puis quelques termes clés du langage seront introduits.
Input : Entrée des données en vue d'un traitement; ensemble des informations destinées à
être traitées; action d'introduire des données. L'input est généralement un terminal,
quelquefois au double usage (input et output) de la saisie des données et de l'édition des
résultats
Fonction: Une fonction désigne en programmation un « sous-programme » permettant

d'effectuer des opérations répétitives. Au lieu d'écrire le code complet autant de fois que
nécessaire, on crée une fonction que l'on appellera pour l'exécuter, ce qui peut aussi alléger le
code, le rendre plus lisible.
Bibliographie
https://angular.io/
https://www.planar.com/products/lcd-video-walls/clarity-matrix-lcd/
https://www.planar.com/
http://redmine.planar.net/projects/planar-eng/wiki/Getting_Started_With_Electron
https://www.smashingmagazine.com/2018/11/a-complete-guide-to-routing-in-angular
Extrait du site Anglophone
Extrait du site: https://www.smashingmagazine.com/2018/11/a-complete-guide-to-
routing-in-angular/
Partie originale
A Complete Guide To Routing In Angular
Introducing Angular Router #
Angular Router is a powerful JavaScript router built and maintained by the Angular core
team that can be installed from the @angular/router package. It provides a complete routing
library with the possibility to have multiple router outlets, different path matching strategies,
easy access to route parameters and route guards to protect components from unauthorized
access.
The Angular router is a core part of the Angular platform. It enables developers to build
Single Page Applications with multiple views and allow navigation between these views.
Let’s now see the essential Router concepts in more details.
THE ROUTER-OUTLET #
The Router-Outlet is a directive that’s available from the router library where the Router
inserts the component that gets matched based on the current browser’s URL. You can add
multiple outlets in your Angular application which enables you to implement advanced
routing scenarios.
Any component that gets matched by the Router will render it as a sibling of the Router
outlet.
ROUTES AND PATHS #
Routes are definitions (objects) comprised from at least a path and a component (or
a redirectTo path) attributes. The path refers to the part of the URL that determines a unique
view that should be displayed, and component refers to the Angular component that needs to
be associated with a path. Based on a route definition that we provide (via a
static RouterModule.forRoot(routes) method), the Router is able to navigate the user to a
specific view.
Each Route maps a URL path to a component.
The path can be empty which denotes the default path of an application and it’s usually the
start of the application.
The path can take a wildcard string (**). The router will select this route if the requested
URL doesn’t match any paths for the defined routes. This can be used for displaying a “Not
Found” view or redirecting to a specific view if no match is found.
This is an example of a route:
{ path: 'contacts', component: ContactListComponent}
If this route definition is provided to the Router configuration, the router will
render ContactListComponent when the browser URL for the web application becomes /
contacts.
Traduction
Un guide complet du routage en Angular
Présentation d'Angular Router
Angular Router est un puissant routeur JavaScript construit et maintenu par l'équipe centrale
d'Angular qui peut être installé à partir du paquet @angular/router. Il fournit une
bibliothèque de routage complète avec la possibilité d'avoir plusieurs sorties de routeur,
différentes stratégies de correspondance de chemin, un accès facile aux paramètres de route et
des gardes de route pour protéger les composants contre les accès non autorisés.
Le routeur Angular est un élément central de la plateforme Angular. Il permet aux
développeurs de construire des applications monopages avec plusieurs vues et de permettre la
navigation entre ces vues.
Voyons maintenant plus en détail les concepts essentiels du routeur.
LE ROUTER-OUTLET
Le Router-Outlet est une directive disponible dans la bibliothèque de routeurs où le routeur
insère le composant qui correspond à l'URL du navigateur actuel. Vous pouvez ajouter
plusieurs outlets dans votre application Angular, ce qui vous permet de mettre en œuvre des
scénarios de routage avancés.
Tout composant mis en correspondance par le routeur sera rendu en tant que frère ou sœur
de l'outlet du routeur.
ROUTES ET CHEMINS
Les routes sont des dé nitions (objets) composées d'au moins un chemin et d'un composant
(ou d'un chemin redirectTo). Le chemin fait référence à la partie de l'URL qui détermine une
vue unique à af cher, et le composant fait référence au composant Angular qui doit être
associé à un chemin. Sur la base d'une dé nition de route que nous fournissons (via une
méthode statique RouterModule.forRoot(routes)), le routeur est capable de diriger l'utilisateur
vers une vue spéci que.
Chaque route fait correspondre un chemin URL à un composant.
Le chemin d'accès peut être vide, ce qui indique le chemin d'accès par défaut d'une
application et correspond généralement au début de l'application.
Le chemin peut prendre une chaîne de caractères génériques (**). Le routeur sélectionnera
cette route si l'URL demandée ne correspond à aucun chemin des routes dé nies. Cela peut
être utilisé pour af cher une vue "Not Found" ou pour rediriger vers une vue spéci que si
aucune correspondance n'est trouvée.
Voici un exemple de route :
{ path : 'contacts', component : ContactListComponent}
Si cette dé nition de route est fournie à la con guration du routeur, le routeur rendra le
composant ContactListComponent lorsque l'URL du navigateur de l'application Web
deviendra /contacts.
fi
fi
fi
fi
fi
fi
fi
fi
fi
Annexe
Annexe 1 : Suite des maquettes
Annexe 2 : Rendu final de l’application
`

Dossier de Projet: Formation Développeur Web Et Web Mobile Session 2021/2022

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dossier de Projet: Formation Développeur Web Et Web Mobile Session 2021/2022

Transféré par

Droits d'auteur :

Formats disponibles

Dossier de projet

Formation Développeur Web et Web Mobile

Liste des compétences couvertes par ce projet :

Réalisation durant le stage Compétences professionnelles

Maquette de l’application Maquetter une application

Conception du corps de l’application Réaliser une interface utilisateur web statique et

Fondée en 1983 en tant que spin-off de Tektronix , elle a été

PLANAR à plusieurs pôle comme tout entreprise qui commercialise des

1.2 Présentation de l’équipe de recherche et

Mon équipe de constitué de mon tuteur Jean Romier informaticien de formation et

1.3 Environnement et méthodologie de

L’équipe dispose de plusieurs outils pour l’optimisation du travail :

L’utilisation de avec des canaux de discussions dédiés aux projets et pour

2.1.2 Spéci cations fonctionnelles

créer une application Web (en javascript avec le framework Angular)

Présentation de notre maquette :

Zone de saisis pour l’adresse IP

Zone de saisis pour l’identi ant

Zone de saisis pour le mot de passe

Comment s’est déroule l’organisation pour l’application ?

2.2.3 Gestion de projet

2.2.4 Base de données

MCD[10] d’un vidéo contrôleur

# Vérification de la version de Node.js et de npm (méthode 2)

# Vérification de la mise à jour de npm

En ajout de npm, les développer Web de PLANAR utilisent le gestionnaire de dépendance

Et véri e ensuite que l'installation avait été correctement faite:

# Installation d'angular-cli dernière version disponible

# Installation d'angular-cli version spécifique

# Test de version installée

La première commande que j’ai utilisé est ng new ou ng n

# Se positionner dans le projet

# Exécuter et lancer automatiquement l'application dans le

En mode développement si nous voulons personnaliser le port il suf t de modi er le script

export const routes: Routes = [

3.2 Page de connexion

// get selected table rows to backend

La partie droite de la page principale

L’utilisation du *ngFor qui permet de créer ou d’enlever des composant TableData en

<canvas class="g-canvas" id="graphViewCanvas" #graphViewCanvas></canvas>

et importer fabric dans le code typescript.

Et on peut ensuite gérer la taille du canvas:

this.fCanvas = new fabric.Canvas('graphViewCanvas', {

Pour la vue des Tables, 4 objets de fabric ont été utilisés:

Extrait de la fonction créant le graphique d'une table

const cLabel = new fabric.Text(modelRelation.class, {

group.on('moving', () => this.tableMoving(cvsTable));

<div [ngClass]="{'mad-sb-bg-dark': (mode === 'dark'), 'mad-sb-

/* Dark dotted-background used with modal dialogs */

/* Light dotted-background at startup with shifted top to see

L'élément Angular <ng-content></ng-content> permet d'ajouter du contenu à l'intérieur du

@ViewChild(BusyBgComponent, { static: true })

A partir de cette déclaration, la variable 'busyBgComponent' permet l'accès aux fonctions et

4. Les différents composants

Busy-bg : permet d’af cher le fond ‘rayé’ sur toute la page du

Deco : Il permet la déconnexion du serveur sur lequel nous nous

Edit-attribute : composant qui ouvre une boite de dialogue, de

Footer : Ce composant permet d’af cher le footer dans

Header : Permet d’af cher le header sur l’application.

Home : Composant de la page d’accueil

Resizable-split-view : composant, récupéré du projet principale de Planar, qui permet

InfoField: composant, récupéré de l'application principale de Planar et adapté à nos

C’est en combinant le navigateur libre Chromium et Node.js en un seul runtime qu’Electron