1 00:00:03,900 --> 00:00:07,540 Vamos a pescar en el mercado de bajos. 2 00:00:07,540 --> 00:00:10,520 Empezaremos con Firebase, 3 00:00:10,520 --> 00:00:13,560 la oferta premium de Google. 4 00:00:13,560 --> 00:00:16,190 Vamos a entender un poco sobre Firebase, 5 00:00:16,190 --> 00:00:19,375 configurar un servidor Firebase, 6 00:00:19,375 --> 00:00:22,340 y luego vamos a ver la aplicación angular, 7 00:00:22,340 --> 00:00:24,790 que voy a adaptar en función de 8 00:00:24,790 --> 00:00:29,340 la aplicación angular anterior que usted ha visto en la conferencia anterior. 9 00:00:29,340 --> 00:00:34,890 Lo modificaremos para hacer uso de Firebase como back-end. 10 00:00:34,890 --> 00:00:38,890 Por lo tanto, como veríamos al final de esta lección, 11 00:00:38,890 --> 00:00:41,440 este ejercicio y el siguiente ejercicio, 12 00:00:41,440 --> 00:00:46,600 podemos tomar fácilmente una aplicación angular y modernizarla para hacer uso de 13 00:00:46,600 --> 00:00:52,245 Firebase como el back-end como proveedor de servicios. 14 00:00:52,245 --> 00:00:54,612 Para comenzar el viaje, 15 00:00:54,612 --> 00:01:00,725 vayamos a firebase.google.com para entender un poco acerca de Firebase. 16 00:01:00,725 --> 00:01:04,635 Una especie de tema de hacer una presentación completa sobre Firebase, 17 00:01:04,635 --> 00:01:06,550 rápidamente le revisaré lo que se ha 18 00:01:06,550 --> 00:01:09,370 explicado en el sitio de Firebase en sí porque le dan 19 00:01:09,370 --> 00:01:15,125 suficientes detalles sobre cómo Firebase soporta varias características. 20 00:01:15,125 --> 00:01:19,810 Así que vamos a revisar este sitio web para entender cómo funciona Firebase. 21 00:01:19,810 --> 00:01:22,480 Así que si vas al sitio web, como puedes ver, 22 00:01:22,480 --> 00:01:27,955 dice que Firebase te ayuda a crear mejores aplicaciones móviles y hacer crecer tu negocio. 23 00:01:27,955 --> 00:01:30,750 Y luego, como puede ver aquí, 24 00:01:30,750 --> 00:01:36,280 le explica los detalles sobre cómo le permite crear sus aplicaciones 25 00:01:36,280 --> 00:01:41,641 rápidamente sin tener que administrar la infraestructura de back-end para su aplicación, 26 00:01:41,641 --> 00:01:46,875 y una única consola que reúne un montón de productos que funcionan juntos. 27 00:01:46,875 --> 00:01:56,305 Por lo tanto, estos son todos los productos ofrecidos por Google que funcionan juntos para satisfacer sus necesidades de back-end. 28 00:01:56,305 --> 00:02:00,010 Y también aquí, puede aprovechar 29 00:02:00,010 --> 00:02:03,585 muchos de los productos complementarios que están disponibles en Google. 30 00:02:03,585 --> 00:02:06,055 Así que en particular, en este ejercicio, 31 00:02:06,055 --> 00:02:09,620 vamos a aprovechar la nube Firestore, 32 00:02:09,620 --> 00:02:12,775 la nueva provisión de Google. 33 00:02:12,775 --> 00:02:15,740 Vamos a ver más detalles sobre eso más adelante. 34 00:02:15,740 --> 00:02:18,520 Observamos cómo podemos usar el soporte de autenticación 35 00:02:18,520 --> 00:02:22,030 proporcionado por Firebase para autenticar usuarios. 36 00:02:22,030 --> 00:02:27,880 Examinaremos el almacenamiento en la nube para almacenar nuestros archivos de imagen y servirlos. 37 00:02:27,880 --> 00:02:34,650 Y luego también veremos cómo podemos aprovechar todo esto junto con 38 00:02:34,650 --> 00:02:41,170 el módulo de nodo relacionado con Firebase-que podemos incorporar junto con el 39 00:02:41,170 --> 00:02:46,270 módulo de nodo angularfire2 en nuestra aplicación angular para que 40 00:02:46,270 --> 00:02:51,910 podamos comunicarnos con nuestro backend Firebase como servicio. 41 00:02:51,910 --> 00:02:55,300 Además, mirando más detalles, 42 00:02:55,300 --> 00:02:58,390 vemos cómo el 43 00:02:58,390 --> 00:03:04,525 propio tablero de Firebase proporciona varias funciones, como permitirle implementar 44 00:03:04,525 --> 00:03:11,200 diferentes funciones de usuario para una incorporación diferente de su aplicación y 45 00:03:11,200 --> 00:03:17,590 lo fácil que es integrar su backend con un iOS, 46 00:03:17,590 --> 00:03:20,110 Android o la aplicación web . 47 00:03:20,110 --> 00:03:26,305 En particular, vamos a ver la aplicación web y el uso de JavaScript y 48 00:03:26,305 --> 00:03:29,290 también el uso de cómo vamos a 49 00:03:29,290 --> 00:03:33,610 incorporar esto a nuestra aplicación angular un poco más tarde. 50 00:03:33,610 --> 00:03:39,900 Además, Firebase proporciona una base de datos en tiempo real, 51 00:03:39,900 --> 00:03:42,850 tanto la base de datos original en tiempo real, 52 00:03:42,850 --> 00:03:45,040 como la nueva Cloud Firestone, 53 00:03:45,040 --> 00:03:50,905 le permiten sincronizar automáticamente los datos entre varios dispositivos de usuario. 54 00:03:50,905 --> 00:03:52,900 Por lo tanto, cualquier cambio realizado en 55 00:03:52,900 --> 00:03:59,625 el lado del servidor se reflejará automáticamente en todos los clientes 56 00:03:59,625 --> 00:04:06,996 , y, por supuesto, puede leer más detalles sobre Firebase en este sitio web. 57 00:04:06,996 --> 00:04:13,885 Y es muy fácil empezar porque la oferta básica es gratuita para los usuarios. 58 00:04:13,885 --> 00:04:17,854 Así que empecemos a usar Firebase. 59 00:04:17,854 --> 00:04:25,085 Configuraremos nuestra cuenta de Firebase y luego accederemos y configuraremos nuestro back-end como un servidor, 60 00:04:25,085 --> 00:04:29,025 que luego aprovecharemos de nuestra aplicación angular. 61 00:04:29,025 --> 00:04:31,995 Así que este es un recorrido rápido por Firebase, 62 00:04:31,995 --> 00:04:34,880 pero en lugar de solo mirar estos, 63 00:04:34,880 --> 00:04:38,665 vamos a entrar y realmente ensuciarnos las manos, 64 00:04:38,665 --> 00:04:41,970 configurando una base de Firebase de 65 00:04:41,970 --> 00:04:45,900 nuevo en el servicio y luego usándola en nuestra aplicación angular. 66 00:04:45,900 --> 00:04:47,593 Así que para empezar, 67 00:04:47,593 --> 00:04:49,910 como verá hacia el borde derecho aquí, 68 00:04:49,910 --> 00:04:51,510 dice ir a la consola. 69 00:04:51,510 --> 00:04:56,705 Obviamente, deberías tener una cuenta de Google para poder usar Firebase. 70 00:04:56,705 --> 00:04:58,264 Eso no hace falta decir, 71 00:04:58,264 --> 00:05:00,380 y usted debe haber iniciado sesión en su cuenta de Google. 72 00:05:00,380 --> 00:05:01,640 Así que, como puedes ver, 73 00:05:01,640 --> 00:05:03,225 ya estoy en mi cuenta de Google. 74 00:05:03,225 --> 00:05:05,080 Así que eso me dará acceso a mi consola. 75 00:05:05,080 --> 00:05:06,857 Si no ha iniciado sesión, 76 00:05:06,857 --> 00:05:09,871 entonces es mejor que inicie sesión en su cuenta de Google. 77 00:05:09,871 --> 00:05:12,150 Por lo tanto, cuando vaya a la consola, 78 00:05:12,150 --> 00:05:18,620 esto le llevará a la consola de servicios de Firebase aquí, 79 00:05:18,620 --> 00:05:22,335 donde puede configurar proyectos. 80 00:05:22,335 --> 00:05:23,825 Entonces, cuando vas a la consola, 81 00:05:23,825 --> 00:05:26,460 como puedes ver, dice agregar un proyecto. 82 00:05:26,460 --> 00:05:27,605 Y, como pueden ver, 83 00:05:27,605 --> 00:05:30,675 ya he intentado configurar 84 00:05:30,675 --> 00:05:35,750 otro proyecto de Firebase antes de explicártelo. 85 00:05:35,750 --> 00:05:38,190 Así que vamos a establecer un proyecto aquí. 86 00:05:38,190 --> 00:05:41,065 Así que haremos clic en el proyecto de agregar, 87 00:05:41,065 --> 00:05:46,865 y eso debería abrir una pequeña ventana agradable, 88 00:05:46,865 --> 00:05:48,765 donde puede escribir información. 89 00:05:48,765 --> 00:05:53,750 Así que llamaremos a este proyecto como ConfusionServer, 90 00:05:53,750 --> 00:06:00,793 como cabría esperar y lo configuraremos donde quiera que se encuentre en este momento. 91 00:06:00,793 --> 00:06:06,615 Así que voy a configurarlo para usar 92 00:06:06,615 --> 00:06:15,194 Hong Kong y crear un proyecto. 93 00:06:15,194 --> 00:06:17,850 Y una vez creado tu proyecto, 94 00:06:17,850 --> 00:06:21,575 esto es lo que te presentará Firebase. 95 00:06:21,575 --> 00:06:28,980 Y, aquí, vería que lo primero que querría 96 00:06:28,980 --> 00:06:32,430 obtener es información sobre su configuración de Firebase para 97 00:06:32,430 --> 00:06:36,670 que pueda usarla dentro de su aplicación angular. 98 00:06:36,670 --> 00:06:37,950 Así que para hacer eso, 99 00:06:37,950 --> 00:06:40,985 haga clic en este botón aquí. 100 00:06:40,985 --> 00:06:44,085 Así que dice, agregue Firebase a su aplicación web. 101 00:06:44,085 --> 00:06:47,730 Y esto le proporcionará un montón de información que 102 00:06:47,730 --> 00:06:51,750 debe copiar y guardar porque 103 00:06:51,750 --> 00:06:54,585 usaré esta información para configurar 104 00:06:54,585 --> 00:07:00,045 mi aplicación angular un poco más adelante en el siguiente ejercicio. 105 00:07:00,045 --> 00:07:04,440 Por lo tanto, guarde esta información en una ubicación conveniente para que 106 00:07:04,440 --> 00:07:10,350 pueda hacer uso de esta información cuando configure el sitio de su cliente. 107 00:07:10,350 --> 00:07:14,310 El siguiente paso, estableceré un par de cuentas aquí. 108 00:07:14,310 --> 00:07:17,235 Así que déjame hacer clic en la autenticación aquí. 109 00:07:17,235 --> 00:07:20,655 Y cuando se abra la autenticación, 110 00:07:20,655 --> 00:07:27,060 configuraremos los métodos de inicio de sesión que usaremos para nuestro servidor Firebase, 111 00:07:27,060 --> 00:07:29,865 y en mi caso, 112 00:07:29,865 --> 00:07:38,520 usaré la contraseña de correo electrónico como una de las opciones. 113 00:07:38,520 --> 00:07:41,080 Por lo tanto, habilitaremos la contraseña de correo electrónico. 114 00:07:41,080 --> 00:07:45,095 También habilitaré el inicio de sesión de Google. 115 00:07:45,095 --> 00:07:46,560 Así que estos dos están habilitados. 116 00:07:46,560 --> 00:07:55,000 Si lo desea, puede habilitar otras formas de autenticar a los usuarios. 117 00:07:55,000 --> 00:07:57,705 A continuación, ir a los usuarios, ahora, 118 00:07:57,705 --> 00:08:02,895 si inicia sesión en esta aplicación con su cuenta de Google, 119 00:08:02,895 --> 00:08:07,812 ese usuario se agregará automáticamente a su sistema. 120 00:08:07,812 --> 00:08:13,610 Pero ahora mismo, voy a configurar un usuario con un correo electrónico y una contraseña. 121 00:08:13,610 --> 00:08:21,195 Así que configuraré un admin@confusion.net, 122 00:08:21,195 --> 00:08:31,105 y estableceré una contraseña aquí y agregaré al usuario. 123 00:08:31,105 --> 00:08:34,385 Así que este será un usuario, 124 00:08:34,385 --> 00:08:38,630 que puede iniciar sesión con la combinación de correo electrónico y contraseña. 125 00:08:38,630 --> 00:08:45,285 También podemos registrarnos para acceder a esto a través de nuestra cuenta de Google. 126 00:08:45,285 --> 00:08:47,690 Así que mi aplicación angular, 127 00:08:47,690 --> 00:08:51,770 voy a configurar para usar tanto la forma de contraseña de correo electrónico de inicio de sesión 128 00:08:51,770 --> 00:08:56,215 como por el inicio de sesión basado en la cuenta de Google. 129 00:08:56,215 --> 00:09:00,700 Después de eso, entraremos en almacenamiento. 130 00:09:00,700 --> 00:09:03,620 Así que vamos a configurar el almacenamiento a continuación. 131 00:09:03,620 --> 00:09:09,650 Así que el almacenamiento es donde puede configurar una forma 132 00:09:09,650 --> 00:09:18,035 de cargar archivos en su servidor y luego ponerlos a disposición para su uso. 133 00:09:18,035 --> 00:09:22,084 Así que este almacenamiento, voy a configurar mi almacenamiento para almacenar 134 00:09:22,084 --> 00:09:28,073 las imágenes que vamos a utilizar y guardar desde nuestro sitio de servidor. 135 00:09:28,073 --> 00:09:30,025 Entonces, cuando configure el almacenamiento, 136 00:09:30,025 --> 00:09:33,590 se le ocurrirá el conjunto de reglas de seguridad, 137 00:09:33,590 --> 00:09:38,880 que especifican qué tipo de operaciones permitirán el usuario. 138 00:09:38,880 --> 00:09:40,400 Entonces dice permitir leer, 139 00:09:40,400 --> 00:09:44,355 escribir: si request.auth no es igual a null, 140 00:09:44,355 --> 00:09:47,650 lo que significa que solo los usuarios que hayan iniciado sesión 141 00:09:47,650 --> 00:09:52,377 en este servidor podrán leer y escribir. 142 00:09:52,377 --> 00:09:59,270 Ahora, voy a cambiar esto para permitir lecturas para cualquiera, 143 00:09:59,270 --> 00:10:06,035 pero las escrituras solo serán permitidas por usuarios autenticados. 144 00:10:06,035 --> 00:10:07,675 Así que diremos, lo tengo, 145 00:10:07,675 --> 00:10:12,348 y luego voy a empezar. 146 00:10:12,348 --> 00:10:13,845 Entonces, en las reglas, 147 00:10:13,845 --> 00:10:18,705 entraré en las reglas aquí y luego modificaré las reglas para 148 00:10:18,705 --> 00:10:24,845 permitir que los usuarios puedan leer desde el servidor. 149 00:10:24,845 --> 00:10:29,590 Ahora, podemos configurarlo en un nivel de carpeta específico, 150 00:10:29,590 --> 00:10:31,620 pero dado que esta es una aplicación simple, 151 00:10:31,620 --> 00:10:36,590 voy a configurarlo en todo el nivel de almacenamiento. 152 00:10:36,590 --> 00:10:39,325 Entonces, aquí, voy a decir, permitir leer, 153 00:10:39,325 --> 00:10:43,403 y luego voy a modificar esta regla para decir permitir leer, 154 00:10:43,403 --> 00:10:48,670 y voy a decir, permitir escribir si se solicita. 155 00:10:48,670 --> 00:10:50,700 Entonces, como puede ver, 156 00:10:50,700 --> 00:10:53,995 los usuarios podrán leer desde el almacenamiento. 157 00:10:53,995 --> 00:10:57,165 Cualquier usuario podrá leer, incluso sin autenticación, 158 00:10:57,165 --> 00:11:02,750 pero la escritura está restringida solo a los usuarios que inicien sesión en el sistema. 159 00:11:02,750 --> 00:11:06,750 Así que esto es una simple modificación de las reglas de acceso, 160 00:11:06,750 --> 00:11:08,180 de las reglas de seguridad. 161 00:11:08,180 --> 00:11:10,410 Puedes ser más elaborado en esto, 162 00:11:10,410 --> 00:11:11,830 pero en el ejemplo simple, 163 00:11:11,830 --> 00:11:13,170 me quedaré con esto. 164 00:11:13,170 --> 00:11:18,451 Y luego publicaremos estas reglas en nuestro servidor. 165 00:11:18,451 --> 00:11:23,600 Luego volviendo a los archivos, en los archivos, 166 00:11:23,600 --> 00:11:30,895 voy a crear una nueva carpeta aquí llamada imágenes. 167 00:11:30,895 --> 00:11:33,760 Ahora, como puede ver, 168 00:11:33,760 --> 00:11:37,450 las reglas se pueden configurar para esta carpeta de imágenes específica, por 169 00:11:37,450 --> 00:11:42,430 lo que permitirá a los usuarios leer sólo desde esta carpeta de imágenes y, a continuación, sólo 170 00:11:42,430 --> 00:11:47,830 a los usuarios autorizados para cargar en esta carpeta de imágenes si así lo decide. 171 00:11:47,830 --> 00:11:50,150 Pero, ahora mismo, voy a dejarlo como tal, 172 00:11:50,150 --> 00:11:53,780 como el conjunto genérico de reglas que he configurado allí. 173 00:11:53,780 --> 00:11:56,705 Ahora, yendo a la carpeta de imágenes. 174 00:11:56,705 --> 00:12:03,005 Voy a subir un montón de imágenes a esta carpeta aquí. 175 00:12:03,005 --> 00:12:10,445 Así que déjame tomar un montón de imágenes que tengo para mi aplicación. 176 00:12:10,445 --> 00:12:19,915 Y así, antes, había usado estas imágenes en mis otras aplicaciones. 177 00:12:19,915 --> 00:12:29,855 Voy a seleccionar todas estas imágenes y luego subirlas al almacenamiento de Google aquí. 178 00:12:29,855 --> 00:12:34,680 Estas imágenes están disponibles en el 179 00:12:34,680 --> 00:12:39,615 archivo images.zip que le he proporcionado en el ejercicio anterior, 180 00:12:39,615 --> 00:12:41,163 en la lección anterior. 181 00:12:41,163 --> 00:12:43,395 Así que simplemente descargue el archivo images.zip, 182 00:12:43,395 --> 00:12:44,910 o si ya 183 00:12:44,910 --> 00:12:48,720 lo ha descargado, debe tener estas imágenes con usted para poder subirlas al archivo. 184 00:12:48,720 --> 00:12:50,303 Cuando subas estas imágenes, 185 00:12:50,303 --> 00:12:56,215 puedes hacer clic en cualquiera de esas imágenes y también notar que aquí abajo, 186 00:12:56,215 --> 00:12:59,135 te da esta ubicación del archivo. 187 00:12:59,135 --> 00:13:05,755 Necesita copiar esta URL para esta ubicación de archivo porque cuando configuramos nuestra base de datos, 188 00:13:05,755 --> 00:13:10,785 en el campo de imágenes de nuestros datos JSON, 189 00:13:10,785 --> 00:13:17,525 vamos a configurar cada una de ellas con esta URL para la imagen correspondiente. 190 00:13:17,525 --> 00:13:21,315 A continuación, pasaremos a esa base de datos. 191 00:13:21,315 --> 00:13:25,975 En la base de datos, se le dan dos opciones. 192 00:13:25,975 --> 00:13:28,970 Puede ir con la base de datos en tiempo real más antigua, 193 00:13:28,970 --> 00:13:31,375 que es compatible con Google, 194 00:13:31,375 --> 00:13:37,065 y de hecho la mayoría de las aplicaciones actuales que utilizan Firebase usarán la base de datos en tiempo real. 195 00:13:37,065 --> 00:13:38,820 Pero luego, en este curso, 196 00:13:38,820 --> 00:13:43,420 exploraremos la versión beta de Firestore más reciente. 197 00:13:43,420 --> 00:13:50,450 La beta de Firestore proporciona una base de datos mucho más completa en tiempo real. 198 00:13:50,450 --> 00:13:55,110 Así que esta es la base de datos en tiempo real 199 00:13:55,110 --> 00:13:59,310 de próxima generación y proporciona formas mucho más avanzadas de hacer consultas y 200 00:13:59,310 --> 00:14:04,320 escalar automáticamente su almacenamiento para nosotros. 201 00:14:04,320 --> 00:14:07,260 Así que iremos con la beta de Firestore. 202 00:14:07,260 --> 00:14:09,870 Ahora, una de las razones de nuevo para comenzar con 203 00:14:09,870 --> 00:14:14,340 la beta de Firestore es simplemente porque 204 00:14:14,340 --> 00:14:23,250 nos permite almacenar la información en forma de documentos y colecciones. 205 00:14:23,250 --> 00:14:25,770 Ahora, por nuestra experiencia con MongoDB, 206 00:14:25,770 --> 00:14:28,988 ya sabemos cómo funcionan los documentos y las colecciones, 207 00:14:28,988 --> 00:14:33,630 y por eso la beta de Firestore es una opción mucho mejor para nosotros, 208 00:14:33,630 --> 00:14:37,275 ya que ya sabemos cómo se configura. 209 00:14:37,275 --> 00:14:39,900 Si desea utilizar por defecto la base de datos estándar en tiempo real, 210 00:14:39,900 --> 00:14:41,280 puede optar por hacerlo. 211 00:14:41,280 --> 00:14:44,040 Pero la base de datos en tiempo real almacena todos sus datos en 212 00:14:44,040 --> 00:14:51,272 un árbol grande y tiene una cantidad limitada de capacidad de consulta. 213 00:14:51,272 --> 00:14:56,315 Entonces, para las reglas de seguridad para mi Firestore, 214 00:14:56,315 --> 00:14:59,970 iré con el modo de prueba, 215 00:14:59,970 --> 00:15:05,955 donde simplemente lo dejaré abierto para que la gente lea y escriba en este momento. 216 00:15:05,955 --> 00:15:11,790 Y esto está bien porque solo estamos probando la base de datos, pero normalmente, 217 00:15:11,790 --> 00:15:20,245 sugeriría ir ir con una forma más configurada de trabajar con su base de datos aquí. 218 00:15:20,245 --> 00:15:23,171 Así que empezaremos con un modo de prueba para empezar. 219 00:15:23,171 --> 00:15:27,165 Así que vamos a configurar las reglas de seguridad como esta para empezar. 220 00:15:27,165 --> 00:15:31,280 Puede ir con una configuración de herramientas de seguridad más elaborada. 221 00:15:31,280 --> 00:15:34,710 Así que como vio con el almacenamiento, 222 00:15:34,710 --> 00:15:37,255 habíamos configurado tal que las lecturas son permitidas por 223 00:15:37,255 --> 00:15:40,620 cualquiera, pero las escrituras solo están permitidas por usuarios autorizados. 224 00:15:40,620 --> 00:15:44,790 Podemos configurar una funcionalidad similar aquí también. 225 00:15:44,790 --> 00:15:47,355 Así que este es el servidor de confusión. 226 00:15:47,355 --> 00:15:49,590 Y así, en las reglas, 227 00:15:49,590 --> 00:15:56,160 déjame ir a ese almacén y luego copiar la regla del almacén aquí, 228 00:15:56,160 --> 00:16:01,020 y estableceremos el mismo tipo de restricción aquí. 229 00:16:01,020 --> 00:16:04,725 Así que permitiremos que cualquiera lea, pero solo 230 00:16:04,725 --> 00:16:11,420 usuarios autorizados escriban en la base de datos. 231 00:16:11,420 --> 00:16:15,075 Así que volviendo a la base de datos, en las reglas, 232 00:16:15,075 --> 00:16:25,688 podemos decir permitir leer: y luego la segunda línea voy a reemplazar eso, 233 00:16:25,688 --> 00:16:29,620 diciendo permitir escribir si request.auth no es igual a null. 234 00:16:29,620 --> 00:16:32,535 Así que sólo las personas que 235 00:16:32,535 --> 00:16:36,540 han iniciado sesión, podrán hacer modificaciones a los datos para que, 236 00:16:36,540 --> 00:16:41,441 al menos, tengamos algo de protección sobre mis datos. 237 00:16:41,441 --> 00:16:48,900 Ahora, aquí, ahora podemos agregar gráficamente los datos a nuestra aplicación. 238 00:16:48,900 --> 00:16:54,791 Y esto, encuentro la forma más rápida de agregar los datos. 239 00:16:54,791 --> 00:16:57,270 Si configura el sitio cliente, 240 00:16:57,270 --> 00:17:00,380 también puede publicar datos desde el sitio cliente, pero, 241 00:17:00,380 --> 00:17:04,780 en este momento, vamos a empezar agregando tres colecciones aquí. 242 00:17:04,780 --> 00:17:10,535 Así que la primera colección que sumaré son los platos. 243 00:17:10,535 --> 00:17:14,800 Y podemos agregar documentos a los platos, 244 00:17:14,800 --> 00:17:17,400 por lo que podemos agregar nuestro primer documento. 245 00:17:17,400 --> 00:17:19,405 Así que para agregar un documento a los platos, 246 00:17:19,405 --> 00:17:23,005 recuerde que le he dado el archivo DB.json allí. 247 00:17:23,005 --> 00:17:27,085 Así que puede ir con el archivo DB.json y luego agregar, 248 00:17:27,085 --> 00:17:31,665 paso a paso, cada uno de los platos que tenemos. 249 00:17:31,665 --> 00:17:36,350 Entonces, aquí, voy a configurar el primer plato aquí. 250 00:17:36,350 --> 00:17:44,895 Por lo tanto, para el plato, podemos permitir que Firebase asigne automáticamente el ID de nuestro documento. 251 00:17:44,895 --> 00:17:48,010 Así que dejaré que se asigne automáticamente. 252 00:17:48,010 --> 00:17:52,660 Entonces agregaremos el primer plato aquí. 253 00:17:52,660 --> 00:18:01,200 El nombre del campo y el primer plato aquí. 254 00:18:01,200 --> 00:18:03,633 Así que tenemos que añadir minuciosamente, 255 00:18:03,633 --> 00:18:07,099 poco a poco, cada uno de los platos aquí. 256 00:18:07,099 --> 00:18:09,205 Así que diremos nombre, 257 00:18:09,205 --> 00:18:16,327 y luego diremos categoría, que es la red eléctrica. 258 00:18:16,327 --> 00:18:21,935 Y luego agregaremos la imagen, 259 00:18:21,935 --> 00:18:26,450 que voy a volver y agregar un poco más tarde porque necesito copiar 260 00:18:26,450 --> 00:18:32,250 la URL de la imagen de mi almacenamiento y usarla aquí. 261 00:18:32,250 --> 00:18:48,138 Entonces lo tendremos etiquetado como Hot, price. 262 00:18:48,138 --> 00:18:51,505 Así que tenemos categoría, 263 00:18:51,505 --> 00:18:55,240 nombre, categoría, imagen, etiqueta, precio 264 00:18:55,240 --> 00:19:02,310 , descripción, que voy a copiar y pegar de mi archivo DB.json. 265 00:19:02,310 --> 00:19:07,325 Y, finalmente, la bandera destacada, 266 00:19:07,325 --> 00:19:13,587 que estableceré como booleano y lo estableceré en true en este caso. 267 00:19:13,587 --> 00:19:20,135 Así que este será nuestro primer documento que agregaremos a nuestra base de datos aquí. 268 00:19:20,135 --> 00:19:22,705 Así que inmediatamente notarías que, 269 00:19:22,705 --> 00:19:26,570 en nuestra base de datos, se agrega el primer documento. 270 00:19:26,570 --> 00:19:29,815 Así que veremos platos y el primer documento, 271 00:19:29,815 --> 00:19:35,900 y puede ver la información sobre este documento configurado aquí. 272 00:19:35,900 --> 00:19:38,695 Así que tenemos categoría, descripción, 273 00:19:38,695 --> 00:19:44,355 destacado, imagen, etiqueta, nombre y precio. 274 00:19:44,355 --> 00:19:49,360 También vamos a añadir un campo más aquí llamado CreateDat, 275 00:19:49,360 --> 00:19:54,175 y esto será una marca de tiempo. 276 00:19:54,175 --> 00:20:00,870 Y la marca de tiempo sería la marca de tiempo de hoy y luego dejo allí el valor de tiempo como tal. 277 00:20:00,870 --> 00:20:04,772 Así que podemos agregar marcas de tiempo también a esto, y, también, 278 00:20:04,772 --> 00:20:14,855 agregaremos una marca de tiempo más como UpdateDat y con la marca de tiempo aquí. 279 00:20:14,855 --> 00:20:17,145 Así que tenemos dos marcas de tiempo más aquí. 280 00:20:17,145 --> 00:20:18,730 Ahora, para la imagen, 281 00:20:18,730 --> 00:20:21,375 iremos al almacén aquí. 282 00:20:21,375 --> 00:20:25,230 Y desde nuestro almacenamiento, en las imágenes, 283 00:20:25,230 --> 00:20:31,070 seleccionaremos el archivo de imagen aquí 284 00:20:31,070 --> 00:20:36,790 y luego iremos a la ubicación del archivo y luego copiaremos esta URL aquí. 285 00:20:36,790 --> 00:20:38,795 Así que si simplemente hacemos clic en esto, 286 00:20:38,795 --> 00:20:40,880 esa URL será copiada. 287 00:20:40,880 --> 00:20:42,050 Así que volveremos a 288 00:20:42,050 --> 00:20:49,715 esa base de datos y luego 289 00:20:49,715 --> 00:20:53,975 editaremos el campo de imagen y luego agregaremos esa URL allí. 290 00:20:53,975 --> 00:20:58,085 Así, puedes seguir adelante y agregar los platos restantes, 291 00:20:58,085 --> 00:21:02,120 las promociones y también los líderes. 292 00:21:02,120 --> 00:21:04,280 Así que una vez que complete todos los pasos, 293 00:21:04,280 --> 00:21:08,700 lo que tomará bastante tiempo para que lo haga paso a paso. 294 00:21:08,700 --> 00:21:13,620 Así que dejé que termines de agregar toda esta información a tu Firebase. 295 00:21:13,620 --> 00:21:18,045 Así que después de completar la introducción de todos los datos en su base de datos, 296 00:21:18,045 --> 00:21:21,675 sus platos deberían tener cuatro platos aquí. 297 00:21:21,675 --> 00:21:26,660 De nuevo, asegúrese de inicializar 298 00:21:26,660 --> 00:21:33,166 el campo de imagen con la URL de ese almacenamiento para esa imagen en particular. 299 00:21:33,166 --> 00:21:40,565 Así que tendrás uno, dos, tres y cuatro platos. 300 00:21:40,565 --> 00:21:43,805 Entonces tendrás cuatro líderes correspondientemente. 301 00:21:43,805 --> 00:21:50,860 Uno, dos, tres y cuatro y un ascenso está aquí. 302 00:21:50,860 --> 00:21:54,590 De nuevo, asegúrese de inicializar las imágenes para cada una de 303 00:21:54,590 --> 00:21:58,940 ellas apropiadamente desde el almacenamiento de Firebase. 304 00:21:58,940 --> 00:22:02,375 Con esto, nuestro servidor está completamente configurado. 305 00:22:02,375 --> 00:22:10,100 Por lo tanto, nuestro servidor Firebase tiene todos los datos necesarios para que sirva a nuestros planes. 306 00:22:10,100 --> 00:22:13,595 Ahora pasaremos al siguiente ejercicio, 307 00:22:13,595 --> 00:22:18,725 donde configuraremos nuestro cliente angular para poder acceder a 308 00:22:18,725 --> 00:22:22,370 este back-end de Firebase como un servicio y luego recuperar 309 00:22:22,370 --> 00:22:26,469 datos y luego enviar datos a su servidor Firebase. 310 00:22:26,469 --> 00:22:29,440 Con esto, completamos este ejercicio. 311 00:22:29,440 --> 00:22:33,110 En este ejercicio, hemos visto lo fácil que es 312 00:22:33,110 --> 00:22:37,100 configurar nuestro backend Firebase como un servicio tanto para la autenticación, 313 00:22:37,100 --> 00:22:43,520 para almacenar archivos y servirlos y también almacenar información en 314 00:22:43,520 --> 00:22:51,410 la base de datos Cloud Firestore en forma de colecciones y documentos dentro de colecciones. 315 00:22:51,410 --> 00:22:55,180 Con esto, completamos este ejercicio.