基本的なAndroidアプリケーションを作成する

作成 MainActivity.kt

オープン MainActivity.kt を作成し、以下の内容を追加します。これは最小限のアクティビティに相当する。

次に、バックエンドのURL定数を BuildConfig:

Jetpack ComposeでUIを作成する

このセクションでは ユーザーインターフェース 検証フローにそこには ネットワークはまだない というのも、ゴールはクリーンなUIを作成し、後でバックエンドのエンドポイントに接続することだからだ。

新しいMainActivityは次のようになります：

VerifyApp()を実装しよう

私たちのUIには、現在の検証ステップに依存する少数の「モーメント」（画面）がある：

1. 電話番号の入力
2. ローディング
3. SMSコードを入力（フォールバック）
4. Verify
5. エラー

Jetpack Composeでは、画面を 状態マシン.

UIステートマシンの作成

可能なすべてのUI状態を表すために、密封されたクラスを定義する：

バックエンドとの統合はまだですが、すでに requestId をSMSの状態にしておく必要がある。

スクリーンとそのローカルUIステートの作成

内部 VerificationScreen() で、ユーザー入力と現在のUIの状態を保存します。 remember { mutableStateOf(...) }:

シンプルなカラムでレイアウトを構築する

を使用して、中央に配置されたレイアウトを作成します。 Column, Spacerそして Modifier:

その中で私たちは示している：

• タイトル
• 電話入力
• オプションのSMS入力
• 現在のUIの状態に基づくボタン
• 下部にステータスメッセージ

電話入力

注釈

• 二重投稿を防ぐため、ロード中は入力を無効にしています。
• を使用する。 KeyboardType.Phone をクリックすると、携帯電話用のキーボードが表示される。

SMS入力

SMS入力は条件付きレンダリングで実装される。Composeは条件付きUIを非常に簡単にします。

にいる場合のみ、SMS入力を表示します。 EnterSms:

後にバックエンドと統合する際に、この requestId から来る。 /verification.

UIの状態に基づいて正しいアクションボタンをレンダリングする

を使用する。 when (uiState):

• ロード → スピナーを表示
• EnterPhone / Error → "Start verification "と表示。
• EnterSms → "コードを送信 "を表示
• Verify → 成功を表示 + "Verify another number"

これは、実際のアプリで使用されるコアコンポーズパターンです。