Cómo convertir una página de WordPress en una aplicación (Android / iOS) con Ionic Framework (Angular y Capacitor) por Max | Octubre de 2020

Primero queremos configurar Ionic Framework. Esto se explica aquí:

Para marco iónico Node.js es necesario.

Después de instalar Node.js, instalaremos Ionic Framework.

npm install -g @ionic/cli

Luego comenzamos con una nueva aplicación.

ionic start wordpress-to-app blank

Esto generará una nueva aplicación con una página de inicio.

Queremos mostrar todas las publicaciones de WordPress en la página de inicio. Entonces necesitamos otra página que muestre una publicación a la vez.

ionic g page post

Usamos el servicio para llamadas API.

ionic g service services/wordpress

Primero, ajustaremos el enrutamiento de la página Enviar. Abre el archivo app-routing.modules.ts y editar la ruta de la publicación.

{
path: ‘post/:id’,loadChildren: () => import(‘./post/post.module’).then( m => m.PostPageModule)
},

los «: id ”nos ayudará a identificar más adelante de qué correo se trata.

Ahora estamos listos para personalizar su servicio de WordPress.

import { Injectable } from '@angular/core';import { HttpClient} from '@angular/common/http';@Injectable({providedIn: 'root'})export class WordPressService {private url = "https://your-page.com/wp-json/wp/v2/posts";constructor(private httpClient: HttpClient) { }loadPosts(){return this.httpClient.get(this.url,{});}loadPost(id){return this.httpClient.get(this.url+"/"+id,{});}}

WordPressService incluye 2 funciones:

  1. loadPosts ();
  2. loadPost (id);

Como usamos HttpClient, tenemos que registrarlo.

Edita el tuyo ahora app.module.ts.

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouteReuseStrategy } from '@angular/router';import { IonicModule, IonicRouteStrategy } from '@ionic/angular';import { SplashScreen } from '@ionic-native/splash-screen/ngx';import { StatusBar } from '@ionic-native/status-bar/ngx';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: [StatusBar,SplashScreen,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],bootstrap: [AppComponent]})export class AppModule {}

Acabamos de agregar una importación de archivo aquí HttpClientModule y añadir HttpClientModule para importación.

Ahora estamos editando home.page.ts expediente.

import { Component,OnInit } from '@angular/core';import { WordPressService } from './../services/wordpress.service';import { Router} from '@angular/router';@Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],})export class HomePage implements OnInit {private posts: any;constructor(private router:Router,private wordpressService:WordpressService) {}ngOnInit(){this.wordpressService.loadPosts().subscribe(data=>{this.posts = data;})}openPost(id){this.router.navigate(['/post/',id]);}}

En las publicaciones de variables privadas, almacenamos el retorno de la solicitud HTTP.

La función openPost (id) que usamos para redirigir a la publicación.

Usamos para mostrar publicaciones home.page.html expediente.

<ion-header [translucent]="true"><ion-toolbar><ion-title>My WordPress Page</ion-title></ion-toolbar></ion-header><ion-content [fullscreen]="true"><ion-card  *ngFor="let post of posts"  ><ion-card-header (click)="openPost(post?.id)"><ion-img [src]="post?.jetpack_featured_media_url" style="height: 520px;"></ion-img><ion-card-subtitle>{{post?.date}}</ion-card-subtitle><ion-card-title><h4 [innerHTML]="post?.title?.rendered"></h4></ion-card-title></ion-card-header><ion-card-content (click)="openPost(post?.id)"><div [innerHTML]="post?.excerpt?.rendered"></div></ion-card-content></ion-card></ion-content>

Aquí puede ver que utilizo jetpack_featured_media_url para la imagen. Si no tiene Jetpack instalado, debe cambiarlo.

A continuación haremos una Publicación Única. Para hacer esto, primero ajustaremos post.page.ts expediente.

import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { WordPressService } from './../services/wordpress.service';@Component({selector: 'app-post',templateUrl: './post.page.html',styleUrls: ['./post.page.scss'],})export class PostPage implements OnInit {private id:any;private post:any;constructor(private activatedRoute:ActivatedRoute,private wordpressService:WordpressService) { }ngOnInit() {this.id =  this.activatedRoute.snapshot.paramMap.get('id');this.wordpressService.loadPost(this.id).subscribe(data=>{this.post = data;});}}

Usando ActivatedRoute, leemos la ID y la enviamos a WordPressService usando la función loadPost (id). El resultado se almacena en la publicación: cualquier variable.

En post.page.html usamos la siguiente plantilla.

<ion-header><ion-toolbar><ion-title><div [innerHTML]="post?.title?.rendered"></div></ion-title></ion-toolbar></ion-header><ion-content><ion-card *ngIf="post != null"><ion-card-header><ion-img [src]="post?.jetpack_featured_media_url" style="height: 520px;"></ion-img><ion-card-subtitle>{{post?.date}}</ion-card-subtitle><ion-card-title><h4 [innerHTML]="post?.title?.rendered"></h4></ion-card-title></ion-card-header><ion-card-content ><div [innerHTML]="post?.content?.rendered"></div></ion-card-content></ion-card></ion-content>

Esto completa la parte de codificación.

Seguiremos construyendo.

ionic build

Si lo desea, ahora puede ver la aplicación en su navegador usando:

ionic serve

Ejecútelo con Android Studio con el siguiente comando:

ionic capacitor run android

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *