blog
Wordpress

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?

Sabes instalar y configurar el entorno de desarrollo para Flutter, e incluso ya sabes como editar una aplicación básica para que ejecute tu propio código. Pero lo que necesitas en este momento es poder utilizar tu “vieja” instalación de Wordpress, que ya contiene mucho contenido, como backend de tu nueva aplicación desarrollada con Flutter. Si te estás preguntando cómo hacerlo, ¡este post es para tí!

Antes de seguir….

Te recomiendo leer todos nuestros artículos anteriores sobre Flutter. Si tienes alguna duda, ya sabes donde estamos. ;)

Fácil

Si has entendido lo básico de Flutter, verás que tener una aplicación Flutter con backend Wordpress es simplemente una cuestión de “seguir el manual”. Cómo vimos en el artículo de Sergio, el 30% de todos los sitios web en Internet están hechos en Wordpress de acuerdo con W3Techs.

Es muy probable, por tanto que alguno de tus clientes haya oído hablar de Flutter y quiera tener una aplicación Android o iOS para que sus usuarios tengan acceso a sus últimas noticias en su móvil. Gracias al framework de Dart y a la API REST de Wordpress lo puedes tener de forma fácil.

Plugins de Flutter gracias a la comunidad

Gracias a los propios plugins y a las bibliotecas de Flutter, puedes desarrollar tus propios widgets para obtener datos desde la API de Wordpress y además actualizar los estados siempre que haya un post nuevo en tu Wordpress. Los siguientes son algunas de las bibliotecas que puedes instalar en tu aplicación:

  1. Dart:Async
  2. Dart:Convert
  3. Package:Http

Sin embargo, y porque aún estamos aprendiendo Flutter, te recomiendo instalar la biblioteca  flutter_wordpress desarrollada por Sachin Ganesh y Suraj Shettigar, con licencia MIT. Esta biblioteca es muy interesante porque ya viene con la interacción básica desarrollada, además con ejemplos que puedes utilizar para implementar tu propia lógica de negocio. Flutter_wordpress usa la versión 2 de la API REST de Wordpress y permite que tu aplicación Flutter interactue con tu sitio web Wordpress.

¿Cómo empezar?

Como siempre en una aplicación desarrollada con Flutter, lo primero que tienes que hacer es declarar el plugin, en este caso flutter_wordpress, en tu fichero pubspec.yaml.

Flutter. ¿Cómo conectar con WordPress?
Declaramos la nueva biblioteca flutter_wordpress en el fichero pubspec.yaml

Después de ejecutar “flutter pub get” en el terminal, debes importar la biblioteca declarandola en el fichero lib/main.dart

Flutter. ¿Cómo conectar con WordPress?
Importamos la biblioteca en nuestro fichero .dart

¡Y empezar a programar! Por ejemplo, si quieres validar un usuario, puedes utilizar flutter_wordpress para hacerlo, gracias a su método que autentica el usuario.

Ejemplo:

Flutter. ¿Cómo conectar con WordPress?
Ejemplo de cómo autenticar el usuario existente en Wordpress con wp.Wordpress

¿Cómo recuperar los últimos artículos de Wordpress?

Flutter_wordpress ya viene, obviamente preparado para que puedas desarrollar un listado con los últimos posts de tu sitio web. El siguiente es el código que podrías utilizar para hacerlo:

Flutter. ¿Cómo conectar con WordPress?
Ejemplo de método fetchPosts() para recuperar posts de Wordpress

Autenticación y seguridad

Seguramente te habrás fijado en el parámetro authenticator y su valor wp.WordpressAuthenticator.JWT. Cómo siempre decimos, “la seguridad importa”, y en una aplicación de este tipo aún más.

La seguridad es una funcionalidad obligatoria. flutter_wordpress aun no funciona con OAuth 2.0, pero viene preparada para la seguridad, y te permite configurar la autenticación para acceder a funcionalidades de la API REST a nivel de administrador, según el usuario que utilices.

Para ello, Flutter recomienda usar el plugin de Wordpress “JWT Authentication for WP REST API“. Cómo bien sabes, este plugin extiende la API REST de Wordpress para usar la Autenticación de JSON Web Tokens como un método de autenticación.

Configurar JWT Authentication for WP REST API

Debes instalar JWT Authentication como siempre instalas tus plugins de Wordpress, pero debes tener en cuenta otros factores de configuración. Para asegurar que la cabecera de autorización HTTP esté habilitada en tu instalación, debes editar tu fichero .htaccess añadiendo lo siguiente:

Flutter. ¿Cómo conectar con WordPress?
Habilitamos el Header HTTP:Authorization en el Wordpress

Además, en el inicio de tu fichero de configuración de Wordpress wp-config.php debes añadir la clave secreta que JWT necesita para firmar el token. Puedes utlizar https://api.wordpress.org/secret-key/1.1/salt/ para obtener tu clave y utilizarla de la siguiente forma:

Flutter. ¿Cómo conectar con WordPress?
Este token es un ejemplo, y no debes copiarlo a tu instalación

También puedes habilitar el soporte a CORS en el mismo fichero wp-config.php añadiendo la constante JWT_AUTH_CORS_ENABLE.

Flutter. ¿Cómo conectar con WordPress?
Habilitamos el CORS

Otras bibliotecas para wordpress

Si por alguna razón no estás cómodo con flutter_wordpress y aun no estás preparado para desarrollar una solución propia, las siguientes son algunas de las bibliotecas alternativas a flutter_wordpress que puedes utilizar para conectar tu aplicación desarrollada con Flutter con tu CMS implementado con Wordpress:

Conclusión

Como has podido ver, conectar tu aplicación Flutter a tu CMS Wordpress no es tan complicado si entiendes los fundamentos básicos de Flutter i Dart. A partir de este momento te recomiendo instalar flutter_wordpress e ir haciendo pruebas, y personalizaciones propias.

Creo que Flutter aún está en una fase de "implementaciones básicas" para proyectos en producción, pero si lo haces, y  tienes algún problema integrandolo con el Wordpress de tu cliente, ¡no dudes en contactarnos!

¿Estás utilizando  Wordpress como backend de tus aplicaciones móviles? ¿Qué tal la experiencia?

Fotografía:  Free-Photos en Pixabay

Fuentes:

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Artículo anterior

¿WebAssembly puede sustituir a JavaScript?

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?