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

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

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.

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.

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.

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

Post en progreso…

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

  2. 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.

    • 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,

  3. […] Crear Aplicación Flutter usando WordPress REST API – 54 minutos […]

Deje una respuesta