Creando una aplicación móvil con React Native usando WordPress REST API

En los inicios de WordPress su principal objetivo fue el de poder permitir crear publicaciones en la red en formato blog, aunque pronto acabó evolucionando en una herramienta mucho más versátil convirtiéndose en un sistema de gestión de contenidos completo.

La evolución de WordPress continúa y hoy en día el punto de inflexión en su desarrollo lo ha proporcionado la inclusión de la API REST en su core, llegando incluso a ser un servicio activo por defecto desde la versión 4.7 de WordPress publicada este mismo año.

Con esta versión 2.0 de la API REST estamos cambiando el planteamiento de WordPress en un futuro inmediato permitiendo diferenciar los desarrollos backend de los desarrollos en el frontend y permitiendo que otros lenguajes de programación puedan trabajar con los datos de WordPress para crear interfaces más ágiles o incluso aplicaciones móviles.

En este artículo haremos un repaso a todos los pasos necesarios para poder conocer un poco mejor el funcionamiento de la WP REST API y cómo poder utilizarla en nuestros desarrollos en frameworks JavaScript como React Native.

Creando una aplicación móvil con React Native WordPress REST API

Trabajaremos en la creación de una aplicación sencilla para iOS usando React Native que obtendrá las entradas de una instalación de WordPress.

Principalmente repasaremos todos los puntos a tener en cuenta en este proceso y crearemos un ejemplo simple sobre el cual poder trabajar en futuras mejoras e implementaciones. Como punto de partida deberemos indicar que trabajaremos en un entorno Mac OS y el resultado será una app móvil para iPhone.

WP REST API

Como hemos indicado la API REST de WordPress se encuentra activa desde la versión 4.7 por lo que si tenemos nuestra instalación actualizada, deberíamos poder obtener una respuesta correcta si hacemos una llamada al correspondiente archivo:

http://betabeers.dev/wp-json/wp/v2/posts/

Preparando el entorno

Necesitaremos disponer de Node.js y a continuación Watchman para poder preparar nuestro entorno de trabajo. En la propia documentación de inicio de React Native nos explican el proceso paso a paso.

Instalando React Native

El siguiente paso será instalar la interfaz de línea de comandos de React Native mediante la siguiente orden:

npm install -g react-native-cli

Es posible que en este proceso se nos solicite en la respuesta a la orden que seamos administradores para poder instalar esta dependencia, en tal caso, podemos usar esta línea:

sudo npm install -g react-native-cli

Instalación de XCode

Con XCode podremos crear nuestra aplicación para iOS así como instalar el iOS Simulator para hacer correr nuestra aplicación en desarrollo.

Podemos instalar XCode en nuestro equipo a través de la App Store de Mac OS.

Comprobando nuestra instalación

Continuamos con el proceso de creación de nuestra aplicación generando un nuevo proyecto con la denominación que queramos darle, en este caso lo llamaremos “BetaBeers”:

react-native init BetaBeers

Para poder arrancar el visor de iOS de XCode deberemos navegar hasta el directorio donde se ha generado nuestro proyecto, para después realizar la llamada de arranque del simulador:

cd BetaBeers

react-native run-ios

En este punto comprobaremos cómo el iOS Simulator de ha lanzado, mostrando una información de bienvenida al sistema.

Nos deberá aparecer la información por defecto el mensaje de bienvenida que React Native nos muestra en cada proyecto recientemente inicializado.

Entendiendo el archivo index.ios.js

Navegando por la carpeta BetaBeers de nuestro proyecto encontraremos que contiene todos los ficheros necesarios para desarrollar la app.

Dentro de todo el entramado de archivos y carpetas, nos encontramos con los archivos index.ios.js e index.android.js que serán los más importantes a tener en cuenta para el desarrollo de nuestra aplicación, al menos en esta prueba de conecpto que estamos desarrollando.

Contienen el código fuente en JavaScript para nuestra app, uno para iOS y otro para Android.

Una de las ventajas de React Native es que si no se usan módulos que sean específicos de cada plataforma, el código fuente de los dos ficheros puede ser el mismo, lo cual facilita enormemente el desarrollo y despliegue de aplicativos funcionales.

Trabajando con WP REST API

Uno de los elementos imprescindibles que deberemos añadir a nuestro código fuente es la señalización de una variable que apunte al fichero JSON que ofrece los datos de la WP REST API.

Volvemos sobre nuestros pasos y recuperamos el enlace que nos genera nuestra instalación de WordPress y que arroja la información de los últimas entradas publicadas.

Aunque veremos más adelante el ejemplo completo propuesto, adelantamos la línea necesaria para declarar la variable de solicitud de URL.

var REQUEST_URL = 'http://betabeers.dev/wp-json/wp/v2/posts/';

React dispone de la función fetch que nos permite obtener datos de nuestra API.

Añadiremos el componente componentDidMount que es solicitado automáticamente por React Native cuando la aplicación termina su carga. Completamos el proceso con la función fetchData, que obtendrá la información de la API.

componentDidMount: function() {
this.fetchData();
},
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
page: { title: responseData[0].title.rendered, content:responseData[0].content.rendered },
});
})
.done();
},

Cuando el componente componentDidMount es solicitado por React Native comenzará a funcionar la función fetchData que obtiene la información del endpoint de nuestra WP REST API.

Cuando accedemos a la aplicación observaremos un contenido por defecto que se actualizará cuando se haya terminado de descargar y parsear la información de la API.

En el siguiente código del archivo index.ios.js podremos ver un ejemplo funcional aplicando las funciones anteriores que obtendrá la información de nuestra API, basta con sustituir la variable del archivo WP REST API utilizado por el nuestro para poder comprobar los resultados de esta primer aproximación.

/**
* BetaBeers React Native App with WP REST API v 1.0
*/
'use strict';

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
} = React;

var MOCKED_DATA = [
{title: 'BetaBeers Title 01', content: "If there's no 'there' there, where is it and what's there?"},
];
// La dirección URL del endpoint entradas de la WP API REST
var REQUEST_URL = 'http://betabeers.dev/wp-json/wp/v2/posts/';

var BetaBeers = React.createClass({
getInitialState: function() {
return {
page: MOCKED_DATA[0],
};
},
// Función solicitada automáticamente por React cuando el compoennte finaliza la carga
componentDidMount: function() {
this.fetchData();
},
// Extrae la información de nuestra API y actualiz el estado de la aplicación
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
// this.setState() hace que la nueva información se muestre con la función render declarada después
this.setState({
page: { title: responseData[0].title.rendered, content: responseData[0].content.rendered },
});
})
.done();
},
render: function() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.title}>
{this.state.page.title}
</Text>
<Text style={styles.text}>
{this.state.page.content}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight
style={styles.button}
underlayColor='#ccc'
>
<Text style={styles.buttonText}>Hmmmmm...</Text>
</TouchableHighlight>
</View>
</View>
);
}
});

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
text: {
fontSize: 18,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonContainer: {
bottom: 0,
flex: .1,
width: windowSize.width,
backgroundColor: '#eee',
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize: 30,
color: '#666666',
},
});

AppRegistry.registerComponent('BetaBeers', () => BetaBeers);

Si queréis accder directamente al codigo anterior podéis verlo también en este gist de Github.

Aprendiendo más sobre React Native y WP REST API

Hoy en día, gran porcentaje del mundo web tradicional pasa por WordPress, al ser el sistema de gestión de contenidos más utilizado, de eso no cabe duda.

Además, la posibilidad de poder comunicarse de manera abierta con el contenido que se publica mediante este gestor hace que las posibilidades sean incluso mayores, pudiendo relevar a WordPress a un servicio puramente de backend y posibilitando jugar con diferentes interfaces, como aplicaciones móviles, sin tener que intervenir en el contenido ya gestionado.

Si queremos profundizar más en React Native y poder crear aplicaciones más complejas podemos acceder a la documentación oficial de React Native.

Por otro lado, podemos completar el conocimiento sobre la versión 2.0 de la API REST de WordPress accediendo a su plataforma oficial donde encontraremos amplia documentación para desarrolladores.

Y como siempre, el mejor modo de aprender es hacer y compartir, permitiendo que entre todos podamos aprender aún más y crecer como desarrolladores.