Esta página se ha traducido con Cloud Translation API.

Firebase Android Codelab: crea un chat amigable

1. Información general

captura de pantalla

Imagen: Aplicación Work Friendly Chat.

Bienvenido al codelab de Friendly Chat. En este codelab, aprenderá cómo usar la plataforma Firebase para crear una aplicación de chat en Android.

lo que aprenderás

Cómo utilizar Firebase Authentication para permitir que los usuarios inicien sesión.
Cómo sincronizar datos usando Firebase Realtime Database.
Cómo almacenar archivos binarios en Cloud Storage para Firebase.
Cómo utilizar Firebase Local Emulator Suite para desarrollar una aplicación de Android con Firebase.

Lo que necesitarás

Última versión de Android Studio .
Un emulador de Android con Android 5.0+.
Node.js versión 10 o superior (para usar Emulator Suite).
Java 8 o superior. Para instalar Java utilice estas instrucciones ; para verificar su versión, ejecute java -version .
Familiaridad con el lenguaje de programación Kotlin.

2. Obtenga el código de muestra

Clonar el repositorio

Clona el repositorio de GitHub desde la línea de comando:

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

Importar a Android Studio

En Android Studio, seleccione Archivo > Abrir y luego seleccione el directorio build-android-start ( carpeta_android_studio ) del directorio donde descargó el código de muestra.

Ahora debería tener abierto el proyecto build-android-start en Android Studio. Si ve una advertencia sobre la falta de un archivo google-services.json , no se preocupe. Se agregará en un paso posterior.

Comprobar dependencias

En este codelab ya se han agregado todas las dependencias que necesitará, pero es importante comprender cómo agregar el SDK de Firebase a su aplicación:

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
}

aplicación/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. Instale Firebase CLI

En este codelab, utilizará Firebase Emulator Suite para emular localmente Firebase Auth, Realtime Database y Cloud Storage. Esto proporciona un entorno de desarrollo local seguro, rápido y sin costo para crear su aplicación.

Instale la CLI de Firebase

Primero deberá instalar Firebase CLI . Si está utilizando macOS o Linux, puede ejecutar el siguiente comando cURL:

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

Si está utilizando Windows, lea las instrucciones de instalación para obtener un binario independiente o instalarlo mediante npm .

Una vez que hayas instalado la CLI, ejecutar firebase --version debería informar una versión de 9.0.0 o superior:

$ firebase --version
9.0.0

Acceso

Ejecute firebase login para conectar la CLI a su cuenta de Google. Esto abrirá una nueva ventana del navegador para completar el proceso de inicio de sesión. Asegúrese de elegir la misma cuenta que utilizó anteriormente al crear su proyecto de Firebase.

4. Conéctese a Firebase Emulator Suite

Iniciar los emuladores

En su terminal, ejecute el siguiente comando desde la raíz de su directorio local codelab-friendlychat-android :

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

Deberías ver algunos registros como este. Los valores del puerto se definieron en el archivo firebase.json , que se incluyó en el código de muestra clonado.

$ 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.

Navegue a http://localhost:4000 en su navegador web para ver la interfaz de usuario de Firebase Emulator Suite:

Inicio de la interfaz de usuario de Emulator Suite

Deje el emulators:start ejecutándose durante el resto del codelab.

Conecta tu aplicación

En Android Studio, abra MainActivity.kt y luego agregue el siguiente código dentro del método 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. Ejecute la aplicación de inicio

Agregar google-services.json

Para que su aplicación de Android se conecte a Firebase, debe agregar un archivo google-services.json dentro de la carpeta de la app de su proyecto de Android. Para los fines de este codelab, proporcionamos un archivo JSON simulado que le permitirá conectarse a Firebase Emulator Suite.

Copie el archivo mock-google-services.json en la carpeta build-android-start/app como google-services.json :

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

En el paso final de este codelab, aprenderá cómo crear un proyecto Firebase real y una aplicación Firebase para Android para que pueda reemplazar este archivo JSON simulado con su propia configuración.

Ejecute la aplicación

Ahora que importó el proyecto a Android Studio y agregó un archivo JSON de configuración de Firebase, está listo para ejecutar la aplicación por primera vez.

Inicie su emulador de Android.
En Android Studio, haga clic en Ejecutar ( ) en la barra de herramientas.

La aplicación debería iniciarse en su emulador de Android. En este punto, debería ver una lista de mensajes vacía y enviar y recibir mensajes no funcionará. En el siguiente paso de este codelab, autenticará a los usuarios para que puedan usar Friendly Chat.

6. Habilite la autenticación

Esta aplicación utilizará Firebase Realtime Database para almacenar todos los mensajes de chat. Sin embargo, antes de agregar datos, debemos asegurarnos de que la aplicación sea segura y que solo los usuarios autenticados puedan publicar mensajes. En este paso, habilitaremos la autenticación de Firebase y configuraremos las reglas de seguridad de la base de datos en tiempo real.

A continuación, agregaremos un código de autenticación de Firebase básico a la aplicación para detectar usuarios e implementar una pantalla de inicio de sesión.

Verificar usuario actual

Primero agregue la siguiente variable de instancia a la clase MainActivity.kt :

Actividad principal.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Ahora modifiquemos MainActivity para enviar al usuario a la pantalla de inicio de sesión cada vez que abra la aplicación y no esté autenticado. Agregue lo siguiente al método onCreate() después de adjuntar el binding a la vista:

Actividad principal.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
}

También queremos verificar si el usuario inició sesión durante onStart() :

Actividad principal.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
    }
}

Luego implemente los métodos getUserPhotoUrl() y getUserName() para devolver la información adecuada sobre el usuario de Firebase actualmente autenticado:

Actividad principal.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
}

Luego implemente el método signOut() para manejar el botón de cerrar sesión:

Actividad principal.kt

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

Ahora tenemos toda la lógica para enviar al usuario a la pantalla de inicio de sesión cuando sea necesario. A continuación, debemos implementar la pantalla de inicio de sesión para autenticar correctamente a los usuarios.

Abra el archivo SignInActivity.kt . Aquí se utiliza un simple botón de inicio de sesión para iniciar la autenticación. En esta sección, utilizará FirebaseUI para implementar la lógica de inicio de sesión.

Agregue una variable de instancia de Auth en la clase SignInActivity bajo el comentario // Firebase instance variables :