Héctor Álvarez

Taller tecnologías móviles

Consultas HTTP con DIO

Esquema de la clase

  • Introducción
  • Dio Helper
  • Creando un repositorio remoto
  • Consultas GET

Introducción

DIO

DIO

DIO es un cliente HTTP, posee múltiples características avanzadas.

  • Cliente HTTP
  • Soporta Interceptores
  • Descarga de archivos
  • Multipart/form-data
  • Entre otros

Inportar paquetes

Environment

Environment

DioHelper

Creación de entidades para la nueva API

Para poder utilizar el nuevo servicio necesitaremos algunas entidases, repositorios y nuevos casos de uso.

Es la primera vez que utilizaremos entidades que contengan otras entidades, por lo agregará un poquito más de complejidad, aunque seguirán siendo pequeños.

Las entidades que debemos agregar serán las siguientes:

Resumen
ResumenIndicador
Historico
HistoricoSerie

Utilizaremos la api de FINDIC para obtener los indicadores; obtendremos el resumen diario y los historiales desde los históricos generados (ver documentación).

Resumen_Indicador

Resumen

Historico_serie

histórico

Repositorio y casos de uso

Crearemos un repositorio donde alojaremos nuestras dos consultas get, posteriormente crearemos sus respectivos casos de uso.

Repositorio

Get_summary_usecase

Get_historic_serie_usecase

data_remote_indicador_repository

Pantallas

Tenemos toda la base para la conexión lista, el cliente http, las entidades, los repositorios, casos de uso y el repositorio remoto.

Ahora es la hora de empezar a implementarlos en una pantalla, en primer lugar crearemos una pantalla para el resumen de indicadores.

Luego finalizaremos con una pantalla para ver el histórico.

Descargaremos las pantallas base indicadores e históricos indicadores y las desempaquetaremos en el directorio lib/app/pages.

Pages

Agregamos las rutas de indicadores al final de nuestras rutas.

Router

Agregamos las nuevas pantallas a las rutas.

HomeController

Agregamos la pantalla indicadores al inicio de nuestra lista de pantallas del BottomNavigationWidget.

Indicadores Presenter

Indicadores_Controller

Indicadores_view

Indicadores_view

BottomNavigationBar

Vista de históricos

Ya tenemos los indicadores diarios, estos vienen con un código; nuestro siguiente paso será envíar el código a una subpantalla y obtener el histórico del indicador seleccionado.

Modificaremos nuestras rutas y daremos soporte a nuestra vista de histórico de recibir datos mediante rutas.

Nuestra pantalla contendrá un gráfico y la lista de todos los registros

Modificar pubspec.yaml

historico indicadores presenter

Histórico indicadores controller

Vista históricos

Modificar Router

Modificar indicador controller

Vista históricos

BottomNavigationBar