Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Ionic 5 / Angular: consumir una API Rest de WordPress

 En este tutorial, veremos cómo crear una aplicación móvil multiplataforma y un cliente de WordPress para Android, iOS y Windows Universal Platform usando Ionic 5 / Angular.

Si tiene un sitio web o blog de WordPress y desea crear una versión móvil del mismo, simplemente síganos. Vamos a cubrir todos los pasos necesarios para crear un cliente móvil que se conecte y consuma la API de WordPress.

Requisitos del tutorial

Este tutorial tiene algunos requisitos, debe tener instalado Ionic CLI 4. También necesita tener un sitio web de WordPress instalado de forma local o remota.

Antes de WordPress 4.7, debe instalar el complemento API de WordPress - WP-API. Para WordPress 4.7+, WP-API está integrado en el núcleo para que no tenga que hacer nada.

Generando un nuevo proyecto Ionic 5

Comencemos generando un nuevo proyecto Ionic 5 basado en Angular. Abra su símbolo del sistema en Windows o su terminal en Linux / MAC e ingrese el siguiente comando:

ionic start wp-ionic blank --type=angular 

Espere hasta que finalice el comando y luego navegue a la carpeta de su proyecto y sírvase para asegurarse de que todo esté funcionando como se esperaba:

cd wp-ionic 
ionic serve 

Integrando WordPress con Ionic 5

Vamos a utilizar un cliente API de WordPress para JavaScript que está diseñado específicamente para funcionar con WordPress 4.7+. Si está utilizando WordPress 4.6 o una versión anterior con el antiguo complemento WP Rest API, algunos comandos no funcionarán.

En primer lugar, obtenga el cliente desde este enlace .

A continuación, descomprima el contenido del wpapi.ziparchivo en la carpeta app / assets .

A continuación, abra el archivo index.html de su proyecto de Ionic 5 e incluya la biblioteca antes de los scripts de Ionic.

<script src="assets/wpapi.js"></script>

Eso es todo lo que tenemos que hacer, para poder utilizar el cliente de la API de WordPress Rest en nuestro proyecto Ionic 5 / Angular.

Generando un proveedor de servicios

Ahora generemos un proveedor de servicios Ionic 5 / Angular para encapsular la lógica del cliente de la API Rest de WordPress. Asegúrese de estar en el directorio de su proyecto y luego ejecute el siguiente comando:

ionic generate service WPService 

Abra el proveedor generado desde el archivo src / Suppliers / wp-service.ts .

Para poder acceder a la API de JavaScript del cliente desde TypeScript, agregue el siguiente código:

declare var WPAPI : any;        

A continuación, conectemos a nuestro punto final de la API de WordPress:

@Injectable()
export class WPService {
wp : any ;

constructor(public http: Http) {

    console.log('Hello WPService Provider');
    this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' });
    console.log(wp);

}
//....

Nota: estamos utilizando una instalación de WordPress local. Si ese no es su caso, debe cambiar el punto final para que apunte al nombre de dominio de su sitio web de WordPress.

Asegúrese de agregar este proveedor a la lista de proveedores en el archivo src / app / app.module.ts :

import { WPService } from '../providers/wp-service';

@NgModule({
    /* .... */

providers: [
    StatusBar,
    SplashScreen,
    WPService,
    {provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule {}

Ahora generemos una página de Publicaciones usando:

ionic g page Posts 

Vuelva a incluir la página en el archivo src / app / app.module.ts :

import { PostsPage } from '../pages/posts/posts';


@NgModule({
declarations: [
    MyApp,
    PostsPage
],
imports: [
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    PostsPage
],
providers: [
    StatusBar,
    SplashScreen,
    WPService,
    {provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule {}

También agreguemos un menú a nuestra aplicación para que podamos acceder a nuestra (s) página (s).

Abra o agregue un archivo app.html y pegue este código para crear un menú que tenga enlaces a todas las páginas de nuestro proyecto:

<ion-menu [content]="content">
<ion-header>
    <ion-toolbar>
    <ion-title>Menu</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

    </button>
    </ion-list>
</ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Debe tener el código en src / app.component.ts similar al siguiente:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { PostsPage } from '../pages/posts/posts';


    @Component({
    templateUrl: 'app.html'
    })
    export class MyApp {
    @ViewChild(Nav) nav: Nav;

    rootPage: any = PostsPage;

    pages: Array<{title: string, component: any}>;

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
        this.initializeApp();

        // used for an example of ngFor and navigation
        this.pages = [
        { title: 'Posts', component: PostsPage },
        ];

    }

    initializeApp() {
        this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        });
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
    }
    }

No olvide agregar un botón para activar y desactivar el menú en sus páginas:

<ion-header>
<ion-navbar>
    <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Posts</ion-title>
</ion-navbar>
</ion-header>

Nota: Si ha generado su proyecto basado en la plantilla de menú, ya tendrá un menú configurado y no tiene que seguir todos estos pasos.

El siguiente paso ahora es inyectar el WPServiceproveedor a través del proveedor de PostsPage:

Abra el archivo src / pages / posts / posts.ts y luego agregue:

/* ... */
import { WPService } from '../../providers/wp-service';

@Component({
selector: 'page-posts',
templateUrl: 'posts.html'
})
export class PostsPage {

constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {}

ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
}
}

Continúe y sirva su proyecto usando el siguiente comando:

ionic serve 

Debería ver un registro de la consola que imprime el objeto WPAPI, si todo va bien.

Visualización de publicaciones de WordPress

Después de haber integrado con éxito el cliente de la API de WordPress Rest dentro de nuestra aplicación Ionic 5 / Angular, ahora busquemos y mostremos publicaciones de WordPress en nuestra aplicación móvil.

Así que adelante, abra el archivo app / Suppliers / wp-service.ts y agreguemos un método para buscar publicaciones usando la API del cliente REST:

@Injectable()
export class WPService {
wp : any ;

constructor(public http: Http) {
    console.log('Hello WPService Provider');
    this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' });
    console.log(this.wp);

}
public posts(){
    return this.wp.posts().then(function( data ) {
        // do something with the returned posts
        //console.log(data);
        var paging = data._paging;
        var results = [];
        for(var i = 0; i < paging.total ; i++)
        {
            results.push(data[i]);
        }
        return results;
    }).catch(function( err ) {
        // handle error
        console.log(err);
        return err;
    }); 
}

}

A continuación, abra la página PostsPage y agregue el siguiente comando:

@Component({
selector: 'page-posts',
templateUrl: 'posts.html'
})
export class PostsPage {
public posts ;

constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {}

ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
    var that = this;
    this.wpService.posts().then(function(r){

        that.posts = r;
        console.log(that.posts);

    }) 
}
}

Después de obtener las publicaciones, debemos mostrarlas, así que abra el archivo src / pages / posts / posts.html y agregue el siguiente código:

<ion-content padding>
<ion-list>
    <button ion-item *ngFor="let post of posts" (click)="itemTapped($event, post)">
    <ion-icon name="list" item-left></ion-icon>
    { { post.title.rendered } }
    </button>
</ion-list>

</ion-content>

Debería ver una lista de publicaciones, según las publicaciones que tenga en su sitio web de WordPress.

## Conclusión

Ese es el final de este tutorial. Es solo una demostración básica que muestra cómo usar la API de WordPress Rest en las aplicaciones Ionic 5 basadas en Angular, pero puede desarrollar su aplicación para incluir cosas más avanzadas, como buscar y mostrar categorías, paginación de publicaciones y muchas otras características.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas