Vamos a pescar en el mercado de bajos.
Empezaremos con Firebase,
la oferta premium de Google.
Vamos a entender un poco sobre Firebase,
configurar un servidor Firebase,
y luego vamos a ver la aplicación angular,
que voy a adaptar en función de
la aplicación angular anterior que usted ha visto en la conferencia anterior.
Lo modificaremos para hacer uso de Firebase como back-end.
Por lo tanto, como veríamos al final de esta lección,
este ejercicio y el siguiente ejercicio,
podemos tomar fácilmente una aplicación angular y modernizarla para hacer uso de
Firebase como el back-end como proveedor de servicios.
Para comenzar el viaje,
vayamos a firebase.google.com para entender un poco acerca de Firebase.
Una especie de tema de hacer una presentación completa sobre Firebase,
rápidamente le revisaré lo que se ha
explicado en el sitio de Firebase en sí porque le dan
suficientes detalles sobre cómo Firebase soporta varias características.
Así que vamos a revisar este sitio web para entender cómo funciona Firebase.
Así que si vas al sitio web, como puedes ver,
dice que Firebase te ayuda a crear mejores aplicaciones móviles y hacer crecer tu negocio.
Y luego, como puede ver aquí,
le explica los detalles sobre cómo le permite crear sus aplicaciones
rápidamente sin tener que administrar la infraestructura de back-end para su aplicación,
y una única consola que reúne un montón de productos que funcionan juntos.
Por lo tanto, estos son todos los productos ofrecidos por Google que funcionan juntos para satisfacer sus necesidades de back-end.
Y también aquí, puede aprovechar
muchos de los productos complementarios que están disponibles en Google.
Así que en particular, en este ejercicio,
vamos a aprovechar la nube Firestore,
la nueva provisión de Google.
Vamos a ver más detalles sobre eso más adelante.
Observamos cómo podemos usar el soporte de autenticación
proporcionado por Firebase para autenticar usuarios.
Examinaremos el almacenamiento en la nube para almacenar nuestros archivos de imagen y servirlos.
Y luego también veremos cómo podemos aprovechar todo esto junto con
el módulo de nodo relacionado con Firebase-que podemos incorporar junto con el
módulo de nodo angularfire2 en nuestra aplicación angular para que
podamos comunicarnos con nuestro backend Firebase como servicio.
Además, mirando más detalles,
vemos cómo el
propio tablero de Firebase proporciona varias funciones, como permitirle implementar
diferentes funciones de usuario para una incorporación diferente de su aplicación y
lo fácil que es integrar su backend con un iOS,
Android o la aplicación web .
En particular, vamos a ver la aplicación web y el uso de JavaScript y
también el uso de cómo vamos a
incorporar esto a nuestra aplicación angular un poco más tarde.
Además, Firebase proporciona una base de datos en tiempo real,
tanto la base de datos original en tiempo real,
como la nueva Cloud Firestone,
le permiten sincronizar automáticamente los datos entre varios dispositivos de usuario.
Por lo tanto, cualquier cambio realizado en
el lado del servidor se reflejará automáticamente en todos los clientes
, y, por supuesto, puede leer más detalles sobre Firebase en este sitio web.
Y es muy fácil empezar porque la oferta básica es gratuita para los usuarios.
Así que empecemos a usar Firebase.
Configuraremos nuestra cuenta de Firebase y luego accederemos y configuraremos nuestro back-end como un servidor,
que luego aprovecharemos de nuestra aplicación angular.
Así que este es un recorrido rápido por Firebase,
pero en lugar de solo mirar estos,
vamos a entrar y realmente ensuciarnos las manos,
configurando una base de Firebase de
nuevo en el servicio y luego usándola en nuestra aplicación angular.
Así que para empezar,
como verá hacia el borde derecho aquí,
dice ir a la consola.
Obviamente, deberías tener una cuenta de Google para poder usar Firebase.
Eso no hace falta decir,
y usted debe haber iniciado sesión en su cuenta de Google.
Así que, como puedes ver,
ya estoy en mi cuenta de Google.
Así que eso me dará acceso a mi consola.
Si no ha iniciado sesión,
entonces es mejor que inicie sesión en su cuenta de Google.
Por lo tanto, cuando vaya a la consola,
esto le llevará a la consola de servicios de Firebase aquí,
donde puede configurar proyectos.
Entonces, cuando vas a la consola,
como puedes ver, dice agregar un proyecto.
Y, como pueden ver,
ya he intentado configurar
otro proyecto de Firebase antes de explicártelo.
Así que vamos a establecer un proyecto aquí.
Así que haremos clic en el proyecto de agregar,
y eso debería abrir una pequeña ventana agradable,
donde puede escribir información.
Así que llamaremos a este proyecto como ConfusionServer,
como cabría esperar y lo configuraremos donde quiera que se encuentre en este momento.
Así que voy a configurarlo para usar
Hong Kong y crear un proyecto.
Y una vez creado tu proyecto,
esto es lo que te presentará Firebase.
Y, aquí, vería que lo primero que querría
obtener es información sobre su configuración de Firebase para
que pueda usarla dentro de su aplicación angular.
Así que para hacer eso,
haga clic en este botón aquí.
Así que dice, agregue Firebase a su aplicación web.
Y esto le proporcionará un montón de información que
debe copiar y guardar porque
usaré esta información para configurar
mi aplicación angular un poco más adelante en el siguiente ejercicio.
Por lo tanto, guarde esta información en una ubicación conveniente para que
pueda hacer uso de esta información cuando configure el sitio de su cliente.
El siguiente paso, estableceré un par de cuentas aquí.
Así que déjame hacer clic en la autenticación aquí.
Y cuando se abra la autenticación,
configuraremos los métodos de inicio de sesión que usaremos para nuestro servidor Firebase,
y en mi caso,
usaré la contraseña de correo electrónico como una de las opciones.
Por lo tanto, habilitaremos la contraseña de correo electrónico.
También habilitaré el inicio de sesión de Google.
Así que estos dos están habilitados.
Si lo desea, puede habilitar otras formas de autenticar a los usuarios.
A continuación, ir a los usuarios, ahora,
si inicia sesión en esta aplicación con su cuenta de Google,
ese usuario se agregará automáticamente a su sistema.
Pero ahora mismo, voy a configurar un usuario con un correo electrónico y una contraseña.
Así que configuraré un admin@confusion.net,
y estableceré una contraseña aquí y agregaré al usuario.
Así que este será un usuario,
que puede iniciar sesión con la combinación de correo electrónico y contraseña.
También podemos registrarnos para acceder a esto a través de nuestra cuenta de Google.
Así que mi aplicación angular,
voy a configurar para usar tanto la forma de contraseña de correo electrónico de inicio de sesión
como por el inicio de sesión basado en la cuenta de Google.
Después de eso, entraremos en almacenamiento.
Así que vamos a configurar el almacenamiento a continuación.
Así que el almacenamiento es donde puede configurar una forma
de cargar archivos en su servidor y luego ponerlos a disposición para su uso.
Así que este almacenamiento, voy a configurar mi almacenamiento para almacenar
las imágenes que vamos a utilizar y guardar desde nuestro sitio de servidor.
Entonces, cuando configure el almacenamiento,
se le ocurrirá el conjunto de reglas de seguridad,
que especifican qué tipo de operaciones permitirán el usuario.
Entonces dice permitir leer,
escribir: si request.auth no es igual a null,
lo que significa que solo los usuarios que hayan iniciado sesión
en este servidor podrán leer y escribir.
Ahora, voy a cambiar esto para permitir lecturas para cualquiera,
pero las escrituras solo serán permitidas por usuarios autenticados.
Así que diremos, lo tengo,
y luego voy a empezar.
Entonces, en las reglas,
entraré en las reglas aquí y luego modificaré las reglas para
permitir que los usuarios puedan leer desde el servidor.
Ahora, podemos configurarlo en un nivel de carpeta específico,
pero dado que esta es una aplicación simple,
voy a configurarlo en todo el nivel de almacenamiento.
Entonces, aquí, voy a decir, permitir leer,
y luego voy a modificar esta regla para decir permitir leer,
y voy a decir, permitir escribir si se solicita.
Entonces, como puede ver,
los usuarios podrán leer desde el almacenamiento.
Cualquier usuario podrá leer, incluso sin autenticación,
pero la escritura está restringida solo a los usuarios que inicien sesión en el sistema.
Así que esto es una simple modificación de las reglas de acceso,
de las reglas de seguridad.
Puedes ser más elaborado en esto,
pero en el ejemplo simple,
me quedaré con esto.
Y luego publicaremos estas reglas en nuestro servidor.
Luego volviendo a los archivos, en los archivos,
voy a crear una nueva carpeta aquí llamada imágenes.
Ahora, como puede ver,
las reglas se pueden configurar para esta carpeta de imágenes específica, por
lo que permitirá a los usuarios leer sólo desde esta carpeta de imágenes y, a continuación, sólo
a los usuarios autorizados para cargar en esta carpeta de imágenes si así lo decide.
Pero, ahora mismo, voy a dejarlo como tal,
como el conjunto genérico de reglas que he configurado allí.
Ahora, yendo a la carpeta de imágenes.
Voy a subir un montón de imágenes a esta carpeta aquí.
Así que déjame tomar un montón de imágenes que tengo para mi aplicación.
Y así, antes, había usado estas imágenes en mis otras aplicaciones.
Voy a seleccionar todas estas imágenes y luego subirlas al almacenamiento de Google aquí.
Estas imágenes están disponibles en el
archivo images.zip que le he proporcionado en el ejercicio anterior,
en la lección anterior.
Así que simplemente descargue el archivo images.zip,
o si ya
lo ha descargado, debe tener estas imágenes con usted para poder subirlas al archivo.
Cuando subas estas imágenes,
puedes hacer clic en cualquiera de esas imágenes y también notar que aquí abajo,
te da esta ubicación del archivo.
Necesita copiar esta URL para esta ubicación de archivo porque cuando configuramos nuestra base de datos,
en el campo de imágenes de nuestros datos JSON,
vamos a configurar cada una de ellas con esta URL para la imagen correspondiente.
A continuación, pasaremos a esa base de datos.
En la base de datos, se le dan dos opciones.
Puede ir con la base de datos en tiempo real más antigua,
que es compatible con Google,
y de hecho la mayoría de las aplicaciones actuales que utilizan Firebase usarán la base de datos en tiempo real.
Pero luego, en este curso,
exploraremos la versión beta de Firestore más reciente.
La beta de Firestore proporciona una base de datos mucho más completa en tiempo real.
Así que esta es la base de datos en tiempo real
de próxima generación y proporciona formas mucho más avanzadas de hacer consultas y
escalar automáticamente su almacenamiento para nosotros.
Así que iremos con la beta de Firestore.
Ahora, una de las razones de nuevo para comenzar con
la beta de Firestore es simplemente porque
nos permite almacenar la información en forma de documentos y colecciones.
Ahora, por nuestra experiencia con MongoDB,
ya sabemos cómo funcionan los documentos y las colecciones,
y por eso la beta de Firestore es una opción mucho mejor para nosotros,
ya que ya sabemos cómo se configura.
Si desea utilizar por defecto la base de datos estándar en tiempo real,
puede optar por hacerlo.
Pero la base de datos en tiempo real almacena todos sus datos en
un árbol grande y tiene una cantidad limitada de capacidad de consulta.
Entonces, para las reglas de seguridad para mi Firestore,
iré con el modo de prueba,
donde simplemente lo dejaré abierto para que la gente lea y escriba en este momento.
Y esto está bien porque solo estamos probando la base de datos, pero normalmente,
sugeriría ir ir con una forma más configurada de trabajar con su base de datos aquí.
Así que empezaremos con un modo de prueba para empezar.
Así que vamos a configurar las reglas de seguridad como esta para empezar.
Puede ir con una configuración de herramientas de seguridad más elaborada.
Así que como vio con el almacenamiento,
habíamos configurado tal que las lecturas son permitidas por
cualquiera, pero las escrituras solo están permitidas por usuarios autorizados.
Podemos configurar una funcionalidad similar aquí también.
Así que este es el servidor de confusión.
Y así, en las reglas,
déjame ir a ese almacén y luego copiar la regla del almacén aquí,
y estableceremos el mismo tipo de restricción aquí.
Así que permitiremos que cualquiera lea, pero solo
usuarios autorizados escriban en la base de datos.
Así que volviendo a la base de datos, en las reglas,
podemos decir permitir leer: y luego la segunda línea voy a reemplazar eso,
diciendo permitir escribir si request.auth no es igual a null.
Así que sólo las personas que
han iniciado sesión, podrán hacer modificaciones a los datos para que,
al menos, tengamos algo de protección sobre mis datos.
Ahora, aquí, ahora podemos agregar gráficamente los datos a nuestra aplicación.
Y esto, encuentro la forma más rápida de agregar los datos.
Si configura el sitio cliente,
también puede publicar datos desde el sitio cliente, pero,
en este momento, vamos a empezar agregando tres colecciones aquí.
Así que la primera colección que sumaré son los platos.
Y podemos agregar documentos a los platos,
por lo que podemos agregar nuestro primer documento.
Así que para agregar un documento a los platos,
recuerde que le he dado el archivo DB.json allí.
Así que puede ir con el archivo DB.json y luego agregar,
paso a paso, cada uno de los platos que tenemos.
Entonces, aquí, voy a configurar el primer plato aquí.
Por lo tanto, para el plato, podemos permitir que Firebase asigne automáticamente el ID de nuestro documento.
Así que dejaré que se asigne automáticamente.
Entonces agregaremos el primer plato aquí.
El nombre del campo y el primer plato aquí.
Así que tenemos que añadir minuciosamente,
poco a poco, cada uno de los platos aquí.
Así que diremos nombre,
y luego diremos categoría, que es la red eléctrica.
Y luego agregaremos la imagen,
que voy a volver y agregar un poco más tarde porque necesito copiar
la URL de la imagen de mi almacenamiento y usarla aquí.
Entonces lo tendremos etiquetado como Hot, price.
Así que tenemos categoría,
nombre, categoría, imagen, etiqueta, precio
, descripción, que voy a copiar y pegar de mi archivo DB.json.
Y, finalmente, la bandera destacada,
que estableceré como booleano y lo estableceré en true en este caso.
Así que este será nuestro primer documento que agregaremos a nuestra base de datos aquí.
Así que inmediatamente notarías que,
en nuestra base de datos, se agrega el primer documento.
Así que veremos platos y el primer documento,
y puede ver la información sobre este documento configurado aquí.
Así que tenemos categoría, descripción,
destacado, imagen, etiqueta, nombre y precio.
También vamos a añadir un campo más aquí llamado CreateDat,
y esto será una marca de tiempo.
Y la marca de tiempo sería la marca de tiempo de hoy y luego dejo allí el valor de tiempo como tal.
Así que podemos agregar marcas de tiempo también a esto, y, también,
agregaremos una marca de tiempo más como UpdateDat y con la marca de tiempo aquí.
Así que tenemos dos marcas de tiempo más aquí.
Ahora, para la imagen,
iremos al almacén aquí.
Y desde nuestro almacenamiento, en las imágenes,
seleccionaremos el archivo de imagen aquí
y luego iremos a la ubicación del archivo y luego copiaremos esta URL aquí.
Así que si simplemente hacemos clic en esto,
esa URL será copiada.
Así que volveremos a
esa base de datos y luego
editaremos el campo de imagen y luego agregaremos esa URL allí.
Así, puedes seguir adelante y agregar los platos restantes,
las promociones y también los líderes.
Así que una vez que complete todos los pasos,
lo que tomará bastante tiempo para que lo haga paso a paso.
Así que dejé que termines de agregar toda esta información a tu Firebase.
Así que después de completar la introducción de todos los datos en su base de datos,
sus platos deberían tener cuatro platos aquí.
De nuevo, asegúrese de inicializar
el campo de imagen con la URL de ese almacenamiento para esa imagen en particular.
Así que tendrás uno, dos, tres y cuatro platos.
Entonces tendrás cuatro líderes correspondientemente.
Uno, dos, tres y cuatro y un ascenso está aquí.
De nuevo, asegúrese de inicializar las imágenes para cada una de
ellas apropiadamente desde el almacenamiento de Firebase.
Con esto, nuestro servidor está completamente configurado.
Por lo tanto, nuestro servidor Firebase tiene todos los datos necesarios para que sirva a nuestros planes.
Ahora pasaremos al siguiente ejercicio,
donde configuraremos nuestro cliente angular para poder acceder a
este back-end de Firebase como un servicio y luego recuperar
datos y luego enviar datos a su servidor Firebase.
Con esto, completamos este ejercicio.
En este ejercicio, hemos visto lo fácil que es
configurar nuestro backend Firebase como un servicio tanto para la autenticación,
para almacenar archivos y servirlos y también almacenar información en
la base de datos Cloud Firestore en forma de colecciones y documentos dentro de colecciones.
Con esto, completamos este ejercicio.