utilizando wordpress aplicación móvil API REST

La API REST es actualmente un plugin que permite a las aplicaciones acceder a los datos producidos por WordPress en formato JSON. La versión 1.0 fue lanzado recientemente , y está programado para estar en WordPress núcleo de la versión 4.1 a finales de este año.

Esta es una noticia increíble para cualquier persona interesada en la fabricación de aplicaciones para dispositivos móviles con WordPress!

Las implicaciones de esta API ya se han escrito sobre por WP taberna , este artículo se centrará en cómo utilizarlo para construir una aplicación móvil.

Vamos a hablar de la creación de una aplicación móvil sencilla utilizando Phonegap que extraer datos de su sitio web utilizando la API REST.

En primer lugar, ver o descargar los archivos del tutorial haciendo clic en el enlace de más abajo.

Descargar archivos del tutorial

Establecimiento de las cosas

Lo primero que hay que hacer es instalar el plugin de API REST en su sitio de WordPress.

En mi caso, estoy corriendo WordPress localmente en mi Mac, utilizando servidor de escritorio .

Después de que el plug-in API REST está instalado y activado, se puede visitar http://yoursite.com/wp-json para ver el objeto básico de JSON. Se ve algo como esto:

{"name":"ElBlog SEO","description":"Just another WordPress site","URL":"http:\/\/www.wp4.dev"}

Se puede ver elementos de su sitio añadiendo el url, Como http://yoursite.com/wp-json/posts, o http://yoursite.com/wp-json/pages.

Eso es los datos que vamos a utilizar para tirar en la aplicación móvil.

La aplicación móvil

Demo API REST de aplicaciones móviles

Vamos a hacer una aplicación móvil híbrido, que es básicamente una página web estática que puede ser envuelto en una envoltura de aplicación nativa con Phonegap.

No voy a entrar en detalles sobre cómo hacer esto una aplicación nativa, que sólo va a utilizar un sitio web estático con fines de demostración. Nuestra página web estática consistirá en un archivo index.html, y algunos archivos CSS y Javascript.

Se puede ver los archivos en gitHubaquí .

Si nos fijamos en el archivo index.html , podrás ver que hemos cargado nuestro CSS y Javascript de la misma manera que lo haría en una página web, y también tenemos un poco de estructura HTML básico para elencabezamiento, y la lista de entradas.

Estoy usando algunas bibliotecas pre-hechos, incluyendo jQuery , y la capa final para la interfaz de usuario.

En la aplicación móvil, todos estos activos sería local en el teléfono, no nos detenemos en del sitio web. Lo único que estamos recibiendo de la página web son los datos a través de la API REST.

tipos de envío personalizado

La aplicación que vamos a hacer es simplemente va a mostrar tipos de envíos personalizados de WordPress. Más adelante, podemos añadir transiciones de página, menús, e incluso empujar el contenido de la aplicación de WordPress, pero no vamos a salir adelante de nosotros mismos!

Para obtener los tipos de envío personalizado, podemos acceder

http://yoursite.com/wp-json/posts/types

He creado un tipo post llamado “Noticias” para esta aplicación, por lo que puede acceder a los datos que necesito en

/wp-json/posts?type=news

Mis datos JSON para el CPT de noticias es como la siguiente:

[{"ID":2602,"title":"Travel behemoth Priceline","status":"publish","type":"news","author":{"ID":1,"username":"scottopolis","name":"Scott B","first_name":"Scott","last_name":"Bolinger"...

Si usted no tiene un tipo de envío personalizado, eso está bien, puede acceder a sus mensajes en http://yoursite.com/wp-json/posts. Vaya por delante y que visitarurl para ver sus datos JSON.

Ese objeto nos da acceso a todo lo que necesitamos: título, extracto, contenido, imagen ofrecida, autor, etc. Ahora podemos sacar esos datos en nuestra aplicación, y lo mostrará la manera que queramos.

el AJAX

Ahora que tenemos los datos JSON lista, y la aplicación móvil listo, todo lo que tenemos que hacer es tirar de los datos en nuestra aplicación. Vamos a utilizar una petición AJAX para hacer eso.

Voy a utilizar un poco de jQuery, por lo que he cargado la biblioteca jQuery en la aplicación ya.

La petición AJAX se ve así:

$.ajax({
	type: 'GET',
	url: rootURL + '/posts?type=news',
	dataType: 'json',
	success: function(data){
	// do something with the data here
	}
});

Eso va y obtiene los datos, y dentro del éxito de la función es donde vamos a recorrer y mostrarlo.

En este caso utilizaremos $ each para conseguir los artículos que queremos de cada artículo de noticias, y añadir los dentroun elemento de lista. El HTML se verá así:

<li class="topcoat-list__item">
<img src="http://url.com/featured/image.png" /><br>
<h3>Title</h3>
<p>Post excerpt</p>
</li>

Vamos a tener que obtener la imagen ofrecida url, El título, y el extracto a través de la API. El código para que irá en función del éxito de AJAX, y se ve así:

$.each(data, function(index, value) {

  $('ul.topcoat-list').append('<li class="topcoat-list__item">' +
  	'<img src="'+value.featured_image.attachment_meta.sizes.medium.url+'" /><br>' +
  	'<h3>'+value.title+'</h3>' +
  	'<p>'+value.excerpt+'</p></li>');

});

Vas a ver que estoy profundizando en el objeto featured_image para recuperar la imagen del media url. Si no lo hace, obtendrá el archivo original, lo que podría ser demasiado grande.

Puede ver el código completo para el AJAX en Github .

Envolver las cosas

Puede cargar el archivo index.html en Safari para ver cómo la aplicación está buscando hasta ahora. (Chrome bloquea la petición AJAX)

Se podría concluir esta aplicación con Phonegap y cargarlo en un simulador si quería, pero hay mucho más que podemos hacer con ella en primer lugar.

Podemos añadir menús, transiciones de página, almacenamiento local, la publicación de los datos a WordPress, y mucho más. Si usted está interesado en aprender cómo hacer más con este tipo de aplicación, que me haga saber en los comentarios.

¡Aclamaciones!

 

Please follow and like us:

Leave a Reply