Node.js

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

作成 `MainActivity.kt`

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

package com.vonage.verify2.test

import android.os.Bundle
import androidx.activity.ComponentActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

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

private const val BACKEND_URL = BuildConfig.BACKEND_URL

Jetpack ComposeでUIを作成する

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

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

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { VerifyApp() }
    }
}

VerifyApp()を実装しよう

@Composable
fun VerifyApp() {
    MaterialTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
            VerificationScreen()
        }
    }
}

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

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

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

UIステートマシンの作成

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

private sealed class VerifyUiState {
    data object EnterPhone : VerifyUiState()
    data object Loading : VerifyUiState()
    data class EnterSms(val requestId: String) : VerifyUiState()
    data class Verified(val method: String) : VerifyUiState()
    data class Error(val message: String) : VerifyUiState()
}

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

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

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

var phone by remember { mutableStateOf(DEFAULT_PHONE) }
var smsCode by remember { mutableStateOf("") }
var uiState by remember { mutableStateOf<VerifyUiState>(VerifyUiState.EnterPhone) }
var statusMessage by remember { mutableStateOf("") }

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

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

Column(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { ... }

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

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

電話入力

OutlinedTextField(
    value = phone,
    onValueChange = { phone = it },
    enabled = uiState !is VerifyUiState.Loading,
    label = { Text("Phone number") },
    placeholder = { Text("+34600000000") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
    modifier = Modifier.fillMaxWidth()
)

注釈

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

SMS入力

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

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

val requestIdForSms = (uiState as? VerifyUiState.EnterSms)?.requestId
if (requestIdForSms != null) {
    OutlinedTextField(
        value = smsCode,
        onValueChange = { smsCode = it },
        enabled = uiState !is VerifyUiState.Loading,
        label = { Text("SMS code") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        modifier = Modifier.fillMaxWidth()
    )
}