RECUERDA PONER A GRABAR LA CLASE
¿DUDAS DEL ON-BOARDING?
FIREBASE II
Clase 13. REACT JS
OBJETIVOS DE LA CLASE
Firebase: es un servicio provisto por Google para satisfacer las distintas necesidades que puede tener una aplicación y su ciclo de desarrollo
GLOSARIO:
Clase 12
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 13
Firebase II
Almacenando en Firestore
Recapitulación de arquitecturas
Organización
Tipos de datos
Modificando y creando
Creación
Actualizando un documento
Batch Update (lotes de escritura)
Clase 13
Firebase II
Clase 12
Firebase I
Clase 14
Workshop
CRONOGRAMA DEL CURSO
EJEMPLOS EN VIVO
EJEMPLOS EN VIVO
CREA TU ITEM COLLECTION
ITEM COLLECTION
MODERA TUS ORDERS
ITEM COLLECTION II
OPTIMIZA EL CÓDIGO
CREA TU MARKDOWN
REVISA Y SUBE TU TRABAJO
ENTREGA DEL PROYECTO FINAL
FIREBASE II
RECAPITULACIÓN DE
ARQUITECTURAS
Si venimos de los desarrollos clásicos, tenemos una arquitectura que es la más conocida. Puede estar vinculada a un patrón como el siguiente:
SPA
API
Base de datos
Browser
Backend
SQL, noSQL, etc
corre en el
provista por el
Accede y guarda vía
consume
para llegar a
La api decide quién accede, implementa su modelo de seguridad y determina la respuesta
SPA
Firebase services
Browser
Firestore
corre en el
Accede y guarda vía
Firestore decide quién accede mediante mecanismos propios y filtros de seguridad
ALMACENANDO EN
FIRESTORE
Firestore tiene ciertos límites en cuanto a cómo organizamos la información. Veamos los distintos aspectos, para hacerlo de manera eficiente.
FIRESTORE Y EL ALMACENAMIENTO
ORGANIZACIÓN
En Firestore, el almacenamiento es de tipo no estructurado/noSQL:
FIRESTORE
En firestore hay documentos.
FIRESTORE: DOCUMENTOS
Los documentos pueden ser complejos y anidados, pueden contener arrays, fechas (timestamps), números, y otros objetos (maps)
Juega y experimenta con el editor online y descubre más datos!
FIRESTORE: DOCUMENTOS
Borrar un documento no elimina sus sub-colecciones ¡debes hacerlo manualmente!
FIRESTORE: COLECCIONES
Si bien tienen máximo de 1MB, esto puede ser bastante para registros de texto, y aparte podemos definir hasta 100 niveles de sub-colecciones.
Esto permite multiplicar exponencialmente el tamaño bruto de un documento.
FIRESTORE: COLECCIONES
TIPOS DE
DATOS
Cuidado: arrays no pueden tener sub-arrays entre sus elementos
FIRESTORE: TIPOS DE DATOS
MODERA TUS ORDERS
Usa tu tus items del cart para modelar tu orden.
¡A PRACTICAR!
Usa tu tus items del cart para modelar tu orden al siguiente formato:
{ buyer: { name, phone, email }, items: [{id, title, price}], total }, si todavía no creaste el formulario de compra puedes usar un objeto hardcodeado de tipo { name, phone, email }.
Cuentas con 30 minutos para realizar la actividad.
☕
BREAK
¡Ya estás llegando al fin de la cursada! �Recordá que luego de la corrección de tu proyecto final, se notificará por Slack y email si quedaste en el TOP10��No cuelgues, que tenés hasta 2 semanas desde que te nofificamos para solicitar los beneficios.
¡5/10 MINUTOS Y VOLVEMOS!
Tienes tu CartProvider.
FIRESTORE: CHECKLIST CHALLENGE
Puedes navegar de tu List a tu Detail.
Puedes clickear en el cart.
Puedes agregar items a tu cart.
Conectaste el listado y el detalle a Frebase.
¡Conectemos la compra y generemos la orden!
MODIFICANDO
Y CREANDO
CREACIÓN
Debemos generar una referencia a la colección, y crear el objeto que queremos crear en Firestore.
FIRESTORE: PREPARAR DOCUMENTO
La creación es bastante sencilla, utiliza el método <collection>.add(<object>)
Si necesitamos agregar una fecha, podemos usar la librería timestamp de firestore agregando su import en el js.
FIRESTORE: FORMATO DE FECHAS
Firestore almacena nano y micro segundos
El método add de esa colección devuelve una promise. Si todo sale bien el then devolverá el id auto-generado del del nuevo documento, de otro modo pasará por el flow de error.
FIRESTORE: CREAR DOCUMENTO
La creación es bastante sencilla, utiliza el método <collection>.add(<object>)
FIRESTORE: VERIFICA TU CREACIÓN
Firestore crea el id por nosotros si utilizamos el método add
¡Verifica en la consola que se haya creado!
ACTUALIZANDO
UN DOCUMENTO
Puedo darle únicamente los campos que quiero actualizar. Firestore combinará este nuevo campo y dejará lo que haya habido previamente
FIRESTORE: ACTUALIZAR UN DOCUMENTO
actualizarStock es una promise. Ejecútala para ver el resultado de la operación
BATCH UPDATE
(LOTES DE ESCRITURA)
Puedes usar una operación batch para actualizar muchos documentos en una misma operación
FIRESTORE: ACTUALIZAR UN LOTE DE DOCUMENTOS
Pasos:
¡Recuerda que commit devuelve una promise!
‘in’ es un operador que me permite
obtener un conjunto de ítems por su id
Si consultas un query puedes usar el .ref del snapshot
FIRESTORE: ACTUALIZAR UN BATCH A PARTIR DE OTRO QUERY
ITEM COLLECTION II
conecta Firestore a tu APP para escrituras.
11
ITEM COLLECTION II | ||
Formato: link al último commit de tu repositorio en GitHub. Debe tener el nombre “Idea+Apellido”. | | |
�>> Consigna: crea tu colección de órdenes. >>Aspectos a incluir en el entregable:
Pista: Puedes controlar los stocks con multi-gets utilizando los itemId de tu cart. | ||
¿PREGUNTAS?
Resumen de lo visto en clase hoy:
¡MUCHAS GRACIAS!
OPINA Y VALORA ESTA CLASE