1 00:00:03,950 --> 00:00:06,525 En el ejercicio anterior, 2 00:00:06,525 --> 00:00:09,990 ya habíamos configurado nuestro backend Firebase como 3 00:00:09,990 --> 00:00:15,120 servicio con el nuevo proyecto y también hemos configurado una gran cantidad de 4 00:00:15,120 --> 00:00:19,620 datos en nuestra base de datos y luego hemos configurado nuestro almacenamiento y hemos 5 00:00:19,620 --> 00:00:25,120 configurado nuestro servidor Firebase para que actúe como el back-end de nuestra aplicación Angular. 6 00:00:25,120 --> 00:00:29,160 En este ejercicio, vamos a ver una versión modificada de 7 00:00:29,160 --> 00:00:33,480 nuestra aplicación Angular que hace uso del backend de Firebase como 8 00:00:33,480 --> 00:00:37,500 servicio para obtener los datos y 9 00:00:37,500 --> 00:00:41,915 también almacenar información para los usuarios en los servidores. 10 00:00:41,915 --> 00:00:44,480 Además, aprovecharemos 11 00:00:44,480 --> 00:00:48,455 el soporte de autenticación que ofrece Firebase para autenticar a 12 00:00:48,455 --> 00:00:56,295 los usuarios utilizando un enfoque de correo electrónico y contraseña y también usando una cuenta de Google. 13 00:00:56,295 --> 00:00:59,775 Para comenzar en este ejercicio, 14 00:00:59,775 --> 00:01:02,750 vaya a una ubicación conveniente en su computadora y 15 00:01:02,750 --> 00:01:07,190 luego clone el repositorio Git dado donde 16 00:01:07,190 --> 00:01:14,775 le he proporcionado la versión Angular Firebase de nuestra aplicación Angular. 17 00:01:14,775 --> 00:01:17,490 Así que escriba, git clone 18 00:01:17,490 --> 00:01:27,470 https://github.com/jmuppala/confusion-Angular6-Firebase.git 19 00:01:27,470 --> 00:01:28,670 y luego clone 20 00:01:28,670 --> 00:01:34,835 el repositorio de Git y una vez que el repositorio de Git se clone 21 00:01:34,835 --> 00:01:43,355 en su computadora, luego muévase a la 22 00:01:43,355 --> 00:01:47,570 carpeta de confusión Angular Firebase que se creará en este punto y 23 00:01:47,570 --> 00:01:52,110 luego lo haría observe que un montón de archivos ya están instalados allí. 24 00:01:52,110 --> 00:01:56,015 Vamos a seguir adelante y hacer una instalación npm para instalar 25 00:01:56,015 --> 00:02:01,890 todos los módulos de nodo de los que depende esta aplicación angular. 26 00:02:01,890 --> 00:02:04,520 Esta versión también instalará 27 00:02:04,520 --> 00:02:10,010 dos módulos de nodo adicionales llamados Firebase y luego Angular fire dos. 28 00:02:10,010 --> 00:02:15,525 Voy a explicar un poco más sobre estos dos módulos de nodo más adelante en este ejercicio. 29 00:02:15,525 --> 00:02:18,915 Una vez completada la instalación del proyecto, 30 00:02:18,915 --> 00:02:23,360 abra el proyecto en un editor y luego en el proyecto, 31 00:02:23,360 --> 00:02:27,830 vaya a la carpeta de entornos de origen y 32 00:02:27,830 --> 00:02:32,420 luego abra el archivo environment.ts y en el archivo environment.ts, 33 00:02:32,420 --> 00:02:36,980 verá un conjunto de configuración de Firebase 34 00:02:36,980 --> 00:02:42,130 que necesita configurar con su propia configuración del servidor Firebase. 35 00:02:42,130 --> 00:02:45,105 Como hemos visto en el ejercicio anterior, 36 00:02:45,105 --> 00:02:48,950 podemos obtener toda esta información cuando hacemos clic en 37 00:02:48,950 --> 00:02:53,150 este botón aquí llamado «Agregar Firebase a su aplicación web» y luego 38 00:02:53,150 --> 00:02:56,809 copiar esta información y luego pegar esta información 39 00:02:56,809 --> 00:03:01,835 en su archivo environment.ts para 40 00:03:01,835 --> 00:03:06,500 reemplazarlos con su Configuración 41 00:03:06,500 --> 00:03:10,940 de servidores Firebase para toda esta información y una vez que se haya completado, 42 00:03:10,940 --> 00:03:17,390 puede iniciar su aplicación angular escribiendo «ng serve» en el símbolo del sistema. 43 00:03:17,390 --> 00:03:21,735 Una vez que su aplicación angular se compila con «ng serve», 44 00:03:21,735 --> 00:03:29,905 vaya a un navegador y luego escriba localhost: 4200 para cargar en 45 00:03:29,905 --> 00:03:34,850 su aplicación angular y notará que su aplicación angular está compilada 46 00:03:34,850 --> 00:03:40,215 y luego cargada en su navegador como antes. 47 00:03:40,215 --> 00:03:43,190 Por lo tanto, una vez que su aplicación Angular esté en funcionamiento, 48 00:03:43,190 --> 00:03:47,585 se dará cuenta de que esta versión de 49 00:03:47,585 --> 00:03:51,260 la aplicación Angular va a hacer uso del servidor Firebase que ha configurado en 50 00:03:51,260 --> 00:03:55,625 el ejercicio anterior y aquí verá la página «Inicio», 51 00:03:55,625 --> 00:04:00,030 la página «Acerca de» como vemos aquí y la 52 00:04:00,030 --> 00:04:09,615 « Menú» y la página «Contacto» y, obviamente, dado que no estamos conectados actualmente, 53 00:04:09,615 --> 00:04:14,975 la página «Mis Favoritos» mostrará un error diciendo que ningún usuario ha iniciado sesión. 54 00:04:14,975 --> 00:04:17,210 Por lo tanto, vamos a iniciar sesión nosotros mismos. 55 00:04:17,210 --> 00:04:20,760 Permítanme volver a la «Página de inicio» y luego nos conectaremos nosotros mismos. 56 00:04:20,760 --> 00:04:22,475 Por lo tanto, cuando haga clic en el botón de inicio de sesión, 57 00:04:22,475 --> 00:04:27,195 verá el formulario típico aquí con el correo electrónico y la información de la contraseña. 58 00:04:27,195 --> 00:04:30,715 También verá un botón adicional aquí llamado «Iniciar sesión con Google». 59 00:04:30,715 --> 00:04:33,600 Así que déjame iniciar sesión con mi cuenta de Google. 60 00:04:33,600 --> 00:04:35,750 Por lo tanto, cuando haga clic en «Iniciar sesión con Google», 61 00:04:35,750 --> 00:04:41,180 se abrirá otra ventana del navegador donde se le pedirá que 62 00:04:41,180 --> 00:04:47,420 autorice el uso de su cuenta de Google por este servidor Firebase. 63 00:04:47,420 --> 00:04:49,475 Por lo tanto, permítanme seguir adelante 64 00:04:49,475 --> 00:04:53,845 y autorizar esta aplicación y luego una vez que se complete la autorización, 65 00:04:53,845 --> 00:04:57,145 entonces verá que su 66 00:04:57,145 --> 00:05:01,850 aplicación angular basada en Firebase se iniciará y en la esquina derecha, 67 00:05:01,850 --> 00:05:06,200 inmediatamente verá su nombre que se 68 00:05:06,200 --> 00:05:11,525 muestra aquí y con el «Inicio de sesión» ahora convertido en un botón de «Cerrar sesión». 69 00:05:11,525 --> 00:05:14,755 Por lo tanto, en este punto, 70 00:05:14,755 --> 00:05:17,530 usted debería ser capaz de ver sus favoritos 71 00:05:17,530 --> 00:05:20,310 y en este caso, ya que no tenemos ningún favorito, 72 00:05:20,310 --> 00:05:22,155 por lo que estará vacío en este punto. 73 00:05:22,155 --> 00:05:27,830 Permítanme volver al «Menú» y luego agregar un par de elementos en «Mis favoritos». 74 00:05:27,830 --> 00:05:32,235 Entonces, agregaré este plato a mis favoritos. 75 00:05:32,235 --> 00:05:34,045 Por lo tanto, cuando haga clic en este plato, 76 00:05:34,045 --> 00:05:41,110 inmediatamente verá el icono convertirse en un corazón lleno y déjame también seleccionar 77 00:05:41,110 --> 00:05:44,350 un plato más y agregarlo a «Mis 78 00:05:44,350 --> 00:05:49,650 favoritos» y luego ahora cuando vaya a «Mis favoritos», 79 00:05:49,650 --> 00:05:52,510 verá el par de platos añadidos a 80 00:05:52,510 --> 00:05:56,330 sus favoritos como lo haría esperar y de nuevo, 81 00:05:56,330 --> 00:06:02,540 puede eliminar los platos haciendo clic en el botón «Eliminar» alternar aquí y luego haga clic en 82 00:06:02,540 --> 00:06:09,695 la cruz para eliminar el elemento de su lista de favoritos como se muestra aquí. 83 00:06:09,695 --> 00:06:13,570 Ahora, también podemos agregar como se dio cuenta, 84 00:06:13,570 --> 00:06:17,660 podemos ir a cualquier plato y luego agregar comentarios sobre ese plato. 85 00:06:17,660 --> 00:06:19,190 Por lo tanto, permítanme añadir un comentario 86 00:06:19,190 --> 00:06:28,260 aquí y en el momento en que envíe el comentario, 87 00:06:28,260 --> 00:06:32,435 inmediatamente verá que sus comentarios se mostrarán aquí con 88 00:06:32,435 --> 00:06:41,825 el nombre del autor del comentario también incluido aquí y con la fecha como se muestra aquí. 89 00:06:41,825 --> 00:06:45,890 Por lo tanto, puede ver que el envío 90 00:06:45,890 --> 00:06:49,955 de comentarios del usuario será compatible con cualquier plato específico. 91 00:06:49,955 --> 00:06:55,805 Permítanme agregar un favorito más y así este usuario tendrá un par de favoritos. 92 00:06:55,805 --> 00:06:58,180 Permítanme «Cerrar sesión» este usuario. 93 00:06:58,180 --> 00:07:02,930 Vuelva a la «Página de inicio» y luego «Cerrar sesión» de este usuario. 94 00:07:02,930 --> 00:07:07,715 Ahora iniciaremos sesión usando la otra cuenta. 95 00:07:07,715 --> 00:07:13,490 Por lo tanto, yo- Yo había configurado 96 00:07:13,490 --> 00:07:17,840 esta cuenta de contraseña de correo electrónico antes y así vamos a 97 00:07:17,840 --> 00:07:22,865 iniciar sesión como este otro usuario y una vez que el otro usuario está conectado, 98 00:07:22,865 --> 00:07:29,045 déjame volver a ir al «Menú» y añadir un par de elementos en 99 00:07:29,045 --> 00:07:36,904 los favoritos para este usuario en particular 100 00:07:36,904 --> 00:07:40,700 y así cuando vuelvas a «Mis favoritos», 101 00:07:40,700 --> 00:07:44,270 verá estos elementos listados para el segundo usuario. 102 00:07:44,270 --> 00:07:46,775 Ahora, de manera similar para este usuario, 103 00:07:46,775 --> 00:07:53,150 permítanme volver a enviar otro comentario de este usuario. 104 00:08:01,000 --> 00:08:02,600 Por lo tanto, y 105 00:08:02,600 --> 00:08:07,445 vería que los comentarios enviados por el segundo usuario también se agrega a la aplicación. 106 00:08:07,445 --> 00:08:11,615 Por lo tanto, así es como su aplicación Angular funciona 107 00:08:11,615 --> 00:08:16,490 con Firebase como back-end como servicio. 108 00:08:16,490 --> 00:08:18,529 Ahora, por supuesto, debe preguntarse, 109 00:08:18,529 --> 00:08:24,170 ¿cómo rediseñamos nuestra aplicación Angular para hacer uso de Firebase en lugar 110 00:08:24,170 --> 00:08:31,610 de usar el servidor Standard Express más MongoDB que hemos construido anteriormente? 111 00:08:31,610 --> 00:08:38,440 Para configurar su aplicación Angular para que se comunique con el servidor Firebase, 112 00:08:38,440 --> 00:08:42,620 hay dos módulos de nodo que necesita instalar en 113 00:08:42,620 --> 00:08:46,860 su aplicación Angular y uno de ellos es el módulo Firebase. 114 00:08:46,860 --> 00:08:49,730 El módulo Firebase como se ve aquí, 115 00:08:49,730 --> 00:08:55,190 proporciona las herramientas e infraestructura que le permite comunicarse 116 00:08:55,190 --> 00:09:01,610 con el servidor Firebase e instalarlo en su aplicación 117 00:09:01,610 --> 00:09:05,720 , escriba, npm install menos guardar Firebase. 118 00:09:05,720 --> 00:09:07,610 Ahora, junto con esto, 119 00:09:07,610 --> 00:09:11,395 hay otro módulo llamado Angular Fire 2. 120 00:09:11,395 --> 00:09:13,725 Así que el fuego angular 2. 121 00:09:13,725 --> 00:09:20,535 Además, de nuevo he proporcionado los enlaces a estos dos módulos en los recursos adicionales. 122 00:09:20,535 --> 00:09:23,795 El AngularFire 2 es la biblioteca oficial 123 00:09:23,795 --> 00:09:27,290 de soporte Firebase y Angular y como puede ver, 124 00:09:27,290 --> 00:09:31,520 es un soporte basado en observable para archivos Angular. 125 00:09:31,520 --> 00:09:36,545 Por lo tanto, esto funciona para agregar al módulo npm de Firebase y luego 126 00:09:36,545 --> 00:09:42,125 le da una interfaz basada observable que podemos usar en su aplicación angular. 127 00:09:42,125 --> 00:09:44,930 Por lo tanto, estaríamos aprovechando el AngularFire 2. 128 00:09:44,930 --> 00:09:46,994 Por lo tanto, para hacer uso de AngularFire2, 129 00:09:46,994 --> 00:09:49,940 debe instalar tanto Firebase como AngularFire 2. 130 00:09:49,940 --> 00:09:51,345 Por lo tanto, en una sola toma, 131 00:09:51,345 --> 00:09:54,205 instale ambos en su aplicación Angular. 132 00:09:54,205 --> 00:09:59,320 Ahora, la versión de la aplicación Angular que he proporcionado para usted 133 00:09:59,320 --> 00:10:06,250 instala automáticamente ambos como verá cuando examine el archivo package.json. 134 00:10:06,250 --> 00:10:08,510 Ahora, cómo hacer uso de estos dos, 135 00:10:08,510 --> 00:10:12,245 ilustraré que al ejecutar rápidamente a través 136 00:10:12,245 --> 00:10:17,280 del código modificado para los servicios y un par de componentes donde 137 00:10:17,280 --> 00:10:19,955 hacemos uso de Firebase y AngularFire2 138 00:10:19,955 --> 00:10:23,135 para modificar la aplicación Angular que hemos desarrollado 139 00:10:23,135 --> 00:10:30,140 anteriormente para hacer uso del Servidor Firebase como back-end como servicio. 140 00:10:30,140 --> 00:10:34,075 Para entender más acerca de cómo 141 00:10:34,075 --> 00:10:39,185 aprovechamos Firebase y AngularFire 2 dentro de nuestra aplicación Angular, 142 00:10:39,185 --> 00:10:42,860 nuestra primera parada es en el archivo package.json. 143 00:10:42,860 --> 00:10:45,025 Así que en el archivo package.json, 144 00:10:45,025 --> 00:10:50,850 notará que he instalado AngularFire2 aquí y también hemos instalado 145 00:10:50,850 --> 00:10:57,510 Firebase para usar en esta versión de la aplicación Angular que suministro para usted. 146 00:10:57,510 --> 00:11:01,980 Por lo tanto, tenga en cuenta que estos dos se instalarán automáticamente cuando escriba «npm 147 00:11:01,980 --> 00:11:07,720 install» después de clonar este repositorio git que le he proporcionado. 148 00:11:07,720 --> 00:11:11,220 Si estaba comenzando con una nueva aplicación Angular, 149 00:11:11,220 --> 00:11:15,590 entonces debería instalar tanto AngularFire 2 como Firebase 150 00:11:15,590 --> 00:11:20,184 para aprovechar el uso de Firebase como back-end como servicio. 151 00:11:20,184 --> 00:11:22,365 Ahora, habiendo instalado estos dos, 152 00:11:22,365 --> 00:11:27,360 vamos a aprender cómo hacemos uso de estos dentro de nuestros servicios. 153 00:11:27,360 --> 00:11:30,030 Por lo tanto, la mejor manera de aprender a hacer uso de 154 00:11:30,030 --> 00:11:33,640 ambos es visitar algunos de los servicios que hemos 155 00:11:33,640 --> 00:11:36,930 configurado en nuestra aplicación y entender cómo 156 00:11:36,930 --> 00:11:42,130 aprovechamos el uso de AngularFire2 y Firebase. 157 00:11:42,130 --> 00:11:46,235 Por lo tanto, comenzaremos con el archivo dish.service.ts. 158 00:11:46,235 --> 00:11:48,830 Por lo tanto, si va al archivo dish.service.ts, 159 00:11:48,830 --> 00:11:51,095 notará que aquí, 160 00:11:51,095 --> 00:11:55,235 en este servicio de platos, 161 00:11:55,235 --> 00:12:01,190 me verá importando este AngularFiRestore, AngularFireRestoreDocument 162 00:12:01,190 --> 00:12:08,115 y AngularFireRestoreCollection de AngularFire a Firestore aquí. Por lo 163 00:12:08,115 --> 00:12:16,680 tanto, eso trae lo que necesito de mi módulo npm AngularfiRestore, 164 00:12:16,680 --> 00:12:21,010 también notarás que estoy importando todo desde 165 00:12:21,010 --> 00:12:27,615 Firebase/aplicación como Firebase en mi servicio de platos aquí. 166 00:12:27,615 --> 00:12:29,945 Por lo tanto, una vez que hayamos importado estos dos, 167 00:12:29,945 --> 00:12:35,415 echemos un vistazo rápido a cómo reconfiguramos nuestro servicio de platos aquí. 168 00:12:35,415 --> 00:12:37,435 Por lo tanto, si ingresas al servicio de platos, 169 00:12:37,435 --> 00:12:41,175 notarás que ya no estoy usando el cliente HTTP. 170 00:12:41,175 --> 00:12:48,975 En cambio, estoy inyectando AFS que es el AngularFiRestore en el constructor aquí. 171 00:12:48,975 --> 00:12:51,520 El AngularFiRestore es el que me da 172 00:12:51,520 --> 00:12:55,815 acceso al backend de Firebase como servicio. 173 00:12:55,815 --> 00:13:01,785 Ahora, también recuerde que ya hemos configurado todos los detalles de 174 00:13:01,785 --> 00:13:09,450 nuestro servidor y también el proyecto de almacén de archivos en el archivo environment.ts anteriormente. 175 00:13:09,450 --> 00:13:12,595 Por lo tanto, debería haber configurado esta información ya allí 176 00:13:12,595 --> 00:13:16,180 sobre cómo su aplicación Angular debería aprovechar 177 00:13:16,180 --> 00:13:20,930 su proyecto basado en Firestore en 178 00:13:20,930 --> 00:13:27,710 su servidor Firestore para acceder a los datos que ha configurado allí. 179 00:13:27,710 --> 00:13:32,290 Por lo tanto, esto me dará acceso a mi 180 00:13:32,290 --> 00:13:39,400 Firestore en la nube dentro de mi proyecto de Firebase que he configurado. 181 00:13:39,400 --> 00:13:43,410 Ahora, AuthService es, por supuesto, el mismo Authservice que hemos utilizado antes, 182 00:13:43,410 --> 00:13:51,175 pero se ha modificado para hacer uso del soporte angular para Firebase. 183 00:13:51,175 --> 00:13:55,095 Visitaremos AuthService para saber cómo se ha actualizado. 184 00:13:55,095 --> 00:14:00,410 Ahora, el AuthService nos dará acceso a 185 00:14:00,410 --> 00:14:06,345 este método llamado getAuthState que volverá en un observable. 186 00:14:06,345 --> 00:14:08,965 Este observable, cuando nos suscribimos, 187 00:14:08,965 --> 00:14:15,855 nos dará la información como usuario que contiene la información del usuario. 188 00:14:15,855 --> 00:14:21,465 Por lo tanto, obtendré eso y luego configuraré el CurrentUser en mi aplicación 189 00:14:21,465 --> 00:14:28,995 como el usuario devuelto por este observable aquí. 190 00:14:28,995 --> 00:14:30,699 Por lo tanto, cuando 191 00:14:30,699 --> 00:14:33,085 visitemos AuthService, aprenderemos lo que este getAuthState devolverá para 192 00:14:33,085 --> 00:14:35,700 nosotros y así la información de 193 00:14:35,700 --> 00:14:36,940 CurrentUser se puede obtener de cualquiera de 194 00:14:36,940 --> 00:14:41,165 los otros servicios porque ya estamos inyectando AuthService aquí. 195 00:14:41,165 --> 00:14:45,570 Ahora, echemos un vistazo a cómo se implementa el método GetDages aquí. 196 00:14:45,570 --> 00:14:47,710 Ahora, anteriormente en el método 197 00:14:47,710 --> 00:14:55,920 GetDails, estábamos usando el cliente HTTP para acceder al servidor en URL base /platos. 198 00:14:55,920 --> 00:14:57,425 Ahora, en este caso, 199 00:14:57,425 --> 00:15:07,255 para acceder a una colección en mi servidor Firebase, diremos esto.afs. 200 00:15:07,255 --> 00:15:10,710 Por lo tanto, esto es lo que AngularFire2 nos proporciona. 201 00:15:10,710 --> 00:15:16,345 AFS como ves es el AngularFiRestore que hemos inyectado aquí y así decimos 202 00:15:16,345 --> 00:15:19,810 this.afs.collection y aquí 203 00:15:19,810 --> 00:15:23,010 especificaremos la colección específica a la que estamos accediendo aquí. 204 00:15:23,010 --> 00:15:26,315 Recordemos que habíamos configurado los platos, las promociones 205 00:15:26,315 --> 00:15:30,415 y las colecciones de líderes en mi servidor Firebase. 206 00:15:30,415 --> 00:15:34,065 Por lo tanto, esto directamente me da acceso 207 00:15:34,065 --> 00:15:38,595 a mi colección de platos aquí y de la colección de platos, 208 00:15:38,595 --> 00:15:42,740 puedo hacer.ValueChanges que 209 00:15:42,740 --> 00:15:47,115 devolverá toda la información en la colección de negocios para mí, 210 00:15:47,115 --> 00:15:50,440 o puedo hacer.SnapshotChanges que 211 00:15:50,440 --> 00:15:53,990 devolverá información adicional incluyendo el ID de los platos. 212 00:15:53,990 --> 00:15:56,660 Entonces, si en lugar de hacer SnapShotChanges, 213 00:15:56,660 --> 00:15:59,310 si digo 214 00:15:59,310 --> 00:16:03,110 ValueChanges, devolverá solo la información del plato pero no devolverá los 215 00:16:03,110 --> 00:16:07,890 ID de los platos, pero ya que necesitaré los ID de mis platos, 216 00:16:07,890 --> 00:16:13,335 así que es por eso que estoy usando el.SnapshotChanges en este caso. 217 00:16:13,335 --> 00:16:16,090 Entonces, cuando se llame a .snapshotChanges, 218 00:16:16,090 --> 00:16:19,505 esto volverá a medida que vea un observable que 219 00:16:19,505 --> 00:16:27,195 mapeo y por lo tanto el valor de retorno que se llama como acciones y estas acciones 220 00:16:27,195 --> 00:16:31,800 , de nuevo, será un observable que mapearé cada acción en 221 00:16:31,800 --> 00:16:38,930 estas acciones y luego extraigo los datos de la acción que es regresó aquí. 222 00:16:38,930 --> 00:16:44,525 Por lo tanto, la acción es un valor que se devuelve para cada una de las acciones 223 00:16:44,525 --> 00:16:50,765 y esta acción contiene una carga útil y contiene dentro de ese campo oscuro aquí. 224 00:16:50,765 --> 00:16:53,200 Ahora, esto es algo que he descubierto leyendo 225 00:16:53,200 --> 00:16:57,010 la documentación para AngularFire2 y 226 00:16:57,010 --> 00:17:03,705 entonces cuando llamamos a esta función de datos en esta action.payload.doc, 227 00:17:03,705 --> 00:17:05,875 esto me dará los datos. 228 00:17:05,875 --> 00:17:09,510 Los datos para ese plato específico que se 229 00:17:09,510 --> 00:17:14,160 obtiene de mi colección de platos en el lado del servidor. 230 00:17:14,160 --> 00:17:18,760 Así que cada documento allí será devuelto aquí y 231 00:17:18,760 --> 00:17:24,205 luego obtengo el ID para eso diciendo action.payload.doc.id 232 00:17:24,205 --> 00:17:27,855 Así que ahí es donde se 233 00:17:27,855 --> 00:17:32,030 llevará el ID de eso y luego uniré a los dos juntos y devolveré 234 00:17:32,030 --> 00:17:40,035 esto como un documento de plato a mis diversos componentes desde allí, 235 00:17:40,035 --> 00:17:42,150 lo haré llamar a este método GetDages. 236 00:17:42,150 --> 00:17:43,345 Por lo tanto, como recordarán, 237 00:17:43,345 --> 00:17:44,690 desde el componente de menú, 238 00:17:44,690 --> 00:17:47,400 estoy llamando al método GetDages para obtener 239 00:17:47,400 --> 00:17:51,090 la información sobre todos los platos de mi colección. 240 00:17:51,090 --> 00:17:58,505 Colección. Por lo tanto, cada uno de estos platos que se devuelve como un documento se reconstruirá en 241 00:17:58,505 --> 00:18:03,420 un objeto JavaScript con el ID insertado aquí y también 242 00:18:03,420 --> 00:18:09,540 los datos que se extraen de esta acción payload.doc.data. 243 00:18:09,540 --> 00:18:16,455 Ahora bien, esto es algo que aprendes leyendo la documentación de AngularFire2. 244 00:18:16,455 --> 00:18:19,470 Ahora, como ya he hecho esa parte, 245 00:18:19,470 --> 00:18:22,755 le estoy mostrando el código exacto que se supone que debe 246 00:18:22,755 --> 00:18:26,160 usar para extraer los datos y luego proporcionar 247 00:18:26,160 --> 00:18:33,500 estos datos de vuelta a su componente que va a llamar al método GetDails aquí. 248 00:18:33,500 --> 00:18:37,090 Por lo tanto, haciendo esto para cada uno de los documentos allí, 249 00:18:37,090 --> 00:18:39,180 este documento será reconstruido en 250 00:18:39,180 --> 00:18:44,800 el objeto de plato que 251 00:18:44,800 --> 00:18:51,500 usamos en nuestra aplicación Angular y así podemos incluso obtener acceso a la ID. 252 00:18:51,500 --> 00:18:53,365 Si solo hace cambios de valor, 253 00:18:53,365 --> 00:18:59,825 simplemente devolverá todos los documentos en sí, pero sin los ID de los documentos. 254 00:18:59,825 --> 00:19:04,920 Por lo tanto, este trabajo adicional debe hacerse dentro de su servicio para 255 00:19:04,920 --> 00:19:07,835 devolver la información de la manera correcta para 256 00:19:07,835 --> 00:19:10,865 que MyComponents pueda hacer uso de esta información. 257 00:19:10,865 --> 00:19:13,370 Del mismo modo, para un método GetDish, 258 00:19:13,370 --> 00:19:17,695 así que observe cómo estoy accediendo a la información de un plato específico. 259 00:19:17,695 --> 00:19:22,020 Una vez más, diremos this.afs y luego notarás que soy 260 00:19:22,020 --> 00:19:26,660 saying.doc y luego aquí para el método the.doc, 261 00:19:26,660 --> 00:19:32,650 proporciono platos slash y luego el ID del plato específico. 262 00:19:32,650 --> 00:19:35,150 Ahora, la razón por la que había proporcionado ID, 263 00:19:35,150 --> 00:19:39,350 el ID aquí viene como el parámetro para el método getDish aquí. 264 00:19:39,350 --> 00:19:41,985 Ahora, para que se proporcione esta ID, 265 00:19:41,985 --> 00:19:44,450 necesito poder proporcionar esa ID en 266 00:19:44,450 --> 00:19:47,480 el método GetDails para que cuando se construya mi menú, 267 00:19:47,480 --> 00:19:51,205 cada plato tenga su ID adjunta allí. 268 00:19:51,205 --> 00:19:56,575 Esa identificación se pasa aquí y por lo tanto voy a acceder al documento en este punto. 269 00:19:56,575 --> 00:20:01,260 Por lo tanto, el AngularFire2 le permite acceder a 270 00:20:01,260 --> 00:20:07,125 un documento específico que está dentro de una colección diciendo la barra diagonal del nombre de la colección, 271 00:20:07,125 --> 00:20:15,430 más el ID del documento o puede decir this.afs.collection plats.collection al igual que escuchó, los 272 00:20:15,430 --> 00:20:22,540 platos de la colección y then.doc y luego proporcionar el documento y el ID entre paréntesis allí. 273 00:20:22,540 --> 00:20:26,725 Entonces, esa es otra forma de abordar un plato específico. 274 00:20:26,725 --> 00:20:32,680 Una vez más, me estoy suscribiendo a SnapShotChanges y esto devolverá una acción que luego se 275 00:20:32,680 --> 00:20:35,480 mapea nuevamente en el mismo formato para 276 00:20:35,480 --> 00:20:39,495 construir el objeto dish aquí junto con el ID aquí. 277 00:20:39,495 --> 00:20:42,410 Ahora, Firebase mantiene el ID separado del documento en 278 00:20:42,410 --> 00:20:46,300 sí y es por eso que tengo que hacer explícitamente 279 00:20:46,300 --> 00:20:49,010 esta reconstrucción para obtener 280 00:20:49,010 --> 00:20:54,750 el documento de plato de una manera que sea utilizable por MyComponents. 281 00:20:54,750 --> 00:20:59,660 Luego construí mi propio servidor usando Express y MongoDB, 282 00:20:59,660 --> 00:21:03,995 el ID estaba automáticamente allí en el documento en sí y por lo 283 00:21:03,995 --> 00:21:09,235 que fue muy fácil recuperarlo y proporcionarlo de nuevo al lado del cliente. 284 00:21:09,235 --> 00:21:13,610 Ahora, para GetFeaturedDish, 285 00:21:13,610 --> 00:21:15,620 recuerde que para GetFeaturedDish, 286 00:21:15,620 --> 00:21:20,870 estamos buscando aquellos platos donde la característica se establece en true. 287 00:21:20,870 --> 00:21:25,790 Ahora, aquí es donde AngularFire2 nos permite 288 00:21:25,790 --> 00:21:31,180 construir una consulta y proporcionar esa consulta aquí para esa colección. 289 00:21:31,180 --> 00:21:36,440 Aquí estoy diciendo estos platos de colección.afs aquí, 290 00:21:36,440 --> 00:21:39,520 así que todavía estoy usando la colección, pero luego mire 291 00:21:39,520 --> 00:21:43,140 el segundo parámetro para esta llamada aquí. 292 00:21:43,140 --> 00:21:49,405 Esto dice ref donde la referencia se refiere a cada documento que está en esta colección. 293 00:21:49,405 --> 00:21:53,330 Este ref dice el ref y aquí es donde puedo 294 00:21:53,330 --> 00:21:58,100 usar esta configuración de consulta escucha para que dice.where. 295 00:21:58,100 --> 00:22:04,695 Por lo tanto, lo que significa que cada uno de los documentos donde el destacado, 296 00:22:04,695 --> 00:22:10,445 como se puede ver, la sintaxis es bastante fácil de seguir aquí que dice donde aparece. 297 00:22:10,445 --> 00:22:15,240 Ahora, observe que la característica se suministra como una cadena aquí, 298 00:22:15,240 --> 00:22:17,175 y luego la siguiente, 299 00:22:17,175 --> 00:22:22,230 el operador es igual a, por lo que incluso puede decir 300 00:22:22,230 --> 00:22:25,345 mayor que, menor que, mayor o igual que menor o igual a cualquiera de estas cosas, 301 00:22:25,345 --> 00:22:30,375 pero observe que eso debería estar dentro de las citas aquí y luego dirá verdadero. 302 00:22:30,375 --> 00:22:35,105 Por lo tanto, dondequiera que la propiedad destacada del documento esté establecida en true, 303 00:22:35,105 --> 00:22:36,620 extraiga todos ellos. 304 00:22:36,620 --> 00:22:40,545 Por lo tanto, esta consulta extraerá solo aquellos documentos 305 00:22:40,545 --> 00:22:45,250 de la colección de platos donde la característica se establece en true, 306 00:22:45,250 --> 00:22:50,195 y luego devolverá solo esos documentos de esa colección aquí, 307 00:22:50,195 --> 00:22:53,770 y desde allí voy a cambiar las instantáneas y esto 308 00:22:53,770 --> 00:22:59,350 devolverá una matriz de documentos y desde allí los mapearé 309 00:22:59,350 --> 00:23:04,270 en documentos de plato individuales y luego ya que me he 310 00:23:04,270 --> 00:23:09,700 asegurado de que solo uno de esos documentos tendrá la característica establecida en verdadero. 311 00:23:09,700 --> 00:23:13,030 Por lo tanto, solo devolverá uno de ellos, pero lo devolverá como una matriz. 312 00:23:13,030 --> 00:23:14,980 Entonces, es por eso que estoy construyendo esto 313 00:23:14,980 --> 00:23:20,195 con corchetes cuadrados cero el primer elemento de la matriz, 314 00:23:20,195 --> 00:23:25,210 y de hecho contendrá solo un elemento porque solo un elemento en mi colección 315 00:23:25,210 --> 00:23:30,745 coincidirá con esta consulta en particular que he configurado aquí con la onda aquí. 316 00:23:30,745 --> 00:23:36,470 Hay otras configuraciones de consulta aquí también puede usar algo llamado orden por. 317 00:23:36,470 --> 00:23:41,000 Por lo tanto, puede ordenar la colección por una determinada propiedad, 318 00:23:41,000 --> 00:23:47,310 y algún otro conjunto de opciones de consulta que están disponibles. 319 00:23:47,310 --> 00:23:51,480 Ahora, esto es compatible con Firebase en su nube Firestore, 320 00:23:51,480 --> 00:23:56,890 y eso es lo que podemos aprovechar usando AngularFire2 para diseñar 321 00:23:56,890 --> 00:24:03,850 el código en su aplicación Angular para hacer la consulta desde el lado del cliente. 322 00:24:03,850 --> 00:24:09,280 Por lo tanto, esto va a devolver el plato de características específico. 323 00:24:09,360 --> 00:24:15,355 Ahora, de nuevo getDishid va a ser similar a lo que hemos hecho antes. 324 00:24:15,355 --> 00:24:16,890 Por lo tanto, no hay modificaciones allí. 325 00:24:16,890 --> 00:24:21,370 Ahora, para el PostComment de nuevo 326 00:24:21,370 --> 00:24:27,820 porque Firebase con la nube Firestore beta, 327 00:24:27,820 --> 00:24:31,720 no tiene el concepto de población, 328 00:24:31,720 --> 00:24:34,015 y así sucesivamente que hemos visto antes. Por 329 00:24:34,015 --> 00:24:39,890 lo tanto, lo que voy a hacer por los comentarios es que voy a publicar estos comentarios como 330 00:24:39,890 --> 00:24:46,140 una colección para la cual se encierra dentro de cada plato en sí. 331 00:24:46,140 --> 00:24:52,040 Por lo tanto, cada plato tendrá su propia colección de comentarios sobre ese plato específico. 332 00:24:52,040 --> 00:24:54,965 Cuando publique el comentario voy a usar el DishiD, 333 00:24:54,965 --> 00:24:57,905 y luego la información del comentario. 334 00:24:57,905 --> 00:25:01,735 Entonces, lo que hago aquí es que primero 335 00:25:01,735 --> 00:25:07,175 consultaré los platos y luego obtendré ese plato en particular. 336 00:25:07,175 --> 00:25:11,555 Por lo tanto, puede ver que estoy usando la otra forma de consultar un documento específico. 337 00:25:11,555 --> 00:25:16,070 Entonces, aquí estoy diciendo esta afs.collection ('platos') .doc DishID. 338 00:25:16,440 --> 00:25:22,660 Por lo tanto, puedo usar esta forma de acceder a un documento específico si quiero. 339 00:25:22,660 --> 00:25:25,610 La otra forma, por supuesto, ya ha visto con 340 00:25:25,610 --> 00:25:33,375 el método GetDish donde digo platos doc slash más ID. 341 00:25:33,375 --> 00:25:38,185 Por lo tanto, dos formas diferentes de abordar un documento específico dentro de 342 00:25:38,185 --> 00:25:44,460 una colección aquí y luego DISHID y luego colección y comentarios. 343 00:25:44,460 --> 00:25:46,840 Por lo tanto, de esta manera se dice en 344 00:25:46,840 --> 00:25:51,100 esta colección para este documento específico con ese Dishid, 345 00:25:51,100 --> 00:25:54,140 hay una colección que se incluye en 346 00:25:54,140 --> 00:25:57,180 este documento y que la colección tiene el nombre de comentarios. 347 00:25:57,180 --> 00:25:59,660 Por lo tanto, este es un anidamiento de una colección 348 00:25:59,660 --> 00:26:03,125 dentro de un documento que está en otra conexión de nivel superior. 349 00:26:03,125 --> 00:26:07,110 Por lo tanto, este tipo de anidación de colecciones está permitido por 350 00:26:07,110 --> 00:26:13,590 Firebase Cloud Store Beta hasta 100 niveles de profundidad si así lo desea. 351 00:26:13,590 --> 00:26:15,700 Así que, dentro de esta colección, 352 00:26:15,700 --> 00:26:17,420 voy a añadir. 353 00:26:17,420 --> 00:26:20,310 Entonces, ¿cómo se agrega un documento a una colección? 354 00:26:20,310 --> 00:26:22,105 Para agregar un documento a la colección, 355 00:26:22,105 --> 00:26:24,755 utilice el método add de una colección aquí. 356 00:26:24,755 --> 00:26:27,600 Por lo tanto, puede ver que en los comentarios de la colección, 357 00:26:27,600 --> 00:26:30,380 estoy haciendo una adición aquí y luego 358 00:26:30,380 --> 00:26:33,655 este es el documento real que se agregará aquí. 359 00:26:33,655 --> 00:26:35,280 Por lo tanto, en el documento en sí, 360 00:26:35,280 --> 00:26:40,645 verá que tengo la propiedad del autor aquí donde he configurado el ID actual, 361 00:26:40,645 --> 00:26:44,665 y también configuré el nombre para el autor aquí, 362 00:26:44,665 --> 00:26:50,885 solo sirvo la primera vez aquí, así que aquí digo este nombre para mostrar de usuario actual. 363 00:26:50,885 --> 00:26:55,625 Si el nombre para mostrar es verdadero, entonces lo estableceré en este nombre para mostrar de usuario actual. 364 00:26:55,625 --> 00:27:00,960 Si la cuenta del usuario no tiene un nombre para mostrar como adjunto, entonces simplemente 365 00:27:00,960 --> 00:27:06,420 usaré este correo electrónico de usuario actual como la propiedad de nombre aquí. 366 00:27:06,420 --> 00:27:11,035 Por lo tanto, este documento que contiene el comentario, 367 00:27:11,035 --> 00:27:13,150 automáticamente también lleva este campo de nombre 368 00:27:13,150 --> 00:27:16,140 y eso es lo que voy a usar para renderizar 369 00:27:16,140 --> 00:27:22,495 la información cuando renderice los comentarios en mi componente DishDetail. 370 00:27:22,495 --> 00:27:28,710 Por lo tanto, observe que en realidad estoy duplicando información aquí en cada uno de los comentarios. 371 00:27:28,710 --> 00:27:31,865 Pero está bien, ya que estos se almacenan como 372 00:27:31,865 --> 00:27:34,160 documentos Json en Firebase, está bien 373 00:27:34,160 --> 00:27:36,990 duplicar parte de la información en los comentarios aquí. 374 00:27:36,990 --> 00:27:40,245 Pero si desea más detalles del usuario actual, 375 00:27:40,245 --> 00:27:45,280 ya tiene una referencia a la identificación del usuario aquí para que pueda ir a buscar 376 00:27:45,280 --> 00:27:48,150 el documento para el usuario en particular y luego 377 00:27:48,150 --> 00:27:51,485 obtener más información del usuario si lo desea. 378 00:27:51,485 --> 00:27:54,830 Ahora, cuando utilicé Mongo DB más Mongo, 379 00:27:54,830 --> 00:27:57,950 viste que solo usaré el ID del usuario actual para 380 00:27:57,950 --> 00:28:01,650 el autor y luego usaré el relleno para rellenar esta información. 381 00:28:01,650 --> 00:28:05,150 Ahora Cloud Firestore beta en este momento no tiene 382 00:28:05,150 --> 00:28:10,240 ningún concepto de este poblado por lo que puedo ver 383 00:28:10,240 --> 00:28:14,335 en la documentación, tal vez una versión futura podría admitir una forma de 384 00:28:14,335 --> 00:28:16,800 extraer información de otro documento y 385 00:28:16,800 --> 00:28:19,270 llenarla automáticamente en el documento actual. 386 00:28:19,270 --> 00:28:24,500 Cuando eso sucede, entonces este código tendrá que ser modificado para aprovechar eso. 387 00:28:24,500 --> 00:28:26,725 Pero ahora mismo como lo veo, 388 00:28:26,725 --> 00:28:29,560 Firestore beta no tiene la capacidad de 389 00:28:29,560 --> 00:28:33,000 rellenar información de otro documento en el documento actual. 390 00:28:33,000 --> 00:28:36,040 Así que es por eso que solo estoy replicando esa 391 00:28:36,040 --> 00:28:39,860 información que realmente necesito cuando hago el comentario en 392 00:28:39,860 --> 00:28:43,660 mi componente de detalle de platos aquí y luego abajo 393 00:28:43,660 --> 00:28:47,945 aquí puedes ver que tengo la calificación y el comentario aquí y luego también, 394 00:28:47,945 --> 00:28:49,740 note que estoy creando 395 00:28:49,740 --> 00:28:57,370 estos dos campos adicionales en mi comentario aquí llamados «CreateDat» y «UpdateDat». 396 00:28:57,370 --> 00:29:01,785 Observe cómo estoy poniendo la marca de tiempo para el «CreateDat». 397 00:29:01,785 --> 00:29:05,785 Firebase, ahora qué es esta Firebase que estoy usando aquí, 398 00:29:05,785 --> 00:29:12,050 esta Firebase es exactamente lo que importé aquí desde la aplicación Firebase. 399 00:29:12,050 --> 00:29:15,850 Así que eso me proporciona como se ve aquí abajo aquí abajo, 400 00:29:15,850 --> 00:29:20,395 que me proporciona este mismo valor de campo Firestore. 401 00:29:20,395 --> 00:29:25,260 Entonces, esta llamada a la marca de tiempo del servidor de valores de campo de fuego, 402 00:29:25,260 --> 00:29:28,390 devolverá la marca de tiempo actual para 403 00:29:28,390 --> 00:29:32,605 mí y esa es la información que voy a almacenar en el «CreateDat». 404 00:29:32,605 --> 00:29:35,255 Ahora, cuando inserté todos los documentos aquí, 405 00:29:35,255 --> 00:29:40,435 vio que creé manualmente este campo «CreateDat» para cada uno de los documentos. 406 00:29:40,435 --> 00:29:44,110 Ahora, esta es una forma de hacer lo mismo desde 407 00:29:44,110 --> 00:29:47,895 nuestro código angular en 408 00:29:47,895 --> 00:29:53,040 nuestro lado del cliente y lo mismo para el campo «UpdateDat» que verá aquí. 409 00:29:53,040 --> 00:29:55,270 Por lo tanto, cuando publique un nuevo comentario, 410 00:29:55,270 --> 00:30:00,330 verá que así es como agregará un nuevo comentario en ese servidor. 411 00:30:00,330 --> 00:30:03,630 Ahora, esto devuelve una promesa y esa es la información 412 00:30:03,630 --> 00:30:07,410 que estoy usando aquí para construir esta promesa aquí. 413 00:30:07,410 --> 00:30:10,930 Luego, este otro método aquí diciendo «getComments», 414 00:30:10,930 --> 00:30:16,930 este «getComments como se puede ver está accediendo a los platos de la colección AFS, 415 00:30:16,930 --> 00:30:22,420 doc Dishid y luego los comentarios de la colección y el aviso de que aquí, 416 00:30:22,420 --> 00:30:26,580 no voy a requerir cada ID de comentarios en 417 00:30:26,580 --> 00:30:31,220 sí mismo que no voy a usar en mi Angular petición de todos modos, 418 00:30:31,220 --> 00:30:33,230 así que en lugar de usar cambios de instantáneas, 419 00:30:33,230 --> 00:30:36,285 solo estoy usando cambios de valor y esto devolverá 420 00:30:36,285 --> 00:30:42,170 todos los documentos de esta colección de comentarios para este documento en particular 421 00:30:42,170 --> 00:30:47,455 el DISHID de la colección de platos aquí y que serán devueltos 422 00:30:47,455 --> 00:30:53,320 y estos comentarios voy a renderizar en mi componente de detalle. 423 00:30:53,320 --> 00:30:58,210 Ahora, en Mongos, viste que el hecho de que incluyera el ID de usuario significa 424 00:30:58,210 --> 00:31:02,920 que podría hacer copulación de esta información ahora con Firebase, 425 00:31:02,920 --> 00:31:05,740 no hay forma de poblar la información común aquí, 426 00:31:05,740 --> 00:31:10,870 por lo que estoy explícitamente yendo y luego rellenando los comentarios en 427 00:31:11,210 --> 00:31:15,250 mi dishdetail para buscar todos los comentarios sobre 428 00:31:15,250 --> 00:31:20,000 este plato en particular cuando los renderizo en el componente dishdetail. 429 00:31:20,000 --> 00:31:22,830 Así que verás, que tuve que ajustar 430 00:31:22,830 --> 00:31:26,480 un poco el código angular para lidiar con el hecho de que 431 00:31:26,480 --> 00:31:29,765 Firebase no admite ciertas cosas que mongos admite 432 00:31:29,765 --> 00:31:33,605 al menos en el momento en que Cloud Firestore beta no admite estas cosas, 433 00:31:33,605 --> 00:31:38,420 y así que tuve que trabajar para lidiar con lo que Firebase me permite 434 00:31:38,420 --> 00:31:45,365 almacenar y recuperar desde el sitio del servidor Firebase. 435 00:31:45,365 --> 00:31:51,640 Ahora, también es interesante para nosotros hacer una visita rápida al servicio de Auth aquí. 436 00:31:51,640 --> 00:31:54,060 El servicio Auth aquí de nuevo, 437 00:31:54,060 --> 00:31:59,875 observe que en el servicio Auth aquí estoy importando este AngularFireAuth desde 438 00:31:59,875 --> 00:32:06,435 el submódulo AngularFire a npm aquí. 439 00:32:06,435 --> 00:32:11,005 Entonces, aquí puedes ver que estoy importando AngularFireAuth y esto 440 00:32:11,005 --> 00:32:15,970 me da acceso al aspecto de autenticación de Firebase. 441 00:32:15,970 --> 00:32:21,690 Ahora, veamos cómo funciona realmente la autenticación de Firebase desde nuestra aplicación angular. 442 00:32:21,690 --> 00:32:26,300 Ahora comenzaremos eso mirando cómo se implementa el inicio de sesión. 443 00:32:26,300 --> 00:32:28,775 Entonces, aquí es donde implemento el inicio de sesión, 444 00:32:28,775 --> 00:32:31,420 donde estoy usando el correo electrónico y la contraseña. 445 00:32:31,420 --> 00:32:38,090 Entonces, esta parte cuando importo AngularFireAuth aquí, 446 00:32:38,090 --> 00:32:44,910 observe que el constructor estoy inyectando AngularFireAuth en mi constructor. 447 00:32:44,910 --> 00:32:47,260 Entonces, esto inyectará el servicio AngularFireAuth 448 00:32:47,260 --> 00:32:50,240 en mi constructor y esto me da acceso a 449 00:32:50,240 --> 00:32:55,975 la autenticación de Firebase en el sitio del servidor para que pueda autenticar a los usuarios. 450 00:32:55,975 --> 00:33:01,555 Por lo tanto, si quiero autenticar a un usuario que está iniciando sesión con el correo electrónico y la contraseña. 451 00:33:01,555 --> 00:33:04,490 Esta función de inicio de sesión es la que se va a llamar 452 00:33:04,490 --> 00:33:07,300 cuando escriba mi correo electrónico y contraseña en 453 00:33:07,300 --> 00:33:10,110 el diálogo de inicio de sesión que aparece y luego 454 00:33:10,110 --> 00:33:13,735 haga clic en el botón Enviar o el botón de inicio de sesión aquí, 455 00:33:13,735 --> 00:33:16,120 esta función de inicio de sesión va a ser llamada y 456 00:33:16,120 --> 00:33:20,845 la información del usuario, pero recupero de la componente de inicio de sesión se pasa aquí. 457 00:33:20,845 --> 00:33:22,985 Entonces, cuando llegue aquí, 458 00:33:22,985 --> 00:33:29,410 voy a usar este aFauth como ves, acabo de inyectarlo en el constructor, 459 00:33:29,410 --> 00:33:33,995 y esto suministra este objeto Auth aquí, 460 00:33:33,995 --> 00:33:38,715 que proporciona este método llamado «inicio de sesión con correo electrónico y contraseña». 461 00:33:38,715 --> 00:33:43,530 Así que este inicio de sesión con correo electrónico y contraseña toma dos parámetros aquí como 462 00:33:43,530 --> 00:33:49,495 cabría esperar el nombre de usuario o el correo electrónico y la contraseña aquí. 463 00:33:49,495 --> 00:33:53,310 Así que estas dos piezas de información 464 00:33:53,310 --> 00:33:57,290 lo estoy proporcionando como los dos parámetros para este inicio de sesión con correo electrónico y contraseña. 465 00:33:57,290 --> 00:33:59,965 Por lo tanto, cuando haga clic en eso verá que 466 00:33:59,965 --> 00:34:03,790 dice que el primero debe ser correo electrónico y el segundo debe ser contraseña. 467 00:34:03,790 --> 00:34:05,455 Ahora, de la forma 468 00:34:05,455 --> 00:34:09,590 en que lo he configurado, este objeto de usuario que viene contiene el correo electrónico en el 469 00:34:09,590 --> 00:34:16,735 user.username aquí y la contraseña en la propiedad de contraseña del objeto de usuario. 470 00:34:16,735 --> 00:34:18,925 Entonces, cuando se obtenga eso, 471 00:34:18,925 --> 00:34:24,670 publicaré esta información y luego cuando esto se complete con éxito, 472 00:34:24,670 --> 00:34:27,430 eso significa que el usuario está conectado correctamente, 473 00:34:27,430 --> 00:34:29,075 si hay un error, 474 00:34:29,075 --> 00:34:31,510 entonces capta el error aquí en este momento 475 00:34:31,510 --> 00:34:33,960 no estoy haciendo nada específicamente con el error que puede 476 00:34:33,960 --> 00:34:38,820 desea imprimir este mensaje de error para indicar que el usuario no puede iniciar sesión, etc. 477 00:34:38,820 --> 00:34:42,070 Por lo tanto, no he implementado esa parte del trato aquí, 478 00:34:42,070 --> 00:34:45,390 solo lo estoy dejando ahí si desea registrar 479 00:34:45,390 --> 00:34:48,740 esta información en la consola, puede hacerlo cuando ocurren errores. 480 00:34:48,740 --> 00:34:51,495 Ahora para cerrar sesión, en Firebase. 481 00:34:51,495 --> 00:34:56,610 Una vez más tomamos la ayuda del aFauth que hemos inyectado y Auth en él, 482 00:34:56,610 --> 00:34:58,975 y esto proporciona este método llamado «cerrar sesión», 483 00:34:58,975 --> 00:35:01,815 que cuando se llama cerrará la sesión del 484 00:35:01,815 --> 00:35:05,610 usuario actualmente conectado y por lo que esa es una forma de manejar esto. 485 00:35:05,610 --> 00:35:09,795 Ahora, debe preguntarse cómo manejo la parte de inicio de sesión de Google. 486 00:35:09,795 --> 00:35:17,980 Ahora esto también se maneja con el AfAuth por lo que el módulo AngularFire2 que estoy usando, 487 00:35:17,980 --> 00:35:22,780 nos proporciona esta información para estos métodos a través 488 00:35:22,780 --> 00:35:28,880 del módulo de Firebase que también se usa en AngularFire2, 489 00:35:28,880 --> 00:35:33,105 y por lo que esto proporciona este método llamado inicio de sesión con pop y cuando 490 00:35:33,105 --> 00:35:37,280 iniciamos sesión con pop- aquí arriba note lo que estoy especificando aquí. 491 00:35:37,280 --> 00:35:42,650 Por lo tanto, estoy diciendo «nuevo Firebase.auth.googleAuthProvider». 492 00:35:42,650 --> 00:35:48,200 Ahora, también puede hacer Firebase.auth.facebookAuthProvider y otros. 493 00:35:48,200 --> 00:35:52,170 Por lo tanto, como vio en el ejercicio anterior, 494 00:35:52,170 --> 00:35:58,835 Firebase le permite iniciar sesión de terceros usando Google, 495 00:35:58,835 --> 00:36:01,520 Facebook, GitHub y Twitter. 496 00:36:01,520 --> 00:36:04,440 Por lo tanto, puede configurar estos adecuadamente, 497 00:36:04,440 --> 00:36:07,260 ya que he activado solo la autorización de Google. 498 00:36:07,260 --> 00:36:10,470 Así es como lo configuraré para usar 499 00:36:10,470 --> 00:36:16,160 mi autorización de Google aquí y esta única línea de código que adjunté aquí, 500 00:36:16,160 --> 00:36:23,650 es la que provoca la ventana emergente del navegador que me sugiere autorizar 501 00:36:23,650 --> 00:36:31,580 mi Firebase a usar la autorización de Google usando mi cuenta de Google aquí. 502 00:36:31,580 --> 00:36:34,210 Así que esa es la segunda parte que he preparado aquí. 503 00:36:34,210 --> 00:36:38,929 Así que tenga en cuenta que el servicio Auth ha 504 00:36:38,929 --> 00:36:44,170 simplificado significativamente en comparación con lo que hicimos con la versión anterior de esta aplicación. 505 00:36:44,170 --> 00:36:49,755 Así que puede comparar las dos versiones para ver cómo esto es diferente de la otra. 506 00:36:49,755 --> 00:36:54,410 Ahora, no sólo que este aFauth que hemos inyectado aquí, 507 00:36:54,410 --> 00:36:57,365 parte AngularFireAuth que hemos inyectado aquí, 508 00:36:57,365 --> 00:37:01,800 también proporciona este observable llamado «AuthState». 509 00:37:01,800 --> 00:37:08,045 Este AuthState observable, se puede suscribir y este «AuthState» observable, 510 00:37:08,045 --> 00:37:10,130 como se ve aquí, 511 00:37:10,130 --> 00:37:15,880 que he declarado aquí como un firebase.user observable. 512 00:37:15,880 --> 00:37:21,400 Así que esa es la información que se aplica aquí y también podemos configurar 513 00:37:21,400 --> 00:37:27,465 otra variable aquí llamada usuario actual que es del tipo usuario Firebase aquí. 514 00:37:27,465 --> 00:37:31,610 Por lo tanto, este afAuthState es un observable 515 00:37:31,610 --> 00:37:35,570 al que puedo suscribirme y cada vez que este 516 00:37:35,570 --> 00:37:38,935 authState cambie, el authState realiza un seguimiento del estado de autenticación 517 00:37:38,935 --> 00:37:42,780 del usuario si el usuario ha iniciado sesión o cerrado sesión y si el usuario está conectado, 518 00:37:42,780 --> 00:37:47,930 entonces esto se suscribirá me devolverá el y de 519 00:37:47,930 --> 00:37:53,475 la información del usuario podemos recuperar una gran cantidad de información incluyendo el nombre para mostrar, 520 00:37:53,475 --> 00:37:58,475 el correo electrónico, el ID de perfil y luego la 521 00:37:58,475 --> 00:38:04,535 imagen de avatar para el usuario si se ha configurado para las cuentas específicas. 522 00:38:04,535 --> 00:38:07,555 Todos estos serán suministrados automáticamente por el usuario. 523 00:38:07,555 --> 00:38:10,660 Por lo tanto, cuando haga clic en «usuario» y luego punto, 524 00:38:10,660 --> 00:38:14,445 verá que proporciona toda esta información para nosotros. 525 00:38:14,445 --> 00:38:16,870 Por lo tanto, es un correo electrónico de nombre para mostrar, 526 00:38:16,870 --> 00:38:19,835 si el correo electrónico está verificado o no, y así sucesivamente. 527 00:38:19,835 --> 00:38:22,855 Así que algunas de las cosas que son de interés específico para nosotros. 528 00:38:22,855 --> 00:38:29,325 URL de la foto que se puede utilizar para recuperar la información del avatar para el usuario, 529 00:38:29,325 --> 00:38:32,430 ID del proveedor que especifica quién está 530 00:38:32,430 --> 00:38:35,755 proporcionando esta información para usted esto sería ya sea ID de Facebook, ID de 531 00:38:35,755 --> 00:38:43,415 Google y GitHub ID y así sucesivamente e información adicional incluso el token de actualización. 532 00:38:43,415 --> 00:38:46,390 Así que ve un montón de información 533 00:38:46,390 --> 00:38:49,840 que se pone a su disposición a través del objeto de usuario que es 534 00:38:49,840 --> 00:38:53,285 devuelto por este Authstate cuando se suscribe a él 535 00:38:53,285 --> 00:38:57,400 y también déjame llamar su atención sobre el UID el ID de usuario, 536 00:38:57,400 --> 00:39:01,830 y esto es lo que se puede usar para indexar al usuario en nuestra aplicación. 537 00:39:01,830 --> 00:39:05,950 Entonces ese es el servicio de autenticación de la forma en que 538 00:39:05,950 --> 00:39:10,325 lo he configurado para usar la autenticación de Firebase en esta aplicación. 539 00:39:10,325 --> 00:39:14,730 Por lo tanto, dos cambios que he reflejado para mostrar 540 00:39:14,730 --> 00:39:19,180 cómo se modifican mis servicios para usar Firebase. 541 00:39:19,180 --> 00:39:23,605 Gran parte de las actualizaciones que he hecho a mi aplicación Angular están todas 542 00:39:23,605 --> 00:39:28,115 en los servicios para hacer uso de Firebase instalado. 543 00:39:28,115 --> 00:39:31,900 Por lo tanto, debido al bebé estructurado de aplicación angular, 544 00:39:31,900 --> 00:39:34,390 los componentes eran simplemente dependiendo de 545 00:39:34,390 --> 00:39:37,330 los servicios y los servicios eran los que estamos hablando con el back-end. 546 00:39:37,330 --> 00:39:39,660 Por lo tanto, gran parte de las actualizaciones que he hecho a 547 00:39:39,660 --> 00:39:43,040 mi aplicación Angular implican simplemente actualizar estos servicios para 548 00:39:43,040 --> 00:39:50,660 usar el back-end de Firebase de Google como un servicio con los dos módulos npm, 549 00:39:50,660 --> 00:39:53,815 Firebase y AngularFireAuth aquí. 550 00:39:53,815 --> 00:39:58,690 Por lo tanto, vería que gran parte de las actualizaciones está restringida a 551 00:39:58,690 --> 00:40:04,285 todos estos servicios que tengo en la carpeta de servicios de mi aplicación Angular. 552 00:40:04,285 --> 00:40:06,710 Por supuesto, necesitaba hacer un poco de 553 00:40:06,710 --> 00:40:09,615 ajustes mínimos en el componente dishdetail 554 00:40:09,615 --> 00:40:15,430 y el componente de encabezado para que funcione con Firebase. 555 00:40:15,430 --> 00:40:19,485 Puede hacer una visita rápida al headercomponent.ts, 556 00:40:19,485 --> 00:40:25,760 el headercomponent.html y el dishdetailcomponent.tsfile para ver cómo 557 00:40:25,760 --> 00:40:29,210 ha cambiado el código entre la versión anterior 558 00:40:29,210 --> 00:40:32,070 y la versión actual de la aplicación Angular, 559 00:40:32,070 --> 00:40:36,360 la versión anterior, me refiero a la versión que usamos para 560 00:40:36,360 --> 00:40:39,490 comunicándonos con nuestro 561 00:40:39,490 --> 00:40:43,230 servidor X plus Mongo DB que utilizamos en el ejercicio anterior. 562 00:40:43,230 --> 00:40:48,265 Ahora, un lugar más donde me verías haciendo modificaciones, 563 00:40:48,265 --> 00:40:51,640 Curiosamente, es en el servicio favorito. 564 00:40:51,640 --> 00:40:52,930 En el servicio favorito, 565 00:40:52,930 --> 00:40:55,280 la forma en que almacené los favoritos del usuario, 566 00:40:55,280 --> 00:40:58,410 es que los favoritos es una colección en 567 00:40:58,410 --> 00:41:02,015 mi sitio de servidor y el favorito en sí contiene documentos. 568 00:41:02,015 --> 00:41:06,550 Cada documento contiene el ID de usuario y el ID del plato. 569 00:41:06,550 --> 00:41:09,210 Por lo tanto, un usuario en particular podría tener 570 00:41:09,210 --> 00:41:13,335 múltiples documentos cada uno de ellos almacenando el ID de usuario y el ID del plato. 571 00:41:13,335 --> 00:41:20,035 Por lo tanto, una colección de ellos juntos definirá todos los favoritos para un usuario en particular. 572 00:41:20,035 --> 00:41:25,865 Descubrí que esta es una mejor forma de organizar estos datos en Firebase. 573 00:41:25,865 --> 00:41:29,195 En nuestro MongoDB más mongos, 574 00:41:29,195 --> 00:41:34,230 viste que había incrustado en una variedad de ID de plato en 575 00:41:34,230 --> 00:41:40,575 el documento de favoritos y luego definir el esquema favorito de esa manera. 576 00:41:40,575 --> 00:41:43,010 Aquí, estoy usando 577 00:41:43,010 --> 00:41:47,395 un documento separado para rastrear cada uno de los favoritos para cada uno de los usuarios. 578 00:41:47,395 --> 00:41:50,295 Ahora, debido a que Firebase admite consultas, por lo tanto, 579 00:41:50,295 --> 00:41:55,545 puedo consultar mi Firebase y extraer todos los documentos que tienen los mismos ID de usuario, 580 00:41:55,545 --> 00:41:58,585 que coinciden con el usuario que está conectado actualmente y luego 581 00:41:58,585 --> 00:42:02,405 extraer los ID de plato correspondientes de los favoritos. 582 00:42:02,405 --> 00:42:05,250 Luego iré y luego consultaré mi servidor 583 00:42:05,250 --> 00:42:08,475 y obtendré la información del plato para cada uno de esos platos. 584 00:42:08,475 --> 00:42:13,325 Por lo tanto, implica múltiples viajes al servidor con el fin de obtener 585 00:42:13,325 --> 00:42:18,680 toda la información de mis platos favoritos antes de poder renderizar mi lista de favoritos. 586 00:42:18,680 --> 00:42:24,180 Pero, esa es la mejor manera de hacer que Firebase funcione con mi aplicación Angular. 587 00:42:24,180 --> 00:42:26,945 Tal vez, en una fecha futura, 588 00:42:26,945 --> 00:42:30,740 Firebase Cloud Firestone podría extenderse para 589 00:42:30,740 --> 00:42:34,475 permitir algo así como poblar que hicimos con mongos. 590 00:42:34,475 --> 00:42:38,570 En cuyo caso, actualizaré el código para usar esa forma 591 00:42:38,570 --> 00:42:42,705 de obtener toda la información del plato automáticamente. 592 00:42:42,705 --> 00:42:48,420 Por lo tanto, la carga de construir este documento compuesto se desplazará al sitio del servidor. 593 00:42:48,420 --> 00:42:51,740 En este momento, mi cliente está haciendo mucho del trabajo aquí. 594 00:42:51,740 --> 00:42:53,795 Ahora, cuando entre aquí, 595 00:42:53,795 --> 00:42:56,400 verá que en el método GetFavorites, 596 00:42:56,400 --> 00:42:59,495 verá cómo estoy accediendo a mis favoritos aquí. 597 00:42:59,495 --> 00:43:02,835 Entonces, cuando hago «GetFavorites», estoy consultando 598 00:43:02,835 --> 00:43:06,220 esta colección de favoritos, pero noto que aquí, 599 00:43:06,220 --> 00:43:12,545 digo «ref dónde está este ID de usuario». 600 00:43:12,545 --> 00:43:15,335 Este ID de usuario que obtengo aquí. 601 00:43:15,335 --> 00:43:18,320 Por lo tanto, en el constructor de mi servidor favorito, 602 00:43:18,320 --> 00:43:22,855 me estoy suscribiendo a este servicio de autenticación el estado Obtener autenticación en el servicio de autenticación. 603 00:43:22,855 --> 00:43:25,075 Por lo tanto, en el servicio de autenticación si entra, 604 00:43:25,075 --> 00:43:28,615 verá este método llamado Obtener estado de autenticación aquí. 605 00:43:28,615 --> 00:43:33,175 El estado Get Auth devuelve el this.authState, 606 00:43:33,175 --> 00:43:35,575 que he definido allí. 607 00:43:35,575 --> 00:43:39,760 Así que, esto será un observable como usted me ve declarando aquí. 608 00:43:39,760 --> 00:43:41,800 Entonces, ese observable es el que voy 609 00:43:41,800 --> 00:43:46,755 a usar dentro de mi servicio favorito y luego suscribirme a eso. 610 00:43:46,755 --> 00:43:53,720 Por lo tanto, cada vez que la información del usuario cambie esto se reflejará automáticamente aquí. 611 00:43:53,720 --> 00:43:59,180 Entonces, vio que incluso en la aplicación anterior había usado un observable, 612 00:43:59,180 --> 00:44:04,525 para reflejar la información del usuario en mi componente de encabezado. 613 00:44:04,525 --> 00:44:06,030 Tipo de enfoque similar, 614 00:44:06,030 --> 00:44:08,600 que estoy usando en mi componente favorito aquí, 615 00:44:08,600 --> 00:44:13,055 para obtener el ID de usuario para el usuario que está conectado actualmente. 616 00:44:13,055 --> 00:44:16,385 Por lo tanto, cuando consulto la colección My Favorites, 617 00:44:16,385 --> 00:44:22,825 consultaré y extraeré solo aquellos documentos donde el usuario coincide con esto. 618 00:44:22,825 --> 00:44:26,220 Entonces solo estoy usando los cambios de valor aquí. 619 00:44:26,220 --> 00:44:29,210 Por lo tanto, solo estoy extrayendo todos los documentos, 620 00:44:29,210 --> 00:44:34,650 que no me importa la identificación del documento favorito en este momento. 621 00:44:34,650 --> 00:44:37,970 Por lo tanto, sólo estoy extrayéndolos todos y usándolos. 622 00:44:37,970 --> 00:44:40,690 Si el usuario no ha iniciado sesión y como puede ver, 623 00:44:40,690 --> 00:44:43,620 estoy arrojando un error aquí con el dicho observable, 624 00:44:43,620 --> 00:44:50,735 «ningún usuario ha iniciado sesión» eso es lo que se muestra en mi discurso favorito allí. 625 00:44:50,735 --> 00:44:53,960 Ahora, los isFavorites también se actualizan aquí, 626 00:44:53,960 --> 00:44:57,685 pero en los isFavorites lo que estoy haciendo es ir a la base de datos. 627 00:44:57,685 --> 00:45:02,795 Ahora aquí, accederé a la base de datos diciendo, 628 00:45:02,795 --> 00:45:06,135 «DB es igual a firebase.firestore». 629 00:45:06,135 --> 00:45:09,610 Recuerde que estoy importando Firebase aquí, 630 00:45:09,610 --> 00:45:12,270 importar estrella como Firebase aquí. 631 00:45:12,270 --> 00:45:17,970 El Firestore angular en sí no me proporciona un método para 632 00:45:17,970 --> 00:45:23,970 hacer múltiples consultas compuestas aquí. 633 00:45:23,970 --> 00:45:29,495 El Firestore Angular o el Fuego Angular no me proporciona hacer eso. 634 00:45:29,495 --> 00:45:33,390 Entonces, es por eso que tengo que recurrir al uso de Firebase Firestore. 635 00:45:33,390 --> 00:45:35,840 Entonces, cuando digo Firebase Firestore, 636 00:45:35,840 --> 00:45:42,310 esto me da una referencia a la base de datos Firestore y luego puedo entrar en esta base de datos 637 00:45:42,310 --> 00:45:48,780 y luego decir «favoritos de la colección de DB» y luego puedo hacer múltiples consultas aquí. 638 00:45:48,780 --> 00:45:55,470 Por lo tanto, estoy diciendo, .where user is this.wheredish es el ID del plato. 639 00:45:55,470 --> 00:45:59,380 Por lo tanto, si quiero obtener un favorito específico. 640 00:45:59,380 --> 00:46:03,640 Para comprobar si un plato específico es el favorito de un usuario obtengo 641 00:46:03,640 --> 00:46:08,285 ese documento en particular donde el usuario y el plato coinciden con estos dos, 642 00:46:08,285 --> 00:46:12,110 si no coinciden, entonces volverá con un vacío. 643 00:46:12,110 --> 00:46:16,610 Entonces, que extraigo y luego devuelvo este valor aquí. 644 00:46:16,610 --> 00:46:18,900 Ahora, luego publico favoritos, 645 00:46:18,900 --> 00:46:25,770 ves cómo estoy haciendo esto estoy diciendo que estos favoritos de la colección AFS y voy a decir «agregar». 646 00:46:25,770 --> 00:46:29,260 Mira el documento que estoy almacenando en mis favoritos. 647 00:46:29,260 --> 00:46:32,130 El documento contiene el ID de usuario y el ID del plato. 648 00:46:32,130 --> 00:46:36,030 Por lo tanto, estas dos piezas de información adjuntas aquí y si 649 00:46:36,030 --> 00:46:41,295 no, entonces rechazará la promesa sin que ningún usuario haya iniciado sesión aquí. 650 00:46:41,295 --> 00:46:44,915 Del mismo modo, para el favorito de eliminación que he implementado aquí. Dedique 651 00:46:44,915 --> 00:46:48,735 algún tiempo nuevamente a revisar este código para entender cómo he 652 00:46:48,735 --> 00:46:53,375 aprovechado los módulos Firebase y Angular fire to npm 653 00:46:53,375 --> 00:47:02,170 para comunicarme con mi servidor Firebase que he configurado en el ejercicio anterior. 654 00:47:02,170 --> 00:47:05,880 Con esto, le he dado una visión general rápida de 655 00:47:05,880 --> 00:47:10,280 cómo puede configurar su aplicación Angular para interactuar con 656 00:47:10,280 --> 00:47:13,980 Firebase back-end como servicio y luego poder 657 00:47:13,980 --> 00:47:19,970 admitir varias operaciones que tiene dentro de su aplicación Angular. 658 00:47:19,970 --> 00:47:21,905 Como he demostrado anteriormente, 659 00:47:21,905 --> 00:47:24,150 esta aplicación Angular se parece exactamente a 660 00:47:24,150 --> 00:47:26,690 la versión anterior de la aplicación Angular donde estábamos 661 00:47:26,690 --> 00:47:31,915 usando nuestra propia versión de nuestro servidor Express MongoDB. 662 00:47:31,915 --> 00:47:38,510 Ahora, con esto completo este ejercicio en particular donde he ilustrado en 663 00:47:38,510 --> 00:47:42,020 esta lección sobre back-end como servicio y también he demostrado 664 00:47:42,020 --> 00:47:46,630 Firebase como un ejemplo de back-end como servicio.