En el ejercicio anterior,
ya habíamos configurado nuestro backend Firebase como
servicio con el nuevo proyecto y también hemos configurado una gran cantidad de
datos en nuestra base de datos y luego hemos configurado nuestro almacenamiento y hemos
configurado nuestro servidor Firebase para que actúe como el back-end de nuestra aplicación Angular.
En este ejercicio, vamos a ver una versión modificada de
nuestra aplicación Angular que hace uso del backend de Firebase como
servicio para obtener los datos y
también almacenar información para los usuarios en los servidores.
Además, aprovecharemos
el soporte de autenticación que ofrece Firebase para autenticar a
los usuarios utilizando 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 donde
le he proporcionado la versión Angular Firebase de nuestra aplicación Angular.
Así que escriba, git clone
https://github.com/jmuppala/confusion-Angular6-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 de confusión Angular Firebase que se creará en este punto y
luego lo haría observe que un montón de archivos ya están instalados allí.
Vamos a seguir adelante y hacer una instalación npm para instalar
todos los módulos de nodo de los que depende esta aplicación angular.
Esta versión también instalará
dos módulos de nodo adicionales llamados Firebase y luego Angular fire dos.
Voy a explicar un poco más sobre estos dos módulos de nodo más adelante en este ejercicio.
Una vez completada la instalación del proyecto,
abra el proyecto en un editor y luego en el proyecto,
vaya a la carpeta de entornos de origen y
luego abra el archivo environment.ts y en el archivo environment.ts,
verá un conjunto de configuración de Firebase
que necesita configurar con su propia configuración del servidor Firebase.
Como hemos visto en el ejercicio anterior,
podemos obtener toda esta información cuando hacemos clic en
este botón aquí llamado «Agregar Firebase a su aplicación web» y luego
copiar esta información y luego pegar esta información
en su archivo environment.ts para
reemplazarlos con su Configuración
de servidores Firebase para toda esta información y una vez que se haya completado,
puede iniciar su aplicación angular escribiendo «ng serve» en el símbolo del sistema.
Una vez que su aplicación angular se compila con «ng serve»,
vaya a un navegador y luego escriba localhost: 4200 para cargar en
su aplicación angular y notará que su aplicación angular está compilada
y luego cargada en su navegador como antes.
Por lo tanto, una vez que su aplicación Angular esté en funcionamiento,
se dará cuenta de que esta versión de
la aplicación Angular va a hacer uso del servidor Firebase que ha configurado en
el ejercicio anterior y aquí verá la página «Inicio»,
la página «Acerca de» como vemos aquí y la
« Menú» y la página «Contacto» y, obviamente, dado que no estamos conectados actualmente,
la página «Mis Favoritos» mostrará un error diciendo que ningún usuario ha iniciado sesión.
Por lo tanto, vamos a iniciar sesión nosotros mismos.
Permítanme volver a la «Página de inicio» y luego nos conectaremos nosotros mismos.
Por lo tanto, cuando haga clic en el botón de inicio de 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 adicional 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 por este servidor Firebase.
Por lo tanto, permítanme seguir adelante
y autorizar esta aplicación y luego una vez que se complete la autorización,
entonces verá que su
aplicación angular basada en Firebase se iniciará y en la esquina derecha,
inmediatamente verá su nombre que se
muestra aquí y con el «Inicio de sesión» ahora convertido en un botón de «Cerrar 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 en «Mis favoritos».
Entonces, agregaré este plato a mis favoritos.
Por lo tanto, cuando haga clic en este plato,
inmediatamente verá el icono convertirse en un corazón lleno y déjame también seleccionar
un plato más y agregarlo a «Mis
favoritos» y luego ahora cuando vaya a «Mis favoritos»,
verá el par de platos añadidos a
sus favoritos como lo haría esperar y de nuevo,
puede eliminar los platos haciendo clic en el botón «Eliminar» alternar aquí y luego haga clic en
la cruz para eliminar el elemento de su lista de favoritos como se muestra aquí.
Ahora, también podemos agregar como se dio cuenta,
podemos ir a cualquier plato y luego agregar comentarios sobre ese plato.
Por lo tanto, permítanme añadir un comentario
aquí y en el momento en que envíe el comentario,
inmediatamente verá que sus comentarios se mostrarán aquí con
el nombre del autor del comentario también incluido aquí y con la 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.
Permítanme agregar un favorito más y así este usuario tendrá un par de favoritos.
Permítanme «Cerrar sesión» este usuario.
Vuelva a la «Página de inicio» y luego «Cerrar sesión» de este usuario.
Ahora iniciaremos sesión usando la otra cuenta.
Por lo tanto, yo- Yo había configurado
esta cuenta de contraseña de correo electrónico antes y así vamos a
iniciar sesión como este otro usuario y una vez que el otro usuario está conectado,
déjame volver a ir al «Menú» y añadir un par de elementos en
los favoritos para este usuario en particular
y así cuando vuelvas a «Mis favoritos»,
verá estos elementos listados para el segundo usuario.
Ahora, de manera similar para este usuario,
permítanme volver a enviar otro comentario de este usuario.
Por lo tanto, y
vería que los comentarios enviados por el segundo usuario también se agrega a la aplicación.
Por lo tanto, así es como su aplicación Angular funciona
con Firebase como back-end como servicio.
Ahora, por supuesto, debe preguntarse,
¿cómo rediseñamos nuestra aplicación Angular para hacer uso de Firebase en lugar
de usar el servidor Standard Express más MongoDB que hemos construido anteriormente?
Para configurar su aplicación Angular para que se comunique con el servidor Firebase,
hay dos módulos de nodo que necesita instalar en
su aplicación Angular y uno de ellos es el módulo Firebase.
El módulo Firebase como se ve aquí,
proporciona las herramientas e infraestructura que le permite comunicarse
con el servidor Firebase e instalarlo en su aplicación
, escriba, npm install menos guardar Firebase.
Ahora, junto con esto,
hay otro módulo llamado Angular Fire 2.
Así que el fuego angular 2.
Además, de nuevo he proporcionado los enlaces a estos dos módulos en los recursos adicionales.
El AngularFire 2 es la biblioteca oficial
de soporte Firebase y Angular y como puede ver,
es un soporte basado en observable para archivos Angular.
Por lo tanto, esto funciona para agregar al módulo npm de Firebase y luego
le da una interfaz basada observable que podemos usar en su aplicación angular.
Por lo tanto, estaríamos aprovechando el AngularFire 2.
Por lo tanto, para hacer uso de AngularFire2,
debe instalar tanto Firebase como AngularFire 2.
Por lo tanto, en una sola toma,
instale ambos en su aplicación Angular.
Ahora, la versión de la aplicación Angular que he proporcionado para usted
instala automáticamente ambos como verá cuando examine el archivo package.json.
Ahora, cómo hacer uso de estos dos,
ilustraré que al ejecutar rápidamente a través
del código modificado para los servicios y un par de componentes donde
hacemos uso de Firebase y AngularFire2
para modificar la aplicación Angular que hemos desarrollado
anteriormente para hacer uso del Servidor Firebase como back-end como servicio.
Para entender más acerca de cómo
aprovechamos Firebase y AngularFire 2 dentro de nuestra aplicación Angular,
nuestra primera parada es en el archivo package.json.
Así que en el archivo package.json,
notará que he instalado AngularFire2 aquí y también hemos instalado
Firebase para usar en esta versión de la aplicación Angular que suministro para usted.
Por lo tanto, tenga en cuenta que estos dos se instalarán automáticamente cuando escriba «npm
install» después de clonar este repositorio git que le he proporcionado.
Si estaba comenzando con una nueva aplicación Angular,
entonces debería instalar tanto AngularFire 2 como Firebase
para aprovechar el uso de Firebase como back-end como servicio.
Ahora, habiendo instalado estos dos,
vamos a aprender cómo hacemos uso de estos dentro de nuestros servicios.
Por lo tanto, la mejor manera de aprender a hacer uso de
ambos es visitar algunos de los servicios que hemos
configurado en nuestra aplicación y entender cómo
aprovechamos el uso de AngularFire2 y Firebase.
Por lo tanto, comenzaremos con el archivo dish.service.ts.
Por lo tanto, si va al archivo dish.service.ts,
notará que aquí,
en este servicio de platos,
me verá importando este AngularFiRestore, AngularFireRestoreDocument
y AngularFireRestoreCollection de AngularFire a Firestore aquí. Por lo
tanto, eso trae lo que necesito de mi módulo npm AngularfiRestore,
también notarás que estoy importando todo desde
Firebase/aplicación como Firebase en mi servicio de platos aquí.
Por lo tanto, una vez que hayamos importado estos dos,
echemos un vistazo rápido a cómo reconfiguramos nuestro servicio de platos aquí.
Por lo tanto, si ingresas al servicio de platos,
notarás que ya no estoy usando el cliente HTTP.
En cambio, estoy inyectando AFS que es el AngularFiRestore en el constructor aquí.
El AngularFiRestore es el que me da
acceso al backend de Firebase como servicio.
Ahora, también recuerde que ya hemos configurado todos los detalles de
nuestro servidor y también el proyecto de almacén de archivos en el archivo environment.ts anteriormente.
Por lo tanto, debería haber configurado esta información ya allí
sobre cómo su aplicación Angular debería aprovechar
su proyecto basado en Firestore en
su servidor Firestore para acceder a los datos que ha configurado allí.
Por lo tanto, esto me dará acceso a mi
Firestore en la nube dentro de mi proyecto de Firebase que he configurado.
Ahora, AuthService es, por supuesto, el mismo Authservice que hemos utilizado antes,
pero se ha modificado para hacer uso del soporte angular para Firebase.
Visitaremos AuthService para saber cómo se ha actualizado.
Ahora, el AuthService nos dará acceso a
este método llamado getAuthState que volverá en un observable.
Este observable, cuando nos suscribimos,
nos dará la información como usuario que contiene la información del usuario.
Por lo tanto, obtendré eso y luego configuraré el CurrentUser en mi aplicación
como el usuario devuelto por este observable aquí.
Por lo tanto, cuando
visitemos AuthService, aprenderemos lo que este getAuthState devolverá para
nosotros y así la información de
CurrentUser se puede obtener de cualquiera de
los otros servicios porque ya estamos inyectando AuthService aquí.
Ahora, echemos un vistazo a cómo se implementa el método GetDages aquí.
Ahora, anteriormente en el método
GetDails, estábamos usando el cliente HTTP para acceder al servidor en URL base /platos.
Ahora, en este caso,
para acceder a una colección en mi servidor Firebase, diremos esto.afs.
Por lo tanto, esto es lo que AngularFire2 nos proporciona.
AFS como ves es el AngularFiRestore que hemos inyectado aquí y así decimos
this.afs.collection y aquí
especificaremos la colección específica a la que estamos accediendo aquí.
Recordemos que habíamos configurado los platos, las promociones
y las colecciones de líderes en mi servidor Firebase.
Por lo tanto, esto directamente me da acceso
a mi colección de platos aquí y de la colección de platos,
puedo hacer.ValueChanges que
devolverá toda la información en la colección de negocios para mí,
o puedo hacer.SnapshotChanges que
devolverá información adicional incluyendo el ID de los platos.
Entonces, si en lugar de hacer SnapShotChanges,
si digo
ValueChanges, devolverá solo la información del plato pero no devolverá los
ID de los platos, pero ya que necesitaré los ID de mis platos,
así que es por eso que estoy usando el.SnapshotChanges en este caso.
Entonces, cuando se llame a .snapshotChanges,
esto volverá a medida que vea un observable que
mapeo y por lo tanto el valor de retorno que se llama como acciones y estas acciones
, de nuevo, será un observable que mapearé cada acción en
estas acciones y luego extraigo los datos de la acción que es regresó aquí.
Por lo tanto, la acción es un valor que se devuelve para cada una de las acciones
y esta acción contiene una carga útil y contiene dentro de ese campo oscuro aquí.
Ahora, esto es algo que he descubierto leyendo
la documentación para AngularFire2 y
entonces cuando llamamos a esta función de datos en esta action.payload.doc,
esto me dará los datos.
Los datos para ese plato específico que se
obtiene de mi colección de platos en el lado del servidor.
Así que cada documento allí será devuelto aquí y
luego obtengo el ID para eso diciendo action.payload.doc.id
Así que ahí es donde se
llevará el ID de eso y luego uniré a los dos juntos y devolveré
esto como un documento de plato a mis diversos componentes desde allí,
lo haré llamar a este método GetDages.
Por lo tanto, como recordarán,
desde el componente de menú,
estoy llamando al método GetDages para obtener
la información sobre todos los platos de mi colección.
Colección. Por lo tanto, cada uno de estos platos que se devuelve como un documento se reconstruirá en
un objeto JavaScript con el ID insertado aquí y también
los datos que se extraen de esta acción payload.doc.data.
Ahora bien, esto es algo que aprendes leyendo la documentación de AngularFire2.
Ahora, como ya he hecho esa parte,
le estoy mostrando el código exacto que se supone que debe
usar para extraer los datos y luego proporcionar
estos datos de vuelta a su componente que va a llamar al método GetDails aquí.
Por lo tanto, haciendo esto para cada uno de los documentos allí,
este documento será reconstruido en
el objeto de plato que
usamos en nuestra aplicación Angular y así podemos incluso obtener acceso a la ID.
Si solo hace cambios de valor,
simplemente devolverá todos los documentos en sí, pero sin los ID de los documentos.
Por lo tanto, este trabajo adicional debe hacerse dentro de su servicio para
devolver la información de la manera correcta para
que MyComponents pueda hacer uso de esta información.
Del mismo modo, para un método GetDish,
así que observe cómo estoy accediendo a la información de un plato específico.
Una vez más, diremos this.afs y luego notarás que soy
saying.doc y luego aquí para el método the.doc,
proporciono platos slash y luego el ID del plato específico.
Ahora, la razón por la que había proporcionado ID,
el ID aquí viene como el parámetro para el método getDish aquí.
Ahora, para que se proporcione esta ID,
necesito poder proporcionar esa ID en
el método GetDails para que cuando se construya mi menú,
cada plato tenga su ID adjunta allí.
Esa identificación se pasa aquí y por lo tanto voy a acceder al documento en este punto.
Por lo tanto, el AngularFire2 le permite acceder a
un documento específico que está dentro de una colección diciendo la barra diagonal del nombre de la colección,
más el ID del documento o puede decir this.afs.collection plats.collection al igual que escuchó, los
platos de la colección y then.doc y luego proporcionar el documento y el ID entre paréntesis allí.
Entonces, esa es otra forma de abordar un plato específico.
Una vez más, me estoy suscribiendo a SnapShotChanges y esto devolverá una acción que luego se
mapea nuevamente en el mismo formato para
construir el objeto dish aquí junto con el ID aquí.
Ahora, Firebase mantiene el ID separado del documento en
sí y es por eso que tengo que hacer explícitamente
esta reconstrucción para obtener
el documento de plato de una manera que sea utilizable por MyComponents.
Luego construí mi propio servidor usando Express y MongoDB,
el ID estaba automáticamente allí en el documento en sí y por lo
que fue muy fácil recuperarlo y proporcionarlo de nuevo al lado del cliente.
Ahora, para GetFeaturedDish,
recuerde que para GetFeaturedDish,
estamos buscando aquellos platos donde la característica se establece en true.
Ahora, aquí es donde AngularFire2 nos permite
construir una consulta y proporcionar esa consulta aquí para esa colección.
Aquí estoy diciendo estos platos de colección.afs aquí,
así que todavía estoy usando la colección, pero luego mire
el segundo parámetro para esta llamada aquí.
Esto dice ref donde la referencia se refiere a cada documento que está en esta colección.
Este ref dice el ref y aquí es donde puedo
usar esta configuración de consulta escucha para que dice.where.
Por lo tanto, lo que significa que cada uno de los documentos donde el destacado,
como se puede ver, la sintaxis es bastante fácil de seguir aquí que dice donde aparece.
Ahora, observe que la característica se suministra como una cadena aquí,
y luego la siguiente,
el operador es igual a, por lo que incluso puede decir
mayor que, menor que, mayor o igual que menor o igual a cualquiera de estas cosas,
pero observe que eso debería estar dentro de las citas aquí y luego dirá verdadero.
Por lo tanto, dondequiera que la propiedad destacada del documento esté establecida en true,
extraiga todos ellos.
Por lo tanto, esta consulta extraerá solo aquellos documentos
de la colección de platos donde la característica se establece en true,
y luego devolverá solo esos documentos de esa colección aquí,
y desde allí voy a cambiar las instantáneas y esto
devolverá una matriz de documentos y desde allí los mapearé
en documentos de plato individuales y luego ya que me he
asegurado de que solo uno de esos documentos tendrá la característica establecida en verdadero.
Por lo tanto, solo devolverá uno de ellos, pero lo devolverá como una matriz.
Entonces, es por eso que estoy construyendo esto
con corchetes cuadrados cero el primer elemento de la matriz,
y de hecho contendrá solo un elemento porque solo un elemento en mi colección
coincidirá con esta consulta en particular que he configurado aquí con la onda aquí.
Hay otras configuraciones de consulta aquí también puede usar algo llamado orden por.
Por lo tanto, puede ordenar la colección por una determinada propiedad,
y algún otro conjunto de opciones de consulta que están disponibles.
Ahora, esto es compatible con Firebase en su nube Firestore,
y eso es lo que podemos aprovechar usando AngularFire2 para diseñar
el código en su aplicación Angular para hacer la consulta desde el lado del cliente.
Por lo tanto, esto va a devolver el plato de características específico.
Ahora, de nuevo getDishid va a ser similar a lo que hemos hecho antes.
Por lo tanto, no hay modificaciones allí.
Ahora, para el PostComment de nuevo
porque Firebase con la nube Firestore beta,
no tiene el concepto de población,
y así sucesivamente que hemos visto antes. Por
lo tanto, lo que voy a hacer por los comentarios es que voy a publicar estos comentarios como
una colección para la cual se encierra dentro de cada plato en sí.
Por lo tanto, cada plato tendrá su propia colección de comentarios sobre ese plato específico.
Cuando publique el comentario voy a usar el DishiD,
y luego la información del comentario.
Entonces, lo que hago aquí es que primero
consultaré los platos y luego obtendré ese plato en particular.
Por lo tanto, puede ver que estoy usando la otra forma de consultar un documento específico.
Entonces, aquí estoy diciendo esta afs.collection ('platos') .doc DishID.
Por lo tanto, puedo usar esta forma de acceder a un documento específico si quiero.
La otra forma, por supuesto, ya ha visto con
el método GetDish donde digo platos doc slash más ID.
Por lo tanto, dos formas diferentes de abordar un documento específico dentro de
una colección aquí y luego DISHID y luego colección y comentarios.
Por lo tanto, de esta manera se dice en
esta colección para este documento específico con ese Dishid,
hay una colección que se incluye en
este documento y que la colección tiene el nombre de comentarios.
Por lo tanto, este es un anidamiento de una colección
dentro de un documento que está en otra conexión de nivel superior.
Por lo tanto, este tipo de anidación de colecciones está permitido por
Firebase Cloud Store Beta hasta 100 niveles de profundidad si así lo desea.
Así que, dentro de esta colección,
voy a añadir.
Entonces, ¿cómo se agrega un documento a una colección?
Para agregar un documento a la colección,
utilice el método add de una colección aquí.
Por lo tanto, puede ver que en los comentarios de la colección,
estoy haciendo una adición aquí y luego
este es el documento real que se agregará aquí.
Por lo tanto, en el documento en sí,
verá que tengo la propiedad del autor aquí donde he configurado el ID actual,
y también configuré el nombre para el autor aquí,
solo sirvo la primera vez aquí, así que aquí digo este nombre para mostrar de usuario actual.
Si el nombre para mostrar es verdadero, entonces lo estableceré en este nombre para mostrar de usuario actual.
Si la cuenta del usuario no tiene un nombre para mostrar como adjunto, entonces simplemente
usaré este correo electrónico de usuario actual como la propiedad de nombre aquí.
Por lo tanto, este documento que contiene el comentario,
automáticamente también lleva este campo de nombre
y eso es lo que voy a usar para renderizar
la información cuando renderice los comentarios en mi componente DishDetail.
Por lo tanto, observe que en realidad estoy duplicando información aquí en cada uno de los comentarios.
Pero está bien, ya que estos se almacenan como
documentos Json en Firebase, está bien
duplicar parte de la información en los comentarios aquí.
Pero si desea más detalles del usuario actual,
ya tiene una referencia a la identificación del usuario aquí para que pueda ir a buscar
el documento para el usuario en particular y luego
obtener más información del usuario si lo desea.
Ahora, cuando utilicé Mongo DB más Mongo,
viste que solo usaré el ID del usuario actual para
el autor y luego usaré el relleno para rellenar esta información.
Ahora Cloud Firestore beta en este momento no tiene
ningún concepto de este poblado por lo que puedo ver
en la documentación, tal vez una versión futura podría admitir una forma de
extraer información de otro documento y
llenarla automáticamente en el documento actual.
Cuando eso sucede, entonces este código tendrá que ser modificado para aprovechar eso.
Pero ahora mismo como lo veo,
Firestore beta no tiene la capacidad de
rellenar información de otro documento en el documento actual.
Así que es por eso que solo estoy replicando esa
información que realmente necesito cuando hago el comentario en
mi componente de detalle de platos aquí y luego abajo
aquí puedes ver que tengo la calificación y el comentario aquí y luego también,
note que estoy creando
estos dos campos adicionales en mi comentario aquí llamados «CreateDat» y «UpdateDat».
Observe cómo estoy poniendo la marca de tiempo para el «CreateDat».
Firebase, ahora qué es esta Firebase que estoy usando aquí,
esta Firebase es exactamente lo que importé aquí desde la aplicación Firebase.
Así que eso me proporciona como se ve aquí abajo aquí abajo,
que me proporciona este mismo valor de campo Firestore.
Entonces, esta llamada a la marca de tiempo del servidor de valores de campo de fuego,
devolverá la marca de tiempo actual para
mí y esa es la información que voy a almacenar en el «CreateDat».
Ahora, cuando inserté todos los documentos aquí,
vio que creé manualmente este campo «CreateDat» para cada uno de los documentos.
Ahora, esta es una forma de hacer lo mismo desde
nuestro código angular en
nuestro lado del cliente y lo mismo para el campo «UpdateDat» que verá aquí.
Por lo tanto, cuando publique un nuevo comentario,
verá que así es como agregará un nuevo comentario en ese servidor.
Ahora, esto devuelve una promesa y esa es la información
que estoy usando aquí para construir esta promesa aquí.
Luego, este otro método aquí diciendo «getComments»,
este «getComments como se puede ver está accediendo a los platos de la colección AFS,
doc Dishid y luego los comentarios de la colección y el aviso de que aquí,
no voy a requerir cada ID de comentarios en
sí mismo que no voy a usar en mi Angular petición de todos modos,
así que en lugar de usar cambios de instantáneas,
solo estoy usando cambios de valor y esto devolverá
todos los documentos de esta colección de comentarios para este documento en particular
el DISHID de la colección de platos aquí y que serán devueltos
y estos comentarios voy a renderizar en mi componente de detalle.
Ahora, en Mongos, viste que el hecho de que incluyera el ID de usuario significa
que podría hacer copulación de esta información ahora con Firebase,
no hay forma de poblar la información común aquí,
por lo que estoy explícitamente yendo y luego rellenando los comentarios en
mi dishdetail para buscar todos los comentarios sobre
este plato en particular cuando los renderizo en el componente dishdetail.
Así que verás, que tuve que ajustar
un poco el código angular para lidiar con el hecho de que
Firebase no admite ciertas cosas que mongos admite
al menos en el momento en que Cloud Firestore beta no admite estas cosas,
y así que tuve que trabajar para lidiar con lo que Firebase me permite
almacenar y recuperar desde el sitio del servidor Firebase.
Ahora, también es interesante para nosotros hacer una visita rápida al servicio de Auth aquí.
El servicio Auth aquí de nuevo,
observe que en el servicio Auth aquí estoy importando este AngularFireAuth desde
el submódulo AngularFire a npm aquí.
Entonces, aquí puedes ver que estoy importando AngularFireAuth y esto
me da acceso al aspecto de autenticación de Firebase.
Ahora, veamos cómo funciona realmente la autenticación de Firebase desde nuestra aplicación angular.
Ahora comenzaremos eso mirando cómo se implementa el inicio de sesión.
Entonces, aquí es donde implemento el inicio de sesión,
donde estoy usando el correo electrónico y la contraseña.
Entonces, esta parte cuando importo AngularFireAuth aquí,
observe que el constructor estoy inyectando AngularFireAuth en mi constructor.
Entonces, esto inyectará el servicio AngularFireAuth
en mi constructor y esto me da acceso a
la autenticación de Firebase en el sitio del servidor para que pueda autenticar a los usuarios.
Por lo tanto, si quiero autenticar a un usuario que está iniciando sesión con el correo electrónico y la contraseña.
Esta función de inicio de sesión es la que se va a llamar
cuando escriba mi correo electrónico y contraseña en
el diálogo de inicio de sesión que aparece y luego
haga clic en el botón Enviar o el botón de inicio de sesión aquí,
esta función de inicio de sesión va a ser llamada y
la información del usuario, pero recupero de la componente de inicio de sesión se pasa aquí.
Entonces, cuando llegue aquí,
voy a usar este aFauth como ves, acabo de inyectarlo en el constructor,
y esto suministra este objeto Auth aquí,
que proporciona este método llamado «inicio de sesión con correo electrónico y contraseña».
Así que este inicio de sesión con correo electrónico y contraseña toma dos parámetros aquí como
cabría esperar el nombre de usuario o el correo electrónico y la contraseña aquí.
Así que estas dos piezas de información
lo estoy proporcionando como los dos parámetros para este inicio de sesión con correo electrónico y contraseña.
Por lo tanto, cuando haga clic en eso verá que
dice que el primero debe ser correo electrónico y el segundo debe ser contraseña.
Ahora, de la forma
en que lo he configurado, este objeto de usuario que viene contiene el correo electrónico en el
user.username aquí y la contraseña en la propiedad de contraseña del objeto de usuario.
Entonces, cuando se obtenga eso,
publicaré esta información y luego cuando esto se complete con éxito,
eso significa que el usuario está conectado correctamente,
si hay un error,
entonces capta el error aquí en este momento
no estoy haciendo nada específicamente con el error que puede
desea imprimir este mensaje de error para indicar que el usuario no puede iniciar sesión, etc.
Por lo tanto, no he implementado esa parte del trato aquí,
solo lo estoy dejando ahí si desea registrar
esta información en la consola, puede hacerlo cuando ocurren errores.
Ahora para cerrar sesión, en Firebase.
Una vez más tomamos la ayuda del aFauth que hemos inyectado y Auth en él,
y esto proporciona este método llamado «cerrar sesión»,
que cuando se llama cerrará la sesión del
usuario actualmente conectado y por lo que esa es una forma de manejar esto.
Ahora, debe preguntarse cómo manejo la parte de inicio de sesión de Google.
Ahora esto también se maneja con el AfAuth por lo que el módulo AngularFire2 que estoy usando,
nos proporciona esta información para estos métodos a través
del módulo de Firebase que también se usa en AngularFire2,
y por lo que esto proporciona este método llamado inicio de sesión con pop y cuando
iniciamos sesión con pop- aquí arriba note lo que estoy especificando aquí.
Por lo tanto, estoy diciendo «nuevo Firebase.auth.googleAuthProvider».
Ahora, también puede hacer Firebase.auth.facebookAuthProvider y otros.
Por lo tanto, como vio en el ejercicio anterior,
Firebase le permite iniciar sesión de terceros usando Google,
Facebook, GitHub y Twitter.
Por lo tanto, puede configurar estos adecuadamente,
ya que he activado solo la autorización de Google.
Así es como lo configuraré para usar
mi autorización de Google aquí y esta única línea de código que adjunté aquí,
es la que provoca la ventana emergente del navegador que me sugiere autorizar
mi Firebase a usar la autorización de Google usando mi cuenta de Google aquí.
Así que esa es la segunda parte que he preparado aquí.
Así que tenga en cuenta que el servicio Auth ha
simplificado significativamente en comparación con lo que hicimos con la versión anterior de esta aplicación.
Así que puede comparar las dos versiones para ver cómo esto es diferente de la otra.
Ahora, no sólo que este aFauth que hemos inyectado aquí,
parte AngularFireAuth que hemos inyectado aquí,
también proporciona este observable llamado «AuthState».
Este AuthState observable, se puede suscribir y este «AuthState» observable,
como se ve aquí,
que he declarado aquí como un firebase.user observable.
Así que esa es la información que se aplica aquí y también podemos configurar
otra variable aquí llamada usuario actual que es del tipo usuario Firebase aquí.
Por lo tanto, este afAuthState es un observable
al que puedo suscribirme y cada vez que este
authState cambie, el authState realiza un seguimiento del estado de autenticación
del usuario si el usuario ha iniciado sesión o cerrado sesión y si el usuario está conectado,
entonces esto se suscribirá me devolverá el y de
la información del usuario podemos recuperar una gran cantidad de información incluyendo el nombre para mostrar,
el correo electrónico, el ID de perfil y luego la
imagen de avatar para el usuario si se ha configurado para las cuentas específicas.
Todos estos serán suministrados automáticamente por el usuario.
Por lo tanto, cuando haga clic en «usuario» y luego punto,
verá que proporciona toda esta información para nosotros.
Por lo tanto, es un correo electrónico de nombre para mostrar,
si el correo electrónico está verificado o no, y así sucesivamente.
Así que algunas de las cosas que son de interés específico para nosotros.
URL de la foto que se puede utilizar para recuperar la información del avatar para el usuario,
ID del proveedor que especifica quién está
proporcionando esta información para usted esto sería ya sea ID de Facebook, ID de
Google y GitHub ID y así sucesivamente e información adicional incluso el token de actualización.
Así que ve un montón de información
que se pone a su disposición a través del objeto de usuario que es
devuelto por este Authstate cuando se suscribe a él
y también déjame llamar su atención sobre el UID el ID de usuario,
y esto es lo que se puede usar para indexar al usuario en nuestra aplicación.
Entonces ese es el servicio de autenticación de la forma en que
lo he configurado para usar la autenticación de Firebase en esta aplicación.
Por lo tanto, dos cambios que he reflejado para mostrar
cómo se modifican mis servicios para usar Firebase.
Gran parte de las actualizaciones que he hecho a mi aplicación Angular están todas
en los servicios para hacer uso de Firebase instalado.
Por lo tanto, debido al bebé estructurado de aplicación angular,
los componentes eran simplemente dependiendo de
los servicios y los servicios eran los que estamos hablando con el back-end.
Por lo tanto, gran parte de las actualizaciones que he hecho a
mi aplicación Angular implican simplemente actualizar estos servicios para
usar el back-end de Firebase de Google como un servicio con los dos módulos npm,
Firebase y AngularFireAuth aquí.
Por lo tanto, vería que gran parte de las actualizaciones está restringida a
todos estos servicios que tengo en la carpeta de servicios de mi aplicación Angular.
Por supuesto, necesitaba hacer un poco de
ajustes mínimos en el componente dishdetail
y el componente de encabezado para que funcione con Firebase.
Puede hacer una visita rápida al headercomponent.ts,
el headercomponent.html y el dishdetailcomponent.tsfile para ver cómo
ha cambiado el código entre la versión anterior
y la versión actual de la aplicación Angular,
la versión anterior, me refiero a la versión que usamos para
comunicándonos con nuestro
servidor X plus Mongo DB que utilizamos en el ejercicio anterior.
Ahora, un lugar más donde me verías haciendo modificaciones,
Curiosamente, es en el servicio favorito.
En el servicio favorito,
la forma en que almacené los favoritos del usuario,
es que los favoritos es una colección en
mi sitio de servidor y el favorito en sí contiene documentos.
Cada documento contiene el ID de usuario y el ID del plato.
Por lo tanto, un usuario en particular podría tener
múltiples documentos cada uno de ellos almacenando el ID de usuario y el ID del plato.
Por lo tanto, una colección de ellos juntos definirá todos los favoritos para un usuario en particular.
Descubrí que esta es una mejor forma de organizar estos datos en Firebase.
En nuestro MongoDB más mongos,
viste que había incrustado en una variedad de ID de plato en
el documento de favoritos y luego definir el esquema favorito de esa manera.
Aquí, estoy usando
un documento separado para rastrear cada uno de los favoritos para cada uno de los usuarios.
Ahora, debido a que Firebase admite consultas, por lo tanto,
puedo consultar mi Firebase y extraer todos los documentos que tienen los mismos ID de usuario,
que coinciden con el usuario que está conectado actualmente y luego
extraer los ID de plato correspondientes de los favoritos.
Luego iré y luego consultaré mi servidor
y obtendré la información del plato para cada uno de esos platos.
Por lo tanto, implica múltiples viajes al servidor con el fin de obtener
toda la información de mis platos favoritos antes de poder renderizar mi lista de favoritos.
Pero, esa es la mejor manera de hacer que Firebase funcione con mi aplicación Angular.
Tal vez, en una fecha futura,
Firebase Cloud Firestone podría extenderse para
permitir algo así como poblar que hicimos con mongos.
En cuyo caso, actualizaré el código para usar esa forma
de obtener toda la información del plato automáticamente.
Por lo tanto, la carga de construir este documento compuesto se desplazará al sitio del servidor.
En este momento, mi cliente está haciendo mucho del trabajo aquí.
Ahora, cuando entre aquí,
verá que en el método GetFavorites,
verá cómo estoy accediendo a mis favoritos aquí.
Entonces, cuando hago «GetFavorites», estoy consultando
esta colección de favoritos, pero noto que aquí,
digo «ref dónde está este ID de usuario».
Este ID de usuario que obtengo aquí.
Por lo tanto, en el constructor de mi servidor favorito,
me estoy suscribiendo a este servicio de autenticación el estado Obtener autenticación en el servicio de autenticación.
Por lo tanto, en el servicio de autenticación si entra,
verá este método llamado Obtener estado de autenticación aquí.
El estado Get Auth devuelve el this.authState,
que he definido allí.
Así que, esto será un observable como usted me ve declarando aquí.
Entonces, ese observable es el que voy
a usar dentro de mi servicio favorito y luego suscribirme a eso.
Por lo tanto, cada vez que la información del usuario cambie esto se reflejará automáticamente aquí.
Entonces, vio que incluso en la aplicación anterior había usado un observable,
para reflejar la información del usuario en mi componente de encabezado.
Tipo de enfoque similar,
que estoy usando en mi componente favorito aquí,
para obtener el ID de usuario para el usuario que está conectado actualmente.
Por lo tanto, cuando consulto la colección My Favorites,
consultaré y extraeré solo aquellos documentos donde el usuario coincide con esto.
Entonces solo estoy usando los cambios de valor aquí.
Por lo tanto, solo estoy extrayendo todos los documentos,
que no me importa la identificación del documento favorito en este momento.
Por lo tanto, sólo estoy extrayéndolos todos y usándolos.
Si el usuario no ha iniciado sesión y como puede ver,
estoy arrojando un error aquí con el dicho observable,
«ningún usuario ha iniciado sesión» eso es lo que se muestra en mi discurso favorito allí.
Ahora, los isFavorites también se actualizan aquí,
pero en los isFavorites lo que estoy haciendo es ir a la base de datos.
Ahora aquí, accederé a la base de datos diciendo,
«DB es igual a firebase.firestore».
Recuerde que estoy importando Firebase aquí,
importar estrella como Firebase aquí.
El Firestore angular en sí no me proporciona un método para
hacer múltiples consultas compuestas aquí.
El Firestore Angular o el Fuego Angular no me proporciona hacer eso.
Entonces, es por eso que tengo que recurrir al uso de Firebase Firestore.
Entonces, cuando digo Firebase Firestore,
esto me da una referencia a la base de datos Firestore y luego puedo entrar en esta base de datos
y luego decir «favoritos de la colección de DB» y luego puedo hacer múltiples consultas aquí.
Por lo tanto, estoy diciendo, .where user is this.wheredish es el ID del plato.
Por lo tanto, si quiero obtener un favorito específico.
Para comprobar si un plato específico es el favorito de un usuario obtengo
ese documento en particular donde el usuario y el plato coinciden con estos dos,
si no coinciden, entonces volverá con un vacío.
Entonces, que extraigo y luego devuelvo este valor aquí.
Ahora, luego publico favoritos,
ves cómo estoy haciendo esto estoy diciendo que estos favoritos de la colección AFS y voy a decir «agregar».
Mira el documento que estoy almacenando en mis favoritos.
El documento contiene el ID de usuario y el ID del plato.
Por lo tanto, estas dos piezas de información adjuntas aquí y si
no, entonces rechazará la promesa sin que ningún usuario haya iniciado sesión aquí.
Del mismo modo, para el favorito de eliminación que he implementado aquí. Dedique
algún tiempo nuevamente a revisar este código para entender cómo he
aprovechado los módulos Firebase y Angular fire to npm
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 Angular para interactuar con
Firebase back-end como servicio y luego poder
admitir varias operaciones que tiene dentro de su aplicación Angular.
Como he demostrado anteriormente,
esta aplicación Angular se parece exactamente a
la versión anterior de la aplicación Angular donde estábamos
usando nuestra propia versión de nuestro servidor Express MongoDB.
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.