Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Crear un front-end con WordPress usando la REST API de WP y AngularJS: Introducción y configuración

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Bootstrapping, Routing, and Services

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

En la serie introductoria sobre la REST API de WP, aprendimos a usar la funcionalidad básica proporcionada por la API y la flexibilidad que ofrece al crear aplicaciones con el back-end de WordPress. Examinamos los recursos, las rutas y los métodos que admite para realizar operaciones CRUD.

En esta serie sobre la creación de un front-end con WordPress con la REST API de WP y AngularJS, pondremos en práctica los conocimientos adquiridos en la serie introductoria. Aprenderemos cómo podemos aprovechar este conocimiento para desacoplar el modelo de tema-administrador convencional soportado por WordPress hasta ahora. Planificaremos y crearemos una aplicación de una sola página (que he llamado Quiescent) con un back-end de WordPress que contará con entradas, usuarios y categorías que enumerarán páginas. Configuraremos el enrutamiento de AngularJS y crearemos una directiva personalizada y controladores para los recursos mencionados anteriormente.

En la primera parte de la serie, haremos lo siguiente:

  • evaluar los requisitos para construir el front-end con la ayuda de wireframes
  • descargar e instalar el paquete HTML básico con el que empezaremos a trabajar
  • construir un plugin de WordPress complementario basado en las evaluaciones anteriores

Así que vamos a empezar evaluando los requisitos para la construcción del front-end.

Planificación de las cosas

La fase inicial al comienzo de cualquier proyecto debe consistir en la evaluación de los requisitos del proyecto y la planificación de las cosas en consecuencia. Esto sienta una base sólida para el proyecto y nos ayuda a reflexionar claramente en términos de la funcionalidad y características de la aplicación.

Como se mencionó anteriormente, necesitamos páginas de listado y páginas individuales para los siguientes tres recursos:

  1. Entradas
  2. Categorías
  3. Usuarios

Hablemos primero sobre la creación de plantillas para el recurso Posts. Necesitaremos dos plantillas para este recurso, a saber, una plantilla de listado y una única plantilla de entrada. La plantilla de listado mostrará un número concreto de entradas con enlaces de paginación para ir a los conjuntos de entradas siguientes o anteriores. La plantilla de entrada única mostrará una sola publicación en la página.

A continuación se muestra la estructura o wireframe para la página que lista las entradas:

Post listing template

Y la siguiente es el wireframe para la plantilla de entrada única:

Single post template

Como podemos ver en los anteriores wireframes, los requisitos son bastante simples, iguales a los de cualquier plantilla de blog estándar. Pero cuando comparamos los anteriores wireframes con la respuesta estándar que la REST API de WP proporciona para las entradas, nos encontramos con la conclusión de que faltan los siguientes elementos en el objeto de la respuesta estándar:

  • enlace de imagen destacada
  • nombre del autor
  • nombres de categorías y enlaces

Por lo tanto, necesitamos modificar la respuesta del recurso Posts para incluir estos elementos. Lo haremos más adelante en este tutorial mediante la creación de un plugin complementario para WordPress.

Analicemos ahora los requisitos para los recursos Categories y Users examinando los dos siguientes wireframes.

A continuación se muestra el wireframe para la plantilla de categoría:

Category template

Y aquí está el wireframe para la plantilla de usuario:

Al examinar los dos anteriores wireframes, está claro que no requieren registrar ningún campo adicional en sus respuestas estándar. Pero si miramos de cerca la página de perfil del autor, necesitamos añadir un tamaño adicional de gravatar para tener en cuenta el tamaño de la imagen en nuestro HTML. Esta funcionalidad también se puede conseguir en el plugin complementario.

Uno de los principios fundamentales y más defendidos de la ingeniería de software es el principio DRY (Don't Repeat Yourself, traducido al español„ no te repitas). Al analizar los anteriores wireframes, vemos que la lista de entradas se está repitiendo en casi todas las plantillas de listado de una forma u otra. Por lo tanto, seguiremos adelante y haremos una directiva AngularJS común para los listados de entradas que se usarán en todas las plantillas anteriores, y esta directiva incluirá funcionalidad que incluye la paginación de entradas y la recuperación de un subconjunto de entradas para determinados parámetros.

Ahora que hemos evaluado los requisitos generales para crear la aplicación, a partir de la siguiente sección, podemos profundizar en la parte de codificación.

Requisitos del tutorial

Antes de empezar a trabajar en la construcción de la aplicación, es necesario tener ciertas aplicaciones instaladas en tu sistema. Estas aplicaciones son:

  • una instalación de WordPress con el plugin WP REST API habilitado y algunos datos de demostración
  • Git para clonar el repositorio HTML (aunque, no es necesario ya que también puedes descargar el repositorio directamente desde el sitio de GitHub a través de GUI)
  • Node.js para trabajar con comandos npm y gulp
  • GulpJS para ejecutar tareas de minificación y optimización en el paquete HTML

Si has estado desarrollando para la web durante algún tiempo, hay muchas probabilidades de que ya tengas esto instalado en tu sistema. De lo contrario, te recomiendo que eches un vistazo a sus sitios oficiales y a la documentación para configurarlos.

Descargar e instalar el paquete HTML

Para que las cosas sean más fáciles de seguir, ya he creado plantillas HTML básicas para los wireframes que analizamos anteriormente.

En primer lugar, debes clonar el repositorio del paquete HTML desde GitHub:

Después de clonar el repositorio, debes navegar por el directorio mediante el siguiente comando:

No importa si estás utilizando OS X, Windows o Linux, el comando cd anterior funcionará en casi todos los sistemas operativos.

Ahora tienes que instalar módulos Node.js utilizando:

El comando anterior tardará algún tiempo en completarse, dependiendo de la velocidad de tu conexión a Internet.

Una vez instalados los módulos necesarios, puedes compilar finalmente la fuente mediante el comando gulp:

Esto genera una nueva carpeta denominada dist que contiene la fuente compilada para HTML y sus recursos.

El comando npm install que ejecutamos anteriormente también instala un módulo Node.js llamado http-server que proporciona un medio rápido y sencillo de configurar un servidor HTTP básico dentro de cualquier directorio. Puedes comprobar la fuente compilada navegando por el directorio dist y ejecutando el siguiente comando:

Esto mostrará algunas direcciones en la pantalla para el servidor que puedes introducir en tu navegador para empezar a ver el HTML.

Se trata de descargar y compilar el paquete HTML básico que funcionará como la columna vertebral para nuestro futuro desarrollo.

Construir el plugin Quiescent Companion

Después de haber descargado e instalado los módulos necesarios para el paquete HTML, ahora ya estamos listos para compilar la funcionalidad del lado del servidor para apoyar el front-end.

En una sección anterior, analizamos los requisitos para crear el front-end con la REST API de WP y AngularJS. Echemos un vistazo de nuevo a los elementos requeridos que necesitamos para construir el front-end:

  1. Imagen destacada para la entrada. También necesitamos registrar un nuevo tamaño de imagen en WordPress para tener en cuenta el tamaño de la imagen en nuestro HTML.
  2. Nombre del autor de la entrada. Esto se puede recuperar mediante el ID del autor que está disponible en el objeto de respuesta estándar.
  3. Lista de categorías asociadas a la entrada. Esto se puede conseguir mediante el ID de entrada.
  4. Un nuevo tamaño de imagen para que el gravatar tenga en cuenta el tamaño de la imagen del perfil del autor en nuestro HTML.

Por lo tanto, necesitamos tres campos adicionales para el recurso Posts y también necesitamos añadir nuevos tamaños de imagen para la imagen destacada y el gravatar de usuario.

Comencemos creando un nuevo directorio para nuestro plugin en la carpeta /wp-content/plugins y denominémoslo quiescent-companion. Dentro de ese directorio, crea un nuevo archivo PHP llamado quiescent-companion.php y pega el siguiente código para la definición del plugin:

Si has estado siguiendo conmigo los tutoriales de mi serie introductoria sobre la REST API de WP, ya habrás aprendido a modificar la respuesta del servidor para un recurso determinado mediante el método register_rest_field(). Si no le has echado un vistazo, te recomiendo que lo hagas consultando el artículo sobre la modificación de las respuestas del servidor.

El método register_rest_field() acepta tres argumentos para el nombre del recurso que se va a modificar, el nombre del campo y una matriz de argumentos para el campo. Esta matriz de argumentos contiene la devolución de llamada de recuperación, la devolución de llamada de actualización y el esquema del campo.

Aquí está el código para añadir un campo personalizado para la imagen destacada de la entrada:

El método se denomina register_rest_field() con la acción rest_api_init.

Siempre es una buena práctica prefijar el nombre del campo personalizado para que no entre en conflicto con ningún otro campo en el futuro. Por lo tanto, hemos nombrado nuestro campo personalizado quiescent_featured_image. El método responsable de recuperar esta imagen destacada es quiescent_get_featured_image, y lo definimos de la siguiente manera:

Este método pasa tres argumentos para la matriz post, el nombre del campo y el objeto de solicitud. La matriz post contiene información necesaria sobre la actual entrada, incluyendo su ID, su título, su contenido, etc. Mediante el uso de esta información, podemos recuperar cualquier información arbitraria asociada a la entrada. Por lo tanto, utilizamos el ID del medio destacado de la entrada para recuperar el enlace de la imagen destacada de la entrada utilizando el método wp_get_attachment_image_src().

Además del código anterior para registrar el campo personalizado para el enlace de imagen destacada de la entrada, también necesitamos registrar un tamaño de imagen personalizado en correspondencia:

El código anterior utiliza el método add_image_size() para registrar un nuevo tamaño de imagen de 712 px por 348 px, y usamos quiescent_post_thumbnail como el nombre del nuevo tamaño de imagen.

Guarda el código y asegúrate de que el plugin Quiescent Companion esté activado en tu escritorio de WP. Envía una solicitud de prueba a la ruta /wp/v2/posts y el servidor devolverá el enlace de la imagen destacada en el campo quiescent_featured_image del objeto de respuesta:

Ahora que hemos añadido correctamente el enlace de imagen destacada en la respuesta, los otros dos campos que quedan por añadir son para el nombre del autor y la lista de los nombres de las categorías.

Para añadir el nombre para mostrar del autor de la entrada, modificamos la función quiescent_modify_post_response() para incluir otra llamada al método register_rest_field() como se muestra a continuación:

Llamamos a este campo personalizado quiescent_author_name y la función de devolución de llamada para recuperar el valor de este campo es la siguiente:

Aquí usamos el método get_the_author_meta() para recuperar el nombre del autor de la entrada a mostrar.

Para el último campo para los nombres de categoría, la llamada al método register_rest_field() es la siguiente:

La llamada anterior debe ir dentro de la función quiescent_modify_post_response(). El método de devolución de llamada de recuperación quiescent_get_categories() es:

El código anterior utiliza el método get_the_category() para recuperar las categorías de la entrada actual. Este método devuelve una matriz de objetos, en la que cada objeto representa una categoría asignada a la entrada actual.

Ahora que hemos escrito todo el anterior código, ahora se añaden tres nuevos campos al objeto de respuesta estándar para el recurso Posts. Estos tres nuevos campos son:

  1. quiescent_featured_image
  2. quiescent_author_name
  3. quiescent_categories

De forma predeterminada, la respuesta estándar para el recurso Users contiene las URLs de avatar para los tamaños de 24 px, 48 px y 96 px. Lo último que tenemos que hacer ahora es añadir una URL para un tamaño de gravatar adicional de 207 px para el recurso Users. Así que crea una nueva función llamada quiescent_modify_user_response() y conéctala a la acción rest_api_init:

Dentro de esta función, añadimos una llamada al método register_rest_field() para añadir un campo denominado quiescent_avatar_url para el objeto user:

El método de devolución de llamada quiescent_get_user_avatar() es el siguiente:

Este método utiliza el método get_avatar_url() para devolver la URL para un gravatar de tamaño 207 px por 207 px.

Envía una solicitud GET a la ruta /wp/v2/users y el servidor devolverá un campo adicional denominado quiescent_avatar_url junto con el objeto de respuesta estándar:

Esto es todo sobre la construcción del plugin complementario. El código fuente completo se puede conseguir desde el repositorio GitHub de Envato Tuts+.

Ahora que el plugin se ha completado, estamos preparados para seguir adelante y comenzar a trabajar con AngularJS para crear plantillas, rutas y servicios para recursos, que es lo que haremos en la siguiente parte de la serie.

¿Qué viene a continuación?

En este tutorial, hemos sentado una base para crear un front-end accionado con WordPress usando su REST API y AngularJS. Analizamos los requisitos del proyecto con wireframes y creamos un plugin complementario para respaldar el front-end.

En la siguiente parte de la serie, empezaremos a trabajar con el paquete HTML que descargamos antes en este tutorial. Arrancaremos la aplicación AngularJS, configuraremos el enrutamiento y crearemos servicios RESTful para los recursos Posts, Users y Categories, así que mantente atento...

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.