Jetpack compose e integración de Firebase | Autor: Abhishek Vichare | Octubre de 2021
Aquí, aprenderemos cómo conectar su aplicación de Android Jetpack Compose a Firebase.
El primer paso es crear una nueva aplicación de Android en Android Studio y seleccionar la opción Actividad de composición vacía aquí
A continuación, especifique un nombre adecuado para su aplicación. Estoy usando»Demostración basada en JetpackFire«Para mi proyecto. Seleccione Finalizar para crear un nuevo proyecto.
El siguiente paso es crear un nuevo proyecto de Firebase o usar un proyecto existente.Estoy creando un nuevo proyecto de Firebase llamado «Jetpack Firebase Demo»
Hay diferentesr¿Cómo puedes conectar tu proyecto de Android a Firebase? Le mostraré cómo conectarse a Android Studio.
Después de cargar correctamente el proyecto, puede seleccionar la opción «Firebase» del menú «Herramientas» de Android Studio, como se muestra a continuación.
Elija esta opción. Abrirá Firebase Assistant en el panel derecho como este
Elija cualquier servicio que desee utilizar. Yo elijo»Autenticación «->» Utilice el inicio de sesión de Google para la autenticación [Kotlin]«Para fines de demostración. Kotlin se debe a que obtendrá los beneficios de la extensión Kotlin proporcionada por la biblioteca.
Ahora, el Asistente de Google le pedirá que se conecte a Firebase. Haga clic en «Conectarse a Firebase«Botón para continuar. Se abrirá su navegador y le pedirá que inicie sesión con su cuenta de Google (si aún no lo ha hecho) y le pedirá que seleccione o cree un nuevo proyecto de base de fuego. Estoy seleccionando mi proyecto de base de fuego recién creado y está»Demostración de Jetpack Firebase«. Cuando se complete el proceso, cierre el navegador y el IDE mostrará un mensaje de éxito.
Siguiente clic «Agrega el SDK de Firebase a tu aplicación«Botón. Esto agregará dependencias de Gradle a su proyecto.
Ahora necesitamos obtener SHA-1 para su certificado de firma.Para depurar compilaciones, puede ejecutar los siguientes comandos en la terminal de Android Studio
./ informe de firma de Gradlew
Esto proporcionará SHA-1 para su certificado de puesta en servicio.
Copie este SHA-1 y vaya a la configuración del proyecto del proyecto de Firebase en su navegador. Seleccione su aplicación de Android en la sección «Aplicaciones» de la pestaña «General» y agregue allí el SHA copiado.
escoger»GoogleProveedor de inicio de sesión en la sección de función de autenticación del proyecto
Después de terminar aquí, descargue google-services.json Configure la página del proyecto que se mostró anteriormente y reemplácela con la página existente en la estructura del proyecto.Ahora su aplicación de Android está lista para usar los servicios de Firebase
Para administrar diferentes estados de inicio de sesión, creemos Enum y las clases de datos correspondientes para que la aplicación Jetpack Compose administre estados
data class LoadingState private constructor(val status: Status, val msg: String? = null)
companion object
val LOADED = LoadingState(Status.SUCCESS)
val IDLE = LoadingState(Status.IDLE)
val LOADING = LoadingState(Status.RUNNING)
val LOGGED_IN = LoadingState(Status.LOGGED_IN)
fun error(msg: String?) = LoadingState(Status.FAILED, msg)
enum class Status
RUNNING,
SUCCESS,
FAILED,
IDLE,
LOGGED_IN
También crearemos un ViewModel para administrar el flujo de estado de regreso a las vistas componibles durante la autenticación de Firebase.
Definamos una constante para el estado y escribamos una función para la autenticación de base de fuego.
val loadingState = MutableStateFlow(LoadingState.IDLE)
private val auth = Firebase.authfun signWithCredential(credential: AuthCredential) = viewModelScope.launch
try
loadingState.emit(LoadingState.LOADING)
Firebase.auth.signInWithCredential(credential)
loadingState.emit(LoadingState.LOADED)
catch (e: Exception)
loadingState.emit(LoadingState.error(e.localizedMessage))
Declararemos este ViewModel en MainActivity.kt y crearemos un nuevo Composable para mostrar el botón de inicio de sesión de Google y el estado de carga.
Column(
modifier = Modifier
.fillMaxSize()
.padding(24.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
content =
OutlinedButton(border = ButtonDefaults.outlinedBorder.copy(width = 1.dp),
modifier = Modifier
.fillMaxWidth()
.height(50.dp), onClick =
// On click event.
,
content =
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = if(state == LOADING) Arrangement.Center else Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
content =
if(state == LOADING)
CircularProgressIndicator()
else
Icon(
tint = Color.Unspecified,
painter = painterResource(id = R.drawable.googleg_standard_color_18),
contentDescription = null,
)
Text(
style = MaterialTheme.typography.button,
color = MaterialTheme.colors.onSurface,
text = "Sign in with Google"
)
Icon(
tint = Color.Transparent,
imageVector = Icons.Default.MailOutline,
contentDescription = null,
)
)
)when (state.status)
SUCCESS ->
Text(text = "Success")
FAILED ->
Text(text = state.msg ?: "Error")
LOGGED_IN ->
Text(text = "Already Logged In")
else ->
)
Este es un diseño de columna básico con un botón de esquema, si el estado se está cargando, le agregaremos un indicador de progreso; de lo contrario, mostraremos el ícono de Google y el texto del botón.Además, agregamos texto debajo del botón para mostrar el mensaje de error o éxito de autenticación de Firebase.
Ahora nuestra parte de la interfaz de usuario está completa. Necesitamos proporcionar un oyente onClick aquí, que puede iniciar el proceso de autenticación de Google. Antes de eso, debemos agregar las siguientes devoluciones de llamada de resultados de eventos para el inicio de sesión de Google. Aquí, obtendremos las credenciales de autenticación de Google como los datos de resultado devueltos del flujo de inicio de sesión de Google, que pasamos a nuestro modelo de vista y llamamos autenticación de Firebase.
val launcher =
rememberLauncherForActivityResult(contract = ActivityResultContracts.StartActivityForResult())
val task = GoogleSignIn.getSignedInAccountFromIntent(it.data)
try
val account = task.getResult(ApiException::class.java)!!
val credential = GoogleAuthProvider.getCredential(account.idToken!!, null)
loginViewModel.signWithCredential(credential)
catch (e: ApiException)
Log.e("TAG", "Google sign in failed", e)
Esto debería estar antes de los componentes de la interfaz de usuario componible.Ahora agreguemos código para el oyente onClick
val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
.requestIdToken(token)
.requestEmail()
.build()val googleSignInClient = GoogleSignIn.getClient(context, gso)
launcher.launch(googleSignInClient.signInIntent)
Este es un proceso de inicio de sesión típico de Google, en el que solicita un token de identificación como datos de resultado, que se utilizarán en el lanzacohetes (Devolución de llamada OnActivityResult)
¡Eso es todo! Ahora nuestra aplicación está lista para ejecutarse.Aquí hay algunas capturas de pantalla del aspecto de la aplicación.
