Créer une application Android de base

Créer MainActivity.kt

Ouvrir MainActivity.kt et ajoutez le contenu suivant. Cela correspond à une activité minimale.

Définissez ensuite la constante de l'URL du backend à l'aide de BuildConfig:

Créer l'interface utilisateur avec Jetpack Compose

Dans cette section, nous allons construire le interface utilisateur pour notre flux de vérification. Il y a pas encore de mise en réseau car l'objectif est de créer une interface utilisateur propre que nous pourrons ensuite connecter aux points de terminaison du backend.

La nouvelle activité principale ressemblera à ceci :

Implémentons VerifyApp()

Notre interface utilisateur comporte un petit nombre de "moments" (écrans) qui dépendent de l'étape de vérification en cours :

1. Saisir le numéro de téléphone
2. Chargement
3. Saisir le code SMS (fallback)
4. Verify
5. Erreur

Jetpack Compose rend cela facile si nous modélisons l'écran comme un machine d'état.

Créer une machine d'état de l'interface utilisateur

Nous définissons une classe scellée pour représenter tous les états possibles de l'interface utilisateur :

Même si nous n'intégrons pas encore le backend, nous incluons déjà une fonction requestId dans l'état SMS parce qu'il sera nécessaire plus tard.

Créer l'écran et son état local de l'interface utilisateur

A l'intérieur VerificationScreen() nous stockons les entrées de l'utilisateur et l'état actuel de l'interface utilisateur avec remember { mutableStateOf(...) }:

Construire la mise en page avec une simple colonne

Nous créons une mise en page centrée à l'aide de Column, Spaceret Modifier:

A l'intérieur, nous montrons :

• Un titre
• Entrée du téléphone
• Entrée SMS en option
• Boutons basés sur l'état actuel de l'interface utilisateur
• Un message d'état en bas de page

Entrée du téléphone

Notes :

• Nous désactivons la saisie pendant le chargement afin d'éviter les doubles envois.
• Nous utilisons KeyboardType.Phone pour montrer un clavier adapté aux téléphones.

Entrée SMS

La saisie par SMS sera mise en œuvre avec un rendu conditionnel. Compose rend l'interface utilisateur conditionnelle très simple.

Nous n'affichons l'entrée SMS que si nous sommes en EnterSms:

Plus tard, lors de l'intégration avec le backend, cette requestId proviendra de /verification.

Rendre le bouton d'action correct en fonction de l'état de l'interface utilisateur

Nous utilisons when (uiState):

• Chargement → afficher un spinner
• EnterPhone / Erreur → afficher "Commencer la vérification".
• EnterSms → montrer "Soumettre le code"
• Vérifié → afficher le succès + "Vérifier un autre numéro".

Il s'agit du modèle de base Compose utilisé dans les applications réelles : UI = function(state).