En este primer vídeo presentamos la aplicación que vamos a crear y explicamos cómo la vamos a realizar. También dejamos preparado nuestro backend usando WordPress y creando un objeto «libro» que nos va a servir de base para nuestra aplicación de ejemplo. Éste custom post type que representará nuestro libro tendrá una serie de custom fields o campos personalizados, como el ISBN o la editorial.
Introducción
El equipo de Frontity ha creado un framework que nos permite crear aplicaciones web usando WordPress como backend y ReactJS como frontend de una forma sencilla y transparente.
¿Por qué usar WordPress como backend?
WordPress es un framework basado en PHP que nos permite crear aplicaciones web de una forma muy rápida. Se trata de un framework muy famoso y utilizado debido a que nos provee de una panel de administración que nos permite añadir elementos y editarlos en una base de datos sin tener conocimientos de programación ni de bases de datos. Éstos datos que introducimos en WordPress a través del panel de administración se verán reflejados en nuestra aplicación web, en nuestro caso, gracias a la API REST de WordPress.
WordPress además tiene una enorme comunidad detrás de grandes desarrolladores que nos permiten tener un framework seguro, actualizado y donde podemos usar plugins que nos van a dotar de funcionalidades más que suficientes para poder desarrollar cualquier tipo de aplicación de una forma muy rápida.
¿Qué es la API REST de WordPress?
La API REST de WordPress nos permite obtener datos de una instalación de WordPress desde cualquier lugar, como por ejemplo, una aplicación para móvil. Esto nos permite separar la funcionalidad del servidor y la base de datos (WordPress), de la aplicación que será usada por nuestros usuarios, sea cual sea del dispositivo que esté utilizando.
Gracias a esta API REST, podremos crear usuarios, leer posts, páginas o cualquier tipo de contenido desde cualquier lugar, teniendo nuestro servidor con WordPress totalmente «deslocalizado». Esta técnica cada vez más frecuente de crear aplicaciones web usando WordPress se denomina «headless WordPress». En la zona de enlaces relacionados te dejo un par de lecturas por si quieres profundizar en el tema.
Ventajas de usar ReactJS
Utilizar una librería como ReactJS en nuestro front provee de «superpoderes» a nuestra aplicación web, ya que una aplicación bien realizada con React nos permite tener aplicaciones muy rápidas, muy optimizadas y que nuestros usuarios van a agradecer.
Por ejemplo, gracias a React podemos comunicarnos con un servidor sin tener que recargar toda la página, sino sólo los elementos de nuestra aplicación que han cambiado. Esto evita la interrupción que siente el usuario en el flujo de nuestra aplicación por tener que recargar el sitio web y nos permite crear aplicaciones increíblemente fluidas.
¿Cómo funciona Frontity?
Dicho todo lo anterior ya podemos explicar cómo funciona Frontity. El framework nos permite que el usuario navegue por nuestra aplicación web sin tener que pedir datos al servidor, consiguiendo así una carga de página y una fluidez encomiables.
Esto es posible porque Frontity se comunica con la REST API de WordPress y va descargando todos los datos que va a necesitar de nuestra aplicación para así no tener que volver a pedirlos. Estos datos los almacena en un objeto Javascript que se llama ‘state’. Cuando algunos de los datos almacenados en el ‘state’ cambia, ese elemento de nuestra aplicación, y sólo él, se actualiza, sin tener que renderizar el resto de la aplicación.
Donalibros: una app para donar libros
Nada mejor para aprender a crear productos digitales que crear productos que pueden llegar a ser reales. Para esta miniserie proponemos una aplicación que intente resolver el problema de almacenar libros físicos en casa. Gracias a éste producto un usuario se puede dar de alta y donar libros a la plataforma. Éstos libros donados pueden ser solicitados por otros usuarios que ya hayan donado otros libros. Para hacer un sistema equitativo podemos hacer que puedas recibir el mismo número de libros que hayas donado.
El backend de Donalibros
Uno de los pilares de nuestra aplicación, además de la gestión de usuarios, será la creación de un objeto «Libro». Y para ello vamos a hacer uso de la poderosa función de WordPress llamada «Custom Post Types» (CPT). Un CPT no es más que un post que podemos personalizar a nuestro antojo y en este caso ponerle un nombre como «Libro».
Aunque los CPTs se pueden crear de forma programática, para facilitar el seguimiento del curso vamos a usar un plugin llamado CPT UI y cuyo enlace os dejo en la zona de enlaces relacionados.
Éste plugin nos permite además crear taxonomías personalizadas que podemos adjuntar a nuestros custom post types. En nuestro caso vamos a crear una taxonomía personalizadas llamada Género que nos va a permitir agrupar todos los libros de un mismo género para que el usuario pueda realizar búsquedas de libros por género.
Para crear campos personalizados a nuestro objeto Libro vamos a usar un plugin llamado Advanced Custom Fields, o ACF para los amigos. Y nos va a permitir, por ejemplo, asignarle los campos de tipo texto ISBN y editorial a todos nuestros libros.
Para finalizar, y gracias al plugin ACF to REST API, podemos conseguir que esos campos personalizados que hemos creado para nuestros libros sean visibles a través de la REST API, algo necesario si queremos que Frontity los pueda capturar más tarde.
Con esto tenemos nuestro backend listo para continuar. Así que seguimos en la siguiente lección.