Tutorial CRUD + Logs con Cloud Functions en Firebase y React

Transcripción

hola chicos que tal bienvenidos el día

de hoy vamos a aprender cómo crear un

panel de administrador con fire race y

react y la idea es que este panel tenga

funcionalidad cruz y que gestione una

base de datos en este escenario estamos

gestionando un almacén de una tienda

puede ser lo que ustedes deseen y como

creo podemos crear productos aquí vamos

a añadir entonces abritas a 12 99 en

almacena y 200 y el código de xavi

estará acá podemos crear entradas como

pueden ver podemos eliminar vamos a

eliminar

este de aquí podemos editar también este

agua vamos a ponerlo en oferta va a

estar entre 799 aquí se cambia como

pueden ver y adicional a esta

funcionalidad cruz también tenemos un

buscador donde podemos realizar

consultas bien sea por el código aquí me

arroja la leche cuando no el agua perdón

también puedes buscar por título por

ejemplo sabritas me arroja este de aquí

es este un panel de administrador que

tiene autenticación ahora mismo tenemos

sesión iniciada con este correo de acá

por ser recesión puedo ingresar

nuevamente colocó mi contraseña y como

pueden ver la base de datos persiste y

persiste porque estamos trabajando con

fair isaac y tenemos los productos esto

se actualiza en tiempo real y la mejor

parte es que vamos a trabajar con cloud

james jones al ser un panel de

administrador que trabaja con

información sensible a lo mejor son

usuarios son salarios no no sé qué que

van a utilizar

necesitamos saber quién está haciendo

cambios en la base de datos para vamos a

ocupar estas funciones que dentro de la

misma base de datos nos van a crear un

sistema de logs de entradas aquí podemos

ver por ejemplo que

el usuario hola a las fito eliminó este

producto de acá en tal mecha o que lo

mejoró la las citó creó este producto

que se llama lotes en tal fecha de modo

que siempre sepamos quién está haciendo

los cambios estos cambios se generan

automáticamente de modo que es un panel

bastante completo y si les interesa

aprender cómo hacerlo acompáñenme

[Música]

vale y antes de comenzar a recordarles

dos cosas la primera es que encuentran

el código de ese tutorial en la

descripción la segunda invitarlos a que

se suscriban a mi boletín para recibir

cada semana consejos que los ayuden a

mejorar como desarrolladores habiendo

dicho esto vamos a comenzar lo primero

que hay que hacer es abrir una terminal

y desde allí hay que dirigirnos al lugar

donde queramos trabajar y tenemos dos

opciones la primera es trabajar con el

ex rey ya cap y con las que se instale

instalen fire veis en ella con la

segunda que yo recomendaría es utilizar

mi plantilla la cual la encuentran

colocando en github puntocom diagonal as

fito diagonal react fibers esta

plantilla ya viene preparada y aquí

vamos a indicarle que la guarden la en

la carpeta tutorial admin por ejemplo

presionamos ente esto nos va a clonar

esta plantilla este repositorio y lo que

sigue es introducirnos en ella tutorial

admin e instalar las dependencias con en

pie instó

una es que se ha descargado todo abrimos

la carpeta con nuestro editor favorito

yo trabajaré con beats code cerramos la

terminal y desde aquí desde el editor

abrimos la terminal integrada y yo

adicional a esto voy a instalar bus trap

para no tardar tanto con este tutorial

si quiero hacer lo mismo lo que tendrían

que hacer es dirigirse a red bulls tras

hacer clic en get stoned copiar el

comando que nos instala el pin

y una vez que se ha instalado también

tenemos que añadir los estilos añadir

los estilos se tiene un apartado que nos

da la instrucción de cómo importarlo y

esto lo podemos colocar en nuestro

archivo de index js por ejemplo aquí

guardamos y lo último revisar que esté

todo bien cuando íbamos a correr en pie

start y debiéramos tener en nuestro

navegador algo similar a lo que están

por ver en pantalla está aquí un hola y

un botón que no hace absolutamente nada

bueno habiendo hecho esto ya podemos

comenzar y la idea detrás de nuestro

panel de administrador es que detecte si

hay sesión iniciada o no si hay sesión

dirija a la persona al panel si no hay

sesión dirija la persona a iniciar

sesión en alguna pantalla de login por

ejemplo para ello vamos a crear aquí en

nuestro archivo de app vamos a crear un

estado que vamos a llamar usuario que

vamos a inicializar en tu después lo que

vamos a hacer es importar desde boots

rap vamos a importar un componente que

se llama container

y aquí lo que vamos a regresar es un

contenedor

que sea fluido y al interior vamos a

utilizar un aparador terciario y hacer

lo siguiente si el usuario existe si los

ha iniciado sesión entonces estamos que

nos lleve a un home caso contrario

queremos que nos lleve a un login por

ejemplo y estos componentes naturalmente

no existen bloque hay que crearlos para

ello aquí en sours voy a ir a crear una

carpeta llamada views dentro de la cual

vamos a crear un punto js aquí vamos a

devolver de momento algo muy sencillo

que diga por ejemplo bienvenido y

también vamos a crear el componente o la

vista de lo que hacemos lo mismo donde

solamente vamos a regresar un inicia

sesión por favor y una vez habiendo

hecho esto regresamos a app y estos dos

hay que importarlos el home ya login

para ello aquí avanzado como importar

home desde view sounds lo mismo para el

login y ahora si visitamos el navegador

podemos ver que nos redirige a iniciar

sesión por favor y esto es porque de

entrada nuestro usuario está en no vale

y ahora lo queremos es trabajar esta

ventana de blogging para ello nos

dijimos a login y aquí también nos

importar unos cuantos componentes de

busturia vamos a importar un container

un form y un botón

y aquí no va a regresar un día

regresamos un container y al interior

vamos a tener este texto de inicia

sesión por favor el cual va a estar

dentro de un h 1 además de este título

requerimos nuestro formulario para ello

ocupamos form

y al interior de forma vamos a ocupar un

grupo en el cual vamos a recoger el

correo en la etiqueta que diga correo y

el tipo con ello podemos cerrar este

grupo vamos a tener otro grupo también

para la contraseña para ello ocupamos

los mismos componentes grupo etiqueta el

input y cerramos y por supuesto un botón

que sea de tipo submit que va a decir

iniciar sesión cerramos este botón vamos

a cambiar las etiquetas por el texto en

español correo

contraseña y muy importante asegúrense

de que agreguen haití a sus inputs en

este caso este y lo vamos a nombrar en

forma correo y este lo vamos a llamar

forma contra guardamos regresamos al

navegador y como pueden ver tenemos ya

iniciación por favor correo y contraseña

lo que sigue es obviamente que cuando yo

ponga aquí mis datos bueno vamos a

ponerlos bien yo haga click en iniciar

sesión e inicie sesión y que no se le

reinicia la página o se actualice para

ello y antes de continuar necesitamos

crear nuestro proyecto de files lo

tenemos que hacer entonces es dirigirnos

a fire page punto google.com desde ahí

100 sesión iniciada nos vamos a la

consola y hacemos clic en crear proyecto

yo llamaría para este tutorial llamaría

tutorial admin youtube damos continuar

no requerimos analíticas creamos el

proyecto y le damos unos cuantos

segundos de fires para que la provisión

de recursos y servicios para nosotros

una vez listo hacemos clic en continuar

nos lleva a la pantalla de inicio del

proyecto y muy importante vamos a

trabajar con tres servicios distintos el

primero el servicio de autenticación por

lo tanto hay que inicializar luego

comenzarlo hay distintos proveedores

para iniciar sesión vamos a trabajar con

correo por lo tanto hacemos clic en

habilitar y guardamos es todo lo que

requerimos lo segundo la base de datos

de fire store para ello hacemos lo mismo

creamos la base de datos muy importante

que esté en modo prueba siguiente

elegimos la ubicación y hacemos clic en

habilitar una vez que se ha de terminar

una es que se haya terminado de

habilitar la base de datos el tercero

tercer servicio que vamos a trabajar son

las round functions o funciones este

lambda también es como que nación en así

y para ello muy importante tienen que

actualizar su plan de fire with fire y

si tiene dos planes de plan

completamente gratuito y el segundo plan

que es plan semi gratuito porque les

incluye la parte gratuita y si excede en

esa parte gratuita entonces ya les cobra

bajo ciertas tarifas para ello lo que

tiene que hacer es aquí en el panel

izquierdo hacen clic en actualizar y

eligen el plan de prepago obviamente

deben tener ya guardado algún método de

pago éste le damos que sí

y el listo que hemos creado una letra

que me avise cuando haya accedido a los

cinco dólares muy bien y ya con ello si

nos dirigimos aquí a functions notarán

que este podemos hacer clic aquí en

comenzar y nos da las instrucciones o lo

haremos más adelante también atrás lo

que importa es que estén en el plan de

prepago pero no se preocupen no van a

pagar absolutamente nada mientras éste

no se excedan de estas cuotas pero bueno

habiendo terminado esto ampliando

terminado de configurar el proyecto lo

que sigue es crear una aplicación para

ello venimos aquí a configuración

deslizamos aquí sale crear aplicación yo

elegiré crear crear aplicación web y la

nombraré de denuncia web app youtube

admin qué sé yo la registramos y aquí lo

que nos interesa es lo siguiente las

credenciales que nos arroja aquí vamos a

copiar desde a pic y hasta hyde y

copiamos y de vuelta en nuestro proyecto

si utilizaron mi plantilla hay una

carpeta que se llama fire list el

interior están credenciales y aquí lo

que hay que hacer es reemplazar esto acá

por lo que copiaron estas son las

credenciales para su aplicación de su

proyecto ok incluyen que estamos

haciendo es importar una función que

inicializa fire beige e inicializar la

con nuestras credenciales y esto lo

exportamos para poder utilizarlo en lo

largo y ancho de nuestro proyecto

habiendo hecho esto lo que sigue

entonces es regresar al login y aquí nos

interesa poder iniciar sesión para ello

vamos a crear una carpeta más llamaremos

plans jones qué sé yo y aquí vamos a

crear un archivo que se llame el login

email password

basware no sé escribir y aquí lo que nos

interesa es crear esta función que

inicie sesión en cualquier parte

entonces ojo muy importante siempre que

quieran trabajar con fire reid lo

primero que hay que hacer es importar

esto de aquí que estamos exportando está

fire visa y después lo que sigue es

importar los servicio que quieran

utilizar por lo tanto yo voy a trabajar

con autenticación por lo tanto voy a

importar desde fuera lo primero que dado

muy importante esto siempre es importa y

luego las funciones que requieran yo voy

a importar la de iniciar sesión con

iniciar sesión con correo y contraseña y

lo tercero es inicializar esto de aquí

entonces diríamos count of es igual a 0

y le pasamos nuestras credenciales y

ahora sí vamos a crear esta sesión esta

sesión esta función va a ser asíncrona y

la vamos a llamar

login con email en password que va a

recibir un correo va a recibir una

contraseña y con estos argumentos lo que

va a hacer es ejecutar la función de

fires entonces aquí vamos a no podemos

hacerlo así vamos a guardar el resultado

en una web bueno pues lo más sencillo

a deshacernos de todo esto esto sería lo

idóneo pero como mucho más sencillo

sería siempre sencillamente correr

sangin with y medio en password que

recibe como aumentos por correo y

contraseña ok guardamos la exportamos y

de vuelta a quien login vamos a crear

una función que va a manejar lo que pasa

o lo que pase cuando ya haga clic en

cuando aquí es tengo un error pero qué

pasa cuando haga clic aquí en este

iniciar sesión entonces aquí en el

formulario voy a decirle que cuando

alguien haga clic en submit me corra la

función que se llame submit camber vale

y esta función no existe hay que

definirla

entonces aquí lo queremos es crear esta

función que se llame submit under que va

a recibir el evento y lo primero que

hará es prevenir que

dicho evento se ejecuta en este caso que

se actualice la página lo siguiente

queremos es guardar los datos de correo

y contraseña para ello vamos a decidir

con su correo es igual a documento de

télam en vaya aquí y utilizamos el aire

o también lo que pueden hacer de otra

manera es contraseña es igual a punto

target punto contrapunto valió pero ojo

que esto de aquí son los aires y

nosotros los llamamos

form contras y éste lo llamamos form

corre o dos tienen dos maneras distintas

esto lo que hace es aprovechar el evento

que se activa con el formulario esto lo

que hace es buscar el aire vale y ahora

para que esté funcionando lo queremos es

lograrlos en pantalla

para ello voy a abrir aquí está mi

consola y vamos a crear a escribir mejor

dicho el correo de hola las vito

hacemos clic acá y noten que no se

actualiza y que me los imprime en

pantalla por lo tanto significa que ya

tenemos estos datos y ahora lo que sigue

es pasar estos datos a nuestra función

que inicia sesión vale y para ello lo

que tenemos que hacer primero es

importar desde aquí desde el login vamos

a importar login y password y aquí en

esta función que gestiona el summit lo

que haremos es el login y password y le

pasamos el correo y la contraseña y ya

con esto podríamos estar iniciando

sesión entonces cerramos este archivo y

cerramos credenciales y la pregunta es

bueno ya iniciar sesión en fire y soy

asociación edición sesión en fire veis

que es lo que sigue lo que sigue es que

quien la app se detecte este cambio de

sesión y por lo tanto nuestro estado en

lugar de que éste no ya tenga algún

valor para ello desde aquí les daremos

exactamente lo mismo que hicimos en la

función de login y para ello vamos a

importar

a las credenciales vamos a importar este

servicio de autenticación

y vamos a importar esta función ambas

desde fire soft y muy importante tercer

paso inicial izamos esto con esto vale y

entonces aquí lo que nos hace es lo que

a su ser es lo siguiente vamos a correr

está funcionando state change que va a

recibir este objeto que inicializa amos

se lo iba a recibir una función que

queramos que corra cada vez que hay

algún cambio decisión y qué es lo que

queremos que ocurra cuando haya

contaminación dos cosas la primera si es

que existe y aquí me faltó en que

recibimos el usuario de firefox en caso

de existir y aquí si es que existe este

usuario de fibers lo que vamos a hacer

es que nuestro estado tenga la

información del usuario de firefox caso

contrario en caso de no existir lo que

haremos es definir el usuario en nulo

por lo tanto ahora que ya estamos

escuchando guardando y redirigiendo si

yo regreso al navegador y coloco mi

correo a pero ojo muy importante esto

dice iniciar sesión dado que es un panel

de administrador los usuarios deberán

ser creados por el súper administrador

únicamente es lo que vamos a hacer aquí

de vuelta en fire veis vamos a la

consola vamos a autenticación y vamos a

agregar a un usuario esto tiene que ser

aprobado por el súper alguien

y vamos a crear este usuario con

contraseña 1 2 3 4 5 6 hacemos clic en

agregar usuario y ahora sí de vuelta

para que siguió intento iniciar sesión

con este 1 2 3 4 5 6 fíjense que se

detecta la sesión y me llevan a

bienvenido lo cual significa que todo

esto aquí está funcionando correctamente

guardamos los datos lo pasamos a nuestra

función y desde app se detecta el cambio

y dice sabes que ya no te muestra login

ahora te muestro un perfecto entonces

vamos a trabajar en home lo primero que

haremos es añadir un botón que nos

permita cerrar sesión para ello vamos a

esté aquí el botón vamos a poner cerrar

sesión

y lo que haremos es aquí en funciones

crear otra función más que signifique o

que diga saint out

js y como siempre vamos a importar a

fire y sap importamos nuestro grado y

una función que se llama sign auto alas

desde fire show e inicial izamos esto de

aquí y nuestra función aunque se va a

llamar hijo les cuento el mismo nombre

se llamará cerrar sesión

bah

va a correr y estará en el fire race y

con esto cerramos la sesión y escucha

que se cerró la sesión y me devuelve

español por lo tanto me va a mostrar

esto aquí hagamos la prueba aquí

importamos

sainz out desde

bones jones

y vamos a hacerle que en el on click

no se ejecute

sainz av

ahí lo tienen

ok aquí hay un problemita vamos a

cambiar el nombre está aquí

cerrar sesión

y nos faltó exportarla por supuesto es

por default cerrar sesión

ahí lo tiene entonces de vuelta en home

habiendo la importado desde acá desde

esa recesión si me vengo al navegador y

actualizó me dice qué botón no está

definido y es que utilice mayúsculas qué

torpe ahí lo tienen ok aquí dice

bienvenido tengo obsesión iniciada y

llegó clic en cerrar sesión en cierra la

sesión ingresamos una vez más y no se te

que una vez más y cerramos y esto

funciona perfectamente muy bien entonces

ya que funciona el iniciación vamos a

trabajar la parte de esta parte de

gestión de bases de datos

regresamos aquí al editor y vamos a

trabajar el home para ello vamos a

importar ciertos componentes desde boots

draft para ello hacemos esto de canales

de rían woods trap y lo que importamos

será un container un stack un botón y un

ford vale este día cambiamos lo por un

container y lo queremos es que este

botón y este bienvenido vamos a decir

vamos a envolverlos dentro de un stack y

aquí luego cerramos entonces este

bienvenido lo envolvemos en un párrafo

y al párrafo vamos a meterle un poquito

de estilo algo como font-size un 24 que

sea bienvenido y el varón vamos a

cambiarlo por uno de muestra y aquí si

queremos mostrar el correo con el cual

está iniciando sesión lo que tendremos

que hacer es que home debiera recibir

el usuario y aquí lo queremos entonces

es mostrar usuario punto email y este

email existe porque es lo que recibimos

desde el fire list y esto lo estamos

bordando en el usuario entonces luego

que faltaría es decir algo como usuario

es igual a usuario

guardamos y de vuelta aquí en el

navegador dice bienvenido hola la

necesito vale si cerramos esto de aquí

notarán que

este botón tendrá que estar aquí y es

que nos faltó que en esta que estamos

importando tenga dirección

horizontal

ahora

entonces aquí tenemos esta primera parte

y aquí en contra vamos a volverlo fluido

sigue igual lo que tenemos que hacer hoy

lo que tenemos que hacer entonces es que

en up el container instant fluye también

que raro cuando le damos importancia

continuamos trabajando con el home esto

sería la primera parte la de arriba

vamos a separarlas con un hr lo vamos a

ponerlo así y luego lo que sigue es el

buscador donde puede hacer las consultas

para ello vamos a cómo es un buscador

vamos a utilizar un formulario key y al

interior del formulario vamos a poner un

stack que de misma manera sea horizontal

igual que el anterior

y entonces lo que haremos es dentro de

este estaca horizontal ir colocando los

campos para ello vamos a poner aquí este

un grupo dentro del cual va a ir un

input que va a decir buscar ok y muy

importante fíjense de colocar una y de

mi caso yo lo estoy poniendo como

búsqueda adicional colocamos un botón de

tipo submit que diera buscar y vamos a

poner otro botón más que diga reset o

recipiente para que no nos tachen de

iremos aquí vamos a decir que este

variante va a ser de no lo sé light

guardamos y de vuelta en el navegador

tenemos el input este que nos va a

actualizar la página porque está dentro

de un foro y este resetear que no hace

absolutamente nada y para arreglar esto

de aquí lo que haremos es en este stack

el primer hito en clases name

vamos a utilizar una clase de whatsapp

que es si no me equivoco flex 99 justify

count en junín

guardamos y ahí lo tienen para lo que

sigue es colocar otro más y tener

nuestra tabla donde van a mostrar los

resultados por lo tanto éste está lo

podemos cerrar este foro lo podemos

cerrar y vamos a trabajar la siguiente

parte que es el h

el hr para separar y que vamos a

trabajar a colocar una tabla y esta

tabla nos hizo falta importarla destaca

la importante y lo que haremos es lo

siguiente lo primero es trabajar en el

tíbet ok dentro en dije vamos a colocar

los campos del número y bueno depende de

su caso o cuántas este columnas quieran

y entonces vamos a poner que vamos a

colocar cinco de éstas

vamos a ver modificarlas una vez va a

ser número el número de haití vamos a

colocar el título

esto lo duplicamos título a presión

conseguir cantidad y el buen es que hay

antes colocan cuántas columnas deseen y

muy importante una más que va a ser en

acciones que nos aplicar los botones de

editar y eliminar esto va para la parte

de indigente la cabeza y lo que sigue es

el chivo en donde vamos a colocar todos

los datos y obviamente aquí en datos lo

único que haremos es o no lo queremos es

mapear la información que recibamos de

mientras vamos a colocar uno falso vamos

a poner esto de aquí

cuántos son 34 563 46

esto lo cerramos

los cerramos y cerramos el chivas di

sueco o que ya lo tienen más que había

puesto ahí está regresamos al navegador

y es así como se estaría viendo título

precio cantidades que voy acciones

entonces esta información hay que

traerla de badghis ok vamos a trabajar

vamos a comenzar con nuestra tablita

esto lo primero que haremos trabajar la

tabla y para ello y antes que nada vamos

a crear aquí en la base de datos un

producto falso nuestra colección se

llamará productos

y aquí vamos a colocar este campo de

aquí va a ser el scoop

vamos a añadir título

de prueba

y en precio muy importante que sea

nombre 1999 cantidad habrán unos 580

lo que ya tenemos nuestro primer

producto y vamos a traerlo para acá en

esta tabla de aquí para ello aquí en

home o bueno mejor dicho en función lo

que haremos es crear una función que se

llame get out louds punto js y aquí como

siempre vamos a importar las

credenciales vamos a importar nuestro

servicio en este caso desde fair face

firestone y los servicios a funciones

que traeremos son the fire with fire

store estoy diciendo vamos a traer

collection y get dots ok entonces cómo

es que funcionan bueno el tercer paso

siempre es base datos es igual seguir

porque como que funcionamos a crear esta

función que se llame out project y lo

que haremos es esto de aquí vamos a

guardar

esta información en productos

vamos a traer estos productos desde la

colección de productos y los vamos a

devolver pero ojo que estos productos en

realidad debieran llamarse deberán

llamar se deben llevar se producirá de

marsé snapshot y les diré por qué lo que

fair game nos devuelve es una

información que no está completamente

legible entonces lo tenemos en los

siguiente crearemos una red que se llame

productos es igual a una raya en vacío

vamos a agarrar este snapshot y lo que

haremos es snapshot punto for each y

vamos a empujar

vamos a empujar dos punto

y cerramos entonces cómo funciona esta

función me trae mis productos de

firestone los guarden snapshot el

snapshot los revisamos y convertimos la

información en información legible la

metemos en este rey y devolvemos este

rey desde productos con ello vamos de

vuelta ya home y vamos a importar esta

función de get out works deseamos este

importe get out products y aquí en

aquí vamos a trabajar un estado donde

vamos a guardar estos productos no ser

productos ser productos de entrada son

arriba cio y entonces aquí dentro de

este activo ali de la tabla en lugar de

devolver esta información falsa lo que

haremos es lo siguiente

vamos a dejar esto aquí lo queremos de

los dientes vamos a decir si productos

existen entonces mate ame productos

recibe el producto y el index y lo que

quiero que devuelvas

lo siguiente quiero que regreses

un chip road

porque el index y lo vamos a ir

regresando la información esto va para

el número de esto va para el título

luego sigue el precio luego sigue la

cantidad luego sigue el escudo y luego

en acciones lo que haremos es regresar

dos botones uno de editar y otro de

eliminar serranos está a 15 ramos el

tiro y ya está esto completa borramos

esto

guardamos

y entonces lo que sigue es como

conectamos esta función como guardamos

los productos en este estado para ello

utilizaremos un efecto el cual va a

correr al inicio entonces hemos algo

como al inicio necesito que me

guarde esto de aquí en el estado y para

ello vamos a crear una función especial

aquí adentro que se llama la de de mago

como mansión

actualizar estado productos y lo que era

es lo siguiente vamos a llamar esta

función de get old broads y luego

recibimos los productos y los guardamos

en el estado

por lo tanto que al inicio cuando se

monta el componente llamamos esta

función de actualizar estado producto

por lo tanto si yo me vengo para acá y

y actualizó me manda un error y es que

me dice que no se puede mandar a llamar

con un vacío lo cual me hace dudar de

como la llame la llame bien productos lo

que hay que ser entonces es regresar

este de aquí y vamos a quita esta

referencia no me está tomando donde

queremos es con su colección red es

igual la conexión

productos y luego snapshot va a ser

igual

collection red

listo venimos para acá y aquí lo tienen

fíjense que ya me manda a llamar o me

trae toda la información de mi base de

datos que de momento es un solo producto

entonces esta parte de lectura ya está

funciona lo que aumentó esto no hace

nada y solo tenemos un producto

agregamos un botón para añadir más

productos nos regresamos aquí al editor

cerramos esta función no cerramos esta

de aquí y aquí en home lo que haremos

entonces es primero deshacernos de esta

información falsa y lo que sigue es

después de table vamos a crear un botón

que diga añadir producto ok y aquí al

hacer clic

con clic lo que haremos es ejecutar la

función que se llame añadir producto

aunque muy importante hablan porque está

funcionalmente no existe por lo tanto

vamos a crearla

aquí vamos a esta función que se llama

añadir producto home

y vamos a guardar esto así ok lo primero

es crear la función en fair face

entonces quien functions venimos para

acá y vamos a crear esta función se

llama añadir producto punto j s lo mismo

toda la vida importamos las credenciales

importamos los servicios desde fire with

fire store y aquí vamos a importar get

fire store vamos a importar corrección y

doc y docx ok y vamos a inicializar

nuestra variable de dar aviso entonces

idea que nos estamos es asíncrona

función añadir añadir producto va a

recibir va a recibir los siguientes

elementos que dice va a recibir lo

primero en la información del producto

info producto ok y de mientras eso nos

basta entonces que lo que haríamos con

esta función primero creamos una

referencia a la colección collection red

es igual a dar a beige y productos

porque recuerden que así se llama

nuestra colección luego lo siguiente

vamos a recibir o vamos a crear una

referencia alto mento que queremos crear

y notarán que bueno ustedes van a variar

lo pero mis documentos los estoy

nombrando con el mismo dato que el scoop

porque este es un dato único en teoría

por lo tanto que diré que la referencia

deberá ser igual al info producto punto

es q y con ello en mente lo que sigue es

crear un documento a guardar la

información en esta referencia con la

información del producto ok y ya está y

esto hay que exportar lo es por default

es igual a añadir producto

pero este añadir producto donde lo vamos

a mostrar lo vamos a mostrar en un modal

la idea es que aquí al hacer clic en el

botón éste se pone sale error al hacer

clic en el botón de añadir producto me

salga uno darle una ventana emergente y

desde ahí añada los datos y este modal

vamos a crearlo para ello aquí en souls

lo que haría es crear otra carpeta más

que se va a llamar componentes

y aquí lo que haremos es añadir este

modal modal añadir modal añadir sonar

bien y lo creamos que quiere mientras

vamos a devolver este componente de

model añadir el cual vamos a crear con

beats rap para ello vamos a importar

moda de esta forma varón varón varón

desde

captura y aquí ojo ojo que modal añadir

va a recibir dos primero y

es modal añadir y el segundo set es

modal añadir vamos a hacerlo esto así y

este día vamos a cambiarlo entonces por

modal pero ojo que como funcional modal

es así tenemos que indicarle cuándo se

va a mostrar y cuando nos preocupamos

una propia acción a show y aquí vamos a

pasar lo mismo del añadía

y vamos a tener una propiedad que se

llama un height que esto lo que va a

ocurrir cuando alguien haga clic afuera

del modelo lo que haremos es ponerlo en

falls para que no se vea aquí aquí vamos

a comenzar con un modelo heather dentro

que vamos a meter un taller aunque diga

añadir producto lo que sigue es un modal

bar y dentro de que vamos a meter un

fondo dentro del cual vamos a meter un

stack ok y aquí dentro del staff vamos a

ir pasando los inputs gran formulario de

modo que pongamos la información que

queremos añadir título cantidad precio

etcétera es muy importante que tengan un

haití para poder identificarlos y que

tengan un play holder vamos con el

título

y esto vamos a oeste éste no es este

grupo deberá decir control y pasarle

también un tipo este va a ser de tipo

texto

ok y lo que sigue es

no vamos a

cerrarlo

esto vamos a duplicarlo

título

precio

presión y cantidad

cantidad y por último el scoop

y para precio vamos a ponerle de tipo

number y lo mismo para cantidad

aunque ahora este forma hay que cerrarlo

y por último después del body sigue un

formato forma un modal punto führer aquí

vamos a pasar dos botones uno para

cancelar y otro para guardar el producto

y cerramos este modal y ahí lo tienen

añadir y cancelar ahora fíjense que este

modal recibe estas propiedades esta es

propia de las va recibir desde home

desde cuando queremos es lo siguiente

venimos para acá aquí vamos a vamos a

importar cómo se llama modelo añadir y

vamos a crear un estado que se llame is

modal añadir y set ismo de añadir y lo

que sigue es que este modal lo colocamos

aquí en cualquier parte y le pasamos

estos datos mod al año de iris model

añadir set mismo daniel perfecto y ahora

lo que sigue para que tu función es que

nuestro botón de añadir producto cuando

ocurre está box esta función esta

función lo que tiene que hacer es

cambiar el estado y para ello diremos

algo como set list model añadir intur

regresamos al navegador y actualizamos

siempre pasa esto hacemos clic en añadir

producto y ahí lo tienen título precio

cantidad y es como muy precioso si acaso

lo que podríamos hacer como extra

y es que estos fueron controles tengan

como class name margin varón 1

copiamos y vamos a pegarlo por acá para

que no estén tan pegados

ok ahí está muy bien añadió productos yo

les me salgo por acá se cierran sino de

cancelar se cierran ahora la idea es que

aquí yo ponga los datos del producto y

que al darle en añadir me lo añadan

naturalmente lo que que hacer es que

tenemos que crear una función para

gestionar este formulario entonces quien

submit 11.000 perdón diremos cuando

morán

pero bueno esto esto funcionaría

pensándolo bien esto sólo funcionaría si

mi botón fin sé que mis botones están

afuera del formulario entonces esto aquí

no nos va a servir lo que tenemos que

hacer es agregar una función a este

botón de añadir es aquí lo tenemos que

agregar la función entonces iremos en un

clic un clic lo queremos descubrir la

función de añadir producto modal en

google y éste añadir producto modal hay

que crearla por lo tanto vamos a crear

dicha función function añadir producto

modal

y lo que va a ser lo que tenemos que

hacer es obtener la info del formulario

ok entonces iremos constitu lo es igual

a

esto ex obtenemos el valor a través del

haití y hacemos lo mismo para precio

para cantidad y para él es como ok ya

tenemos la información del formulario lo

que sigue es enviar la información a

fire page y para ello vamos a importar

la función que creamos aquí de añadir

producto entonces decimos import o

import añadir productores de functions y

recuerden que añadir productor recibe un

solo objeto

entonces aquí tenemos que primero crear

la información diremos cons info

producto es igual a este objeto con esta

información y con esta información ya

podemos correr la función y que enviamos

la información y lo que toca es cerrar

el modal y entonces diremos set es modal

añadir en fox así de fáciles y sencillo

pero ojo e igual no pero vamos a

probarlo venimos para acá vamos a

abrirlo y diremos como prueba 2 1 2 3 1

2 3

y este es mi escudo lo clic en añadir y

me sale un error es que tal parece que

no se pueden las propiedades de nul tal

parece que esto de aquí no me está

jalando la información como creí que lo

haría

lo cual indica que hay un problema con

mis idish vamos aquí de vuelta y vamos a

echar mitad así que el problema es que

si utilizamos esto de aquí nuestros

aires los declaramos únicamente con

haití esto es un temita de muchos chicos

no no le den mayor importancia están

ocupando inputs normales no deben tener

este problema problema probamos una vez

más prueba 2 la bola añadir

me lo agrega me lo cierran y si me vengo

para que en la base de datos fíjense que

aquí lo tenemos prueba dos personas

arroja un problema y es que no se está

actualizando que tendría que suceder

aquí lo que tendría que suceder es que

nuestra función desde actualizar estado

productos tendría que ejecutarse una vez

más lo que haremos es pasársela nuestro

modal

en nuestro modal la recibimos

aliza ha estado productos y antes de

cerrar nuestro modal lo que haremos es

actualizar

dicha información ahí lo tienen probemos

una vez más agreguemos el prueba 3

le damos en añadir ya lo tienen lo

agrega se actualiza y aquí está

instantánea y funciona de maravilla ya

podemos crear ya podemos añadir lo que

sigue es editar y eliminar consumos pero

es más fácil eliminar para ello vengamos

aquí ya podemos cerrar este modal

cerramos esta función y en home fíjense

que aquí en nuestro mapeo con estamos

mapeando regresamos este botón de

eliminar lo que tenemos que hacer es

agregarle una función de que al un clic

vamos a correr eliminar

eliminar producto home y eliminar

producto home debiera recibir el

producto ahora esta función no existe

lo que tenemos que hacer es crear y para

ello quien functions vamos a crear

eliminar producto

js

y aquí vamos a trabajar con fire face

debemos importar nuestras credenciales

debemos importar

fire with fire store el jet fire store y

vamos a ver importar una función que se

llama delete por último inicializa moss

dará veis con esto de aquí

y vamos a crear esta función que se

llama eliminar producto home tiene

barcelona y va a recibir el producto y

lo que tenemos que hacer lo primero es

crear una referencia

a productos luego creamos una referencia

a este producto

qué bueno aquí esto está mal esto no

funciona si esto es colección

que le pasamos dar veis aquí pasamos dos

y le pasamos

conexión red le vamos a pasar no el

producto haití sino el producto punto

bien aquí se me está buscando el

spanglish

conexión red y ya que tenemos esta

referencia al documento a través del

escudo lo que sigue es eliminar este

documento y ahí lo tienen muy bien

entonces eliminar producto

nos va eliminar el producto vamos a

dejarla aquí y ojo que si yo lo

eliminará tendríamos que actualizar

entonces aquí en un clic lo queremos lo

siguiente vamos a pasarle una función

y aquí además de eliminar el producto

vamos a actualizar esta dos productos

muy bien vengamos de vuelta a pero esta

función no la ha importado vamos a

importarla

desde aquí

compasión y lo que no están definidos

respectivamente

actualizamos ok vamos a terminar en la

primera prueba

eliminado me vengo para acá y ya no está

vamos a mirar la segunda

y aquí está eliminado y aunque fíjense

que me lo actualizo tan rápido aquí me

lo actualizo tan rápido dónde están

esto me lo utiliza tan rápido que no

alcanzo a leer que lo había eliminado

entonces lo que podríamos hacer es lo

que podríamos hacer es esperar hay que

eliminar producto nos conteste porque

cuando yo ejecuto esta función me me

contestaron todos vamos a decir conste

eliminado es igual a weight y para que

esto funcione tendremos que agregarle

aquí en la 5 ya que me contesta que lo

eliminó lo regresamos

y entonces lo que haremos aquí es que

una vez que recibamos la confirmación

entonces vamos a eliminar o mejor dicho

actualizar este estado de productos y

ahora si no me los actualizar sino hasta

que reciba la confirmación de que se

eliminó

venimos para acá y vamos a agregar otro

producto este de aquí estoy acá de aquí

vamos a eliminarlo ya lo tienen perfecto

lectura creación y eliminación lo que

sigue es editar y evitar es un tanto

complejo y es complejo porque

necesitamos pactar únicamente el

producto que queremos editar

naturalmente y para ello lo que haremos

es lo siguiente vamos a cerrar todo esto

y aquí en componentes vamos a duplicar

este modal de añadir y eso lo que aquí

lo vamos a llamar modal editar

guardamos y modalidad va a recibir o va

a funcionar más o menos de la misma

manera va a recibir este si debiera

mostrarse o no va a recibir un estado

para que podamos cambiar si se muestra o

no iba a recibir esta parte de

actualizar estado productos pero

adicionalmente va a recibir el producto

a editar ok esto lo que va a hacer

recibiera este producto esté dañado

producto modal vamos a cambiarlo por

editar producto mod al igual recibimos

la misma información que tengamos en

nuestros inputs y esto vamos a

actualizarlo el añadir lo cambiamos por

editar lo mismo este de aquí

añadir producto lo cambiamos por editar

producto

todo esto lo dejamos esto se cambia por

editar

y esto lo cambiamos por editar y esto

por editar todo se cambia por editar ok

esto también se cambia por editar y

ahora si todo debiera estar funcionando

en orden cambiamos el nombre del

componente model editar regresamos el

modal editar y lo que sigue es que en

home vamos a importar dicho modelo

entonces hemos algo como import mode al

editar vamos a crear un estado para

revisar si se muestra uno con sismo de

al editarse es modern editar y aquí

abajito vamos a agregar lo

y va a recibir

esto de aquí estoy acá y estoy acá y

guardamos y ahora cuando hagamos clic en

editar

dónde está

aquí en editar cuando hagamos clic en

editar lo que tenemos que hacer es

mostrar el modal de editar

vamos a poner aquí set es modal editar

en su

guardamos pero esto para que no corran

infinito lo que tenemos que hacer es

pasarle un aro function y ahora sí con

el aro font son a la función de flecha

teníamos para que actualizamos y si hago

clic en editar se va a mostrar el modal

de editar producto pero la idea es que

si yo quiero editar prueba 3 y hago clic

aquí tendría que decir me la información

del producto y para ello para ello

tenemos que crear otro estado

en el cual vamos a seguir el producto

seleccionado

en buenos producto editar es un buen

nombre también producto editar set

producto editar y aquí al momento de

hacer clic en editar aquí

vamos a correr además de correr

espérame tantito esto es un lío

pero bueno a ver aquí al hacer clic en

el botón de editar además de mostrar el

modal vamos a decir qué producto quiero

editar por lo tanto hago algo como set

producto editar lo vamos a pasar el

producto que estamos recibiendo desde el

mapeo ok y para que no haya ningún

problema porque en un principio este

modal está en vacío lo que vemos aquí es

pasarle el producto editar como

productor y tal y éste lo vamos a

mostrar únicamente

si producto editar

existe un producto

si producto a editar existe entonces le

pasamos nuestro estado y ahora dentro de

modal editar como ya estamos recibiendo

este producto editar lo que haremos es

aquí ponerle unos valores

predeterminados porque podremos poner

valió es igual a producto editar punto

título hagamos la prueba tenemos para

que

actualizamos

eloy editar y estilo tienen prueba 3

pero fíjense que ahora como yo le puse

por valió el título el bario hace

siempre este y no puedo evitarlo y para

evitarlo tenemos que dar un poquito con

estados entonces lo que era aquí dentro

del modal de editar vamos a crear un

estado

aquí vamos a decir algo como con este

producto ser producto y en un principio

va a ser igual a este que estamos

recibiendo desde hong kong nos lo pasa

como propio recuerden que los próximos

se pueden editar si como funciones react

deben ser este funciones puras esto nos

evita lo que se edita son los estados

recibo el prop lo guardo en el estado y

aquí en value diremos en lugar de

producto editar diremos pero no

confirmamos es el producto estado set

producto

y aquí en bali vamos a ponerle producto

esta y lo que haremos es que cuando se

cambie el valor vamos a decir que

sed producto estado

el set producto estado el estado va a

ser igual lo que teníamos antes con la

diferencia de que

el título va a modificarse con lo que

estemos cambiando los change y para que

esto funciona tenemos que correr una

función que reciba el evento de cambio

tenemos el cambio se recibe la función y

cambiamos

todo todo queda igual excepto el título

ibra que es nadie

claro es que aquí estoy diciéndole adiós

stein cuando no tengo react

pero veamos una vez más estamos clic en

editar y ahora no recibe el título que

está pasando a ver a ver qué pasó lo que

pasa es que aquí en nuestro estado

cuando recibimos el producto editar lo

idóneo es de estructurar lo dentro de un

nuevo estado aunque guardamos esto de

aquí

probemos una vez más quiero editar

prueba 3 ya lo tienen y ahora puedo

cambiar los valores podría llamarlo pero

el a4 por ejemplo y aquí este debiera

ser lo mismo para los demás vamos a

actualizar los demás este baile ‘gestión

change vamos a copiar los aquí me faltó

hasta acá y para conti para precio

haremos lo mismo sólo que en lugar del

título ponemos precio y aquí título lo

cambiamos por precio lo mismo para

cantidad con los cambios requeridos en

cantidad y cantidad

y lo mismo para el esquí

esto lo cambiamos por school y esto lo

cambiamos por

muy bien entonces que lo estamos

haciendo recordatorios que al cambiar

modificamos el estado preservamos los

mismos valores que teníamos antes con la

diferencia de el valor que estemos

modificando en cádiz y ahora para ver

que esto funciona vamos a hacer una

programas de prueba 4 podríamos

cambiarlo a esto de acá esto de aquí

perfecto funciona mira la idea es

ponible aquí en editar me lo edite y

aquí lo que hizo que me añadió otro

producto porque aquí tenemos esta

función de editar producto donde lo

tenemos que hacer es crear esta función

de editar producto o actualizar producto

y aquí ya tenemos algo que teníamos

copiado del otro modal el modal de

añadir

y si se fijan realmente no es muy

distinto a lo que tenemos que hacer para

evitar el producto primero tenemos que

recopilar la información lo tenemos que

crear un objeto y aquí lo que hace esta

función es que me añade un producto con

esta información se actualiza el estado

y me cierra el modal y de hecho esto de

aquí nos funciona mientras nosotros no

modificamos el scoop cuenta cómo editar

y les diré por qué por qué quien añadió

producto set dock funciona tanto para

crear como para editar nosotros tenemos

otra función en fire veis que se llama

update 2 pero ésta funciona cuando

nosotros editamos únicamente un solo

campo podríamos ocupar haití pero para

estos fines

funciona exactamente igual dicho por

venir acá puedo cambiar esto ha editado

11 11 dejamos el disco como tal y listo

que estaban funciona podemos editar

prueba 3 vamos a cambiarlo y fíjense con

esto yo hice clic acá y me sigue

mostrando el anterior y es que lo que

tenemos que hacer es que una vez que

hayamos terminado de editar debemos

devolver el estado anterior el estado de

producto a editar tenemos que devolverlo

a cero

entonces aquí por ejemplo es el producto

editar vamos a

vamos a estructurar lo

lo mismo para este y aquí voy a tener

modal en editar antes de salir nos

tenemos que

regresar en estado vacío

entonces tenemos que hacer es recibir

tenemos que recibir aquí en el mundo al

editar

además de producto y tardemos que

recibir el set producto editar venimos

aquí a moda al editar

recibimos el set producto editar y antes

de cerrar tenemos que regresarlo a él

para que no haya ningún problema tenemos

que revisarlo anula al cerrar el modal

por haber guardado o por haber editado

mejor dicho también tenemos que regresar

lo anuló cuando nos salgamos del modal

y también tenemos que regresar a la nube

cuando hagamos clic en cancelar

aquí lo tienen y ahora lo que va a pasar

es que vengo para acá si elijo este me

sale editado lo de celulares al error

porque

el válido ok

un mes al error porque aquí en value

intenta leer esto que están aun -define

lo cual no debiera suceder

en la línea 52

producto esta vamos a meterle aquí unos

unos signos de interrogación para que me

protejan contra espíritus santaneros y

dónde find bueno aquí de vuelta elijo

editado me dice editado si elijo prueba

3 no me dice nada

[Aplausos]

porque escogí mal el nombre bien sé que

aquí lo que regrese a null era lo del

interior y no le di tal clásico error de

battseck y ese producto editar lo

ponemos en él

esto también no es producto estado ese

producto evitar entonces recapitulando

lo volvemos a null cuando terminamos de

editar aquí lo volvemos a noel cuando

nos salimos con height y lo regresamos

en dulce cuando le damos en cancelar

entonces éste lo cambiamos por editar y

listo yo vengo para acá editado

prueba 3 editado ahí está prueba 3 y

editado por un momento me ha espantado

pero lo tienen fíjense

editado y prueba 3 y proba 3 vamos a

cambiarlo prueba 5 ahí lo tienen y se

van para acá no aparece editado tenemos

editado 2 editar vemos barca todo

funciona podemos eliminar este hoy vamos

a añadir esté acá con esto de acá y esto

acá añadir listo

voy taras las das y editar pruebas 5 muy

bien entonces ya podemos crear podemos

leer editar y eliminar lo siguiente es

implementar una búsqueda y esto al ser

muy pero que muy sencillo lo que hay que

hacer es venir cerramos esto cerramos

esto de aquí y de vuelta no home aquí no

tenemos un container no acá tenemos un

stack y dentro del estado tenemos un

formulario que dice buscar y resetear

aquí cuando hagamos clic en buscar lo

que tenemos que hacer es correr una

función que se llame se llame

filtrar buscar productos ok y esta

función vamos a crear la quien functions

o bueno pensándolo bien fíjense que este

botón está dentro de este formulario

entonces lugar de tener esta función

aquí en el botón lo que queremos es

crear una función para consumir en el

formulario

acudiremos búsqueda form and bear ok

esta función hay que crearla vamos a

crear aquí

sin formación búsqueda forma hunger que

va a recibir el evento y lo primero que

hará es prevenir que se refresque luego

lo que sigue es definir qué es lo que

está buscando la persona donde iremos

búsqueda es igual a lo que sea que tenga

la edad de búsqueda recuerden que

nosotros

así fue como llamamos al input y luego

lo que seguiría es el fair race buscar

esa información y regresarla aquí para

poder mostrarla entonces action

functions aquí si vamos a crear una

función que se llame no sé filtrar datos

qué sé yo que vamos a trabajar con la

las credenciales importamos get fire

store y vamos a trabajar con collection

y vamos a trabajar con cuero y vamos a

trabajar con web vamos a trabajar con

get box también ok y por último vamos a

inicializar la base de datos y vamos a

crear esta función las información que

se va a llamar

filtrar datos

que va a recibir un monstruo hing de

búsqueda lo que sea que estén buscando

vamos a tratar de encontrarlo en fire

race para ello primero mostrar una

referencia a la colección que vamos a

usar que es igual a la colección pero

ojo que colección recibe primero como

argumento la constante de base de datos

ok lo que sigue es crear una una

búsqueda ok un acuerdo y aquí cómo

funciona fire veis es que podemos hacer

una sola búsqueda a la vez una sola

cuerda y por campo o propiedad nos vamos

a crear el primero una cuerda y que sea

para título ok vamos a buscar en el

título podemos decir algo como cuerda

y aquí vamos a pasar a la colección

y esto aquí vamos a pasar un wire x

diremos la búsqueda va a ser en la

colección y queremos los documentos los

cuales subtítulo sea igual a el string

que estoy recibiendo desde búsqueda y

vamos a crear otra igual para buscar

dentro del escape where is q va a ser

exactamente lo mismo con la diferencia

que el único campo que vamos a buscar es

que podríamos hacer búsquedas compuestas

pero éstas son para y condicionales y no

para condicionales aquí nos importa o

que coincida el título o que coincida el

scoop y lo que tenemos que hacer es

buscar u obtener los datos que han sido

como const sería snapshot título es

igual a white jet box con el cuervo lo

mismo para el snapshot es q pero fíjense

que si hacemos esto si hacemos una

weight primero voy a buscar este este va

a estar esperando y hasta que regrese

este comienza a estar acá y lo esperamos

este es mucho tiempo pero día aquí

conviene muchísimo más correr estas dos

en paralelo para lo cual le diremos

promise out aquí vamos a pasarle una red

de

de promesas de búsquedas pasamos tanto

este no lo que estoy haciendo pasamos

no esperen vamos a aquí estoy todo

confundido avanza jetbox con webber y

título

y luego de docs con webber y es q y esto

lo cerramos

ahora promise lo que va a ser ya no lo

necesitamos lo que hace es que me va a

ir a buscar esto de acá deberá buscar

esto en paralelo y cuando terminé me los

va a regresar me va a realizar una red

con ambos resultados así como empezamos

una red de redes una red entonces yo

diré que constante al rey snapshots es

igual a esto la k

y después

vamos a lograr en pantalla este este a

raíz de snapshots ok

y vamos a probarlo bueno aquí filtrar

datos hay que exportarlo

filtrar datos

y entonces lo queremos aquí en home

es importar la función de filtrar datos

y aquí en el under ya que tenemos la

búsqueda vamos a pasarle dicha búsqueda

en filtrar datos con búsqueda como

string por lo tanto si me vengo para acá

abro mi consola vamos a limpiarla si lo

hay aquí en buscar no los esté vamos a

buscar a das

fíjense que aquí me regresa este rey con

estas con estos 2 snapshots tal como lo

estipula mos aquí que me regrese a un

array de snapshots bueno ya que tengamos

este raid snapshots lo que tenemos que

hacer es que éste esté a raíz de

snapshots hay que hay que éste convertir

la información de información legible

aquí lo que hay que hacer es primero

crear una red la cual vamos a meter los

documentos ya filtrados y

este elegibles

ok y ahora tenemos este rey de snapshots

que no son los documentos en sí lo

queremos entonces es la radio napster

vamos a hacer un freak donde por cada

snapshot vamos a hacer otro fritsch

donde por cada documento vamos a empujar

en este rey el documento ya legible pp

aquí puede ser que le prestamos cuando

la propiedad de irak aquí cerramos esto

cerramos esto y guardamos y entonces ya

después tocaría regresar estos dos

tratados

y antes de regresar nos vamos a

lograrlos en pantalla

yo me vengo para acá vamos a limpiar con

sol y vamos a buscar a las dadas y

fíjense que es un objeto que tiene una

raíz de objetos por el grado con su

objeto y nos regresó este de aquí que es

este que estamos buscando por lo tanto

nuestra función funciona como

esperábamos y ahora de white and home lo

que vamos a hacer es decirle que lo que

sea que nos regrese esta búsqueda lo

guarde en 12 nuevos focus es igual a

white y entonces lo que haremos es

el estado ponerlo como nuevos docus y

después vamos a ponerlo en prueba vamos

a cerrar esto de acá si yo busco estas

dadas

me muestra este solo y ahora para que

este botón de resetear funciona hay que

agregarle una función que resetear donde

estamos aquí en reset y vamos a hacerle

con un click lo queremos es correr una

función

que me va a actualizar estado productos

para que me muestre todos y el input me

lo va a regresar a cero entonces diremos

que

const input es igual a este luego iremos

en punto barrio es igual a nada

aquí actualizamos si yo busco prueba 5

de muestra está la casilla de resetear

me muestra todos de vuelta y yo buscarse

por es q le doy enter me muestra este de

acá y se boy resetear muestra todos de

waldemar olimpia perfecto con terminamos

toda la parte de cruz y ahora viene que

es algo que sea muy interesante para

ustedes para mí lo es el tema de los

blogs el tema de las funciones de

declaró las funciones lambda cómo es que

funciona ok para hacer andar echar echar

andar las funciones de cloud fonseca en

fire page ya cambiamos nuestro plan de

prepago yo tenemos en prepago ojo éste

incluye el uso gratuito no se espanten y

entonces venimos acá a foundations ok

aquí hacemos clic en comenzar y nos va a

decir que tenemos que seguir lo que nos

quede es instalar las herramientas de

fire veis de manera global y ahora tengo

instaladas pero en su caso lo que

tendrían que hacer es desde la terminal

bien sea esta de viesgo o la terminal de

su computadora tendrían que venir pegar

y ejecutar vale y una vez que termina de

instalarse esto ojo si están en mac

tendrán que meter la acción sólo antes y

una vez que terminen de hacer esto aquí

nos indica que tenemos que inicializar

nuestro proyecto como un proyecto de

fire louis para ello venimos aquí a la

terminal vamos a matarla aquí vamos a

tenerla y vamos a correr fire face in it

aquí nos va a preguntar primero

desarrollo inicien sesión y una tengo

sesión iniciada bueno es que han

iniciado sesión es que les van a

preguntar qué funciones o servicios

requieren en nuestro caso requerimos

functions presionamos espacio lo

presionamos centre que nos pregunta si

queremos son algún proyecto nuevo alguno

existente uno existente naturalmente y

vamos a elegir en mi caso en esta

captura del minute uvb que fue el que

cree hace unos instantes nos pregunta si

vamos a escribir escribir en javascript

script iremos con javascript y para esto

le damos -entre de que le damos enter

esperamos y nos va a crear acá una

carpeta en el directorio raíz quiero

poner una carpeta que se llama functions

ojo no confundir con la que hicimos

nosotros en fuente en souls si salvamos

sol fíjense que tienen el directo y

realizamos esta carpeta que tiene sus

propios módulos y tiene un index es aquí

en este index donde vamos a escribir

nuestras funciones o que ya que nos trae

una función por defecto no nos interesa

nosotros lo que nos interesa es crear

blogs para cuando se modifiquen las

cosas entonces y aquí voy a abrir dos

terminales fíjense tengo estar aquí

arriba en el cual voy a correr en pin

start y lo tengo estar aquí abajo en la

cual voy a estar enviando este las

funciones

cómo funciona para lograr nuestro

cometido lo que tenemos que hacer es

además de esta de staying por el fire

fire functions tenemos que importar

admin en fair day sesión admin después

lo que haremos es admin punto

inicial

esto lo dejamos así y entonces ya

podemos comenzar a trabajar pero bueno

antes de antes de meternos de lleno les

explico esto nos inicia las funciones de

fair race esto nos da acceso a los

servicios de fires como administrador

aquí nos inicializa la aplicación como

lo hemos hecho aquí en soul y lo que

sigue es declarar ciertas servicios que

está trabajando igual como hemos hecho

antes aquí tenemos algo como debe es

igual a danny en punto fire store y

entonces lo queremos decir cuando las

funciones luego creamos una función para

registrar cuando se ha creado un

producto para gestar una función te vas

a escribir export y luego el nombre de

la función llamaría de creación producto

y esto va a ser igual a esto que estamos

importando functions nuevo punto fire

esto porque nos trabajar con fire store

y vamos a [ __ ] document y en documento

vamos a pasarle el path del documento o

sección que queremos estar escuchando en

este caso que escuchar la colección de

productos y queremos escuchar cuando se

cambie algún producto cualquiera ok esta

parte de producto y 10 dinámico lo que

haremos entonces es

haciendo referencia a este caminito

cuando ocurre algún a un cliente dice

cuando se cree algún documento lo que

haremos es correr esta función este snap

y este snack y snap es la información

que la información de esto que se crea

entonces digamos que producto es igual

no producto es igual a snap punto de ira

tal como lo hemos hecho cuando a como lo

hemos hecho en otros lugares y ya con

este producto lo que haremos es utilizar

esta base de datos quizá la cual

tengamos acceso como administrador para

lo cual diremos tv punto collection

productos no puede conexión logs punto

at y vamos a crear un documento que diga

de tipo de acción fue crear fecha va a

ser igual a new day por ejemplo y luego

un producto vamos a pasarle la

información que recibimos aquí en este

trigger vale lo que va a suceder si

cuando algún documento se han creado

aquí se va ejecutar esto de acá y se va

a escribir en esta colección que dice

buenas que tengamos esta función de

creación producto lo que tengo que hacer

es terminar escribir y escribir airways

diploide presionamos enter y nuestro

contenido de este archivo de index lo va

a revisar y lo cambiará para que corra

de manera este servirles mientras esto

sucede vamos a venir aquí a la

aplicación y bueno vamos a primero

esperar a que se envié

vale ya que se envió ahora si venimos

para cada bar veis la ciencia que

tenemos la función creación producto

pero antes vamos a venir aquí a la

colega las colecciones vamos a crear

esta colección que hemos definido que se

llama blogs y que vamos a poner

cualquier cosa

para poder crear la colección de logs y

es que aquí están sino que en esta

colección es donde queremos que agregue

el logo de lo que acaba de ocurrir y

vamos a ponerlo a prueba recuerden que

tenemos nuestra aplicación corriendo en

este de aquí entonces vas a crear un

producto que se llame se va a llamar

este producto función con 11 depresiones

de cantidad y 11 de scu le damos en

añadir y lo que va a suceder ahora es

que esta función que está corriendo agua

no está corriendo en sí pero que está

ocurriendo que estábamos escuchando

cuando se crea algún documento y cuando

esto ocurra es que se va a ejecutar esto

hay que crear una entrada en el blog

vale y para ello vamos a unos cuantos

segundos yo me vengo acá a blogs fíjense

que aquí ya me lo creo acción creación

fecha tal fecha y el producto fue

producto función ahí lo tienen y si yo

vengo y agregó otro producto vamos a

decir el producto función 2

no hay con este es q le damos en añadir

démosle unos segunditos más y lo que va

a pasar es que esta función se va a

ejecutar una vez más y que no tiene

producto función 2 es casi instantánea

es una maravilla y vamos a crear

entonces más funciones tenemos la

función de creación producto

vamos a crear

exports eliminación producto la cual va

a ser igual a

document déjenme cierro esto de aquí y

bajo esto de acá

document y queremos pasar el pan que más

igual a productos producto haití y que

le ponemos un til it’s ok en eliminación

y lo queremos es que el producto va a

ser igual a snap monteira igual que

antes ya lo que haremos es escribir en

la base de datos en lo que vamos a crear

un documento que diga eliminación la

fecha y vamos a pasar la info

y aquí que me falta mi fuente estoy aquí

y por último un exports que diga la

actualización

producto que va a ser igual a document

le pasamos el path que va a ser aquí

vamos a pasar en un update que cuando se

actualice vamos a correr esta función

acá donde diríamos que consta el

producto previo va a ser igual a change

before punto de ir a estar acá y lo

diremos con un producto cual izado es el

after fíjense que aquí no solamente

recibimos snap snap aquí estamos

recibiendo nuestros recientes nada

estamos recibiendo change ok y change

tiene dos propiedades before jiatf er

bueno con esto lo que haremos entonces

es davi punto en la colección de los

amos agregaron una entrada que diga

actualización con fecha producto previo

y producto actualizado y lo que sigue

como ustedes asumieron es lanzar estas

funciones en producción con fair face

diploide presionamos enter y esperamos

una vez más a que se envíen

vale una vez que se ha enviado vamos a

ponerlo a prueba si venimos acá a

foundations fíjense ya tenemos corriendo

actualización producto y eliminación

producto vamos a ver si cierto el

producto función vamos a cambiarlo a

hacer la función

y lo editamos y luego producto función 2

vamos a eliminarlo ahí lo tienen de más

de unos cuantos segundos y entonces si

me vengo aquí a blogs

cambio fíjense que aquí ya tengo el de

actualización me dicen que el producto

función se cambió a función tal como lo

hice y aquí debiera estar el de vamos a

actualizar aquí está

eliminación eliminé producto función 2

tal como lo hice entonces como pueden

ver esto es ajeno al código de la

aplicación esto ocurre de manera

servirles y esto también es un problema

y les diré por qué se habrá notado se

darán cuenta de que no dice quién hizo

la modificación no nos dice quién lo

creó no nos dice quien eliminó no nos

dice quién actualizó y es que sucede a

que estas funciones corren en un entorno

ajeno a nuestra aplicación por lo tanto

a estas funciones no tienen manera de

saber quién es la persona que ha

iniciado sesión

ok no no tiene manera de saberlo

entonces no pueden saber quién está

haciendo los cambios aunque técnicamente

sí se puede saber pero es todo un lío

todo un lío poder incluir aquí en este

código la persona que ha iniciado sesión

entonces lo que ustedes desean es que

aquí diga actualizado por hola roba las

citó o por juanito arroba hotmail lo que

tienen que hacer es en lugar de utilizar

estas funciones servirles estas cloud

foundations lo que tendrían que hacer es

crear ustedes una función que escriba

logs un tanto manual y es lo que vamos a

hacer para cumplir este vídeo entonces

quienes vayan functions vamos a una

función que se llame escribir lo punto

js y este escribir lo que va a escribir

precisamente un log aquí en esta parte

de fire store para lo cual vamos a

importar fire risa

no vamos a importar fire rise up desde

fire face diagonal credenciales vamos a

importar get firestone collection

2 y 6 2

desde fire with fire store y por último

vamos a inicializar debe como que fire

store punto fire veis aquí lo queremos

es crear una función

que vamos a exportar de manera default

escribirlo y aquí lo que va a suceder lo

siguiente va a recibir qué tipo de

acción fue y el producto para lo cual

vamos a hacer lo siguiente primero crear

una referencia a la colección para

cualquier amos colección ref es igual la

colección le pasamos de ve aquí como

primer argumento

luego vamos a crear una referencia al

documento do courel será igual a dos

alcohol vamos a pasar la referencia a la

colección y el nombre del documento que

queremos entonces aquí como nombre vamos

a poner new that your eyes string ok

vamos a nombrar nuestros documentos por

fecha y entonces único que faltaría es

ese

a crear la información que queremos

escribir para lo cual diremos qué acción

es igual a la acción que estamos

recibiendo fecha es igual a la fecha y

producto es igual al producto pero

también vamos a recibir el autor autor

será igual a autor y luego lo que

haremos es con esta referencia que

creamos vamos a guardar la información

que estamos definiendo aquí y aquí

también faltaría recibir el autor desde

los cambios y ahí lo tienen con esto en

mente o bueno con esto ya corriendo lo

que sigue es utilizar esta función de

escribir logs para cuando hagamos

cambios por ejemplo vengamos aquí a

añadir producto añadir producto va a

crear un blog para lo cual vamos a decir

aquí vamos a importar

como se dice escribirlo

ok entonces una vez que hayamos escrito

vamos a escribirlo con recuerden que

escribirlo recibe la acción producto y

autor reacción sería creación el

producto sería info producto que estamos

recibiendo aquí y el autor nos haría

falta recibirlo aquí en añadir producto

ok y entonces esta función si no me

equivoco la ocupamos aquí en el modal de

añadir

aquí añadir producto modal

añadir producto hay que pasarle el autor

ok

el usuario y para recibir el usuario que

minimizó esto

para recibir el usuario en mode al

añadir y que éste se lo pueda enviar

añadir producto para escribirlo para que

esto suceda hay que pasárselo desde home

aquí en home estamos recibiendo usuario

pues hay que pasarlo a los modales

diremos usuario es igual a usuario tanto

para agregar como para añadir

usuario ahí lo tienen y ahora aquí nos

obtenemos la parte de eliminar producto

y eliminar producto home le pasamos un

producto esta función además de recibir

el producto de debiera recibir el

usuario lo que haremos entonces es

importar escribirlo

y aquí vamos a escribir poner escribirlo

con eliminación producto y usuario y

entonces nos haría falta aquí en home

pasarle el usuario ok crear y eliminar

ya está y lo que sigue es la parte de

ética aquí en modal editar vamos a

recibir el usuario en añadir estamos

recibiendo no

usuario y usuario que bueno desde quien

evitar ya estamos diciendo el usuario

desde ese hombro pueden ver aquí y

entonces lo que haría falta es que aquí

al momento de editar producto y aquí en

añadir producto vamos a pasarle el

usuario y lo que tendríamos que hacer

aquí es crear otra función esta función

de añadir producto vamos a copiar la

duplicarla y vamos a nombrarla editar

editar productos hay tal productora

exactamente lo mismo que está haciendo

ahorita con la diferencia equivocar de

creación de medición que se vale y

entonces quien modal editar en lugar de

utilizar añadir producto utilizaremos

editar productos

y lo que hay que hacer es importar lo

que importamos editar producto desde

aquí está ya la podemos eliminar esto no

sé qué hace aquí

y ahora lo que sucede es que crear y

editar y eliminar ya nos van a estar

creando blogs con el usuario que estamos

recibiendo en ambos modales que estamos

pasándole desde home pero ojo fíjense

que aquí le estamos pasando el usuario

completo ya nosotros lo que nos interesa

es el email entonces aquí para eliminar

para eliminar tendríamos que pasarle

punto email

y crear productos

para crear producto tendríamos que

pasarle también el usuario punto email y

en

editar

producto también tendríamos que pasar el

gel y me vale crear editar y eliminar y

vamos a ponerlo a prueba si yo ahora

mismo tengo 345 debiera tener 7 ahorita

que cree uno vamos a le crear vamos a

ponerle el autor

le damos a añadir ya que manda un error

y es que tal parece que en añadir

producto tengo un problema con la

referencia tal parece que esta

referencia nombre está tomando la

constante entonces venimos aquí a añadir

producto

y es que sucede que nos faltó pasarle

estas las credenciales de quién editar

el producto lo mismo cuando ya está

funcionado anteriormente otra cosa que

vamos a esto es un error un tanto común

es mover esto aquí al interior de la

función vamos a pasarlo al interior de

la función y si probamos nuevamente le

doy en añadir me manda error una vez más

y es que dice que el primer argumento de

colección debiera ser una referencia

fire store

aquí en añadir producto como pueden ver

en el primer argumento es efectivamente

débil que es una referencia en get high

el estor lo queremos es la vieja y

confiable de detener nuestro servidor

y vamos a

tenemos alguien añadir producto

abc123 123

añadir y ahí lo tienen producto añadido

me creo el producto abc y ahora como

tengo corriendo esta función y además

añadir la parte de crear los de forma

manual aquí deberá tener 7 3 4 o 5 fines

aquí está el manual que yo hice lo

pueden ver por el nombre del documento

hola robarlas vitoria tiene el autor y

está en el producto y acá me acaba de

hacer el otro título aves este es el de

cloud functions título abc y este es el

manual título abc con autor vale y si yo

vengo para acá y eliminó vamos a

eliminar a veces lo que va a suceder es

que me va a crear este de acá que dice

eliminación el autor fue las vitolas

fito eliminó el producto abc y también

lo que va a pasar es que el cloud

functions me va a crear la entrada de

eliminación aquí esta eliminación ha de

irse y si yo vengo para acá y editó

función lo cambió a funciona a veces no

sale editar

aquí este no se actualizó aquí esta

función a veces si yo hago eso me vengo

para acá tengo una tercera entrada que

dice

edición y la edición la hizo la escrito

y me doy crédito el producto función abc

y aquí también alguna parte debe estar

el cloud function aquí está creo que es

este función lo cambió a función abc

entonces es así como pueden crear un

sistema del 2 obviamente tienen que

sopesar si requieren dejar sentado quién

fue quien realizó la acción de ser así

este cloud function se quedaría un

poquito corto porque pasarle la

información de quien tiene sesión

iniciada es un tanto complejo que es es

difícil vale entonces lo que pueden

hacer es algo manual como lo que yo hice

y esto también funciona y también pues

cumple su función vale vale y es así

como terminamos este vídeo desde por

favor en el me gusta y suscriban en caso

de que les haya gustado y en los

comentarios pueden decirme qué tipo de

tutorial les gustaría ver por acá en

pantalla van a ver dos vídeos uno

recomendado por youtube otro que es mi

último vídeo si les ha gustado el

contenido continúan revisando mi canal

para que sigan mejorando de sus

habilidades chicos y bueno nos vemos en

el próximo vídeo

Acerca del autor

¡Hola! Me llamo Adrián, pero todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.