Configurar el entorno de la aplicación móvil

En esta parte, crearemos una aplicación Android moderna utilizando Kotlin y Jetpack Compose para la interfaz de usuario, que se utilizará como plantilla para el siguiente módulo, donde la aplicación se comunicará con el backend (que creamos previamente). El backend hablará con Vonage Verify.

Visión general del flujo de la aplicación

La aplicación seguirá este flujo:

1. El usuario introduce su número de teléfono.
2. La aplicación envía el número de teléfono al backend (POST /verification).
3. Si la autenticación silenciosa tiene éxito, se verifica el usuario.
4. Si falla (o no está disponible), se pide al usuario el código SMS.
5. La aplicación envía el código al backend (POST /check-code).
6. La aplicación muestra el resultado de la verificación.

Crear el proyecto Android

1. Abre Android Studio.

2. Haga clic en Nuevo proyecto → Actividad de composición vacía.

3. Utiliza estos ajustes:

   • Nombre: Verify2FADemo
   • Idioma: Kotlin
   • SDK mínimo: API 24 (Android 7.0)

4. Haga clic en Acabado y espera a que se complete la sincronización con Gradle.

Configurar las dependencias de Android

Abrir app/build.gradle.kts y añade (o actualiza) las siguientes dependencias.

Merece la pena explicar esto a los lectores que no estén familiarizados con los móviles:

• Componer bibliotecas: Construir UI con funciones Kotlin en lugar de diseños XML (menos boilerplate, más fácil de seguir en un tutorial).

• OkHttp: Un cliente HTTP fiable para comunicarse con su backend. (Android no incluye un cliente HTTP moderno por defecto).

• Gson: Convierte objetos Kotlin/Java ↔ JSON para que no tengas que construir manualmente cadenas JSON en todas partes.

• Coroutines: Las aplicaciones Android no deben bloquear el hilo principal. Las coroutines nos permiten trabajar en red en segundo plano y actualizar la interfaz de usuario de forma segura.

Después de editar el archivo, haga clic en Sincronizar ahora.

Permisos de Internet y redes locales

En AndroidManifest.xmlañade esto dentro de <manifest> etiqueta:

Sin esto, Android simplemente bloqueará todas las llamadas salientes de la red.

Si llama a un backend a través de http://... (no HTTPS), Android puede bloquearlo dependiendo de su SDK de destino / configuración de seguridad de la red.

Para el desarrollo local, puede permitir el tráfico de texto claro añadiendo esto a la directiva <application> etiqueta:

Almacenar la configuración del backend en local.properties

Codificar URLs directamente en archivos Kotlin es frágil e inseguro.
En su lugar, almacenaremos la URL del backend en local.propertiesque es:

• No confirmado en git
• Entorno específico
• Diseñado para configuración local

Abrir (o crear) local.properties en la raíz del proyecto Android y añade:

A continuación, ponemos este valor a disposición de la aplicación Android a través de BuildConfig.

En app/build.gradle.ktsañade:

A continuación, sincronice Gradle de nuevo. Esto genera:

que podemos utilizar con seguridad en el código Kotlin.