このページは Cloud Translation API によって翻訳されました。

Switch to English

Firebase Android Codelab - フレンドリーなチャットを構築する

1。概要

スクリーンショット

画像: フレンドリーなチャットアプリ。

Friendly Chat コードラボへようこそ。このコードラボでは、Firebase プラットフォームを使用して Android 上でチャットアプリを作成する方法を学びます。

学べること

Firebase Authentication を使用してユーザーにサインインを許可する方法。
Firebase Realtime Database を使用してデータを同期する方法。
Cloud Storage for Firebase にバイナリファイルを保存する方法。
Firebase Local Emulator Suite を使用して Firebase で Android アプリを開発する方法。

必要なもの

最新のAndroid Studioバージョン。
Android 5.0以降を搭載したAndroidエミュレータ。
Node.js バージョン 10 以降 (エミュレータスイートを使用するため)。
Java 8 以降。 Java をインストールするには、次の手順を使用します。バージョンを確認するには、 java -versionを実行します。
Kotlin プログラミング言語に精通していること。

2. サンプルコードを入手する

リポジトリのクローンを作成する

コマンドラインから GitHub リポジトリのクローンを作成します。

$ git clone https://github.com/firebase/codelab-friendlychat-android

Android Studioにインポートする

Android Studio で、 [ファイル] > [開く]を選択し、 build-android-startディレクトリ ( android_studio_folder ) サンプルコードをダウンロードしたディレクトリからコピーします。

これで、Android Studio でbuild-android-startプロジェクトが開いたはずです。 google-services.jsonファイルが見つからないという警告が表示されても、心配する必要はありません。後のステップで追加されます。

依存関係を確認する

このコードラボでは、必要な依存関係はすべてすでに追加されていますが、アプリに Firebase SDK を追加する方法を理解することが重要です。

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

app/build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. Firebase CLIをインストールする

このコードラボでは、Firebase Emulator Suiteを使用して、Firebase Auth、Realtime Database、Cloud Storage をローカルでエミュレートします。これにより、アプリを構築するための安全、高速、コストのかからないローカル開発環境が提供されます。

Firebase CLIをインストールする

まず、 Firebase CLIをインストールする必要があります。 macOS または Linux を使用している場合は、次の cURL コマンドを実行できます。

curl -sL https://firebase.tools | bash

Windows を使用している場合は、インストール手順を読んでスタンドアロンバイナリを入手するか、 npm経由でインストールしてください。

CLI をインストールしたら、 firebase --versionを実行すると、バージョン9.0.0以降が報告されるはずです。

$ firebase --version
9.0.0

firebase loginを実行して、CLI を Google アカウントに接続します。これにより、新しいブラウザウィンドウが開き、ログインプロセスが完了します。以前に Firebase プロジェクトを作成したときに使用したのと同じアカウントを選択してください。

4. Firebase エミュレータスイートに接続する

エミュレータを起動する

ターミナルで、ローカルのcodelab-friendlychat-androidディレクトリのルートから次のコマンドを実行します。

firebase emulators:start --project=demo-friendlychat-android

このようなログがいくつか表示されるはずです。ポート値は、クローンされたサンプルコードに含まれているfirebase.jsonファイルで定義されています。

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Web ブラウザでhttp://localhost:4000に移動して、Firebase Emulator Suite UI を表示します。

エミュレータスイート UI ホーム

コードラボの残りの部分ではemulators:startコマンドを実行したままにしておきます。

アプリを接続する

Android Studio でMainActivity.ktを開き、 onCreateメソッド内に次のコードを追加します。

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5.スターターアプリを実行します

google-services.jsonを追加

Android アプリを Firebase に接続するには、Android プロジェクトのappフォルダー内にgoogle-services.jsonファイルを追加する必要があります。このコードラボの目的のために、Firebase エミュレータスイートに接続できるようにするモック JSON ファイルを提供しました。

mock-google-services.jsonファイルをbuild-android-start/appフォルダーにgoogle-services.jsonとしてコピーします。

cp mock-google-services.json build-android-start/app/google-services.json

このコードラボの最後のステップでは、実際の Firebase プロジェクトと Firebase Android アプリを作成して、この模擬 JSON ファイルを独自の構成に置き換える方法を学びます。

アプリを実行する

プロジェクトを Android Studio にインポートし、Firebase 構成 JSON ファイルを追加したので、アプリを初めて実行する準備が整いました。

Android エミュレータを起動します。
Android Studio で、「実行」 ( ) ツールバーにあります。

アプリは Android エミュレータで起動するはずです。この時点では、空のメッセージリストが表示され、メッセージの送受信は機能しません。このコードラボの次のステップでは、フレンドリーチャットを使用できるようにユーザーを認証します。

6. 認証を有効にする

このアプリは Firebase Realtime Database を使用してすべてのチャットメッセージを保存します。ただし、データを追加する前に、アプリが安全であり、認証されたユーザーのみがメッセージを投稿できることを確認する必要があります。このステップでは、Firebase Authentication を有効にし、Realtime Database セキュリティルールを構成します。

次に、基本的な Firebase Authentication コードをアプリに追加して、ユーザーを検出し、サインイン画面を実装します。

現在のユーザーを確認する

まず、次のインスタンス変数をMainActivity.ktクラスに追加します。

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

次に、ユーザーがアプリを開いて認証されていない場合は常にサインイン画面に送信するようにMainActivityを変更しましょう。 bindingビューにアタッチされた後、 onCreate()メソッドに以下を追加します。

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

また、 onStart()中にユーザーがサインインしているかどうかも確認したいと思います。

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

次に、 getUserPhotoUrl()メソッドとgetUserName()メソッドを実装して、現在認証されている Firebase ユーザーに関する適切な情報を返します。

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

次に、 signOut()メソッドを実装してサインアウトボタンを処理します。

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

これで、必要に応じてユーザーをサインイン画面に送信するためのロジックがすべて整いました。次に、ユーザーを適切に認証するためにサインイン画面を実装する必要があります。

ファイルSignInActivity.ktを開きます。ここでは、単純なサインインボタンを使用して認証を開始します。このセクションでは、FirebaseUI を使用してサインインのロジックを実装します。

SignInActivityクラスの// Firebase instance variablesコメントの下に Auth インスタンス変数を追加します。

サインインアクティビティ.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

次に、 onCreate()メソッドを編集して、 MainActivityの場合と同じ方法で Firebase を初期化します。

サインインアクティビティ.kt

// Initialize FirebaseAuth
auth = Firebase.auth

ActivityResultLauncherフィールドをSignInActivityに追加します。

サインインアクティビティ.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

次に、 onStart()メソッドを編集して FirebaseUI サインインフローを開始します。

サインインアクティビティ.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

次に、サインイン結果を処理するためにonSignInResultメソッドを実装します。サインインの結果が成功した場合は、 MainActivityに進みます。

サインインアクティビティ.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

それでおしまい！これで、サーバー側の構成を管理する必要がなく、わずか数回のメソッド呼び出しで FirebaseUI による認証が実装されました。

自分の作業をテストする

Android エミュレータでアプリを実行します。すぐにサインイン画面が表示されます。 「メールでサインイン」ボタンをタップし、アカウントを作成します。すべてが正しく実装されている場合は、メッセージ画面が表示されるはずです。

サインインした後、ブラウザで Firebase Emulator Suite UI を開き、 [認証]タブをクリックして、最初にサインインしたユーザーアカウントを表示します。

7. メッセージを読む

このステップでは、Realtime Database に保存されているメッセージを読み取って表示する機能を追加します。

サンプルメッセージをインポートする

Firebase Emulator Suite UI で、 [Realtime Database]タブを選択します。
codelab リポジトリのローカルコピーから、 initial_messages.jsonファイルをデータビューアにドラッグアンドドロップします。

これで、データベースのmessagesノードの下にいくつかのメッセージが表示されるはずです。

読み取りデータ

メッセージを同期する

このセクションでは、次の方法で新しく追加されたメッセージをアプリ UI に同期するコードを追加します。

Firebase Realtime Database を初期化し、データに加えられた変更を処理するリスナーを追加します。
新しいメッセージが表示されるようにRecyclerViewアダプターを更新します。
MainActivityクラスの他の Firebase インスタンス変数とともに Database インスタンス変数を追加します。

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

コメント// Initialize Realtime Database and FirebaseRecyclerAdapter下にある MainActivity のonCreate()メソッドを、以下に定義されているコードで変更します。このコードは、Realtime Database からすべての既存のメッセージを追加し、Firebase Realtime Database のmessagesパスの下にある新しい子エントリをリッスンします。各メッセージの UI に新しい要素が追加されます。

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

次に、 FriendlyMessageAdapter.ktクラスの内部クラスMessageViewHolder()内にbind()メソッドを実装します。

FriendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

また、画像であるメッセージを表示する必要があるため、内部クラスImageMessageViewHolder()内にbind()メソッドも実装します。

FriendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

最後に、 MainActivityに戻り、Firebase Realtime Database からの更新のリッスンを開始および停止します。以下に示すように、 MainActivityのonPause()メソッドとonResume()メソッドを更新します。

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

メッセージの同期をテストする

「実行」 ( ）。
Emulator Suite UI で、 [Realtime Database]タブに戻り、新しいメッセージを手動で追加します。 Android アプリにメッセージが表示されることを確認します。

おめでとうございます。アプリにリアルタイムデータベースが追加されました。

8. メッセージを送信する

テキストメッセージ送信を実装する

このセクションでは、アプリユーザーがテキストメッセージを送信する機能を追加します。以下のコードスニペットは、送信ボタンのクリックイベントをリッスンし、メッセージフィールドの内容を含む新しいFriendlyMessageオブジェクトを作成し、メッセージをデータベースにプッシュします。 push()メソッドは、プッシュされたオブジェクトのパスに自動生成された ID を追加します。これらの ID は連続しているため、新しいメッセージがリストの最後に確実に追加されます。

MainActivityクラスのonCreate()メソッドで、送信ボタンのクリックリスナーを更新します。このコードはすでにonCreate()メソッドの最後にあります。 onClick()本体を以下のコードと一致するように更新します。

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

画像メッセージ送信を実装する

このセクションでは、アプリユーザーが画像メッセージを送信できる機能を追加します。画像メッセージの作成は次の手順で行います。

画像を選択
画像選択をハンドルします
一時的なイメージメッセージをリアルタイムデータベースに書き込む
選択した画像のアップロードを開始します
アップロードが完了したら、画像メッセージの URL をアップロードされた画像の URL に更新します。

画像の選択

画像を追加するために、このコードラボでは Cloud Storage for Firebase を使用します。 Cloud Storage は、アプリのバイナリデータを保存するのに適した場所です。

画像の選択を処理し、一時メッセージを書き込みます

ユーザーが画像を選択すると、画像選択Intentが起動します。これは、 onCreate()メソッドの最後のコードにすでに実装されています。終了すると、 MainActivityのonImageSelected()メソッドが呼び出されます。以下のコードスニペットを使用して、画像がアップロードされていることを示す一時的な画像 URL を含むメッセージをデータベースに書き込みます。

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

画像をアップロードしてメッセージを更新する

putImageInStorage()メソッドをMainActivityに追加します。 onImageSelected()で呼び出され、選択した画像のアップロードが開始されます。アップロードが完了したら、適切な画像を使用するようにメッセージを更新します。

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

メッセージ送信のテスト

Android Studio で、実行ボタン。
Android エミュレータでメッセージを入力し、送信ボタンをタップします。新しいメッセージはアプリの UI と Firebase Emulator Suite の UI に表示されるはずです。
Android エミュレータで、「+」画像をタップしてデバイスから画像を選択します。新しいメッセージは、最初にプレースホルダー画像とともに表示され、画像のアップロードが完了すると、選択した画像とともに表示されます。新しいメッセージは、Emulator Suite UI にも表示されます。具体的には、[リアルタイムデータベース] タブではオブジェクトとして、[ストレージ] タブでは BLOB として表示されます。

9. おめでとうございます!

Firebase を使用してリアルタイムチャットアプリケーションを構築しました。

学んだこと

Firebase認証
Firebase リアルタイムデータベース
Firebase 用クラウドストレージ

次に、このコードラボで学んだことを使用して、Firebase を独自の Android アプリに追加してみます。 Firebase について詳しくは、 firebase.google.comにアクセスしてください。

実際のFirebase プロジェクトを設定し、（デモプロジェクトとエミュレートされたリソースのみではなく）実際のFirebase リソースを使用する方法を学びたい場合は、次のステップに進みます。

注: 実際の Firebase プロジェクトを設定した後でも、特に実際のアプリの構築を開始する場合は、開発とテストに Firebase Local Emulator Suite を使用することをお勧めします。

10. オプション: Firebase プロジェクトを作成して設定する

このステップでは、このコードラボで使用する実際の Firebase プロジェクトと Firebase Android アプリを作成します。また、アプリ固有の Firebase 構成をアプリに追加します。最後に、アプリで使用する実際の Firebase リソースを設定します。

Firebaseプロジェクトを作成する

ブラウザでFirebase コンソールに移動します。
[プロジェクトの追加]を選択します。
プロジェクト名を選択または入力します。任意の名前を使用できます。
このコードラボには Google アナリティクスが必要ないため、プロジェクトで Google アナリティクスを有効にするのは省略できます。
「プロジェクトの作成」をクリックします。プロジェクトの準備ができたら、 「続行」をクリックします。

Android プロジェクトに Firebase を追加する

この手順を開始する前に、アプリの SHA1 ハッシュを取得します。ローカルのbuild-android-startディレクトリから次のコマンドを実行して、デバッグキーの SHA1 を確認します。

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

上記のような出力が表示されるはずです。重要な行はSHA1ハッシュです。 SHA1 ハッシュが見つからない場合は、このページで詳細を参照してください。

Firebase コンソールに戻り、次の手順に従って Android プロジェクトを Firebase プロジェクトに登録します。

新しいプロジェクトの概要画面で、Android アイコンをクリックしてセットアップワークフローを起動します。
次の画面で、アプリのパッケージ名としてcom.google.firebase.codelab.friendlychatと入力します。
[アプリの登録]をクリックし、 [google-services.json のダウンロード]をクリックして Firebase 構成ファイルをダウンロードします。
google-services.jsonファイルを Android プロジェクトのappディレクトリにコピーします。
コンソールのセットアップワークフローに表示される次の手順はスキップします(これらの手順はbuild-android-startプロジェクトですでに行われています)。
プロジェクトを Gradle ファイルと同期して、すべての依存関係がアプリで利用できることを確認します。 Android Studio ツールバーから、 [ファイル] > [プロジェクトを Gradle ファイルと同期]を選択します。構成の変更を行うには、プロジェクトのビルド/クリーンおよびプロジェクトのビルド/再ビルドを実行する必要がある場合もあります。

Firebase認証を構成する

アプリがユーザーに代わって Firebase Authentication API にアクセスできるようにするには、アプリで使用する Firebase Authentication とサインインプロバイダーを有効にする必要があります。

Firebase コンソールで、左側のナビゲーションパネルから[認証]を選択します。
[サインイン方法]タブを選択します。
[電子メール/パスワード]をクリックし、スイッチを有効 (青色) に切り替えます。
Googleをクリックし、スイッチを有効 (青) に切り替えて、プロジェクトサポートの電子メールを設定します。

このコードラボの後半で「CONFIGURATION_NOT_FOUND」というメッセージを含むエラーが発生した場合は、このステップに戻って作業内容を再確認してください。

リアルタイムデータベースの構成

このコードラボのアプリは、チャットメッセージを Firebase Realtime Database に保存します。このセクションでは、データベースを作成し、Firebase Security Rules と呼ばれる JSON 構成言語を使用してそのセキュリティを構成します。

Firebase コンソールで、左側のナビゲーションパネルから[Realtime Database]を選択します。
「データベースの作成」をクリックして、新しい Realtime Database インスタンスを作成します。プロンプトが表示されたら、 us-central1リージョンを選択し、 「次へ」をクリックします。
セキュリティルールについてのプロンプトが表示されたら、 [ロックモード]を選択し、 [有効にする]をクリックします。
データベースインスタンスが作成されたら、 [ルール]タブを選択し、次のようにルール構成を更新します:
```
 {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }
```

セキュリティルールの仕組み (「auth」変数に関するドキュメントを含む) の詳細については、 Realtime Database のセキュリティドキュメントを参照してください。

Firebase 用のクラウドストレージを構成する

Firebase コンソールで、左側のナビゲーションパネルから[ストレージ]を選択します。
「開始」をクリックして、プロジェクトの Cloud Storage を有効にします。
ダイアログの手順に従って、推奨されるデフォルトを使用してバケットを設定します。

Firebase リソースに接続する

このコードラボの前のステップで、次のコードをMainActivity.ktに追加しました。この条件付きブロックは、Android プロジェクトを Firebase Emulator Suite に接続しました。

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

アプリを新しい実際のFirebase プロジェクトとその実際のFirebase リソースに接続する場合は、このブロックを削除するか、アプリをリリースモードで実行してBuildConfig.DEBUGがfalseになるようにします。

Firebase Android Codelab - フレンドリーなチャットを構築する

1。概要

学べること

必要なもの

2. サンプルコードを入手する

リポジトリのクローンを作成する

Android Studioにインポートする

依存関係を確認する

3. Firebase CLIをインストールする

Firebase CLIをインストールする

ログイン

4. Firebase エミュレータ スイートに接続する

エミュレータを起動する

アプリを接続する

5.スターターアプリを実行します

google-services.jsonを追加

アプリを実行する

6. 認証を有効にする

基本的なサインイン機能を追加する

現在のユーザーを確認する

サインイン画面を実装する

自分の作業をテストする

7. メッセージを読む

サンプルメッセージをインポートする

読み取りデータ

メッセージを同期する

MainActivity.kt

メッセージの同期をテストする

8. メッセージを送信する

テキストメッセージ送信を実装する

画像メッセージ送信を実装する

画像の選択

画像の選択を処理し、一時メッセージを書き込みます

画像をアップロードしてメッセージを更新する

MainActivity.kt

メッセージ送信のテスト

9. おめでとうございます!

学んだこと

10. オプション: Firebase プロジェクトを作成して設定する

Firebaseプロジェクトを作成する

Android プロジェクトに Firebase を追加する

Firebase認証を構成する

リアルタイムデータベースの構成

Firebase 用のクラウド ストレージを構成する

Firebase リソースに接続する

4. Firebase エミュレータスイートに接続する

Firebase 用のクラウドストレージを構成する