ARCHITECTURE DASHBOARD MOODECX

Pour cette première page, nous avons décidé de suivre minutieusement les lignes directrices instaurées par le template Ng2-Admin en fractionnant le component dashboard en plusieurs ‘sous’ components. En effet, le template Ng2-Admin suggère que chaque élément graphique constitue en component :

Figure 21 : Intégration du template à Dashboard MOODECx

Source : Adapté par l’auteur à partir du développement (draw.io)

Le component dashboard.component.ts fait en quelque sorte office de container principal et est fractionné en quatre ‘sous’ components :

• pieChart.component.ts • userMap.component.ts • trafficChart.component.ts • chartistJs.component.ts

Chaque component est répertorié dans un dossier et celui-ci héberge les fichiers propres au component, soit :

• Le component lui-même (exemple : pieChart.component.ts) qui implémente en quelque sorte la logique métier. Cette classe contient le decorator @Component qui informe le Framework que nous avons créé un nouveau component. Les différents arguments passés au decorator @Component sont les metadata du component. En d’autres mots, ce décorateur fournit les informations nécessaires au Framework Angular pour faire

fonctionner la classe. À l’intérieur de ce décorateur nous trouvons : selector qui crée une instance du component quand le tag html correspondant est mentionné dans le fichier html parent, soit dans notre projet la classe dashboard.html, templateUrl qui correspond au rendu visuel du component, styleUrls qui mentionne la feuille de style utilisée pour la présentation du component, les différents providers, soit les classes de services utilisées à l’intérieur du component.

@Component({ selector: 'pie-chart',

templateUrl: './pieChart.html', styleUrls: ['./pieChart.scss'],

providers : [LearningLockerService, PieChartService] })

• Le fichier index.ts exporte le contenu du package pour permettre l’importation du component dans sa totalité au sein d’autres components.

• Le fichier .html mentionné par l’élément templateUrl du décorateur. Il s’agit de la vue qui dispose les différents éléments du component. Cette vue accède à la classe .component et permet le Data binding soit la synchronisation entre la vue et le modèle.

<div class="row pie-charts">

<ba-card *ngFor="let chart of charts" class="pie-chart-item-container col-md-6"> <div class="pie-chart-item">

<div class="description">

<div translate>{{ chart.description }}</div>

<div class="description-stats metric">{{chart.stats}}</div> </div>

<i class="{{chart.icon}}" aria-hidden="true"></i> </div>

</ba-card> </div>

• Le fichier .scss mentionné par l’élément styleUrls du décorateur qui décrit la présentation, soit le style des éléments.

• La classe de service (exemple : pieChart.service.ts) dans laquelle nous élaborons les différentes requêtes d’accès aux données. Le résultat est ensuite retourné au component qui procèdera aux différents traitements.

Figure 22 : Structure et fichiers d'un package contenant un Component

Le component dashboard.component.ts faisant office de container principal nécessite quelques fichiers supplémentaires :

• Le module dashboard.module.ts : cette classe est très importante car elle contient le décorateur @NgModule. Ce dernier liste les imports, les declarations qui consistent en la liste des différents ‘sous’ components contenu dans le component dashboard, ainsi que les providers définissant les différentes classes de service de chacun des components qui dans notre projet correspondent aux classes contenant les différentes requêtes http.

• Le routing dashboard.routing.ts qui, comme son nom l’indique, s’occupe du routage soit des redirections des différentes pages de l’application.

La vue dashboard.html organise les différentes vues des ‘sous’ components au sein de la page principale suivant les différents selector de chaque component.

<div class="row">

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12"> <pie-chart></pie-chart>

</div> </div>

<div class="row">

<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"

title="Provenance des utilisateurs" baCardClass="medium-card"> <users-map></users-map>

</ba-card>

<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-12"

title="Nombre de comptes actuels par Continent" baCardClass="traffic-panel medium-card"> <traffic-chart></traffic-chart>

</ba-card> </div>

<chartist-js></chartist-js>

De plus, nous avons décidé de créer une classe dédiée à la connexion appelée learningLockerService.ts à l’intérieur de laquelle nous construisons un objet headers contenant les autorisations nécessaires :

private authenticationService = "Basic Auth" ; private headers = new Headers(

{ 'Authorization': 'Basic ' + this.authenticationService, 'x-experience-api-version' : "1.0.1"

});

private options = new RequestOptions({ headers: this.headers });

Grâce à l’outil Postman, nous pouvons générer avec le nom d’utilisateur et le mot de passe du LRS, la ‘Basic Auth’ nécessaire aux différentes requêtes pour atteindre le LRS. Le module HttpModule d’Angular permet d’envoyer des requêtes vers une API par le biais du protocole HTTP. Pour cette raison nous procédons à l’import de ce module dans la classe learningLockerService.ts :

C’est ce module qui offre la possibilité de créer les différents objets nécessaires aux requêtes, dont l’objet RequestOptions qui reçoit en argument l’objet headers précédemment créé.

Figure 23 : Intégration et arborescence de la page Dashboard MOODECx dans Ng2-Admin

Source : capture d’écran projet Module de pilotage MOODECx – Dashboard MOODECx

Figure 24 : Capture d'écran Dashboard MOODECx