Configurar el entorno de la aplicación móvil

En esta parte, crearemos una aplicación moderna para Android utilizando Kotlin y Jetpack Compose para la interfaz de usuario, que servirá de plantilla para el siguiente módulo, en el que la aplicación se comunicará con el backend (que ya hemos creado anteriormente). El backend se comunicará con Vonage Verify.

Descripción general del flujo de la aplicación

La aplicación seguirá este proceso:

1. El usuario introduce su número de teléfono.
2. La aplicación envía el número de teléfono al servidor (POST /verification).
3. Si la autenticación silenciosa tiene éxito, se verifica el usuario.
4. Si falla (o no está disponible), se le pide al usuario el código por 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. Haz clic 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. Haz clic Finalizar 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.

dependencies {
    // Jetpack Compose (UI)
    implementation("androidx.activity:activity-compose:1.12.3")
    implementation(platform("androidx.compose:compose-bom:2026.01.01"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")

    // Networking + JSON parsing
    implementation("com.squareup.okhttp3:okhttp:5.3.2")
    implementation("com.google.code.gson:gson:2.13.2")

    // Coroutines (we'll use these for background networking)
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.10.2")
}

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

• Componer bibliotecas: Crear la interfaz de usuario con funciones de Kotlin en lugar de diseños XML (menos código repetitivo, más fácil de seguir en un tutorial).

• OkHttp: Un cliente HTTP fiable para comunicarse con tu backend. (Android no incluye de serie un cliente HTTP moderno y «bueno»).

• Gson: Convierte objetos de Kotlin/Java ↔ JSON para que no tengas que crear 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:

<uses-permission android:name="android.permission.INTERNET" />

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

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

Para el desarrollo local, puedes permitir el tráfico en texto claro añadiendo esto al archivo <application> etiqueta:

<application
     android:usesCleartextTraffic="true"
   ... >

Almacenar la configuración del backend en local.properties

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

• No confirmado en git
• Específico del entorno
• Diseñado para configuración local

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

BACKEND_URL=http://your-backend-ip:3000

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:

android {
    defaultConfig {
        buildConfigField(
            "String",
            "BACKEND_URL",
            "\"${project.findProperty("BACKEND_URL")}\""
        )
    }
}

A continuación, vuelve a sincronizar Gradle. Esto genera:

BuildConfig.BACKEND_URL

que podemos utilizar sin problemas en el código de Kotlin.