Angular/Tutorials/OpenClassRooms L Interagissez avec un serveur avec HttpClient : Différence entre versions

De WikiSys
Aller à : navigation, rechercher
(vidéo 12:45)
(vidéo 12:45)
Ligne 243 : Ligne 243 :
 
  git commit -m "Fin du Cours avec Les appareils"
 
  git commit -m "Fin du Cours avec Les appareils"
 
   a94ae31b46ded27fb154bf3c0075d8a802f7ee94
 
   a94ae31b46ded27fb154bf3c0075d8a802f7ee94
 +
 +
  git commit -m ".gitignore modifié et détails"
 +
  62f49e61c596d4f64603e87c652770811a465a60

Version du 12 juin 2019 à 09:58

Interagissez avec un serveur avec HttpClient

Dans une application Angular, vous aurez très souvent besoin de faire des appels à un backend ou à un autre serveur — pour enregistrer ou charger des données, par exemple, ou pour effectuer des calculs ou des modifications de données que vous ne souhaitez pas faire faire par le frontend.

Angular met à disposition un service appelé HttpClient qui permet de créer et d'exécuter des appels HTTP (fait par AJAX - Asynchronous JavaScript and XML) et de réagir aux informations retournées par le serveur.

Dans ce chapitre, vous allez configurer un backend avec le service Firebase de Google.

Ce service permet la création d'un backend complet sans coder, et node comprend énormément de services, dont l'authentification, une base de données NoSQL et un stockage de fichiers.

Dans un chapitre ultérieur, vous apprendrez à utiliser les fonctions mises à disposition par Firebase afin de mieux intégrer le service.

Pour ce chapitre, vous allez simplement utiliser l'API HTTP afin de comprendre l'utilisation de HttpClient .

Préparez le backend

  • Allez à firebase.com,
  • créez un compte Google ou authentifiez-vous si vous en avez déjà un
  • et créez un nouveau projet Firebase : les-appareils

Vous pouvez le domicilier dans votre pays de résidence et lui donner le nom que vous voulez.

Une fois arrivé sur la console,

  • allez dans Database
  • et choisissez le Realtime Database.
  • mode test

Afin d'éviter tout problème d'authentification pour l'instant, allez dans la section Règles et définissez read et write en true , puis publiez les règles modifiées :

Revenez à la section Données et notez l'URL de votre base de données, vous allez en avoir besoin pour configurer les appels HTTP :

https://les-appareils.firebaseio.com/

Le backend est maintenant prêt, et vous allez pouvoir intégrer HttpClient à votre application des appareils électriques.

Envoyez vers le backend

vidéo : 2:35

Pour avoir accès au service HttpClient , il faut tout d'abord ajouter HttpClientModule , importé depuis @angular/common/http , à votre AppModule  :

app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
],

Vous allez utiliser HttpClient , dans un premier temps, pour la gestion des données de la liste d'appareils.

Vous allez donc l'injecter dans AppareilService , en y ayant auparavant ajouté le décorateur @Injectable() (importé depuis @angular/core ) :

Si votre service n'avait pas encore de constructor, créez-le pour injecter HttpClient .

./services/appareil.service.ts
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()

export class AppareilService {

  appareilsSubject = new Subject<any[]>();

  private appareils = [
    {
      id: 1,
      name: 'Machine à laver',
      status: 'éteint'
    },
    {
      id: 2,
      name: 'Frigo',
      status: 'allumé'
    },
    {
      id: 3,
      name: 'Ordinateur',
      status: 'éteint'
    }
  ];

  constructor(private httpClient: HttpClient) { }

4:00 vidéo

Vous allez d'abord créer la méthode saveAppareilsToServer qui va enregistrer l'array appareils dans la base de données au endpoint /appareils par la méthode POST :

./services/appareil.service.ts
saveAppareilsToServer() {

    this.httpClient
      .post('https://les-appareils.firebaseio.com/appareils.json', this.appareils)
      .subscribe(   /* réaction à la réponse du serveur */
        () => { 
          console.log('Enregistrement terminé !');
        },
        (error) => {
          console.log('Erreur ! : ' + error);
        }
      );

}

Analysez cette méthode :

  • la méthode post() , qui permet de lancer un appel POST,
    • prend comme premier argument l'URL visée,
    • et comme deuxième argument le corps de l'appel, c'est-à-dire ce qu'il faut envoyer à l'URL ;
  • l'extension .json de l'URL est une spécificité Firebase, pour lui dire que vous lui envoyez des données au format JSON ;
  • la méthode post() retourne un Observable — elle ne fait pas d'appel à elle toute seule. C'est en y souscrivant que l'appel est lancé ;
  • dans la méthode subscribe() , vous prévoyez le cas où tout fonctionne et le cas où le serveur vous renverrait une erreur.

Créez maintenant un bouton dans AppareilViewComponent qui déclenche cette sauvegarde

(en passant, si vous ne l'avez pas encore fait, vous pouvez retirer l'activation conditionnelle des boutons "Tout allumer" et "Tout éteindre") :

./appareil-view/appareil-view.component.html
<button class="btn btn-success"
        (click)="onAllumer()">Tout allumer</button>

<button class="btn btn-danger"
        (click)="onEteindre()">Tout éteindre</button>

<button class="btn btn-primary"
        (click)="onSave()">Enregistrer les appareils</button>
./appareil-view/appareil-view.component.ts
onSave() {
    this.appareilService.saveAppareilsToServer();
}

Enregistrez le tout, et cliquez sur le bouton que vous venez de créer : vous devez avoir votre message de réussite qui apparait dans la console. Si vous regardez maintenant la console Firebase :

Firebase a créé un nouveau node sous appareils avec un identifiant unique, et y a enregistré votre array appareils .

vidéo 7:30 méthode post

git commit -m "vidéo 7:30 méthode post  HttpClient Firebase"
f6c281d5f84166b7d73f4f6dffd566ca9c93fb80

Cependant, si vous cliquez plusieurs fois sur ce bouton, Firebase continuera à créer de nouveaux nodes, et dans ce cas de figure, ce n'est pas le comportement souhaité.

vidéo 7:35 put

Il faudrait que chaque enregistrement écrase le précédent : pour cela, utilisez plutôt la méthode put() (il n'y a pas besoin de changer les arguments, car les méthodes put() et post() prennent les deux mêmes premiers arguments) :

./services/appareil.service.component.ts
saveAppareilsToServer() {
    this.httpClient
      .put('https://httpclient-demo.firebaseio.com/appareils.json', this.appareils)
      .subscribe(
        () => {
          console.log('Enregistrement terminé !');
        },
        (error) => {
          console.log('Erreur ! : ' + error);
        }
      );
}

Maintenant, quand vous enregistrez les données, votre console Firebase montre le node suivant :

Ainsi, vous savez envoyer des données vers un serveur avec les méthodes POST et PUT.

vidéo 8:00 put

 git commit -m "vidéo 8:00 méthode put  HttpClient Firebase"
 357bc507ddace70b4f8fe31641ac50a2d813644d

Pour la suite, vous allez intégrer la requête GET pour récupérer et traiter des données depuis le serveur.

Recevez depuis le backend

Afin de demander la liste des appareils (maintenant stocké au endpoint /appareils ), vous allez créer une nouvelle méthode qui emploie la méthode get() dans AppareilService  :

./services/appareil.service.ts
getAppareilsFromServer() {
    this.httpClient
      .get<any[]>('https://les-appareils.firebaseio.com/appareils.json')
      .subscribe(
        (response) => {
          this.appareils = response;
          this.emitAppareilSubject();
        },
        (error) => {
        console.log('Erreur ! : ' + error);
        }
      );
}

Comme pour post() et put() , la méthode get() retourne un Observable, mais puisqu'ici, vous allez recevoir des données, TypeScript a besoin de savoir de quel type elles seront (l'objet retourné est d'office considéré comme étant un Object).

Vous devez donc, dans ce cas précis, ajouter <any[]> pour dire que vous allez recevoir un array de type any , et que donc TypeScript peut traiter cet objet comme un array : si vous ne le faites pas, TypeScript vous dira qu'un array ne peut pas être redéfini comme Object.

vidéo 11:30 get

 git commit -m "vidéo 11:30 méthode get  HttpClient Firebase"
 9e31180c484c7d07ac24d0f04d53a763fdf3d4cb

Vous pouvez maintenant vider l'array appareils du service et intégrer un bouton au component permettant de déclencher la méthode getAppareilsFromServer()  :

./appareil-view/appareil-view.component.html
<button class="btn btn-success"
        (click)="onAllumer()">Tout allumer</button>
<button class="btn btn-danger"
        (click)="onEteindre()">Tout éteindre</button>
<button class="btn btn-primary"
        (click)="onSauvegarder()">Enregistrer les appareils</button>
<button class="btn btn-primary"
        (click)="onRecuper()">Récupérer les appareils</button>
./appareil-view/appareil-view.component.ts
onRecuperer() {
    this.appareilService.getAppareilsFromServer();
}

Maintenant, vous pouvez ajouter ??? de nouveaux appareils, en modifier l'état et les sauvegarder, puis récupérer la liste sauvegardée.

Il serait également possible de rendre automatique le chargement et l'enregistrement des appareils (par exemple en appelant la méthode getAppareilsFromServer() dans ngOnInit() , et saveAppareilsToServer() après chaque modification), mais j'ai souhaité vous laisser la possibilité de les exécuter manuellement afin de voir le résultat de manière plus concrète.

Dans ce chapitre, vous avez appris à passer des appels à un serveur HTTP avec le service HttpClient .

Vous avez utilisé un backend Firebase pour cette démonstration : en effet, Firebase propose une API beaucoup plus flexible que des appels HTTP simples afin de profiter pleinement des services proposés.

Dans les prochains chapitres de ce cours, vous allez apprendre à intégrer certains des services Firebase dans votre application.

vidéo 12:45

  git commit -m "Fin du Cours avec Les appareils"

 a94ae31b46ded27fb154bf3c0075d8a802f7ee94

 git commit -m ".gitignore modifié et détails"
 62f49e61c596d4f64603e87c652770811a465a60