En este vídeo te voy a enseñar cómo puedes crear una web que subes una imagen y le quita el fondo con inteligencia artificial.
Imagínate si la idea es potente, que hay productos ahí fuera que están cobrando por hacer esto.
Para crear nuestro proyecto vamos a utilizar Cloudinary, que justamente estamos realizando una hackathon con ellos y en el que todavía puedes participar.
Te dejo todos los datos en la descripción y disfruta del vídeo.
Cloudinary es un servicio que os permite subir imágenes y vídeo a través de una API, pero no solo es subir imágenes y ya está,
sino que además las podéis transformar, también los vídeos, podéis cropearlos, cambiarle la calidad, añadirle texto o imágenes encima, marcas de agua.
Podéis hacer un montón de cosas, quitarle el fondo.
Además, como tiene inteligencia artificial, pues la imagen detecta si sale un gorro, si salen unas gafas, dónde está la cara de la persona.
O sea, es que se pueden hacer cosas increíbles, tiene un montón de integraciones.
Y hoy vamos a hacer un desarrollo desde cero utilizando este producto para crear esto, remove.vg.
No sé si sabéis qué producto es este, pero esto es un producto que lo que hace es que tú subes una imagen, le quita el fondo y lo puedes utilizar, ¿no?
Por ejemplo, aquí, pues dices, esto te enseña el original y aquí le ha quitado el fondo y te puedes descargar esto y tal.
Pero es de pago.
Pues nosotros vamos a hacer uno que nos permita que sea gratuito.
Fijaos lo que cuesta, son c20 céntimos por imagen.
Pues nosotros lo vamos a hacer para que nos salga más barato e incluso podríamos que la gente nos pague por hacerlo, ¿vale?
Vamos a utilizar bit, vamos a utilizar bit.
Creo que voy a utilizar, creo que vamos a utilizar, vamos a utilizar Svelte y vamos a utilizar TypeScript también, pero con muy poquito, ¿vale?
TypeScript con poquita cosa.
Es que siempre hacemos React, es muy fácil Svelte.
Vais a ver que es muy fácil, es muy fácil y os va a llamar la atención y yo creo que además os podéis animar a hacer el proyecto con Svelte.
Y os lo voy a explicar todo, no os preocupéis, ¿vale?
Os lo voy a explicar.
La web de Ikea está hecha con Svelte, mira.
Vale, vamos a poner aquí el midu, midu remove.vg.
Vamos con ello.
Vamos a utilizar Svelte y vamos a...
Ah, mira, SvelteKit.
Nada, vamos a utilizar TypeScript, que no se diga.
Vamos a hacer pnpm install, que es una alternativa a npm.
Salamos todas las dependencias.
Ok, hago...
Voy a abrir ya el proyectito por aquí.
Vamos a hacer pnpran.
Y hacemos pnpm run dev.
Y aquí ya tenemos nuestro proyecto con Svelte.
Svelte, por si es la primera vez que lo escuchas, que ya sería raro, porque mira que aquí lo he dicho a veces.
Svelte es una alternativa a React que tiene una diferencia bastante importante.
Porque en lugar de funcionar con Babel y tal, lo que hace es compilarse.
O sea, Svelte es un compilador en realidad.
Sería un framework, pero es un compilador.
Y se parece mucho, mucho, mucho, mucho a HTML.
De hecho, podríamos decir que esto es HTML.
Fíjate, tú le pones aquí que el lenguaje es HTML y ya te pone como se ve todo.
O sea, es mucho más fácil que JSX.
Ahora bien, yo lo que te recomiendo es que te instales la extensión de Svelte, que es esta de aquí.
Que yo la tengo desactivada, pero la voy a activar para este workspace, ¿vale?
Te la activas y ahora sí, seleccionamos Svelte porque te trae algunas mejoras importantes.
Ahora, cosas que tienes que saber de Svelte.
Mira, aquí te iría como el JavaScript, el código de tu proyecto.
En este caso, como vamos a utilizar TypeScript, le ponemos aquí lang ts.
Y ahora detecta que esto que hay aquí es TypeScript.
Pero si no, esto iría así, sin nada y ya está. Punto pelota.
Luego, aquí iría lo que queremos renderizar.
Fíjate que yo aquí le quito esto.
Ponemos midu remove.bg, h1.
Esto así, ¿ves?
Ya aparece aquí.
Y aquí tendríamos los estilos.
Puedes poner los estilos en la misma página.
Es muy fácil.
O sea, es que es increíblemente fácil.
Una cosa que sí que voy a utilizar, porque si no, me va a costar la vida.
Voy a utilizar Tailwind, ¿vale?
Voy a utilizar Tailwind porque si no me equivoco, hay un proyecto que está muy chulo.
No sé si me equivoco.
Pero que es addTailwindSvelte.
Que con un comando, con un comando, este, creo que es este.
Con un comando te añade, es este.
Con un comando te añade Tailwind a tu proyecto de Svelte.
Lo cual, pues, se agradece.
Así que lo vamos a ejecutar.
En pxSvelte at arroba latest Tailwind CSS.
¿Vale?
Vamos a decir que sí.
A ver qué.
Vale.
Y se supone que ya lo añade.
Voy a hacer un pnpm run dev.
Y nos vamos aquí.
¿Vale?
Sí, sí.
Ya lo he instalado porque fijaos que ahora cómo se ve esto.
Que se ve como más finito.
Y si vamos aquí y miramos.
¿Ves?
Aquí ya me ha puesto cosas por defecto.
Le vamos a quitar todo esto.
¿Vale?
Y ahora le he quitado todos los estilos.
¿Vale?
Está hecho a posta.
Está hecho a posta.
Quitarle todos los estilos.
Por eso se ve así.
Lo importante es que aquí en H1, si yo pongo aquí Class Text 6XL.
Es que veamos que esto se hace más grande.
Ya está.
Ya tenemos T.
Así tardaremos menos.
Que si no, puede costar un poco.
Muy bien.
¿Qué navegador usas?
Uso Brave.
Pero yo tengo desactivado todo el tema de cripto.
¿Vale?
Agregar estándar.
Yo creo.
¿Ves?
No es necesario.
Una cosa muy chula que tiene Svelte.
Es que ya tiene como un pretty.
Tiene esto.
Incluso creo que si tú creas esto.
Esto no.
Esto no tiene.
A ver.
Bueno, claro.
Esto es de Types.
Pero creo que tiene algunos chequeos que te hace ya.
O sea, está bastante bien.
Está bastante bien.
Vamos a abrir la página que me voy a copiar.
Básicamente, ¿qué es lo que vamos a hacer?
Vamos a hacer una página web que podríamos vender.
En la que tú subes una imagen.
La imagen la subimos a Cloudinar.
Y a partir de eso, la imagen la transformamos para quitarle el fondo.
Es algo parecido a lo que hace esta página.
Remove.vg.
Que te digo una cosa.
Tú imagínate que Remove.vg tenga 1.000 usuarios.
Y que están pagando 9 dólares.
1.000 usuarios.
Por 9 dólares son 9.000 pavos.
Ahí lo dejo.
O sea, podríamos estar haciendo un proyecto de 10.000 pavos fácilmente.
Ahí os lo dejo.
Ahí os lo dejo.
Fijaos que una imagen son 2 euros.
Pues vamos a hacer esto.
Así que para empezar, si os parece, lo que podemos hacer...
Bueno, vamos a empezar fácil.
Que si no, luego nos liamos.
Yo voy a hacer también...
Fijaos que aquí podéis también arrastrar una imagen.
Esto también lo vamos a hacer.
Que podamos arrastrar una imagen.
Esto también lo vamos a hacer.
Vale.
Vamos a empezar por aquí.
Y vamos con ello.
Venga.
Me voy a copiar.
Tengo por aquí el logo de Cloudinary.
Lo vamos a poner, hombre.
Ya que esto lo vamos a eliminar.
Que no lo necesitamos.
Vamos a poner Cloudinary logo.
Esto lo podríamos sacar de Cloudinary.
Vamos a la página web de Cloudinary.
Fijaos este logo tan bonito.
Inspeccionar.
Nos copiamos en el SVG.
Y aquí lo va a nosotros.
Para nosotros ya tenemos el logo.
Vale.
Quitamos esta ID.
Estos estilos en línea.
De título.
Lo vamos a dejar.
Todo lo demás se lo dejamos.
Vamos a poner por aquí un footer.
Y en el footer podríamos poner...
Hecho con...
Vamos a ponerle...
Hombre.
Le vamos a dar crédito a la gente de Cloudinary.
¿No?
Cloudinary.
Cloudinary.
Y esto es un target blank.
¿Vale?
Target blank.
Rel.
No referer.
Aquí hecho con Cloudinary.
Y aquí va el logo de Cloudinary.
Si sabes JSX ya ves que se parece mucho.
O sea, se parece mucho Svelte a JSX.
Aquí son como componentes de React.
Ahora mismo debería verse más o menos.
Vale.
Esto veo que ocupa mucho.
Lo vamos a hacer un poquito más pequeño.
Vamos a ponerle 36.
Vamos a poner aquí.
Y aquí en el footer vamos a empezar ya a estilar un poquito.
Vamos a poner flex, file center, item center, gap x2 para separar un poco.
Font, semi-bolt y separación para arriba.
¡Hala!
Ya tenemos como nuestro footer.
Vamos con todo lo demás.
¿Qué es más importante?
Vamos a poner aquí el main.
El main.
Vamos a poner también el header para que la gente que vaya entrando sepa que estamos haciendo.
¿Vale?
Un h1 con remove y un span aquí.
Bg.
¿Vale?
Este lo voy a quitar de aquí.
Quitamos el header.
¿Qué podríamos poner?
Header.
Vamos a hacer que sea bastante pequeña la página.
¿Vale?
Esto lo margin auto para centrarlo y ponemos todo en el send.
¿Vale?
Esto no ha hecho lo que esperaba.
Nada.
Porque ya me imaginaba.
Aquí el contenido.
Ahí pondremos nuestro formulario para subir.
¿Qué es esto?
Ah, bueno.
Es que esto voy a hacer otro.
Esto lo voy a meter dentro.
Vamos a hacer otro.
Lo voy a meter todo en el main.
No me gusta, pero...
Tira, actualización de software.
Así esto lo que voy a hacer es centrarlo todo con un grid.
Ahora veréis.
Vamos a hacer esto.
Le voy a meter aquí un grid.
¿Vale?
Y le voy a decir que esto ocupa toda la pantalla.
H screen.
El footer también lo vamos a meter aquí dentro.
De hecho, esto le podemos decir que es un...
Y aquí vamos a meter el...
Y aquí el content.
¿Vale?
Y ahora vamos a...
Vamos a hacer que esto...
Ahora sí que quede bien.
El header.
Ponemos un poquito de separación arriba.
Y esto le vamos a dar un toque a nuestro logo.
Voy a hacer un logo pirata.
¿Vale?
O sea, que nadie me diga ahora...
Ah, es que este logo...
Yo qué sé.
Me voy a inventar un poquito como...
¿Vale?
Esto más o menos.
Vamos a hacer que quede como más...
Más justito.
¿Vale?
Para que le dé un toque.
Y a este le cambiamos un poco el color.
Es el logo más pirata del mundo.
Pero os digo una cosa.
Os digo una cosa.
Que este logo no es mejor.
O sea, que este logo no es mejor.
O sea, que nadie me juzgue porque este logo no es mejor.
¿Vale?
Así que...
Podría...
Este...
De hecho, esto me lo copió después.
O sea, que...
Bueno.
Yo he hecho este logo.
Luego le ponemos un SVG.
Y ya está.
Pero este luego está cobrando dinero.
Yo esto lo acabo de hacer en dos segundos.
¿Vale?
Venga.
Vamos con el main.
En el main...
¿Qué vamos a hacer dentro del main?
Vamos a tener...
Sí, aquí me está poniendo todo lo que le da la gana y mucho más.
Vamos a necesitar tener un...
Como un formulario.
¿Qué vamos a querer renderizar aquí?
Yo voy a utilizar drops.
Porque vas a ver una cosa muy chula que vamos a hacer.
Es que vamos a hacer que puedas arrastrar la imagen.
Y que al arrastrar la imagen se suba a Cloudinary automáticamente.
Y está muy chulo porque esto te va a servir para un montón, pero un montón de proyectos.
Un montón.
Así que lo voy a hacer con Svelte.
Pero, por ejemplo, Dropzone.
Y es que ya sería absurdamente fácil.
Tienes el componente de React Dropzone.
Que es instalarlo, usarlo y ya está.
¿Ves?
Que tienes un drag and drop aquí.
Que aquí le puedes...
A ver si encuentro una imagen.
Dejadme que busque...
Mira, esta imagen.
Por esta imagen, por ejemplo.
Tú la arrastras aquí.
¿Ves?
Y ya te ha detectado esto.
Y aquí en Dropzone, pues lo mismo.
Tú pones aquí la imagen.
Fíjate qué bonito.
Además, lo puedes estilar.
¿Ves?
Te aparece que lo estás subiendo.
Te dice que ok.
O sea, está muy chulo.
La verdad es que está muy chula y es muy fácil de utilizar.
Y lo vamos a aprender ahora para mover las manitas.
Es que mover las manitas es...
Spam time, ¿no?
No es spam.
¿Por qué es spam?
Ah, yo ayer hice un proyecto...
Spam el tuyo.
Vale, vale.
Spam el tuyo, a ver.
Hizo mejor subtítulo que yo en mis proyectos teniendo daño programando.
Bueno, eso ha hecho una cosa súper fácil.
O sea, tampoco una del otro mundo.
Vale.
Pues vamos a utilizar Dropzone, ¿vale?
Para utilizar Dropzone lo vamos a instalar.
Yo voy a utilizar la versión...
No sé si hay un Dropzone Svel.
Lo desconozco, ¿vale?
Yo lo voy a utilizar aquí a saco.
O sea, voy a utilizar aquí con un import del Dropzone from Dropzone.
Voy a traerme los estilos también.
Y por ahora ya está.
Y luego te comento cómo hay que utilizarlo.
Lo más importante para utilizarlo es que necesitas...
Ah, mira.
Una cosa.
Voy a utilizar un componente.
Que si no esto me va a empezar a quedar un poco...
Voy a poner aquí Step Upload.
Porque tendremos diferentes pasos.
Así que vamos a poner aquí en el script Lang TS.
Importamos esto, ¿vale?
Y...
Ah, mira.
Esto es interesante.
Vamos a utilizar el Unmount.
Así que perfecto.
Vale.
¿Qué podemos hacer aquí?
Aquí vamos a editar un formulario sí o sí.
Que es donde vamos a renderizar, digamos, Dropzone.
Que ponemos un formulario.
¿Vale?
Y aquí vamos a ponerle, por ejemplo...
Bueno, ves que aquí pone Dropzone ID y tal.
Bueno, esto yo voy a poner aquí Dropzone con la ID.
Luego la utilizamos.
Y aquí viene lo interesante.
Aparte de las...
Voy a hacer primero...
Lo voy a hacer primero visual para que lo veas.
Y luego lo inicializo con Dropzone porque vas a ver que hay algunos cambios ahí.
Venga.
Vamos a tener aquí el formulario.
Venga.
Dentro, ¿qué es lo que quiero hacer?
Como me quiero copiar un poco esto de Remove, vamos a hacer también esto.
Fíjate que aquí tiene como esto, así como una sombra.
Y tiene un botón ahí que pone Upload Image.
Porque tú le das y te aparece lo de subir las imágenes.
¿Vale?
Pero también la puedes arrastrar.
Pues vamos a hacer como las dos cosas.
Vamos a hacer aquí, vamos a tener nuestro botón.
A ver, ¿puedo poner un botón?
Creo que lo mejor es que no sea clicable.
Y te explico por qué.
Si tú pones un botón, a lo mejor puede ser que rompamos la funcionalidad que realmente
va a tener Drops.
Que vamos a hacer en un strong para que visualmente al menos se vea esto.
Vamos a copiarnos más o menos los estilos.
O sea, tampoco hace falta...
Mira, de hecho, voy a hacer un botón.
Pero le voy a quitar...
Voy a hacer un botón.
Pero le voy a hacer el pointer events known.
Y así le quito el click para que no interfiera con el funcionamiento por defecto que tiene Drops.
Lo hacemos con el rounded full.
¿Vale?
El text bold, text white, text XL.
Más o menos.
El padding horizontal le damos 6.
Y el vertical le damos 4.
Y esto...
A ver, esto nos faltaría también estilar el formulario.
Lo voy a hacer un poco así, basándome en este estilo que tenemos aquí a la derecha.
¿Vale?
Que tiene el shadow.
No tiene un borde, pero yo le voy a poner un borde porque me gusta.
El border dash.
¿Sabes?
Muchas veces este tipo de drag and drop tienen como un borde que es discontinuo.
Pues le vamos a poner border 2.
Vamos a poner que el border tenga un...
Sí, pues se va a ver muy poco.
También hacemos que esté redondeado.
Porque fijaos, este está redondeado.
Vale, ya le he puesto la sombrita.
Vamos a poner que tenga un aspect ratio como el del vídeo.
Que ocupe todo el espacio.
Y vamos a hacer que sea flex, todo se centre.
Lo que hay dentro se centre.
Y este dentro se organice como una columna.
O sea, de arriba a abajo.
Y yo creo que con eso ha quedado fatal, ¿no?
No se ve absolutamente nada.
¿Por qué no se ve nada?
¿Qué hemos hecho aquí?
Ah, bueno, claro.
Es que seguramente como no lo hemos inicializado con Dropson, puede ser que no lo esté pillando.
Ah, no.
Es que no estamos renderizando el componente.
No estamos renderizando el componente.
Qué leche.
Tepa upload.
Bueno, vale.
Ahora pinta mejor.
No pinta...
No pinta increíble.
Pero esto es porque nos falta esto.
O sea, que nos falta esto.
Porque no está pillando.
Me da la sensación que no está pillando todo el ancho que debería.
Vale.
Vamos a ver por qué pasa esto.
Lo arreglamos en un momento.
Y os leo a ver si tenéis alguna pregunta de todo lo que hemos hecho por ahora.
¿Veis?
Esto no está pillando esto.
Sí que está pillando todo el espacio.
Este no está pillando todo el espacio.
A ver.
Este debería ser que debería pillar todo el espacio.
¿Por qué no pilla todo el espacio este?
Sí, este sí que tiene todo el espacio.
Todo el espacio.
El header tampoco está pillándome...
No, ahora me está dejando un poco rayado este.
¿Por qué no me pilla?
CSS es mi pasión.
Vamos a ver.
¿Por qué no está pillando todo el...
Aquí en el grid he pillado full, no sé qué.
Claro.
También es verdad...
A ver, una cosa que podríamos hacer por ahora, ¿eh?
Seguramente...
Ah, no.
Es que me va a pasar.
A ver.
Yo entiendo que es por el grid.
Y que seguramente debería ponerle que el grid tenga una columna y que...
Pero...
Entiendo que si le digo que las columnas...
Ahora funciona bien.
Es por el grid.
O sea, este grid...
Le digo que grid con una...
Ya está.
Con esto ya lo deberíamos.
Vale.
Pues ahora sí que funciona bien.
Porque tenía que haber dicho que tiene que utilizar una columna.
Si no...
Vamos a ponerle también un padding un poquito para que se separe un poco.
Bueno, ya tenemos nuestro producto.
Más o menos.
Más o menos.
Le voy a quitar esto, pero voy a hacer que empiece...
Voy a...
Porque no sé si yo quedo encima.
Ah, no.
Bueno, no pasa.
Vale.
Me parece que el place content hace que los hijos no tengan el 100%.
Interesante.
¿Por qué el aspect video?
Nada, por nada.
Sí, como las imágenes muchas veces pueden ser...
Lo podríamos hacer cuadrado.
Lo que pasa es que si lo hago cuadrado va a ocupar mucho espacio.
Podéis hacer lo que os dé la haga.
Gracias por la explicación.
Como recién estoy entendiendo JavaScript, solo entiendo que hay HTML y me confunde el resto.
Bueno, ahora mismo esto es como algo parecido a HTML.
Estamos utilizando también unos componentes aquí.
Y ya está.
No será el max...
No.
Esto lo que hace es limitarnos el ancho.
Nos está limitando el ancho.
El problema es el grid.
Y ahora con el grid calls 1 le he dicho que solo hay una columna.
O sea, no te rayes.
Solo hay una columna.
Entonces, como solo tiene una columna, está haciendo que vaya de arriba a abajo.
Y que ocupe todo el expo.
Bueno, visualmente ya pinta bastante bien.
Las cosas como son.
Ahora lo que nos faltaría es que nosotros al arrastrarle una imagen...
Trae aquí una imagen.
¿Ves?
Que funcione.
Y obviamente no lo está.
Vamos a inicializar entonces todo lo que sería Dropson.
Esto lo podéis encontrar en Dropson en su documentación.
En su documentación que la tenéis aquí.
Que no está nada mal la documentación.
Tenéis la instalación.
Cómo inicializarlo.
¿Vale?
Mira, ya veis aquí que pone en tu HTML asegúrate que tienes un elemento que actúa como zona de dejar las cosas.
Aquí ya tenemos, ¿no?
Y la acción es importante que la tendremos que cambiar.
Ya dice que en JavaScript lo que tenemos que hacer es importar Dropson.
Esto ya lo estamos haciendo en esta línea.
Y para...
Bueno, el CSS yo lo estoy importando porque le va a dar algunos estilos internos que pueden ayudarnos.
Y aquí en la instalación...
No.
Compose.
¿Vale?
Standalone file.
Pa.
Setup.
Puede ser declarativo o puede ser imperativo.
¿Vale?
Nosotros vamos a hacerlo imperativo.
Sí, lo vamos a hacer imperativo.
El constructor acepta dos argumentos.
Uno, el elemento donde tenemos el formulario que va a servir de zona donde vamos a dejar nuestras imágenes.
Y aquí todas las opciones que necesiten.
Para eso lo que vamos a hacer aquí es tener un on mount.
Y en el on mount vamos a decir que cuando se monte nuestro componente vamos a crear nuestro Dropson.
Joder, madre mía, todo el contenido que me ha hecho esto.
Aquí se ha pasado un poco las cosas como son.
Lo vamos a hacer nosotros paso a paso porque me parece un poco exagerado lo que ha puesto ahí.
Y no tiene pinta de que todo va a estar bien.
Te digo una cosa.
La gente de Cloudinary tiene un widget.
En el caso de que no te quieras preocupar, ¿ves?
Tú puedes instalar el widget de Cloudinary que funciona súper fácil, súper bien.
No te preocupas y así puedes cargar imágenes.
Imágenes súper fácil, ¿ves?
Upload files, no sé qué.
Pero bueno, yo os quiero dar la explicación porque como esto ya está explicado, pues oye, lo podéis hacer así y perfecto.
Funcionará, genial.
Lo podéis hacer con servidor o sin servidor.
Y esto lo podéis hacer desde local y genial.
Pero yo os quiero explicar cómo hacerlo de forma un poco como más desde cero con una biblioteca totalmente externa para que veáis que se puede y que entendáis todos los pasos que hay detrás.
Pero lo podéis hacer de diferentes maneras, ¿vale?
O sea, que esto no tenéis por qué hacer así.
Pero bueno, os puede servir para hacerlo y dejarlo bonito con vuestro.
En Dropson le tenemos que decir cuál es el elemento que va a funcionar como Dropson.
Y aquí tendríamos todas las opciones.
Por ejemplo, upload multiple files.
Yo le voy a poner false porque no tiene mucho sentido.
Le podemos decir cuáles son los ficheros que vamos a aceptar.
No sé si esto es así.
Yo pensaba que se tenían que poner las extensiones.
Ah, vale.
Move, trial, no sé qué.
Vale.
Yo no sé si esto...
Dropson.
Specify, specify.
Pues yo pensaba que era de otra forma.
Yo lo voy a hacer como yo pensaba y si nos da un error, pues ya lo cambio.
Yo creía que se hacía así o al menos yo antes lo hacía.
Que es como para decirle cuáles son los archivos que tú haces.
Vamos a decirle que solo un archivo como máximo.
Y aquí tendríamos que decirle la URL a la que vamos a ir cuando querramos, querramos subir un archivo.
A ver, lo podemos poner aquí, pero yo creo que lo mejor normalmente para que se vea correctamente es que lo podéis poner también en el formulario.
Bueno, vosotros aquí en el formulario, un formulario al final tiene una acción.
Pues podéis poner aquí el action y aquí poner la URL.
De dónde sacáis esta URL, dónde sale, cómo se tiene que hacer.
Vale.
Esta action, vosotros os vais a vuestra cuenta de Cloudinary y aquí en login, capaz, aquí en el login, voy a iniciar sesión.
Vais a ver que tenemos vuestro cloud name.
Vale.
Entonces yo me imagino que en algún sitio lo tiene que poner mejor, la URL completa.
Pero lo que vais a ver, por ejemplo, yo en el blog utilizo Cloudinary y lo utilizo para esta imagen.
Pues digamos que hay como dos acciones que podéis hacer en vuestra cuenta.
Tendríais aquí, esto de aquí, que sería, fijaos, tendríais redes.cloudinary.com, midudev sería esta cuenta de aquí, el cloud name.
Luego le ponéis aquí si es una imagen o es un vídeo.
Y aquí sería la acción.
Y en acciones tenéis dos diferentes.
Tenéis fetch o tenéis upload.
Nosotros vamos a utilizar la de upload, ¿vale?
Upload.
Luego aquí le podríais pasar todos los parámetros, pero nosotros no lo vamos a utilizar, o sea que todo esto fuera.
Lo único que vamos a querer hacer es esto.
Es que suba a la cuenta de midudev una imagen.
Suba una imagen.
Y esta va a ser nuestra URL, ¿vale?
La vamos a poner aquí en el action y esto es lo que va a hacer que funcione.
Ahora bien, esto es solo parte de lo que tenemos que hacer al configurar Dropson.
Porque ahora que ya tenemos esto en Dropson, fijaos, ahora tengo dudas si tenemos que configurarlo aquí en la URL.
Pero bueno, da igual.
Por ahora lo vamos a dejar así, si no funciona ahora lo arreglo.
En Dropson tenemos diferentes eventos.
Por ejemplo, cuando arrastras el archivo, cuando da un error y tal.
Y puedes escuchar estos eventos aquí.
Le das a Dropson, On y podemos escuchar, por ejemplo, cuando esté enviando los archivos, ¿vale?
Y aquí tenemos diferentes parámetros.
El archivo, la request y el form data.
El form data son los parámetros que está enviando el formulario.
Lo que es interesante aquí es que aquí podemos añadir la API Key, configuración, que es para Cloudinary.
¿Y cómo lo hacemos esto?
Pues mira, si nos vamos aquí a configuración, aquí a settings, abajo a la izquierda, no lo veis, pero está muy chico.
Aquí, ¿veis aquí que hay un setting?
Una cosa que está muy chula es que podéis, ¿veis que aquí tenéis Product Environment Settings?
Y tenéis aquí Upload, Optimization, Security.
Tú te puedes crear como presets, configuraciones preestablecidas de cómo se tienen que subir los archivos y todo eso.
Aquí, por ejemplo, yo, fíjate que tengo aquí, tienes un montón de configuración.
Pero en Upload Presets, tú aquí tienes como presets, configuraciones preestablecidas que puedes utilizar.
Y aquí tendríamos el nombre.
En los settings puedes decirle que detecte automáticamente las caras.
Y así esto irá mucho más rápido que no si lo tienes que hacer on the fly.
Los nombres tienen que ser únicos.
El tipo de acción que quieres hacer con este preset, pues aquí lo que queremos es subir el archivo.
El modo de acceso de estas imágenes, si tienen que ser privadas o tienen que ser públicas.
Los formatos que vas a permitir que tenga.
O sea, para que te hagas una idea, ¿veis? Aquí hay un montón.
Esto es el nombre que va a tener el preset.
Si quieres que esto firme o no firme las imágenes, puedes poner que no lo haga o que sí que lo tenga, como tú quieras.
Esto sobre todo es por si lo vas a utilizar con HTTPS.
Y claro, en local no solemos tener HTTPS.
Normalmente, pues lo mejor puedes hacer es utilizar unsigned.
Si quieres que utilices filename, no sé qué.
Pero bueno, en general lo puedes dejar tal y como lo tiene, ¿vale?
Pero hay veces que vas a querer, pues yo que sé, que taggear estas imágenes porque quieres decir que son productos.
Bueno, pues ya sabes que como vas a utilizar este preset, que te las taggeé todas como que son productos.
O también, si quieres que es, como son textos, que te haga el OCR.
OCR lo que hace es detectar el texto de la imagen y te detecta el texto y a partir de ahí, pues puedes hacer un montón de...
Si quieres que detecte las caras, si quieres que quite las imágenes, los fondos por defecto.
Esto lo vamos a dejar como non porque lo vamos a hacer on the fly y va a quedar mucho más chulo, ¿vale?
Pero lo podrías hacer.
Y al final puedes hacer aquí un montón de transformaciones por defecto, de las cosas que vas a subir, lo que quieras.
Yo esto lo voy a dejar así.
O sea, vamos a dejarlo como viene.
Solo que voy a dejar que sea unsigned, ¿vale?
Y ya voy a utilizar el que teníamos, que estaba justamente para no crear dos.
Lo voy a dejar tal cual.
Y fíjate que aquí tienes el nombre.
Vale, pues esto es súper importante porque vamos a necesitar indicarle cuando subimos.
Le decimos, oye, del form data que estamos enviando, quiero que me añadas esta información.
Donde el upload preset que vamos a utilizar es este de aquí.
O sea, que le tienes que pasar este nombre.
Esto depende de la biblioteca.
O sea, si utilizas SDK de Cloudinary es mucho más fácil y de otra forma mucho más sencilla.
Si utilizas otras extensiones, React, Upload, lo que sea, pues seguramente se tiene que hacer de otra forma.
Te lo cuenta y ya está.
También lo puedes hacer en otro punto.
O sea, esta información, lo importante es que nos necesita la API de Cloudinary para entender lo que quieres enviar.
Otra cosa es que podemos enviarle el timestamp para decirle, oye, ¿esto de cuándo es?
Le vamos a decir que es date now y esto lo vamos a partir entre mil para quitarle los milisegundos.
Y si no, vamos a hacer que es cero.
Bueno, esto date now, a ver si esto lo...
Esto es para, me imagino que es para redondearlo.
Creo que esto no.
Que no se puede haber visto antes que Jacob Pile se lo ha puesto.
Vamos a dejar el timestamp.
Y finalmente la API key.
O sea, súper importante.
Y la API key, ¿de dónde la sacáis?
Ya está, esto es todo lo que necesitamos, ¿eh?
Ya no te tienes que preocupar más de esto.
Una vez que lo haces, ya tenemos.
Aquí tenemos la API key.
¿Ves que pone API secret?
Bueno, mi API secret ya está bastante fastidiada de lo suyo porque creo que antes...
Ah, no.
No, la API key está aquí.
Perdón, la API key está aquí.
Esta es la API key.
La API key realmente puede ser pública.
La que no puede ser pública es la API secret, ¿vale?
Pero la API key sí que puede ser pública.
Así que la podéis utilizar tal cual y ya está.
Y con esto, bueno, vamos a hacer un drop zone success para saber si ha ido todo bien.
Y si ha ido todo bien, vamos a hacer un console log de la respuesta para ver qué nos ha devuelto.
Y así ver si tenemos la información de la URL y tal.
Y vamos a poner aquí, ha ido bien, ¿vale?
Ha ido bien.
Y si no, pues podremos decir si ha habido un error, pues ha ido mal y vamos a ver la respuesta.
Y con esto deberíamos tener ya al menos el hecho de poder arrastrar algo aquí.
Vamos a probar, vamos a probar.
Si yo arrastro ahora una imagen...
Vale, han pasado cosas de que se ha roto la UI, pero fíjate que tenemos esto aquí.
Muy poco ha tardado, la verdad.
Muy poco ha tardado.
O sea, no se ha visto visualmente si se estuviera subiendo.
Vale.
No, protocol, error, ht2, protocol, error.
Mira, pues ya me está dando error, ¿no?
No sé si me está dando un error, por el HTTPS.
Yo no sé si será por el HTTPS, porque...
¿Veis?
Eso es lo que os decía del HTTPS.
O si es que esta acción en realidad la deberíamos poner aquí con la URL y lo del clowning.
Ahora lo...
Ahora lo mismo.
Vale.
Vamos a arrastrar esto.
¿Ves?
Responde con...
Algo ha ido mal.
Pues ves, mira, al menos nos hemos enterado de que algo ha ido mal.
Vamos a ver aquí...
200.
O sea, la option ha ido bien.
Pero aquí, en la vista previa, nos dice que...
Respuesta.
Se nos está quejando de que no va bien.
Le he dejado el unsign, ¿no?
Porque justamente por esto del HTTPS, cuando he puesto aquí esto, en upload, el preset,
dejado unsign, no he puesto nada raro aquí con los controles.
No he puesto nada...
Vale.
Os voy a leer mientras, a ver si me dais la solución.
Y ya está.
Claro, quieres hablar desde HTTP a HTTPS.
Que funcione toda la primera muy raro.
Eso es verdad.
Totalmente.
Midu, ¿claro dinario se puede utilizar si tengo un producto donde clientes suben imágenes
y necesito optimizarla en calidad y en tamaño específico?
Totalmente.
Totalmente.
Y la respuesta regresa como binario a blob, así que tienes que crear un preview.
No, pero en este caso es que está fallando porque no le gusta, ¿eh?
Como lo estamos enviando.
A ver, el upload preset lo tengo bien.
O sea, este upload...
El API key, bien también.
Lo único que me queda duda...
A ver, podría probar aquí este...
No sé si aquí...
Es que es verdad que aquí yo tenía otra versión.
Porque aquí hay diferentes versiones.
Puede ser que aquí...
Voy a mirar esto, un momento.
Puede ser que para subir una imagen, API URL no sea con esta URL que yo le puedo.
No sea con esta URL.
Resurs type, no sé cuánto...
A ver, a ver el overview.
Vale, vale, vale, vale.
Vale, vale.
¿Ves ahí el V1-1?
Yo creo que es ese problema.
Yo creo que es ese problema.
Yo creo que me ha faltado eso.
Me ha faltado eso.
Me ha faltado eso.
Yo creo que ese es el problema.
A ver, vamos a ver una cosa.
Voy a descargarme una imagen de esta misma, de esta chica, la original.
Mujer.
Está usted muy fuerte.
Está más fuerte que yo, ¿eh?
Vamos a arrastrar esto aquí.
No me ha gustado que arrastre una imagen.
¿Por qué no me gusta que arrastre una imagen?
Si hace un momento...
¿Hace un momento?
Ah, perdón.
Que he dejado esto aquí.
Estaba petando.
Por eso no funciona.
Vale.
Ha respondido un 405.
Bueno, nos vamos acercando.
Nos vamos acercando.
Ahora, al menos, la API que estamos utilizando es la buena, ¿eh?
Venga.
Vamos a ver otra vez por qué esta imagen la ponemos aquí.
Y el upload me está dando la respuesta de 405.
405.
Claudinari.
Es method not allowed.
Vale.
Estoy dudando.
Es que, claro, estoy dudando si en el formulario, o sea, en este formulario que tenemos aquí,
no estoy poniendo nada de post y tal, que a lo mejor lo tenemos que poner aquí.
A lo mejor lo tenemos que poner aquí.
Vamos a probarlo.
A ver.
Vamos a probar.
Vamos probando y si no, miramos la documenta.
Si no, miramos de verdad de la buena.
A ver.
Server responde 400.
Pero esta vez, o sea, estoy bastante seguro que he puesto bien la URL.
A ver.
¡Ay, no!
La madre que me parió.
Madre que me parió.
A ver.
Es API, ¿vale?
Es que mira que acabo de mirar la API para asegurarme.
Y mira que lo he visto.
Me falta esto.
Me falta esto.
Ya está, ya está.
Ahora sí.
Ahora sí.
Ya está, ya está.
Eso me pasa por no me dar la documentación.
API.Claudinari.
Ahora sí, ahora sí.
Ya está, ya está.
Ya está, amigos.
Ya está.
Vale.
Ahora sí, ahora sí.
Vale.
¿Veis?
¿Veis que ahora no ha fallado?
Vale.
No ha fallado porque si me voy aquí a Settings, me voy a mi proyecto y me voy a Media Library,
vamos a tener a la chica aquí.
Seguro.
Ahí está, ¿vale?
Ya está.
Eso es lo que ha pasado.
Eso es lo que ha pasado.
O sea, lo que ha pasado es que la URL, claro, no mirando la documentación, haciendo las cosas
de memoria, no funciona.
A ver.
La API post para subir imágenes es esta.
API.Claudinari.com barra.
La versión barra.
Donde pone demo es el cloud name que lo encontráis aquí.
Vuestro proyecto.
Vais aquí en el dashboard, ¿vale?
Este cloud name.
Y luego barra image, en el caso de que sea un vídeo, ponéis vídeo, barra upload, ¿vale?
Ya está.
Y ese es el...
Y ahora sí que funciona bien y no hace falta la URL.
Cosas, más cosas que podemos hacer.
A ver, teniendo en cuenta que vamos a querer evitar, o sea, que salga cargando, que no sé,
que se vea visualmente si está cargando y todo esto.
Una cosa que podríamos hacer, voy a reiniciar esto, ¿vale?
Vamos a copiarnos, voy a dejar esto de aquí.
¿Veis que aquí pone or drop a file?
Lo voy a hacer también, para que quede visualmente más bonito, ¿vale?
Y vamos a arreglar algunas cosas.
Vault.
Y justo debajo, vamos a poner aquí strong, vamos a poner or drop a file, text lg, mt4.
Y vamos a poner que el texto sea como...
Más o menos, más o menos.
Esto por un lado.
Ahora bien, tenemos cuando la imagen está...
O sea, cuando podemos subir la imagen, cuando está cargando la imagen, cuando hay un error.
Hay diferente.
A ver, no los voy a hacer todos porque me podría estar aquí todo el día, ¿vale?
Pero te voy a enseñar el camino de cómo lo podríamos hacer.
Podríamos utilizar un estado, pero es más interesante si utilizamos una store.
Una store en Svelte es como un estado global que es tan fácil de utilizar que da hasta miedo de lo fácil.
Mira, tú escribes, creamos el archivo, store....
Pues no hace falta esa punta.
Y aquí vamos a importar writeable desde Svelte barra store, ¿vale?
O sea, nos traemos la dependencia de a store de Svelte.
Y aquí ya podemos exportar, vamos a poner el image status.
Y el image status vamos a poner que sea, por ejemplo, idl.
Idl, ready, lo que sea.
Bueno, como estamos utilizando TypeScript, vamos a crear aquí un types.d.ts y vamos a crear un enum.
Export, enum, image, status.
Vamos a tener diferentes estados.
Podríamos tener más, ¿eh?
Pero yo voy a crear el de idl, que sería como que está preparado para...
Le voy a llamar ready.
Tomas, ready, uploading y done.
Pero podríamos tener error, podríamos tener un montón.
Vamos a empezar sencillo y luego si vemos que necesitamos más, pues utilizamos.
Vale.
Así que en lugar de utilizar el string, podríamos utilizar aquí el image.
Ah, ¿por qué no me la ha traído?
Image, yo lo estoy exportando.
Import type, image status.
No sé por qué no me estaba traído.
Ahora aquí sí que fue.
Vale.
Por defecto está ready.
Pero luego veremos que no puede usar como manera porque está importando.
Perdón.
Vale.
Iremos cambiando cuál es el estado en el que se encuentra nuestra...
Vamos a tener también aquí un sitio para guardar la imagen porque no me he fijao, pero cuando
arrastramos aquí la imagen, en la consola ya deberíamos tener información, el objeto.
Ha ido bien.
Vale.
Fíjate que tenemos aquí secure URL.
Y esta URL, esta URL, que soy capaz, esta URL ya debería ser nuestra imagen.
Ya tenemos nuestra imagen subida con una URL.
Pues aquí vamos a tener un original image.
Voy a inicializarlo como null.
Y luego vamos a tener aquí como la imagen modificada, la que no tiene el fondo.
Por ahora la vamos a dejar en...
Entonces, ¿qué vamos a hacer ahora?
Vamos a jugar con el image status.
Esto ahora, todas estas tres cositas son estados globales, digamos, que tenemos en Svelte,
que podemos importar en cualquier sitio y que podemos observar cuando cambia y que se
vuelva a renderizar nuestra aplicación y tal.
Es como un Zustan de React bastante sencillo de utilizar.
Es que es tan sencillo que da hasta miedo.
Da hasta miedo de lo potente que es y lo sencillo que...
Vale.
Pues lo que podemos hacer aquí, me voy a importar en el state of load, me voy a importar
el image, image status, los tipos, ¿vale?
El image status.
Porque dependiendo del estado en el que se encuentra la subida de la imagen, vamos a
hacer que se muestre diferente información o que se vea diferente el formulario, ¿vale?
Para hacer...
Por ejemplo, mientras...
Cuando ha sido access, vale.
Pues vamos a decir, vale.
Cuando ha sido access, me importamos el image status de la store y el image status,
vamos a hacer que pase .set y le decimos el nuevo valor.
Así que le ponemos...
Bueno, podríamos haber hecho un objeto, pero al final...
Image status .done, ¿vale?
Como que ha ido bien.
Esto además nos va a ayudar a renderizar diferentes cosas, que vas a ver que es muy
fácil con Svelte.
Console log de la response, ¿vale?
De la response hemos visto que teníamos secure URL, response.
Y vamos a sacar aquí, vamos a mover esto y vamos a poner, ¿cómo lo hemos llamado?
Original image.
Pues originalimage.set.
Y aquí deberíamos crear la imagen con fondo transparente y guardar en el background.
Por ahora no lo tenemos, así que lo vamos a dejar.
El original image este lo sacamos de la store, ¿vale?
Y por ahí ya es.
Con el error no voy a hacer nada porque si queréis lo podéis hacer en vuestros proyectos,
que está bastante.
Y aquí, fíjate aquí que tenemos esto.
Esto lo vamos a renderizar solo si está .done.
Lo vamos a renderizar solo si está ready.
Le he puesto a image status.
Que no me sale auto, me sale auto.
Vale, pero es ready.
No se puede usar auto.
Vale, esto lo vamos a renderizar solo en el caso de que el image status que estamos
observando en la store tenga este valor.
Y ahora, no te preocupes porque alguien dirá, espérate, que ya no es Svelte, ¿qué
está pasando aquí?
Fíjate que tenemos aquí un dólar.
¿Por qué tenemos un dólar aquí?
Porque cuando tú quieres observar el valor de una store, tienes que ponerle el dólar
porque lo que quiere decir es suscríbete al valor del image status, recupéralo y ponlo
aquí.
Cada vez que cambie va a volver a hacer esta comprobación para saber si tiene que renderizar
algo diferente.
Puede ser que te sea raro, pero la verdad es que es increíblemente potente.
Porque fíjate, con tan poco código hemos hecho un estado global en Svelte y aquí
ahora solo con un dólar en medio, aquí justo delante, estamos observando y suscribiéndonos
a todos los cambios que tiene este estado global de image status.
Y aquí, como tenemos TypeScript, lo que estamos haciendo es la comparación.
Y está renderizando esto, ¿vale?
Y esto también.
Y esto solo se renderiza si estamos en ready.
Ahora, si no estamos en ready, pues a ver, lo que podríamos hacer aquí, por ejemplo,
es hacer image status y está image status.loading, creo que era el otro, uploading, no loading,
uploading.
Vamos a poner que renderice algo parecido a esto, pero que ponga uploading file.
Loading.
Y yo creo que ya está.
O sea, esto lo que vamos a hacer es que si se pone aquí, vale, es que no se va a ver.
Bueno, ha desaparecido porque ha dejado de, claro, ha dejado el uploading cuando se cambia.
El uploading access sending, ¿no?
Claro, en sending es cuando deberíamos empezar a decir que está haciendo el uploading.
Así, porque veis que ha tardado como en hacer el cambio.
Aquí vamos a poner image status, status set.
Entonces, ahora debería ser marco.
Vale, veis que ponía ahí uploading file.
Podríamos, esto lo vamos a quitar ahora porque esto no tiene sentido.
Lo que vamos a hacer es que cambie totalmente la UI cuando ya ha subido la imagen.
Cuando ha subido la imagen, vamos a hacer que aparezca la imagen en grande
y que también podamos ver la versión sin fondo.
Esto ya lo tengo por aquí.
Voy a crear otro que le llaman stepedit.svel.
Stepedit y en la app, lo que vamos a hacer, aquí en la app, que teníamos el header,
putter y teníamos aquí el main, lo que vamos a hacer a nivel de app es que si estamos,
por ejemplo, si el status, el image status, que lo recuperamos de la store,
si el image status es igual, aquí se me la pilló, está en ready o está en uploading,
ah, joder, perfecto, casi, casi, casi, casi, vale.
Lo que vamos a hacer es que si está ready o está subiendo, vamos a enseñar el formulario
de stepaulo, pero si ya hemos subido la imagen, lo que vamos a enseñar es el stepedit,
que es el nuevo componente que vamos a hacer aquí.
¿Qué me va a importar más?
¿Veis que está vacío?
Está vacío porque el stepedit este no me la importe.
Y el stepedit aquí, vamos a empezar a poner nuestras cositas.
Vamos a hacer una cosa mucho que te va a encantar.
Vamos a hacer una cosa que te va a encantar, de verdad, que está mucho.
Mira, no sé si conoces Squash.
A mí me gusta mucho.
Squash es un recurso que te permite optimizar tus imágenes.
Puedes optimizar tus imágenes y te dice, mira, por ejemplo, en esta, ¿no?
Y tiene esta barra que a mí me encanta, me encanta.
¿Ves esta barrita que tienes aquí, izquierda, derecha?
Esta barrita es súper chula.
¿Por qué?
Porque te permite muy fácilmente ver el cambio de las dos imágenes.
Claro, cuando es tan evidente, pues nada, se ve demasiado evidente.
Pero si tú vas bajando, ¿vale?
Para ver las diferencias exactamente, fíjate lo bien que se ve.
O sea, el momento barrita.
Pues, ¿sabes qué?
Vamos a ver, vamos a utilizar esta barrita.
Vamos a usar esta barrita y vas a ver lo bien que queda.
Lo fácil que es y lo chulo que es.
Y otra cosa buena de Svelte es lo fácil que puedes utilizar justamente Web Component.
Y vamos a utilizar un Web Component.
Porque esto que ves aquí, esto es un Web Component que se utiliza en NIME.
Así que, ¿qué vamos a poner por aquí?
Por ahora voy a poner la imagen con el source.
Vamos a poner la imagen original.
La imagen original, alt.
Y vamos a poner imagen original subida por el usuario.
Ahora vamos a poner la imagen original subida por el usuario.
Y aquí la imagen.
Lo bueno de esto es que, ¿de dónde vamos a sacar esto?
Pues, de la store.
En la store, si te fijas, ya estábamos teniendo aquí el original image y el modify team.
El original image ya lo estábamos haciendo aquí.
Aquí, cuando teníamos la respuesta, estábamos cambiando el original image.
Así que ya en el step edit podemos recuperar el original image desde la store.
Y ya el original image lo ponemos aquí.
No sé cómo se puede poner.
O sea, se tiene que poner así.
Sí, se tiene que poner.
Vale, importante.
Hay que ponerle el dólar porque es un valor que estamos observando, ¿vale?
Nos estamos suscribiendo al valor.
Porque si no, lo que estamos importando es como la store para poder actualizarlo y tal.
Si lo que queremos es el valor, en Svelte hay que ponerle el dólar.
Es mejor que te suene porque ahora en los nuevos frameworks esto está muy de moda.
Vale, al menos vamos a hacer esto.
Vamos a volver a nuestra página.
Vamos a arrastrar esto aquí, a ver qué pasa.
Vale, uploading images.
Vale, y ahora aparece nuestra imagen.
O sea que esto ha funcionado bien.
Nos faltaría mejorar un poco los estilos del uploading y tal.
Pero al menos tenemos esto que ya tiene buena.
Obviamente la imagen sin fondo todavía no la tenemos.
Pero ya llegaremos a eso.
Lo importante es que ya tenemos esto.
Vale, vamos a utilizar el web component que te comentaba.
Se llama chew up element.
Chew up.
Ah, se llama chew up, no chew up.
Es este de aquí.
Es bastante antiguo, pero ¿sabes una cosa?
Funciona.
Lo cual está genial.
Y este chew up, ¿ves que es de Google Chrome?
Esto de Google Chrome es lo que utilizan en Squash.
De hecho vas a ver que es literalmente lo que tienen en Squash.
Así que vamos a instalarlo.
Pnpm install chew up element.
Menos C.
Para tener la versión exact.
Vale.
Y lo vamos a importar aquí.
Vamos a importar el chew up element.
Como es un web component, mira, fíjate que no hay que importar nada en realidad.
Porque lo que tenemos que utilizar es la etiqueta.
O sea, tú importas esto directamente y ya utilizas la etiqueta chew up y ya está.
O sea, tú ya pones esto en chew up dentro y ya vamos a tener el componente.
Todavía no va a funcionar del todo bien porque una de las dos imágenes no carga, pero eso lo arreglamos.
Vamos a poner aquí un href también.
Aquí vamos a poner.
Y vamos a poner descargar imagen.
El href.
Luego lo arreglo, pero por ahora vamos a poner como un botón.
Font ball, con el white, rounded full.
De todo el espacio lo he hecho.
Para que sea botón, le ajustamos tanto los laterales, arriba y abajo.
Vamos a hacer más grande el texto.
Tramos el texto, yo creo.
Bueno, vamos a ponerle hover, bgblue.
Nos falta todavía el href, pero eso luego lo arreglo.
Vamos a ver cómo queda.
Cositas buenas.
A ver, primero, ya tendríamos esto.
Me falta la imagen sin fondo, que todavía está mal.
Vale, veo que aquí el descargar imagen sin fondo no ha funcionado.
Vamos a poner un bloque.
Vamos a ponerle aquí más separación.
Y ya tenemos aquí el botón de descargar imagen sin fondo.
Todavía no tiene el href, pero eso lo hacemos ahora con la API de Cloudinary.
Y ahora nos faltaría la imagen de la derecha, ¿vale?
Para poder comparar cuando no tiene fondo y cuando no tiene fondo.
Vale, entonces, ¿cómo hacemos eso?
¿Cómo hacemos eso?
Pues la gente de Cloudinary, para hacer las transformaciones,
tiene justamente una API que te ayuda a hacer transformaciones de la URL,
porque si no, tendrías que hacer manualmente y es muy complicado.
Imagínate, estarías ahí todo el día haciendo transformaciones.
El paquete de JavaScript se llama Cloudinary URL Gen.
¿Y qué es lo que haces?
Tú lo importas, ves, importas Cloudinary, creas tu instancia utilizando tu nombre de cloud.
Aquí puedes utilizar que dice HTTPS, HTTP, lo que tú quieras.
Y a partir de aquí puedes empezar, le dices cuál es la imagen que quieres transformar.
Y a partir de aquí, fíjate que ya dices, vale, ¿por qué hacer un resize?
O sea, haces un resize con la escala, o sea, ¿qué?
Y esto luego lo transformas a URL y te genera la URL con todas las transformaciones que quieras que hayas hecho aquí.
Es una forma mucho más declarativa y mucho más fácil de hacer las transformaciones que no haces tú manualmente por URL.
O sea, que vas a ver que es mucho más fácil.
Es verdad que al menos, o sea, a mí me encanta Cloudinary, pero creo que podrían mejorar el tema de la documentación, al menos.
O sea, yo no sé si, a ver, Annotated Code Example, que no he visto una forma fácil, chula, realmente de ver muchos ejemplos fáciles de utilizando esta SDK.
Sí que he visto como mucho código y tiene un soporte para JavaScript, para .NET, para Java, React, o sea, es impresionante.
Pero de este paquete, una cosa que a mí me molesta un poco es que no tiene tipos, me parece.
O sea, tú haces esto, traes Cloudinary, ves, ya se nota que me parece que no tiene tipos.
Cloudinary barra URL gen y aquí vamos a crear nuestra instancia, Cloudinary, New, Nari.
Vale, en este parece ser que sí que tiene tipos.
O sea, aquí lo tenemos, Cloud, CloudName, MiddleDev.
Aquí tienes que poner tu nombre, ¿vale?
Y aquí podrías poner URL y que te cree Secure para que te los cree con HTTP.
Y aquí tendríamos la instancia de Cloudinary.
Pero, ¿qué pasa?
Que, por ejemplo, nosotros la transformación que vamos a querer hacer aquí en nuestro proyecto es quitarle el fondo a la imagen.
Al menos yo me ha costado, ¿eh?
Me ha costado, ¿ves?
No sé dónde están todas.
¿Dónde puedo ver realmente todo el SDK que hay aquí?
¿Cómo lo puedo encontrar?
No sé, he sido capaz.
Igual es culpa mía, ¿eh?
Que no lo he encontrado.
Pero, no sé, me gustaría...
Ah, mira, aquí hay una referencia.
Mira, pues esta es.
Esta es la que estaba buscando.
Pero aún así, ¿no?
Es que, ¿ves?
La referencia no tiene...
Ah, mira, interfaz.
Pero no...
O sea, creo que se podría mejorar.
Tiene bastantes ejemplos.
Bueno, bastantes ejemplos.
Solo tiene tres aquí.
Tiene tantos ejemplos.
Sí que he visto más ejemplos en otros.
Pero como que le...
No sé, por ejemplo, para que os hagáis una idea.
Para tener que importar...
Aquí es donde he visto más expés.
Aquí.
Aquí es donde he podido ver realmente cómo se hacía todo.
Porque cuesta bastante.
Porque fijaos que para importar las acciones que queremos hacer,
hay que importarlas como de subcarpeta.
Y en mi caso, para hacerla del background...
Ostras, pues no la he encontrado por ningún sitio.
Digo, ¿dónde está la del background?
Si, ¿ves?
Es que ni siquiera aparece.
Ni siquiera aparece.
Pues, claro, una cosa que se puede hacer es entrar aquí en Cloudinary
y empezar a mirar ahí a ver qué es todo lo que hay que hacer.
De hecho, en actions, ves que aquí pone background.
Y aquí tenemos actions, background.
Y aquí puedes empezar a buscar.
Tienes background, actions, tiene en effect.
O sea, tienes un montón, ¿no?
Y te podrías empezar a buscar ahí a ver dónde está el que necesito.
Eso es lo que puedes hacer.
Ahí cada uno, no sé, me hubiera gustado que estuviese mucho más fácil.
De hecho, Cloudinary, aquí está.
Remove background action.
Este es el que queremos.
Para poder utilizarlo, una cosa importante.
Para poder utilizar este en concreto,
todas las transformaciones que hemos visto de Cloudinary
las puedes hacer sin activar absolutamente nada.
O sea, hacerlo más grande, cambiar la calidad.
O sea, un montón.
De hecho, cuando te logueas,
fíjate que tienes aquí como un montón de...
Le llaman recetas.
Transformaciones, el cookbook este.
Aquí tienes un montón de ejemplos.
Todo esto lo puedes hacer sin activar absolutamente.
Tú haces esto y funciona todo perfecto.
Pero el de quitarle el fondo a la imagen,
para eso, aquí hay unos add-ons,
que algunos son de pago.
Y el del background, como lo hace con inteligencia artificial,
pues también tiene como...
Como que va aparte de lo de Cloudinary.
En este caso, tenemos 15 ediciones mensuales gratuitas.
Si quisiéramos hacer un producto, tendríamos que pagar.
Que aún así nos saldría más barato que el producto este.
Y al final hace exactamente lo mismo como va a saber.
Así que asegúrate de que lo activas y que lo tienes aquí arriba activado.
¿Ves?
Uso 2DQ.
O sea, que no hay ningún.
Vamos a ver cómo se haría.
Primero, voy a importar de Cloudinary este import, background, movable,
de from, Cloudinary, actions effect, porque hemos visto que estaba ahí.
Pero la verdad es que me ha costado...
A mí me ha costado bastante.
De hecho, lo tuve que buscar como para ver cuál era la URL y tal.
Creo que es un tema a mejorar.
Yo creo que se debería poder importar casi todo del root.
Sería mucho más fácil.
Que no hay que meterse aquí, que es muy complicado.
Entonces, vamos a ver esto.
Ya tengo la instancia de Cloudinary.
¿Dónde vamos a decirle?
Oye, quiero la versión de esta imagen, pero la quiero sin el fondo.
Pues ya tenemos aquí...
¿Veis que aquí tenemos la respuesta?
Si hacemos aquí el console.log de la response y aquí le voy a volver a subir una imagen.
¿Ves aquí en el objeto que tenemos un montón de información?
Aquí en la que nos interesa es el public ID.
Porque el public ID es la ID pública de nuestra imagen y es la que necesita para generar la URL.
No hace falta que utilicemos toda la web.
Así que este public ID lo vamos a recuperar aquí en la respuesta.
Pone aquí el public ID.
Y aquí le puedes, no sé, vamos a llamarle public ID con camera.
Y ahora vamos a crear nuestra imagen.
Crear la imagen de fondo de otras partes.
¿Vale?
Y vamos a crearla.
Vamos a poner la imagen.
Primero creamos Cloudinary.image.
Y le pasamos el public ID que acabamos de tener.
Y ahora tenemos que decirle, vale, pero la imagen esta quiero que le efectúes un efecto.
Y el efecto es el de background remove.
Y ahora aquí tendríamos la imagen without background.
Image without background.
Ahora, este image without background, si lo miramos un console.log, vamos a darnos cuenta que en realidad es como un objeto bastante complejo.
Y lo único que queremos es la URL.
Que vamos aquí, image without background.
Y aquí tenemos diferentes métodos.
Ataction.
Porque al final todavía puedes encadenar más cosas.
Tienes una que es tu URL.
¿Vale?
Así que lo pones aquí.
Y ya tendríamos la URL.
Voy a poner un console.log justamente.
Ya tendríamos ahí la URL de nuestra.
Y ahora pues nada.
Solo recordar que guardarlo en la store también.
Modified.
¿Cómo lo he llamado?
Modified image.
To set.
Image.
URL.
Lo vamos a guardar aquí.
Y con esto ya tendríamos estos tres.
Ya tenemos esta información.
Este image without background.
El modified image.
Que es la imagen modificada.
La vamos a enseñar aquí.
¿Vale?
Así que aquí vamos a quitar esto.
No, el modified image.
Perdón.
Image.
Modified image.
Me están sonando muchas suscripciones.
Algo me dice que alguien...
Ah, vamos a codear.
Joder.
Vamos a codear.
Muchas gracias, hombre, para 10 subs.
Muchas gracias, Noe.
Muchísimas gracias.
Feliz cumpleaños.
Muchas gracias, muchas gracias.
Eres muy grande, ¿eh?
Vamos a codear.
Muchísimas gracias.
Bueno, estamos muy cerca de terminarlo, ¿eh?
Vale.
El modified image lo vamos a poner aquí.
De nuevo, ya vemos aquí la...
Nos tenemos que suscribir a la store.
Importante, que no se nos olvide.
Y aquí podemos tener un problema.
Pero no te preocupes, porque lo vamos a arreglar.
Pero lo voy a intentar.
Y luego, si hay un problema, te voy a enseñar cómo lo podemos arreglar.
En el caso de que no funcione.
Vamos a poner aquí el modified image, ¿no?
O sea, tenemos la original y la modificada.
Y ahora, si vamos aquí...
Claro.
Ahora no nos sale.
Voy a empezar de cero.
A ver si ahora subo la imagen.
Vale.
Vale.
Apeta.
O sea, parece que apeta.
Me ha dado un error 423.
¿Qué es el error 423?
Si vamos a Cloudinary 423 error status code, vas a ver cuál es el error.
El error...
Mira, este.
Transformation URL API.
¿Qué es lo que pasa?
Que hay veces que si tú intentas hacer una transformación con el background removal, ¿qué pasa?
Que te dice que la primera vez que tú llamas a este add-on contra una imagen, te va a dar un error 423.
Porque la imagen todavía se está procesando.
Claro, quitar un fondo a una imagen es complicado.
O sea, puede ser algo bastante costoso.
Entonces, ¿qué pasa?
Que claro, ahora seguramente, seguramente esta URL que es donde tenemos la imagen sin el background...
Ah, pues ha petado.
Ah, no.
Está bien.
¿Ves?
Está bien.
Le ha quitado el fondo.
O sea, funciona correctamente.
Pero no podemos recuperar la imagen porque ya ha fallado la imagen.
Como ya ha fallado la imagen, ¿ves?
Ha fallado la imagen.
Se ha quedado ahí rotísima.
Y ahora yo me he quedado sin imagen.
Y ahora la gente me dice, pues me siento timado.
Esto es un rollo.
¿Vale?
Puede ser.
Se puede hacer de diferentes formas, ¿vale?
No te preocupes.
¿Qué se podría hacer?
Se podría hacer una promesa y hacer un polling.
Voy a hacerlo de una forma que además vas a aprender algo de Svelte.
Si lo quieres hacer de otra forma, lo puedes hacer.
Mira, yo voy a poner un estado que le voy a llamar Processing Image.
Le voy a poner que sea true por defecto.
Porque por defecto ya hemos visto que está procesando la imagen.
Y le voy a poner cuántas veces ha intentado cargar la imagen.
Le vamos a poner cero, ¿ok?
Vamos a poner que cuando...
Vamos a poner un efecto, ¿vale?
Aquí esto es algo parecido a un UseEffect.
Algo parecido.
Y esto lo que hace es que cada vez que cambie nuestro...
Cada vez que se renderiza nuestro componente de Svelte, pues se baje.
Y está bastante bien porque además es como un bloque reactivo.
¿Qué vamos a hacer en este bloque reactivo?
Vamos a decir que mientras se esté procesando la imagen, podríamos generar la imagen y ver si está.
Pero yo lo voy a hacer mucho más nativo con el DOM.
De hecho, esto que está haciendo aquí sería una buena idea.
Lo podríamos hacer con eso y quedaría bastante bien.
Esta podría ser una forma, ¿vale?
El hecho de decir, bueno, pues cuando hace el unload, entonces cargo la imagen y entonces aparece.
Yo lo voy a hacer de otra forma, pero lo puedes hacer con...
Por ejemplo, una forma que podríamos hacer es poner un intervalo.
O sea, podríamos poner aquí un interval ID y a un number.
Y lo que vamos a hacer cada 500 milisegundos es ver si realmente la imagen...
Primero vamos a limpiar el intervalo anterior.
Y luego aquí vamos a tener interval ID.
Va a ser igual setInterval.
Que esto se va a ejecutar cada 500 milisegundos.
Y lo único que vamos a hacer aquí es poner tries más más.
Y tú dirás, ¿pero por qué?
Hostia, aquí este timer...
Timer, ¿verdad?
El timer era un...
Bueno, no sé.
O sea, pensaba que sería un...
No GS timer.
No GS, pero es que no tiene por qué.
Debe tener algún troverlo.
Esto en realidad debería devolver un número.
Es la idea.
Yo juraría.
Ahora tengo dudas.
Ahora me ha hecho dudar esto.
Yo estaba bastante seguro que el timer era un número.
Bueno, el tema es que en este intervalo cada 500 milisegundos vamos a poner el tries más más.
Y lo que vamos a hacer, como buenos piratas que somos, como buenos piratas,
lo que vamos a hacer justamente porque el problema es que se puede cachear la imagen.
Si se cachea la imagen estamos jodidos porque entonces siempre va a pasar esto.
Que aunque la imagen se cargue y se cargue bien, como va a estar cacheada,
aunque digas, vale, ahora la imagen sigue carga, pero ya está cacheada,
pues va a decir, no, ya te la he enseñado mal.
Vamos a hacer esto.
Vamos a poner un onload, que esto es como el onclick de los botones,
pero vamos a decir, cuando se cargue la imagen, vamos a decirle que el procesamiento ha pasado a false.
Porque cuando ha cargado correctamente, pues ya está.
O sea, la imagen se ve, deja de procesar, deja el set interval, limpia ese intervalo y a tomar por saco.
O sea, hasta aquí, hasta aquí ha llegado, ¿vale?
Y cuando tienes un error, lo que sí que vamos a decirle aquí es que el procesamiento de la imagen continúa.
O sea, que decimos que es...
Y ahora, lo importante.
¿Dónde vamos a utilizar el tries?
Vale, para evitar el cacheo de la imagen, aquí en el source, lo que podemos decirle es,
esto vamos a...
Voy a pasar un query para que sea una T, por ejemplo.
Donde va a tener los intentos.
Los intentos.
Así, en cada intento de la imagen le va a poner intento 0.
Pero la imagen va a ser distinta.
Y entonces llegará un momento que la imagen esté procesada,
aparecerá con el intento tal, no la habrá cacheado porque no la ha podido cachear,
y aparecerá de primeras perfectas.
Como te digo, lo puedes hacer...
Mira, ¿ves?
O sea, solo he refrescado y ya funciona.
¿Por qué?
Porque como estaba dando errores, lo que ha hecho es,
ostras, he dado un error, lo voy a intentar otra vez.
He dado un error, lo voy a intentar.
Y ahora, pues ya tenemos la imagen.
Y fíjate, qué bien ha quedado.
Joder, se ha quedado.
Simo, se ha quedado.
Mira, mira.
No me digas que esto no es mágico, Dios mío.
Si hemos hecho un producto, este producto,
este producto lo hemos hecho en un momento.
Y además, fijaos, que aquí te dicen de descargarla con 500 píxeles.
Que si la descargas con HD, tienes que pagar.
O sea, o te quita créditos.
Pues mira, esto lo hemos hecho gratis.
Y ya se ha descargado imagen sin fondo.
Y aquí la tenéis.
Totalmente vuestra.
¿Qué os parece?
No me digas que no está bien.
¿Probamos con otra cosa?
A ver, gato.
A ver, un gato.
Gato.
Vamos a poner este gato.
Gato, miau.
Gato, miau.
Arrastramos.
¿Vale?
Se sube la imagen.
¿Vale?
Está haciendo...
Se supone que está haciendo los tries.
Vamos a asegurarnos.
A ver, igual no está haciendo los tries.
Oye, pues creo que no lo ha hecho los tries.
La madre que lo parió.
No ha hecho los tries.
¿Ves?
Me ha dejado fatal.
No ha hecho los tries.
Igual le ha liado con algo.
Si está procesando la imagen.
True.
Clear.
Interval.
A ver.
A ver.
Igual está haciendo los tries.
Igual está haciendo los tries.
Pero no está haciendo los tries.
Pues esto no ha funcionado.
No ha funcionado como esperábamos.
No ha funcionado como esperábamos.
¿Por qué?
Bueno, igual es que aquí necesitamos.
Deberíamos verlos.
Bueno, Leo, a ver.
Creo que tienes false.
Tiene que ser false.
No.
Processing image.
Tiene que ser true.
Para que entre aquí.
O sea, tiene que ser true.
Lo que...
Claro, cuando hace el error.
Cuando hace el error.
Claro, ¿cómo podemos conseguir que cuando haga el error...
Obviamente esto no lo está haciendo.
O sea, si miramos aquí.
¿Ves?
El tries se ha quedado en cero.
Oye, pero aquí no me sale el tries.
Capachado.
Está la imagen original.
La imagen sin fondo.
Pero aquí no me está saliendo el tries.
¿Por qué no me sale el tries?
¿Veis que no me sale aquí la T?
¿Por qué no me sale la T?
No, no, no.
Pero es que no me ha hecho esto.
O sea, no sé qué me ha cargado.
Pero no me ha cargado este source.
Porque al menos la T me debería aparecer cero.
Pero esta URL no ha aparecido con cero.
A ver.
A ver qué ha pasado aquí.
Esto es un poco extraño.
¿Alguien ve la magia negra?
No.
El tries tiene que estar en la imagen modificada.
La imagen modificada.
Está aquí.
Imagen modificada.
Trice.
No le falta...
No, el tries no necesita el dólar.
¿El try es estado?
Sí, es estado.
Porque automáticamente lo que hace Svelte es...
Reconocerlo así.
Ah, claro.
Dices que a lo mejor es por el ampersand.
Yo no creo que sea el ampersand.
Porque, o sea...
Creo que necesita el ampersand.
Porque fíjate que aquí ya tiene un ampersand.
Ya tiene un...
Y aquí en la consola, de hecho, fíjate.
¿Ves?
Ya tiene el query param.
Pero no lo está poniendo.
O sea, no sé si ha sido un problema.
¿El USF no necesita algo para que se vuelva a ejecutar?
No sé.
Una de dos.
No sé.
Voy a volver a reiniciar.
Un momento.
Porque tengo curiosidad.
Tengo curiosidad de si realmente...
Ahora sí.
Ahora sí.
Ahora sí.
¿Veis?
Ahora sí que lo he hecho.
¿Sabéis lo que ha pasado?
¿Sabéis lo que ha pasado?
Lo que ha pasado, lo que ha pasado realmente, es que me ha pillado una versión antigua.
Me ha pillado una versión antigua de mi código.
No sé por qué.
A ver.
Esto es una forma de hacerlo, pero lo podríais hacer de otras formas, ¿vale?
Que pensad que no me da tiempo hacer un producto que la gente gana dinero, ¿sabes?
Que yo que sé.
A lo mejor este producto está monetizando y está ganando miles de dólares, ¿vale?
Pero, bueno, lo hemos hecho en un momento y creo que queda bastante chulo.
No me digáis que como proyecto para un porfolio no está genial y que lo hemos hecho totalmente gratis y que funciona muy bien.
Os podéis descargar la imagen, además, con la máxima calidad.
O sea, la máxima calidad.
Igual puedes usar Cloudinary y poner un cargando en la imagen con el fondo mientras carga.
Claro, claro.
O sea, podríamos hacer un montón de cosas.
Podríamos.
De hecho, a ver.
Para eso es la hackathon, ¿no?
Para ver qué es lo que hacéis.
Que os animéis.
Mira, otra vez.
Claro, yo creo que aquí ha pillado la versión antigua.
Podéis hacer que en el Modified Image, mientras está cargando, pues ponga la imagen con blur, ¿sabes?
Mientras está cargando y que haga luego un fade in.
Cosas así.
O sea, que la idea...
El tope es vuestra imaginación.
O sea, que la idea es que hagáis un proyecto y que os quería demostrar cómo de increíble es lo rápido que hemos hecho un proyecto de arrastrar una imagen,
quitarle el fondo.
O sea, es bastante espectacular.
Pero de nuevo, no lo dejéis ahí.
Porque es que podéis hacer lo que queráis.
A ver, voy a poner Cloudinary Hackathon.
Remove VG Cloudinary Hackathon.
Elimina el fondo de una imagen con Cloudinary.
Así que, al final, la idea es que hagáis lo que os dé la gana.
Ahora os explico algunas ideas.
Ahora subo esto y cualquier persona que tenga una pregunta sobre el código, que me lo comente y lo explicamos, ¿vale?
Explicamos ahí rápidamente y rápidamente.
A ver, ponemos el fondo de la imagen, add readme, creamos el rectorio, esto por aquí.
¿Puedes dar alguna pincelada de cómo rehacer los retries sin el query param?
A ver, una cosa que podrías hacer, en realidad, es eliminar...
O sea, en lugar de utilizar el source, este, una cosa que podrías hacer es quitar esto.
Tú quitas esto, tú quitas esto, lo quitas de aquí.
De hecho, lo podríamos intentar.
Lo que pasa es que, como no me quiero petar mis background, ¿no?
Podrías hacer esto, pero este processing image, podrías hacer aquí un if.
Que dices, oye, si estoy procesando la imagen, podría hacer esto.
Si no, voy a poner la imagen.
Dice, si estoy procesando la imagen, pongo procesando imagen.
Y si no, hago esto.
¿Cómo sabes si está procesando la imagen?
Pues es muy fácil.
Tú aquí, vamos, puedes mirar si la imagen, con el new image este, hacer esto.
Lo puedes hacer aquí.
Dices, vale, voy a tener un nuevo intento.
Claro, aquí puedes poner tanto intentos como quieras.
Esto yo lo quitaría, la verdad.
Esto yo lo quitaría.
Lo pondría aquí.
Haría, traes más más.
Dices, creo una imagen.
La imagen, le pongo el valor del modified image.
Y luego en el upload, lo que digo es, oye, ya está.
He terminado de procesar la imagen.
Limpio esto.
Punto pelota.
Ahora, lo que hago con esto.
Ahora esto.
Esto debería funcionar.
No lo sé.
Hemos fiado mucho de IJACOPILOT.
Vamos a probar con el gatillo otra vez.
Subimos el gatillo.
¿Ves?
Pone procesando imagen.
¿Ves?
Lo ponemos aquí.
Esto se supone que está por detrás intentando hacer lo que tiene que hacer.
Se me ha escapado esto por aquí.
¿Ves?
Y al final aparece.
Ahora, si en lugar de procesando imagen, tú aquí puedes hacer lo que quieras.
Podríamos utilizar, fíjate, el original image este.
Podríamos generar una URL que tuviese la imagen en blanco y negro del gato.
Por ejemplo.
De hecho, es muy fácil.
Es muy fácil.
Es que con esto del efecto de crear, con el Cloudinary, PublicAid y tal, lo podrías hacer.
Pero ya has visto que ahora, muy fácilmente, sin hacerlo con...
O sea, yo lo he explicado para que tuvieses una forma, ¿no?
Pero hay muchas formas de hacerla.
Hay muchas formas de hacerlo.
O sea, que no os quedéis con que os hay una, sino que una vez que lo tenéis, un blur, claro, podéis hacer un montón de formas.
Vale.
Os voy a dejar esta, que creo que es la más buena, dentro de lo que cabe, de las dos opciones.
Vamos a poner...
Vamos a poner...
Ah, sí, ya tenemos...
Subimos todos los ficheros.
Vale.
Add code for the project.
¿Qué?
Publish branch.
¿Qué terminal usas?
Utilizó...
Warp.
Creo que...
Warp.
O terminal.
Creo que si ponéis el comando terminal...
Ahí tienes, terminal.
¿El resto de transformaciones tiene límite de 15?
No.
No, no, no.
A ver.
No, no, no.
Las transformaciones que tenéis son bastante generosas.
Aquí en el pricing vais a ver que tenéis 25 créditos.
25 créditos son 25.000 transformaciones al mes.
25.000 transformaciones al mes.
O sea, 25.000 transformaciones.
Lo que pasa es que la del background es un poquito más especial, porque, claro, es con
inteligencia artificial, es más costosa y tal.
Pero estas transformaciones que veis aquí, hacer un resize, un resize, face detection basado
en el image cropping, overlay en las imágenes, convertir formato de imagen, hacer la imagen
más pequeña, modificar vídeos, o sea, todas...
Hacer blur, pixelar, todo esto son 25.000.
O sea, es una salvajada.
Es una salvajada.
El plan gratuito es una salvajada de Cloudinary.
Una salvajada.
O sea, de verdad.
Tú puedes tener un blog, subir todas tus imágenes a Cloudinary y vivir por siempre
con eso.
Porque además se resetean cada mes.
Sí, sí.
Te puedes hacer un producto con algo gratuito.
O sea, es una pasada.
Es una pasada.
Sí, me he ido patrocinando por Cloudinary.
A ver, sí.
O sea, la hackathon, a ver, no es nada...
No es ocultado.
Cloudinary nos ha patrocinado un montón de cosas.
Por ejemplo, la AppBengies.
A mí es un producto que me encanta.
Que me encanta.
Ya nos patrocinó el AppBengies.
La hackathon no es un secreto.
Nos patrocina Cloudinary.
Pero os digo una cosa.
Os digo una cosa.
Hoy me ha llegado, porque están detrás mío, una oferta.
A ver si no la encuentro.
Unidades, unidades, reserva, oferta de colaboración.
Bueno, no os lo voy a enseñar porque me salgo.
Pero total, mira, la gente de Cloudinary me paga un tercio de lo que me ofrece otra
empresa por hablar de una cosa de Web3.
Un tercio.
O sea, que no lo hago por dinero.
Porque si yo, Cloudinary, y que ya habéis visto que yo lo uso, si es algo que yo
usaría, ¿por qué es que lo uso?
En mi blog, las imágenes que aparecen aquí a la derecha utilizan Cloudinary.
Si yo, o sea, no os voy a engañar.
Si el producto me parece bueno y Cloudinary me parece una salvajada.
Me parece una salvajada.
O sea, es que es así.
Así de claro os lo digo.
Si no lo pensase, no os lo diría.
A lo mejor, pues diría otras cosas.
Yo qué sé.
Pero es que me parece que es muy bueno.
Y lo mismo pienso, pues mira, a ver, Sel no me patrocina y creo que está muy chulo.
Y cuando le tengo que dar palos, le doy palos.
Me gusta Nellify, me gusta un montón de cosas.
Me gusta Visual Studio Code, yo qué sé, me gusta un montón de cosas.
Así que, porque queremos que siga viviendo de esto.
Bueno, pero no os voy a engañar.
Y si Cloudinary me patrocina, pues yo un canto de la vida.
Porque además creo que es genial.
Oye, ¿le he pegado el palito de la documentación o no se lo he pegado?
Oye, la documentación me parece que es mejorable y tal.
Y de hecho, una cosa que está muy chula cuando empresas tan chulas como Cloudinary
colaboran con nosotros, es que mucho del feedback que me dais,
por ejemplo con Cogier, pues me decías, es que tarda mucho.
Es que todo eso se lo envío a la empresa.
O sea, y estas cosas le ayudan un montón.
Entonces, a mí me parece un producto genial, que tiene un free tier espectacular,
que está por cero dólares.
Tienes 25.000 transformaciones al mes, 25 gigas de almacenamiento en imágenes,
25 gigas de bandwidth, que es increíble.
Y además esto con un CDN, con todas las transformaciones.
Es una pasión.
Y bueno, pues ya hemos dicho que puede mejorar.
Y mirad, no me digáis que no es increíble lo que hemos hecho aquí en un momento.
O sea, es que en menos de dos horas hemos hecho...
A ver, no hemos hecho todo el producto, vale.
Pero es que esta gente de Remove está cobrando por este producto.
Y es que cuatro directos más y hacemos un producto, ¿eh?
O sea, así os lo digo.
Hacemos un producto y ganamos dinero.
Ah, sí, no sé de dónde ha salido ese...
A mí también me produce TOC.
No sé de dónde se ha colado.
Es que yo creo que es terrible.
No sé de dónde se ha colado.
¿De dónde se ha colado esto?
Ah, aquí.
Ya está, ya lo encontré.
Pero además está genial, está genial.
Ha quedado esto para lamerlo.
O sea, las cosas como...
Ha quedado para lamerlo.
Bueno, amigos, va, que os digo, os explico, ¿vale?
Upload changes o remove talk from users, ¿vale?
Os explico, os comento cositas importantes.
Esto fuera, esto más hemos hecho.
Vale, Claudinari.
Ahí lo tenéis.
Os dejo el pedazo de...
Lo podéis montar con JavaScript, con Svelte, con React, con Vue, con lo que queráis, ¿eh?
Cositas, cositas que os comento, ¿vale, amigos?
Os comento cosas.
Uno, tenéis...
Vais a tener toda la información que quieres participar.
Tienes toda la información, vas a tener toda la información aquí en Claudinari Hackathon, ¿vale?
Si tenéis preguntas, si tenéis dudas, si tenéis cualquier cosa, ¿vale?
Si tenéis cualquier cosa, lo que tenéis que hacer es preguntar aquí.
Tenéis a Colby.
Colby, aunque habla inglés, le podéis preguntar inglés.
Le podéis preguntar en español, que él seguro que lo traduce.
Y si no, yo os ayudo.
Que sepáis que Colby trabaja en Claudinari.
Y le podéis pedir ayuda.
Oye, Colby, ¿cómo puedo hacer esto?
¿Cómo puedo hacer lo otro?
Bueno, aquí vais a tener toda la información.
Tenéis los premios.
Teclado Kikron.
Que además acaba de sacar Kikron.
Un teclado que me acuesto con el teclado.
Me acuesto con el teclado.
Este teclado, el K7 Pro.
Madre, qué salvajada.
Qué salvajada.
Mira, se me ha puesto el vello de punta solo de verlo.
Solo de verlo, se me ha puesto el pelo como escarpias, tío.
Como escarpias.
Madre mía.
Esa frase que hice de preguntarle a él parece grabada previamente.
No, hombre, ¿por qué va a ser grabada?
Bueno, pues eso, que me encanta.
Que no tiene tecla...
Que no tiene la tecla...
Es verdad.
¿Cómo que no tiene aquí, tío?
La tecla que te parece.
Si es esta aquí, esta aquí, esta aquí.
Lo que es verdad que no tiene otras.
¿Es internacional?
Bueno, a ver.
Lo puedes tú poner internacional.
No tiene mayor y menor que.
¿Y esto qué es?
¿Esto qué es?
Esto es tu padre.
Lo que no tiene es la ñ.
Pero ¿esto qué es entonces?
El mayor y el menor.
¿Este símbolo qué es?
Es que...
La madre que os trajo.
Bueno, no sé.
No me patrocina Keychron, ¿eh?
También os digo.
También os digo.
Pero me encanta este teclado.
Me encanta.
Hay un día de estos...
Les voy a escribir a ver si cuela, tío.
Porque es que me encanta.
¡Me encanta!
¡Me encanta!
Dios mío, me encanta.
Mira, con las subs de Noe, de Vamos a Codear, me lo voy a comprar.
Ahí está.
Es que no puedo.
Bueno, pues os podéis pedir este, que es nuevo.
Es nuevo.
O sea, y con RGBs y todo.
Increíble.
Mira, tenéis un teclado Keychron, primer puesto, teclado Keychron, tarjeta regalo de
Amazon en 50 dólares o tienda local equivalente, yo que sé, mercado libre, lo que sea.
Un dominio personalizado por un año para tu proyecto.
Imagínate que tu proyecto está para lamerlo.
Oye, igual haces un proyecto tan increíble que vale la pena que lo intentes convertir en
un producto.
Pues no solo te dan un dominio personalizado por un año, sino que te promocionan el producto
o la aplicación en las redes sociales de Cloudinary.
Mira, amigos, tú ganas la Jagator y Cloudinary te empieza a promocionar desde sus redes sociales
no me digas que eso no es para ponerlo en el porfolio.
Que sí, que es el porfolio, que tal, coño, pero es que en el porfolio luego en los proyectos
me ponéis proyectos y ponéis el propio porfolio.
Participa en la Jagatón, pones gana la Jagatón y pones el proyecto con el que ha ganado
la Jagatón.
¿Y eso?
¿Eso qué?
Eso es que vamos, lo revientas.
Segundo puesto, tarjeta regalo de Amazon en 50 dólares, un dominio personalizado por
un año para tu proyecto.
También, promoción de producto o aplicación en las redes sociales de Cloudinary.
Es que yo solo por esto, la verdad.
Tercer puesto, tarjeta regalo de Amazon en 25 dólares.
Es promoción de producto o aplicación.
Y los demás, vamos a tener también Swag de Cloudinary para más gente.
Tenemos que ver cuánta gente, pero vais a tener camisetas, descuentos, gorras, Swag,
stickers, un montón de cosas, peluchitos, un montón.
O sea, solo por la promoción ya esto vale la pena.
Pero de verdad, os lo recomiendo que...
Yo sé que hacéis magia, porque he visto vuestras Jagatón.
Pero me parece...
A ver, siempre lo digo, pero es que me parecen proyectos muy chulos.
Porque uno, saca de la zona de confort.
Dos, podéis hacer productos, que es que son lo que marca la diferencia.
Y tercero, podéis ganar premios, joder, y ponerlos en vuestros porfolios, que es increíble.
Vale, más cositas, que esto lo pondremos por aquí.
Para enviar vuestros proyectos, los podéis poner en el hilo.
De hecho, os lo agradezco.
Entonces, voy a poner registrarse, conseguir más crédito.
Y cómo enviar tu proyecto.
O cómo participar.
Vamos a poner cómo participo, ¿vale?
Cómo participar.
Es fácil, no hay ya gratis.
Uno, registrate aquí, registrate aquí.
Dos, consigue más crédito gratis.
Esto porque, hombre, ya que aquí...
Esto es opcional, pero bueno, os diría que lo hagáis.
Lo vamos a poner fuera, ¿vale?
Conseguir más crédito gratis.
Deja tu proyecto en este hilo.
Envía tu proyecto a este fórmulo.
¿Por qué?
Porque la gente de Cloudinary quiere tener los proyectos por su parte.
Entonces, aquí ponéis vuestro nombre, vuestro email, vuestro nombre, cuenta de Cloudinary.
El nombre del proyecto, la descripción.
Esto es opcional, ¿vale?
Ves que pone link to the tweet where you shared the project.
Esto es opcional.
No tenéis que compartirlo si no queréis.
Siempre que lo partáis, que es la leche.
El repositorio de GitHub donde tenéis el proyecto.
El link de que esté desplegado.
Y cualquier cosa que quieras decir.
Me ha encantado, me ha encantado.
O yo qué sé.
Viva, viva Midu.
Repetidlo, repetidlo.
Me encanta, yo qué sé.
O hay que mejorar, hay que mejorar la documentación.
Lo que queráis, ¿vale?
Dadle feedback.
Estas cosas siempre.
Deja tu proyecto en este hilo.
Ahora crearemos el hilo, ¿vale?
Crear los premios.
Conseguir más productos, más productos gratis aquí.
Esta es la URL para conseguir más, ¿vale?
Esta acá y lo guardamos.
Típicas preguntas que me hacéis muchas veces de ¿puedo participar en equipo?
¿Puedo hacer todo eso?
Que lo hicimos ya la última vez.
De hecho, aquí en Cohere lo voy a copiar porque es exactamente lo mismo, ¿vale?
Todo esto que lo hicimos la última vez.
Preguntas frecuentes.
Esto, igual.
Esto, exactamente lo mismo.
Y os las comento, ¿vale?
Para que no tengáis ningún tipo de duda de la hackathon.
Ah, eso.
Y aquí tenemos las preguntas.
¿Se pueden hacer equipos?
Sí.
Pero primero, el premio es a repartir.
Aunque la gente de Cloudinary me ha dicho que va a intentar cosas, pero no os puede prometer nada, ¿vale?
Entonces prefiero que no decir nada.
¿Se puede hacer en Dino?
Lo puedes hacer con lo que te dé la gana.
¿Puedes utilizar otras APIs?
¿Puedes utilizar otras?
Las puedes mezclar.
Puedes mezclar esta API con otra.
Yo qué sé.
Lo importante, lo importante es que tienes que utilizar la de Cloudinary, ¿vale?
Hombre, la de Cloudinary y que sea lo central, Cloudinary.
Para el uso central.
La idea tiene que ser algo con la API de Cloudinary.
O sea, no puede ser de voy a hacer un bingo donde lo importante es el bingo y lo de Cloudinary me va a hacer una imagen así de pequeña.
Hombre, no.
Tiene que ser lo central, ¿vale?
Luego, ¿hay mínimo de tamaño y funcionalidad?
Hombre, como mínimo hay que usar la API de Cloudinary y resolver algún problema.
Yo lo que os recomiendo es que hagáis un pequeño producto como el que hemos hecho hoy.
Yo creo que algo como esto que hemos hecho hoy sería lo mínimo.
Lo mínimo sería algo esto, ¿no?
Soluciona un problema.
Oye, pues puedes solucionar, no sé.
Puedes hacer, quitarle los fondos de imágenes, que hay productos que van de esto.
Pues una para hacer avatares.
Otra para crear memes.
No sé, es que hay un montón de ideas ahí fuera.
Otra para la de crear memes, es buenísima.
Otra para optimizar imágenes.
Puedes utilizar, hacer un squash, por ejemplo, para optimizar imágenes.
Y optimizarlas al vuelo.
Puedes hacer un squash, por ejemplo.
No sé, por decir algo.
Otro, que vaya a una página.
Mira, imagínate esta.
Vas a una página, te vas a Midudev.
Va a una página y detecta las imágenes que están mal.
¿No?
Que dice, ostia, esta imagen ocupa un montón.
Pues te recomiendo que utilices esto.
Y te dice la URL con la imagen o te la optimiza y te la ofrece.
Te dice, podrías mejorar esta imagen que tienes en tu página un 80%.
Descárgatela con esto, ¿sabes?
Podéis hacer tantas cosas.
Podéis hacer cosas con vídeo también.
Claudinari funciona con vídeo.
Experimentad con eso.
Que los vídeos son muy chulos también.
Tienen temas de inteligencia artificial.
Detectar.
Mira, ¿veis aquí, por ejemplo?
Podéis hacer, podéis detectar animales.
Podéis hacer cosas con animales.
Que eso es que os encanta.
Así que, no sé, dadle vuelta a vuestra suelta.
Dadle, vienda suelta.
Que hay un montón de cosas.
Un montón de cosillas que podéis hacer.
Dadle vuelta.
¿Vale?
¿Qué más?
¿Qué más hay aquí?
Criterios que se siguen para volver a proyectos.
Solucionar el problema de los usuarios.
Esto es lo primero.
La creatividad también se valora bastante.
Ya lo viste.
Buena presentación y buen código.
A ver, el buen código siempre lo pongo al final.
¿Por qué?
Porque lo tenemos en cuenta.
Pero es más importante lo que solucionas que no el código.
¿Por qué?
Porque obviamente lo que queremos es que seáis creativos.
Que hagáis una solución algo chulo.
Que la juguéis.
Que el código tiene test.
Pues, a ver, está bien.
A lo mejor lo vemos.
A lo mejor lo tenemos en cuenta.
Pero no es lo principal.
Yo creo que son estos.
A lo mejor ni siquiera no te da tiempo a ver el código.
Solucionar un problema de los usuarios.
Creatividad y buena presentación.
En la hackatona anterior ganó justamente el más
creativo.
Porque utilizaba la inteligencia artificial
para generar un Dungeons & Dragons.
O sea, no me jodas.
Fue increíble.
¿Se puede usar app móvil?
Sí, pero se tiene que probar fácil.
¿Vale?
O sea, podéis hacer una app nativa si queréis.
Pero me tenéis que proporcionar una forma
de poder utilizarla.
Y es internacional.
Podéis participar en todo el mundo.
Que yo sepa, no hay ningún tipo de limitación
en ningún sitio.
Hablando con ellos me dijeron que no hay ningún problema
del país que seáis que podéis participar.
¿Vale?
Así que ahí tenéis también esas preguntas frecuentes
y os leo.
A ver si tenéis alguna pregunta.
Link del anterior ganador.
Lo podéis buscar en Disco.
¿Se puede usar cualquier add-on que viene en Cloudinary?
Sí, pero ten cuidado porque las add-ons
normalmente son de pago.
¿Vale?
Un proyecto sin test puede ganar.
Sí que puede ganar.
Vamos a tener en cuenta sobre todo la solución.
No tanto lo he dicho.
O sea, creo que sería interesante poder testear.
O sea, que tengáis test.
Pero a lo mejor no nos da tiempo ni verlo.
Los de Venezuela.
Pues me habéis comentado que la gente de Venezuela
no puede acceder al servicio, por desgracia.
Lo que os diría es que intentéis utilizar una VPN.
A ver si lo podéis hacer.
Sube el vídeo a YouTube antes de que termine a Hagatón.
En el anterior subí el vídeo.
Era muy tarde.
Lo voy a subir.
Si no, hoy, mañana.
Si no, hoy, mañana.
A ver si sale alguna buena idea.
Sí.
Lo que os animo es que os ayudéis.
Que participéis.
Que aquí, oye, pongáis ideas.
Que pidáis hacer equipo.
Si no lo queréis hacer solos.
Que hagáis equipo.
Que busquéis a alguien.
Que si estáis en un bootcamp.
Hagáis equipo con gente del bootcamp.
Gente de la comunidad.
Que os ayudéis aquí.
Que, no sé.
Que compartáis ideas.
Que está muy chulo.
O sea, que hacedlo, hombre.
Midu, lo quiero mucho.
Yo también.
Ando en tu curso de RIA.
Ha mejorado bastante.
Ah, has mejorado tú bastante.
Gracias.
¿Midu, va a haber filtro de proyectos por selección y ganador esta vez?
Sí.
Vamos a tener un filtro.
Vamos a filtrar.
Vamos a filtrar.
No sé cuánto número.
Pero he seleccionado a todos los ganadores de las hackatones anteriores.
Les voy a decir que me ayuden a filtrar un número de proyectos.
Como es posible que los ganadores participen.
Te van a participar.
No podrán votarse a sí mismos.
Esa es la limitación que tienen.
No pueden votarse a sí mismos.
Pero los demás, al final sí que vamos a hacer un filtrado.
Y también la gente de Cloudinary nos va a ayudar con el filtro.
Colby va a elegir uno o dos.
Ya veremos.
Va a elegir unos cuantos.
Y lo que haremos es que haremos un...
Vamos a ir votando sobre la marcha.
Vamos a mirar.
Cinco proyectos.
Votaremos los cinco proyectos.
Cinco proyectos.
Votaremos los cinco proyectos.
Cinco proyectos.
Haremos eso.
Eso es lo que vamos a hacer.
¿No te dijeron por qué no funciona en Venezuela?
No me lo han comentado.
Pero se lo podéis comentar a Colby.
Se votan entre ellos y cuelan.
A ver.
Voy a intentar primero.
Vamos a fiarnos en que la gente sea de...
Yo creo...
A ver.
Si veo algo raro.
Pues ya mete de mano.
Si no quedo en tercero, segundo o uno.
Igual gano algo.
Hombre.
Yo creo que solo participar ya ganas.
Porque tenéis la posibilidad de ganar créditos extra totalmente gratis.
Por créditos extra totalmente gratis.
Entonces, hacedlo.
Participad solo por esto.
Porque esto da crédito gratis.
Joder.
La de lujo.
¿Cuándo es la fecha máxima?
La fecha máxima es el próximo 7 de marzo.
Tenéis hasta el 7 de marzo.
De hecho, vamos a por aquí.
¿Vale?
También.
¿Cómo participar?
Fecha máxima.
Fecha máxima.
Podéis participar hasta el 6 de marzo a las 23.59.
50.
Central.
Fecha máxima de entrega.
Cuidado que la fecha máxima de entrega es un día antes del stream.
Un día antes del stream.
¿Por qué?
Porque así no va a dar tiempo a filtrar.
O sea, no podéis participar una vez que haya terminado la fecha máxima.
¿Vale?
Importante.
Importante.
No la liéis.
No la liéis.
No la liéis.
6 de marzo a las 12.00.
Central European Time.
O sea, no esperéis al último momento.
Pensad que vosotros podéis empezar a participar.
Enviáisle el repositorio y podéis seguir trabajando en él.
Tenedlo en cuenta.
¿Vale?
Mira, más ideas.
Generación de thumbnails para YouTube.
O sea, esa es una muy buena idea.
Una herramienta de, por ejemplo, un photobooth.
De hecho, la gente de Cloudinary, si no me equivoco, ellos tienen...
Mira, mira.
Os voy a enseñar algunos ejemplos que tiene la gente de Cloudinary.
Ejemplo.
¿Ves?
Easily create engaging video summaries.
O sea, tú tienes un vídeo y te hace un resumen del vídeo.
Súper fácil.
O sea, está...
Esto no sé cómo lo hace.
No lo está mirando.
Pero esto lo están haciendo con Cloudinary.
Con Cloudinary puedes crear el resumen de un vídeo.
O sea, esto es espectacular.
O sea, impresionante.
Impresionante.
Luego tenéis también este de FinalTouch.
Que sería como para enviar postales personalizadas.
Entonces, tú le pones una imagen.
Puedes generar con inteligencia artificial.
No sé qué.
Le puedes poner un look.
O sea, tienes un montón de cosas.
Y al final lo que haces es poner aquí el headline.
Fijaos todas las cosas que puedes hacer con Cloudinary.
Esto sería un buen ejemplo de producto, ¿no?
Otro que tenéis aquí, el de Cloudicamp.
Que es algo yo.
Y esto, pues, puede ser interesante.
Pues, si lo explicáis, por ejemplo, para un evento.
Mira, por ejemplo, podríamos tener para la MiduFest un Cloudicamp.
De forma que la gente que participa en el MiduFest, pues, pueda venir aquí y hacerse una foto.
Y poner algún estilo o lo que sea.
Mira, por ejemplo, un unicornio.
Se puede poner o se puede cambiar el background.
Es que es espectacular la de cosas que te pueden hacer.
Mira, con el Mario.
Está muy chulo.
O sea, hay un montón de posibilidades.
Hay un montón de posibilidades.
Ahora, una vez que os sabéis, si queréis, podéis ir a nuestro Discord o podéis ir al Discord de Cloudinary.
¿Vale?
En el Discord de Cloudinary también os van a poder ayudar.
Si queréis, podéis ir al Discord de Cloudinary.
Y aquí, pues, podéis preguntar.
Oye, sobre las APIs, sobre esto, opciones, no sé qué.
Si os apetece, podéis pasar por ahí y va perfecto.
Y ya está.
Eso es lo que os diría, ¿vale?
Que podéis utilizar lo que queráis.
Que tiene que estar desplegado públicamente.
Que tiene que estar en un repositorio de GitHub.
Y ya está.
Eso es todo lo que pedimos, ¿ok?
Así que no sé si tienen alguna pregunta nada más por aquí.
¿Proyectos científicos también se puede?
También se puede.
También se puede, claro que sí.
El Miducorneo Bros no es real.
Aquí tenéis el Miducorneo Bros.
¿Proyectos científicos, claro?
¿Cuándo podremos sacar el ticket de la MiduFest?
Estoy trabajando en ello, pero es que he ido muy mal de culo, ¿eh?
¿No se puede poner el Discord de su lectura una vez que pasen las 23.59?
Sí que lo podríamos hacer.
De hecho, igual lo hago, ¿eh?
Igual lo hago.
¿Qué aplicación utilizas para poner emojis?
Utilizas Rocket.
¿Dónde se pone el enlace de la publicación?
Vale, todavía no hemos creado el hilo, pero va a ser en Discord.
De hecho, lo vais a tener aquí en el Discord.
Aquí tenéis todo lo que tenéis que hacer.
¿Cómo participar?
Te tenéis que registrar aquí, si no lo habéis hecho.
Deja tu proyecto en este hilo, que tendremos el hilo.
Ahora lo haces.
Envía tu proyecto a este formulario.
Y aquí tenéis el formulario.
Y en el formulario tenéis que poner toda la info.
¿Tienes algún vídeo para estirar nuestra terminal?
No, porque esto sí que tenía, pero ya no lo utilizo.
Esta terminal ya viene estilada.
Y así no pierdo tiempo.
Yo te había creado la PR para obtener el ticket, pero lo quité porque estoy haciendo unos ajustes, Midu.
Bueno, ya lo tengo bastante adelantado, ¿eh?
Midu, la selección no es injusta.
¿Qué tal si mejoras 5 están en la misma selección y solo seleccionan el mejor?
Si los mejores 5 están en la misma selección.
La selección no es injusta.
A ver, yo también voy a participar en la selección.
¿Qué tal si los mejores 5 están en la misma selección y solo seleccionan el mejor?
No he entendido, no he entendido.
Tengo que preguntar ahora por qué Brave.
Porque funciona mejor que Chrome y te bloquea bastante analíticas y tal.
Y así le stream va a...
¿La app de emojis que usas solo es para Mac?
Sí.
¿Se puede entregar una extensión de navegador?
Sí.
Mientras se pueda probar fácil, no va a haber ningún problema.
La URL, claro, la vas a tener que desplegar.
Mientras eso lo tengas bien, no pasa nada.
¿Cómo si en el Mundial hubiese un grupo de 4 potenciales finalistas quedarían eliminados antes de tiempo?
Puede ser, puede ser.
Pero es que al final es una forma, ¿no?
O sea, al final el Mundial también es parte de la gracia.
¿Tiene Claudinaria algo de diferenciar a personas en fotos?
Sí que lo tiene.
¿Cómo se llama la aplicación de emojis?
A ver, Rocket, Rocket.
¿De qué trata la hackathon?
Trata de que tienes que utilizar los servicios de Cloudinary, que lo hemos visto en todo el stream.
Hemos creado, de hecho, un proyecto desde cero utilizando Cloudinary.
Tienes que utilizar Cloudinary y ya está.
Ahí lo tienes.
Y tienes más detalles aquí, ¿vale?
En el Discord.
Dijiste que irían de 5 en 5.
Entonces, si en esa selección todos son los mejores, sería injusto para los 4 restantes porque solo seleccionaría uno.
Bueno, en realidad, no vamos a seleccionar siempre el mejor.
O sea, lo que vamos a seleccionar, vamos a hacer la fase de grupos de los 5.
Vamos a seleccionar, por ejemplo, los 2 o 3 mejores.
Luego haremos los cuartos o lo haremos las semifinales, que serán 5 y 5 y luego los 5, ¿vale?
O sea, no sé, de los 5 no siempre se quedará solo uno, sino que se quedarán 2 o 3 de cada uno.
Hola, ¿de qué se trata el stream?
Dice Hugo.
Hugo, te meto un bocado en un ojo, ¿eh?
¿Lo tenéis?
¿Sí?
¿Vais a participar?
Di que sí, si vas a participar en él.
Bueno, os animo a que participéis.
Creo que va a estar muy chulo.
Creo que va a estar genial.
Ya habéis visto yo con lo que he participado.
Tenéis el proyecto de código abierto con todo lo que hemos hecho, con Esbelta además.
Yo creo que ha estado súper chulo.
Muy bien.
Sí, sí, lo intentaré.
Muy bien.
Buscad equipo, haced lo que tengáis que hacer, pero yo creo que vale mucho la pena y que está genial, ¿eh?
¿Cómo puedo tener datos en tiempo real desde una base de datos en MySQL?
¿Es recomendado usar el timer en tiempo real?
Pues puedes hacer polling, pero eso depende cómo lo tengas.
Porque SQL...
Ah, MySQL.
La verdad es que no lo sé, pero me imagino que hay algún tipo de suscripción.
Una pregunta que no tiene que ver con Gatón.
¿Tienes alguna clase hablando de cómo cobrar suscripciones?
No tengo, pero me gustaría hacer porque quiero hacer.
Sí o sí estaré participando.
¿Qué es Cloudinary?
Pues te puedes ver el stream ahora cuando termine, desde el principio, y ahí te lo explico.
Os dejo el repositorio por si queréis dejar una estrellita, por ejemplo.
Aquí voy a poner ahora todos los detalles también de Cloudinary, de la Hagatón que hemos puesto aquí, ¿vale?
Para que lo tengáis también aquí en el...