Semana7 Quimica

UNIVERSIDAD DON BOSCO
CICLO
FACULTAD DE INGENIERÍA
01-2023
ESCUELA DE COMPUTACIÓN
MATERIA DESARROLLO DE SOFTWARE PARA MÓVILES GUIA DE
PRÁCTICA LOGIN FIREBASE LABORATORIO N° 7
I. OBJETIVOS
Que al finalizar la practica el estudiante aprenda a:

● Adquiera conocimientos sobre la tecnología Firebase.
● Conocer los beneficios de usar Firebase en Android.
● Implementación de login con Firebase Authentication
● Obtener información del usuario directamente desde Firebase
II. INTRODUCCIÓN TEORICA
¿Qué es Firebase?
En 2011 nace como una API para la creación de chats de páginas web con el nombre de Envolve, se tuvo tanto
éxito que para 2012 se decide separar el sistema de chat y arquitectura en tiempo real. Esta última es la que
adquiere el nombre de Firebase.
Para el 2014, Google absorbe a Firebase y a partir de ese momento se revoluciona con otras herramientas
tecnológicas, las cuales facilitan el desarrollo rápido de aplicaciones.
Firebase dispone de diferentes funcionalidades, que se pueden dividir básicamente en 3 grupos: Desarrollo
(Develop), Crecimiento (Grow) y Monetización (Earn), a los que hay que sumar la Analítica (Analytics).
A continuación, se muestran los productos de Firebase que se pueden usar en cualquier aplicación:
• Cloud Firestore: es una base de datos NoSQL que se usa para almacenar, sincronizar y consultar
fácilmente datos para aplicaciones.
• ML Kit: brinda el poder del aprendizaje automático a sus aplicaciones.
• Authentication: se utiliza para autenticar a los usuarios de sus aplicaciones.
• Realtime Database: se utiliza para almacenar y recuperar datos en tiempo real.
• Crashlytics: le proporciona los informes de fallos de su aplicación.
• Test Labs: probará sus aplicaciones en los dispositivos alojados por Google.
• Performance Monitoring: supervisa el rendimiento de su aplicación en cada segundo.
• In-App Messaging: le ayuda a enviar mensajes dentro de la aplicación que ayudan a sus usuarios a
interactuar con usted.
• Google Analytics: generará un informe de su aplicación. Por ejemplo, un informe de usuarios aumentó
en el último mes o usuarios activos, etc.
Página 1 de 26
CICLO
01-2023
• Remote Config: le ayuda a cambiar o agregar alguna función en su aplicación incluso sin poner ninguna
actualización.
Además de los productos de Firebase mencionados anteriormente, algunos de los otros productos de Firebase
son Cloud Functions, Hosting, Cloud Storage, App Distribution , Predictions , A/B Testing , Cloud Messaging y
Dynamic Links .
Inicio de sesión y autenticación en Firebase

La autenticación de Firebase se utiliza para autenticar a los usuarios de aplicaciones de una manera muy sencilla.
No solo para los usuarios, sino también para los desarrolladores, proporciona un flujo muy fácil para el proceso
de autenticación e inicio de sesión que está presente en casi todas las aplicaciones.
Firebase admite la autenticación mediante correo electrónico y contraseña, números de teléfono o incluso puede
usar Facebook, Google, Twitter, Github, etc.
Para autenticar a sus usuarios, todo lo que necesita hacer es obtener las credenciales de autenticación del
usuario y luego pasar esta credencial al SDK de autenticación de Firebase. Estas credenciales pueden ser una
contraseña de correo electrónico o un número de teléfono móvil o cualquier token de proveedores de identidad
como Facebook, Google, Twitter, Github, etc. Después de pasar las credenciales, Firebase verificará las
credenciales y, a cambio, recibirá una respuesta que le indicará si la autenticación es exitosa o no. De forma
predeterminada, los usuarios autenticados pueden leer / escribir los datos de la base de datos en tiempo real o
del almacenamiento en la nube.
Inicio de sesión y registro por correo electrónico

Aprenderemos cómo iniciar sesión y registrarse usando correo electrónico y contraseña con la ayuda de Firebase.
En este ejemplo, tendremos cuatro actividades, es decir, una para iniciar sesión, una para registrarse, una para
restablecer la contraseña y una será nuestra actividad principal. La siguiente imagen describirá el flujo de
actividades:
Página 2 de 26
CICLO
01-2023
III. DESARROLLO DE LA PRÁCTICA
Parte 1: Creación de un proyecto en Firebase

Requisito previo: Para la creación de nuestro proyecto en Firebase es necesario poseer una cuenta con Google,
en caso de no tener cuenta, debes proceder a crear una.
A continuación, realice los siguientes pasos:
1. Ingrese a la siguiente dirección web: https://firebase.google.com/
2. Seleccione la opción “Ir a la consola”
3. Se le solicitará la autenticación de su cuenta de Google. Omita este paso si ya se encuentra autenticado.
4. Seleccione el botón “Crear proyecto”
Página 3 de 26
CICLO
01-2023
5. Ingresamos el nombre de nuestro proyecto: “Kotlin Fireabas”. Seleccionamos el botón “Continuar”.
6. Luego se nos solicitara la habilitación de Google Analytics para el proyecto. Dejaremos deshabilitada esta
opción. Y por último seleccionamos el botón “Crear proyecto”.
.
7. Se iniciará a construir el proyecto. Se nos mostrara confirmación que se ha creado exitosamente el
proyecto. Presionamos el botón “Continuar”.
Página 4 de 26
CICLO
01-2023
8. Ya podemos tener acceso a nuestro panel de opciones referente al proyecto que se ha creado. Así como
se muestra en la siguiente imagen.
Parte 2: Habilitando servicio de autenticación en Firebase (Correo electrónico / contraseña)

En esta sección habilitaremos el servicio de autenticación que provee Firebase, para luego utilizarlo desde
nuestra aplicación. Cabe mencionar que podemos configurar de manera manual o por medio del asistente de
Android Studio la conectividad del servicio de autenticación.
Realicemos los siguientes pasos:
1. En el panel de opciones de nuestro proyecto “Kotlin Firebase”, seleccionaremos la opción “Compilación“,
luego “Authentication”.
2. Proceda a seleccionar el botón “Comenzar”
3. En la siguiente pantalla deberás elegir la opción “Sign-in-method”. Se te mostrara los diferentes métodos
de autenticación que se pueden implementar utilizando Firebase.
Página 5 de 26
CICLO
01-2023
4. Trabajaremos con la opción “Proveedores nativos” -> Correo electrónico / contraseña. Seleccionando
esta opción, observaras que se te muestra un slider para habilitar dicho servicio. Posteriormente guarda
los cambios.
5. De ahora en adelante se te mostrar en la pantalla principal de “Authentication”, la lista de los servicios

que han sido habilitados.
6. Con esto estaríamos listos para comenzar a trabajar la autenticación con Firebase.
Página 6 de 26
CICLO
01-2023
Parte 3: Conectando Firebase con el asistente de Android Studio

Utilizaremos las herramientas que Android Studio tiene por defecto para trabajar con Firebase. Para ello realice
los siguientes pasos:
1. Cree un nuevo proyecto de Android Studio, seleccione una “Empty Activity” y presione el botón “Next”.
2. Configure el proyecto según los parámetros mostrados en la siguiente imagen. Seleccione el directorio
donde almacenara su proyecto, luego presione el botón “Finish” y espere que se cargue la estructura de
directorios del proyecto.
Página 7 de 26
CICLO
01-2023
3. Una vez cargado el proyecto, nos dirigiremos a la opción “Tools”, posteriormente seleccionamos
“Firebase” para que se muestre el asistente.
4. Podrá observar que le aparecerá una barra lateral derecha. Aquí deberemos desplegar la opción de
“Authentication” y seleccionar Authentication using Google
5. Ahora seleccione la opción “Connect to Firebase”
Página 8 de 26
CICLO
01-2023
6. Se nos abrirá el navegador web predeterminado de nuestro Sistema Operativo, aquí nos solicitará
autenticarnos en la consola de Firebase (https://console.firebase.google.com/) o en su defecto si ya está
autenticado, deberá de seleccionar el proyecto que se creó recientemente (Kotlin Firebase). Observará
que Android Studio estará esperando confirmación del proyecto.
7. Luego que seleccione el proyecto, se le mostrara una nueva pantalla indicando la conectividad del
proyecto Firebase con su proyecto de Android Studio. Presione el botón “Conectar”. Espere un momento
mientras se realiza la conexión, posteriormente se le mostrara el mensaje de confirmación, para finalizar
puede cerrar la ventana de navegación.
Página 9 de 26
CICLO
01-2023
8. Regrese a Android Studio y verifique que se muestre el mensaje de confirmación que su aplicación ha
sido conectada con el proyecto de Firebase.
9. Diríjase a su navegador web de preferencia e ingrese a la consola de Firebase

(https://console.firebase.google.com/). Seleccione el proyecto “Kotlin Firebase” y en el panel izquierdo
de opciones presione el engrane, luego escoja la opción “Configuración del proyecto”
Página 10 de 26
CICLO
01-2023
10. Selección la pestaña “General” y diríjase a la parte final de la pantalla, visualizara la sección “Tus apps”.
Aquí podrá encontrar que existe una aplicación conectada, esta corresponde a la aplicación que hemos
creado en Android Studio. En caso que no aparezca la información de la aplicación deberá de refrescar
la pantalla (presione F5).
11. Ahora vamos a comprobar que el “google-service.json” ha sido creado en nuestro proyecto de Android
Studio. Para ello nos debemos de dirigir a la vista “Proyect” de nuestra aplicación.
12. Expanda la carpeta “app” y encontrara el archivo “google-service.json”. En caso que no se muestre el
archivo, deberá de posicionarse en la carpeta principal “Firebase”, dará clic derecho de su mouse y
seleccionara la opción “Reload from Disk”.
Página 11 de 26
CICLO
01-2023
13. Abra el archivo “google-service.json”, debería de poseer una estructura como la que se muestra en la
siguiente imagen. En color rojo se encuentra el ID de la App, compárelo con el ID mostrado en la sección
“Tus apps”, debería de ser el mismo.
Página 12 de 26
CICLO
01-2023
14. Ahora debemos de agregar las dependencias de Firebase a nuestro proyecto de Android Studio. Para ello
seleccionamos el botón “Add the FIrebase Authentication SDK to your app”. Nótese que ya aparece
conectada nuestra aplicación.
15. Se nos mostrara una ventana con el detalle de las dependencias que se agregaran a nuestra aplicación,
presionamos el botón “Accept Changes”
16. Esperamos que Gradle compile el proyecto con las nuevas dependencias. Una vez finalizado dicho
proceso nos dirigimos a la carpeta “Android”. Luego el directorio “Gradle Scripts” -> “build.gradle
(Module :app)”
Página 13 de 26
CICLO
01-2023
17. Abre el archivo “build.gradle (Module :app)” y observa en la sección de las dependencias que se ha
implementado la librería de Firebase.
Parte 4: Creando diseño de Registro

En esta sección crearemos el diseño y funcionamiento para el registro de un nuevo usuario. Para ello debes
realizar los siguientes pasos:
1. Cree una nueva “Empty Activity” con el nombre RegisterActivity y seleccione la opción “Launcher
Activity”. Seguidamente presiona el botón “Finish”
2. Abra el archivo activity_register.xml y en medio de las etiquetas

proceda a implementar el siguiente código:
Página 14 de 26
CICLO
01-2023
Página 15 de 26
CICLO
01-2023
3. Localice el archivo RegisterActivity.kt y desarrolle el siguiente código fuente:

a. Creamos un objeto FirebaseAuth y luego lo inicializamos en la función onCreate()
b. Crearemos un método llamado “register”, en el cual utilizaremos la función

createUserWithEmailAndPassword del objeto FirebaseAuth, esta función recibe un correo
electrónico y una contraseña como parámetro. Agregamos un detector de devolución de
llamada que devuelve un objeto de tarea. Si la solicitud es exitosa, redireccionamos a
MainActivity utilizando Intent.
Página 16 de 26
CICLO
01-2023
c. Si el usuario ya tiene una cuenta, la redirigimos a la pantalla de inicio de sesión con la función
goToLogin. En este caso se generará un error para el LoginActivity, ya que aun no ha sido creado.
4. Vinculemos el funcionamiento de las dos funciones anteriores. Para ello deberemos regresar al método
onCreate y agregar las siguientes líneas de código.
Parte 5: Creando diseño de Login

En esta sección crearemos el diseño y funcionamiento del Login. Para ello debes realizar los siguientes pasos:
1. Cree una nueva “Empty Activity” con el nombre LoginActivity. Seguidamente presiona el botón
“Finish”.
Página 17 de 26
CICLO
01-2023
2. Abra el archivo activity_login.xml y en medio de las etiquetas

proceda a implementar el siguiente código:
Página 18 de 26
CICLO
01-2023
5. Localice el archivo LoginActivity.kt y desarrolle el siguiente código fuente:

a. Creamos un objeto FirebaseAuth y luego lo inicializamos en la función onCreate()
b. Crearemos un método llamado “login”, en el cual utilizaremos la función

signInWithEmailAndPassword del objeto FirebaseAuth, esta función recibe un correo electrónico
y una contraseña como parámetro. Agregamos un detector de devolución de llamada que
Página 19 de 26
CICLO
01-2023
devuelve un objeto de tarea. Si la solicitud es exitosa, redireccionamos a MainActivity utilizando

Intent.
c. Si el usuario no posee una cuenta, la redirigimos a la pantalla de registro con la función

goToRegister.
6. Vinculemos el funcionamiento de las dos funciones anteriores. Para ello deberemos regresar al método
onCreate y agregar las siguientes líneas de código.
Página 20 de 26
CICLO
01-2023
Parte 6: Verificación del funcionamiento de la aplicación

Ejecute la aplicación debería de cargar la pantalla de registrar un nuevo usuario, así como se muestra en la
imagen de referencia.
Ahora verifique el funcionamiento de la siguiente manera:

1. Presione el texto “Ingresar” debería de navegar hacia la pantalla de Login.
2. En la pantalla de “Login” presione el texto “Registrar”, debería de navegar a la pantalla de registrar un

nuevo usuario. Ahora ingrese un nuevo usuario y seleccione el botón “Registrar”. Si la conexión a
Firebase ha sido exitosa, debería de verificar dos situaciones:
a. Se ha redirecciona a la pantalla MainActivity
Página 21 de 26
CICLO
01-2023
b. Cargue la consola de Firebase (https://console.firebase.google.com/), seleccione el proyecto de

firebase, luego en el panel izquierdo de la pantalla seleccione la opción “Authentication” y
visualice la pestaña “Users”. Observe que se ha creado el nuevo registro.
3. En su dispositivo virtual cierre la aplicación y vuelva a iniciarla. Podrá notar que la pantalla que se muestra
es la registrar un nuevo usuario, sin embargo, la sesión del usuario anterior debería de respetarse al
cargar la aplicación, es decir, cargar la pantalla “ActivityMain”.
Parte 7: Verificando Sesión

Como planteábamos en el ítem anterior, si el usuario ya tiene una sesión habilitada, se debería de respetar. Es
decir, que se evite estar solicitando que inicie sesión nuevamente. Para validar la sesión realizaremos los
siguientes pasos:
1. Localice el archivo RegisterActivity.kt y agregue como variable global authStateListener, esta variable
permitirá tener un escuchador del objeto Firebase.
Página 22 de 26
CICLO
01-2023
2. Ahora implemente los métodos onResume y onPause, en el método onResume estamos obteniendo el
estado del objeto FirebaseAuth y en el método onPause estamos removiendo la verificación del estado
del objeto.
3. Agreguemos una nueva función que nos permitirá validar si existe una sesión disponible. En caso que
exista se redireccionará a la pantalla ActivityMain.
4. Ahora implementemos la función checkUser() en el método onCreate(), quedando de la siguiente

manera.
Página 23 de 26
CICLO
01-2023
5. Ejecute la aplicación nuevamente, inicie sesión o registre un nuevo usuario. Luego proceda a cerrar la
aplicación desde su dispositivo móvil y por último cargue nuevamente la aplicación. Podrá notar que la
sesión del usuario ha permitido que se redireccione a la pantalla ActivityMain.
Parte 8: Eliminado Sesión
Como ultimo paso nos queda realizar la eliminación de la sesión de nuestro usuario, para ello realizaremos las
siguientes modificaciones.
1. Sobre la carpeta res, presione clic derecho del mouse y seleccione la opción “Nuevo” -> “Android
Resource File”
2. Se le mostrara una nueva ventana en la cual deberá de colocar un nombre al nuevo archivo, en el tipo
de archivo deberá seleccionar “Menu”, utilice la imagen de referencia para completar la información.
3. Utilice la vista “Code” correspondiente a la pantalla menú. Ingrese la siguiente información.
Página 24 de 26
CICLO
01-2023
4. En la clase MainActivity.kt deberá de agregar los siguientes métodos onCreateOptionsMenu (permite

incluir las opciones de menú a nuestra actividad) y onOptionsItemSelected (permite detectar que opción
del menú ha sido seleccionada).
5. Ejecute nuevamente la aplicación, compruebe el funcionamiento del menú y de la opción cerrar sesión.
Página 25 de 26
CICLO
01-2023
IV. DISCUSIÓN DE RESULTADOS
Modifique el diseño del ejemplo anterior (según como se visualiza en la imagen) y agregue la funcionalidad de
autenticación con Google y Facebook.
V. BIBLOGRAFÍA
● Agregar Firebase al proyecto de Android | Firebase para Android. (s. f.). Firebase.
https://firebase.google.com/docs/android/setup?authuser=0
Página 26 de 26

Semana7 Quimica

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Semana7 Quimica

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DON BOSCO

Que al finalizar la practica el estudiante aprenda a:

II. INTRODUCCIÓN TEORICA

Inicio de sesión y autenticación en Firebase

Inicio de sesión y registro por correo electrónico

III. DESARROLLO DE LA PRÁCTICA

Parte 1: Creación de un proyecto en Firebase

3. Se le solicitará la autenticación de su cuenta de Google. Omita este paso si ya se encuentra autenticado.

4. Seleccione el botón “Crear proyecto”

5. Ingresamos el nombre de nuestro proyecto: “Kotlin Fireabas”. Seleccionamos el botón “Continuar”.

Parte 2: Habilitando servicio de autenticación en Firebase (Correo electrónico / contraseña)

5. De ahora en adelante se te mostrar en la pantalla principal de “Authentication”, la lista de los servicios

Parte 3: Conectando Firebase con el asistente de Android Studio

5. Ahora seleccione la opción “Connect to Firebase”

9. Diríjase a su navegador web de preferencia e ingrese a la consola de Firebase

Parte 4: Creando diseño de Registro

2. Abra el archivo activity_register.xml y en medio de las etiquetas

3. Localice el archivo RegisterActivity.kt y desarrolle el siguiente código fuente:

b. Crearemos un método llamado “register”, en el cual utilizaremos la función

Parte 5: Creando diseño de Login

2. Abra el archivo activity_login.xml y en medio de las etiquetas

5. Localice el archivo LoginActivity.kt y desarrolle el siguiente código fuente:

b. Crearemos un método llamado “login”, en el cual utilizaremos la función

devuelve un objeto de tarea. Si la solicitud es exitosa, redireccionamos a MainActivity utilizando

c. Si el usuario no posee una cuenta, la redirigimos a la pantalla de registro con la función

Parte 6: Verificación del funcionamiento de la aplicación

Ahora verifique el funcionamiento de la siguiente manera:

2. En la pantalla de “Login” presione el texto “Registrar”, debería de navegar a la pantalla de registrar un

b. Cargue la consola de Firebase (https://console.firebase.google.com/), seleccione el proyecto de

Parte 7: Verificando Sesión

4. Ahora implementemos la función checkUser() en el método onCreate(), quedando de la siguiente

Parte 8: Eliminado Sesión

3. Utilice la vista “Code” correspondiente a la pantalla menú. Ingrese la siguiente información.

4. En la clase MainActivity.kt deberá de agregar los siguientes métodos onCreateOptionsMenu (permite

IV. DISCUSIÓN DE RESULTADOS

También podría gustarte