Crear Aplicación Flutter usando WordPress REST API – 54 minutos

WordPress genera un REST API, el cual podemos consumir. En esta ocasión vamos a cargar la información de nuestro blog en una aplicación para móviles de Android, iOS.

Utilizaremos Flutter para realizar este ejercicio.

Aquí puedes ver los 9 vídeos.

En estos vídeos hablamos sobre como crear una app con flutter consumiendo el api-rest de WordPress WP-JSON
Tomando en cuenta que WordPress es usado para sitios web, blogs, portales de turismo, comercio electrónico, etc…

Crearemos nuestra propia app con una instalación de WordPress en local.
y en este enlace encuentras mayor información.

Encuentra los archivos de este proyecto en: http://iimm.biz/wp-flutter

  • 0:00 Introducción
  • 1:48 Temario
  • 2:50 Demostración de WordPress Instalado
  • 3:17 Creación del proyecto flutter

Crear App Flutter agregando ID

Con el siguiente comando vamos a crear nuestro proyecto de App Flutter al mismo tiempo que agregamos el ID (más adelante podremos reemplazarlo).

flutter create com.u1futurista lugaresasombrosos

com.u1futurista podría ser tu dominio y lugares asombrosos el nombre de tu App. no uses números al inicio de cada palabra, como podrás ver si usamos un número se agregrá una letra. Presiona Enter para crear el proyecto.


  • 0:00 Iniciando el proyecto
  • 0:55 Instalación de dependencies en pubspec.yaml
  • 3:22 Importancia del archivo main.dart
  • 6:40 Probando App en emulador o dispositivo fisico

Configurar pubspec.yaml

La línea versión debemos aumentarla en 1 cada vez que hagamos un release. Las tiendas en línea como Google PlayStore solo aceptan una versión diferente cada vez que envias una actualización. Flutter nos facilita esta configuración y tan solo tenemos que aumentar la versión aquí.

version: 1.0.1+1

Además, vamos a agregar unos packages o plugins para flutter que nos ayudarán a interactuar con archivos externos como http.

En este archivo pubspec.yaml es muy importante cada tab así que no te recomiendo solo copiar y pegar, hazlo manualmente para asegurarte que estás haciéndolo correctamente.

Para este proyecto estaremos usando los siguientes packages:

http, html, flutter_widget_from_html, google_fonts, share

como habrás notado algunas dependencias no tienen versión asignada y otras si. Si no colocas una versión específica, Flutter cargará la versión más reciente que se encuentre en el repositorio.

Si usas Visual Studio Code al guardar el archivo (Ctrl+s) el editor ejecutará el comando flutter pub get. Si usas otro editor o Android Studio, ejecuta este comando en la terminal.

flutter pub get

Tras ejecutar este comando no deberías tener ningún error, si hay un error revisa los cambios que haz hecho.

Iniciando en main.dart

El archivo principal de nuestro proyecto es main.dart, no cambies el nombre.

Este archivo se compone de

void main() => runApp(MyApp());

Que inicializa nuestro proyecto en la clase MyApp. Aunque puedes cambiar el nombre, puedes dejarlo así ya que es irrelevante. Mira el siguiente ejemplo de cómo quedaría.

El atribulo title: de MaterialApp será el titulo que se mostrará en nuestra App al cambiar de aplicación, ejemplo:

mientras que el atributo title: que está dentro del Scaffold será lo que se mostrará en la barra principal de nuestra aplicación.

Cambiando la etiqueta de nuestra App

En el archivo AndroidManifest.xml se encuentra la etiqueta application, la cual mostrará una etiqueta en nuestra App cuando se instale en el telefono. Para ello, vamos a cambiar el nombre que queremos mostrar al instalar nuestra App.

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="Lugares Asombrosos"
        android:icon="@mipmap/ic_launcher">

Ahora mismo puedes empezar a previsualizar tu aplicación con el depurador de flutter, o pulsando F5 en Visual Studio Code.


  • 0:00 Probando app en el emulador o dispositivo móvil
  • 3:20 Empezamos a programar la petición HTTP

Obtener data de WordPress Api Rest

La información desde WordPress la obtendremos a través de formato JSON por http.

Importaremos el paquete o plugin http y lo usaremos dentro de dart como http. También importaremos el paquete convert para decodificar el formato JSON.

Crearemos un Future<List> para hacer la petición GET y obtener la data.

en la variable final dominiourl se reemplazaría por la URL de WordPress, en un formato así

http://dominio.com/wp-json/wp/v2/posts?_embed

con lugares() ahora tendríamos una lista que contiene nuestros post de WordPress.


  • 0:00 Limpiamos las líneas innecesarias
  • 3:26 Agregamos FutureBuilder para procesar la petición HTTP
  • 0:00 Condicional que comprueba si hay datos hasData
  • 3:09 Trabajando con ListView.builder

Mostrando posts de WordPress en Flutter

Vamos a nuestro Scaffold y en el atributo body pondremos un FutureBuilder. En donde vamos a cargar en future: la lista lugares(). Para ver initialData click aquí.

Antes de mostrar algo en el return, vamos a condicionar que mientras future esté vacio muestre un CircularProgressIndicator(), esto lo realizamos con

if(snapshot.hasData){
  return Container();
}else{
  return CircularProgressIndicator();
}

Trabajando los post con ListView.builder

Para mostrar los resultados usaremos un constructor tipo lista ListView.builder y para no estar escribiendo repetidas veces snapshot.data, lo pondremos en una variable mas corta como podría ser posts o la variable que prefieras.

if(snapshot.hasData){
  var posts = snapshot.data;
  return ListView.builder(
   itemCount:posts.length,
   itemBuilder: (context, index){
     return Text(posts);
   }
  );
}else{
  return CircularProgressIndicator();
}

esto nos debería imprimir en pantalla todo lo que está en la lista. Ahora vamos a convertir la lista a mapas

Seguimos maquetando el contenido y después le daremos formato al texto del título y como tercer punto agregaremos la imágen destacada del post al item en ListView.builder.

  • 0:00 Continuamos maquetando el contenido de nuestro json
  • 0:18 Le damos formato al texto del titulo o encabezado
  • 1:11 Agregando la Imagen Destacada

Dando formato al texto de titulo

Le daremos un formato de texto mas grande para el texto de título, con esto vamos a mostrar un texto mas grande que es común de las tarjetas de contenido.

Para conseguir las imágenes es importante que nuestra URL incluya _embedded, y al momento de mostrar la imágen, deberíamos usar la siguiente cadena, en donde podremos cambiar «thumnail», «medium», «mediu_large», «large» y «full».

["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["medium_large"]["source_url"]

Agregamos FadeInImage para mostrar un loading.gif mientras carga y la imagen destacada

En nuestro ListView.builder vamos a agregar la imágen destacada de nuestro post, por lo que cargaremos un Widget FadeInImage, que se encargará de mostar un GIF mientras descarga la imágen al dispositivo y cuando la descarga se complete, muestre la imágen.


  • 0:00 Encerramos todo en GestureDetector
  • 1:15 Creamos la pantalla de detalles del post individual
  • 3:08 Configuración de Routes MaterialApp en main.dart
  • 9:00 Instalando package de HTML para mostrar el contenido completo

Prepararemos la navegación con GestureDetector onTap

Encerraremos todo el contenido de nuestro ITEM dentro de un GestureDetector(). donde usaremos el parámetro de onTap y haremos que navegue a otra pantalla enviando los datos del post en modo, mira este ejemplo:

Continua…

Comentarios

9 respuestas

  1. Avatar de Oscar Mejia
    Oscar Mejia

    No estan subidos los archivos del proyecto estimado ??? seria bueno que lo compartieras por favor ~!!!

    1. Avatar de Baldomero Cho
      Baldomero Cho

      corregido

  2. Avatar de sebastian

    Hola amigo primero que nada quiero agradecerte aprendo muchisimo con tus videos de youtube, seria muy bueno una segunda parte de este proyecto haciendo mejoras como agregando un MENU en el sidebar para hacerlo con una mejor experiencia de usario, saludos que este muy bien.

    1. Avatar de Baldomero Cho
      Baldomero Cho

      Hola Sebastian. Gracias por tu comentario, me alegra saber que te esté siendo util mi contenido.

      En cuanto a la segunda parte, ya llegará en unos dias. Falta el menú, mostrar fechas, categorias, darle colores, cambiar tipografia, poner anuncios de admob y otras cosas.

      Cuando esté disponible recibirás la notificacion de youtube.

      Saludos,

Responder a Baldomero Cho Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *