Les articles de c2i.fr

Angular : Ajouter un bouton d'installation pour votre application PWA

Fri, 19 Oct 2018 12:28:48 GMT

Quand vous créez une application web PWA, sous Android, quand Chrome charge votre application, il vous propose automatiquement de l'installer.

Il faut savoir que ce comportement par défaut va changer : ils ont en effet trouvé que c'était trop intrusif, qu'on ne laissait pas le choix à l'utilisateur de faire cette installation quand il le voulait.

De plus, si l'utilisateur était en train de faire quelquechose dans l'application, il y a de fortes chances pour qu'il envoit bouler ce "pop-up" et moralité, l'application n'était pas installée.

Avec Chrome 70 et Windows 10, le comportement est de ne pas proposer ce pop-up d'installation.

L'utilisateur a toujours la possibilité d'installer l'application en allant dans le menu de Chrome puis en cliquant sur "Installer xxx...". Mais bon, il y a 99.9% de chances que Mme Michu ne fasse jamais cette action. D'ailleurs, à part le développeur de l'application, je ne vois pas qui le ferait.

Créer un bouton Installer l'application

L'idée est donc plutôt de proposer un bouton Installer l'application. Plusieurs avantages :

L'utilisateur saura que l'application est "installable",
L'utilisateur choisira le moment de cette installation.

Respect de l'utilisateur tout en poussant ce dernier à installer son application fétiche.

Côté UI, c'est simple : j'ajoute un bouton/lien qui n'est visible que si l'application est "installable" (ie bien formée selon les critères PWA et pas déjà installée). Quand on clique dessus, j'appelerais une méthode qui effectuera cette installation :

<a mat-list-item (click)='installApp()' *ngIf='showInstallButton'>
<mat-icon mat-list-icon fontSet='fas' fontIcon='fa-download'></mat-icon>
<div mat-line>Installer l'application</div>
</a>

showInstallButton est une variable de mon composant de type boolean par défaut égal à false.

Maintenant ATTENTION : le code qui suit n'est valable que pour Chrome 45+ sous Android et Windows 10. C'est une "non-standard feature" !

Si le navigateur (en l'occurence Chrome) détecte que votre application est une application PWA valide (manifeste + service worker + icones qu'il faut), il déclenchera l'évènement de l'object window BeforeInstallPromptEvent. Cet évènement signifie : "je vais afficher la boite de dialogue pour installer l'application. Je la montre pour de vrai ou pas ?"

Ce que l'on va faire, puisqu'on ne veut pas déranger l'utilisateur dans sa lecture du site, c'est de différer notre réponse. Donc on sauvegarde pour répondre plus tard et on affiche alors le bouton Installer l'application.

Dans notre composant Angular, il faut donc s'abonner à cet évènement, ce que l'on fait grâce au décorateur HostListener :

@HostListener('window:beforeinstallprompt', ['$event'])
onBeforeinstallprompt(ev) {
ev.preventDefault();
// on affiche le bouton install
this.showInstallButton = true;
// on "stocke" le prompt.
this.deferredPrompt = ev;
}

Puis quand l'utilisateur a enfin décider d'installer l'application, c'est à dire quand il a cliqué sur notre bouton, on continue la procédure d'installation :

installApp() {
// on affiche la boite de dialogue : installer l'application
this.deferredPrompt.prompt();

// selon la réponse de l'utilisateur
this.deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('Youpi, notre appli est installée');
} else {
console.log('Arg, il en veut pas !');
this.showInstallButton = false;
}
// la madame elle fait le ménache
this.deferredPrompt = null;
});
}

That's all !

De Angular 6 à Angular 7

Fri, 19 Oct 2018 09:31:23 GMT

Angular 7 vient juste d'être disponible, nous allons donc tester si la migration se passe sans douleurs.

Bien entendu, je partirai d'une application Angular 6 qui a été développé à partir d'Angular CLI (cela devient du suicide de faire autrement aujourd'hui).

NB : la doc d'angular/cli - qui était quasi inexistante - fait partie maintenant du site officiel d'angular : https://angular.io/cli

C'est une application moyennement complexe, qui utilise @angular/material et @angular/flex-layout pour l'UI.

Il s'agit de https://www.gs-tennis.com, l'application qui permet de gérer les matchs par équipe de son club de tennis, application développée en collaboration avec la FFT.

La première étape est simple, juste lancer un script angular/cli :

ng update @angular/cli @angular/core

Résultat : il me modifie mon fichier package.json et met à jour tout ce qui fait partie du framework angular comme le montre la capture ci-dessous (remarquez que l'on passe en Typescript 3.1.3, bonne nouvelle ;-)) :

J'essaye alors une compilation : arg! j'ai des erreurs et elles proviennent de angular/flex-layout.

J'en profite donc pour mettre à jour les autres packages que ceux du framework Angular. Un :

npm outdated

me permet de lister les packages qui sont "périmés".

ATTENTION : n'essayez pas de mettre à jour tous vos packages d'un seul coup, il est préférable de le faire progressivement pour s'assurer de la compatibilité.

Je vais donc dans un premier temps mettre à jour uniquement material et flex-layout.

"@angular/cdk": "^7.0.0",
"@angular/material": "^7.0.0",
"@angular/flex-layout": "^7.0.0-beta.19",

Suivi d'un :

npm update

ou vous pouvez faire également un :

ng update @angular/material

ng update @angular/cdk

ng update @angular/flex-layout

Je peux donc maintenant réessayer de compiler, et cette fois, cela fonctionne.

Je n'ai plus qu'à faire la mise à jour des packages qui me restent. Je pense notamment aux packages suivant (présents dans tous les projets cli et source de warning de sécurité avec npm) :

"@angular-devkit/build-angular": "^0.10.1",
"@types/node": "~8.9.4",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.4",
"karma-jasmine-html-reporter": "^1.3.1",
"ts-node": "~7.0.1",

Quid du résultat côté taille des fichiers générés ?

Je ne dirais pas que mon test est représentatif mais j'ai des fichiers qui sont légèrement plus imposants (sans doute parce que @angular/material devient plus important).

Conclusion

Le passage à Angular 7 s'est passé sans douleur pour ma part (ce qui n'était pas le cas entre la 5 et la 6 avec la migration de rxjs).

Pour des projets dits professionnels, je vais encore attendre quelques semaines mais cela semble prometteur.

Quelques petites remarques avant de partir...

Vous aurez remarqué que pour la sortie de cette version 7, l'équipe d'Angular communique non seulement sur les mises à jour du framework mais sur @angular/material et @angular/cdk et ses nouveaux composants (NB : pour le nouveau compilateur ivy, faudra attendre encore un peu).

On sent qu'ils poussent Material de façon intensive.

Déjà la 7 mais la 6 vient à peine de sortir ?!!! Je vous rassure, c'est juste une phylosophie de numérotation qui est propre à Google (Chrome en est à la v70).

Maintenant la question est : pensez-vous que 4.7.2.12568 est plus lisible que 7 ? Faut juste changer ses habitudes ;-)

Flex-Layout est toujours en beta ! Je m'interroge un peu sur ce package ou il n'y a pas grand monde de mobilisé dessus (1 pers chez Google ?). La réponse a ce qu'il soit toujours en beta est que toutes les fonctionnalités imaginées pour ce package ne sont pas encore implémentées.

Ok, mais allez-dire à votre chef de projet que vous voulez utiliser un package en beta et vous verrez sa réponse !!!

De plus, rien qu'à voir comment sont gérés les branches et les tags sur ce package, et on a l'impression qu'onb a affaire un un gars qui a très froid et qui utilisent des moufles. Je dis ca, je dis rien...

Dommage car ce package était vraiment prometteur.

Comment installer votre application web PWA sous Windows 10

Thu, 18 Oct 2018 08:36:56 GMT

C'est une des grande nouveauté de Chrome 70 : votre application web PWA peut maintenant être installée sous Windows 10 comme si c'était une application "native".

La première étape est bien entendu d'installer Chrome 70.

Ensuite, avec Chrome, rendez-vous sur le site de votre application PWA. Par exemple sur https://www.myTjm.fr.

Allez dans le menu de Chrome :

Cliquez sur Installer myTjm et confirmer que vous voulez bien l'installer.

Aussitôt, votre application est rechargée dans une fenêtre "native" :

Cool non ? Plus la peine de passer par le store ;-)

Si vous voulez la désinstaller, lancer l'application et dans le menu en haut à droite, vous avez l'option Désinstaller :

Bon, il reste un petit problème avec les icônes dans le menu démarrer mais cela va certainement se corriger bientôt. Dans la liste des applis, l'icône est correcte mais pas quand on l'ajoute comme tuile. Peut être est-ce mon manifeste qui ne contient pas les images qu'il faut pour WIndows 10.

Donc maintenant, dès que vous avez une application PWA, vous pouvez "l'installer" sous Windows 10.

Angular Material : Créer une Business Data Table

Thu, 11 Oct 2018 13:16:16 GMT

L'un des contrôles le plus demandé dans tout développement dit "Business", c'est la gestion d'une DataGrid.

Si vous faites une recherche sur Google (ou Bing ? ;-)), vous verrez qu'il y a pas mal de composant payant/gratuit. Si vous voulez voir une liste des 10 meilleures DataTable selon NgDevelop, consultez cet article.

Et c'est toujours pareil avec des composants extérieurs, ils sont prévus pour faire un maximum de chose (c'est même leur argument de vente) mais on tombe toujours sur LA fonctionnalité qu'on doit iméprativement utiliser qui n'existe pas dans le composant que vous avez choisi.

De plus, j'ai tendance à limiter au maximum mes dépendences à des composants extérieurs. Sauf pour les gros éditeurs (et encore), on n'est jamais sur du suivi et de la pérénnité de leurs développements.

Enfin, par principe, qui ne se discute pas parce que c'est moi le chef, dès qu'il y a une dépendence à jQuery, j'élimine le bousin. (je sais, ce n'est pas rationnel mais c'est comme ça).

NB : ce code est disponible sur Github.

Tout ce préambule pour vous dire que l'on va voir comment créer une DataGrid dite "Business" à partir de la DataTable d'Angular Material.

Le cahier des charges est le suivant. Elle doit :

Supporter des données très importantes,
Permettre d'éditer en ligne les données,
Trier les données selon une colonne,
Paginer les données,
Ajouter des données.

Dans un premier temps nous allons voir comment créer les apis côté serveur pour satisfaire nos besoins avec une application ASP .NET WebApi (pas .NET Core, .NET "normal") puis nous verrons le code de l'application Angular cliente.

L'application Serveur

Pour permettre la pagination de nos données, nos apis REST doivent pouvoir fournir les données paginées (étonnant non ?) avec une information complémentaire qui est le nombre total de données. La méthode Get de notre api doit donc avoir comme paramètres :

l'index de la page,
la taille d'une page,
le nom de la colonne de tri,
l'ordre du tri (ascendant ou descendant).

Ce qui donne une URL du type :

http://localhost:10614/api/persons?pageIndex=0&pageSize=5&sortColumn=lastName&sortDirection=desc

Qui retournera les données en json :

{
  "items": [
    {
      "id": 5,
      "firstName": "Eric",
      "lastName": "Verre",
      "age": 35
    },
    {
      "id": 11,
      "firstName": "Isabelle",
      "lastName": "Routin",
      "age": 74
    },
    {
      "id": 1014,
      "firstName": "Richard",
      "lastName": "Richard",
      "age": 20
    },
    {
      "id": 6,
      "firstName": "Jean",
      "lastName": "Renee",
      "age": 35
    },
    {
      "id": 3,
      "firstName": "Jean",
      "lastName": "Rene",
      "age": 34
    }
  ],
  "count": 12
}

Pour faire cela, on a besoin dans un premier temps d'une classe qui représente ces données. On va faire donc une classe générique valable pour tout type de données :

    public class PaginationResult<T> where T : class
    {
        public PaginationResult(int count, IEnumerable<T> items)
        {
            Count = count;
            Items = items;
        }
        public IEnumerable<T> Items { get; set; }
        public int Count { get; set; }
    }

Nous devons donc requêter notre base de données en paginant les données. Avec SQL Server, le code Transact SQL sera donc :

SELECT Count(*) FROM Persons;
SELECT * FROM Persons 
                ORDER BY lastName asc 
                OFFSET 0 
                ROWS FETCH NEXT 5 
                ROWS ONLY;

On voit ici que l'on exécute 2 requêtes SQL en même temps. La première retourne le nombre de données de la table, la second les données de la page 0 avec 5 éléments. L'Offset correspond au nombre de ligne que l'on souhaite "sauter", et Next le nombre de ligne.

Pour la page 3, on aura :

SELECT Count(*) FROM Persons;
SELECT * FROM Persons 
                ORDER BY lastName asc 
                OFFSET 10 
                ROWS FETCH NEXT 5 
                ROWS ONLY;

Pour exécuter cette requête, j'ai choisi l'excellent ORM Dapper (light et performant) avec le code suivant :

        public PaginationResult<Person> LoadPagedAll(
              int pageIndex,
              int pageSize, 
              string sortColumn = "LastName", 
              string sortDirection = "Asc")
        {          
            var sql = $"SELECT Count(*) FROM Persons;" ;
            sql += $"SELECT * FROM Persons ";


            sql += GetPaginationQuery(pageIndex, pageSize, sortColumn, sortDirection);

            using (var connection = new SqlConnection(ConnectionString))
            {

                using (var multi = connection.QueryMultiple(sql))
                {
                    var numbers = multi.Read<int>().First();
                    var persons = multi.Read<Person>();
                    return new PaginationResult<Person>(numbers, persons);
                }
            }
        }

protected override IEnumerable<string> AllowedSortColumns => new[] {"FIRSTNAME", "LASTNAME", "AGE"};

Dapper permet simplement d'exécuter 2 requêtes à la fois pour remplir notre object PaginationResult<Person>. La méthode GetPaginationQuery permet d'ajouter dans notre requête SQL les éléments de pagination :

        protected string GetPaginationQuery(int pageIndex, int pageSize, string sortColumn, string sortDirection)
        {
            if (!AllowedSortColumns.Contains(sortColumn, StringComparer.InvariantCultureIgnoreCase))
                throw new ArgumentException("Not allowed columns", nameof(sortColumn));
            if (!_sortDirections.Contains(sortDirection, StringComparer.InvariantCultureIgnoreCase))
                throw new ArgumentException("Invalid sort direction", nameof(sortDirection));


            return $@"
                ORDER BY {sortColumn} {sortDirection} 
                OFFSET {pageIndex * pageSize} 
                ROWS FETCH NEXT {pageSize} 
                ROWS ONLY;";
        }

Remarquez que je laisse au repository le choix des colonnes ou l'on a le droit d'effectuer un tri pour des raisons d'optimisation. Laissez la possibilité au code client de trier sur n'importe quelle colonne est la porte ouverte à des pertes de performances évidentes. Il faut toujours imaginer que l'on a des tables contenant plusieurs millions d'enregistrement, et le tri ne peut s'effectuer que sur des colonnes prévus pour (avec les index dans SQL server qu'il faut).

De ce fait, le code de notre api REST est tout simple :

        public PaginationResult<Person> Get(
           int pageIndex, 
           int pageSize, 
           string sortColumn = "LastName", 
           string sortDirection = "Asc")
        {
            return _personsRepositoy.LoadPagedAll(pageIndex, pageSize, sortColumn, sortDirection);
        }

Si le code client essaye de trier sur une colonne non optimisée, on aura une exception.

Les autres codes de notre api sont triviaux, je ne vous ferais pas l'affront de le détailler ici (voyez le code par vous même).

Notre code côté serveur est donc terminé, il n'y a plus qu'à le consommer côté client.

Angular Material : DataTable

Notre application cliente repose sur le framework Angular avec comme complément, le package @angular/material. Le plus simple pour l'ajouter est d'utiliser la commande d'angular/cli :

ng add @angular/material

La DataTable d'Angular Material est basée sur la CdkTable. Si vous venez comme moi du monde XAML, vous ne serez pas trop dépayser. Le principe est que vous devez définir un template pour chaque colonne que vous voulez afficher.

Dans ce template, vous pouvez définir l'aspect de 3 zones :

L'en-tête de la colonne,
Le contenu de chaque cellule de la colonne,
Le pied de la colonne.

Par exemple :

<table mat-table mat-table [dataSource]="dataSource" >
    <!-- firtName column-->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef> First Name </th>
      <td mat-cell *matCellDef="let person">
        <div>{{person.firstName}}</div>
      </td>
    </ng-container>
...
</table>

Je définie ici une colonne nommée firstName. Dans l'en-tête, j'affiche juste "First Name" et dans chaque cellule, grâce à ma variable person, j'affiche son lastName. Vous voyez qu'ici, je n'ai pas défini de pied pour cette colonne.

Je peux continuer ainsi pour les autres colonnes pour définir les templates que je veux. Il ne me reste plus maintenant qu'à dire quelles sont les colonnes que je veux réellement afficher. On peut définir un template et ne pas l'utiliser. L'intérêt est que la liste des colonnes affichées peut être modifiée par le code. On ajoute donc juste 2 lignes de code :

<table mat-table mat-table [dataSource]="dataSource" >
    <!-- firtName column-->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
      <td mat-cell *matCellDef="let person">
        <div>{{person.firstName}}</div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="['firstName']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['firstName']"></tr>
  </table>
</table>

Il faut maintenant définir notre dataSource, c'est-à-dire la source de nos données. Le CdkTable définie une interface avec juste deux méthodes (connect et disconnect) pour notre source de données. la bonne nouvelle c'est qu'avec la DataTable, on a une implémentation de cette dernière avec la classe MatTableDataSource.

Il nous suffit donc de créer une instance de cette classe :

dataSource = new MatTableDataSource();

Puis grâce à notre service qui appelle notre api REST de lui passer les données à afficher. Avant cela, il nous faut écrire ce service. Il est tout simple :

@Injectable({
  providedIn: 'root'
})
export class PersonsService {

  private url = environment.apiUrl + 'persons';
  constructor(private httpClient: HttpClient) { }

  loadAll(
    pageIndex?: number,
    pageSize?: number,
    sortColumn?: string,
    sortDirection?: string): Observable<IPaginationResult<IPerson>> {
    const params = new HttpParams()
      .set('pageIndex', pageIndex == null ? '0' : pageIndex.toString())
      .set('pageSize', pageSize == null ? '10' : pageSize.toString())
      .set('sortColumn', sortColumn == null ? 'lastName' : sortColumn)
      .set('sortDirection', sortDirection == null ? 'asc' : sortDirection);
    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this.httpClient.get<IPaginationResult<IPerson>>(this.url, { headers: headers, params: params });
  }
}

Avec comme interface de "réception" des données, l'équivalent en TypeScript de notre classe C# PaginationResult<Person> (elle même générique) :

export interface IPaginationResult<T> {
    items: T[];
    count: number;
}

La pagination

Pour la pagination, la DataTable de Angular Material fournit un composant que l'on ajoute sous notre mat-table :

  <table mat-table [dataSource]="dataSource">
    <tr mat-header-row *matHeaderRowDef="['firstName', 'lastName']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['firstName', 'lastName']"></tr>
  </table>
  <mat-paginator [length]='resultLength' [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

On voit que l'on "bind" sa propriété length à la variable resultLength de notre composant. Cette variable correspond à la donnée count du IPaginationResult<Person>.

Le tri

Pour le tri, c'est tout aussi simple : il faut tout d'abord dire que notre mat-table supporte le tri :

<table mat-table mat-table [dataSource]="dataSource" matSort matSortActive="lastName"
    matSortDisableClear matSortDirection="asc">
...
</table>

On indique ici que le tri sera par défaut sur la colonne lastName et de type ascendant. Ensuite, il faut indiquer quelles sont les colonnes ou l'on a le droit d'effectuer un tri. Cela se défini dans le template de la colonne avec la directive mat-sort-header. Par exemple sur la colonne lastName :

<!-- lastName column-->
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
      <td mat-cell *matCellDef="let person">
        <div>{{person.lastName}}</div>
      </td>
    </ng-container>

Voila, la pagination et le tri sont prêts. Il faut maintenant réagir aux évènements correspondants, c'est-à-dire réinterroger le serveur quand on change de page et/ou quand on clique sur l'en-tête d'une colonne triable.

Connexion aux api REST

Pour réagir à ces évènements, on a besoin d'avoir une référence aux composants correspondants de la DataTable, la pagination et le tri :

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

Ces deux composants ont des Observable correspondant au changement de page et au clic sur un en-tête. Dans les 2 cas, on interroge le serveur de la même façon. On va donc combiner ces deux Observable grâce à l'opérateur static merge :

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        switchMap(() => {
          this.isWorking = true;
          return this.loadPersons();
        }),
        tap(data => {
          this.resultLength = data.count;
          this.dataSource.data = data.items;
          this.isWorking = false;
        })
      ).subscribe();

Quand le tri change ou que la page change, on appelle la méthode loadPerson qui nous retourne un IPaginationResult. Il ne nous reste plus qu'à affecter les données reçues à la dataSource et à la variable resultLength (pour la pagination).

  private loadPersons() {
    return this.personsService.loadAll(
      this.paginator.pageIndex,
      this.paginator.pageSize,
      this.sort.active,
      this.sort.direction);
  }

Un petit détail : quand on change le tri, il faut impérativement retourner à la page d'index 0 :

this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

Enfin, je veux dans mon code pouvoir forcer le rechargement des données (notamment quand on va vouloir ajouter un nouvel élément dans la liste). Le plus simple est de créer un nouvel Observable qui sera combiner avec les 2 précédents. Donc on défini cet Observable sous forme d'EventEmitter :

mustReload = new EventEmitter();

Et l'on combine le tout. Dans l'évènement ngAfterViewInit, on a donc le code complet suivant :

  ngAfterViewInit(): void {
    // go back to first page when changing sort
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    // query when changing sort or changing page or manual query
    merge(this.sort.sortChange, this.paginator.page, this.mustReload)
      .pipe(
        switchMap(() => {
          this.isWorking = true;
          return this.loadPersons();
        }),
        tap(data => {
          this.resultLength = data.count;
          this.dataSource.data = data.items;
          this.isWorking = false;
        })
      ).subscribe();
   // first load
    this.mustReload.emit();
  }

NB: ce code est placé dans le ngAfterViewInit et pas ngInit pour que les éléments sort et page soient bien instanciés.

That's it! On pagine, on tri nos données côté serveur.

La sélection

Dans la video ci-dessus, vous voyez que l'on a une colonne qui nous permet de sélectionner une ligne pour l'éditer. On pourrait créer une classe similaire à la classe IPerson en lui ajoutant une propriété IsSelected. mais Angular material a prévu le coup et nous propose une classe SelectionModel<T> qui va le faire pour nous. Cette classe gère une collection d'éléments sélectionné (dans les exemples du SDK, on a toujours la possibilité de faire une sélection multiple). Ici, ce qui nous intéresse c'est de n'avoir qu'un seul élément sélectionnable (celui qu'on édite). On va donc définir notre SelectonModel dans ce sens :

selection = new SelectionModel<IPerson>(false, [], true);

Il n'est pas multi-sélectionnable et ne contient aucun élément sélectionné à l'instanciation. Le dernier paramètre indique que l'on va écouter l'Observable qui indique que la sélection à changée.

On ajoute ensuite une colonne qui nous permettra de sélectionner une ligne :

    <!--select column-->
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
      </th>
      <td mat-cell *matCellDef="let person">
        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(person) : null" [checked]="selection.isSelected(person)">
        </mat-checkbox>
      </td>
    </ng-container>

Cette colonne contient un ckeckbox qui est coché si la personne fait partie de la sélection (selection.isSelected(row)) et qui sélectionne/désélectionne l'élement si on la coche/décoche (selection.toggle(person)).

Mode édition

Maintenant que l'on sait sélectionner une ligne, on va pouvoir passer en mode édition de la ligne. Un premier point important, c'est que l'on doit pouvoir annuler les modifications que l'on a faite. On ne va donc pas travailler sur l'instance originelle de la personne mais sur son clone. Comme on n'a qu'une seule ligne éditable, on va utiliser une variable temporaire de type Person. Quand une personne est ajoutée à notre SelectionModel, on va donc copier l'élément sélectionné dans notre variable editingPerson :

    // copy original datas before editing
    this.selection.onChange
      .pipe(
        filter(v => v.added.length === 1),
        tap(v => this.editingPerson = Object.assign({}, v.added[0]))
      ).subscribe();

A vous de voir si votre objet contient des propriétés plus complexe auquel cas le code de clonage est plus complexe ;-).

Maintenant, à nous de changer les templates de nos colonnes. Par exemple pour la colonne firstName :

    <!-- firstName column-->
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
      <td mat-cell *matCellDef="let person">
        <div *ngIf="!selection.isSelected(person)">{{person.firstName}}</div>
        <mat-form-field *ngIf="selection.isSelected(person)">
          <input matInput [(ngModel)]='editingPerson.firstName'>
        </mat-form-field>
      </td>
    </ng-container>

Si la personne fait partie de la sélection, on affiche l'input, sinon on affiche juste la valeur de la propriété.

Il nous reste plus qu'à ajouter une colonne avec les actions de validation des modifications ou d'annulation :

    <!-- actions column-->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let person">
        <div *ngIf="!selection.isSelected(person)">
          <button mat-icon-button (click)='delete(person.id)'>
            <mat-icon>delete</mat-icon>
          </button>
        </div>
        <div *ngIf="selection.isSelected(person)">
          <button mat-icon-button (click)='save(person)'>
            <mat-icon>done</mat-icon>
          </button>
          <button mat-icon-button (click)="selection.clear(); editingPerson = null;">
            <mat-icon>undo</mat-icon>
          </button>
        </div>
      </td>
    </ng-container>

On affiche un bouton delete quand la ligne n'est pas sélectionnée et un bouton save et cancel quand elle est sélectionnée. Les clics sur les différents boutons désélectionne la ligne ou appelent les méthodes de suppression ou de sauvegarde. Dans les 2 cas, on va forcer le rechargement des données pour afficher le résultat de notre action grâce à notre EventEmitter mustReload :

  delete(id: number) {
    this.isWorking = true;
    this.personsService.delete(id).subscribe(result => {
      this.isWorking = false;
      this.snackBar.open('Person deleted');
      this.selection.clear();
      this.mustReload.emit();
    });
  }

  save(person: IPerson) {
    this.isWorking = true;
    this.personsService.update(this.editingPerson).subscribe(result => {
      this.isWorking = false;
      this.snackBar.open('Person saved');
      this.selection.clear();
      this.mustReload.emit();
    });
  }

Création

Le dernier point concerne l'ajout de la ligne en pied de notre tableau qui permet d'ajouter une Person a notre base de données. Pour cela, je vais ajouter un pied à notre tableau. Mais ce pied, je vais lui demander d'occuper la totalité de notre tableau. C'est possible avec le mat-table car il nous génère des tags HTML de type table. Donc on peut utiliser l'attribut colspan pour les colonnes. On va donc changer le template de la première colonne en y définissant un footer qui occupe la totalité de la table :

    <!--select column-->
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </td>

      <td mat-footer-cell *matFooterCellDef colspan=5 style="padding: 0">
        <app-add-person (personCreated)='personCreated($event)'></app-add-person>
      </td>
    </ng-container>

Dans le footer, je place un nouveau composant (pour une leilleure lisibilité) qui contient le formulaire de création. Ce composant contient toute la logique de création d'une personne (avec l'appel à l'api REST correspond). Le code est "trivial", je ne l'exposerais donc pas ici. Remarquez toutefois qu'il expose un EventEmitter qui nous permet de réagir à la création d'une personne : quand on sauvegarde la nouvelle personne, il faut pouvoir rafraichir le table donc faire de nouveau appel au mustReload.

Conclusion

Cet article est relativement long mais la logique est relativement simple. Il vous permet de créer des DataTable sans dépendences externes supplémentaire, jsute avec le package angular/material.

Bon code !

NB : ce code est disponible sur Github dans la branche NoFilter. La branche master contient en plus la possibilité de filtrer les données selon la colonne lastName.

Créer des tests unitaires avec Angular [Part 3] : Tests d'intégration

Mon, 03 Sep 2018 05:00:14 GMT

Jusqu'à présent, les tests que nous faisions ne prenaient pas en compte le framework Angular. Ils ont l'avantage d'être très rapide mais ne reflettent pas complètement l'environnement dans lequel vos classes/services s'exécuteront.

Cette fois, c'est le Framework Angular qui nous propose un environnement de test qui tiendra compte par exemple de l'injection de dépendance. Il permet également de tester les templates de ses pages comme par exemple si le binding s'effectue correctement. cela nous permettra donc de tester des composants.

Quand vous demandez à Angular CLI de générer un service, une classe, c'est cette approche qui est privilégiée. Par exemple, si vous faites :

ng g s users

le fichier usersService.spec.ts aura l'aspect suivant :

import { TestBed, inject } from '@angular/core/testing';
import { UsersService } from './users.service';

describe('UsersService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [UsersService]
    });
  });

  it('should be created', inject([UsersService], (service: UsersService) => {
    expect(service).toBeTruthy();
  }));
});

Ce code peut également s'écrire de cette façon :

import { UsersService } from './users.service';
import { TestBed } from '@angular/core/testing';

describe('UsersService', () => {

  let usersService: UsersService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [UsersService]
    });

    usersService = TestBed.get(UsersService);
  });

  it('should be created', () => {
    expect(usersService).toBeTruthy();
  });
});

Le premier point est que nous utilisons le TestBed fournit par Angular. Tout comme votre app.Module, on doit lui fournir les informations initiales comme les providers, les imports, etc. Sa méthode get permet de récupérer l'instance d'un service en utilisant le même service d'injection d'Angular. Donc dans le code ci-dessus, le test plantera parce qu'il ne sait pas ce qu'est un HttpClient (qui est dans le constructeur du service. Nous allons lui fournir et comme nous voulons le 'mocker', on va utiliser un utilitaire fournir dans les outils d'Angular, le HttpTestingController :

import { UsersService } from './users.service';
import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { IUser } from '../entities/user';

describe('UsersService', () => {

  let usersService: UsersService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UsersService, HttpTestingController]
    });

    httpTestingController = TestBed.get(HttpTestingController);
    usersService = TestBed.get(UsersService);
  });

  it('should be created', () => {
    expect(usersService).toBeTruthy();
  });
});

Cette fois ci, notre test fonctionne ;-) On teste bien ici que le HttpClient est bien passé en argument dans le constructeur de notre service, bref, on a testé que l'injection fonctionnait bien.

Maintenant, testons comme précédemment si l'appel http est correct, que l'url est correcte :

  it('appel avec la bonne url', () => {
    const user: IUser = { id: 1, firstName: 'Richard', lastName: 'Clark' };

    usersService.getUser(1)
      .subscribe((resp: IUser) => {
        expect(resp).toBe(user);
      });

    const mockRequest = mockHttp.expectOne('https://monSite.fr/api/users/1');
    expect(mockRequest.request.method).toBe('GET');
    mockRequest.flush(user);

    mockHttp.verify();
  });

La méthode expectOne indique qu'elle url doit être appelée. Vous voyez qu'on peut tester également si c'est bien la méthode GET qui est utilisée. flush indique ce qui doit être retournée. On peut aussi spécifier des informations comme les headers. Enfin, verify s'assure qu'il n'y a rien eu d'autres comme appel, autre que ce que l'on a testé.

Dernier petit point intéressant, on peut injecter un service au niveau de la méthode de test. Ainisi, au lieu de déclarer une variable global usersService, on peut le faire grâce à la méthode inject du framework de test d'angular. Le test unitaire complet peut donc ressembler à cela :

import { UsersService } from './users.service';
import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { IUser } from '../entities/user';

describe('UsersService', () => {
  let mockHttp: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UsersService]
    });

    mockHttp = TestBed.get(HttpTestingController);
  });

  it('should be created', inject([UsersService], (service: UsersService) => {
    expect(service).toBeTruthy();
  }));

  it('appel avec la bonne url', inject([UsersService], (service: UsersService) => {
    const user: IUser = { id: 1, firstName: 'Richard', lastName: 'Clark' };

    service.getUser(1)
      .subscribe((resp: IUser) => {
        expect(resp).toBe(user);
      });

    const mockRequest = mockHttp.expectOne('https://monSite.fr/api/users/1');
    expect(mockRequest.request.method).toBe('GET');
    mockRequest.flush(user);

    mockHttp.verify();
  }));
});

Créer des tests unitaires avec Angular [Part 2] : Mocker un service

Thu, 30 Aug 2018 13:09:53 GMT

Dès que l'on fait des tests unitaires, on se retrouve très rapidement face à la problématique des Mocks.

Par définition, un test unitaire ne doit tester qu'une infime partie de votre code. Prenons l'exemple d'une méthode d'un service A utilise une méthode d'un service B qui utilise elle même une méthode d'un service C. Si votre test unitaire plante, vous ne saurez pas si c'est de la faute de A, B ou C.

D'ou l'idée de Mock, c'est-à-dire d'utiliser des objets qui simulent le comportement d'objets tiers. Prenons un exemple concret avec un service Angular qui retourne un IUser d'une requête Http :

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  constructor(private httpClient: HttpClient) { }

  getUser(id: number): Observable<IUser> {
    const url = environment.apiUrl + 'users/' + id;
    return this.httpClient.get<IUser>(url);
  }
}

Si l'on veut tester cette méthode, il n'est pas question de faire un vrai appel Http vers notre api. Pour peu de le site ne soit pas disponible, notre test unitaire planterait même si le code est valide, ce qui est contraire au principe des tests unitaires.

La bonne nouvelle c'est que jasmine nous permet de créer des espions, des mocks assez facilement avec la méthode createSpyObj :

httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);

Le premier argument est le nom de l'objet que l'on veut mocker, le second la liste des méthodes que l'on veut gérer. Ensuite, on doit définir le comportement de cette méthode. Pour notre test, on se moque (ah, ah ah) de ce qu'elle retourne. Ce qui nous importe c'est que l'api soit appelée avec la bonne url :

httpClientSpy.get.and.returnValue(of(jasmine.any('IUser')));

Il ne nous reste plus qu'à appeler la méthode de notre service :

usersService.getUser(1).subscribe(result => {
      expect(httpClientSpy.get).toHaveBeenCalledWith('https://monSite.fr/api/users/1');
    });

Quand on appele la méthode getUser avec le paramètre 1, on veut être sur que le service HttpClient appele l'url https://monSite.fr/users/1. Notre test unitaire complet est donc le suivant :

import { UsersService } from './users.service';
import { of } from 'rxjs';

describe('UsersService', () => {
  let usersService: UsersService;
  let httpClientSpy: { get: jasmine.Spy };

  beforeEach(() => {
    httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
    usersService = new UsersService(<any>httpClientSpy);
  });

  it('appel avec la bonne url', () => {
    httpClientSpy.get.and.returnValue(of(jasmine.any('IUser')));
    usersService.getUser(1).subscribe(result => {
      expect(httpClientSpy.get).toHaveBeenCalledWith('https://monSite.fr/api/users/1');
    });
  });
});

Créer des tests unitaires avec Angular

Wed, 29 Aug 2018 15:31:00 GMT

Je suppose que comme tout le monde, vous faites des tests unitaires de votre application... Non ? ;-)

Bref, nous allons voir ici comment créer des tests unitaires simples avec Angular/AngularCLI/Karma/Jasmine.

Quand on crée une application avec Angular CLI, la bonne nouvelle, c'est qu'il met en place tout le paramétrage pour tester votre application. Vous pouvez le voir dans le fichier package.json ou il vous ajoute les références aux packages NPM pour karma, jasmine et tout un tas d'autres trrucs du même genre :

    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",

Ainsi que les types pour bénéficier de l'intellisense :

    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",

Karma est le moteur qui permet de lancer les tests dans un vrai navigateur (ici, Chrome, cf karma-chrome-launcher), le test runner (développé par l'équipe d'AngularJS). Jasmine est lui le framework de test à proprement parlé.

Vos tests unitaires (et vos tests d'intégration), vous devrez les écrire dans un fichier dont le nom devra se terminer par .spec.ts. Dès que le moteur détecte un fichier de ce genre, il l'intègre dans l'ensemble des tests.

Vos tests seront exécutés dans le navigateur (et pas une émulation quelconque) afin de s'assurer que dans la vraie vie, vos tests correspondront bien à ce que l'on attend.

Pour commencer, créons une nouvelle application avec Angular CLI :

ng new myApp

Puis, pour simplifier, supprimez le fichier app.component.spec.ts (on verra cela un peu plus tard).

Enfin, créez un nouveau service super compliqué, CalculatorService :

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CalculatorService {

  constructor() { }

  add(a: number, b: number) {
    return a + b;
  }

  lowerOrZero(numbers: number[]) {
    if (numbers == null) { return 0; }
    if (numbers.length === 0) { return 0; }

    const result = Math.min(...numbers);
    return result < 0 ? 0 : result;
  }
}

C'est le service de la mort qui tue !

Notre premier test unitaire

Ajoutons un fichier de test nommé calculator.service.spec.ts. Tout test unitaire se décompose en trois actes AAA : Arrange, Act, Assert.

Dans Arrange, nous préparons notre test.

Dans Act nos exécutons le test.

Dans Assert, nous vérifions les résultats du test.

Dans jasmine, cela se traduit par un code qui a la structure suivante :

describe('Intitulé du test', () => {

  it('Calcul compliqué!', () => {
    // Arrange
    let a = 4;

    // Act
    let result = a * 2;

    // Assert
    expect(result).toBe(8);
  });
});

describe permet de regrouper les tests d'une même nature qui contient chaque it, chaque test unitaire. Ici, dans l'unique test unitaire intitulé 'Calcul compliqué', on définit les paramètres initiaux (a=4), on effectue le test (result = a*2) et on test le résultat avec expect(result).toBe(8). Naturel, intuitif, simple.

Pour exécuter notre test, Angular CLI nous a ajouté la commande qu'il faut, il suffit dans la console de taper :

npm test

A ce moment, il compile votre code et lance le navigateur puis exécute les tests et vous montre le résultat dans le navigateur :

Et dans la console, vous voyez plus d'informations (utilse en cas de problème).

Surtout ne fermez pas le navigateur : retournez dans votre code, faites une petite modification et sauvegardez : aussitôt, votre code est recompilé et les tests réexécutés. Cool en cas de problème.

Testons maintenant le service. On pourrait écrire :

describe('CalculatorService simple test', () => {
  describe('add', () => {
    const service = new CalculatorService();
    it('should return correct answer', () => {
      const result = service.add(4, 2);

      expect(result).toBe(6);
    });
  });
});

Mais si l'on veut écrire un autre test unitaire (it) avec de nouveau un service, il faut de nouveau l'instancier (ici c'est juste un new CalculatorService() mais on peut avoir des paramètres initiaux plus complexe. On pourrait mettre l'instanciation du service avant la première méthode it mais dans ce cas, ce serait toujours la même instance du service qui serait utilisé par tous les tests it ce qui est mal ;-). Heureusement, jasmine propse une méthode beforeEach qui sera utilisée à chaque exécution d'un it. Donc notre code sera plutôt le suivant (j'ai rajouté un deuxième test) :

import { CalculatorService } from './calculator.service';

describe('CalculatorService simple test', () => {
  let service: CalculatorService;

  beforeEach(() => {
    service = new CalculatorService();
    console.log('creation...');
  });

  it('add: should return correct answer', () => {
    const result = service.add(4, 2);

    expect(result).toBe(6);
  });

  it('lowerOrZero: Should answer correct answer', () => {
    const result = service.lowerOrZero([2, 1, 3]);
    expect(result).toBe(1);
  });
});

Pour mieux organiser encore ses tests, sachez qu'un describe peut contenir un autre describe. Dans le code suivant, j'ai regroupé mes tests par méthode du service testé. Le résultat est beaucoup plus lisible :

import { CalculatorService } from './calculator.service';

describe('CalculatorService simple test', () => {
  let service: CalculatorService;

  beforeEach(() => {
    service = new CalculatorService();
    console.log('creation...');
  });

  // tests de add
  describe('add', () => {
    it('should return correct answer', () => {
      const result = service.add(4, 2);

      expect(result).toBe(6);
    });
  });

  // tests de lowerOrZero
  describe('lowerOrZero', () => {
    it('Should answer 0 for null', () => {
      const result = service.lowerOrZero(null);
      expect(result).toBe(0);
    });

    it('Should answer correct answer', () => {
      const result = service.lowerOrZero([2, 1, 3]);
      expect(result).toBe(1);
    });

    it('Should answer 0 if negative', () => {
      const result = service.lowerOrZero([2, 1, -3]);
      expect(result).toBe(0);
    });
  });
});

Remarquez dans la console que l'on a bien crée 4 fois le service.

Ici nous avons utilisé le Matcher toBe mais jasmine en propose tout une ribambelle et vous pouvez même créer vos propres matchers :

toBe,
toBeFalsy, toBeThrusly,
toBeGreaterThan, toBeLesserThan, etc.
toContain,
toHaveBeenCalled,
toHaveBeenCalledWith,
etc, etc.

Et après ?

Ici, nous avons réalisé des tests très simples mais on peut se poser la question : quid si le service utilise d'autres services ? Peut on 'mocker' facilement ces services ? Comment faire ? Quid des templates html d'Angular ?

Nous verrons cela dans un prochain épisode.

Suspense...

Angular & Microsoft Graph [Part 7] : Astuce, les dates avec Microsoft Graph

Wed, 29 Aug 2018 07:16:06 GMT

Sommaire

Si vous allez dans la documentation de Microsoft Graph sur les évènements d'un calendrier, vous verrez que le type des dates de début/fin est un microsoft.graph.dateTimeTimeZone. Arg: Kézako ?

Un DateTimeTimeZone comme son nom l'indique contient 2 informations (de type string) qui sont :

le dateTime qui est une représentation "simple" de la date avec l'heure,
le timeZone qui est le nom de la time Zone comme par exemple America/Chihuahua ou Europe/Paris.

(la doc de DateTimeTimeZone qui contient la liste de TimeZone).

Donc par exemple je peux recevoir de l'api au format JSON l'event avec les propriétés suivante :

            "start": {
                "dateTime": "2018-08-01T09:00:00.0000000",
                "timeZone": "Europe/Paris"
            },
            "end": {
                "dateTime": "2018-08-01T12:30:00.0000000",
                "timeZone": "Europe/Paris"
            },

J'ai ici un rendez-vous qui a eu lieu le 1er Aout 2018 à 9h du matin, heure de Paris.

Côté Typescript/Javascript, il faut bien pouvour travailler avec une vraie représentation de type Date.

Le mieux que j'ai trouvé (mais si vous avez d'autres solutions sans dépendances, je suis preneur), c'est d'utiliser le célèbre momentjs ou plus exactement Moment TimeZone. Et donc, dès que vous recevez un objet de type DateTimeTimeZone, pour travaillez avec lui en tant que Date (ou plus exactement Moment), la transformation est aisée :

import * as moment from 'moment-timezone';

const mStartTime = moment.tz(dtTz.start.dateTime, dtTz.start.timeZone);
const dStartTime = mStartTime.toDate();

Donc même si vous recevez un évènement dont le time zone est America/Chihuahua vous pourrez l'exploiter correctement. (c'est quoi déjà le décalage horaire entre Chihuahua et Bayonne ?

Angular & Microsoft Graph [Part 5] : Onedrive

Wed, 29 Aug 2018 06:51:33 GMT

Sommaire

On a vu dans les précédents articles comment jouer avec Microsoft Graph concernant les calendriers et les évènements. Regardons maintenant comment jouer avec Onedrive.

Dans l'application, on gère un ensemble de clients. Il faut pouvoir sauvegarder l'ensemble de ces clients dans Office365. Une solution simple (mais non viable si l'on a beaucoup de données), c'est de stocker cela dans un fichier dans OneDrive.

C'est le cas de notre application (si, si, je vous assure). Donc nous allons sauvegarder et récupérer ces données depuis un fichier OneDrive de l'utilisateur stocké dans le dossier myTjm/clients.json.

Pour récupérer le contenu d'un fichier, il y a 2 étapes :

la première consiste à récupérer l'URL du contenu du fichier,
récupérer son contenu à partir de l'URL précédente.

L'URL du contenu d'un fichier est accessible dans les données d'un fichier, et pour récupérer les données d'un fichier, on a une méthode GET vers l'URL constituée ainsi :

me/drive/root:/{chemin du fichier}:/

Comme ce qui nous intéresse ce n'est que l'URL du contenu du fichier, on va faire un select :

me/drive/root:/{chemin du fichier}:/?select=@microsoft.graph.downloadUrl

Du coup, pour récupérer le contenu d'un fichier, j'ai crée un service, FileService avec la méthode suivante :

@Injectable({
  providedIn: 'root'
})
export class FilesService extends GraphBaseService {

  constructor(httpClient: HttpClient) { super(httpClient); }

  loadFile(fileName: string) {
    const url = GraphUrl + '/me/drive/root:/myTjm/' + fileName + ':/?select=@microsoft.graph.downloadUrl';
    return this.httpClient.get(url)
      .pipe(
        mergeMap(result => {

          const downloadUrl = result['@microsoft.graph.downloadUrl'];
          return this.httpClient.get(downloadUrl);
        }));
  }

  //...
}

On appele une première fois pour obtenir l'URL et une seconde fois pour le contenu (remarquez l'utilisation de MergeMap pour retourner l'Observable de rxjs).

Donc dans mon service ClientsService, il me suffit d'appeler cette méthode avec comme nom de fichier clients.json :

public load(): Observable<IClient[]> {
    return this.filesService.loadFile(ClientsFileName).pipe(
      mergeMap(content => {
        const clients = <IClient[]>content;
        this.saveLocal(clients);
        return of(clients);
      }),
      catchError(err => {
        const localDatas: IClient[] = <IClient[]>JSON.parse(localStorage.getItem(ClientsKey));
        return of(localDatas);
      })
    );
  }

Remarquez que je sauvegarde le contenu télécharger dans le localstorage (via la méthode saveLocal).

C'est le même principe pour sauvegarder un fichier sur OneDrive. Cette fois, on va utiliser un PUT sur l'URL :

me/drive/root:/{chemin du fichier}:/content

D'ou la méthode dans le FileService pour sauvegarder un fichier filename avec un contenu content :

saveFile(fileName: string, content: string) {
    const url = GraphUrl + '/me/drive/root:/myTjm/' + fileName + ':/content';
    return this.httpClient.put(url, content);
  }

Et dans le service ClientsService, le contenu est le contenu sérialisé en JSON de nos clients :

private save(clients: IClient[]): Observable<any> {
    this.saveLocal(clients);
    return this.filesService.saveFile(ClientsFileName, JSON.stringify(clients));
  }

Lire et enregistrer le contenu d'un fichier sur OneDrive est donc un jeu d'enfant.

Angular & Microsoft Graph [Part 6] : Télécharger une image protégée

Wed, 29 Aug 2018 06:51:22 GMT

Sommaire

Un dernier petit point sur cette application concerne l'affiche de l'image de l'utilisateur dans la barre de menu :

Cela peut paraitre bête, mais cette image est dans Office365 donc protégé par notre token oAuth. Si l'on met juste un tag avec un lien vers l'image, on aura une erreur de sécurité (contenu interdit).

L'URL de la miniature de l'utilisateur est https://graph.microsoft.com/v1.0/me/photo/$value. Donc mettre :

<img src='https://graph.microsoft.com/v1.0/me/photo/$value' class='mat-mini-fab' [matMenuTriggerFor]="menu">

ne fonctionnera pas. Il faut intercepter l'appel Http de l'image. Pour cela, nous allons créer une nouvelle directive et utiliser URL.createObjectURL :

import { HttpClient } from '@angular/common/http';
import { Directive, ElementRef, Input, HostListener } from '@angular/core';
import { map } from 'rxjs/operators';

@Directive({
  selector: '[appHttpSrc]'
})
export class HttpSrcDirective {
  private _appHttpSrc: string;
  private _url: string;

  constructor(
    private el: ElementRef,
    private http: HttpClient) {
  }

  public get appHttpSrc(): string {
    return this._appHttpSrc;
  }
  @Input()
  public set appHttpSrc(v: string) {
    this._appHttpSrc = v;
    // on fait un appel Http pour récupére l'image(format blob)
    this.http.get(v, { responseType: 'blob' }).pipe(
      map(val => {
        // on crée l'url
        return URL.createObjectURL(val);
      }))
      .subscribe(url => {
        // on dit au tag img que son url c'est l'url crée ci-dessus
        this.el.nativeElement.src = url;
      });
  }

  @HostListener('load') onLoad() {
    if (this._url != null) {
      // on libère la mémoire du blob sauvegardé 
      URL.revokeObjectURL(this._url);
    }
  }
}

Remarquez l'appel à revokeObjectURL quand l'image a été téléchargée pour libérer de la mémoire l'URL inutile.

Angular & Microsoft Graph [Part 3] : Récupération des calendriers

Wed, 29 Aug 2018 06:50:43 GMT

Sommaire

Dans cet article, nous allons voir comment récupérer la liste des calendriers Office365 de l'utilisateur. L'api pour cela est simple, c'est juste un GET vers l'URL /me/calendars. Mais pour avoir quelque chose de plus générique et qui va nous servir pour les autres appels, nous allons créer une classe/service de base.

Cette classe contiendra juste 2 méthodes, l'une qui encapsule les appels des méthodes REST qui ne renvoi qu'une seule entité et l'autre qui renvoi un tableau d'entité :

import { HttpHeaders } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export const GraphUrl = 'https://graph.microsoft.com/v1.0/';

export class GraphBaseService {
  constructor(
    protected httpClient: HttpClient) { }

  protected getClient<T>(api: string, select: string = null, args: string = null): Observable<T> {
    const queryParams = [];
    if (select) { queryParams.push('$select=' + select); }
    if (args) { queryParams.push(args); }
    const url = GraphUrl + api + '?' + queryParams.join('&');
    return this.httpClient.get<T>(url);
  }

  protected getClientArray<T>(api: string, select: string = null, args: string[] = null): Observable<ArrayResponse<T>> {
    let queryParams = [];
    if (select) { queryParams.push('$select=' + select); }
    if (args) { queryParams = queryParams.concat(args); }

    const url = GraphUrl + api + '?' + queryParams.join('&');
    const headers = new HttpHeaders()
      .set('prefer', 'outlook.timezone=\"Europe/Paris\"');
    return this.httpClient.get<ArrayResponse<T>>(url, { headers: headers });
  }
}

export class ArrayResponse<T> {
  value: T[];
}

Ces méthodes ont des arguments optionnels pour laisser la liberté au code client et ce sont des méthodes génériques.

De façon général, quand on appele une api REST de MS Graph, elle retorune l'ensemble des propriétés directes de l'entité. Si l'on veut optimiser la requête et ne récupérer qu'une partie des informations, il suffit d'ajouter $select=liste des propriétés voulues dans l'url.

Pour les propriétés qui sont plus complexes (plus profondes dans l'arbre de l'objet), ce sont des arguments supplémentaires que l'on doit passer (d'ou le paramètre args).

Regardons avec les calendriers le code client.

Récupération des calendriers

Dans notre application, on n'a besoin que du nom du calendrier. D'ou notre classe calendarsService :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GraphBaseService } from '@services/msgraph';
import { HttpClient } from '@angular/common/http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CalendarsService extends GraphBaseService {

  constructor(
    httpClient: HttpClient
  ) {
    super(httpClient);
  }

  /**Liste des calendriers du user connecté */
  getCalendars(): Observable<MicrosoftGraph.Calendar[]> {
    return this.getClientArray<MicrosoftGraph.Calendar>('me/calendars', 'name, color, canEdit, owner, events')
      .pipe(map(r => r.value));
  }
}

Ce service hérite de notre service de base GraphBaseService, appele l'url me/calendars et demande les seulement les propriétés name, color, etc...

Simple non ?

Toutes les autres classes/services de notre application seront du même type.

Angular & Microsoft Graph [Part 4] : Evènements dans le calendrier avec données personnalisées

Wed, 29 Aug 2018 06:50:32 GMT

Sommaire

Nous avons vu dans les précédents articles comment s'identifier auprès de Microsoft Graph et récupérer la liste de ses calendriers.

Dans notre application, nous voulons pouvoir ajouter des évènements dans ce calendrier pour enregistrer nos interventions chez nos clients. Personnellement, je facture à la demi journée. Donc on va obliger l'application a ne créer des rendez-vous que d'une demi-journée (matin et/ou après-midi).

Si l'on regarde dans Outlook, cela donnera cela :

Mais dans notre application, cela apparaitra comme cela :

Il n'y a pas d'infos sur les heures de début/fin, juste un code couleur qui indique que c'est le matin et l'après-midi.

Mais le plus important, c'est que chaque rendez-vous/évènement possède des informations complémentaires importantes comme le nom du client et le coût de l'intervention sur la demi-journée. Ces informations supplémentaires, Office365 nous propose plusieurs façon de procéder. Ici, j'ai choisi les SingleValueLegacyExtendedProperty (doc sur le site de MS).

On peut ainsi ajouter des propriétés qui nous sont propres à un évènement. Elles peuvent être de type String, Integer ou String Array ou Integer Array.

Ici, j'ai choisi de n'ajouter qu'une seule propriété personnalisé de type String, qui sera en réalité une sérialisation JSON de mon objet contenant les prorpiétés supplémentaires.

Pour gérer cette propriété supplémentaire vous aurez besoin d'un String qui aura cet aspect là :

const MyTjmProperty = 'String {7F477958-DE03-4B4F-89FC-284980AF6C92} Name MyTjmProperties';

On a donc le type suivi d'un Guid suivi de son nom (MyTjmProperties).

Pour créer un évènement dans un calendrier, il suffit d'appeler la méthode POST de l'URL /me/calendars/{id du calendar}/events avec dans le body, les propriétés de notre évènement. c'est là que l'on va ajouter les données spécifiques :

  private createEventImpl(startDate: Date, endDate: Date, tjmEvent: ITjmEventData) {
    const parameters = this.parametersService.load();

    // on utilise le calendrier par défaut ou le calendrier spécifié dans les paramètres
    const url = parameters == null ?
      'me/events' :
      GraphUrl + '/me/calendars/' + parameters.calendar.id + '/events';

      // on est en France que diable !
    const body = {
      subject: tjmEvent.client.name,
      start: {
        dateTime: startDate.toISOString(),
        timeZone: 'Europe/Paris'
      },
      end: {
        dateTime: endDate.toISOString(),
        timeZone: 'Europe/Paris'
      },
      isReminderOn: false,
      categories: ['myTjm'],
      singleValueExtendedProperties: [{
        id: MyTjmProperty,
        value: JSON.stringify(tjmEvent) // les données JSON sérialisées
      }
      ]
    };
    return this.httpClient.post(url, body);
  }

On voit que l'on spécifie la propriété singleValueExtendedProperties avec comme id notre MyTjmProperty définie plus haut.

Pour récupérer que les events du calendrier qui possède cette propriété spécifique, on récupère l'ensemble des évènements du calendrier avec la méthode GET de l'URL /me/calendars/{id du calendrier}/calendarView et on filtre sur ceux possédant cette propriété :

getEvents(startDate: moment.Moment, endDate: moment.Moment): Observable<ITjmEvent[]> {
    const parameters = this.parametersService.load();

    const url = parameters == null ?
      'me/calendarView' :
      '/me/calendars/' + parameters.calendar.id + '/calendarView';

    return this.getClientArray<MicrosoftGraph.Event>(
      url,
      null,
      [
        'startdatetime=' + startDate.toISOString(),
        'enddatetime=' + endDate.toISOString(),
        '$expand=singleValueExtendedProperties($filter= id eq \'' + MyTjmProperty + '\')',
        '$top=100'
      ]).pipe(
        map(r => {
          const result: ITjmEvent[] = [];
          r.value.forEach(item =&gt: {
            const tjmDatas = this.getTjmDatas(item);
            if (item != null && tjmDatas != null) {

              result.push({
                outlookEvent: item,
                datas: tjmDatas
              });
            }
          });
          return result;
        })
      );
  }

  private getTjmDatas(event: any): ITjmEventData {
    const instance = event as ISingleValueExtendedPropertiesOwner;
    if (instance == null) { return null; }
    const props = instance.singleValueExtendedProperties;
    if (props == null || props.length === 0 || props[0].value == null) { return null; }

    return <ITjmEventData>JSON.parse(props[0].value);
  }

Vous remarquerez que j'ai utilisé la composition pour la récupération des données, c'est à dire que l'on a une entité qui a deux propriété, l'une de type Event de Microsoft, l'autre de type spécifique à mes données propres.

Angular & Microsoft Graph [Part 2] : Identification

Wed, 29 Aug 2018 06:49:40 GMT

Sommaire

Récupération du token oAuth2

L'identification repose sur oAuth2. C'est-à-dire que Microsoft va vous générer un token que vous devrez envoyer aux apis d'Office365 pour gérer la sécurité.

NB: Nous allons faire ici tout cela "à la main", c'est-à-dire que nous n'allons pas utiliser des librairies proposées par Microsoft ou par des éditeurs/développeurs tiers pour bien comprendre comment cela fonctionne. Dans les exemples fournis par Microsoft, ils utilisent la librairie hellojs qui est compatible avec d'autres services que MS Graph comme Google, Facebook & co.

Pour cela, Microsoft met à notre disposition une page Web hébergée sur leur serveur dont l'URL est du type https://login.microsoftonline.com/common/oauth2/v2.0/authorize avec plein d'autres paramètres. Nous allons stocker ces paramètres dans le fichier environment.ts de notre application angular :

appId est le Guid généré sur le site de paramétrage de votre application Office365 (cf article précédent).

Dans le fichier environment.prod.ts, le contenu est identique sauf que l'URL du callback est l'URL définitive de notre site en production (https://www.myTjm/callback).

Quand on appelle la page de login de Microsoft avec les bons paramètres, l'utilisateur est invité à entrer ses identifiants. Quand il clique sur Login, Microsoft vérifie que ses identifiants sont les bons, puis redirige le navigateur vers votre page de callback avec dans l'URL, le token de sécurité oAuth que nous allons devoir sauvegarder pour les appels suivants.

J'ai donc créer un service, AuthService, qui contient une méthode login :

public login() {
    const url = this.getUrl();
    const width = 525,
      height = 525,
      screenX = window.screenX,
      screenY = window.screenY,
      outerWidth = window.outerWidth,
      outerHeight = window.outerHeight;

    const left = screenX + Math.max(outerWidth - width, 0) / 2;
    const top = screenY + Math.max(outerHeight - height, 0) / 2;

    const features = [
      'width=' + width,
      'height=' + height,
      'top=' + top,
      'left=' + left,
      'status=no',
      'resizable=yes',
      'toolbar=no',
      'menubar=no',
      'scrollbars=yes'];
    const popup = window.open(url, 'oauth', features.join(','));
    if (!popup) {
      alert('failed to pop up auth window');
    }
  }

Et la méthode getUrl() :

private getUrl(): string {
    let url = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize';
    url += '?client_id=' + environment.appId;
    url += '&response_type=token';
    url += '&redirect_uri=' + encodeURIComponent(environment.callback);
    url += '&scope=' + encodeURIComponent(environment.scope);
    return url;
  }

Vous voyez que dans les paramètres de l'URL appelée, on passe l'appId, le type de réponse attendu (token), l'URL de redirection (votre page callback) et les autorisations demandées (scope).

Donc dans notre application, il suffit d'appeler cette méthode login qui fera apparaitre dans une fenêtre popup le site d'identification de Microsoft. Quand l'utilisateur se sera identifié, Microsoft redirigera cette fenêtre popup vers notre page callback.

On va donc créer un composant callback dans notre application dont le code ne fera qu'appeler la méthode onCallback de notre service authService :

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@services/msgraph';

@Component({
  selector: 'app-callback',
  template: ''
})
export class CallbackComponent implements OnInit {
  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.onCallback();
  }
}

La seule chose que fait ce composant, c'est d'appeler le service qui va :

Récupérer le token de l'url et le sauvegarder dans le localstorage,
fermer le popup qu'il avait ouvert,
demander à la fenêtre parente du popup de se rafraichir.

  /** Appelée par le callbackComponent */
  public onCallback() {
    const token = this.getTokenFromURL();

    if (token) {
      this.saveAuthToken(token);
    }
    window.opener.location.reload();
    window.close();
  }

  private getTokenFromURL(): IMsGraphToken {
    if (window.location.hash) {
      const authResponse = window.location.hash.substring(1);
      const authInfo = JSON.parse(
        '{' + authResponse.replace(/([^=]+)=([^&]+)&?/g, '"$1":"$2",').slice(0, -1) + '}',
        (key, value) => key === '' ? value : decodeURIComponent(value));
      return authInfo;
    } else {
      alert('failed to receive auth token');
    }
  }

NB: Le code de la méthode getAuthToken analyse les paramètres de l'URL. J'avoue avoir piqué ce code sur l'un des exemples de Microsoft, mais je me souviens plus ou !!!

Une fois l'utilisateur authentifié, on a bien dans le localstorage le token (et des informations supplémentaires comme la date d'expiration) :

Interception des appels

Maintenant qu'on a bien le token d'identification, dès que l'on va vouloir appeler une api REST de Microsoft Graph, il faudra passer dans le header de la requête ce token. Ce token sera mis à disposition toujours par notre service AuthService avec la méthode getAuthToken qui renvoi une interface que j'ai définie IMsGraphToken :

  /** Retourne le token d'identification du user dans Graph */
  public getAuthToken(): IMsGraphToken {
    return <imsgraphtoken>JSON.parse(localStorage.getItem(this.tokenKey)); }

export interface IMsGraphToken {
    access_token: string;
    expires_in: number;
    scope: string;
    session_state: string;
}

Nous allons donc créer un intercepteur angular "classique" :

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService, GraphUrl } from '@services/msgraph';

@Injectable({
  providedIn: 'root'
})
export class AuthInterceptorService implements HttpInterceptor {

  constructor(private authService: AuthService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    const token = this.authService.getAuthToken();
    if (token == null) { return next.handle(req); }
    if (token.access_token == null) { return next.handle(req); }

    // ne change le header que si l'URL commence par https://graph.microsoft.com/v1.0/ définie dans la constante GraphUrl
    if (!req.url.startsWith(GraphUrl)) {
      return next.handle(req);
    }

    const authReq = req.clone({
      headers:
        req.headers
          .set('Authorization', 'Bearer ' + token.access_token)
          .set('Content-Type', 'application/json')
    });

    return next.handle(authReq);
  }
}

N'oublions pas de l'ajouter dans le providers de notre app.module.ts :

  providers: [
    { provide: LOCALE_ID, useValue: 'fr' },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
  ],

Et voila, dès que l'on dera une requête Http vers MS Graph, notre token sera ajouté et l'on sera authentifié.

Angular & Microsoft Graph [Part 1]

Wed, 29 Aug 2018 06:48:32 GMT

Sommaire

Comme beaucoup d'entre vous, je suis développeur/architecte/maitre du monde indépendant qui facture ses interventions à la journée, voire à la demi-journée.

Toutes les fins de mois, je dois donc faire mes factures auprès de mes fortunés clients pour leur envoyer ma modeste facture.

J'avoue n'avoir par 250 000 clients en même temps et donc jusqu'à présent, je gérais cela "à la main".

Avec Office365, il m'est venu l'idée d'exploiter la plateforme afin de gérer ces interventions. L'idée est de créer une application 100% Angular (donc cliente) avec comme unique backend Office365.

Bonne nouvelle, Microsoft propose des interfaces REST des données stockées dans Office365 via Microsoft Graph.

Grâce à cette application, nous allons voir comment se connecter à Microsoft Graph, récupérer/ajouter des rendez-vous dans un calendrier Outlook, enregistrer/lire des fichiers dans OneDrive, etc.

Régardons à quoi l'application ressemble :

Créer son application Office365

La première étape consiste à référencer notre application web auprès d'Office365. Rendez-vous donc sur le site de Microsoft et identifiez-vous : https://developer.microsoft.com/en-us/graph

Puis allez dans my apps :

Dans la catégorie Applications convergentes, cliquez sur Ajouter une application.

C'est là que vous allez gérer ce qui sera accessible potentiellement pour votre application. Outre son nom, vous devrez renseigner les autorisations pour Microsoft Graph et le type de plateforme (le reste est pas très important pour l'instant). Donc ajoutez une platerofme de type Web :

Le paramétrage d'une plateforme de type Web demande de définir (au moins) l'URL de redirection. Nous allons en définir 2 :

http://localhost:4200/callback pour nos tests de développement,
https://www.mytjm.fr/callback pour la mise en production.

NB : l'URL de redirection demande maintenant d'être hébergée obligatoirement sur un site sécurisé de type https.

Nous verrons dans l'article suivant comment fonctionne concrêtement l'identification et les autorisations MS Graph.

Côté autorisation, comme notre application va gérer les calendriers Outlook, gérer des fichiers dans OneDrive, lire des informations sur l'utilisateur et éventuellement envoyer un email, j'ai donc le paramétrage suivant :

Sauvegardez le tout et voila, votre application est bien définie, paramétrée dans Office365.

Remarque importante : tout en bas de cette page, vous avez la possibilité de voir le contenu du manifeste générée par cette page. C'est un fichier json et vous pouvez l'éditer. La seule chose que vous devrez vérifier, c'est si les 2 paramètres oauth2AllowIdTokenImplicitFlow et oauth2AllowImplicitFlow sont bien à true :

Blazor : Simple CRUD App Component, Component, Component

Wed, 18 Apr 2018 15:47:16 GMT

Update v0.2

Série d'article sur Blazor :

Dans le précédent article, on a vu comment créer un service qui appele une WebAPI. Le but de ce nouvel article est d'assimiler la notion de component (composant in french) qui est au centre de Blazor et qui, si on le comprend bien, permettra d'optimiser les performances de notre application.

Tout d'abord, il faut comprendre comment fonctionne le moteur de mise à jour du DOM par Blazor.

Une page est un Component.
Une page peut contenir plusieurs Component.
Chaque Component est responsable de sa mise à jour.

Le moteur de Blazor est suffisament intelligent pour ne mettre à jour que component par component.

Donc si vous avez une page qui comprend 15 components et que vous ne modifiez qu'un seul component, Blazor ne mettra à jour le DOM de la page du navigateur que pour le fragment du component en question.

Prenons l'exemple d'une grille, il est sans doute judicieux de définir chaque ligne comme état un component. Ainsi, si vous mettez à jour une ligne, seule cette ligne sera mise à jour dans le DOM par Blazor.

Mettons cela en pratique.

Dans mon projet, j'ai crée un dossier PersonsComponent avec un PersonGrid et un PersonRow :

Visuellement parlant, cela va se traduire ainsi :

La zone rouge correspond à mon composant PersonsGrid qui contient une collection de PersonRow (en vert). Quand je vais cliquer sur Edit ou Delete, seul le composant PersonRow correspondant sera affecté.

PersonGrid

Regardons le code de PersonsGrid :

@using System.Collections.Generic
@using System.Threading.Tasks
@using SimpleCrudBlazor.Client.Services;
@using SimpleCrudBlazor.Shared;
@inject PersonService _personService
 
@if (persons != null)
{
    @foreach (var person in persons)
    {
        <PersonRow Person="person" OnIsSelectedChanged="OnIsSelectedChanged" OnUpdate="OnUpdateAsync"></PersonRow>
    }
}
 
@functions {
    private IEnumerable<Person> persons;
    private PersonRow _selectedPersonRow;
 
    protected override async Task OnInitAsync()
    {
        await RefreshAsync();
    }
 
    /// <summary>
    /// Charge les personnes
    /// </summary>
    async Task RefreshAsync()
    {
        persons = await _personService.GetAllAsync();
    }
 
    /// <summary>
    /// Passe en mode édition une personne
    /// </summary>
    /// <param name="personRow">La personne a mettre en mmode édition</param>
    void OnIsSelectedChanged(PersonRow personRow)
    {
        if (_selectedPersonRow == personRow) return;
 
        if (_selectedPersonRow != null)
            _selectedPersonRow.IsSelected = false;
        _selectedPersonRow = personRow;
    }
 
    /// <summary>
    /// Met à jour une personne
    /// </summary>
    async void OnUpdateAsync(PersonRow personRow)
    {
        var person = await _personService.UpdateAsync(personRow.Person);
        personRow.Person = person;
        personRow.NotifyStateHasChanged();
    }
}

J'ai une propriété _persons qui contient la liste de mes personnes que je récupère via mon service PersonService et la méthode RefreshAsync.

J'ai aussi une propriété _selectedPersonRow qui m'indique quelle est la ligne sélectionnée, qui est en mode édition (il ne peut y en avoir qu'une).

Pour chaque person de mes _persons, je crée un component de type PersonRow qui a 2 propriétés de type Action<PersonRow>:

OnIsSelectedChanged qui m'indique que la ligne a été sélectionnée,
OnUpdate qui m'indique que l'on a cliqué sur le bouton Update de la ligne.

NB : je n'ai pas encore implémenté la méthode Delete.

Quand la méthode OnIsSelectedChanged est appelée, je met à jour le champ _selectedPersonRow pour garder la trace de la ligne sélectionnée. Si il y avait déjà une ligne sélectionnée, j'affecte sa propriété IsSelected à false.

Quand la méthode OnUpdate est appelée, j'appele le service PersonService pour mettre à jour la personne dans la base de donnée sur le serveur. Et surtout, je demande au composant de la ligne (le PersonRow) de se mettre à jour avec NotifyStateHasChanged.

PersonRow

Côté PersonRow, c'est encore plus simple :

@using System
@using SimpleCrudBlazor.Shared
@using SimpleCrudBlazor.Client.Services;
@if (_isSelected)
{
    <div class="row">
        <div class="col-xs-1"><button onclick="(() => OnUpdatePerson())">Update</button></div>
        <div class="col-xs-1"><button onclick="(() => OnToggleEditMode())">Cancel</button></div>
        <div class="col-xs-5"><input bind="@Person.FirstName" type="text"></div>
        <div class="col-xs-5"><input bind="@Person.LastName" type="text"></div>
    </div>
}
else
{
    <div class="row">
        <div class="col-xs-1"><button onclick="@(() => OnToggleEditMode())">Edit</button></div>
        <div class="col-xs-1"><button onclick="@(()=> OnDelete())">Delete</button></div>
        <div class="col-xs-5">@Person.FirstName</div>
        <div class="col-xs-5">@Person.LastName</div>
    </div>
}
 
@functions {
    private bool _isSelected;
    public Person Person {get;set;}
    public Action<PersonRow> OnIsSelectedChanged { get; set; }
    public Action<PersonRow> OnUpdate { get; set; }
 
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            if (IsSelected == value) return;
 
            _isSelected = value;
            OnIsSelectedChanged(this);
            this.StateHasChanged();
        }
    }
 
    public void NotifyStateHasChanged()
    {
        this.StateHasChanged();
    }
 
    void OnToggleEditMode()
    {
        IsSelected = !IsSelected;
    }
 
    void OnDelete()
    {
        // TODO
    }
 
    void OnUpdatePerson()
    {
        OnUpdate(this);
        IsSelected = false;
    }
}

Je passe sur le contenu de l'UI mais vous voyez que quand on clique sur le bouton Update par exemple, la méthode OnUpdatePerson est appelée, et cette dernière appele l'Action<PersonRow> OnUpdate (cf le PersonsGrid).

Vous remarquerez que dans la propriété IsSelected, j'appele la méthode StateHasChanged : c'est pour indiquer au moteur Blazor que l'UI de ce composant doit être mis à jour. Comme cette méthode est protected, je l'expose via la méthode NotifyStateHasChanged qui est appelée par le PersonsGrid quand un update est fait.

Voilà!

Simple mais il est très important avec Balzor dez bien comprendre que tout est Component pour encore optimiser les performances de votre application.

Blazor : ma première application (javascript et service)

Wed, 18 Apr 2018 15:45:05 GMT

Update v0.2

Série d'article sur Blazor :

Avant d'aller plus avant dans les différents concepts de Blazor, un point important est : comment développer sereinement ?

Je dis ca car pour l'instant, impossible de mettre le moindre point d'arrêt dans votre code .NET de votre appli Blazor. Vous allez me dire : fais des logs, des traces, c'est mieux.

Ok, puisque vous le prenez comme cela.

Donc personnellement, pour "deboguer" une appli javascript/typescript, j'utilise à fond la console du navigateur. Cela permet de ne pas interrompre le déroulement de l'application et de voir ce qu'il se passe dans le panel des outils du développeur du navigateur (F12).

Il faut donc pouvoir appeler les méthodes de l'objet javascript console, donc généralement savoir appeler une méthode javascript depuis son code C#.

Interop Javascript

Pour cela, Blazor vous permet d'enregistrer un script, une fonction :

<script type="text/javascript">
    Blazor.registerFunction('mafonction', () => {
        console.log('coucou');
        return true;
    });
</script>

On enregistre ici la fonction javascript 'mafonction' qui sera appelable (invokable ;-)) depuis le code C# ainsi :

void AppelJs()
{
    Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.Invoke<bool>("mafonction");
}

NB : En interne, la méthode Invoke appele une méthode du runtime de Mono qui se charge réellement de l'interop.

Service

C'est bien beau mais c'est un peu "craspouille" comme code. On va donc essayer de le "professionaliser". Pour cela, je vais dans un premier temps créer un service dans mon application que je nommerais ConsoleService :

using Microsoft.AspNetCore.Blazor.Browser.Interop;
 
namespace MaPremiereAppliBlazor.Services
{
    public class ConsoleService
    {
        // retourne MaPremiereAppliBlazor.Services.ConsoleService
        private string Prefix => GetType().FullName;
 
        /// <summary>
        /// Permet d'ajouter un log dans la console du navigateur
        /// </summary>
        /// <param name="message">Le message</param>
        public void Log(string message)
        {
            if (string.IsNullOrEmpty(message)) return;
 
            RegisteredFunction.Invoke<bool>(Prefix + ".log", message);
        }
 
        /// <summary>
        /// Permet d'ajouter un log dans la console du navigateur
        /// </summary>
        /// <param name="sender">L'objet appelant par convention</param>
        /// <param name="message">Le message</param>
        /// <remarks>Log dans la console: [NomDuTypeAppelant] message</remarks>
        public void Log(object sender, string message)
        {
            if (message == null) return;
            if (sender == null) Log(message);
            Log($"[{sender.GetType().Name}] {message}");
        }
 
        /// <summary>
        /// Vide la console
        /// </summary>
        public void Clear()
        {
            RegisteredFunction.Invoke<bool>(Prefix + ".clear");
        }
    }
}

Remarquez que ce service invoque des méthodes javascript dont les noms sont :

MaPremiereAppliBlazor.Services.ConsoleService.log(message)
MaPremiereAppliBlazor.Services.ConsoleService.clear()

Je vais ensuite enregistrer ces méthodes dans la liste des méthodes invocables en les ajoutant dans la page MainLayout.cshtml :

@implements ILayoutComponent
 
<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <NavMenu />
        </div>
        <div class='col-sm-9'>
            @Body
        </div>
    </div>
</div>
 
<script type="text/javascript">
    var prefix = "SimpleCrudBlazor.Client.Services.ConsoleService";
    Blazor.registerFunction(prefix + '.log', message => {
        console.log(message);
        return true;
    });
    Blazor.registerFunction(prefix + '.clear', () => {
        console.clear();
        return true;
    });
</script>
 
@functions {
public RenderFragment Body { get; set; }
}

Injection de dépendance

Reste maintenant à enregistrer notre service dans le moteur d'injection de dépendance dans le Main de notre Program :

using Microsoft.AspNetCore.Blazor.Browser.Rendering;
using Microsoft.AspNetCore.Blazor.Browser.Services;
using MaPremiereAppliBlazor.Services;
using Microsoft.Extensions.DependencyInjection;
 
namespace MaPremiereAppliBlazor
{
    class Program
    {
        static void Main(string[] args)
        {
            var serviceProvider = new BrowserServiceProvider(configure =>
            {
                configure.Add(ServiceDescriptor.Singleton<ConsoleService, ConsoleService>());
            });
 
            new BrowserRenderer(serviceProvider).AddComponent<App>("app");
        }
    }
}

Voila, tout est prêt. Il suffit dans n'importe quel composant de notre application d'utiliser le moteur d'injection pour utiliser notre service. Dans une page, un Component quelconque, le framework Blazor nous permet d'utiliser la directive @inject :

@using System.Globalization
@using MaPremiereAppliBlazor.Services
@page "/counter"
@inject ConsoleService ConsoleService
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
<p>Increment value: <input bind="@IncrementValue" type="number" /></p>
 
<button onclick="@(() => IncrementCount())">Click me</button>
 
@functions {
    int currentCount = 0;
    private int _incrementValue = 1;
 
    public string IncrementValue
    {
        get { return _incrementValue.ToString(CultureInfo.InvariantCulture); }
        set { int.TryParse(value, out _incrementValue); }
    }
 
    void IncrementCount()
    {
        ConsoleService.Log($"Ancienne valeur de currentCount: {currentCount}");
        currentCount+= _incrementValue;
        ConsoleService.Log($"Nouvelle valeur de currentCount: {currentCount}");
    }
}

Grâce à mes 2 signatures de la méthode log, je peux même faire plus explicite en tapant :

void IncrementCount()
{
    ConsoleService.Log(this, $"Ancienne valeur de currentCount: {currentCount}");
    currentCount+= _incrementValue;
    ConsoleService.Log(this, $"Nouvelle valeur de currentCount: {currentCount}");
}

Ce qui donne dans le navigateur :

C'est plus cool non ?

Blazor : ma première application (binding)

Wed, 18 Apr 2018 15:43:06 GMT

Update v0.2

Série d'article sur Blazor :

Si vous ne l'avez déjà fait, je vous invite à lire l'article précédent sur l'installation et la présentation de Blazor.

Remarque important : ce article est basé sur la version 0.1 de Blazor. Donc beaucoup de choses risque de changer dans les semaines qui viennent.

So, let's go!

Maintenant que vous avez créé votre première application Blazor, regardons plus avant son contenu :

On a l'impression de se retrouver face à une application ASP .NET Core MVC "classique". Mais rappelez vous qu'ici, il n'y est pas question de serveur, de WebApi ou similaire : tout s'exécute côté client, dans le navigateur.

@page

Regardons le contenu de la page index.cshtml :

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

Tout dans Blazor (au niveau UI) est un Component. Une page est un Component, une page contient des Component qui peuvent contenir des Components, etc.

Ici, on a un Component un peu particulier puisqu'il possède la nouvelle directive @page qui indique au moteur de Blazor que l'on peut naviguer vers cette page. Le système de routage de Blazor peut faire lz sujet d'un article complet aussi la seule chose importante à retenir ici, c'est que l'argument de la directive donne le lien relatif. Comme dans notre page Component Index il n'y a rien c'est donc la page d'accueil de notre site.

NB: un Component Blazor est juste une classe .NET qui hérite de Microsoft.AspNetCore.Blazor.Components.IComponent. Le framework Blazor ajoute une implémentation avec le BlazorComponent.

Ensuite on a du code html "classique" jusqu'au tag SurveyPrompt avec son attribut Title.

Component

Ce tag est en réalité un autre Component de notre application qui possède une propriété public Title. Si l'on regarde le code de notre Component SurveyPrompt :

<div class="alert alert-survey" role="alert">
    <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
    <strong>@Title</strong>
 
    Please take our
    <a target="_blank" class="alert-link" href="https://go.microsoft.com/fwlink/?linkid=870381">
        brief survey
    </a>
    and tell us what you think.
</div>
 
@functions
{
    // This is to demonstrate how a parent component can supply parameters
    public string Title { get; set; }
}

Cette fois, comme on n'a pas la directive @page, ce composant est destiné a être inclu dans un autre composant. Mais surtout, on voit la directive @function (classique dans Razor) pour indiquer que l'on a du code C# à cet endroit.

On retrouve notre propriété Title que l'on a définit dans notre page index.

NB : le code "behind" est directement inclu dans la page .cshtml. Il est prévu qu'à terme il y ai la possibilité d'avoir 2 fichiers par component, un pour l'UI (code Razor) et un autre pour le code behinf en .NET (C#, VB, F#, etc.).

Binding Code => UI (One-Way binding)

On a donc notre propriété Title que l'on veut afficher dans l'UI de notre composant SurveyPrompt. Le binding est ici unidirectionnel du code vers l'UI. Ie si l'on change la valeur de la propriété Title, l'UI sera modifiée. Ce binding se fait grâce à la syntaxe suivante :

@Title

(équivalent de {{title}} en Angular).

Binding UI => Code (Event binding)

Pour voir ce type de binding, allons voir le code du composant Counter (Counter.cshtml) :

@page "/counter"
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button onclick="@IncrementCount">Click me</button>

 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}

C'est une page que l'on accède via l'url http://localhost:4242/counter (directive @page). Dans le code behind, on a une méthode IncrementCount. Cette méthode est appelée quand on clique sur le bouton. Vous pouvez écrire ce code de la façon suivante :

onclick="@(() => IncrementCount())"

Pour l'instant, on n'a pas beaucoup d'évènement auxquels on peut réagir :

onclick
onchange

OK, c'est vraiment léger mais ce n'est que le début ;-)

(équivalent de (click)='onclick()' en Angular).

Binding UI <=> Code (Two-Way binding)

Cette fois, on est dans le scénario ou l'on veut lié une propriété de notre composant avec un élément de l'UI de notre composant. Par exemple, une zone de saisie comme un <input ...>.

Dans le template "client only" de la v0.1 de Blazor, il n'y a pas d'exemple de binding two way. Qu'à cela tienne, on va modifier notre exemple de la page counter :

@using System.Globalization
@page "/counter"
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
<p>Increment value: <input bind="@IncrementValue" type="number" ></p>
 
<button @onclick(() => IncrementCount())>Click me</button>
 
@functions {
    int currentCount = 0;
    private int _incrementValue = 1;
 
    public string IncrementValue
    {
        get { return _incrementValue.ToString(CultureInfo.InvariantCulture); }
        set { int.TryParse(value, out _incrementValue); }
    }
 
    void IncrementCount()
    {
        currentCount+= _incrementValue;
    }
}

Le binding entre la propriété IncrementValue et le tag <input> s'effectue grâce à la directive @bind tout simplement.

IMPORTANT : cette directive @bind est appelée à disparaitre avec une nouvelle syntaxe qui permettra des scénarios de binding plus complexe. Cela devrait apparaitre dès la version v0.2 du framework Blazor.

Commençons avec les WebAssembly et Blazor

Thu, 05 Apr 2018 16:32:45 GMT

Série d'article sur Blazor :

La notion de WebAssembly est toute neuve puisqu'elle ne date que de Mars 2015. Le principe est parti d'une interrogation : comment faire pour accélérer les performances des applications web ?

Première solution, améliorer les moteurs d'interprétation javascript (mais vous aurez remarqué que depuis quelques années, les Google, Microsoft & Firefox se sont calmés sur leurs communications sur les perfs de leurs moteurs respectifs). On peut certainement encore aller plus vite, mais il n'y aura pas de gap monstrueux.

Donc l'autre solution est d'imaginer que les navigateurs puissent exécuter du code "natif" (ou presque). D'ou l'idée géniale (faut pas bourrer, c'est comme Javas et .NET) de créer un langage intermédiaire, proche de l'assembleur qui pourra être intérprété par le navigateur.

D'ou le projet WebAssembly (http://webassembly.org/), reconnu par le W3C, dont la principale fonction est de définir ce langage intermédiaire (le 1er public working draft ne date que du 15 Février dernier).

Bizarrement, ce projet a immédiatement été suivi par les principaux navigateurs puisqu'il est supporté par Chrome, Firefox, Safari et Edge.

Donc maintenant qu'on a ce langage intermédiaire, il faut pouvoir l'écrire. Alors tout comme en .NET ou vous pouvez vous amuser à programmer en IL, vous pouvez programmer en WAT.

What is WAT ?

WAT est la représentation textuelle du code binaire. Il y a une équivalence parfaite en le code WAT et le WASM (il existe des "traducteurs", décompilateurs qui traduisent le code binaire en WAT et inversement).

Par exemple, voici du WAT :

(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "main" (func $main))
(func $main (; 0 ;) (result i32)
(i32.const 42)
)
)

Sympa non ? Son équivalent en C est :

int main() {
return 42;
}

Alors même si j'aime pas le C, je le préfère largement au WAT ;-) D'ou l'idée de créer des "compilateurs", qui traduisent votre code en langage de "haut niveau" en WAT/WASM.

Je résume :

Vous écrivez dans votre langage de prédilection (C, C++, C#, VB .NET, F#, etc.),
Un compilateur le traduit en code binaire WASM,
Le navigateur charge ce code WASM et le compile en code natif
Le navigateur exécute le code natif (dans une sandbox) à la vitesse de l'éclair.

NB : Dans les specs des WebAssembly, il y a la définition du code intermédiaire mais aussi comment ce code est chargé par le navigateur et comment il peut intéragir avec le DOM et le code javascript de l'application.

Et la bonne nouvelle, c'est qu'en .NET, l'équipe de Mono chez Microsoft a eu la bonne idée de créer un compilateur Wasm (ce n'est pas vieux, cela a été rendu public début de cette année). Vous pouvez même participer à ce projet Open Source sur Github.

OK, j'ai un compilateur qui me génère du WASM à partir de mon code C#, mais comment je fais une appli web moi ?

Blazor, les grands principes

C'est là qu'apparait notre projet Blazor.

Blazor est un framework SPA (Single Page Application) qui vous permet d'écrire du code en .NET, code qui sera exécuté côté client, dans le navigateur. Cool non ?

Plus la peine d'apprendre le javascript et profitez de la puissance de .NET pour écrire des applications SPA de la mort qui tue.

Comme son nom l'indique, Blazor est basé sur le moteur de rendu Razor, moteur bien connu des développeurs d'application ASP .NET MVC.

Tout comme une application ASP .NET MVC, vous allez créer des pages .cshtml (ou .vbhtml) avec du code behind. La différence majeure, c'est que le code que vous aurez écrit s'exécutera côté client, dans le navigateur et non côté serveur.

Magique ? Non, juste une application de tout ce qu'on a exposé ci-dessus :

Votre application Web est compilée dans une assembly .NET standard (Razor génère des classes à partir de la page .cshtml que vous avez écrite),
Quand le navigateur charge la page index.html, il charge le framework .NET de Mono (compilé en wasm) qui charge votre dll (.NET standard),
Le framework Mono .NET WASM exécute alors votre appli,
Cette dernière génère dynamiquement le code html (issu de l'interprétation de Razor) et l'injecte dans votre page index.html.
Quand par exemple on clique sur un bouton, l'évènement est transmis par le framework Blazor à votre dll qui peut réagir, mettre à jour l'UI qui est injectée à nouveau dans le DOM.

Nous verrons plus tard plus en détail tout ce que contient Blazor car il y a pas mal de petites subtilités (comme par exemple le wrapper HttpClient).

Voyons maintenant comment tester Balzor.

Prérequis

Au jour ou j'écris ces lignes, Blazor en est à sa version 0.1 : c'est dire si c'est le début. Comme se plait à le dire Microsoft, c'est un projet expérimental, proposé en Open Source à la communauté. On verra quel est son accueil. (même au sein de Microsoft, tout le monde n'est pas du même avis sur l'avenir, la pertinence de Blazor).

Toujours est-il que les WebAssembly sont elles en plein boom et ce serait dommage de rater le train (<BlagueA2Balles>surtout qu'il y en a pas beaucoup aujourd'hui en France, jours de grêve de la SNCF</BlagueA2Balles>).

La première étape est d'installer le .NET Core 2.1 SDK. Il est encore en version preview aujourd'hui.

Deuxième étape (car les lignes de commande, c'est bien, mais Visual Studio c'est mieux), installer la version 15.7 de Visual Studio.

En mode Preview aujourd'hui, vous pouvez la charger gratuitement ici.

Pendant l'installation, pensez bien à cocher l'option Développement web et ASP .NET ainsi que le développement multiplateforme .NET Core.

Rassurez-vous : Vous pouvez installer cette version Preview en même temps que la version "officielle" de Visual Studio. LEs 2 environnements de développement coexistent sans problèmes.

Une fois l'installation terminée, comme Blazor ajoute des nouvelles fonctionnalités à Razor (des nouvelles languages extensions), il faut que Visual Studio les reconnaisse.

Donc téléchargez et installez ASP .NET Core Blazor Language Services Extension.

That's it! Vous êtes prêt pour tester votre première application Blazor.

Ma première appli Blazor

Lancez donc Visual Studio 2017 15.7 Preview, puis nouveau projet de type Web Core :

Vous devez ensuite choisir le template qui vous plait :

Le 1er template (Blazor seul) crée une appli cliente uniquement (comme un site web avec que du javascript, css et html).

Le second, plus complet, crée une appli cliente, une application serveur hébergeant les Web API consommés par l'appli cliente et un projet partagé entre les 2 (c'est là un des gros avantages de Blazor).

Faites comme vous voulez mais essayez tout d'abord le 1er template puis lancez le et regardez comment cela se passe dans le navigateur (activez le mode Développeur, F12).

Dans un premier temps vous verrez que le navigateur charge la webassembly mono.wasm :

Puis cette dernière télécharge et interprète les dlls .NET Standard de votre application avec ses dépendances (dont le framework) :

Nous verrons dans prochain article en détail le contenu de cette première application.

Bon dev!

Blazor : Simple CRUD App - HttpClient

Thu, 05 Apr 2018 16:31:54 GMT

Série d'article sur Blazor :

Jusqu'à présent, je ne vous ai présenté Blazor que côté client. Cette fois, nous allons voir un scénario plus complet qui consiste à interagir avec une WebAPI, donc côté serveur. Le gros avantage (de mon point de vue) c'est que comme côté serveur et côté client on a du code C# (.NET pour ne pas vexer les développeurs VB .NET, F# & co), on peut partager du code entre le client et le serveur.

Prenons l'exemple d'une application Angular qui consomme une WebAPI. Si la WebAPI retourne un objet Person définie dans la classe Person.cs, il faut que côté Angular, on définisse l'interface IPerson.ts avec les même propriétés.

Là, avec Blazor, comme la classe Person.cs sera partagée entre le serveur et le client, le problème de redondance d'information (et possibilité d'erreur) ne se pose plus.

Donc,

Lancez Visual Studio 2017 15.7 (preview) et créez un nouveau projet ASP .NET. Cette fois, dans les templates Blazor, choisissez l'option Blazor ASP .NET Core Hosted :

Cette fois, le template comprends 3 projets :

SimpleCrudBlazor.Client : l'application cliente WebAssembly,
SimpleCrudBlazor.Server : l'application serveur de WebAPI,
SimpleCrudBlazor.Shared : la dll avec des classes utilisées par le serveur ET le client.

Dans Shared, j'ai créé une classe Person bête et méchante. Moralité, dans mes pages exécutées côté client je peux instancier un objet Person tout comme dans mes controllers de mes WebAPI.

Dans Server, j'ai crée un controller qui me retourne la liste de mes clients via /api/Persons.

Dans Client, j'ai crée un service qui va appeler la WebApi /api/Persons.

Je passe sur l'implémentation du controller du serveur qui est tout ce qu'il y a de plus classique. Regardons plutôt notre classe PersonService dans le client :

using System;
using SimpleCrudBlazor.Shared;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Blazor;
 
namespace SimpleCrudBlazor.Client.Services
{
    public class PersonService
    {
        private readonly HttpClient _client;
        private readonly ConsoleService _consoleService;
        private readonly string _apiUrl = "/api/Persons";
 
        public PersonService(HttpClient client, ConsoleService consoleService)
        {
            _client = client;
            _consoleService = consoleService;
        }
 
        public async Task<IEnumerable<Person>> GetAllAsync()
        {
            _consoleService.Log(this, "GetAllPersons");
            var persons = await _client.GetJsonAsync<Person[]>(_apiUrl);
            return persons;
        }
 
        public async Task<Person> UpdateAsync(Person person)
        {
            _consoleService.Log(this, "UpdateAsync" + person.Id);
            return await _client.PutJsonAsync<Person>($"{_apiUrl}/{person.Id}", person);
        }
 
        public async Task<int> DeleteAsync(int personId)
        {
            throw new NotImplementedException();
        }
 
        public async Task<Person> Insert(Person person)
        {
            throw new NotImplementedException();
        }
    }
}

On voit que dans le constructeur de notre service, on attend 2 autres services (qui seront injectés via le moteur d'injection de dépendance). On a notre ConsoleService (cf article précédent) et surtout le HttpClient.

Le code est "classique" en .NET sauf qu'il y a un gros problème : ici, notre code doit faire un appel http vers une ressource. Or, faire un appel http depuis un navigateur, c'est interdit pour des raisons de sécurité. Seul le navigateur a le droit d'effectuer des requêtes Http.

Et c'est là ou l'on a une grosse astuce.

Le moteur d'injection de Blazor est un BrowserServiceProvider et ce dernier par défaut référence deux services, le IUriHelper (on s'en fou pour le moment) et un HttpClient avec un MessageHandler bien particulier. Ce messageHandler est un BrowserHttpMessageHandler qui intercepter donc tout appel avec cette classe.

Que fait-il ? Tout simplement (je dis ca mais c'est pas trivial du tout), il récupère l'appel "http .NET", la sérialise et fait un appel à une méthode javascript déjà enregistrée par le framework Blazor qui elle appelle la méthode fetch du navigateur. Vous avez compris l'astuce ?

Blazor par défaut enregistre une méthode javascript (Blazor.registerfunction) comme on a vu dans l'article précédent dont le nom est Microsoft.AspNetCore.Blazor.Browser.BrowserHttpMessageHandler.
Dans cette méthode javascript qui a plein d'arguments, il utilise la méthode fetch du navigateur pour faire l'appel vers la WebAPI,
Quand on utilise un HttpClient via le moteur d'injection, ce dernier a un handler,
Et ce handler appele la méthode javascript avec la méthode Invoke.

Cool, simple, efficace.

Moralité, c'est bien le navigateur qui fait l'appel Http et non l'implémentation initiale du HttpClient .NET.

Il ne reste plus qu'à utiliser le moteur d'injection de Blazor pour ajouter notre service PersonService et le rendre ainsi disponible pour toute notre application :

static void Main(string[] args)
        {
            var serviceProvider = new BrowserServiceProvider(configure =>
            {
                configure.Add(ServiceDescriptor.Singleton<PersonService, PersonService>());
                configure.Add(ServiceDescriptor.Singleton<ConsoleService, ConsoleService>());
            });
 
            new BrowserRenderer(serviceProvider).AddComponent<App>("app");
        }

Amusons nous avec Angular, BabylonJs et la réalité virtuelle (partie 2)

Sat, 20 Jan 2018 10:29:29 GMT

Dans la première partie de cet article, nous avons vu comment utiliser angular-cli pour créer un projet angular "classique" et intégrer babylonjs pour mettre de la 3D dans notre page web.

Le titre de cette série d'article est : ".... et la réalité virtuelle".

Vous allez me dire : pour l'instant, il y a autant de réalité virtuelle dans ton projet que de frites dans un axoa !!!

D D

(j'habite dans le pays basque et je cotoie des belges, d'ou la blague. Ok, je sors !!!)

Bref, voyons comment ajouter de la VR dans tout ca. Vous allez voir, c'est super compliqué.

VRExperience

Avec la nouvelle version de BabylonJs, on a une nouvelle méthode de notre scène qui nous permet de créer ce qu'ils appelent une expérience VR.

        this.vrExperienHelper = this.scene.createDefaultVRExperience();
        this.vrExperienHelper.enableInteractions();
        this.vrExperienHelper.displayLaserPointer = true;

Ici j'ai 3 lignes de codes, mais derrière (under the hood comme ils disent là bas), il y a plein de truc qui sont fait.

Quand on appele la méthode createDefaultVRExperience, Babylonjs se charge de créer une nouvelle caméra (non active pour l'instant) et d'ajouter un nouveau bouton (personnalisable) en bas à droite de votre écran qui permet à l'utilisateur d'entrer dans le monde de la VR :

Les deux lignes suivantes informent le helper VR que l'on veut être interactif et que l'on aime les rayons lasers (enfin que l'on ai un rayon sortant de notre manette VR).

That's it ! C'est tout, c'est fini, ca roule, ca marche. Elle est pas cool la vie ?

Enfin presque.

Quand l'utilisateur clique sur ce fameux bouton, tout va bien, on entre alors dans l'univers VR : on est immergé dans notre image 360.

MAIS

Les manettes, sont pas terribles, et si vous regardez la console du navigateur, vous constaterez qu'il y a quelques petites erreurs.

Ces erreurs sont dû au problèmes de chargement des modèles 3D qui représentent les manettes.

Car ce qu'il y a de cool avec BabylonJs, c'est qu'il vous affiche ausi les manettes dans votre univers 3D.

Les manettes VR

Donc il faut s'assurer que ces modèles 3D soient bien chargées. Concrètement, elles sont sur le site de MS (https://controllers.babylonjs.com/microsoft/) au format glb. Il faut donc être sur de pouvoir lire le format glb. Pour cela, BabylonJs fournit différents "loaders" (Paint 3D, 3DS Max, etc.). Cool.

Mais il faut intégrer ces loaders dans notre projet. D'ou, dans notre package.json, l'ajout du package babylonjs-loaders :

"babylonjs-loaders": "^3.2.0-alpha0",

La deuxième étape est de s'assurer que l'on ajoute cette référence dans notre projet. Donc dans notre app.module.ts :

import 'babylonjs-loaders';

Le plugin qui permet de charger des fichiers glb est donc référencé et chargé.

Moralité :

Quand l'utilisateur clique sur le bouton VR, si il a bien entendu un casque Windows Mixed Reality branché avec ses controlleurs, il les verra s'afficher à l'écran (ou plutôt dans son casque) :

L'étape suivante consistera à rajouter un menu intéractif (que l'on fera pparaitre grâce aux boutons de nos controlleurs).