Apr\u00e8s g\u00e9n\u00e9ration automatique du provider par ionic, on obtient ce fichier la :<\/p>\n
Commen\u00e7ons par effacer le contenu du constructeur qui restera vide puis ajoutons les d\u00e9pendances n\u00e9cessaires au fonctionnement du provider. Dans la partie HTTP, nous aurons besoin de l’interface Response<\/em> qui formatera, comme son nom l’indique, la r\u00e9ponse \u00e0 notre requ\u00eate REST. Comme cette requ\u00eate est asynchrone, il nous faudra aussi l’interface Observable<\/em> situ\u00e9e dans RXjs ainsi qu’un op\u00e9rateur map<\/em> qui permettra d’avoir une r\u00e9ponse format\u00e9e comme on le souhaite. Cela nous donne donc :<\/p>\n Le but de ce provider est de r\u00e9cup\u00e9rer des posts donc nous allons aussi d\u00e9finir ici la forme qu’ils doivent avoir c’est \u00e0 dire l’interface qu’ils doivent impl\u00e9menter.<\/p>\n L’interface se d\u00e9finit tr\u00e8s simplement par le mot cl\u00e9 Interface<\/em>, voyez plut\u00f4t : <\/p>\n Ce code se placera avant notre d\u00e9claration de classe afin de pouvoir utiliser le type Post dedans.<\/p>\n Pour r\u00e9cup\u00e9rer nos posts, nous aurons besoin de deux m\u00e9thodes, l’une donnera la liste des posts et l’autre un post en particulier. Commen\u00e7ons par la liste des posts<\/p>\n Afin d’avoir un peu de latitude dans la liste de posts, on va int\u00e9grer deux param\u00e8tres \u00e0 notre requ\u00eate. Le premier est le param\u00e8tre Page qui va nous permettre de paginer nos r\u00e9sultats pour \u00e9viter d’avoir une liste de posts interminable. Par d\u00e9faut le nombre de posts par page est limit\u00e9 \u00e0 10, nous le limiterons \u00e0 8 pour une question de mise en page.<\/p>\n Le deuxi\u00e8me param\u00e8tre est la cat\u00e9gorie du post afin de filtrer nos r\u00e9sultats et de n’afficher que ceux correspondant \u00e0 la cat\u00e9gorie Blog par exemple. On pourra ensuite dans chaque page choisir la cat\u00e9gorie qui convient, ou pas. Si une cat\u00e9gorie en particulier n’est pas pr\u00e9cis\u00e9e, on affichera tout sauf les cat\u00e9gories exclues par le param\u00e8tre categories_exclude<\/em>. Voila donc le code de cette m\u00e9thode :<\/p>\n Dans la premi\u00e8re partie, on filtre les cat\u00e9gories puis dans la deuxi\u00e8me on cr\u00e9\u00e9 la requ\u00eate HTTP avec la m\u00e9thode GET<\/em> et on mappe le r\u00e9sultat de type Response<\/em>.<\/p>\n J’ai volontairement laiss\u00e9 la gestion des cat\u00e9gories et la pagination sous la forme if…else<\/em> mais vous pouvez la reformuler sous la forme d’op\u00e9rateurs ternaires ce qui rendra le code plus concis.<\/p>\n Comme vous le voyez \u00e0 certains endroits, certaine variables sont apport\u00e9es par un objet config<\/em>. Il s’agit du provider que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment qui va contenir toutes les valeurs de configuration comme les URLs de base pour les requ\u00eates HTTP, les cat\u00e9gories \u00e0 exclure etc.<\/p>\n Voici le code du provider de configuration :<\/p>\n En ce qui concerne les cat\u00e9gories \u00e0 exclure, c’est \u00e0 vous d’indiquer leur ID dans le tableau excludeCats<\/em>. Pour le reste il vous suffit d’indiquer l’Url de votre site et le dossier dans lequel vous stockez les images de votre th\u00e8me dans mediaUrl<\/em><\/p>\n Passons maintenant, apr\u00e8s cette digression, \u00e0 la deuxi\u00e8me m\u00e9thode de notre classe PostsProvider<\/em>, celle qui r\u00e9cup\u00e8re un post en particulier.<\/p>\n Le code sera encore plus simple puisqu’il n’y aura pas de param\u00e8tres \u00e0 traiter :<\/p>\n Les param\u00e8tres \u00e0 passer \u00e0 la m\u00e9thode sont l’id du post demand\u00e9 et le post-type. Faire une requ\u00eate avec un post-type \u00e0 Post nous renverra un post et \u00e0 Page nous renverra \u00e9videmment une page.<\/p>\n Voila pour le provider principal et pour celui de configuration qui sont assez simples. Nous attaquerons les components dans le prochain article avec le component Post.<\/p>\n N’h\u00e9sitez pas \u00e0 poser des questions en commentaires.<\/p>\n","protected":false},"excerpt":{"rendered":" Voici la deuxi\u00e8me partie de ce tutoriel o\u00f9 je vous montre comment cr\u00e9er un th\u00e8me Wordpress avec Ionic 3. Pour cet article nous allons voir comment fonctionne le provider principal qui se connectera \u00e0 l’API REST pour r\u00e9cup\u00e9rer les posts.<\/p>\n","protected":false},"author":3,"featured_media":587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"\nimport { Http } from '@angular\/http';
\nimport { Injectable } from '@angular\/core';
\n\/*
\n Generated class for the TestProvider provider.
\nSee https:\/\/angular.io\/guide\/dependency-injection for more info on providers
\nand Angular DI.
\n*\/
\n@Injectable()
\nexport class TestProvider {
\n constructor( public http:Http ) {
\n console.log('Hello TestProvider Provider');
\n }
\n}
\n<\/code><\/p>\nimport { Injectable } from '@angular\/core';
\nimport { Http, Response } from '@angular\/http';
\nimport { Observable } from 'rxjs\/Observable';
\nimport 'rxjs\/add\/operator\/map';
\nimport { ConfigProvider } from '..\/..\/providers\/config\/config';
\n\/*
\n Generated class for the PostProvider provider.
\n*\/
\n@Injectable()
\nexport class PostsProvider {
\n constructor( public http: Http ) {}
\n}
\n<\/code><\/p>\ninterface Post {
\n title: {
\n rendered: string
\n },
\n excerpt: {
\n rendered: string
\n },
\n content: {
\n rendered: string
\n },
\n categories: {
\n 0: number
\n },
\n date: string,
\n data: {
\n status: number
\n }
\n}
\n<\/code><\/p>\nLa premi\u00e8re m\u00e9thode<\/h3>\n
getPosts( page, cat ): Observable<Post[]> {
\n let ext: string = "?per_page=8";
\n if(cat != ''){
\n cat = '&categories=' + cat;
\n }else{
\n cat = '&categories_exclude=' + this.config.excludeCats;
\n }
\n if(page > 1){<br \/>
\n ext = ext + '&page=' + page + cat;
\n }else{
\n ext = ext + cat;
\n }
\n return this.http
\n .get(this.config.baseUrl + this.config.postUrl + ext)
\n .map((res: Response) => res.json());
\n}
\n<\/code><\/p>\nLe provider de configuration<\/h3>\n
import { Injectable } from '@angular\/core';
\n\/*
\n Generated class for the ConfigProvider provider.
\n*\/
\n@Injectable()
\nexport class ConfigProvider {
\n constructor() {}
\n baseUrl: string = 'https:\/\/www.monsite.fr\/wp-json\/wp\/v2\/';
\n postUrl: string = 'posts\/'
\n comUrl: string = 'comments';
\n mediaUrl: string = "https:\/\/www.monsite.fr\/img\/";
\n excludeCats: Array<number> = [11,12];
\n}
\n<\/code><\/p>\nLa deuxi\u00e8me m\u00e9thode<\/h3>\n
getPost( id, postType ): Observable<any> {
\n return this.http
\n .get(this.config.baseUrl + postType + '\/' + id)
\n .map((res: Response) => res.json());
\n}
\n<\/code><\/p>\n