• Author / Uploaded
• davcuqupe

Citation preview

Título: Crea aplicaciones web en tiempo record con Firebase Área: Informática Autor: Lic. David Gonzalo Cusi Quispe Depósito Legal No.: Impreso en: Derechos Reservados

Prohibida la reproducción total o parcial de este libro, su tratamiento informático la transmisión de ninguna forma o por cualquier otro medio ya sea electrónico, mecánico, por fotocopia, por registro u otros métodos sin autorización o consentimiento del autor.

Contenido

Presentación.......................................................................................................5 Agradecimiento...................................................................................................7 CAPÍTULO UNO...................................................................................................8 Instalación para trabajar con Firebase...........................................................8 CAPÍTULO DOS...................................................................................................10 Primer hola mundo con Firebase....................................................................10 CAPÍTULO TRES.................................................................................................22 Ver datos en tiempo real...................................................................................22 Trabajar con Bases de Datos en tiempo real................................................22 Eliminar datos.....................................................................................................29 Ingresar datos.....................................................................................................31 Modificar datos...................................................................................................33 CAPÍTULO CUATRO............................................................................................36 Ejemplo 1.............................................................................................................36 Crear y estructurar una Base de Datos en Firebase....................................36 Ejemplo 2.............................................................................................................37 CAPÍTULO CINCO...............................................................................................38 Creamos un proyecto en firebase con el nombre de practica-tres..........38 Crear un login para usuarios con email y contraseña.................................38 Creamos el proyecto como practica_tres......................................................39 Habilitar la autenticación por correo y contraseña en firebase.................43 Registrar correos y contraseñas mediante la aplicación web...................47 CAPÍTULO SEIS...................................................................................................50 Crear un login para usuarios con correo de Gmail......................................50 CAPÍTULO SIETE................................................................................................56 Crear un chat que funciona en tiempor real..................................................56 Bibliografía...........................................................................................................66

David Gonzalo Cusi Quispe

Presentación

El presente texto titulado "Crea aplicaciones web en tiempo record con Firebase" que comprende en su contenido: Instalación para trabajar con Firebase, Primer hola mundo con Firebase, Trabajar con base de datos en tiempo real, Crear y estructurar una base de datos en Firebase, Crear un login para usuarios con email y contraseña, Crear un login para usuarios con correo de Gmail y Crear un chat que funciona en tiempo real. El contenido presentado en este material ha sido diseñado como Texto práctico para: Docentes, Estudiantes, Universitarios y otros profesionales.. Sin embargo, no está diseñado como un material para el auto aprendizaje, por que se requiere de la orientación de un mentor.

Lic. David Gonzalo Cusi Quispe

5

David Gonzalo Cusi Quispe

Agradecimiento

Quiero expresar mi sincero agradecimiento en el presente trabajo a toda mi familia que con sus sabios consejos me motivan a seguir adelante y demostrarles con el ejemplo el deseo de superación.

7

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO UNO 1

Instalación para trabajar con Firebase

Se dará un ejemplo de instalación del SDK de Firebase para una computadora con Sistema Operativo Windows 10 de 64 bits. Es necesario tener en el computador una instalación normal de Nodejs. El programa es de descarga gratuita en la página de: https://nodejs.org/es/

>> Despues de descargar el programa nodejs debe de instalarlo siguiendo los pasos necesarios que le indique el programa de instalación. >> Una vez que se tenga instalado nodejs abrimos una terminal de comandos como administrador y ejecutamos el comando node --version para verificar que tengamos instalado nodejs.

8

Lic. David Gonzalo Cusi Quispe

Con los pasos anteriores ya tendremos instalado correctamente nodejs y podremos seguir con la instalación del SDK de Firebase. >> Como siguiente paso debemos de ejecutar el comando: npm install -g firebase-tools El proceso de descarga tardara algunos minutos dependiendo de la velocidad de internet. Podemos verificar que tenemos todo configurado volviendo a ejecutar el comando: npm install - g firebase-tools También necesitaremos un editor de texto. En este caso utilizaremos Visual Studio Code y lo podremos descargar de: https://code.visualstudio.com/

Una vez hecho todos los pasos ya podemos empezar a desarrollar aplicaciones web con firebase.

9

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO DOS 2

Primer hola mundo con Firebase Objetivo del capítulo

>> Realizar el primer despliegue en la web de una aplicación configurada con Firebase. Paso 1. Inicialmente vamos a crear un proyecto en Firebase, accediendo con nuestro correo de Gmail. La dirección es la siguiente: https://firebase.google.com/

Una vez ingresado en la página de firebase será necesario iniciar sesión ingresando un correo de gmail. Se pedira la contraseña de correo y podremos acceder a los recursos de la página.

10

Lic. David Gonzalo Cusi Quispe

Si no contamos con un correo de gmail podremos crear una cuenta en ese mismo momento.

Una vez ingresado podremos crear nuestro primer proyecto en firebase.

>> Crearmos el proyecto.

Una vez hecho estos pasos ya podremos configurar nuestro proyecto hecho en firebase.

11

Crea aplicaciones web en tiempo record con Firebase Paso 2. Una vez creado nuestro proyecto en Firebase tendremos que configurar la base de datos de firebase.

Escogeremos la opción de modo de prueba para no tener ningun problema con los permisos en nuestra base de datos.

Ahora observamos el entorno de trabajo con la base de datos. Los controles basicos para empezar a estructurar la base de datos son sencillos y son los siguientes: >> (+) Crea una subrama dentro de la rama superior. >> (x) Elimina la rama seleccionada con todas las subramas interiores. Los colores en Firebase ayudan a diferencias las acciones en la base de datos. >> El color verde indica la creación de una rama en la base de datos. >> El color rojo indica la eliminación de una rama en la base de datos. >> El color amarillo indica la modificación de una rama en la base de datos.

12

Lic. David Gonzalo Cusi Quispe Las bases de datos en firebase son creadas con la lógica de árboles y sus ramas.

Ejemplo Tenemos un ejemplo de una lista de dos alumnos con sus nombres y edades registrados y más abajo mostramos su equivalente en la base de datos firebase.

>> La estructura de la tabla alumnos en firebase nos muestra como la rama superior a el nombre del proyecto que es practica-uno-6e5c3. >> Dentro de la rama practica-uno-6e5c3 se creo dos subramas Alumno1 y Alumno2. >> Dentro de Alumno1 se creo dos subramas para colocar el Nombre con su valor David y su Edad con el valor de 17. Se hizo los mismo pasos para la subrama Alumno2. Esta es la manera en que se organiza los datos en firebase. 13

Crea aplicaciones web en tiempo record con Firebase Paso 3. Crearemos un proyecto en firebase y lo desplegaremos en un hosting gratuito. Este paso lo realizaremos en la computadora. >> Crearemos una carpeta en el escritorio con el nombre de practica_uno. >> Luego accederemos a la carpeta mediante la terminal de comandos en modo administrador.

Es importante que nos ubiquemos en la carpeta practica_uno. Paso 4. Iniciar un proyecto en firebase. Para iniciar un proyecto en firebase es necesario ejecutar el comando firebase login. Éste comando abrira un navegador para que se den permisos para firebase-tools y tendremos que colocar la contraseña de nuestro correo Gmail.

14

Lic. David Gonzalo Cusi Quispe Seguiremos todos los pasos necesarios.

Se nos mostrara el siguiente mensaje si es que todo se inicio correctamente.

15

Crea aplicaciones web en tiempo record con Firebase Ahora utilizaremos el comando firebase init para generar todos los archivos necesarios en el proyecto practica_uno.

Seguiremos todos los pasos indicados en las imagenes. En la siguiente imagen seleccionaremos las opciones de Database y Hosting. Se utiliza la tecla de espacio para seleccionar las opciones y las teclas de flecha para moverse entre las opciones, una vez terminado presionamos enter.

Despues debemos de seleccionar el proyecto que tenemos en nuestra cuenta en firebase que tiene por nombre practica-uno.

16

Lic. David Gonzalo Cusi Quispe

El programa pregunta las configuraciones para las reglas de la base de datos y solo tendremos que presionar la tecla enter para trabajar con las opciones por defecto.

Con esto ya tendremos configurado nuestro primer proyecto en firebase. Paso 5. Iniciar el servidor local de firebase. El servidor nos brindara la posibilidad de ver nuestro proyecto en un servidor local con el comando firebase serve.

17

Crea aplicaciones web en tiempo record con Firebase El comando firebase serve nosmuestra una url donde podremos ver nuestro proyecto en un navegador web. Generalmente el servidor se encuentra en: localhost:5000

Paso 5. Desplegar modificar nuestra aplicación web. Para modificar la aplicación web abriremos la carpeta del proyecto con Visual Studio Code. El archivo que modificaremos se encuentra en practica_uno/public/index.html.

18

Lic. David Gonzalo Cusi Quispe

Borraremos todo el contenido del archivo index. html y crearemos la siguiente estructura.

Luego procederemos a guardar los cambios y ver los resultados en el servidor localhost:5000 en nuestro navegador web.

19

Crea aplicaciones web en tiempo record con Firebase Ahora que ya tenemos nuestra primera aplicación hola mundo, el siguiente paso a realizar es desplegar nuestra aplicación en el hosting gratuito que nos proporciona firebase. Comando: firebase deploy Antes de utilizar firebase deploy es necesario apagar el servidor local en la terminal de comandos con las teclas CTRL+C

Luego ejecutamos el comando firebase deploy.

Una vez finalizado todo nos muestra la url que debemos utilizar para acceder a nuestro proyecto. En este ejemplo la url es: https://practica-uno-6e5c3.firebaseapp.com 20

Lic. David Gonzalo Cusi Quispe

Con firebase deploy podremos subir nuestra aplicación a un servidor gratuito y hosting gratuito y mostrarselo a nuestros clientes o amigos compartiendo solo la url que nos proporciona firebase.

Una vez terminado este capítulo usted estará capacitado para: >> Crear un proyecto en firebase.google.com. >> Configurar una aplicación web con firebase en su computadora. >> Utilizar un el servidor local de firebase para probar sus aplicaciones. >> Desplegar sus aplicaciones web utilizando el hosting gratuito de firebase.

21

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO TRES 3

Trabajar con Bases de Datos en tiempo real. Objetivo del Capítulo

>> Realizar una aplicación web que permita ver, ingresar, modificar y eliminar datos en tiempo real. El proyecto llevará como nombre practica-dos. Y ulilizaremos jquery para el desarrollo del código de programación

Ver datos en tiempo real

Primero crearemos el proyecto en firebase con el nombre de practica-dos y pondremos la siguiente estructura en la base de datos.

22

Lic. David Gonzalo Cusi Quispe Crearemos el proyecto en nuestra computadora. Primero crearemos una carpeta en el escritorio de windows con el nombre de practica_dos.

Abriremos una terminal de comandos como administrador y nos ubicaremos en la carpeta practica_ dos. Marcamos las opciones de Database y Hosting y presionamos Enter Ahora ejecutaremos el comando firebase init y seguiremos los pasos requeridos. Luego seleccionamos nuestro proyecto practica-dos y seguimos los mismos pasos que en el anterior capítulo. Ponemos una letra 'y' o 's' para continuar con la configuración. 23

Crea aplicaciones web en tiempo record con Firebase Luego ejecutamos el comando firebase serve para trabajar con el servidor local. También abriremos el proyecto con Visual Studio Code. No se debe de cerrar el servidor de la terminal de comandos.

Para crear el proyecto usaremos la libreria jquery en su version 3.3.1 y tambien utilizaremos bootstrap en su version 4. La forma de organización de los recursos será como se muestra en la imagen.

24

Lic. David Gonzalo Cusi Quispe El código que tendra el archivo index será el siguiente y lleva comentarios para la mejor compresión del código.

Para agregar firebase a nuestra app es necesario copiar el siguiente código que varia dependiendo el proyecto en el que estemos trabajando. Primero debemos situarnos en la opción de Authentication de la página de firebase y luego a Configuración web.

25

Crea aplicaciones web en tiempo record con Firebase

Una vez copiado el código debemos de pegarlo en el archivo index.html dentro de la etiqueta como se muestra en la siguiente imagen.

Una vez agregado el código de firebase ahora nos preocuparemos en mostrar los datos que tenemos guardados en la base de datos de firebase.

26

Lic. Gonzalo Cusi Quispe ParaDavid mostrar datos en tiempo real firebase nos proporciona dos funciones llamadas on() y once().

>> Antes de usar las funciones necesitamos crear una variable que nos dará acceso a los datos de firebase de la siguiente manera: var BaseDeDatos = firebase.database(); >> Después debemos de crear la referencia que se ubique donde los datos que mostraremos en este caso queremos mostrar los productos: var RefBaseDeDatos = BaseDeDatos.ref('productos/'); >> Por ultimo utilizaremos la función on() para mostrar la lista de los productos en la página web. RefBaseDeDatos.on('value', function(snapshot){ $('#lista').html(""); snapshot.forEach(function(e){ var objeto = e.val(); $('#lista').append( '' +objeto.cantidad+ '' +objeto.marca+ '' +objeto.nombre+ '' +objeto.precio+''); }); }); >> Por último pondremos el contenedor de nuestra lista con el id lista que irá dentro de la etiqueta .

LISTA DE PRODUCTOS

Cantidad

Marca Nombre Precio



27

Crea aplicaciones web en tiempo record con Firebase El archivo index.html debe de quedar de la siguiente manera.

Una vez guardado todo ya podriamos ver los cambios en el servidor local de firebase.

28

Lic. David Gonzalo Cusi Quispe Podriamos probar como se comporta la función on() cambiando directamente en la base de datos de firebase y viendo los resultados en la página web.

Con esto abremos configurado nuestra aplicación web para mostrar datos en tiempo real de nuestros productos. La siguiente función que le añadiremos a nuestra aplicación será de eliminar o borrar datos de nuestros productos.

Eliminar datos Para eliminar productos de la base de datos lo primero que haremos será colocar un id para identificar productos y así borraremos productos por su id. Para esta práctica utilizaremos la función remove() que se pone en cualquier referencia que tengamos. >> Primero ponemos un identificador a cada producto y agregamos un tercer producto. 29

Crea aplicaciones web en tiempo record con Firebase Utilizando las clases de bootstrap 4 cambiaremos la distribución de las columnas y agregaremos un boton para eliminar a lado de cada producto.

>> Para eliminar productos crearemos otra variable de base de datos que se encargara de hacer referencia a los productos que se eliminar. >> Dentro de la función on() que muestra cada producto simultaneamente crearemo los botones con sus respectivas funciones de click que eliminaran los productos.

30

Lic. David Gonzalo Cusi Quispe Una vez terminado con los cambios deberiamos de tener el siguiente resultado.

Ingresar datos

Ahora agregaremos un casillas de entrada de datos y un boton para ingresar productos. El evento de click del boton ingresar tendra la función push().key para generar un id automaticamente por lo que no será necesario poner un id mannualmente. También utilizaremos la función update() que nos permittirá ingresar el nuevo producto. Nota.- Para ésta práctica borraremos todos los productos que tengamos en la base de datos y modificaremos el evento click de los botones de eliminar de la siguiente manera: var dato = BaseDeDatos2.ref('productos/'+objeto.id); >> Primero creamos la estructura para ingresar los datos necesarios.

31

Crea aplicaciones web en tiempo record con Firebase

Con estos cambios ya podremos ingresar nuevos productos a través de la página web. En este ejemplo se opto por usar dos funciones que son el push().key y el update(), también se pudo usar la función set() pero para fines más prácticos y pensando en que se tendrá gran cantidad de productos es preferible usar estas dos funciones. 32

Lic. David Gonzalo Cusi Quispe

Modificar datos

Para modificar datos se añadirá un botón de actualización de color verde en bootstrap 4, asi mismo también cambiaremos la casillas de html de a de tipo texto para modificar los datos de cada producto. La función click del botón de actualizar hará uso de los "id" de cada producto para su modificación en la base de datos, de ésta manera se garantizará que los productos correctos se modifiquen. >> Primero cambiamo las etiquetas "divs" por "inputs"y agregamos los botones de actualizar.

>> Luego creamos la función de cada botón para actualizar.

33

Crea aplicaciones web en tiempo record con Firebase Una vez tengamos el código obtendremos el siguiente resultado.

Con esto tenemos una aplicación web capaz de mostrar nuestros productos en tiempo real, agregar nuevos productos, modificar su valor y eliminar dichos productos. >> Por último podriamos hacer un despliegue de nuestro proyecto con firebase deploy para subir el proyecto a una url en la web. >> Primero apagaremos el servidor en la consola de comando donde ejecutamos firebase serve. Para detener el servidor debemos de presionar las teclas Ctrl+c.

34

Lic. David Gonzalo Cusi Quispe >> Luego ingresaremos en la terminal de comandos firebase deploy. Cuando termine el deploy se nos mostrara la url que se asignó a nuestro proyecto.

35

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO CUATRO 4

Crear y estructurar una Base de Datos en Firebase. Objetivo del Capítulo:

>> Configurar los permisos de una base de datos basica y entender como convertir las tablas de datos normales a tablas de datos en firebase. Para éste capítulo analisaremos la forma en que podemos estructurar datos. Firebase almacena los datos en formato JSON.

Ejemplo 1

Imaginemos una aplicación de chat que permite a los usuarios guardar en sus perfiles sus nombres, fecha de nacimiento y su celular. >> La representación gráfica de la tabla seria de la siguiente manera. >> La representación en JSON de la tabla usuarios seria de la siguiente manera.

36

Lic. David Gonzalo Cusi Quispe

Ejemplo 2

A la misma aplicación de chat que permite guardar usuarios le añadiremos un espacio para guardar mensajes. Una alternativa es añadir un subnivel para los mensajes de cada usuario. Ésta alternativa es funcional y no presentará problemas en nuestro proyecto, pero es recomendable no crear varios subniveles debido a que cuando se recuperan datos de una ubicación se obtienen todos sus subniveles y los datos que tengan. Para proteger mejor los datos de nuestra aplicación es mejor representar estos datos de manera más sencilla y separando nuestros nodos aunque esto implique tener algunas redundancias de datos. De ésta manera protegemos los datos privados de los usuarios y cada vez que se pidan los mensajes el trafico de datos sera mucho menor.

37

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO CINCO 5

Crear un login para usuarios con email y contraseña. Objetivo del capítulo:

>> Crear una aplicación de autenticación de usuarios ingresando un correo y una contraseña. Para éste capítulo utilizaremos una plantilla de login creada con css y bootstrap 4.

Creamos un proyecto en firebase con el nombre de practica-tres.

>> Primero añadiremos un nuevo proyecto en nuestra cuenta de firebase.google.com. >> Luego crearemos una base de datos en tiempo real (realtime database) con la opción de prueba.

38

Lic. David Gonzalo Cusi Quispe

Creamos el proyecto como practica_tres

>> Creamos una carpeta en el escritorio como practica_tres. >> Ingresamos mediante la terminal de comandos a la carpeta practica_tres y ejecutamos firebase init. Aqui presionamos la tecla enter.

Luego escogemos las opciones de database y hosting y presionamos enter. Nota.-La tecla espacio es para seleccionar las opciones.

Con las teclas de flecha nos ubicamos en el proyecto practica-tres y presionamos enter.

39

Crea aplicaciones web en tiempo record con Firebase Por ultimo presionamos la tecla enter en las demas configuraciones. Al finalizar la configuración obtendremos el siguiente mensaje en la terminal de comandos.

Ahora en la misma terminal de comandos ejecutaremos el comando firebase serve para empezar con la creación de nuestro proyecto.

El siguiente paso será abrir la carpeta de nuestro proyecto con visual studio code. Nos ubicaremos en el archivo index.html y copiaremos el siguiente codigo.

40

Lic. David Gonzalo Cusi Quispe Tambien agregaremos los archivos necesarios para utilizar jquery y bootstrap 4. Esta es la estructura que utilizaremos para cada proyecto en este libro.

Ahora copiaremos el código de implementación de firebase de nuestro proyecto practica-tres.

41

Crea aplicaciones web en tiempo record con Firebase Una vez copiado el código lo pegaremos en nuestro archivo index.html de la siguiente manera.

Ahora colocaremos la plantilla de ejemplo.

Con el código anterior creamos un formulario simple que pide como requisito ingresar un correo electrónico válido y su respectiva contraseña. También cuenta con tres botones principales de Registrarse como usuario, de Iniciar una sesión y de Salir de una sesión.

42

Lic. David Gonzalo Cusi Quispe Con todo el codigo anterior obtendriamos el siguiente resultado. Solo nos queda habilitar la autenticación por correo y contraseña en nuestro proyecto de firebase.

Habilitar la autenticación por correo y contraseña en firebase.

Habilitamos la opción de correo electrónico/contraseña y guardamos los cambios.

43

Crea aplicaciones web en tiempo record con Firebase Con todos los pasos anteriores obtendremos el siguiente resultado en nuestro proyecto.

Ahora en la pestaña de usuarios crearemos nuestro primer usuario que tendra como correo admin@ pratica.com y su contraseña será 123456

Con estos pasos tendremos en la base de datos nuestro primer usuario con correo y contraseña.

44

Lic. David Gonzalo Cusi Quispe Ahora crearemos una función para cuando se pulse el botón Iniciar que mandará el correo y contraseña al servidor de firebase para iniciar una sesión con el usuario y contraseña. La función la crearemos en la parte inferior de la etiqueta .

Con la ayuda de la console de chrome verificamos que no se muestre ningun error cuando ingresemos el usuario que creamos ([email protected]) con su contraseñ (123456).

Agregaremos una función de tipo listener que controle si se tiene una sesión iniciada o no. >> Primero agregaremos un id= "estado" al siguiente parrafo.

45

Crea aplicaciones web en tiempo record con Firebase

Ahora utilizaremos la función que nos da firebase: firebase.auth().onAuthStateChanged(function (u){ }); >> La función anterior nos devuelve el estado del usuario que inicio sesión y en el caso de que no haya ningún usuario nos devuelve null. >> Utilizaremos ésta función para mostrar en el párrafo el correo del usuario que inicio sesión. También ocultaremos el botón de Iniciar si es que existe un usuario con una sesión. >> En el caso de que no haya ningún usuario conectado mostraremos en el párrafo el mensaje de "Ningún usuario conectado" y ocultaremos el botón de Salir. >> Por último utilizaremos una función para el botón de Salir: firebase.auth().signOut();

La función signOut() cierra la sesión del usuario actual. 46

Lic. David Gonzalo Cusi Quispe >> Cuando ingresemos el correo admin@practica. com con su contraseña 123456 deberiamos de obtener el siguiente resultado.

Pero cuando no haya ningún usuario ingresado obtendremos la siguiente pantalla.

Registrar correos y contraseñas mediante la aplicación web

Agregaremos una función al botón Registrar para habilitar nuevas cuentas que puedan iniciar sesión en nuestra aplicación web. 47

Crea aplicaciones web en tiempo record con Firebase "firebase.auth().createUserWithEmailAndPassword(email,password);" permite registrar nuevos correos en la base de datos de firebase enviandole como parámetros un correo con su contraseña.

Registraremos el correo admin2@practica. com con su contraseña 654321.

Luego verificaremos que el usuario se registro en la base de datos de firebase.

48

Lic. David Gonzalo Cusi Quispe Con esto terminamos la aplicación que permite iniciar sesión con correos y contraseñas. Además de esto también podremos subir el proyecto al hosting gratuito que nos proporciona firebase con el comando firebase deploy.

49

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO SEIS 6

Crear un login para usuarios con correo de Gmail. Objetivo del capítulo:

>> Crear una aplicación de autenticación de usuarios ingresando un correo de Gmail. Para éste capítulo utilizaremos una plantilla de login creada con css y bootstrap 4. >> Primero crearemos otro proyecto en firebase con el nombre de practica-cuatro. >> Luego habilitaremos la autenticación por Google.

Una vez tengamos habilitada la autenticación por Google podremos crear aplicaciones web que permitan a los usuarios iniciar sesión con sus correos de Gmail. 50

Lic. David Gonzalo Cusi Quispe Utilizaremos la siguiente estructura para nuestra aplicación web: >> Crearemos una carpeta para nuestro proyeco llamada practica_cuatro. >> Iniciaremos un proyecto de firebase mediante el comando firebase init y tambien iniciaremos el servidor con firebase serve.

>> Agregaremos los recursos necesarios para trabajar con jquery y bootstrap 4. >> Luego borraremos todo el contenido del archivo index.html y copiaremos el siguiente código que nos servirá como plantilla para nuestra aplicación web.

La plantilla nos muestra dos botones un botón de Inicio con Google y el otro botón que sirve para Salir de una sesión. 51

Crea aplicaciones web en tiempo record con Firebase También copiamos el código de implementación web que nos proporciona firebase.

El resultado del código anterior en el navegador web es el siguiente:

El siguiente es el de crear una función para el click del botón Iniciar con Google. 52

Lic. David Gonzalo Cusi Quispe >> Primero crearemos una instancia del proveedor de Google: var provider = new firebase.auth.GoogleAuthProvider(); >> Para que los usuarios inicien sesión invocaremos a una ventana emergente con la función:

firebase.auth().signInWithPopup(provider) .then(function (result) { //Código que se ejecuta si un usuario //inicia sesión con su correo de Gmail }); Colocaremos todo el código dentro de una etiqueta script al final de body.

También utilizaremos las mismas funciones del anterior capítulo para administrar las sesiones de los usuarios. >> La función click del boton "Iniciar con Google" invocará una ventada emergente del proveedor de Google. >> La función click del botón "Salir" cerrará cualquier sesión iniciada en la aplicación web. >> También utilizaremos la función onAuthStateChanged() para administrar la apariencia de nuestra aplicación web. No olvidemos que el código para los eventos de click utiliza la libreria de jquery y si no tenemos el archivo jquery no podremos utilizar el código presentado en las imagenes. 53

Crea aplicaciones web en tiempo record con Firebase

Cuando tengamos la aplicación sin usuarios conectados tendremos la siguiente pantalla.

54

Lic. David Gonzalo Cusi Quispe Cuando Iniciemos sesión se nos pedirá que ingresemos un correo de Gmail y su contraseña. Al finalizar el registro se obtendra el siguiente resultado.

También podremos verificar si existen algunos errores con la sesión de los usuarios actuales y algunos de sus datos proporcionados por el proveedor de Google todo en la consola del navegador Chrome.

Con ésto ya tenemos una aplicación web que admite iniciar sesión con correo de Gmail. 55

Crea aplicaciones web en tiempo record con Firebase

CAPÍTULO SIETE 7

Crear un chat que funciona en tiempor real. Objetivo del capítulo:

>> Crear una aplicación de chat que permita a los usuarios conectados leer y enviar mensajes. Para éste capítulo utilizaremos una plantilla de creada con css y bootstrap 4. >> Crearemos un nuevo proyecto en firebase con el nombre de practica-cinco. >> Luego crearemos una carpeta con el nombre de practica_cinco en el escritorio de windows e iniciaremos un proyecto con el comando firebase init. >> Después de usar firebase init iniciaremos el servidor con el comando firebase serve.

Utilizaremos el mismo código del proyecto_cuatro del capítulo anterior con la variación del código de implementación de firebase que se obtendrá de firebase. 56

Lic. David Gonzalo Cusi Quispe

Al igual que en anterior proyecto debemos de habilitar la autenticación por Google.

Ahora deberiamos de tener nuevamente la aplicación de permite iniciar sesión con Google y que utilizaremos para nuestra aplicación de chat.

57

Crea aplicaciones web en tiempo record con Firebase Ahora crearemos una rama en nuestra base de datos llamada "chat" en donde guardaremos todos los mensajes enviados. Seguiremos los siguientes pasos en firebase: >> Crearemos la base de datos en tiempo real.

>> Definimos las reglas de escritura y lectura de nuestros datos.

>> Luego crearemos el nodo chat para guardar los mensajes enviados por los usuarios.

58

Lic. David Gonzalo Cusi Quispe

>> Agregaremos un espacio para mostrar los mensajes de la base de datos y también agregaremos un input para enviar mensajes a la base de datos.

>> También añadiremos una hoja de estilos css con el que daremos forma a nuestra aplicación web. >> Agregaremos también una carpeta de imagenes que contendrá una imagen de usuario en formato png.

59

Crea aplicaciones web en tiempo record con Firebase Enlazaremos la hoja de estilos.css con nuestro archivo index.html.

El código de estilos.css es el siguiente.

Luego de hacer todos los pasos anteriores tendremos el siguiente resultado.

60

Lic. David Gonzalo Cusi Quispe Ahora crearemos el evento click del botón Enviar que: >> Enviará el mensaje introducido dentro del "input". >> Obtendrá la fecha y hora actual de sistema gracias a la función "new Date()". >> Obtendrá el usuario que esté con una sesión activa gracias a la función de firebase: "firebase.auth().currentUser" Todos los datos serán enviados por medio de la función "push()".

Probaremos el funcionamiento del código enviando una mensaje de hola con un correo de gmail. Si todo está correcto deberiamos de tener el mensaje guardado en la base de datos de firebase en la rama llamada "chat".

61

Crea aplicaciones web en tiempo record con Firebase Aún no podremos ver los mensajes en la aplicación web pero si podremos verificar la base de datos en firebase. Los datos que se guardan en la base de datos son los de Fecha, Mensaje y Nombre que contiene el correo del usuario que mando el mensaje.

Para evitar que un usuario que no inició sesión pueda mandar mensajes y ver mensajes de la base de datos modificaremos nuestra función: firebase.auth().onAuthStateChanged

62

Lic. David Gonzalo Cusi Quispe

Para mostrar los mensajes que tenemos almacenados en nuestra base de datos utilizaremos la función: TablaDeBaseDatos.limitToLast(20).on('value', function (snapshot)

La función limitToLast(20) solo mostrará los ultimos 20 mensajes mas actuales y la función on('value') tiene la caracteristica de activarse solo cuando se surgen nuevos datos en la base de datos de firebase.

Con el código anterior mostramos los mensajes que obtenemos de la base de datos de firebase y lo s adicionamos a la aplicación web mediante la función $('#chat').append(...). Para evitar que se repitan los datos primero limpiamos todo lo que haya dentro de la aplicación con $('#chat').html("");. 63

Crea aplicaciones web en tiempo record con Firebase El resultado que se tiene en la aplicación es el siguiente: >> Podremos observar todos los mensajes en la aplicación asi como el correo del emisor la fecha y hora en la que se envio el mensaje. >> Podremos enviar y ver nuevos mensajes. >> Solo los usuarios conectados con un correo de Gmail podrán enviar y ver mensajes.

El proyecto de chat también será subido al hosting de firebase y los lectores podrán ver el funcionamiento de la aplicación ingresando en la url que se mostrará en las siguientes imagenes. >> Desplegamos el proyecto con el comando firebase deploy.

64

Lic. David Gonzalo Cusi Quispe Como último paso probamos el funcionamiento de la aplicación mediante la url: >> https://practica-cinco.firebaseapp.com

65

Crea aplicaciones web en tiempo record con Firebase

Bibliografía

>> Página Web: https://firebase.google.com/docs/ web/setup >> Página Web: https://www.w3schools.com/ >> Página Web: https://getbootstrap.com/ >> Página Web: https://nodejs.org/es/ >> Página Web: https://escuela.it/ >> Página Web: https://platzi.com/clases/programacion-basica/ >> Página Web: https://ed.team/cursos/javascript

66