Erstellen einer einfachen Android-Applikation

erstellen. MainActivity.kt

Öffnen Sie MainActivity.kt und fügen Sie den folgenden Inhalt hinzu. Dies entspricht einer minimalen Aktivität.

Dann definieren Sie die Backend-URL-Konstante mit BuildConfig:

Erstellen der UI mit Jetpack Compose

In diesem Abschnitt werden wir die Benutzeroberfläche für unseren Prüfablauf. Es gibt noch keine Vernetzung denn das Ziel ist es, eine saubere Benutzeroberfläche zu erstellen, die wir später mit den Backend-Endpunkten verbinden können.

Die neue MainActivity wird wie folgt aussehen:

Implementieren wir VerifyApp()

Unsere Benutzeroberfläche hat eine kleine Anzahl von "Momenten" (Bildschirmen), die vom aktuellen Prüfschritt abhängen:

1. Rufnummer eingeben
2. Laden
3. SMS-Code eingeben (Fallback)
4. Verifiziert
5. Fehler

Jetpack Compose macht dies einfach, wenn wir den Bildschirm als Zustandsmaschine.

Erstellen einer UI State Machine

Wir definieren eine versiegelte Klasse, die alle möglichen Zustände der Benutzeroberfläche darstellt:

Auch wenn wir noch keine Integration mit dem Backend vornehmen, haben wir bereits eine requestId im SMS-Zustand, da sie später benötigt wird.

Den Bildschirm und seinen lokalen UI-Status erstellen

Innerhalb VerificationScreen() speichern wir Benutzereingaben und den aktuellen Zustand der Benutzeroberfläche mit remember { mutableStateOf(...) }:

Aufbau des Layouts mit einer einfachen Spalte

Wir erstellen ein zentriertes Layout mit Column, Spacerund Modifier:

Darin zeigen wir:

• Ein Titel
• Telefonische Eingabe
• Optionale SMS-Eingabe
• Schaltflächen basierend auf dem aktuellen Zustand der Benutzeroberfläche
• Eine Statusmeldung am unteren Rand

Telefonische Eingabe

Anmerkungen:

• Wir deaktivieren die Eingabe während des Ladens, um Doppelübertragungen zu vermeiden.
• Wir verwenden KeyboardType.Phone um eine telefonfreundliche Tastatur anzuzeigen.

SMS-Eingabe

Die SMS-Eingabe wird mit einem bedingten Rendering implementiert. Compose macht bedingte UI sehr einfach.

Wir zeigen die SMS-Eingabe nur an, wenn wir in EnterSms:

Später, wenn wir die Integration mit dem Backend vornehmen, wird diese requestId kommt von /verification.

Rendering der korrekten Aktionstaste basierend auf dem UI-Status

Wir verwenden when (uiState):

• Laden → einen Spinner anzeigen
• EnterPhone / Fehler → "Überprüfung starten" anzeigen
• EnterSms → "Code senden" anzeigen
• Verifiziert → Erfolg anzeigen + "Andere Nummer verifizieren"

Dies ist das zentrale Compose-Muster, das in echten Anwendungen verwendet wird: UI = function(state).