digitalDot diseño webLogo Diseño Web digitalDot

Implementación de Log In en Kotlin con librería Retrofit

28/04/2021
Implementación de Login en Kotlin

En digitalDot intentamos acercar a todas las pantallas los mejores consejos de desarrollo para que todo el mundo tenga acceso a esta información. En esta ocasión os traemos cómo añadir Log in en Kotlin con Retrofit.

Es cierto que Kotlin ha aumentado en popularidad entre los desarrolladores de Android, pero para muchos es un leguaje extraño y lleno de misterios por resolver.

Para este ejemplo nos basaremos en el CMS de WordPress donde alejaremos la API y la base de datos de usuarios.

Cómo añadir log in en Kotlin con Retrofit

La API esta escrita en PHP y consistirá en un simple método de log in que comprueba los datos recibidos con los de la base de datos de WordPress y devuelve un JSON del usuario encontrado o un mensaje de error.

Kotlin con Retrofit
Kotlin con Retrofit

Nota: la API espera siempre el parámetro función que indica qué función debe ejecutar.

A continuación, crearemos un nuevo proyecto en Android Studio con la plantilla de Empty Activity

Kotlin con Retrofit

Nota: seleccionar Kotlin como lenguaje del nuevo proyecto

Añadimos las librerías necesarias para utilizar Retrofit en el archivo build.gradle (Module: app)

Kotlin con Retrofit

Y añadimos el permiso de Internet en el AndroidManifest.xml

Kotlin con Retrofit

Usaremos la siguiente interfaz para activity_main.xml

Kotlin con Retrofit
Kotlin con Retrofit
Kotlin con Retrofit

La interfaz consiste en dos campos de texto para introducir el email y contraseña, y un botón para realizar el inicio de sesión:

Login Kotlin

Crearemos un modelo de usuario (New->Kotlin file->Data class) llamado User de la siguiente forma:

Kotlin file

Como se puede ver está compuesto por un ID (entero), un email (cadena) y una contraseña (cadena).

A continuación, crearemos la interfaz para contactar con la API (New->Kotlin file->Interface):

Kotlin file

Con la función login definimos como va a ser la llamada (POST) a la API y qué parámetros le enviaremos:

  • funcion: para indicar que función queremos ejecutar, en este caso login.
  • email: el email introducido en el campo de texto.
  • password: la contraseña introducida en el campo de texto.

En la anotación @POST indicaremos la ruta relativa a la API. Y en el tipo Call<> indicaremos que tipo de respuesta esperamos recibir, en este caso una String ya que nuestra API no siempre devolverá un JSON.

A continuación, en el MainActivity.kt usaremos las siguientes variables globales:

MainActivity.kt

En el método onCreate creamos el servicio mediante el método createApiService():

Login en Kotlin

El método en cuestión:

Login en Kotlin

En el onCreate también implementaremos la lógica para obtener el email y contraseña desde los campos de texto:

Log in Kotlin

Por último crearemos el método executeLogin() que se encarga de hacer la llamada a la API y obtener su respuesta:

Log in Kotlin

Primero creamos la llamada usando la el método declarado en nuestra interfaz pasándole los parámetros correspondientes.

Después ejecutamos dicha llamada con el método enqueue, dicho método se ejecuta de forma asíncrona por lo que no debemos preocuparnos de bloqueos.

En la función onResponse recibimos los datos que ha devuelto la API.

Primero comprobamos que la respuesta es correcta (response_code entre 200 y 300). Y con un try/catch intentamos convertir dichos datos en un JSON y mapearlo en la clase User, si falla es porque la API no ha devuelto un JSON sino un mensaje de error por lo tanto lo mostramos en la interfaz mediante un Toast.

Con esto ya tendríamos totalmente integrado nuestro log in en Kotlin con Retrofit donde quisiéramos. En digitalDot resolvemos todas tus dudas referidas al desarrollo de apps gracias a nuestro equipo de expertos en la materia. Para todas las tus consultas y peticiones con respecto al desarrollo de aplicaciones móviles no dudes en contactar con nuestra agencia de diseño web y desarrollo.

Diseño de aplicaciones móviles. digitalDot

También puede interesarte:

Contenido
crossmenuchevron-down