Dans ce tutoriel, vous apprendrez à travailler avec la bibliothèque wp-api-angular qui vous permet d'interagir avec l'API WordPress de Angular 2+ applications. Cette bibliothèque prend en charge toutes les ressources WP, y compris les utilisateurs, les publications, les commentaires, les médias, les taxonomies, etc. Elle est également très simple à utiliser, vous obtiendrez l'idée en un rien de temps.

va coder les caractéristiques suivantes:

• Authentification utilisant JWT
• Liste des utilisateurs
• Liste des messages
• Création et édition des messages
• Suppression des messages

À la fin de l'article, vous Je vais me familiariser avec cette bibliothèque et je serai prêt à l'utiliser par vous-même.

Le code source de ce tutoriel est disponible sur GitHub .

Je suppose que vous utilisez Angular 5, mais tous les concepts expliqués devraient aussi être valables pour Angular 2.

Laying Foundations

Configuration de WordPress

Avant de commencer à écrire le code, il y a quelques choses à prendre en compte. Tout d'abord, notez que l'API que nous allons utiliser ne fonctionne qu'avec la version auto-hébergée de WordPress . Pour la version Web (qui peut être configurée via le site WordPress ), il existe une API distincte qui comporte de nombreux concepts similaires, bien que ce soit encore assez différent.

Vous devez également activer les permaliens pour que le client API fonctionne correctement. Pour Nginx, vous devrez ajouter la ligne suivante au fichier nginx.conf :

 try_files $ uri $ uri / /index.php?$args;

Des informations plus détaillées et des explications sur la façon d'activer les permaliens peuvent être trouvées dans ce guide du Codex WordPress .

Enfin, nous devrions prendre soin de WordPress security qui, comme ils dire, est avant tout. Pour cela, un plugin spécial appelé Authentification JWT est requis. Nous allons l'utiliser pour authentifier notre client API à l'aide de jetons spéciaux (une approche assez courante ces temps-ci).

C'est à peu près tout. Si vous souhaitez en savoir plus sur l'API WordPress en général, parcourez cet article . Lorsque vous êtes prêt, passez à l'étape suivante et voyons le client Angular WordPress en action!

Bootstrapping une application angulaire

Maintenant que nous avons préparé WordPress, créez une nouvelle application Angular en exécutant:

 ng nouveau wp-api

Cela va créer un squelette pour l'application. Nous n'allons pas discuter de sa structure à fond, mais vous pouvez trouver plus d'informations dans notre série Angular .

Ensuite, cd dans le répertoire et installez la bibliothèque elle-même: [19659021] cd wp-api
npm install -g typings
npm installer wp-api-angular –save

Nous devons maintenant importer les composants appropriés dans le fichier src / app / app.module.ts :

 // ... autres importations
import {Http} à partir de '@ angular / http';
importer {HttpClientModule, HttpClient} à partir de '@ angular / common / http';
import {
  WpApiModule,
  WpApiLoader,
  WpApiStaticLoader
} à partir de 'wp-api-angular';

WpApiModule doit également être ajouté au bloc imports . Notez que nous devons utiliser une fabrique exportée pour AoT compilation ou Ionic :

 // ... imports

@NgModule ({
  déclarations: [
        // ... omitted
  ],
  importations: [
    BrowserModule,
    FormsModule,
    HttpClientModule, // <---
    WpApiModule.forRoot({ // <---
      provide: WpApiLoader,
      useFactory: (WpApiLoaderFactory),
      deps: [Http]
    })

  ]
    // ...
})

Voici la fabrique elle-même:

 fonction d'export WpApiLoaderFactory (http: Http) {
  retourne un nouveau WpApiStaticLoader (http, 'http: // VOTRE_DOMAIN_HERE / wp-json / wp / v2 /', '');
}

N'oubliez pas de fournir votre propre nom de domaine ici!

Ajoutons enfin quelques imports au fichier app.components.ts :

 import {Component} from '@ angulaire / noyau ';
import {Observable} à partir de 'rxjs';
importer {NgForm} à partir de '@ angular / forms';
importer {HttpClientModule, HttpClient} à partir de '@ angular / common / http';
importez {En-têtes} à partir de '@ angular / http';

// ...

Nous aurons besoin de NgForm pour créer des formulaires, des modules HTTP pour interagir avec l'API et Headers pour authentifier le client.

La configuration initiale est terminée et nous pouvons continuer à la section suivante

Authentification

Avant d'interagir avec l'API, nous devons introduire un mécanisme d'authentification . Comme je l'ai déjà mentionné ci-dessus, une authentification basée sur des jetons sera utilisée, ajoutons donc une variable token à la classe d'application app.components.ts :

 exportComponent {
    jeton = null;
    // ...
}

Aussi, modifiez le fichier app.component.html en ajoutant un nouveau bloc:

Pour que cela fonctionne, un composant séparé est requis afin de le générer maintenant:

 ng generate authentication

Importez les modules nécessaires dans le fichier src / app / authentication / authentication.component.ts :

 import {Component, OnInit, Entrée, Sortie, EventEmitter} à partir de '@ angular / core' ;
importer {HttpClientModule, HttpClient} à partir de '@ angular / common / http';
// ...

Le processus d'authentification va être très simple: un utilisateur doit entrer son identifiant et son mot de passe, soumettre le formulaire, et un jeton spécial sera retourné si les informations d'identification sont correctes. Ce jeton sera ensuite utilisé pour effectuer des requêtes d'API. Par conséquent, rédigeons un utilisateur et ajoutons une entrée et une sortie pour AuthenticationComponent :

 // ...
classe d'exportation AuthenticationComponent implémente OnInit {
  utilisateur = {
    s'identifier: '',
    mot de passe: ''
  }
  Jeton @Input ();
    @Output () tokenChange = nouvel EventEmitter  ();

    // ...
}

Bien sûr, vous pouvez définir l'utilisateur comme un modèle, mais pour les besoins de cette démo, ce n'est pas obligatoire. Comme pour le constructeur, passez le HttpClient :

 // ...
constructeur (http privé: HttpClient) {}

Ensuite, codez la méthode auth . C'est aussi simple que d'envoyer une requête POST à ​​l'URL correcte avec les informations d'identification et d'attendre la réponse:

 // ...
auth () {
  this.http.post ('http: // VOTRE_DOMAIN / wp-json / jwt-auth / v1 / jeton', {
    nom d'utilisateur: this.user.login,
    mot de passe: this.user.password
  }). subscribe ((données) => {
    if (data ['token']) {// si le jeton est renvoyé
      this.token = données ['token'];
      this.tokenChange.emit (this.token);
    }
  });
}

Encore une fois, n'oubliez pas d'insérer votre nom de domaine dans l'URL.

Le composant est prêt, et la dernière chose à faire dans cette section est de créer le formulaire correspondant. Il ne devrait s'afficher que si le jeton est null . Lorsque le formulaire est soumis, la méthode auth doit être appelée:

Fouille le formulaire en ajoutant deux champs et un bouton Soumettre :

    

       Connexion 
      
    

    

       Mot de passe 
      
    

     Soumettre 

C'est tout! La fonctionnalité d'authentification est terminée, et nous pouvons commencer à jouer avec l'API

Liste des utilisateurs

Habituellement, la lecture via l'API est plus simple que l'écriture, essayons donc de lister les utilisateurs de notre site. Créer un nouveau composant UserList :

 ng générer une liste d'utilisateurs de composants

Dans le fichier src / app / user-list / user-list.component.ts vous devez importer le module WpApiUsers ainsi que d'autres modules: [19659026] import {Component, OnInit, Input} à partir de '@ angular / core';
import {WpApiUsers} à partir de 'wp-api-angular';
importez {En-têtes} à partir de '@ angular / http';
// ...

Nous allons stocker les utilisateurs dans le tableau des utilisateurs qui est vide d'initiallité:

 // ...
classe d'exportation UserListComponent implémente OnInit {
    utilisateurs = [];
}

Passez WpApiUsers dans le constructeur et appelez une méthode getUserList :

 // ...
constructeur (wpApiUsers privé: WpApiUsers) {
  this.getUserList ();
}

Maintenant, nous devons coder le getUserList . Chaque méthode présentée par le client API retourne une observable qui peut être convertie en promesse en utilisant to Promise . Donc, pour obtenir une liste de tous les utilisateurs, nous devrions appeler la méthode getList la convertir en promesse et affecter la variable users au tableau retourné:

 //. ..
getUserList () {
  this.wpApiUsers.getList ()
  .promettre()
  .then (réponse => {
    let json: any = réponse.json ();
    this.users = json;
  })
}

Comme vous le voyez, rien de complexe ici. Fait intéressant, nous n'avons même pas besoin d'un jeton pour exécuter cette méthode. Par conséquent, rendez simplement les utilisateurs dans un cycle:

  
 Utilisateurs: 
  

      Nom: {{user.name}}
  

Le composant liste d'utilisateurs doit être ajouté au fichier app.component.html :

Travailler avec des publications

Créer des publications

Essayons maintenant de implémenter une fonctionnalité un peu plus complexe et permettre aux utilisateurs d'ajouter de nouveaux messages via l'API. Créer un composant post-nouveau distinct:

 ng générer un composant post-nouveau

Importez les modules nécessaires dans le fichier filesrc / app / post-new / post-new.component.ts :

 import {Component, OnInit, Input} à partir de '@ angular / core' ;
importer {WpApiPosts} à partir de 'wp-api-angular';
importez {En-têtes} à partir de '@ angular / http';
// ...

Le module WpApiPosts va être l'étoile principale ici

Ensuite, fournissez le jeton en entrée et rédigez un modèle post :

 // ...
la classe d'exportation PostNewComponent implémente OnInit {
  Jeton @Input ();
  new_post = {
    Titre: '',
    contenu: '',
    statut: 'publier'
    }
}

À tout le moins, chaque message devrait contenir un titre, du contenu et le statut (que nous codons en dur publions pour publier instantanément le nouveau message).

Un constructeur devrait accepter les WpApiPosts :

 // ...
constructeur (private wpApiPosts: WpApiPosts) {}

Maintenant, créons une méthode pour ajouter le message. Tout d'abord, codez la logique d'authentification en définissant l'en-tête Autorisation :

 // ...
createPost () {
  let headers: En-têtes = nouveaux en-têtes ({
    «Autorisation»: «Porteur» + this.token
    });
}

Maintenant nous pouvons simplement prendre la variable headers et la passer à la méthode create du module WpApiPosts :

 // ...
createPost () {
  let headers: En-têtes = nouveaux en-têtes ({
    «Autorisation»: «Porteur» + this.token
  });

  this.wpApiPosts.create (this.new_post, {en-têtes: en-têtes})
  .promettre()
  .then (réponse => {
    console.log (réponse);
  })
}

Qu'en est-il du formulaire? Eh bien, c'est assez simple vraiment:

  
  Post Creation 
    

      

         Publier le titre 
        
      

      

         Publier le contenu 
        
      

       Submit 
    

Lorsque le formulaire est soumis, nous appelons la méthode createPost .

N'oubliez pas de rendre le composant post-nouveau :

  
  Veuillez autoriser à créer un message 
   

Nous vérifions que le jeton est activé, et sinon, nous demandons à l'utilisateur de s'authentifier.

Liste des messages

Bon, nous avons ajouté la possibilité de créer les messages. Pourquoi ne les affichons-nous pas aussi sur la page? Créez encore un autre composant:

 ng generate post-list de composant

Importez les modules nécessaires, y compris WpApiPosts dans le fichier src / app / post-list / post-list.component.ts :

 import {Component, OnInit, Entrée} à partir de '@ angular / core';
importer {WpApiPosts} à partir de 'wp-api-angular';
importez {En-têtes} à partir de '@ angular / http';
// ...

Fournissez l'entrée et le tableau posts :

 // ...
classe d'exportation PostListComponent implémente OnInit {
  Jeton @Input ();
    messages = [];
}

Codez le constructeur qui devrait appeler la méthode getPosts :

 // ...
constructeur (private wpApiPosts: WpApiPosts) {
  this.getPosts ();
}

Nous n'avons pas besoin d'authentifier pour aller chercher les messages, alors utilisons la même approche que précédemment:

 // ...
getPosts () {
  this.wpApiPosts.getList ()
  .promettre()
  .then (réponse => {
    let json: any = réponse.json ();
    this.posts = json;
  });
}

Maintenant rendre le tableau des messages:

  
 Latests Messages: 
  

  

    
 
    
 
    

  

Enfin, affiche le composant:

Détruire les poteaux

Ensuite, j'aimerais ajouter une capacité à détruire les poteaux. Cette fonctionnalité peut être implémentée dans le même composant PostList . Il suffit d'ajouter un bouton Supprimer à côté de chaque message:

  
 Latests Messages: 
  

  

    

    

         Delete 
    

  

Notez que ce bouton est affiché uniquement si le jeton est présent. En outre, modifiez le composant en ajoutant la méthode deletePost :

 // src / app / post-list / post-list.component.ts
// ...
deletePost (id: numéro, index: numéro) {
  let headers: En-têtes = nouveaux en-têtes ({
    «Autorisation»: «Porteur» + this.token
  });

  this.wpApiPosts.delete (id, {headers: headers})
  .promettre()
  .then (réponse => {
    if (réponse ['ok'] == true) {
      this.posts.splice (index, 1);
    }
  })
}

Fondamentalement, rien de nouveau ici. Nous ajoutons le jeton aux en-têtes et appelons la méthode delete qui accepte l'ID du poste et son index dans le tableau posts . Si la requête réussit, supprimez le message du tableau.

Modification des messages

La dernière fonctionnalité que nous allons présenter aujourd'hui est la possibilité de modifier les messages. Créons un nouveau composant:

 ng generate post-edit

Ce composant sera référencé à partir de PostList . Plus précisément, je voudrais ajouter un bouton Modifier à côté de chaque publication et afficher le modèle PostEdit dès que l'on clique dessus:

  
 Latests Messages: 
  

  

    

    

    

     Supprimer 
     Modifier 
    

  



   

Modifiez le PostListComponent en introduisant une variable editingPost et une méthode updatePost qui va affecter le editingPost à un valeur:

 // src / app / post-list / post-list.component.ts
// ...
classe d'exportation PostListComponent implémente OnInit {
  Jeton @Input ();
  messages = [];
    editingPost = null;

    updatePost (publication) {
      this.editingPost = poste;
    }
}

Passez au PostEditComponent et importez tous les modules requis:

 // src / app / post-edit / post-edit.component.ts
importer {Composant, OnInit, Entrée, EventEmitter, Sortie} à partir de '@ angular / core';
importer {WpApiPosts} à partir de 'wp-api-angular';
importez {En-têtes} à partir de '@ angular / http';
// ...

Ce composant va avoir deux entrées: le jeton et le post actuel à éditer. En outre, nous aurons une sortie ( EventEmitter ):

 // ...
la classe d'exportation PostEditComponent implémente OnInit {
  Jeton @Input ();
  @Input () post;
  @Output () finish = new EventEmitter  ();
  post_edit = {
    Titre: '',
    contenu: ''
    }
}

Dès que le composant est initialisé, affectez la variable post_edit avec le titre et le contenu appropriés tirés de la variable post :

 // ...
ngOnInit () {
  this.post_edit ['title'] = this.post.title.rendered;
  this.post_edit ['content'] = this.post.content.rendered;
}

Maintenant, codez la méthode updatePost qui va effectuer l'authentification. Mettre à jour le message et émettre un événement:

 // ...
updatePost () {
  let headers: En-têtes = nouveaux en-têtes ({
    «Autorisation»: «Porteur» + this.token
  });

  this.wpApiPosts.update (this.post.id, this.post_edit, {en-têtes: en-têtes})
  .promettre()
  .then (réponse => {
    this.finish.emit (null);
  })
}

Notez que la méthode de mise à jour accepte à la fois l'identifiant du message et la nouvelle valeur du titre et du contenu.

Voici le formulaire pour modifier le post:

  
  Post Editing 
    

      

         Publier le titre 
        
      

      

         Publier le contenu 
        
      

       Soumettre 
    

Voilà: la fonction d'édition est prête! Vous pouvez maintenant démarrer le serveur en exécutant:

 ng serve --open

et jouez avec l'application pour vous assurer que tout fonctionne correctement.

Conclusion

Dans cet article, nous avons discuté de l'utilisation du client API WordPress pour Angular. Nous l'avons vu en action en introduisant la fonction d'authentification, en répertoriant les utilisateurs et les publications, ainsi qu'en ajoutant la possibilité de créer et de manipuler les publications. Ce client vous permet de travailler avec d'autres ressources comme les médias et les commentaires, mais toutes ces interactions sont très similaires à celles dont nous avons parlé ici.

J'espère que vous êtes maintenant prêt à appliquer les informations présentées ici, mais n'hésitez pas à m'envoyer vos questions! Comme toujours, merci de rester avec moi et jusqu'à la prochaine fois.

Ilya Bodrov est professeur d'informatique personnelle, ingénieur senior travaillant chez Campaigner LLC, auteur et assistant pédagogique chez Sitepoint et conférencier à Moscou Aviations Institut. Ses principaux langages de programmation sont Ruby (avec Rails) et JavaScript. Il aime coder, enseigner aux gens et apprendre de nouvelles choses. Ilya possède également des certificats Cisco et Microsoft et travaillait comme tuteur dans un centre éducatif pendant quelques années. Pendant son temps libre, il tweete, écrit des articles pour son site participe à des projets OpenSource, fait du sport et joue de la musique.