[MUSIC]
En el ejercicio anterior, ya habíamos configurado nuestro
back-end Firebase como servicio con el nuevo proyecto.
Y también configuramos una gran cantidad de datos en nuestra base de datos, y luego configuramos nuestro almacenamiento y
configuramos nuestro servidor Firebase para que actúe como el back-end de nuestra aplicación React.
En este ejercicio, vamos a ver una versión modificada de nuestra aplicación React,
que hace uso del back-end de Firebase como servicio para
obtener los datos y también almacenar información para los usuarios en el servidor.
Además, aprovecharemos el soporte de autenticación que
ofrece Firebase para autenticar a los usuarios.
Ambos usando un enfoque de correo electrónico y contraseña, y también usando una cuenta de Google.
Para comenzar en este ejercicio, vaya a una ubicación conveniente en su computadora,
y luego clone el repositorio Git dado,
le he proporcionado la versión Firebase de nuestra aplicación React.
Así que escriba git clon https://github.com/jmuppala/conFusion-Rea -
CT-Firebase.git.
Y luego clone el repositorio de Git.
Y una vez que el repositorio de Git se clone en su computadora, luego
muévase a la carpeta Confusion-React-Firebase que se creará en este punto.
Y luego notarías que un montón de archivos ya están instalados allí.
Vamos a seguir adelante y hacer una instalación de hilo para instalar todos los
módulos de nodo de los que depende esta aplicación angular.
Esta versión también instalará módulos de nodo adicionales llamados Firebase.
Voy a explicar un poco más sobre estos módulos de nodo más adelante en este ejercicio.
Una vez finalizada la instalación del proyecto, abra el proyecto en un editor.
Y luego en el proyecto, vaya a la carpeta fuente > Firebase y
luego abra el archivo config.js.
Y en el archivo config.js, verá un conjunto de configuración de Firebase
que necesita configurar con su propia configuración de servidor Firebase.
Como hemos visto en el ejercicio anterior, podemos obtener toda esta información cuando hacemos
clic en este botón aquí llamado Añadir Firebase a su aplicación web.
Y luego copie esta información y
luego pegue esta información en su archivo config.js.
Para reemplazarlos con la configuración específica de los servidores Firebase para
toda esta información.
Y una vez que se haya completado, entonces usted puede iniciar su
aplicación React escribiendo inicio hilo en el indicador.
Una vez que su aplicación React está compilada, y así
aquí vería la página de inicio, la página acerca, como vemos aquí.
Y el menú.
Y la página de contacto.
Vamos a iniciar sesión nosotros mismos,
déjame volver a la página de inicio y luego vamos a iniciar sesión nosotros mismos.
Así que cuando haga clic en el botón Iniciar sesión,
verá el formulario típico aquí con el correo electrónico y la información de la contraseña.
También verá un botón inicial aquí llamado Iniciar sesión con Google.
Así que déjame iniciar sesión con mi cuenta de Google.
Por lo tanto, cuando haga clic en Iniciar sesión con Google, se abrirá otra
ventana del navegador donde se le pedirá que autorice el uso de su cuenta de Google.
Luego verá, en la esquina derecha, inmediatamente verá su nombre
mostrándose aquí, y con el botón de inicio de sesión ahora convertido en un botón de cierre de sesión.
Por lo tanto, en este punto, usted debería ser capaz de ver sus favoritos.
Y en este caso, ya que no tenemos ningún favorito, por
lo que estará vacío en este punto.
Permítanme volver al menú y luego agregar un par de elementos a mis favoritos.
Así que agregaré este plato a mis favoritos, por lo que cuando haga clic en este plato,
inmediatamente verá el icono convertirse en un corazón lleno.
Y permítanme también seleccionar un plato más y añadirlo a mis favoritos.
Anuncio entonces ahora cuando vaya a los mis favoritos, verá un par
de platos añadidos a sus favoritos, como era de esperar.
Y de nuevo, puede eliminar los platos haciendo clic en la
cruz para eliminar el elemento de su lista de favoritos, como se muestra aquí.
Ahora también podemos añadir, como te das cuenta, podemos ir a cualquier plato y
luego agregar comentarios sobre ese plato.
Así que permítanme añadir un comentario aquí.
Y en el momento en que envíe el comentario, verá inmediatamente que
su comentario se mostrará aquí con el nombre del autor también incluido aquí.
Y con esa fecha como se muestra aquí.
Por lo tanto, puede ver que el envío de comentarios del usuario
será compatible con cualquier plato específico.
Por lo tanto, así es como su aplicación funciona con esa
Firebase como back-end como servicio.
Ahora, por supuesto, debe preguntarse, ¿cómo rediseñamos nuestra aplicación para
hacer uso de Firebase en lugar de usar el
servidor estándar Express MongoDB que hemos construido anteriormente?
Para configurar la aplicación para que se comunique con el servidor Firebase,
debe instalar el módulo Firebase.
El módulo Firebase, como puede ver aquí, proporciona la herramienta y la
infraestructura que le permiten comunicarse con el servidor Firebase.
Y para instalar esto en su aplicación,
escriba la instalación menos guardar firebase.
Ahora, ¿cómo hacer uso de estos?
Lo ilustraré corriendo rápidamente a través del código modificado
donde hacemos uso de Firebase para modificar la aplicación que hemos desarrollado
anteriormente para hacer uso del servidor Firebase como back-end como servicio.
Vamos a hacer un rápido recorrido por nuestra aplicación React modificada para entender
cómo se ha reconfigurado para comunicarse con nuestro servidor Firebase.
Comenzaremos nuestro viaje en el archivo package.json.
Y en el archivo package.json,
notará que he agregado en el módulo npm de Firebase a esto.
Y así, cuando clonas el repositorio de Git y haces la instalación del hilo,
el módulo Firebase se instala automáticamente en tu aplicación.
Si estaba configurando una nueva aplicación React para
comunicarse con el servidor,
entonces necesita instalar explícitamente el módulo Firebase en su aplicación.
Ahora, después de esto, notará cambios en la carpeta Firebase.
Aquí ya hemos visto el archivo de configuración.
El otro archivo que notará aquí se llama firebase.js.
Ahora es aquí donde configuramos nuestra aplicación para comunicarse con
el servidor Firebase.
Así que estamos importando la configuración aquí.
Y luego importando base de fuego desde base de fuego.
Y luego inicia la aplicación aquí suministrando la configuración a Firebase,
así que aquí es donde proporciona toda la información de configuración para
que su cliente pueda comunicarse con el servidor Firebase.
Además, estoy exportando algunas de estas exportaciones de
aquí llamadas auth, fireauth y así sucesivamente.
Estos voy a hacer uso de en los creadores de acción con el
fin de comunicarse con mi servidor Firebase.
Ahora, después de esto, las modificaciones principales estarán en el archivo ActionCreators.
Ahora no he agregado en ninguna acción nueva, sino que toda la comunicación
con el servidor ahora se modifica para comunicarse con nuestro servidor Firebase.
Así que en lugar de usar el fetch, como hicimos antes,
ahora vamos a usar firestore.
Como puede ver, he importado el auth, firestore,
fireauth y firebasestore del módulo firebase que
he configurado anteriormente en la carpeta firebase.
Y luego todo esto me permitirá comunicarme con mi servidor Firebase.
Para obtener una colección de mi Firebase,
simplemente decimos firestore.collection y luego proporcionamos el nombre de la colección.
Y luego puede agregar a la colección diciendo, agregue, como puede ver aquí,
que toma el elemento específico que está agregando a su colección allí.
Así que ese es el documento que vamos a agregar a nuestra colección.
Así que esto es para el comentario de la publicación, como se puede ver aquí.
Y cuando publique eso, le proporcionará de nuevo un DocRef,
que es la referencia al documento,
que luego puede usar para ir y buscar el documento de su servidor.
Ahora la forma en que funciona Firebase es que proporcionará
el ID por separado del contenido real de los documentos.
Por lo tanto, Firebase mantiene el ID y los datos del documento por separado.
Así que aquí tengo que combinar explícitamente los dos juntos en
un objeto JavaScript aquí, llamado comentario aquí.
Entonces, como ve en el documento, por lo que nota que cuando
inserto un elemento en una colección, devuelve un DocRef aquí.
Y desde el DocRef, puedo obtener la identificación del documento.
Y lo que estoy haciendo aquí es ir a
buscar el documento correspondiente aquí.
Y luego, una vez que el documento es recuperado, ahora, por supuesto, el documento debe existir,
por lo que esto debe ser siempre cierto, porque acabamos de insertar el documento.
Pero solo por el bien de la integridad, estoy haciendo un chequeo explícito para eso.
Y luego, después de eso, los datos que están en el documento
se obtienen diciendo doc.data, como se ve aquí.
Y luego el id del documento se obtiene por doc.id.
Así que estos dos son separados.
Pero dentro de nuestro código React, siempre hemos almacenado el id y
los datos juntos como un solo documento JSON aquí, o un objeto JavaScript aquí.
Entonces, es por eso que estoy combinando los dos juntos
en un solo objeto JavaScript aquí haciendo esto.
Me verás haciendo esto repetidamente, por ejemplo,
para promociones audaces, etc., también en ActionCreators.
Y luego, después de eso, estoy agregando el comentario en mi tienda Redux aquí,
y el resto del código permanece como tal.
Del mismo modo, para ir a buscar platos,
verás cómo vamos a buscar varios platos de la base de Firebase.
Así que estamos viendo firestore.Collection platos obtener y obtener los platos.
Ahora, cuando obtengas eso, entonces me dará un valor de instantánea,
que es la instantánea del estado actual de esta colección, y de eso,
tengo que entrar y recuperar todos y cada uno de los platos.
Y entonces estoy reconstruyendo mi variedad de platos aquí.
Ahora note que, como dije, el id y los datos son separados, por lo que
necesito combinarlos, porque esa es la forma en que uso los datos en mi
aplicación React, así que estoy introduciendo eso en la matriz de platos.
Y luego finalmente devolver los platos que luego se insertarán en mi
tienda Redux aquí.
Así que este tipo de cambios se han realizado en ActionCreators.
Ahora el proceso de inicio de sesión y cierre de sesión será manejado abajo aquí abajo.
Así que para el inicio de sesión, la autenticación que hemos importado desde Firebase,
la autenticación es la que me permite hacer el inicio de sesión y cierre de sesión.
Por lo tanto, si está iniciando sesión con correo electrónico y contraseña,
se proporciona con este método llamado signinWithEmailAndPassword.
Y luego proporciona el correo electrónico y la contraseña como los dos parámetros aquí.
Y luego eso le permitirá iniciar sesión.
Y cuando inicia sesión, la autenticación proporciona este objeto llamado CurrentUser en la autenticación.
Entonces obtienes la información del usuario diciendo auth.currentUser aquí.
Y también estoy almacenando la información del usuario en mi base de datos.
Ahora no estoy rastreando explícitamente ningún token y
cosas por el estilo porque eso es rastreado automáticamente por auth para mí,
que es proporcionado por el módulo npm de Firebase.
Así que solo estoy aprovechando eso para rastrear el uso actual.
Si el usuario actual es nulo, entonces sé que mi cliente
no tiene ningún usuario iniciado sesión en el servidor.
Y de manera similar, para cerrar la sesión del usuario, simplemente digo auth.signout.
De nuevo, la documentación de cómo hacer uso del
módulo Filebase npm está disponible en la documentación de Firebase.
Así que puede buscar fácilmente eso para entender cómo aprovechar
Firebase para hacer uso de todas estas diferentes funciones
que están disponibles desde el módulo npm de Firebase.
Además, para los favoritos, o bien publicamos un favorito y
entonces necesitas publicar elementos, por lo que dirías agregar, y
cuando necesites obtener un elemento, dirás obtener.
E incluso puede obtener un elemento de un documento específico en las colecciones.
Si desea un documento específico en la colección, diríjase .doc.
Y luego suministra la identificación del documento aquí.
Así es como se puede obtener un documento específico.
También elimine favoritos, y busque favoritos y así sucesivamente.
Ahora, para que los favoritos se almacenen en mi Firebase,
los favoritos se almacenan como el ID de usuario y el ID del plato aquí.
Ahora firestore en sí no tiene ninguna forma de rellenar la
información del plato en el ID del plato.
Así que sólo estoy buscando toda la información del plato,
por lo que este es cada favorito es un par, usuario y par de ID de plato.
Así que sólo estoy metiendo eso en mis favoritos aquí.
Pero entonces eso también significa que necesito modificar mi componente favorito para
que pueda usar el ID del plato y luego indexar en los platos que
se almacenan en mi tienda Redux, y obtener la información del plato.
O la alternativa sería ir al servidor y luego buscar la información.
Pero como ya tengo los datos sobre los platos en mi tienda Redux,
porque ya he hecho los platos para buscar toda la información
sobre los platos.
Estoy directamente entrando en el objeto platos en mi Redux arrancó y
buscar esta información.
Por lo tanto, esto también significa que hay modificaciones en el componente principal.
En el componente principal, notarías que cuando hago el favorito aquí para
el detalle del plato, simplemente tendría que comparar el plato con ese DisHID.
Entonces el plato aquí en mi favorito es el Dishid en sí, así que
solo necesito hacer la comparación.
Por lo tanto, habrá un cambio menor en esta línea en el DishiD.
Y también notarás que cuando llamo
a los favoritos, además de suministrar sus favoritos,
también suministro los platos como uno de los accesorios para mis favoritos.
Entonces ese es otro cambio que notará en el componente principal.
Y de manera similar, en el componente favorito,
notará que dentro del componente favorito abajo aquí,
notará que, cuando esté representando el componente favorito.
Entonces, justo aquí en esta función aquí, const favoritos,
lo que estoy haciendo es entrar en los platos favoritos,
platos es una variedad de todos los platos aquí, así que mapeo a través de eso.
Así que mira cada Dishid, luego de los platos,
filtré ese plato en particular.
Y luego obtuve el DishiD, así que
aquí me verás usando el filtro de matriz de JavaScript aquí.
Filtrará esa información específica del plato y
luego renderizará ese plato en particular.
Así que este es un trabajo adicional que necesito hacer en mi
componente favorito para renderizar cada uno de los platos allí.
Entonces, tal tipo de modificaciones menores que notará en un par de los componentes,
específicamente el detalle del plato, el favorito y el componente principal.
Ahí es donde se han realizado algunos cambios menores para facilitar que la
aplicación React pueda aprovechar el servidor Firebase.
Así que esta es una revisión rápida de cómo
mi aplicación React se ha modificado para comunicarse con mi servidor Firebase.
Ahora, como con Angular, también teníamos el Angularfire, que
nos proporcionaba una forma de aprovechar junto con Firebase para comunicarnos con el servidor.
React no tiene ninguna contraparte de este tipo, así que estoy usando directamente el
módulo npm de Firebase que proporciona la base básica para acceder al servidor Firebase.
Y luego aprovechando las funciones que proporciona para comunicarse con mi
servidor Firebase. Dedique
algún tiempo nuevamente a revisar este código para entender cómo
he aprovechado los módulos npm de Firebase para comunicarme
con mi servidor Firebase que he configurado en el ejercicio anterior.
Con esto, le he dado una visión general rápida de cómo puede configurar su
aplicación React para interactuar con Firebase back-end como servicio, y
luego ser capaz de admitir varias operaciones que tiene dentro de su aplicación.
Ahora, con esto, completo este ejercicio en particular donde he
ilustrado en esta lección sobre back-end como servicio y
también he demostrado Firebase como un ejemplo de back-end como servicio.
[ MÚSICA]