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

1。概要

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

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

学習内容

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

必要なもの

• Android Studioバージョン 4.2 以降。
• 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 でFile > Openを選択し、 build-android-startディレクトリ ( ) サンプル コードをダウンロードしたディレクトリから。

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

依存関係を確認する

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

build.gradle

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

app/build.gradle

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.2.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:30.3.2')
    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.1'
    implementation 'com.firebaseui:firebase-ui-database:8.0.1'
}

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

この Codelab では、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 Emulator Suite に接続する

エミュレーターを起動する

ターミナルで、ローカルの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 を表示します。

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ファイルを追加する必要があります。この Codelab のために、Firebase Emulator Suite に接続できるようにするモック JSON ファイルを用意しました。

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

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

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

アプリを実行する

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

1. Android エミュレーターを起動します。
2. Android Studio で、[実行] ( ) ツールバーで。

Android Emulator でアプリが起動するはずです。この時点で、空のメッセージ リストが表示され、メッセージの送受信は機能しません。この Codelab の次のステップでは、Friendly Chat を使用できるようにユーザーを認証します。

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 を使用してサインインのロジックを実装します。

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

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

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

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

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

SignInActivity.kt

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

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

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

SignInActivity.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に進みます。

SignInActivity.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 に保存されたメッセージを読み取って表示する機能を追加します。

サンプル メッセージのインポート

1. Firebase Emulator Suite UI で、 [Realtime Database]タブを選択します。
2. 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()
}

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

1. [実行] ( ）。
2. 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("")
}

画像メッセージ送信の実装

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

• 画像を選択
• 画像選択の処理
• Realtime Database に一時的な画像メッセージを書き込む
• 選択した画像のアップロードを開始します
• アップロードが完了したら、画像メッセージの URL をアップロードされた画像の URL に更新します

画像を選択

画像を追加するために、この Codelab では 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
            )
        }
}

メッセージ送信のテスト

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

9.おめでとう！

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

学んだこと

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

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

実際のFirebase プロジェクトをセットアップし、(デモ プロジェクトやエミュレートされたリソースのみではなく)実際のFirebase リソースを使用する方法を学びたい場合は、次のステップに進んでください。

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

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

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

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

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

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

この手順を開始する前に、アプリの 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 プロジェクトに登録します。

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

Firebase 認証を構成する

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

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

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

Realtime Database の構成

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

1. Firebase コンソールで、左側のナビゲーション パネルから[Realtime Database]を選択します。
2. [データベースの作成]をクリックして、新しい Realtime Database インスタンスを作成します。プロンプトが表示されたら、 us-central1リージョンを選択し、 [次へ]をクリックします。
3. セキュリティ ルールに関するプロンプトが表示されたら、 [ロック モード]を選択し、 [有効にする]をクリックします。
4. データベース インスタンスが作成されたら、 [ルール]タブを選択し、ルール構成を次のように更新します。

    {
      "rules": {
        "messages": {
          ".read": "auth.uid != null",
          ".write": "auth.uid != null"
        }
      }
    }
   

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

Firebase 用に Cloud Storage を構成する

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

Firebase リソースに接続する

この Codelab の前のステップで、以下を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になるようにリリース モードでアプリを実行できます。

1。概要

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

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

学習内容

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

必要なもの

• Android Studioバージョン 4.2 以降。
• 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 でFile > Openを選択し、 build-android-startディレクトリ ( ) サンプル コードをダウンロードしたディレクトリから。

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

依存関係を確認する

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

build.gradle

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

app/build.gradle

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.2.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:30.3.2')
    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.1'
    implementation 'com.firebaseui:firebase-ui-database:8.0.1'
}

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

この Codelab では、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 Emulator Suite に接続する

エミュレーターを起動する

ターミナルで、ローカルの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 を表示します。

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ファイルを追加する必要があります。この Codelab のために、Firebase Emulator Suite に接続できるようにするモック JSON ファイルを用意しました。

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

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

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

アプリを実行する

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

1. Android エミュレーターを起動します。
2. Android Studio で、[実行] ( ) ツールバーで。

Android Emulator でアプリが起動するはずです。この時点で、空のメッセージ リストが表示され、メッセージの送受信は機能しません。この Codelab の次のステップでは、Friendly Chat を使用できるようにユーザーを認証します。

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 を使用してサインインのロジックを実装します。

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

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

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

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

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

SignInActivity.kt

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

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

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

SignInActivity.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に進みます。

SignInActivity.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 に保存されたメッセージを読み取って表示する機能を追加します。

サンプル メッセージのインポート

1. Firebase Emulator Suite UI で、 [Realtime Database]タブを選択します。
2. 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()
}

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

1. [実行] ( ）。
2. 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("")
}

画像メッセージ送信の実装

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

• 画像を選択
• 画像選択の処理
• Realtime Database に一時的な画像メッセージを書き込む
• 選択した画像のアップロードを開始します
• アップロードが完了したら、画像メッセージの URL をアップロードされた画像の URL に更新します

画像を選択

画像を追加するために、この Codelab では 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
            )
        }
}

メッセージ送信のテスト

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

9.おめでとう！

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

学んだこと

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

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

実際のFirebase プロジェクトをセットアップし、(デモ プロジェクトやエミュレートされたリソースのみではなく)実際のFirebase リソースを使用する方法を学びたい場合は、次のステップに進んでください。

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

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

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

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

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

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

この手順を開始する前に、アプリの 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 プロジェクトに登録します。

1. From the overview screen of your new project, click the Android icon to launch the setup workflow:
2. On the next screen, enter com.google.firebase.codelab.friendlychat as the package name for your app.
3. Click Register App , then click Download google-services.json to download your Firebase configuration file.
4. Copy the google-services.json file into the app directory of your Android project.
5. Skip the next steps shown in the console's setup workflow (they've already been done for you in the build-android-start project).
6. Make sure that all dependencies are available to your app by syncing your project with Gradle files. From the Android Studio toolbar, select File > Sync Project with Gradle Files . You may also need to run Build/Clean Project and Build/Rebuild Project for the config changes to take place.

Configure Firebase Authentication

Before your app can access the Firebase Authentication APIs on behalf of your users, you need to enable Firebase Authentication and the sign-in providers you want to use in your app.

1. In the Firebase console , select Authentication from the left-side navigation panel.
2. Select the Sign-in method tab.
3. Click Email/Password , then toggle the switch to enabled (blue).
4. Click Google , then toggle the switch to enabled (blue) and set a project support email.

If you get errors later in this codelab with the message "CONFIGURATION_NOT_FOUND", come back to this step and double check your work.

Configure Realtime Database

The app in this codelab stores chat messages in Firebase Realtime Database. In this section, we'll create a database and configure its security via a JSON configuration language called Firebase Security Rules.

1. In the Firebase console , select Realtime Database from the left-side navigation panel.
2. Click Create Database to create a new Realtime Database instance. When prompted, select the us-central1 region, then click Next .
3. When prompted about security rules, choose locked mode , then click Enable .
4. Once the database instance has been created, select the Rules tab, then update the rules configuration with the following:

    {
      "rules": {
        "messages": {
          ".read": "auth.uid != null",
          ".write": "auth.uid != null"
        }
      }
    }
   

For more information on how Security Rules work (including documentation on the "auth" variable), see the Realtime Database security documentation .

Configure Cloud Storage for Firebase

1. In the Firebase console , select Storage from the left-side navigation panel.
2. Click Get Started to enable Cloud Storage for your project.
3. Follow the steps in the dialog to set up your bucket, using the suggested defaults.

Connect to Firebase resources

In an earlier step of this codelab, you added the following to MainActivity.kt . This conditional block connected your Android project to the 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)
}

If you want to connect your app to your new real Firebase project and its real Firebase resources, you can either remove this block or run your app in release mode so that BuildConfig.DEBUG is false .