🤠👊Creando una Flutter App para Chuck Norris en tan solo 10 minutos

✨[English Version]✨

En este artículo vamos a crear una aplicación de Flutter en la que vamos a consumir una API. Aunque me gustaría advertiros de que no va a ser una API cualquiera, sino que vamos a utilizar la famosa API de Chuck Norris.

Ya sabéis que Chuck es peligroso ¡Hasta con las manos en los bolsillos!

Y como en este artículo no queremos despertar a la bestia, no debéis preocuparos, ya que hemos hablado con Chuck y tenemos su aprobación.

Por tanto, con el permiso de Chuck ¡Comenzamos!

📌Preparando el Layout de la app

Aunque mi intención no es la de hacer una super aplicación que se vea ideal en todas las plataformas: web, mobile y desktop… Vamos a intentar hacer algo que sea decente y nos vamos a centrar principalmente en la versión Mobile de Android.

El resultado final de la interfaz de nuestra ChuckApp es crear una app que luzca como la siguiente:

Si os fijáis nuestra futura App estará formada por un fondo de Chuck, y justamente encima de este fondo donde cargamos los Widgets de nuestra aplicación. Aunque no serán muchos, tendremos una frase que será consumida de la API de Chuck junto a un botón que nos permitirá realizar una nueva petición a la API que modificará la frase actual.

El código de nuestra interfaz será:

Principalmente la interfaz destacar por:

• Que hemos otorgado preferencia a la vista lateral (landscape) para mobile.

Por ello, si cargamos la app en un dispositivo móvil, directamente se nos abrirá la siguiente vista:

• Hemos ocultado la barra superior de notificaciones (notification bar) y hemos modificado en parte la barra inferior de navegación de sistema (navigation system bar) para que en vez de mostrar la barra de la siguiente manera:

Se muestre así:

• Por el momento si hacemos click en el botón, podemos ver que nos aparece un mensaje en la consola de Debug:

• Y finalmente, hemos cargado el background de nuestra app desde una ruta URL de una imagen de internet.

Para asegurarnos de que en los smartphones nuestra app otorga prioridad a la vista lateral, tenemos que añadir unos ajustes. En el AndroidManifest.xml situado en android/app/src/AndroidManifest.xml escribiremos lo siguiente:

Este cambio, es exclusivo para Android, si queréis realizar una compilador para un móvil Apple es necesario utilizar un Mac y como yo no lo tengo no puedo programar para iOs. Aunque sabiendo el comando no Android, no os será muy difícil encontrar su equivalente para dispositivos iOs.

Si nos fijamos si modificamos la URL de nuestra aplicación por la otra que os he dejado comentada:

Podemos ver que nuestra aplicación puede cambiar el fondo de la App muy fácilmente:

Problemas con las CORS

El uso de CORS, en algunas páginas, nos impide el utilizar recursos con orígenes externos dentro de una aplicación de Flutter. Podéis daros cuenta de si la imagen está bloqueada por CORS abriendo la consola del inspector de Chrome (para abrir el inspector pulsamos F12) y si el recurso que estamos utilizando es de una web que controla las CORS, y estamos realizando la compilación para Web os puede aparecer una ventana como la siguiente:

Aunque podríamos utilizar una imagen si realizamos lo siguiente:

flutter run -d chrome --web-renderer html // run app

flutter build web --web-renderer html --release // production build

Vamos a verlo:

Y vemos que ahora estamos utilizando una imagen que impedía las CORS:

Perfecto, pues ya con la interfaz de nuestra app desarrollada vamos a empezar a empezar con la API.

📌 Explorando la API de Chuck Norris

La API de Chuck, es una API REST, es decir, que utiliza el protocolo HTTP para llamar a los end points (rutas URL). Mediante los cuales realizaremos la comunicación con el servidor con la finalidad de obtener los recursos que este nos sirve.

Para poder trabajar con una API, debemos primeramente explorar la API. Y ver cuales son los end points vamos a consumir.

En nuestro caso, solamente vamos a consumir un end point, que será el siguiente:

Un ejemplo de respuesta a nuestra petición será el siguiente:

De hecho si vamos al navegador y realizamos una petición, podemos ver que recibimos una respuesta muy similar:

Las APIs, están pensadas principalmente para realizar comunicación entre dos aplicaciones y por tanto, no tienen un diseño que destaque por su belleza ni por su elegancia. Pese a ello, podemos “presentar” dicha respuesta algo mejor si utilizamos un plugin en nuestro browser como por ejemplo:

Si volvemos a realizar la petición, podemos ver que el resultado mejora en parte su presentación:

Aunque esto lo hace internamente el plugin que acabamos de instalar ya que la respuesta que recibimos por parte de la API es la misma que la que hemos visto anteriormente.

📌Añadiendo un icono al logo de nuestra aplicación

Si nos fijamos en la API, cuando lanzamos la petición podemos ver que tenemos el icon_url.

Si abrimos la URL con el navegador, podemos ver que tenemos el siguiente icono y lo guardamos por el momento en el escritorio para que sea el futuro icono de nuestra aplicación:

Lo que vamos a hacer es que sea el icono de la aplicación, para cuando la ejecutamos desde el mobile:

Para ello, vamos a utilizar el paquete de flutter_launcher_icons, para poder trabajar con él debemos añadirlo al pubspec.yaml una manera de hacerlo es ejecutando el siguiente comando:

flutter pub add flutter_launcher_icons

El cual si os fijáis añade la dependencia en el pubspec.yaml y descarga e instala la dependencia para que podamos trabajar desde nuestro proyecto:

Por defecto, nuestra dependencia se instalará en dependencies:

Una vez añadida la dependencia, vamos a ir a pulsar botón derecho sobre el directorio de nuestro proyecto con la finalidad de añadir el icono en dicho directorio:

Una vez abierto el directorio, pegamos el icono en su interior:

Y refrescamos el directorio para asegurarnos que se muestre en nuestro explorador de ficheros:

Una vez tenemos el icono añadido vamos a mover la dependencia a dev_dependencies y vamos a poner la ruta en la que tenemos situado el icono:

Es muy importante que os fijéis en las tabulaciones que estamos realizando ya que si no respetáis dichas indentaciones no os funcionará correctamente. Para ayudaros a verlas mejor os las he marcado con dos líneas de distintos colores. Además hemos puesto la dependencia en test y no en las dependencias normales, ya que solamente nos hace falta durante el desarrollo así nuestra aplicación será más ligera cuando la empaquetamos para su publicación.

Para continuar, solamente, tenemos que ejecutar el siguiente comando:

flutter pub add flutter_launcher_icons

Y finalmente para cambiar el icono debemos ejecutar lo siguiente:

Si ahora vamos a la vista mobile, podemos ver que el icono se ha cambiado correctamente:

📌Cambiando el nombre de la aplicación

Además, vamos a cambiar el nombre de la app a ChuckApp ya que pese a que hemos cambiado el icono, el nombre de la aplicación no se ve bonito.

Para ello, vamos a realizar la instalación del package flutter_launcher_name mediante el comando:

flutter pub add flutter_launcher_name

Aunque en este caso en particular vemos que tenemos un problema con los package con los que estamos trabajando:

Podemos bajar la versión de flutter_launcher_icons, a una versión que sea compatible con la versión 2.1.16 de yaml para evitar dicho error. Para ello, vamos a la web oficial del paquete.

En nuestro caso, vamos a realizar un downgrade del package flutter_launcher_icons a la versión: 0.7.2

Lo cual nos permitirá realizar la instalación de la dependencia sin problema:

Y una vez instalada la dependencia, vamos a moverla a test y a modificar el nombre de la aplicación de la siguiente manera:

Y ya tenemos el nombre de nuestra aplicación cambiado, por tanto ¡Continuamos!

📌Configurando la librería HTTP para poder consumir una API de Flutter

Una vez ya tenemos el Layout de nuestra aplicación listo y conocemos la API que vamos a consumir, vamos a preparar nuestra app para que pueda consumir una API.

Para realizar llamadas a una API, Flutter nos proporciona una excelente biblioteca que nos permitirá realizar llamadas a nuestras API’s REST de una forma sencilla gracias a que nos proporciona una serie de métodos de alto nivel.

Para ello, usaremos métodos de alto nivel. Nosotros concretamente solo uno y será el método:

• read : solicitará al end point (URL) que le especifiquemos una petición (request) mediante una petición HTTP de tipo GET. Utilizamos este tipo y no otro debido a que solamente queremos recibir datos y no tenemos que enviar información para recibir dichos datos. Por tanto, para una situación como esta suele ser usual que utilicemos read. Cuando realizamos una petición, la respuesta vendrá en proporcionada en el interior de un Future<String>.

Para poder utilizar dicha librería (http) tenemos que realizar la importación de la dependencia http.

Para ello, vamos a ejecutar:

flutter pub add http

En este caso, la dependencia la dejaremos dentro del apartado de dependencias, por tanto, no tendremos que hacer nada más:

📌Otorgando el permiso de internet para los móviles Android

Para evitar tener problemas si realizamos la compilación para mobile para Android, debemos de otorgar el permiso de internet que permitirá otorgar permisos a la aplicación para conectarse a internet:

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

Para otorgar dicho permiso, vamos al fichero AndroidManifest.xml que se encuentra dentro de android/app/src/main/AndroidManifest.xml y pegamos dicho permiso:

Importando la librería para poder trabajar con la librería en las clases de Dart

Y finalmente, una vez importada la librería, para poder utilizarla dentro de las clases de nuestra aplicación, debemos de realizar el import de la librería en el archivo main.dart:

import 'package:http/http.dart';

Si nos fijamos cuando realizamos el import de la librería HTTP, podemos ver que en la parte inferior del import aparece una línea inferior azul. Si nos situamos encima con el cursor, podemos ver que aparece un mensaje en el que nos informa que no tiene mucho sentido importar una librería que aún no estamos utilizando:

Por tanto ¡Vamos a utilizar dicha librería!

📌Consumiendo una API con la librería HTTP de Flutter

Bien, ya tenemos todo listo, ahora finalmente vamos a ver un ejemplo de cómo consumir nuestra API:

Para poder mapear los datos que recibimos en el JSON a objetos, tenemos que crear un objeto:

El código del fichero chuck.dart será el siguiente:

Finalmente antes de combinar la interfaz con el código de la llamada a la API, vamos a ver el ejemplo solo para resulto más sencillo de entender:

Si ejecutamos la aplicación y la API nos responde correctamente, podemos ver que inicialmente y durante muy poco tiempo nos muestra un CircularProgressIndicator:

Y finalmente, en principio tras unos milisegundos, nos muestra la frase:

Si modificamos la ruta de la API haciendo que la ruta no sea válida, vemos que nos salta una Excepción:

Podemos ver desde el propio navegador que no es una página que tenga un end point:

Si avanzamos, podemos ver que primeramente nos muestra una excepción con un código HTTP 404 (Not found) ya que no es capaz de realizar la petición a un end point que no existe:

Y posteriormente, si continuamos la ejecución:

Vemos que aparece en el mismo mensaje en nuestro dispositivo:

📌Añadiendo el Layout a nuestra llamada a la API

Si combinamos la interfaz que hemos realizado anteriormente, con la llamada a la API que acabamos de realizar y lo acompañamos de unas leves modificaciones, el código será el siguiente:

Y ahora sí que podemos ver el resultado final y como se van modificando las frases cuando pulsamos sobre el botón de cargar una frase:

Os dejo el link del repositorio, espero que os guste ¡Saludos!👋🤠