Crear una aplicación móvil usando WordPress, Ionic y AngularJS

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image — What You'll Be Creating

Introducción

En este tutorial te explicará paso a paso cómo crear una aplicación móvil moderna (iOS y Android) de tu sitio web WordPress utilizando las últimas técnicas. Usaremos Ionic Framework, ECMAScript 6, npm, webpack y Apache Cordova.

Al finalizar este tutorial obtendrás la siguiente aplicación. Sólo tiene tres módulos, un módulo Home que muestra tus últimos posts, un módulo Post que muestra un post específico y un módulo Menu que muestra el menu.

2. Herramientas

Framework Ionic

El hermoso SDK de front-end de código abierto para desarrollar increíbles aplicaciones móviles con tecnologías web.

El ecosistema de Ionic Framework es grande, incluyendo Ionic CLI (herramienta de línea de comandos), Ionic Push(notificaciones push fáciles) y Ionic Platform (servicios backend). Actualmente, es uno de los principales proyectos de código abierto en GitHub con más de 19,000 estrellas y más de 600,000 aplicaciones creadas.

Ionic cubre todas las necesidades de tu aplicación. Sin embargo, para este tutorial solo me centraré en Ionic Framework (o Ionic SDK), que es un conjunto de directivas AngularJS ( componentes web ) y servicios.

ECMAScript 6 (ES6)

ECMAScript 2015 (6ª edición) es la versión actual del estándar de especificación de lenguaje ECMAScript. ES6 fue aprobado y publicado oficialmente como norma el 17 de junio de 2015 por la Asamblea General de ECMA.

ECMAScript 6 le brinda acceso a muchas características nuevas, muchas de las cuales están inspiradas en CoffeeScript, como funciones de flecha, generadores, clases y alcance. Aunque ES6 fue aprobado recientemente, puedes usarlo ahora mismo con un compilador de JavaScript, como Babel .

Node Package Manager (NPM)

Node Package Manager es el administrador de paquetes más popular del mundo. La cantidad de paquetes está creciendo más rápido que la combinación de Ruby, Python y Java. NPM se ejecuta en Node.js .

¿Por qué no Bower?

Optamos por npm, porque usar Bower y npm en el mismo proyecto es doloroso y el soporte de CommonJS con Bower no es sencillo. CommonJS define un formato de módulo para resolver el alcance de JavaScript fuera del navegador y npm lo admite. Se pueden requerir módulos CommonJS utilizando ES5 o ES6.

// ES5
var angular = require('angular');

// ES6
import angular from "angular";

webpack

En mi opinión, el paquete web ha sido un cambio de juego en la industria, salga de los complicados scripts Grunt o Gulp que necesita mantener. webpack le permite requerir cualquier tipo de archivo (.js, .coffee, .css, .scss, .png, .jpg, .svg, etc.) y canalizarlos a través de cargadores para generar activos estáticos que están disponibles para su aplicación.

La diferencia con Grunt y Gulp es que la mayoría de sus necesidades (minificación y compilación) se pueden cubrir con solo agregar algunas configuraciones, no es necesario crear scripts. Por ejemplo, requerir un archivo Sass, compilarlo, repararlo automáticamente e inyectar el CSS resultante en su aplicación será tan simple como esto:

{
    test: /\.scss$/,
    loader: "style!css!autoprefixer!sass"
}

No creo que tenga que mostrarte el equivalente usando Gulp o Grunt. Creo que entiendes mi punto.

2. Requisitos previos

Este tutorial asume que tienes:

Un conocimiento básico de AngularJS y Ionic.
Un sitio web de WordPress listo para ser consultado (una instalación local está bien)
Una máquina con Node.js, npm, Bower (la necesitaremos para algunas dependencias)
Git instalado con acceso de escritura sin sudo en la carpeta del proyecto

3. Instalación

Antes de comenzar, deberá instalar dos cosas:

un plugin de WordPress que convierte tu blog en una API RESTFUL
la propia aplicación

API RESTFUL

Para obtener las publicaciones para su instalación de WordPress, deberá instalar el complemento WP REST API . Asegúrese de instalar la versión 1.2.x, ya que la versión 2.x está en camino.

En WordPress, vaya a Complementos> Agregar nuevo .
Busca API REST WP (API WP).
Haga clic en Instalar ahora para instalar el complemento.
Si la instalación se realiza correctamente, haga clic en Activar complemento para activarlo.

Si la instalación se realizó correctamente, abra un navegador e ingrese http://example.com/wp-json . Esto debería darle una respuesta similar a la de abajo.

{
    "name": "Lorem Ipsum blog",
    "description": "Just another WordPress site",
    "URL": "http://yourDomainName.com/wp-json",
    "routes": {},
    "authentication": {},
    "meta": {}
}

Aplicación

Para instalar la aplicación, clone el repositorio, usando los siguientes comandos.

# Clone the repository and give it a name (here myTutorial)
$ git clone https://github.com/tutsplus/Hybrid-WordPressIonicAngularJS.git myTutorial
# Open the project
$ cd myTutorial

Next, create a configuration file and install the dependencies.

# Copy the default config to your personal config
$ cp config/default.config.json config/config.json
# Install dependencies
$ npm install

Para asegurarse de que tanto la aplicación como la API REST trabajen juntas, abra config / config.json . Este es su archivo de configuración personal, que Git ignora. Cambie la URL base de la API por la de su instalación de WordPress.

{
    "api": {
        "baseUrl": "http://yourDomainName.com/wp-json"
    }
}

Ejecute npm ejecute devserver y abra http: // localhost: 8080 / webpack-dev-server / en un navegador. Si todo funciona como se espera, debes estar frente a una aplicación en ejecución que muestre tus publicaciones de WordPress. He creado una aplicación de demostración para darle una idea de qué esperar.

Ahora que puedes ver el resultado de lo que estamos buscando, déjame repasar los detalles. Tenga en cuenta que los siguientes ejemplos de código están simplificados. Puedes encontrar el código fuente en GitHub .

4. Dependencias

El comando npm install instaló varias bibliotecas. Algunos de ellos son dependencias directas, mientras que el resto son dependencias de desarrollo.

Dependencias directas

Las dependencias directas son dependencias que su aplicación necesita para funcionar correctamente cuando se compila.

"dependencies": {
    "ionic-sdk": "^1.0.0",
    "wp-api-angularjs": "^1.0.0"
}

Tenga en cuenta que la aplicación no depende directamente de AngularJS, porque ionic-sdk ya incluye angular.js, angular-animate.js, angular-sanitize.js y angular-ui-router.js.

wp-api-angularjs (cliente de WordPress WP API para AngularJS) es un conjunto de servicios AngularJS que permiten la comunicación con el complemento API REST que instaló anteriormente. Puedes ver la lista completa de dependencias en GitHub .

Dependencias de desarrollo

Las dependencias de desarrollo son en su mayoría cargadores de paquetes web. Los cargadores son funciones que toman la fuente de un archivo de recursos, aplican algunos cambios y devuelven la nueva fuente. Necesitamos cargadores que manejen .scss, .js (ES6), .html y .json. Puede ver una lista completa de las dependencias de desarrollo en GitHub .

5. Arquitectura de la aplicación

He estado desarrollando aplicaciones AngularJS durante mucho tiempo y después de mucha experimentación me he comprometido con la siguiente arquitectura:

un archivo que se puede editar en vivo bajo la carpeta src / o / lib
Cada módulo AngularJS necesita una carpeta adecuada
cada archivo de módulo * .module.js debe definir un espacio de nombres único (y ser el único lugar donde aparece este espacio de nombres)
Cada archivo de módulo * .module.js debe declarar todas sus dependencias (incluso si las dependencias ya están inyectadas en la aplicación)
Cada archivo de módulo * .module.js debe declarar todas sus configuraciones, controladores, servicios, filtros, etc.
Cada configuración, controlador, servicio, filtro, etc. debe exportar una función (CommonJS)
Si un módulo necesita un estilo específico, el archivo .scss debe vivir dentro del módulo.

Estas recomendaciones son poderosas, ya que aseguran que usted tenga módulos acoplados de forma flexible que pueden ser compartidos por varias aplicaciones sin tener problemas.

Así es como se ve la estructura de carpetas de la aplicación:

lib/
├── menu/
│   └── menu.module.js
│   └── menu.html
├── home/
│   └── home.module.js
│   └── home.config.js
│   └── home.controller.js
│   └── home.html
├── post/
│   └── post.module.js
│   └── post.config.js
│   └── post.controller.js
│   └── post.html
├── scss/
│   └── _variables.scss
│   └── bootstrap.scss
├── index.js
├── index.html

Punto de entrada

Cuando se utiliza webpack, es necesario un punto de entrada. Nuestro punto de entrada es lib / index.js . Contiene las dependencias básicas de nuestra aplicación (como ionic.bundle que contiene AngularJS), nuestros módulos hechos en casa, y agrega el punto de entrada Sass.

// Ionic, Angular & WP-API client
import 'ionic-sdk/release/js/ionic.bundle';
import 'wp-api-angularjs/dist/wp-api-angularjs.bundle';

// Our modules
import modHome from './home/home.module.js';
import modPost from './post/post.module.js';
import modMenu from './menu/menu.module.js';

// Style entry point
import './scss/bootstrap';

Ahora que hemos importado nuestras dependencias podemos crear nuestro módulo de aplicación. Llamemos a nuestro prototipo de aplicación . Tiene iónicos , wp-API-AngularJS , y nuestros módulos de fabricación casera como dependencias.

// Create our prototype module
let mod = angular.module('prototype', [
    'ionic',
    'wp-api-angularjs',
    modHome,
    modMenu,
    modPost
]);

Una vez que se crea el módulo, podemos exportarlo como un módulo estándar de CommonJS.

export default mod = mod.name;

Este es un gran ejemplo de cómo debería ser un módulo AngularJS.

Enrutamiento

Routing architecture

Nuestra aplicación tiene un menú lateral en el que se procesará el módulo de menú . También tiene una sección de contenido <ion-nav-view name = "content"> en la que aparecerán los módulos Homey Post .

La directiva ui-view es parte del enrutador UI que usa Ionic. Le indica a $ state (servicio de enrutador de UI) dónde colocar sus plantillas. De manera similar, la directiva de nombre adjunta a <ion-nav-view> es una directiva jónica personalizada que utiliza ui-view debajo. Puedes considerar ambas directivas idénticas.

Aquí hay una versión simplificada del estado raíz , el estado que comparten todos los módulos:

export default function($stateProvider) {
    'ngInject';
    return $stateProvider.state('root', {
        abstract: true,
        views: {
            '@': {
                template: `<ion-side-menus>
                    <ion-side-menu-content>
                        <ion-nav-bar class="bar-positive"></ion-nav-bar>
                        <ion-nav-view name="content"></ion-nav-view>
                    </ion-side-menu-content>
                    <ion-side-menu side="left" ui-view="menu"></ion-side-menu>
                </ion-side-menus>`
            }
        }
    });
}

Para obtener más información sobre las vistas con nombre, consulte la documentación en GitHub .

Módulo de menú

lib/
├── menu/
│   └── menu.module.js
│   └── menu.html

El módulo de menú es muy simple. Su propósito es agregar un menú dentro de <ion-side-menu>. Sin este módulo, el menú lateral estaría en blanco. El módulo de menú declara solo un archivo de configuración, tiene ionic y ui.router como dependencias.

import modConfig from './menu.config';

let mod = angular.module('prototype.menu', [
    'ionic',
    'ui.router'
]);

mod.config(modConfig);

export default mod = mod.name;

La parte más interesante es la configuración. No queremos crear un estado para el módulo de Menú, ya que está disponible en todas partes. En su lugar, decoramos el estado raíz con el contenido del menú. Con ui-view = "menú" definido en el estado raíz , necesitamos usar menu @ root para referirnos a él.

export default function($stateProvider) {
    'ngInject';
    $stateProvider.decorator('views', (state, parent) => {
        let views = parent(state);
        if (state.name === 'root') {
            views['menu@root'] = {
                template: require("./menu.html")
            };
        }
        return views;
    });
}

Módulo de Inicio

lib/
├── home/
│   └── home.module.js
│   └── home.config.js
│   └── home.controller.js
│   └── home.html

home.module.js

El módulo Inicio muestra las últimas publicaciones de su sitio web de WordPress. Tiene un archivo de configuración, un controlador y depende de las siguientes bibliotecas:

ionic
ui.router
wp-api-angularjs

import modConfig from './home.config';
import modController from './home.controller';

let mod = angular.module('prototype.home', [
    'ionic',
    'ui.router',
    'wp-api-angularjs'
]);

mod.config(modConfig);
mod.controller('HomeController', modController);

export default mod = mod.name

home.config.js

La configuración agrega un nuevo estado, root.home , con la URL / home que tiene una plantilla y un controlador (ambos viven dentro del módulo).

export default function($stateProvider) {
    'ngInject';
    $stateProvider.state('root.home', {
        url: "/home",
        views: {
            'content@root': {
                template: require("./home.html"),
                controller: "HomeController as homeCtrl"
            }
        }
    });
}

home.controller.js

Esta es una versión simplificada de la lógica del controlador del hogar. Contiene dos funciones:

loadMore : esta función llena vm.posts . Utiliza el servicio $ wpApiPosts , que forma parte de la biblioteca wp-api-angularjs .
actualizar : esta función elimina las publicaciones y vuelve a llamar a loadMore .

export default function($scope, $log, $q, $wpApiPosts) {
    'ngInject';

    var vm = this;
    vm.posts = [];
    vm.loadMore = loadMore;
    vm.refresh = refresh;

    function refresh() {
        vm.posts = null;
        loadMore().finally(() => $scope.$broadcast('scroll.refreshComplete'));
    }

    function loadMore() {
        return $wpApiPosts.$getList().then((response) => {
            vm.posts = (vm.posts) ? vm.posts.concat(response.data) : response.data;
            $scope.$broadcast('scroll.infiniteScrollComplete');
        });
    }
}

home.html

La plantilla tiene una directiva de actualización de ionesque permite a los usuarios volver a cargar la página bajando la página. También tiene una directiva ion-infinite-scroll que llama a la función loadMore cuando se alcanza. Las publicaciones se muestran utilizando la directiva ng-repeat .

Sugerencia: utilice la pista por expresión para un mejor rendimiento. Minimiza la manipulación de DOM cuando se actualiza una publicación.

<ion-view>
    <ion-nav-title>Home</ion-nav-title>
    <ion-content>
        <ion-refresher pulling-text="Pull to refresh" on-refresh="homeCtrl.refresh()"></ion-refresher>
        <div class="list card" ng-repeat="post in homeCtrl.posts track by post.ID">
            <!-- THE POST DETAILS -->
        </div>
        <ion-infinite-scroll immediate-check="true" on-infinite="homeCtrl.loadMore()"></ion-infinite-scroll>
    </ion-content>
</ion-view>

Módulo de publicación

lib/
├── post/
│   └── post.module.js
│   └── post.config.js
│   └── post.controller.js
│   └── post.html

El módulo de publicación muestra solo una publicación. Tiene un archivo de configuración, un controlador y depende de las mismas bibliotecas que el módulo de Inicio .

post.module.js

import modConfig from './post.config';
import modController from './post.controller';

let mod = angular.module('prototype.post', [
    'ionic',
    'ui.router',
    'wp-api-angularjs'
]);

mod.config(modConfig);
mod.controller('PostController', modController);

export default mod = mod.name

Similar al módulo de Inicio, la configuración agrega un nuevo estado, root.post , con la URL / post /: id . También registra una vista y un controlador.

post.config.js

export default function($stateProvider) {
    'ngInject';
    $stateProvider.state('root.post', {
        url: "/post/:id",
        views: {
            'content@root': {
                template: require("./post.html"),
                controller: "PostController as postCtrl"
            }
        }
    });
}

post.controller.js

El controlador recupera la publicación especificada en url / post /: id a través del servicio $ stateParams (servicio de enrutador UI).

export default function ($scope, $log, $wpApiPosts, $stateParams) {
    'ngInject';
    var vm = this;
    vm.post = null;
    $scope.$on('$ionicView.loaded', init);

    function init() {
        $wpApiPosts.$get($stateParams.id).then((response) => {
            vm.post = response.data;
        });
    }
}

post.html

La plantilla tiene una directiva de giro de iones que muestra un cargador mientras se recuperan los datos de la API REST de WordPress. Cuando se carga la publicación, usamos una tarjeta iónica para representar el avatar del autor, el título de la publicación y el contenido de la publicación.

Sugerencia : use la expresión bindOnce , :: , (introducida en Angular 1.3) para evitar observar datos que no cambiarán con el tiempo.

<ion-view>
    <ion-nav-title>{{postCtrl.post.title}}</ion-nav-title>
    <ion-content>
        <ion-spinner ng-if="!postCtrl.post"></ion-spinner>
        <div class="list card" ng-if="postCtrl.post">
            <div class="item item-avatar">
                <img ng-src="{{::postCtrl.post.author.avatar}}">
                <h2>{{::postCtrl.post.author.name}}</h2>
                <p>{{::postCtrl.post.date | date:'medium'}}</p>
            </div>
            <div class="item item-body">
                <img class="full-image" ng-src="{{::postCtrl.post.featured_image.attachment_meta.sizes.medium.url}}">
                <h2>{{::postCtrl.post.title}}</h2>
                <p ng-bind-html="::postCtrl.post.content"></p>
            </div>
        </div>
    </ion-content>
</ion-view>

Estilo (Sass)

lib/
├── scss/
│   └── _variables.scss
│   └── bootstrap.scss

El archivo bootstrap.scss que importamos en nuestro punto de entrada es tan simple como esto:

@import "./variables";
@import "~ionic-sdk/scss/ionic";

Primero, importamos nuestras variables. Luego importamos los estilos jónicos. Importar nuestras variables antes de Ionic nos permite sobrescribir cualquier variable Sass que Ionic haya declarado.

Por ejemplo, si desea que el color positivo sea rojo en lugar de azul, puede sobrescribirlo así:

$positive: red !default;

6. Android y iOS

Instalación

Ejecute los siguientes comandos dentro de la carpeta del proyecto y elija la plataforma para la que desea construir.

$ cp config.dist.xml config.xml
$ npm run installCordova

Which platforms do you want to build? (android ios):

Además de instalar plataformas dentro de la carpeta / plataformas , el script instalará un complemento. Para la demostración, necesitamos el complemento cordova-plugin-whitelist . Es necesario permitir que la aplicación consulte la API REST de WordPress que creamos anteriormente.

Si abre config.xml , verá que permitimos el acceso a cualquier tipo de origen ( ). Por supuesto, esto es sólo para fines de demostración. Si implementa su aplicación en producción, entonces asegúrese de restringir el acceso de esta manera:

<access origin="http://example.com" />

Android

Prerrequisitos

SDK de Android
Ant

Ejecutar el comando npm run runAndroid es un acceso directo para rm -rf www / * && webpack && cordova run android . Esto elimina todo lo que está dentro de la carpeta www , descarga una versión no minificada de la aplicación en ella y ejecuta el comando de Android . Si se conecta un dispositivo Android (ejecute dispositivos adb para asegurarse), el comando cargará la aplicación en el dispositivo, de lo contrario, utilizará el emulador de Android.

# Run Android
$ npm run runAndroid

iOS

Prerrequisitos

OS X
Xcode

Si no tiene un dispositivo Apple, debe instalar el simulador de iOS. Es realmente bueno y mejor que el emulador de Android.

$ sudo npm install -g ios-sim

Ejecutar npm run runIosEmulator es un acceso directo para rm -rf www / * && webpack && cordova run ios . El comando npm run runIosDevice es un atajo para rm -rf www / * && webpack && cordova run ios --device .

# Run iOS
$ npm run runIosEmulator
$ npm run runIosDevice

Conclusión

Con este tutorial, he intentado mostrarle lo fácil que es crear una aplicación móvil híbrida para su sitio web de WordPress. Ahora deberías poder:

Crear módulos acoplados libremente que respeten las especificaciones de CommonJS
importar módulos CommonJS con ECMAScript 6
utilizar el lado del cliente REST API de WordPress (con wp-api-angularjs)
Aprovechar Ionic Framework para crear una excelente interfaz de usuario.
usa webpack para empaquetar tu aplicación
Usa Cordova para ejecutar la aplicación en iOS y Android

Si desea ir más lejos, entonces eche un vistazo a un proyecto que creé hace unos meses, WordPress Hybrid Client .

Cliente híbrido de WordPress

WordPress Hybrid Client (WPHC) es un proyecto de código abierto disponible en GitHub que le ayuda a crear versiones de iOS y Android de su sitio web de WordPress de forma gratuita. WPHC se basa en la misma pila de tecnología que usamos en este tutorial.

WPHC incluye las siguientes características:

notificaciones push
marcadores (modo fuera de línea)
Soporte de Google Analytics
actualizaciones automáticas de contenido
botones sociales
accesibilidad (tamaño de letra posterior)
varios idiomas (inglés, francés, chino)
scroll infinito
resaltador de sintaxis para blogs de tecnología
almacenamiento en caché de imágenes
valoración de la aplicación