Cómo consumir WordPress Rest API en Ionic 6 Angular

Joan Manuel Gregorio Pérez 17 diciembre, 2022

102 4 minutos de lectura

En este tutorial de Ionic WordPress REST API, aprenderá cómo implementar WordPress REST API en la aplicación Ionic Angular. Le daremos un ejemplo simple de la API de WordPress Ionic desde cero.

Crearemos el proyecto Ionic Angular utilizando la API HttpClient más potente y te enseñaremos cómo consumir la API REST de WordPress en la aplicación Ionic.

WordPress es un CMS (sistema de gestión de contenido) gratuito y de código abierto formulado en PHP y alineado con una base de datos MySQL o MariaDB. WordPress es una plataforma de blogs única. Puede usarlo para crear sitios web impecables y más rápidos.

El ecosistema intuitivo de wordpress es flexible y menos complicado, y proporciona un montón de características. Puede crear casi cualquier tipo de funcionalidad con bastante rapidez debido a su característica de complemento más popular.

La API REST de WordPress es una interfaz que ayuda a los desarrolladores a acceder a WordPress desde el exterior.

En esta guía, aprenderá cómo acceder al sitio de blog de WordPress y crear un sitio de blog iónico interactivo utilizando la API de descanso de WordPress.

Ejemplo de API REST de WordPress angular de Ionic 6

Paso 1: Instalar la aplicación Ionic
Paso 2: Crear páginas de blog
Paso 3: Agregar módulo de cliente HTTP
Paso 4: Actualizar rutas
Paso 5: Implementar la API de WordPress
Paso 6: Mostrar datos de WordPress en Ionic
Paso 7: Ver aplicación en el navegador

Instalar la aplicación Ionic

Bienvenido al primer paso del tutorial de la API de wordpress iónico; echaremos un vistazo a cómo instalar el CLI iónico para el desarrollo iónico.

npm install -g @ionic/cli

Comprender la implementación de API en ionic desde un punto de vista más teórico requiere que una nueva aplicación iónica esté lista.

Para eso, use el comando para crear el proyecto iónico.

ionic start ionic-wordpress-demo blank --type=angular

Eliminar errores de tipo

Debe eliminar los errores de tipo estricto, asegúrese de establecer angularCompilerOptions en el archivo tsconfig.json.“strictTemplates”: false

Crear páginas de blog

En este paso, necesitamos crear páginas para incorporar y mostrar datos obtenidos de la API de wordpress.

ionic g page blog

ionic g page single

Agregar módulo de cliente HTTP

Para realizar solicitudes HTTP, debe agregar HttpClientModule desde el paquete ‘@angular/common/http’ en el archivo app.modulet.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


import { HttpClientModule } from '@angular/common/http';



@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

export class AppModule {}

Actualizar rutas

Revisaremos el archivo app/app-routing.module.ts; debe actualizar la matriz Routes, proteger la ruta principal, cambiar redirectTo a la página del blog y agregar el identificador en la página única.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then( m => m.BlogPageModule)
  },
  {
    path: 'single/:id',
    loadChildren: () => import('./single/single.module').then( m => m.SinglePageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Implementar la API de WordPress en Ionic

A continuación, veremos la integración de API en ionic. Nos fijamos en el servicio iónico, angular, que ayuda a que la API de wordpress se agregue en la aplicación iónica, angular.

Idealmente, crearemos un archivo de servicio y agregaremos la API de wordpress para obtener la colección de blogs y una sola página de blog.

ionic generate service wordpress

Dirígete a app/wordpress.service.ts e inserta el código proporcionado en el archivo.

Asegúrese de tomar su API del panel de WordPress y definir la variable API_URL.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})

export class WordPressService {

  API_URL = `https://your_site.com/wp-json/wp/v2/`;
  allBlogs = null;
  pages: any;
 
  constructor( private http: HttpClient ) { }
 
  fetchData(page = 1): Observable<any[]> {
    let options = {
      observe: "response" as 'body',
      params: {
        per_page: '5',
        page: ''+page
      }
    };
 
    return this.http.get<any[]>(`${this.API_URL}posts?_embed`, options)
    .pipe(
      map((response) => {
        this.pages = response['headers'].get('x-wp-totalpages');
        this.allBlogs = response['headers'].get('x-wp-total');
        return response['body'];
      })
    )
  }
 
  single(id) {
    return this.http.get(`${this.API_URL}posts/${id}`)
    .pipe(
      map((data) => {
        return data;
      })
    )
  }

}

Mostrar datos de WordPress en Ionic

Usaremos el servicio de WordPress que creamos anteriormente para mostrarle cómo representar los datos del sitio del blog de WordPress utilizando la API.

Código de actualización en el archivo blog.page.ts:

import { Component, OnInit } from '@angular/core';
import { WordPressService } from '../wordpress.service';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.page.html',
  styleUrls: ['./blog.page.scss'],
})

export class BlogPage implements OnInit {

  WpItems = [];
  blogCount = null;
  page = 1;
 
  constructor(
    private wordpress: WordPressService, 
    private loadingCtrl: LoadingController
  ) { }
 
  ngOnInit() {
    this.getWpData();
  }
 
  async getWpData() {
    let loading = await this.loadingCtrl.create({
      message: 'Data Loading ...'
    });
 
    await loading.present();
 
    this.wordpress.fetchData().subscribe((data) => {
      this.blogCount = this.wordpress.allBlogs;
      this.WpItems = data;
      loading.dismiss();
    });
  }
 
  loadData(e) {
    this.page++;
 
    this.wordpress.fetchData(this.page)
      .subscribe((data) => {
      this.WpItems = [...this.WpItems, ...data];
      e.target.complete();
      if (this.page == this.wordpress.pages) {
        e.target.disabled = true;
      }
    });
  }

}

Después de recuperar los datos, los vincularemos a una plantilla HTML iónica, por lo tanto, abra blog.page.html y actualice el siguiente código dentro del archivo.

<ion-header>
  <ion-toolbar>
    <ion-title>RemoteStack</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>
      <strong>RS Blog</strong>
    </ion-label>
    <ion-badge color="danger" *ngIf="blogCount">{{ blogCount }}</ion-badge>
  </ion-item>

  <ion-card *ngFor="let item of WpItems">
    <ion-card-header>
      <ion-card-title [innerHTML]="item.title.rendered"></ion-card-title>
      <ion-card-subtitle>{{ loadData.date_gmt | date }}</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <div [innerHTML]="item.excerpt.rendered"></div>
      <ion-button expand="full" fill="clear" [routerLink]="['/', 'single', item.id]">Load More</ion-button>
    </ion-card-content>
  </ion-card>

  <ion-infinite-scroll threshold="140px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingText="Getting Blog Items">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

Por último, veremos cómo llegar a la página de detalles y redirigir al usuario a la página original del blog.

Código de actualización en el archivo single.page.ts:

import { Component, OnInit } from '@angular/core';
import { WordPressService } from '../wordpress.service';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-single',
  templateUrl: './single.page.html',
  styleUrls: ['./single.page.scss'],
})

export class SinglePage implements OnInit {

  postInfo: any;
 
  constructor(
    private actRoute: ActivatedRoute, 
    private wpService: WordPressService, 
  ) { }
 
  ngOnInit() {
    let id = this.actRoute.snapshot.paramMap.get('id');
    this.wpService.single(id)
    .subscribe((item) => {
      this.postInfo = item;
    });
  }
 
  visitRealPost() {
    window.open(this.postInfo.link, '_blank');
  }  

}

Actualice el archivo single.page.html.

<ion-header>
  <ion-toolbar>
    <ion-buttons>
      <ion-back-button defaultHref="/blog"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ postInfo?.title.rendered }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <div *ngIf="postInfo">
    <div [innerHTML]="postInfo.content.rendered" padding></div>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-button expand="full" (click)="visitRealPost()">
      View Real Blog
    </ion-button>
  </ion-toolbar>
</ion-footer>