Héctor Álvarez

Taller tecnologías móviles

Implementación de Login y SharedPreferences

Esquema de la clase

  • Introducción
  • Crear repositorio remoto (API Login)
  • Guardar datos locales
  • Implementar funcionalidad en Loading

Introducción

Ya hemos visto cómo conectarnos a una API con DIO, pero dejamos el Login sin implementar y es hora de retomarlo.

En esta presentación veremos cómo enviar datos mediante el método POST y así obtener un token de usuario, utilizaremos ese token para saltarnos la pantalla de lógin una vez ingresemos y obtener los datos del usuario.

Para llevar esto a cabo, utilizaremos un nuevo DIO Helper, apuntando a otra api, y también utilizaremos shared_preferences para guardar ese token el cual chequearemos desde la pantalla de carga, verificando si estamos loggeados o no.

Si estamos loggeados, vamos directo al home desde la pantalla de carga, sino, mostraremos la pantalla de Login.

Creación de entidades, repositorios y casos de uso

Crearemos tres entidades, una para hacer el login, otra para obtener los datos del usuario y una para los datos del token.

El repositorio tendrá cuatro métodos para manejar el login, logout, obtención de datos del usuario y verificar si estamos logueado.

Login.dart

user.dart

token.dart

authentication_repository.dart

Casos de uso

Cómo vimos en el repositorio anterior (authentication_repository.dart), poseemos múltiples métodos que implementar, por lo que nuestro primer paso es crear un caso de uso por cada método.

check_auth_authentication_usecase.dart
get_current_user_authentication_usecase.dart
login_authentication_usecase.dart
logout_authentication_usecase.dart

check_auth_authentication_usecase.dart

get_current_user_authentication_usecase .dart

login_authentication_usecase.dart

logout_authentication_usecase.dart

Nuevo DIO helper e implementación de repositorios

Como llamaremos a una api diferente, crearemos un helper específico para esta api con su propio entorno.

También implementaremos los repositorios de autenticación (si en plural), ya que login y get_user_data serán remotos, pero check_login y logout serán locales, por lo que tendremos que utilizar los dos.

Comenzaremos con las constantes y el nuevo environment, continuaremos con dio_helper y finalizaremos con los nuevos repositorios.

constants.dart

Agregaremos userData, recuerden que estas constantes serán para usarlos con shared_preferences, por lo que acá estamos guardando el nombre de las keys para obtener los datos.

Environment

DIO TW Helper

data local repository

data remote repository

Modificar pantallas Login y loading

Es momento de implementar los repositorios y casos de uso en las pantallas de loading y login para obtener y enviar datos a la API.

En este caso utilizaremos dos tipos de repositorios en las pantallas, local y remoto. Incluso dos a la vez en cada pantalla.

Login presenter

Confirm dialog

Creamos un dialog/modal genérico, que nos puede ayudar a resolver problemas con el login.

Login Controller

Login View

Modificar pantalla loading

Actualmente en nuestro Login ya estamos guardando el token en sharedPreferences. Pero tenemos que volver a ingresar el login cada vez que volvemos a la aplicación

Para solucionar esto, vamos a modificar la pantalla de carga del flujo (splash-loading-login), loading verificará si existe un token, y si podemos obtener los datos, si todo va bien entraremos directo al Home.

Loading Presenter

Loading Controller

Loading View

Usar datos del usuario y cerrar sesión

El login y loading están funcionando, y sólo nos falta utilizar los datos del usuario obtenidos y moverlos entre las rutas hasta el login.

Para ello modificaremos un poco HomePage.

Para finalizar, cerraremos la sesión desde el Menú Drawer.

Router App

Home Controller

Home View

Cerrar sesión

Ahora es cuando modificamos el menu Drawer para agregar la opción de cerrar sesión.

Utilizaremos el caso de uso LogoutAuthentication, por lo que tendremos que agregarlos al presenter.

Modificaremos la vista para utilizar el nombre del usuario y crearemos la opción 'Salir'.

Menu drawer presenter

Menu drawer controller

Menu drawer view

Home controller

Pregunta

¿Por qué no podemos acceder a la pantalla de históricos?