Nro.

DD-106
Programación Móvil para Redes
Página 1 de 10

Programación Móvil para Redes

LABORATORIO N° 11

Uso de Firebase en App Inventor

 Nro. DD-106
Programación Móvil para Redes
Página 2 de 10

CODIGO DEL CURSO: II3401

Not
Alumno(s):
a
Grupo: Ciclo: III
Excelente Regular Requiere No acept.
Criterio de Evaluación Bueno (3pts)
(4pts) (2pts) mejora (1pts) (0pts)

Cumple con la Cumple con Cumple con muy No cumple

Cumple con todo
mayoría de lo algo de lo poco de lo con nada de
lo requerido por
requerido por el requerido por el requerido por el lo requerido
el criterio
criterio criterio criterio por el criterio
Reconoce el uso de
componente FirebaseAuth
Reconoce el uso de
propiedades y eventos
Realiza los ejercicios
propuestos
Realiza observaciones y
conclusiones que aporten un
opinión crítica y técnica
Muestra orden y respeto en el
laboratorio y redacta el informe
ordenadamente, sin copias de
otros autores
 Nro. DD-106
Programación Móvil para Redes
Página 3 de 10

I.- OBJETIVOS:
 Uso de eventos y propiedades del componente Firebase Auth
 Control y manejo de errores de validación

II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.

III.- FUNDAMENTO TEÓRICO:

 Revisar el texto guía que está en el campus Virtual.

 Revisar información proporcionada en Canvas

IV.- NORMAS EMPLEADAS:

 No aplica

V.- RECURSOS:

 En este laboratorio cada alumno trabajará con un equipo con sistema operativo
Windows.
 Para el uso de la plataforma de desarrollo App Inventor debe poseer conexión a
internet

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

 El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO:

Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las
herramientas de desarrollo en un equipo externo.

CONSIDERACIONES

1. Se usará el software de desarrollo App Inventor 2

 Nro. DD-106
Programación Móvil para Redes
Página 4 de 10

1. DISPOSICIÓN DE ELEMENTOS

1.1 En este proyecto desarrollaremos 3 Screen. En el primer Screen mostraremos una pantalla de
login en que se validará los datos de usuarios almacenados en Firebase. En el segundo screen,
se registrará un nuevo usuario. En el tercer screen se mostrará un mensaje cuando se haya
verificado que el usuario es correcto. Se utilizará la extensión FirebaseAuth.

2. DISEÑO DE INTERFACES Y LOGICA DE PROGRAMACION

2.1 Cree un proyecto en AppInventor denominado: RedSocial

2.2 Importe la extensión FirebaseAuth.aix proporcionada por el docente
2.3 Diseñe la siguiente interfaz mostrada siguiendo la vista de componentes mostrada

2.4 Solo se muestra la configuración de los elementos a utilizar, configure los demás
componentes a su criterio para que quede como muestra la imagen de arriba:

Objeto Propiedad
CampoDeTexto1 Nombre Variable: txtUsuario
CampoDeContrasena Nombre Variable: txtClave
1
Boton 1 Nombre Variable: btnLogear
Texto: Logear
 Nro. DD-106
Programación Móvil para Redes
Página 5 de 10

Boton 2 Nombre Variable: btnSalir

Texto: Salir
Boton 3 Nombre Variable: btnRegistrar
Texto: Crear Usuario
FirebaseAuth ClaveAPI (ver punto 2.5)
Notificador1 Dejar todo por defecto
TinyBD1 Dejar todo por defecto

2.5 Vamos a obtener la API key para enlazar Firebase Authentication con nuestro
proyecto

2.5.1 Cree un proyecto Firebase llamado: RedSocial

2.5.2 En Firebase se configurará el servicio de Firebase Authentication para
determinar el método de inicio de sesión
2.5.3 En el lado derecho haga clic en AuthenticationComenzar

2.5.4 Vera que todos los servicios están deshabilitados. Habilite la primera opción
de Correo electrónico / contraseña (haga clic sobre esta opción). Habilite
solo la primera opción y clic en guardar

2.5.5 Verifique que se habilitó el método elegido

 Nro. DD-106
Programación Móvil para Redes
Página 6 de 10

2.5.6 Haga clic en la pestaña Users para verificar que aún no se tienen ningún
usuario

2.5.7 Haga clic en Tuerca de configuraciónConfiguración del proyecto

2.5.8 Copie el valor del campo Clave dela API de Web

2.5.9 Copie clave a la propiedad del objeto FirebaseAuth1 de AppInventor

 Nro. DD-106
Programación Móvil para Redes
Página 7 de 10

2.6 Cree una nueva ventana llamada CrearUsuario. Configure esta ventana para que
se vea de manera similar a la primera pantalla (punto 2.3)

2.7 Solo se muestra la configuración de los elementos a utilizar, configure los demás
componentes a su criterio para que quede como muestra la imagen de arriba:

Objeto Propiedad
CampoDeTexto1 Nombre Variable: txtUsuario
CampoDeContrasena Nombre Variable: txtClave
1
CampoDeContrasena Nombre Variable: txtClave2
2
Boton 1 Nombre Variable: btnCrear
Texto: CREAR
Boton 2 Nombre Variable: btnCancelar
Texto: CANCELAR
FirebaseAuth ClaveAPI (ver punto 2.5)
Notificador1 Dejar todo por defecto
 Nro. DD-106
Programación Móvil para Redes
Página 8 de 10

2.8 Crearemos la programación para el botón “Crear” para que permita crear un usuario
en Firebase Authentication

2.9 Programe la funcionalidad del botón “Cancelar” para que permita volver a la
pantalla principal

2.10 Programe la funcionalidad de la pantalla principal(Screen1) para que al hacer

clic en el botón de “Registrar” muestre esta pantalla “CrearUsuario” con la cual se
creara un nuevo usuario en Firebase

2.11 Ejecute su proyecto y verifique crear el usuario usuario1@miempresa.com y

clave usuario1234. Verifique que en Firebase se muestra el usuario creado

2.12 Programaremos la funcionalidad de controlar errores al momento de crear un

usuario en Firebase
 Nro. DD-106
Programación Móvil para Redes
Página 9 de 10

2.13 Ejecute su proyecto e intente crear el mismo usuario. Intente crear un usuario
nuevo con contraseña de 4 caracteres. Comente lo sucedido

2.14 Cree una nueva ventana llamada ListarMensajes. Por el momento no tendrá
ningún diseño

2.15 Se programará la funcionalidad de Logearse con el usuario creado previamente.

2.16 En la pantalla principal(screen1) programe la siguiente estructura de bloques

2.17 Programe la funcionalidad del botón “Salir” para salir de la aplicación

2.18 Ejecute el programa y verifique que puede logearse y validar que los datos son
correctos
 Nro. DD-106
Programación Móvil para Redes
Página 10 de 10

3. EJERCICIOS PROPUESTOS
a. Agregue funcionalidad al aplicativo para que muestre en la pantalla ListarMensajes
un mensaje de bienvenida al usuario que ha ingresado.
b. Cree un nuevo aplicativo denominado UsoFirebaseAuth que permita:
i. Registrarse usando una cuenta de Google o Facebook
c. Investigue la documentación necesaria e impleméntelo en un proyecto App Inventor
d. Adjunte capturas del proyecto realizado
 Nro. DD-106
Programación Móvil para Redes
Página 11 de 10

OBSERVACIONES (5 mínimo):
(Las observaciones son las notas aclaratorias, objeciones y problemas que se pudo presentar en el
desarrollo del laboratorio)

CONCLUSIONES (5 mínimo):
(Las conclusiones son una opinión personal sobre tu trabajo, explicar cómo resolviste las dudas o
problemas presentados en el laboratorio. Además de aportar una opinión crítica de lo realizado)