28-11-2022 Tarea 7: Práctica

de Firebase
Proyecto Final

Edgar Alexis López Martínez 18030817

Andrés Morales Martínez 18030666
 ÍNDICE

Definición del proyecto................................................................................................................2

Objetivo general. ...........................................................................................................................2
Alcance. ...........................................................................................................................................2
Desarrollo........................................................................................................................................3
Capturas de demostración. ......................................................................................................25
Conclusión. ...................................................................................................................................25

1
Definición del proyecto.
En la actualidad la comunicación entre las personas mediante las redes sociales se
ha convertido en una necesidad, es indispensable el estar comunicados los unos
con los otros, existen diferentes aplicaciones en las tiendas que permiten esto, pero
estas ocupan mucho espacio en los dispositivos móviles que tienen poco
almacenamiento, mas en concreto a dispositivos de media-baja y baja gama.
Además de que a algunas personas les resulta un poco complicado el saber al
completo el funcionamiento de las aplicaciones de mensajería actuales.

Objetivo general.
Creación de una aplicación móvil de chat, la cual permita mantener la comunicación
entre las personas y esta pueda ser instalada el cualquier dispositivo de la
actualidad, desde gama baja a gama alta, fácil y sencillo, además de una manera
fácil de usar.

Alcance.
Se espera que la aplicación llegue a todo tipo de personas, desde personas con
dispositivos móviles de gama baja, hasta las personas con pocos conocimientos
acerca de las aplicaciones de mensajería instantánea, cumpla su objetivo de que
con su fácil funcionamiento sea accesible para todas las personas.

2
Desarrollo.
A continuación, se desglosarán de manera resumida los pasos que se llevaron a
cabo para la creación de la aplicación móvil de mensajería instantánea.

Primeramente, se hace un nuevo proyecto en flutter:

Creamos un nuevo proyecto en firebase, y lo implementamos dentro de la

aplicación.

3
Habilitamos la autentificación.

Creamos una base de datos en firebase:

4
Creamos una regla de autenticación dentro de la base de datos:

Añadimos firebase a nuestra aplicación:

5
Se hace manejo de todos los usuarios registrados a la aplicación, mediante unos
datos:

Desde el main se llaman los diferentes métodos de control de usuarios, mediante

un SatetefulWidget.

6
Método para retornar el estado del usuario:

Y evaluamos el estado del usuario:

Pantalla de inicio de sesión, cajas de texto:

7
Le damos un estilo a las cajas de texto del correo y contraseña:

Implementación de una imagen en la pantalla:

Creamos un validador para el corre:

Al igual para la contraseña:

8
Botón para iniciar sesión:

Apartado para las personas que no tienen cuenta y desasen registrarse:

Pantalla de registro de nuevos usuarios, básicamente es igual que la de iniciar

sesión, únicamente se agrega el campo de nombre completo, se cambia la imagen
y en lugar de en la parte inferior preguntar si no tiene cuenta, le colocaremos un
dominio para que pueda iniciar sesión:

9
A continuación, se creará el código de autenticación, que básicamente va referido
hacia las personas que desean registrarse dentro de la aplicación, esto se hará por
medio del correo y contraseña:

Creamos una nueva colección dentro de firebase:

10
Y la implementamos:

Datos de cada uno de los usuarios:

Se crea un snackbar para cuando el usuario presione el botón de registra:

Dentro del main creamos 3 métodos Future para los datos del usuario:

11
Y el método de registro de los nuevos usuarios:

Código de autenticación o iniciar sesión:

12
Creación de la pagina principal de la aplicación, en la cual contara con una pantalla
lateral para mostrar la información del usuario, mostrara sus grupos y cerrar sesión:

13
Con una validación del cerrar sesión:

Pantalla que muestra el perfil del usuario, donde recupera su correo, nombre e
imagen:

14
Dentro de la página principal se mostrarán los chats del usuario, métodos de
recuperación:

Estos son recuperados dentro de una lista:

15
En caso de que el usuario no cuente con ningún chat, se le desplegara un mensaje
de que presione el botón de nuevo chat:

Para la creación de nuevos chats se desplegará una pantalla para poner el nombre
del chat:

16
Cuenta con las accione de crear y cancelar:

Método de creación de chats:

17
Los chats recuperados mostraran información de estos mismos dentro de la pantalla
principal:

Estos tendrán un estilo:

18
Pantalla de información de cada chat, donde retornaremos los miembros:

Mostrará la información del chat seleccionado:

Y mostrara los miembros del chat en una lista:

19
Pantalla de búsqueda, al presionar la lupa se mostrará una pantalla de búsqueda,
en la cual se puede escribir el nombre de un chat para buscar:

Donde se tendrá un método de búsqueda:

Se realizará la búsqueda por nombre y permitirá ingresar al chat en cuestión:

20
Se mostrará la lista de grupos posibles:

Con la opción de ingresar al chat:

Cajas de cada chat;

21
botón para ingresar al chat:

Pantalla de cada chat, donde en la parte inferior se encontrará el recuadro para

enviar mensajes:

Donde cada chat se mostrará junto con la quien lo envió:

22
Método de envió de mensajes:

Estilo de cómo se mostrarán los mensajes enviados:

23
24
Capturas de demostración.

25
Conclusión.

Este proyecto está enfocado en la creación de una aplicación móvil de chat, la cual permita
mantener la comunicación entre las personas y esta pueda ser instalada el cualquier
dispositivo de la actualidad, desde gama baja a gama alta, fácil y sencillo, además de una
manera fácil de usar.
Esta práctica se desarrolló una aplicación de chat sencilla pero compleja en Flutter con
Firebase en su backend. El enfoque principal es trabajar con la aplicación y conectarla con
los servicios de Firebase como Cloud Firestore, Firebase Storage y Firebase Authentication.
También se implementa la autenticación por medio de correo electrónico a través de
firebase para validar un inicio de sesión, así como el registro de un usuario por medio de la
misma.

26