Ma première expérience en entreprise

Dans cet article je vais vous présenter ma première expérience en entreprise. Celle-ci fut un stage de 3 mois dans la société Apave que je vous présente dans l'onglets Mes expériences Professionnelles. Je vais tout particulièrement parler des taches que j'ai réalisé au cours de ces trois mois. Cet article fait office de témoignage.

Pour mieux organiser mes propos, j'ai décider de fragmenter cet article en trois grandes parties. En premier lieu je vais vous parler du contexte du projet. En second lieu je mettrai l'accent sur la première tache qui m'a été assignée(aussi bien côté fonctionnel que technique) puis enfin je reviendrai sur les difficultés que j'ai rencontré lors de mon stage.

En quelques mots

Pour résumer en quelques mots les conditions, je fus affecté au service stsi(socle technique du système d'information)dans une équipe de 5 développeurs . J'ai travaillé exclusivement sur Angular 5 (partie frontend côté client).Quand je suis arrivé, je n'avais aucune connaissances en Angular sinon très primaires, donc je pense que ce stage m'a vraiment permise d'apprendre un langage qui m'étais inconnu puis de développer mes connaissances en html/css puisque le typescript interagit dynamiquement avec l'html.

Dernière petite information avant d'attaquer, pour coder en Angular j'ai utilisé visual studio Code qui je trouve est a la fois facile d'utilisation et de compréhension.

Note: Si vous voulez plus de détail sur Angular 5 et quelques bonnes pratiques je vous invite à consulter mon article 3 bonnes pratiques d'Angular CLI

Contexte du Projets

• Je vous présente ci-dessous quelques fonctionnalité du projet STSI ainsi que les besoins associés à chacune de ces fonctionnalités:

Le but de ce projet est de ce diriger progressivement vers un système d'information maîtrisé comme vous pouvez le voir ci-dessous:

• Au début, on a ce qu'on appelle un plat de spaghetti, c'est à dire qu'il y a un très haut niveau de couplage des applications entre elles. C'est à dire que si nous devons faire une modification sur une application, il y aura beaucoup d'impact.

• Au milieu nous avons une approche bus standard orienté donné ou service. Pour information un bus transporte des informations d'une application A vers une application B.

• Enfin le dernier exemple est l'idéal à atteindre puisqu'il s'agit d'une architecture à faible niveau de couplage. Ce système est très souple puisqu'il n'y a qu'un seul point de terminaison pour toutes les applications productrices et consommatrices aussi bien frontend que backend.

Enfin, voici l'ensemble des fonctionnalité de la platformes des échanges.

C'est sur cette plateforme des échanges que l'équipe dans laquelle je suis développe. Il y a beaucoup de fonctionnalités que je ne pourrais expliquer pour l'instant car il s'agit de logiques pour l'instant trop complexes pour moi. Cependant, j'expliquerais deux briques de ce schéma par la suite puisque ce sont les briques du projet que j'ai pus construire. En effet j'ai travaillé sur le Monitoring de l'infra distrib avec la création d'un outil de gestion des channels(j'y viens juste après) et sur l'IHM du Moteur de règle( j'y consacre tout un article pour le voir cliquez ici).

Outil de gestion des channels

Ma première tâche consista à créer une page qui contenaient plusieurs vues afin de s'occuper de la gestion des channels(je reviendrai plus tard sur ce qu'est réellement un channel).

Qu'est ce que c'est un channel?

Pour résumer en quelques lignes et simplement ce qu'est un channel, c'est une file d'attente. Je m'explique tout de suite. Une application A veut envoyer des messages à une application B. Elle va empiler ses messages dans une sorte de panier pour que l'application B n'ai qu'à piocher dans ce panier et consommer les messages quand elle en a besoin. C'est ce qu'on appelle une opération asynchrone ou fil de l'eau puisque ce n'est pas simultané. Bref ce "panier" c'est ce qu'on appelle un channel. J'espère avoir été claire dans mes propos.

Sur un plan Fonctionnel

Sur un plan fonctionnel, l'utilisateur devait pouvoir voir la liste entière des channels, puis pouvoir en sélectionner une pour soit voir le détail du channel, soit l'activer ou le désactiver, supprimer les messages existants dessus(qui sont sous format JSON) et enfin supprimer le channel. Je devais en somme créer un outil de gestion des channels. Il ne devait pas être possible d'ajouter n'y d'éditer un channel(changer le nom du channel et ajouter des messages dessus).

Sur un plan technique

Comme je l'ai dis au début de ce post j'ai travaillé exclusivement sous Angular 5. J'ai donc pus me servir du gros avantage que possède Angular c'est à dire Les composants. Dans un premier temps, j'ai commencé par créer une branche qui partait de la branche develop du projet que j'ai appelé feature/channel . A la racine app du projet j'y ai créé un nouveau dossier que j'ai appelé channel et dans lequel j'ai créé en tout 5 composants. Je vous présente la structure de mes fichiers ci-dessous:

En plus des composants vous remarquerez qu'il y a trois fichier .ts à la racine dossier channel.

1.channel.service.ts

Ce fichier m'a servie à récupérer, à poster ou à supprimer une information sur une ou plusieurs channel(s) côté backend. Par exemple la fonction getAllChannels() que vous voyez ci-dessous me permet de récupérer toutes les channels qui sont stockées côté backend à l'aide d'une url qui m'a été donnée.

2.channel.module.ts

C'est ici que j'importe tous les modules dont j'ai besoin et que j'ai créée.

3.channel.route.ts

C'est dans ce fichier que l'on va pouvoir créer nos routes qui vont nous servir à naviguer d'une vues à une autre.

Pour plus d'information je vous conseille vivement de visiter ce tutoriel très complet en Angular 5 Tour of Heroes.

• Le premier composant dont je me suis occupé est le channel-main, c'est dans le fichier html de ce composant que nous allons appeler tout nos composants du fichier channel. Il contient toute les vues que l'ont va afficher ainsi que le "header" de la page( la barre de recherche et le bouton nettoyer le cache). En d'autres terme c'est en quelque sorte le conteneur de notre page.

Ensuite je me suis attaquée à l'affichage de la liste des channels qui se gérait dans le composant channel-list. Je n'ai affiché que le nom du channel ainsi que son état( si il était actif ou inactif). Pour récupérer la liste entière j'ai fais appel à une fonction du channel.service.ts getAllChannels() qui fait appel utilise la methode get avec l'url router à laquelle on ajoute "/channels"

Puis je me suis attaqué à la gestion des vues lorsqu'un channel était sélectionné. Il s'agit de la vue qui s'affiche sur la photo ci-dessus. Pour cela j'ai créé un composant que j'ai appelé channel-crud. CRUD signifie, create, read, update et delete. Je n'ai développé que deux fonctionnalités d'un CRUD, le read et le delete car comme je l'ai expliqué plus tôt pour des questions fonctionnelles il ne devait pas être possible d'ajouter et de modifier un channel via cette IHM. Dans le channel-crud.component.ts j'ai récupéré le channel selectionné avec la commande ci-dessous.

Puis, dans le fichier channel-crud.component.html j'ai affiché les composants que je devais afficher en fonction de la valeur de la variable mode. Par défaut le mode='view' pour voir le détail d'un channel. Donc si il n'y a pas de channel sélectionné, il vous sera demandé d'en sélectionner un. Je pense qu'une image de l'IHM et un peu de code seront plus parlants.

Dans ce composant channel-crud vous aurez surement remarqué que j'y ai mis deux autres composant view et del. L'un permet de voir les détails d'un channel, permet de le démarrer ou de l’arrêter ou de le supprimer comme ci-dessous:

photo

On récupère le détail d'un channel grâce a la méthode getChannel(nom du channel)

du fichier service qu'on appelle dans channel-list.component.ts chaque fois que l'utilisateur clique sur une ligne de la liste des channels qui prends en paramètre le nom du channel.Puis, on fait appel a la méthode get avec l'url router à laquelle on ajoute "channels/{{nom du channel}}". Pareil pour activer et désactiver une channel sauf que cette fois ci on utilise une méthode PUT avec "/channels/start(stop)" en paramètre le nom du channel.

Exemple:

getChannel(channel: any){

this.http.httpGet(this.channelServiceUrl+'/'+ channel.name)

.map(res => res.json())

.subscribe(

data=>{

this._channelSelected.next(data)

this.mode='view'

}

}

Laissez moi expliquer le code ci-dessus: la methode map sert tout simplement à convertir ce qui nous à été reçu en json(). La methode subscribe va nous permettre de récupérer les données converties en json et maintenant nous n'avons plus qu'à les assigner à la variable _channelSelected qui est un Observable(c'est une sorte de listener) d'un model que j'ai crée s'appelant ChannelModel que j'ai stocké dans un dossier models lui même présent dans le dans le dossier core-app que je vous montre ci-dessous.

Le contenu de l'autre composant ne s'affiche que si vous avez appuyé sur le bouton Supprimer mentionné un peut plus haut et demande si vous confirmez la suppression ou si vous voulez annulé. Dans le premier cas on appellera la fonction delChannel(name) du fichier service qui prends en paramètre le nom du channel, puis on fait appel a la méthode delete avec l'url router à laquelle on ajoute "/channels/{{nom du channel}}".

Petit plus: Pour faciliter la lecture des messages qui je le rappelle sont sous format json j'ai installé deux composants: angular-jsoneditor et jsoneditor.

Si vous souhaitez les installer et obtenir quelque chose comme ci-dessus, vous n'avez qu'à saisir dans le terminal npm install angular-jsoneditor --save et la même chose avec json editor. N'oubliez pas de l'ajouter dans votre fichier module.ts! Il ne vous reste plus qu'à aller dans la page html de votre composant et saisir ceci:

<json-editor [options]="editorOptions"[data]="yourJsonObject"></json-editor>

Puis dans le fichier .ts de votre composant saisir ceci:

import {JsonEditorOptions, JsonEditorComponent} from 'ang-jsoneditor'

export class ViewComponent{

public editorOptions : JsonEditorOptions;

@ViewChild(JsonEditorComponent) editor: JsonEditorComponent;

constructor(){

this.editorOptions = new JsonEditorOptions()

this.editorOptions.modes= ['code' , 'text' ,'tree' ,'view' ]

}

}

De plus, j'ai dut gérer l'agrandissement des vues de tout le portail d'administration en plus de celles de la page des gestions des channels et les notifications lors de l'import/export des applications/flux.

Difficultés rencontrées

Au début de mon stage j'admets avoir eu beaucoup de difficulté à m'adapter à ce nouveau langage qu'était Angular 5 pour moi. Je ne comprenais pas comment faire interagir l'html avec le fichier typescript d'un composant. Il a fallut quelques semaines pour me former. Je pense que la partie la plus dure à comprendre fut la notion d'Observable et de Subscribers que j'ai dut utiliser notamment pour la sélection d'un channel.

code.

Dès le début du stage j'ai été affecté à cette tâche. Comme j'avais beaucoup de mal à m'en sortir, j'ai dût faire plusieurs tutoriels. J'ai effectué beaucoup de recherche sur internet. Donc je pense que ce stage m'a vraiment aidé à plus cibler mes recherches sur internet car avant mes mots clés étaient moins bons, moins ciblés, j'avais plus de mal à trouver ce que je recherchais à cause de mes mots clés. Cependant, je pense que mes plus grosses difficultés ce sont situés et ce situent encore, puisque je n'ai pas fini mon stage, sur le Moteur de règle mais ce sera l'objet d'un autre article. Pour accéder à l'article sur le moteur de règle cliquez ici.

Au final je pense ne pouvoir retirer que des expériences positives de ce stage puisqu'il m'a été très instructif. J'ai put travailler sur des sujets qui ont été très difficiles pour moi, qui m'ont parfois forcé à des heures de recherches, des dizaines de brouillons mais au final j'ai vraiment gagné en autonomie et j'en suis contente.