Hola, bueno pues ya estamos aquí
Estamos viendo esto
Se supone que se tiene que ver la pantalla del chat
Voy a ver si puedo
Enviarte algo, ¿no?
Hola
No, no funciona el chat
Voy a ver si puedo
No, es que pone el de vídeo es
Annabelle y Bo
Pero yo creo que cuando pongamos público funcionará
¿Sí? Vale
Estoy bastante convencido
Uy, pero se nos ve guay
No, es que el de vídeo es Annabelle y Bo
Pero yo creo que cuando pongamos público funcionará
¿Sí? Vale
Estoy bastante convencido
Vale, pero se nos ve guay
¿Qué pasó?
Vale, y ahora
A ver, a ver el editor
A ver el code del proyecto y tal
A ver cómo se ve
Vale, y ahora
A ver el editor
A ver el code del proyecto y tal
¿Cómo se ve?
Esto se ve de puta madre el editor, ¿eh?
Y no ocupa mucha pantalla
¿Ah, coño, se ve?
¿Ya?
Sí
Voy a cerrar editores que tengo por aquí
Sí, no sé
Sí, no sé
Sí, no sé
Sí, no sé
Sí sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, lo reconozco
Sí, sí
Sí, sí
¿iku puede ser
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Sí, sí
Estoy cerrando
Tengo por aquí archivos que no sé
Que son ideas que tuve
¿Cuándo vas a hacer esto del vídeo que has hecho, tío?
Ah, claro, eso está clipando
Tenemos que tener cuidado de no poner audio
Porque es un hecho del vídeo que has hecho, tío
Y poco se clipa
Pero se ve guay, ¿no?
Sí
Vale, pues este sería el...
Pero se ve guay, ¿no?
Ah, pero no se está viendo...
Sí
O sea... Ah, sí, sí que sé
No, digo, pensaba que no se veía la pantalla cuando lo ponías en pantalla completa
Pero sí, se ve en pantalla completa
Vale, perfecto
Venga, pues empezamos ya, tío
Vale, espera
Voy a poner otro navegador
Para no pelearme luego en directo a mover todo
Venga, pues empezamos ya, tío
Vale, espera
Espérate
Que esto tiene peligro
Que yo también
Quieres poner lo mismo, ¿no?
Como tenía el editor y el navegador en la pantalla partida, ¿no?
Bueno
No estaba pensando poner el navegador en la pantalla partida
Porque...
¿Ves, tío?
Es que...
¿Por qué coño tienen que salir cosas, tío?
No estaba pensando poner el navegador en la pantalla partida
¿Eso qué es?
Yo qué sé, tío
Pero es muy raro
Que son...
Mierdas
¿Por qué coño tienen que salir cosas, tío?
Me lo hago en modo incógnito
Esto es otro...
Esta mierda que tengo
Que no sé por qué me peta, tío
No me lo hago en modo incógnito
No me funciona
A mí tampoco
Está roto
Está roto, está roto, sí, sí
Está roto
O sea, es que tengo que abrirlo antes
Sí
A mí tampoco
Y luego moverlo
Está roto, está roto, está roto, sí, sí
¿Qué se está clipando?
Pues tú tienes puesto el audio en tu video de YouTube, ¿no?
Claro
Eeeh...
Luego, ¿lo dejo todo esto preparado o lo abro?
Sí, sí, sí
Déjalo todo con el...
Vale, pues tío
Ya lo pongo público
Bueno, primero
Lo pongo en modo intro, ¿no?
Sí
Vamos a ver si tío
Vamos a ver si tío
Un tam Tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
No es a ver si tío
Gracias por ver el video.
Gracias por ver el video.
Gracias por ver el video.
Gracias por ver el video.
Gracias por ver el video.
Gracias.


















Gracias.
Gracias.
Gracias.
Gracias.

Gracias.
Gracias.
Gracias.



Gracias.


Gracias.
Y lo vamos a ver, pues, comentarios, dudas, preguntas, lo que queráis, ¿vale?
Intentaré estar un poco atento e intentaremos responder todo lo que podamos.
Vale, y si no hay ningún comentario, pues, carita triste.
Exactamente, al menos decir, hola, ha estado aquí en directo.
Hay cuatro espectadores y yo soy uno de ellos, pero el otro es Miguel, así que al menos hay dos que ya podrían decir hola.
Vale, muy bien, os saludaremos, así que, bueno.
Bueno, pues, vamos a volver aquí al código.
¿Cómo queda un poquito esto?
Básicamente, por un lado, nuestra aplicación, lo que digamos la UI, que se quedó bastante sencillo.
Yo he hecho los deberes y ya he puesto el logo en una URL, más que nada para...
En Cloudinary, ¿no?
En Cloudinary para no tener que luego estar buscando dónde está el logo, dónde lo subimos y tal.
Perfecto.
Esta es la línea importante que ahora pasaremos un poco a repasarlo, donde tenemos el dominio,
que lo hicimos basándonos en Clean Architecture, y básicamente aquí lo que hacíamos es llamar a un caso de uso
para recuperar toda la lista de podcast.
Recordad que la primera lo hicimos en Firebase y ahora lo revisaremos con el repositorio.
Y ya renderizábamos en un elemento, pues, este componente que tenemos aquí,
donde enseñábamos el What the Front y todos los podcasts.
De hecho, creo que lo tengo aquí.
Sí, de hecho, hasta funcionaría, creo.
Lo que pasa es que, bueno, no se escucha nada, creo que no se escucha nada, no sé si se escucha.
Ah, porque tienes el audio de tu máquina quitado, para que no enclipe.
Claro.
Pero creernos que funciona.
Exacto.
Bueno, sí, se escucha.
El caso es que esto ni siquiera es nuestro podcast, así que al menos hoy sí que se verán nuestros podcasts
y deberíamos poder escuchar nuestros podcasts, lo cual sería genial.
Sí.
Entonces, bueno, esto es una invención de Carlos Villuendas que le encanta.
Bueno, a ver, honestamente no es auténticamente mío, se lo vi a Ken Ott.
Vale.
Y me pareció súper graciosa.
Hace honor a su apellido, porque como es raro esto.
Es Ott, es raro.
Es Ott, entonces, vale.
Pues sí, que es poner un emoji como ID de un elemento del DOM.
Vale.
Que puede salir mal.
¿Qué puede salir mal?
¿Qué puede salir mal?
Yo imagino, luego si lo intentamos estilar, algo me dice que esto no funciona.
Yo creo que CSS no lo va a pillar.
¿Tú qué dices?
Vamos a dejarlo.
Vamos a intentarlo.
Yo no tengo ni idea.
No tengo ni nada.
Pero si tuvieras que decir, ¿tú qué dirías?
Diría que no, obviamente.
No, ¿verdad?
Diría que no, obviamente.
Luego lo he intentado, lo he intentado.
Vale.
Vale.
Lo que sí que tenemos por aquí, ya podéis ver unas cuantas capas del dominio.
Básicamente, podemos entrar aquí al Entry Point.
En el Entry Point, pues bueno, importamos unas cuantas cosas de Firebase.
Tenemos la configuración.
Esto del Entry Point Factory es de nuestra librería de Suidomain, que nos ayuda un poco a hacer los dominios.
Tenemos la factoría de los casos de uso para podcast.
Aquí creamos la configuración.
Este era el único caso de uso que teníamos por ahora.
Tampoco creo que hagamos mucho más.
No, creo que el listado ya.
No creo que...
Bueno, ¿quién sabe?
A menos que nos pongamos a hacer...
Esto crezca y podamos poner me gusta y cosas así, cosas que dudo mucho.
Sí, por ahora sí.
Bueno, a lo mejor que la gente pueda enviar feedback.
Pues puede ser...
Comentarios.
Sí, vale.
Igual lo...
Aquí inicializaríamos Firebase.
¿Quién me enseñó?
Bueno, perdón.
No, no, diga.
Los comentarios en GitHub.
Ah, fuiste tú, fuiste tú.
Es verdad, es verdad.
Sí, sí, que estaba pensando en ponerlo en el blog.
Qué buena idea.
Sí, está muy guay.
La verdad es que es muy chulo.
Todavía estoy dudando, así que...
Puse una votación en mi Twitter, así que si os animáis podéis decir la vuestra.
Vale.
Pues nada.
Aquí tenemos...
Teníamos una configuración bastante...
La base estaba vacía, aunque creo que hoy la vamos a utilizar.
Sí.
¿No?
Porque tendríamos que poner RSS.
Exactamente.
Y, bueno, aquí teníamos un montón de cosas comentadas.
Una configuración básica.
Podcast con nuestros entities, repositories, use cases.
No vamos a entrar en detalle porque creo que lo vamos a tener aquí tocando.
¿No?
De hecho, si quieres, le damos ya.
Empezamos.
¿Qué tendríamos que hacer?
Lo primero que tenemos que hacer es reescribir nuestro...
No, reescribir, no.
Añadir un repositorio.
Añadir un repositorio.
Le diría que, pues, new file.
Bueno, perdón.
Antes voy a ver cómo era la interfaz, que era con el all, ¿vale?
Tiene sentido.
¿Qué te parece si directamente...
Vale.
Pues hacemos aquí...
RSS Podcast Repositorio.
Básicamente, este RSS Podcast Repositorio será el repositorio donde sacaremos toda esta información
que antes sacamos de Firebase.
Exactamente.
Que si lo hacemos bien, la respuesta del método all tiene que ser la misma respuesta que la
del Firebase.
Es decir, una entidad podcast.
Exacto.
Vale.
Nos vamos a copiar ya un poquito de código de lo que teníamos porque es que realmente
todo lo que tenemos aquí es muy similar.
O sea, esto que teníamos el repositorio de Firebase ahora sería lo mismo, solo que aquí
pondremos el RSS y de dónde recuperamos esto será otro sitio.
Exactamente.
Ahí está la maravilla del Incline Architecture.
Todo lo demás debería ser igual, ¿no?
¿Cómo haremos esto?
Supongo que lo primero...
Vale.
Necesitamos un fetcher, ¿no?
Si tenemos que hacer peticiones a internet...
Bueno, primero necesitamos una URL a la que hacer el fetcher.
Necesitamos la URL.
Para...
En el que no sepáis, tenemos...
Bueno, lo hemos dicho antes.
Ya dos capítulos en nuestro podcast, What the Front.
Lo podéis encontrar en iVoox.
Y en iVoox voy a buscar básicamente el RSS.
Mira, aquí tenemos ya...
Mira, 7 likes y 13 likes.
Muy bien, ¿eh?
Y comentarios y todo.
Sí, sí, sí.
Muy bien.
A la gente le ha interesado.
Vale, pues estamos aquí.
What the Front.
A ver, mira, RSS.
Aquí está.
RSS.
Genial.
Bueno, copiamos la URL.
Y aquí ya tenemos un tema, ¿no?
Porque, claro, esto...
Lo primero que me imagino yo que tendríamos que hacer sería algo así.
Fetch.
Esto.
Eso es.
Hacemos un fetch de lo que...
Pero, claro, esto de poner aquí la URL directamente...
Nos mola porque no va a ser configurable.
O sea, no podríamos cambiarla por entornos y demás.
Que es una cosa que nos gustaría hacer.
Esto lo cogeremos del config.
Lo pillaremos del config y...
Esto tenía un método get.
Exactamente.
Que le decimos la key del config.
¿Cómo lo llamamos?
Esto es lo que hemos estado hablando varias veces para entrar un poco en el debate de...
Este config es síncrono.
Y este debate lo hemos tenido un montón de veces.
Y creo que es interesante comentarlo así que no solo sea de pasada.
Comenta, comenta.
Al hacer el config síncrono, significa que en el bundle del dominio...
Uy, perdón.
En el bundle del dominio, tenemos que cargar todas las configuraciones de la aplicación.
Eso significa que en la página, en la home, podemos tener configuraciones del detalle.
Claro.
Y no estamos hablando de una URL.
Claro.
Aquí en este ejemplo la gente dirá, bueno, pero qué problema hay si es una línea.
Exactamente.
Pero claro, imagínate una aplicación como Fotocasa, pues tienes una configuración bastante tocha a lo largo de todas las páginas.
Y el problema básicamente es eso, que no lo podemos dividir.
Que no lo podemos dividir.
Exactamente.
Entonces, molaría hacer en algún momento un config asíncrono que cargara los chunks por separado.
Lo que molaría es esto, básicamente, ¿no?
This config get y que...
Uy, RSS URL o, bueno, fit URL.
Esto molaría, ¿no?
Fit URL, eso es.
Esto estaría guay.
Esto molaría un montón, ¿no?
Básicamente, esto ya puedes tener imports dinámicos ahí y decirle...
Eso es.
Descárgate solo el trozo que tenga esto.
Esto es.
Ya.
No lo vamos a hacer ahora, ¿no?
O no lo vamos a mantener esto.
No, no.
Pero que quede dicho que...
Que tenemos la idea.
Si alguna vez te das por meter config en Javascript, intenta que sean asíncronos.
Sí.
Porque en principio parece que son una tontería, son URL, son cosas de estas.
Sí.
Acaba creciendo mucho.
Exacto.
Y acaba siendo un dolor.
De hecho, voy a dejar esto como estaba.
Me ha gustado esto de poner...
Tengo un artículo al respecto.
Sí, One Line Responsibility.
Single Line Responsibility.
Está chulo.
Que abogo, básicamente, de usar una línea para hacer una cosa.
Entonces, os recomiendo mucho que programéis así porque...
Vuestro yo del futuro lo agradecerá, ¿vale?
¿Cómo le llamo a la aquí, Carlos?
Vale.
Tengo un feed URL, pues feed URL.
Feed URL, vale.
Feed URL, vale.
Feed URL, vale.
Entonces, una vez que tengo esto, vamos a ir a la config.
Pa, pa, pa.
La base.
Export cons feed URL.
Y he perdido ahora la...
No, ahí tienes que exportar un objeto.
Aquí tengo que...
Vale.
Export on the fold.
Y ahí pones feed URL.
Igual.
Ah, esto de aquí.
Pum.
Con esto, con todo el trabajo que habíamos hecho ya en este índice, que ya estábamos
cogiendo...
Mira, no lo tenemos aquí por desarrollo.
Solo tenemos base.
Bueno, esto lo podemos arreglar después si vemos que lo necesitamos.
Pero básicamente la base será la que pille por defecto.
Luego, por entornos, podríamos tener diferentes configuraciones.
Podríamos tener un feed de prueba, digamos, de desarrollo.
Esto es.
Y en producción podríamos tener este, que sería el correcto.
Y tenemos, gracias al método key, que es el que vamos a utilizar, pues podemos
recuperar justamente la configuración que queremos.
Claro, es justo este método, el que es síncrono y el que tendríamos que convertir
en algo asíncrono.
Exacto.
Ese confit tendría que ser un import, la función import de esta de Chung y tal.
La verdad es que son estas cosas que en ese momento no pensamos, ¿sabes?
No, no, no.
Y que hubiera sido tan interesante tenerlo.
Sí, si nuestro yo del pasado pudieran ver este podcast, aprenderían que...
Exacto, totalmente.
Esto hay que hacer la síncrono.
Vale.
Entonces, tengo aquí la feed URL.
Ya estoy haciendo un feed URL.
Aquí me da un montón de errores.
Yo me imagino que esto es porque no pongo Windows, ¿no?
Y se cree que el fetch es un objeto global que...
Nosotros vamos a utilizar aquí un fetch del tirón.
Pero...
Ya.
Comenta, comenta.
No, no.
Lo podemos contar, ¿no?
Que esto es lo que molaría.
Es tener un fetcher e inyectárselo.
Eso es.
Esto sería interesante.
Esto sería lo interesante.
Sí.
Vamos a hacerlo directamente, pero esto ya está rompiendo un poco lo de las inyecciones de
dependencias.
En teoría, tu clase debe recibir todo lo que va a utilizar por inyección de dependencia.
Esto simplificaría...
¿Y por qué hacemos esto?
Bueno, porque simplificaría en un futuro la reutilización de la clase y cosas como, por
ejemplo, poder testearlo.
Ahora podríamos...
Si lo hacemos así no vamos a poder, pero si lo hacemos como estamos escribiendo no lo
vamos a poder, pero si lo inyectáramos, podríamos inyectar en un test unitario un
mock de fetch que siempre devuelva el mismo.
Mientras tenga el mismo contrato, básicamente, que el que estamos utilizando, pues ya funcionaría.
Esto es.
Bueno, lo podemos dejar así, ¿no?
Sí, sí, tira, tira.
Entended básicamente que lo hacemos también para ir tirando, ¿vale?
Response, vale.
Esto que nos debe devolver la respuesta y tenemos que parsearla.
Sí.
Supongo que tendríamos que haber de parsearla...
Como...
Entiendo que como texto plano, ¿no?
Vale, pues response text y esto el fetch lo que nos devuelve la respuesta.
Perdón.
Y tenemos, pues el punto text que nos lo transformará en texto plano.
Y ahora aquí, aquí está lo interesante, porque aquí yo tengo dos ideas al respecto.
A ver.
A ver qué te parece la idea, que esto lo podríamos intentar hacer bien ya que estamos, porque
claro, alguien, bueno, alguien no, nosotros, podríamos aquí, ahora vamos a buscar algún
paquete.
Yo no me...
Me conozco alguno que creo que puede funcionar.
Yo...
Hay uno que se llama xml2...
Mira.
Js.
Ah, mira, uuuh, autoimport.
Wow.
Y todo.
Qué impresionante.
Sí.
El xml2js o alguno que nos transforme el xml de texto plano.
Ajá.
Bueno, es texto plano, pero es xml, esto va a ser un poco raro.
Y nos lo transforme a javascript.
Vale.
Eh...
Pero claro, esta transformación no la deberíamos hacer aquí.
No.
Deberíamos tener aquí un mapper, y de hecho así ya vamos...
Tenemos el control mapper.
Sí, porque creo que no hicimos mapper la otra vez, y comentamos lo mismo que por prisas
y tal, pues no lo íbamos a hacer.
Entonces le deberíamos inyectar un mapper, que básicamente lo que nos va a hacer es la
transformación.
Desde lo que recuperamos, este texto plano que recuperamos de la respuesta del RSS, y lo
vamos a transformar a un objeto JIS.
A un podcast entity.
Bueno, a un array de podcast entities.
Esto.
¿Vale?
La idea está clara, ¿no?
Sí.
Entonces es, el mapper entra texto plano, sale array de podcast entities.
Esta es la idea.
Exacto.
Y no lo vamos a hacer aquí, lo vamos a hacer en un objeto que para eso está.
Entonces, la idea...
Response.
Es esta.
Text.
Ya está.
¿Sí?
Y esta es la magia.
Lo que podríamos es eliminar el podcast entity factory, porque este aquí no debería
llegar.
No, deberíamos de moverlo al mapper.
Exacto.
¿Hasta aquí esto está bien?
Yo creo que sí.
Vale.
Ahora hay que hacer el mapper, si no me equivoco, ¿no?
Sí.
Podríamos crear la factoría antes.
Vale.
Bueno, vamos a crear el mapper.
Sí, tiene sentido.
Porque si no, luego hay que pasarle...
Mappers.
Mappers.
¿Cómo le llamamos al mapper?
Que este es...
Tenemos un convenio, ¿no?
Sí.
De hecho, creo que el convenio lo definiste tú.
¿Ah, sí?
Sí, fue...
Que fue...
From no sé cuánto, tú no sé qué, mapper.
Mi convenio era un poco de...
Vamos a dejar claro qué hace un mapper.
Sí, porque si no, es que nadie sabe lo que hace un mapper.
Por muy largo que sea el nombre, es mejor que seamos largos, pero que seamos claros,
que no que seamos muy cortos y nadie entienda lo que hace un mapper.
Esto es.
Entonces, ¿esto qué sería, Carlos?
Pues esto sería from XML, podríamos poner, ¿no?
XML...
Text.
From text.
O RSS.
Venga, from RSS.
Porque RSS es como un XML, pero que tiene un contrato...
Vale, from RSS to entities.
¿Cómo se llama esto?
Tu...
Voy a poner RSS text.
Vale.
Vale.
Tu...
Podcast entities.
Podcast entities...
Mapper.
Podcast entities.
O podcast entities.
Claro.
Aquí deberíamos a lo mejor hacer un value object.
Sí, pero igual eso no va a...
Digo, bueno, complicarlo.
A ver, lo que está diciendo Miguel es que habría que crear un value object que contuviera el
array de podcast entities.
Es decir, cada podcast es una entidad y después hay un value object que es...
Lista de...
Vamos a hacerlo.
Vamos, vamos a...
Solo dos y cuarto.
En 45 minutos esto está hecho.
Esto es lo típico que decimos.
Esto, caliento la comida, lo hago.
Me sé unas historias de esto que luego son meses.
Eso es una historia real.
Eso es una historia real.
Es una historia real.
Eso es una historia real.
Y todavía no se ha hecho.
Pues vamos a hacer un...
Desde un RSS text to...
Ajá.
List of podcast value object.
Vale.
Esto es verdad que esto nos va a romper la compatibilidad con el repositorio anterior.
Pero creo que puede tener más sentido.
Y así vemos también un value object.
Vale.
Se supone que adaptarlo debería ser...
Se supone que el otro repositorio tendría que haber exportado entonces este podcast.
Pero lo hicimos con un array básico, ¿verdad?
Sí.
En el otro.
Vamos a ello, hombre.
Import.
Vamos a importar el mapper de nuestra librería sui-domain.
Export default from RSS...
¿Cómo que es?
Las SS.
Dios.
Y yo soy de ponerlo en mayúscula de las tres.
Todo en mayúscula.
Todo en mayúscula.
Yo soy de poner HTTP, todo en mayúscula.
Vale.
Vamos a llegar a estos acuerdos antes de que sea demasiado tarde.
Sí, que después es imposible cambiarlo.
¿Así te gusta?
Así me gusta.
Vale, from RSS text.
Esto es un debate, ¿eh?
Sí, no, esto...
Esto es un debate.
Parece que se ha peleado, güey, con esto.
Sí, sí, sí, sí.
De verdad.
Se han roto amistades y todo.
Es que cuando dicen que el naming es uno de los problemas de la programación...
Naming y validación de caché.
List of podcast value object.
Extendemos del mapper, ¿vale?
Ya tenemos aquí el map.
Aquí le va a llegar RSS text.
Y básicamente...
Ay.
¿Te acuerdas que en el primero nos pasó esto de olvidarnos el class?
El class, sí.
Qué fuerte, ¿eh?
Sí, tío.
Todo el tiempo.
Se nos olvidará el class.
Lo damos demasiado por hecho.
Todo el tiempo, tío.
Vaya tela.
Vale, básicamente esto es un map que recibe un texto que es el RSS y esto lo que nos debería
devolver es un list of podcast value object.
Vale.
Y aquí es donde vamos a tener que hacer la magia.
Esto es para que no pete por ahora.
Vale.
¿Vale?
Vale, ahí tenemos.
Entonces...
Eh...
Vale.
Cosas que tendríamos a nuestro constructor del mapper, habría que inyectarle, ¿no?
El list of podcast value object factory, ¿entiendas?
El...
El list of podcast value object factory.
Value object factory, exacto.
Vamos a necesitar...
Bueno, perdón.
Estoy haciendo el pueblo.
Aquí.
Factory, porque sea el que crea...
Y ahora lo veremos.
El que crea este value object.
Ajá.
Y aquí hay primer debate, que va a ser interesante.
Voy a ir poniendo este.
Sí.
Voy a poner constructor...
Papapapá.
Te falta el factory.
Ah...
Sí, aquí, ¿no?
Y aquí.
Ahí.
Factory.
Vale.
Primer debate.
¿Cuál es el primer debate?
Esto es muy interesante, ¿eh?
Eh...
Yo te voy a decir la mía y tú me comentas.
A ver.
Claro.
Este mapper, en realidad, necesitamos el parser.
Necesitamos el parser.
Entonces, hay gente que haría esto.
Un port...
Un parser...
Sí, directamente donde el mapper.
Yo, particularmente...
Vale.
Yo lo que quiero hacer es, básicamente, que hagamos esto.
Esto es.
¿Vale?
Yo, particularmente, lo inyectaría.
Lo inyectamos también.
Todo.
Aquí se inyecta todo.
Aquí se...
Eso suena fatal.
Sí, es un poco raro.
Aquí se inyecta todo.
Aquí se inyecta todo.
¿Hasta la comida?
Pues también.
También.
Todo inyectado.
Bueno...
Pues, ¿le llamamos parser o se te ocurre algún otro nombre así?
Parser me parece bien.
Parser.
Sí, sí.
Parser.
El tema del naming depende también del ámbito de uso de esa variable.
Entonces, una vez leí que si tu variable tiene un ámbito de uso extremadamente reducido,
no hace falta ponerle un nombre significativo.
Por ejemplo, la i típica del bucle for of.
Claro.
Exacto.
Mientras que si va a utilizar en un ámbito amplio, tienes que poner un nombre extremadamente
descriptivo.
Como el ámbito de este es solamente esta clase y solamente hay un parser en esta clase.
Exacto.
Qué bonito.
Me parece un consejo súper bueno.
Sí.
Y de hecho, aquí hace un momento hemos hecho algo parecido, pero yo lo he hecho automático,
¿no?
Sí.
Por ejemplo, aquí el mapper.
Si os fijáis, aquí le llamo mapper.
Exactamente.
¿Por qué?
Porque su ámbito es bastante reducido y ya sé que el mapper que le llega al poca repositorio
iba a ser justo...
Si este repositorio le llegasen cuatro mappers...
Pues ahí cambiaría el ámbito.
Exacto.
Porque además el fichero sea más grande sería...
Esto es.
Exacto.
Muy interesante, ¿eh?
Gracias por compartir ese insight.
Me ha parecido muy interesante.
Ay, Dios mío.
Ay, Dios mío.
Entonces, básicamente, así a grosso modo, lo que debería hacer esto...
Esto es lo típico cuando damos vuelta porque no sabemos cómo hacer lo del X y el L.
Ah, claro.
No te estamos dando vuelta ahí.
Estamos asustados.
Para ir haciendo tiempo, ¿no?
Básicamente.
Vale.
Tengo la...
Tengo...
Me parece que se está...
Puedes poner el...
Sí.
No, la webcam a la izquierda.
Ay, sí.
No, porque claro...
Vale.
Esto lo hacemos.
Si le das a primera...
A Kodi...
Eso es.
Sí.
Ahí.
Sí, es que le he puesto...
Candadico.
Si es para que no moleste la webcam, menos mal, ¿eh?
Que estás por esta cosa.
Sí, sí, sí, sí.
Mira.
¡Chum!
¡Oh, Dios mío!
¿Eh?
Lo he movido ahí.
¡Plam!
OBS.
Una maravilla.
Vale.
Ahora, para mi console.
Vale.
Básicamente la idea, a grosso modo, sería...
Ah, sí.
Sería RSS...
JSON.
Ajá.
¿No?
Que esto lo sacamos del parser.
Que le damos el RSS text.
Y esto funciona así.
Ah, no, no lo sabemos.
No lo sabemos.
Vale, vale, vale.
Estamos suponiendo cómo funciona.
Vale.
Y luego, aquí he puesto parser, me he equivocado, perdón.
Entonces, y esto, el value object...
Es en RSS JSON.
Tendríamos que pasarle unos podcasts.
Y estos podcasts...
Será un array.
Esto es.
Y este array, se supone que lo crearemos gracias al RSS JSON.
Exactamente.
Que no sé exactamente qué será item o element.
No sé cómo es lo que devolverá esto.
Venga, pues para abrir el toro.
Vamos a ver el XML tuya y son este.
Sí.
Abre la documentación.
La documentación, directamente.
A ver, JSON, XMLJS...
Ahí, espera.
Antes de que...
Ah, y tenemos el primer comentario en el chat.
¿Qué comentan?
Si tuviéramos una campanita...
Hola, Dev.
Saludos.
Bueno, pues saludos a ti.
Bueno, bueno.
Comparte esto.
Yo creo que se puede compartir para que se vea.
Este momento mágico.
Vamos a ver este momento mágico.
No, no, lo estamos inventando.
Christian, Sam.
Christian, pues muchas gracias.
Bravo.
Bravo, Christian.
Bravo.
Muy bien, muy bien.
Has hecho que nos sintamos menos solos.
Muchas gracias, eh.
Muchas gracias.
Vale.
Bueno.
Vamos a volver otra vez.
Gracias, Christian.
Vale.
Para que...
No se hagan mis vergüenzas.
Vamos a poner XMLJSON, XMLJSONLite...
Este, este.
XMLJS...
Creo que este...
O el de abajo.
¿Tú sueles mirar si hace poco que lo han actualizado un paquete?
Yo eso es una cosa que me suelo mirar un montón.
Pues yo, francamente, si me funciona...
Hombre, claro.
Una vez que te funciona...
Exactamente.
Pero imagínate que tienes que elegir uno.
Sí, si tengo que elegir uno, sí.
Si no tengo...
Es el que tiene más descargas...
Exacto.
Y el que estás actualizado...
Pues es que yo hay veces que...
Porque yo lo he hecho más por número de descargas que por actualización.
Bueno, esa es una buena.
Yo hay veces que lo he hecho por número de descargas y no veas, eh.
Son estas cosas que dices.
Más bicho que otra cosa.
Bueno, hay uno que es muy gracioso de número de descargas, que es el de Babel...
El de Babel Node.
¿Sabes?
Babel Node.
Eso es muy gracioso.
Sí, sí.
Porque hay un paquete...
¿Que era el CMI antiguo de Babel o algo?
Sí.
Es un paquete...
Ah, Babel...
Es que este no es.
Babel Node.
Creo que es este.
Ah, no.
Encontraré.
Pero claro, que no vale para nada.
Y no es de Babel.
Sí, es de Babel, pero como que lo hicieron para evitar que alguien lo utilizase y lo utilizase
para cosas malas, ¿sabes?
Ah.
Dicen, bueno, pues vamos a poner este paquete.
Y entonces te avisan.
Oye, te has instalado este paquete, pero no sirve para nada.
Yo creo que esto ya sería tema de debate en el podcast de qué pasa con la comunidad,
qué pasa con los temas de NPM, qué pasa con EvenStreamer y cómo dependido estamos.
Hostia.
¿Y qué pasa en otras comunidades?
Oye, claro, porque esto pasa en todos los sitios.
Espera que me estoy quedando sin basería.
Vale.
Pues mientras te mueves voy a decidir unilateralmente.
Unilateralmente.
Mira, además, publicada hace dos días.
Es la que tiene más descargas.
Se ha encurrado aquí un logo tremendo.
Tiene, parece que una buena...
Parece que es justo lo que me he dicho.
Sí, además me gusta este.
Porque este, claro, no en compact.
Me imagino que lo que hace el XML es mantenerte toda la estructura del objeto.
Pero podemos utilizar esta versión compact, que tiene más sentido.
Pues, pues, pues, pues, pues, pues, pues me voy a instalar este, ¿vale?
Venga, perfecto.
Me voy a instalar este.
Ah, tengo por aquí la terminal.
XML de In.
Me voy a ir leyendo un poquito la documentación mientras.
Perdónate todo el movimiento.
Compact JSON.
Porque esto es lo que necesitamos.
A ver, ¿cómo se hace este modo de contacto?
Vale, aquí tienes XML.
Esto es lo que vamos a tener nosotros.
Con XML to JSON.
Bla, bla, bla.
To JSON, compact true.
Bueno, espacios da igual.
O sea, que hay que pasarle el string.
Y luego un objeto con las opciones.
Apple reference.
Vale.
Esto me parece interesante.
Ah, amigo.
Ah, amigo.
Vale, vale.
O sea, tenemos que utilizar este.
Vale.
XML2JS, ¿no?
Porque lo que queremos...
La respuesta de iVoox es XML2 y todo esto, ¿no?
Sí, sí, sí.
Ah, vale.
Me imagino.
Sí, se lo come iTunes y todo.
Se lo come Spotify.
Que sepáis que estamos en iTunes, en Spotify, estamos trabajando.
Cuando tengamos la web podremos estar en Google Podcast, que hay gente que nos lo ha preguntado.
Vale, pues, tenemos que utilizar este.
Venga, pues, dale cañita.
Vale, voy con miedo, ¿eh?
Sí.
Igual esto no funciona nada y, por lo tanto, espero que nadie se mosque.
Entonces, ¿le importa a qué?
Bueno, yo digo una cosa.
¿Le importa a lo i?
¿Por qué?
No, sí, porque vamos a intentar hacerlo rápido, ¿no?
Y después lo refactorizamos.
Venga.
Si no va a costar lo mismo.
Venga, factory.
Factory.
Vale.
FactoryJS.
No tiramillas.
Vamos a...
Aquí vamos a importar el from rss text to list...
Mira, nos están preguntando que por qué usar XMLJS.
El endpoint envía los ítems de forma diferente.
Es que no es un endpoint.
Ahí está el truco.
Sí.
Explica, explica mientras...
Vale.
No es que sea un endpoint.
Lo que está pasando es que tenemos un rss, que los rss funcionan por convención con
XML, que es el rss de iVox.
Es la plataforma digital donde tenemos subido...
Bueno, una de las tres plataformas digitales donde tenemos subido los podcasts.
Y vamos a alimentarnos de ese rss para printar los podcasts en nuestra página.
Entonces, necesitamos traducir nuestro...
Necesitamos traducir la respuesta del rss, que es XML, a un objeto nativo de Javascript,
como es un array.
Para poder hacer un mapper y poder transformar cada una de las entradas del XML en una entidad
podcast.
Entonces, esto es justo lo que estamos haciendo ahora mismo.
Haremos una petición get a una URL, que nos devuelve un XML, parseamos ese XML y lo convertimos
en un array de objetos de Javascript.
Sí, espero que hayamos respondido.
Vale.
Y esto, hacemos new, from, bla, bla.
Y esto recibe, por un lado, el parser que hemos dicho.
El parser que hemos dicho y la factoría de las podcast entities.
Y la factoría de las podcast entities.
Vale.
Podcast...
Podcast entity factory.
Esto es.
¿Algo me he puesto...
Ah, no, no.
El list of podcast value object factory.
Ah, y verdad.
Esto es.
Sí, que se la lía al final.
Vale.
Entonces, vamos a solucionar un momento lo del parser.
¿Por qué?
Creo que lo que puede tener sentido, veo que aquí tiene cuatro métodos, queremos que
siempre tenga unas opciones.
Aquí sí que podríamos complicarlo más y esto extraerlo y tal, pero yo creo que al menos
la factoría...
A ver qué te parece lo que voy a hacer, ¿eh?
Sí.
Igual dejas de...
Parar la grabación y te pegas en la torta y a tomar por saco.
Pero qué...
No, pero...
A ver, para no liarnos más, pero al menos intentar que sí que quede la factoría, lo que creo
que podríamos hacer...
No se ve muy bien la...
Tenemos la webcam...
Pero bueno, yo creo que la gente lo entiende más o menos.
Bueno, está ahí, ¿eh?
O sea, no...
Sí, si no veis algo, comentadlo, ¿eh?
Que como no vemos nosotros la webcam...
Mira, lo puedo tirar un poco para arriba.
Tiene cuatro métodos.
Y esto se llama convert.
Esto es un poco raro.
Lo que podemos hacer es extraer solo el que queremos de aquí.
Y ese es el que vamos a poner en el parser.
Sí.
Pero, ¿qué te parece?
Ah, con nociones por defecto ya, dices.
Sí.
Vale.
No sé.
Vale, está bien.
Esto lo podríamos extraer fuera para que fuese más reutilizado.
Pero en este caso, al menos es para no hacerlo aquí.
Vale.
Pues, por ejemplo, esto sería el...
El RSS.
Bueno, vamos a llamarlo XML porque se supone que...
En el JS le pasaríamos el XML con el compact true.
Vale, perfecto.
Y así no tenemos que ponerlo.
¿Qué pasa?
Que si nosotros no ponemos el compact true y esto lo metemos dentro del mapper y le pasamos la opción,
esto ya nos ata un contrato muy específico, ¿no?
Dentro del mapper.
Y si al día de mañana lo queremos cambiar, ya nos va a obligar a que tenga esta opción del compact true.
Sí.
No sé.
Además, con esto conseguimos una cosita que es una cosa que podemos...
Que sería bueno que se intentara, que es tener la mínima superficie de contacto entre dos partes de la aplicación.
¿Vale?
Que es un poco lo que hacemos con el repositorio.
Entonces, ahora nuestra superficie de contacto...
Parece una tontería, pero nuestra superficie de contacto entre el XML parser y el mapper es simplemente el string del XML.
No son un montón de configuraciones que son ad hoc para una librería en concreto de Internet.
Con lo cual, se simplifica un poco el poder cambiar el XML 2.js por otro.
Porque la configuración propia de la librería está encapsulada.
Bueno, tiene sentido.
¿Sí?
Tiene sentido.
Hombre, molaría esto.
Evidentemente, a lo mejor molaría sacarlo de aquí, por si el día de mañana lo queréis utilizar en otras factorías.
Pero creo que al menos aquí tiene sentido que se queda en la factoría, ahí está el import y hacéis lo que tenéis que hacer.
Tenemos que crear el value object antes de continuar.
Vale.
Es esto, es que vas tirando el hilo y te vas dando cuenta de lo que tenéis que hacer.
Pues el value object.
Value objects.
Creamos la carpeta value objects.
Creamos aquí...
Hemos dicho que sea list of podcast value object.js.
Vamos a importar value object, que básicamente es como una mini interfaz que tenemos.
Y, hombre, lo interesante...
Coméntalo otra vez lo del tema este de los...
Mientras voy escribiendo para...
El tema este de los circulares.
Ah, vale.
Una papeleta.
Todo para ti.
Todo para mí.
Vale, ¿qué es el tema de los circulares?
Es que esto realmente sí es una cosa que hemos definido nosotros dentro de Sisted.
No es una cosa que te vayas a encontrar así como tal, como entidad en la literatura.
Eso lo diría siempre lo de clase.
Es una cosa loca.
Es imposible.
Es que casi la gente entenderá, ¿por qué voy a poner una clase vacía y le voy a poner un comentario dentro?
Esto es.
¿Sabes qué clase de locura es esta?
Vale.
Esto lo que pasa es, primero tenemos que hablar de lo que es un modelo anémico.
Que es un modelo que básicamente es un saco de datos, un saco de información, ¿vale?
Pero que no hace nada con la información.
Esto pasa.
En nuestro caso, la lista de Podcasts Bolivoyes es un saco de información.
Lo único que hace es pasar de una parte del dominio a otra, nuestros Podcasts Bolivoyes.
Entonces, nosotros hemos definido en general que todos los métodos, todos los elementos del dominio tengan un método que se llame ToJSON.
Este método ToJSON va a convertir, va a degrapear nuestro objeto de dominio en un objeto plano de JavaScript.
Pues esta salida de este ToJSON va a ser la entrada de la factoría.
Y esto lo hacemos porque para nosotros es muy importante la inmutabilidad de los objetos de dominio, ¿vale?
En el caso nuestro del mapper este, estamos construyendo de cero un objeto de dominio.
Pero en otros mappers es muy fácil pasar de un objeto de dominio al mismo objeto de dominio, a la misma categoría de objeto de dominio.
Por ejemplo, un Podcast Entity a otro Podcast Entity.
Y sería muy fácil que alguien tuviera la tentación de coger y modificar, mutar a pelo el objeto de dominio.
Entonces, lo que hacemos es convertirlo a ToJSON, obtener el objeto de forma plana, modificar el objeto plano que queramos en el mapper y después llamar al factory para reconstruirlo.
Y sabemos que la salida del ToJSON es la entrada del factory.
Exacto. Entonces, básicamente, como esto que ha explicado Carlos, lo estamos haciendo con estas líneas un poco aquí, lo he puesto a mansalva.
Esto se hace de forma automática gracias a la extensión que hacemos del ValueObject.
Hay que tener en cuenta que nosotros solo extendemos siempre una sola vez.
Nunca hacemos una, o sea, no hacemos dos extends, no extendemos un ValueObject de otro ValueObject.
Pero en este caso nos permite hacer esto que ha comentado Carlos.
Y así, como ahora mismo no tienen ningún tipo de información más este ValueObject, solo que lo que se le pasa es lo que queremos que devuelva, pues ya lo podemos dejar como está.
Si quisiéramos añadir métodos introspectivos como, por ejemplo, filter by, no sé, o get podcast by season, ¿no?
By season, por ejemplo.
Por ejemplo, que usamos la season y que cogemos del this.podcast.find, porque esto es un array, pues podríamos buscar y utilizar, pues, métodos introspectivos para sacar información del ValueObject.
Esto es.
En este caso no tenemos, entonces no necesitamos.
Muy bien explicado, Carlos.
Muchas gracias.
Te has defendido muy bien.
Muchas gracias.
Pues, tengo ya el list of podcast ValueObject.
Voy a crear la factoría, factory.js.
Con la factoría de los ValueObjects, básicamente vamos a coger el list of podcast ValueObjects, los plurales, que jodidos son a veces.
Joder, de verdad.
Y la de problemas que dan.
Y a mí en inglés también, es que me matan mucho los plurales en inglés también.
Vale.
Especialmente en inglés.
Default class Podcast ValueObjects Factory, static.
Y list of podcast ValueObjects Factory.
¿Le llamo factory directamente a la factory a este?
Sí.
¿Sí?
Sí.
No, no, no, no.
No lo llamo factory, ¿verdad?
No, no, ese es object, exactamente.
Este es para construir el objeto podcast y devuelve el new.
Mira, y aquí tenemos otra cosa interesante.
¿Qué tenemos?
Para crear el ValueObject.
¿Por qué?
Para crear el ValueObject, ¿qué es un ValueObject?
¿Qué es list of podcast?
El podcast es un ValueObject que es una lista de entities.
Exactamente.
De podcast entities.
Sí.
Por lo tanto, aquí vamos a importar la entity del podcast.
Esto es, sí.
Claro.
Vamos a importar la factoría, el podcast.
Ah, tú dices, claro.
Y la construcción de la entity la hacemos en la...
Claro, ¿no?
Entonces, de los entities cogemos la factoría, podcast entity factory, y entonces lo que vamos a hacer es crear una constante podcast entities que cogemos el array, lo mapeamos, y por cada uno le vamos a pasar el podcast entity factory punto podcast entity.
Esto es, ¿se ha entendido lo que hemos hecho mucho?
Magia, ¿no?
Potagia.
Vale, pero básicamente lo que estamos haciendo, porque lo que le pasa a la factoría es un array, plano.
Plano.
Esto es súper importante.
Sí, esto es interesante.
Porque el ValueObject va a ser, va a tener una propiedad que se llama podcast.
Y lo que queremos que el ValueObject tenga en esa lista de podcast es un array de podcast entities.
Exactamente.
Claro, claro. Entonces, para crear eso, el sitio correcto que deberíais hacerlo es justamente aquí.
O sea, es en la factoría, donde le llega el objeto plano, el objeto plano lo recorres, y cada uno de esos objetos lo conviertes en un podcast entities, lo devuelves a ese array, que será la propiedad que tenga el ValueObject.
Esto es...
Estela.
Guau, ¿eh?
Claro, pero es súper interesante, ¿no?
Sí, sí, sí.
Creo que no se me ha escapado aquí nada. Tengo que hacer un... Y aquí devuelvo un new del list of Podcast ValueObject, donde le pasamos como podcast, que será la propiedad que tendrá el ValueObject, el podcast entities.
No he inventado nada, ¿no, Carlos?
Creo que no, creo que no. Y creo que aquí está el truco. En saber que la construcción, que lo que se le pasa a las factorías siempre es un objeto plano y las construcciones se hacen dentro de las factorías.
Pues esto ha sido fuente de muchos problemas.
Sí.
Esto ha sido fuente de muchos problemas, así que es importante tenerlo claro.
Sí, sí.
A las factorías siempre, siempre, en cualquier nivel se le tienen que pasar objetos planos.
Objetos planos, claro. Es que si no se rompe un poco esta encapsulación que queremos hacer y ya no podría ser circular, no podrías ponerte a deconstruir, a convertir a un objeto plano, una entidad o un ValueObject.
Exactamente.
Y luego volver a poder crearlo con esa misma información.
Que, por cierto, tu JSON es recursivo. O sea, que ya está pensado para funcionar de esta forma.
Claro. Exacto.
Vale, guau, esto me ha pedido frío para hacer estas cosas.
Traca, traca, ¿eh?
Estoy la marinera. Vale.
Ya tengo listo el podcast ValueObject. Si esto funciona a primera, vamos en la leche.
Ponemos la intro otra vez y nos damos un abrazo aquí.
Nos damos un abrazo. Bueno.
Esto, lo importante es que una vez que lo tienes interiorizado...
Cristian nos está diciendo que buen toque.
O sea, que muy bien.
Sí.
Programando en JS y narrando que ahí no nos estamos marcando. Gracias, Cristian.
Sí. Que sepáis que esto es ro, ro, de verdad. Vale.
Tenemos ahí nuestro...
Tengo el ValueObject.
Lo malo mucho tener el chat, ¿sabes? Podré poner el chat en la transmisión.
Sí, no. Es muy guay. Es muy guay.
Venga, perdona.
Vale. Ya tengo el podcast ValueObjects Factory. Yo creo que lo peor de todo esto siempre es el naming, porque te vas liando, ¿no? Esto es la factoría, estas entidades y tal. Pero por lo demás... Vale. Tengo la factoría de los ValueObjects. Voy a volver al mapper. Y aquí... Ya tenía aquí preparado el podcast ValueObjects Factory.
Pues lo cambiamos.
Entonces, ¿no? Esto está bien, ¿no? ValueObjects. Sí. Aquí, que queríamos pasarle list of podcast ValueObjects Factory, que es la factoría que acabo de crear. La tenemos que coger desde el podcast ValueObjects Factory punto... Ay, no ha funcionado esto. Entonces a lo mejor algo no he hecho bien, ¿eh? Factory... No.
Son dos hacia arriba.
Sí, claro. ValueObjects punto... Menos mal, ¿eh? Que con estas cosas delito te salgo en la vida, ¿eh? Dices, hostia, porque esto es el típico error que luego te vuelve loco.
O sea... Vale. Tengo aquí la factoría. Punto. Y aquí tengo list of podcast ValueObjects que es el que creo.
Vale. Pues esto ya está. Básicamente le pasamos el parser que hemos creado aquí arriba para poder transformar la respuesta del RSS a un objeto JSON.
Y tenemos aquí el list of podcast ValueObjects Factory que nos permitirá, con ese objeto JSON, crear la lista de podcast que serán podcast entities.
Esto es. Lo podemos decir con un turrón en la boca.
Bueno, a mí me costaría decirlo. Pero bueno, estas novedades igual las hemos practicado.
Nos faltaría igual una pizarrita. Pero sí, es básicamente exactamente eso. Será un objeto que contenga una lista de entidades. No es más.
Vale. Luego, esto voy a ir dejando... Esto no va a archivar después lo que nos está devolviendo exactamente esto.
Porque yo, sinceramente, no tengo ni idea. Y así probaremos si funciona.
Sí.
¿Pues qué más? Porque esto está bastante bien.
Ya está, ¿no? Tenemos que cambiar en la factoría del use case el repositorio.
Del use case y del use case. No tenemos servicio.
Así, con podcast por abajo. Esto vacío. Vale. Vale. En el repositorio teníamos aquí... Hemos creado el RSS Podcast Repository.
Le estamos inyectando el mapper. Tengo que pasarle el mapper a la factoría.
Tengo que hacer las dos cosas. Vale.
Por un lado, dice Carlos, claro, ahora en la factoría del Podcast Repositories Factory tenemos dos.
Tenemos el Firebase Podcast Repository, que es el que teníamos del capítulo anterior.
Y ahora tenemos uno, que es el nuevo, que se va a llamar...
RSS...
RSS...
Bueno, R... Esto entonces sería así, ¿eh?
No, con todo en minúscula.
Ah, eh...
Sí.
A ver...
Es trampa, ¿eh?
Esto es un debate. Esto es un debate, lo vuelvo a decir.
Naming, naming, naming.
Naming, tío. Naming en informática. Es lo peor.
Y esto viene del RSS, esta vez sí, con todo en mayúscula.
Eh... Podcast Repository.
Ah, mira.
Autoimport.
Ay, pues me lo ha puesto...
Ah, claro.
Porque el fichero, ¿no?
Es que el nombre del fichero, sí.
¿Ves?
No me va que he dicho.
Hay que ser totalmente... Siempre hay que hacerlo igual, porque si no...
RSS Podcast Repository.
Hola, Antonio. Pues mira, estamos...
Sigue, sigue. Comento en refondo a Antonio.
Ah, digo. ¿Dónde está Antonio?
Joder.
¿Dónde está Antonio?
Pues mira, estamos programando nuestra web para unos podcasts que estamos haciendo
de hoja, de Javascript.
Y hemos dicho, vamos a aprovechar a hacerla en vivo, que todo el mundo vea cómo programamos,
porque si solamente fuera una página estática con un ULLI, pues no, sería muy interesante.
Pero estamos utilizando un poco de Clean Architecture, un poco de las tecnologías que utilizamos
al día a día en nuestro trabajo en Shifted, y cómo organizamos la arquitectura, este tipo
de cosas. Y por eso estás viendo ahora repositorios, entidades y demás. Entonces intentamos aplicar
lo poco y modestamente que sabemos de Clean Architecture, que es bastante poquito, como
podamos.
Hacemos lo que podemos.
Hacemos lo que podemos a desarrollo en Javascript.
Total.
Y respondiendo a Cristian, no, Firebase lo vamos a desplegar.
Sí.
Empezamos con Firebase porque pensábamos que íbamos a guardar los podcasts como entradas
de la base de datos, pero...
Háblale ahí.
Perdón.
Pero ya hemos decidido que tenemos que utilizar el SSR de iVoox, que es donde lo estamos guardando.
Básicamente es para tener una solo fuente de verdad, ¿no? Porque si lo tenemos en iVoox,
en iVoox, en la que sea, y también lo tenemos en Firebase, es el doble de trabajo. En iVoox
el RSS ya está bastante bien, está bastante fino.
Vale.
Vale.
Para los que... Para retomar un poco, lo que estábamos haciendo aquí, he creado el RSS
Podcast Repositorio, aquí en la factoría de los repositorios del podcast. Estamos pasando
la config, por un lado, y por otro lado el list of podcast value object factory, que
no está bien. No, lo que tenemos que pasarle es el mapper.
El mapper.
¿Ves?
Exactamente.
Perdón, perdón. Me he despisto.
No, no, no, no. No, no, no, no, no, no, culpa tuya, culpa mía, que me he equivocado.
Exacto. No le pasamos directamente el value object, perdón, ¿eh? Lo que tenemos que pasarle
es el mapper, que es podcast mapper... He creado el... Vale. Mappers factory.
Esto es...
From mappers factory. Vale.
Vale.
Y este es el mapper que vamos a utilizar. Perdón, ¿eh? Aquí, con lo bien que lo había
hecho, yo aquí retomando, y al final no era exactamente. Y este es el mapper que le
pasamos.
Esto es.
Y esto sí que se ejecuta.
Y esto sí que se ejecuta. Y a eso hay que pasarle... ¿Hay que pasarle el config?
Sí, creo que sí.
Hay que pasarle el config. Vale.
Exacto. En este caso, bueno, se lo podemos pasar, pero no sé si se usa.
No, no se usa, pero yo la verdad es que...
Sí, es una buena práctica, ¿no? Porque así, de esta forma, pues siempre te aseguras
que el día que lo uses no tengas que buscar dónde es o tengas que pasar.
Eso es.
Vale. Pues este mapper nos va a transformar el RSS text to list of podcast value object.
Entonces, o sea, que el value object ya se está importando en otro punto.
Si miramos el repositorio, veremos que ya lo tenemos preparado, básicamente, para hacer
lo que tiene que hacer. Y aquí este mapper ejecutará el punto map que le pasará al response text,
que si vamos al from rss text to list of podcast value object, llegará aquí. Y este rss text
lo pasará por el parser si funciona, buenamente funciona. Vamos a ver después, cuando ejecutemos
esto, a ver qué es lo que nos está devolviendo, porque no estamos seguros. Muy bien.
Y entonces aquí sí que es donde crearemos el value object, ¿vale? Y el value object
en su factoría, a su vez, creará la lista de podcast entity.
Exactamente. Que dicho así todo del tirón, parece un montón, pero si lo pensáis, todo
está conectado, todo tiene su sitio, es sistemático, no es arbitrario. Esto es creo que la gran
baza de esto. Que aunque parezca que es más complicado, obviamente es más fácil hacerlo
todo en línea, rápido, pero esto es sistemático. Sabes que dentro de un año vas a venir y
vas a resolverlo de la misma forma.
Exacto. Y ahí es donde está la gracia.
Ahí es donde está la gracia.
Y es que, y aquí viene la magia de todo, por cierto, te dejaste aquí un pepito, que
pepito, qué grande.
No, creo que lo dejamos a posta, ¿eh? Si revisamos el vídeo, te dijiste, no, deja un pepito
a posta para que se sepa lo chungo que es el import default.
Qué grande. Vale, pues, bueno, pues he hecho todo con es por default. O sea, que espero que
que mi yo del futuro no se acuerde de mí.
Ya tuvimos esta conversación en el podcast, en el de este pasado, en el vídeo pasado.
Sí, porque claro, con es por default le puedes poner el nombre que te dé la gana.
Sí, eso.
Está bien porque esto significa que lo puede minificar el Googleify, genial, pero obviamente
tiene un problema y es que el problema es que le puedes poner el nombre que te dé la gana.
No, somos más partidarios de no hacer el problema.
Y lo peor para mí es no ser consistente. Porque a mí me da igual el nombre que le puedas
poner. El problema es que le puedes poner un nombre diferente cada vez que lo uses.
Entonces eso no es consistente. Y eso sí que es un problema. Vale. Esto sería podcast
repositories factory. Sí. ¿Y este config hará falla? ¿De dónde? Ah, no. Es el internado.
Es el internado.
Entonces, la gracia de aquello que hicimos, la gracia de todo esto, aquí llega el punto.
La gracia de todo lo que estamos haciendo, básicamente, está en este punto. Y es que ahora
este podcast repositories factory que tiraba del Firebase Podcast Repository, esto ahora
podemos decirle que en lugar de utilizar el Firebase Podcast Repository, use el RSS Podcast
Repository. Y esto no hemos tocado el caso de uso para nada.
Para nada. Y también es verdad, claro, porque alguien nos dirá, ostras, pero en realidad
para hacer este cambio habéis tocado un montón de cosas. Vale. Muchos de los cambios que hemos
hecho ahora, en realidad, es porque yo he sido mala persona y he creído hacerlo todavía
mejor de cómo estaba, ¿no? Y hemos tenido que crear el value object, que no estaba creado.
Si el value object tuviera creado, nos hubiéramos saltado muchos pasos de los que hemos visto.
Sí. Vale. Solo lo hemos hecho porque creo que valía la pena que viésemos cómo se hacía
esto de crear un value object, que una de sus propiedades es una lista de entities, o de
value objects también podría ser. Entonces, que no os asustéis de, para hacer este cambio
has hecho muchas cosas, porque la verdad es que más de la mitad quizás. Solo tenías
que haber creado el mapper. Solo, solo. Ya está. Solo haber hecho el mapper. Exacto.
Y es que la maravilla de poder decir, y ahora cojo esta pieza de Lego. Exacto.
La quito y la pongo ahí. Exacto. Tal cual. Está muy guay.
Está genial. Porque si miramos el podcast... Claro, el problema es que ahora sí que vamos
a tener que tocar esto. Bueno, porque hemos roto la...
Pero ¿por qué hemos roto? Porque lo hemos roto a posta, ¿eh? Porque estaba como...
No estaba bien hecho y tal. Ya. Ahora me estás odiando, ¿verdad?
No, no, no. Está bien, está bien. Sí, me lo he cargado. Me lo he cargado.
Pero es que ahora tiene más sentido, porque esto ahora es un list of podcasts value objects.
Que es lo que siempre tiene que haber sido. Claro, que es lo que siempre tiene que haber
sido. Y ahora podemos hacer esto. Y esto debería funcionar. Que otra cosa es que funcione.
Venga, hombre. Pero esto debería funcionar, ¿no?
El futuro es de los valientes. Exacto. Esto debería funcionar de gratis y nos hubiéramos
quedado bien a gusto. Que de hecho podríamos intentar arreglar el de... Bueno, no lo voy
a arreglar. No voy a arreglar el de Firebase. Pero básicamente esto habría que arreglarlo
para que lo que crease aquí en realidad fuese el value object y tal. Lo haremos, pero
lo haremos fuera del vídeo para no liaros, ¿vale? ¿Qué más me queda? Aparte de probarlo.
Pues creo que probarlo, ¿no? Sí. No se me ha olvidado absolutamente nada. Esto
es muy típico, que se te olvida inyectar alguna dependencia por ahí y te quedas...
Ya veremos cuando pete. Acabamos antes viéndolo petar que intentando descubrirlo.
Drive and development. Totalmente. Es un nuevo concepto. Anda que no lo utilizamos.
Joder. Claro, hombre, no todos. Esto es lo típico que te viene uno. Yo no, a mí no
me petan. Bueno, pero hemos intentado hacerlo lo mejor posible. Sí. No os cabréis y petan
muchas cosas. De hecho, ya página en blanco. Genial. Vamos a ver que... Ah, problemas de
cores. Bueno, problemas de cores. No me digas que esto no acepta cores. Hostia. Pues aquí
se acabó el vídeo, entonces. Bueno, chicos, pues muchas gracias por... Nada, vamos a buscar
una solución. Eh... Hostia, problema de cores. Vale. ¿Qué te parece? Hacemos una...
Si esto es problema de cores, si ellos no tienen limitado el cores, lo único que vamos a hacer
es una función, una Google Function que haga la llamada por nosotros y nosotros llamar
a la función. Hay un servicio. Vamos a hacer eso. ¿Hay un servicio? Hay un servicio que
voy a hacer. Voy a ver si soy capaz de encontrar... Ah, ¿cómo se llama esto? Eh...
Eroku... Eroku... Ah, sí, cores... No, coresanywhere. Anywhere. Anywhere. Este. Coresanywhere.
Esto, básicamente... Ah, qué bueno. Sí. Sí, sí. Esto, básicamente, lo que hace... Es justo lo que decía
Carlos. Eso es exactamente lo mismo. Esto lo que hace es que tú le pasas, concatenas la URL que
quieres hacer el fetch. Yo imagino que esto es un problema de localhost, más de cores, porque
me imagino que cuando vayamos a producción esto funciona. Porque si no, ¿cómo lo hacen?
Bueno, da igual. El caso. Esto lo que va a hacer es que va a hacer como por nosotros la
petición y le va a meter todos los headers que necesitamos para que esto funcione
correctamente y no vas a tener ningún problema. O voy a cruzar los dedos para que esto no tenga
ningún problema. Entonces... Vamos a probarlo. Venga, dale. Yo lo utilizo un montón de veces.
Sí, sí, sí. Funciona de puta madre. Y de hecho... Mira, esto nos da una posibilidad
muy interesante. Vamos a activar el config. ¿Vale? Hemos visto que tenemos la base, ¿no?
Entonces, podemos activar que el modo desarrollo... Utilice el coresanywhere.
Utilice el coresanywhere. Vamos a crear una configuración solo para desarrollo.
¿Vale? Que se llamará development.js...
Esto es una... Para no perder lo que he copiado. ¿Vale? Entonces, en desarrollo, esto funciona
así, el coresanywhere. Básicamente, es así. Pones el coresanywhere...
Me encanta esa API, tío. Sí. Y justo terminal path, pones la URL de la que quieres hacer
el fetch y ya está. Evidentemente, esto no lo uséis en producción.
No, no. No es la idea. No es la idea. Esto es porque muchas veces dan problemas para localhost
o cuando intentas hacerlo desde un file, por ejemplo, pues te da estos problemas. ¿Vale?
Pero no lo hagáis en producción. A no ser que sea excesivamente necesario. Cosa que espero
que no lo sea. Entonces, como base, el fit URL tiene esta dirección.
Que es la normal. En modo desarrollo va a tener esta dirección. Así podremos probar
en modo desarrollo que lo que estamos haciendo ahora, que no es un problema de cores.
Vamos a ver. Si es... Vamos a la pequeñita.
Y por otra parte, podríamos tener producción, que sería el mismo que el base. ¿Vale?
Y en producción sí que queremos tirar directamente de Evox. ¿Vale? Entonces, en nuestro índice
lo que vamos a hacer es tener development y producción. ¿Vale? Y esto es lo que hace
el config. Quiero pensar que lo hace en algún punto. Vale, aquí. Es que el base lo utiliza
por defecto y luego, dependiendo del environment, sobreescribe.
Sobreescribe. Sobreescribe. Stage. Bueno, Stage. Esto debería ser Node-Empf.
Es que ¿sabes por qué puse Stage? Porque quiero desacoplar el concepto de Node-Empf que
se utiliza para temas de minificado y cosas por el estilo del estado de este tipo de urls.
Claro. Entonces, igual yo quiero tener el código minificado como si fuera para producción,
pero que apunte las urls de pre o de def. Tiene todo el sentido del mundo. Sí.
Pero ponemos Node-Empf, por favor. No, más que nada porque, bueno. Vale, vale, vale. Ahora
no va a afectar. Claro. Vamos a poner Node-Empf. O sea, me parece súper bien lo que has dicho.
De hecho, en Shisted Spain lo hacemos así. Tenemos desacoplado lo que es el modo de compilación
y de ejecución a la configuración que queremos cargar. Y tiene todo el sentido del mundo.
Por ahora lo vamos a hacer porque aquí no... Si no, me tendría que ir acordando. Le sigo
llamando Stage, pero solo que cojo la variable de entorno. La cojo de Node-Empf y ya está.
Vale. Vale. Bueno. Buenas y malas noticias. ¿Qué quieres?
A ver, ¿qué tenemos de buenas noticias? Tenemos un montón de fallos que me imagino
que es algún error. TextData Outside of Root Node. Bueno, pero esto ya es SACSJS.
Vamos a poner un debugger debajo del texto y vamos a pararnos. Vamos a ir a...
Sí, parece un programa del parser. Sí, más que el fichero lo tiene, ¿no?
Lo hacemos en el repositorio. Sí, en el RSS.
Mira aquí. Ah, ahí. Debugger.
Debugger. Ahí.
Ahí, pretty fight.
Sling Indicidad Online.
Response Text.
Vale, a ver.
Ay, perdón. Ya está.
Ajá.
Ajá.
¡Vergüenza!
¡Se te ha olvidado!
Sí, es que, claro, el Response Text es...
Una promesa también.
Es asíncrono. Entonces hay que hacer a la wait para...
Perdón.
Perdón, perdón.
Vale, Response Text.
¡Oh!
Ahí lo tenemos.
Esto es HTML.
Sí, esto parece HTML.
A ver si es que he puesto... A ver.
A ver que he copiado aquí en el config.
Sí, sí, es que lo que quería copiar era esto.
He copiado la página directamente ahí.
Igual podemos scrapearlas.
Al final es lo mismo. Es xml.
Sí, eh.
Bueno, pero...
Si es que...
Desarrollo esto aquí también.
Y en producción...
Con jQuery.
Ja, ya.
Bueno, en Chirio y...
Vale, ahora.
Pin, pin, pin.
Vale.
Next.
Response Text.
Ajá.
Ahora sí.
Vale, ya lo tenemos.
Ya lo tenemos.
Vamos a por el siguiente.
Vale.
Mapea.
Esto...
Entramos dentro.
Sí, a ver si encuentro los...
Ah, mira.
Le doy.
Ah, el teléfono aquí dentro.
Ostras.
Wow.
A ver dónde llegamos aquí.
A la madriguera y al conejo.
Igual ya puedo pasar el debugger.
Si no, a...
Sí, sí.
Al mapper.
Igualmente...
Eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh.
Bueno.
Eh, eh, eh.
Ojo.
Channel.
Ya hasta aquí.
Atributos.
Ha funcionado.
Channel.
Yo creo que esto ha funcionado la primera, eh.
Sí, ¿no?
Atributos...
¿Y dónde están los podcasts?
Buena pregunta.
¿En channel no están?
¿En item o lo que sea?
Ah, sí, sí.
Mira, item.
Aquí tenemos.
O sea, sea...
Vamos al mapper.
Oye, pues bien, ¿no?
Joder, a la primera.
No está mal.
Muy bien.
Vale.
Esto está.
Hay que coger el RSS.
Ay, no.
Eso no me gusta mucho.
Vale, ¿qué quieres hacer?
No, no, no.
Si quieres, podemos coger un get.
Yo no soy un...
No, no, no.
Digo que no soy partidario de la deconstrucción...
Ah, yo tampoco, ¿eh?
En cascada.
No, ya, a mí tampoco me gusta.
Pero era por simplificar.
O sea, podemos hacer...
Coger directamente aquí el RSS.
A mí me gusta...
Si soy yo el que pone el artículo de single line.
Este es.
Vale.
Entonces, cogemos el channel.
Bueno, podemos poner aquí.
Bueno, podemos asignarlo directamente.
Claro, con puntos.
A ver, también se puede utilizar puntos en JavaScript, ¿eh?
No, todo se tiene que deconstruir.
Vale, vale.
Pues puntos.
De hecho, mira, podcast va a ser RSS punto.
Channel punto...
Item.
Item, ¿vale?
Y así...
¿Cuántas ganas tenemos de conseguir el optional operator en JavaScript?
De que ya sea...
Mucho.
Uf, un montón.
¿Esto te gusta?
Esto me encanta.
Esto sí me gusta, ¿ves tú?
¿Te pone feliz?
Me pone feliz.
Te gusta.
Muy bien.
Te gusta, vale.
Vale.
Ahora aquí hay un tema, ¿no?
Porque el item que tenemos...
Por ahora tenemos dos capítulos.
Por lo tanto, description...
Vale.
Tenemos que extraer esta información y...
Y convertirla en la entrada de la factoría del Podcast Entity.
Vale.
Que no nos acordamos de cuál es la entrada del Podcast Entity, ¿verdad?
Podcast Entity.
Ah, amigo, aquí no pusiste un comentario para ayudarnos, ¿eh?
Aquí no pusimos un comentario.
Y tampoco...
Y en el factoría tampoco, porque pone...
Ay...
Bueno, no pasa nada.
No pasa nada.
Mira, tengo una forma.
Vamos a la app, ver cómo lo usamos, que básicamente esto es lo que devuelve el caso de uso.
Id, título y URL.
Id, URL.
Vale.
Vale, pues mira, vamos a hacer param, object, podcast, entity, params y que tengamos un parámetro
que es un string, ¿no?
Que será el...
Todo va a ser un string, sí.
Id.
Has dicho que también está...
Url y título.
Title y param, string.
El otro día, esto es una tontería, pero es que el otro día me dijo un colega que
vio el primer programa, me dice, no sabía qué programa Backend.
¿Qué programa Backend?
Bueno, que en realidad, programo Backend en Node muchas veces, que es imposible.
Sí, sí, pero...
Porque estamos haciendo cosas de Clean Architecture y esas cosas.
Y yo, no, esto es Frontend, ¿seguro?
Es que esto es una cosa que yo espero que este tipo de vídeos ayuden a romper este tipo, ¿no?
A romper, exactamente.
Sí, sí, sí.
Programar en el Frontend, señores, es muy difícil.
Programar con tanto estado es muy complicado.
Cada vez más.
Cada vez más.
Y...
Entonces, haremos bien si intentamos aplicar buenas metodologías de desarrollo.
Y esto es una muy buena metodología de desarrollo, Clean Architecture.
Description.
Perdona, ¿eh?
Guau, bueno, me parece súper interesante.
Sí, sí, no, me quedé un poco...
No, no, es...
Ah, hostia, ya hacéis esas cosas.
Y claro, yo le decía, hombre, es que piensa que ahora las librerías que tenemos en el Frontend,
en realidad, con esto de que puede renderizarlo todo en el servidor,
claro, esa librería se utiliza en el servidor.
Igualmente, o sea, en realidad sí que estoy haciendo...
Sí, bueno, pero si ya entramos en el tema de que se avisa de rendering...
Claro.
Exactamente.
Si es Backend o no es Backend.
Claro, realmente sí que está en la parte del Backend.
Pero igualmente lo que dice Carlos es que el código en el Frontend cada vez más complejo
y quieres tener tu lógica de negocio, pues...
Desacoplada.
Desacoplada, bien bonita.
Y que tu yo del futuro no quiera asesinar a tu yo del pasado.
Esto es.
Ni el tuyo del pasado ni el pasado de tus compañeros, pobrecitos.
Vale, básicamente, retomando.
En el mapper queremos title, description y URL.
Me he dado cuenta que aquí hay un tema interesante y es que le faltaba...
¡Ay, no!
Perdona, es que...
Ide tenía.
Descripción es lo que no tenía.
Descripción es lo que no tenía.
Vale, perdón, perdón.
Vale, title, URL.
He puesto el description y...
Ah, vale.
Vale, vale.
Vale.
Pues igualmente me he dado cuenta que aquí en principio no hay ninguna idea.
Pero eso también puede ser interesante de cómo lo podemos crear.
Podemos utilizar el Quid, pero me parece un poco raro utilizar un nuevo URL.
Vale, podemos utilizar el...
¿Sabes?
Coger el string, hacer el slash.
Sí.
O una idea puede ser coger el season y el episode, porque nunca pueden haber dos iguales.
También.
Ahora lo miramos.
Buscamos coger estrategia.
Vale.
Importante es que item...
Vamos a coger que podcast...
Esto es item.
Es que esto es raro, pero...
Ay, no.
Perdón, perdón, perdón.
¿Cómo, cómo?
Sí, es raro porque se llama item y es un array.
Ah, vale.
Es un nombre.
Pero lo hemos renombrado, ¿no?
Sí, a podcast.
A podcast.
Entonces vamos a poner Muppet Podcast.
¿Vale?
¿Qué vamos a hacer para cada podcast?
Básicamente vamos a extraer esta información, que es el title, URL y la ID.
Esto es.
Vamos a ver ahora cómo lo hacemos.
Por un lado tenemos el title.
Que es directo, ¿no?
No, porque tiene que un cd data muy raro.
Chungo.
Mira, da igual, vamos a hacerlo.
Sí, no, no.
Aquí está bien.
Si tenéis que hacer estas guarradas, aquí es el sitio.
Esto es.
¿Sabes?
El mapper es donde podéis hacer estas cosas.
Esto está en podcast title.
We love XML.
¿Vale?
Vale.
URL podcast punto URL punto...
No sé, ¿se ve bien?
¿Cuál?
Sí.
Sí.
El URL, URL, ¿dónde está el URL?
Oh my God.
Vale.
Coño.
Joder.
Enclosure attributes punto URL.
Vale.
Sí.
Enclosure...
Creo que lo he escrito mal.
Enclosure.
Enclosure.
Enclosure...
Attributes.
Attributes.
Attributes punto URL.
Vale.
Y la idea...
¿Qué quieres hacer con esto?
La idea...
Hacemos...
O hacemos lo del...
Me da igual lo del session o utilizamos la idea que tienen ellos en el este.
Sé que esto a lo mejor...
Vamos a ser demasiado tarde.
Pero me estoy...
Closure.
Vamos a...
Vamos a recuperarlo bien.
Vamos a quitar esto de aquí.
Y vamos...
Esto es interesante.
A ver si me acuerdo.
¿Cómo que...?
Ahí me he perdido.
¿Qué estás haciendo?
Ah, sí.
Para no utilizar otra vez el podcast, no sé qué.
Ah, vale, vale.
Lo que estoy haciendo es hacer una desestructuración.
Vale.
Vale.
Porque...
Vamos a intentar...
En lugar de utilizar el ID que le mete esto...
Pues vamos a utilizar el season y el episode.
Me puede darle.
Entonces, lo interesante de esto es...
Es que si nosotros intentamos hacer algo así...
Esto no funciona.
Y esto tampoco.
No.
Obviamente.
No.
Pero...
Sí.
Esto sí.
Entonces, la ID...
¿Qué?
Esto...
Me lo he perdido.
Sí.
Vale.
Ahora voy a volver.
Sí, sí, sí.
Vale.
Vamos a ver esto...
Voy a crear la ID por aquí.
¿Vale?
Para que no me pete nada.
Muppet Podcast.
Vale.
Porque todavía no lo utilizamos.
Voy a poner un console.log solo para que no me pete el...
Muppet Podcast.
¿Vale?
Para que no me pete el...
El inter.
Vale.
Voy a quitar el debugger también.
Bueno.
Vale.
Por ahora...
Pero mira.
Fíjate.
El caso...
Bueno, ahí tenemos otros errores por ahí.
Pero luego lo miramos.
Vamos a mirar el...
¡Ay!
Me he petado la respuesta.
El console.log de la respuesta.
Perdona.
Ya voy.
Ya voy.
Bien.
Pues no el debugger mejor, ¿no?
Que un console.log.
Sí.
Es que así...
Es que no quiero que se me pare en todos los...
Ah, vale.
¿Sabes?
Es que ves...
Al final, cuando vas metiendo debuggers...
Vale.
El caso.
Queremos...
Vamos a crear la ID utilizando el Season...
Ajá.
Y el Episode.
Vale.
¿Sí?
Sí.
Vale.
Entonces...
Queremos extraer del podcast...
Season y Episode.
Estas dos keys.
iTunes Episode y iTunes Season.
Entonces, ahora mismo, ¿cómo las estamos extrayendo?
Así.
Entonces, alguien diría...
Bueno, pues para traer la siguiente...
Coges iTunes Episode...
Y haces esto.
Pero esto no funciona.
Espérate, lo de dos puntos me lo he perdido.
¿Dónde se han de dos puntos estos?
¿Dónde se han de dos puntos estos?
¿Dónde se han de dos puntos?
iTunes dos puntos.
De aquí, mirad.
Ah, de aquí.
Es con dos puntos.
Es que la key tiene dos puntos.
Vale.
Ahora, digo, joder, que estoy flipando.
Digo, ¿dónde se han de esos dos puntos?
Vale, vale.
¿Me vas a escargar de aquí?
Joder.
Vale, vale.
Ahora sí que no...
Vale, no.
Estaba focalizado del episodio y no estaba viendo la ID utilizando dos puntos.
No, claro.
Es una putada, pero la key tiene dos puntos.
Exactamente.
O sea, estas keys típicas que necesitas poner strings.
Sí.
Entonces, el problema es que dices, no, pues voy a hacer una deconstrucción de esto, ¿no?
Pero esto no funciona.
Ah, y dices, ¿y si lo asigno a otra cosa?
Pero si lo asignas a otra cosa, sí que funciona.
Ah, vale.
Ahora.
No, porque no me acuerdo quién, pero me dijo, es una putada que no funciona la destructuración
con las keys complejas y tal.
Con el string.
Y digo, sí que funciona.
Lo que pasa es que lo que tienes que hacer es reasignarle el nombre y ya está.
Vale, vale, vale.
Bueno, es un truco de nombre, un truco, pero le digo por si alguien...
Bueno, está muy bien, está muy bien, ¿eh?
Entonces, así te da un error, pero dices, no, este es el nombre de Season.
Claro, claro.
Y de esta forma, pues ya está.
Muy bien.
Y ahora abajo, en el retun, construimos, ¿no?
Aquí, sí.
Le decimos Season, Episode.
Vale, que esto tenía dentro cosas, si no me equivoco, ¿no?
Podemos hacer así.
Si no me equivoco.
Ah, sí, sí.
Era punto guión bajo text, creo que era.
Sí, sí, sí.
De hecho, es punto text.
Sí, sí, sí, sí.
Esto es importante.
Menos mal que está ahí, Carlos.
Sí, sí, sí.
Estamos ahí.
Muy bien, muy bien.
Copiloto.
Copiloto.
Ahí, copilotea.
Copiloteando.
Muy bien.
Muy bien.
Exacto.
Vale, y ese sería el ID de nuestro podcast.
ID, title, URL.
Este ya lo puedo quitar.
Pues con esta habremos mapeado la información que necesitamos.
Y sí, lo estamos mapeando.
Ah, ¿por qué?
Esto, ahora se lo pasamos.
Ah, sí, bueno, quiero decir, ya hemos mapeado.
Ah, vale, ahí.
No hemos hecho nada con este mapeo.
Vale.
Ahora, este mape podcast será lo que reciba el list of podcast value object factory.
De esta forma, cuando cree la entidad, tendrá el ID title, URL, que es justamente lo que esperamos.
Y esto lo guardamos.
Y cuando vamos aquí, con el debugger, nos peta otra cosa.
Ah, no, otra vez el debugger.
Bueno.
Vale.
No, pero ha fallado algo más.
Podcast is not a function.
Podcast punto mat.
Vale.
Porque no es un array.
Porque no es un array.
Claro.
Ah, vale.
Oh, oh.
Ah, pero esto ya estamos fuera del dominio.
Ya estamos fuera del dominio.
Vale, el tema es...
Uf, claro.
Vale, vale, pero esto tiene sentido, ¿eh?
¿Qué ha pasado?
¿Qué ha pasado?
Es que antes, voy a tirar para atrás el código que...
El caso de uso, que antes hemos toqueteado.
¿Qué ha pasado aquí?
Antes, en el caso de uso...
Esto es mi culpa, ¿eh?
Lo siento, lo siento, porque a lo mejor la gente me va a odiar.
Estamos devolviendo.
Pero lo estamos haciendo mejor, lo estamos haciendo bien.
Sí, sí, estamos haciendo bien.
Entonces prefiero que lo veamos bien a que lo hagamos regular y luego alguien diga, hostia,
pero es que aquí estáis haciendo el mapeo.
Chungo, sí.
Vale.
Como yo he dicho, oye, ¿por qué no hacemos lo del list of value objects?
Además, hay mucha gente que esto le cuesta, ¿no?
Tener un list of podcasts que es una lista de entities.
Y he dicho, hostia, pues vamos a hacerlo bien para que la gente lo vea.
Entonces, ¿qué pasa?
Por eso me he cargado la compatibilidad con el use case.
Perdón.
Entonces, antes, el use case lo que devolvía era básicamente el array.
El array.
Y ahora estamos devolviendo un objeto.
Claro, ahora lo que estamos devolviendo es un objeto, que es el list of podcast value objects.
Y esto lo que tiene es una propiedad que se llama podcast, que es donde está el array, ¿vale?
O sea, que esto es como estaba antes, que devolvíamos directamente el array.
Aquí podéis ver el map y devolvíamos directamente el array.
Pero esto ya se veía que esto no estaba bien.
Esto.
Esto no estaba bien.
Ya estaba aquí en un use case, un punto to json, un mapeo y tal, pues ya olía raro.
Entonces, como lo hemos hecho bien, ¿vale?
Lo que ahora vamos a devolver directamente es el to json.
Podríamos hacer una guarrada, pero no vamos a hacer una guarrada.
No, no, lo cambiamos en el código de la interfaz.
Podemos ir aquí a podcast y entonces, cuando ejecutemos esto, básicamente aquí lo que tenemos es un objeto.
Por lo tanto, esto en realidad es response.
Lo voy a explicar para ver algo bien, ¿eh?
Y en podcast lo sacaremos de response.podcast, ¿vale?
O sea, la respuesta básicamente es un objeto que tiene una propiedad podcast.
Para hacerlo esto mucho más fácil, pues lo dejamos aquí, podcast.
Y ya está.
¿Sí?
Perfecto.
Me imagino.
Bueno, ahora no sé qué...
Bueno, no ha fallado nada.
Porque esto está cargando y hasta que no...
Sí, el cdweb...
¡Uy, uy, uy, uy, uy, uy, uy, uy, uy, uy, uy, uy, uy, uy.
Hoy he funcionado.
Caballero, caballero.
Muy bien, caballero.
Muy bien, muy bien, muy bien.
Madre mía, mejor.
Qué increíble, ¿no?
Totalmente.
Totalmente.
Mucho lo que esperaba.
Oye, oye.
Bueno, bueno.
La gente dirá...
¿Qué le emociones.
Le emocionan con cualquier cosa.
Perdona.
Que veo los emocionados estos para que salgan por eso...
Pues así desmotivados somos.
Tío, muy guay
Para que salgan dos audios ahí
Vale, hay un error por aquí
Ah, bueno, la aquí
Gracias a Dios tenemos una idea
Vale, ¿qué ha pasado?
Nuestra alegría aquí
Que es el fuerte
Somos unos jóvenes entusiastas
Eso no nos lo pueden quitar
No sabemos de programación
Pero de alegrarnos
He quitado el debugger porque como veis
No necesitamos el debugger
Ha funcionado
Lo del course
Que se llama sorprendido
Ha funcionado el parser
Mejor de lo que esperaba
Y la verdad es que no se nos ha olvidado nada por el camino
A la primera, tío
Muy bien
Y la verdad es que parece tontería
Pero es que lo que decía Carlos
Que esto es muy sistemático
Una vez que sabes los pasos que tienes que seguir
Es cuestión de ir siguiendo el hilo
Aquí necesito un value object
Lo paso por aquí
Es verdad que aquí tienes los conceptos muy claros
Pero una vez que los tienes claros
Es pim pam, pim pam, pim pam
Y lo mejor de todo es esto
Que el día de mañana
Si cambiamos de idea
Y pasamos el repositorio
En lugar de ser evox
Pues es, no sé
Lo que sea
Un mungo o cualquier rss
Exacto
Pues nos va a ser mucho más fácil
De moverlo
Y esto testearlo
Que no vamos a hacer test
Pero esto testearlo
Está tirado
Sí
Pero tirado
Testear todo este código
Exacto
Incluso con la librería externa
De parses
Y todo ese tipo de cosas
Está tirado
Exacto
Vale
Que guay
Que guay
Bueno
Muy bien
Vale lo primero
La key
Para este errorcillo
Que nos sale por aquí
Bueno
Un warning que nos dice
Que cada child en un array
Tiene que tener su propia key
Básicamente
Ah pero me sorprende
Porque ya está puesto ¿no?
Lo tenemos puesto
Ah no está puesto
Ahí abajo
Vale
Pues esta aquí
La vamos a pasar aquí
Y vamos a dejar de tener ese error
Ya está
Ya está
Lo tenemos ahí
Luego
¿Qué podemos hacer con esto?
Habíamos dicho
De hacer un hook
Sí
Vamos a meterle un poquito
Ya que estamos aquí
Exacto
¿Qué te parece?
Si vamos a crear aquí
Una carpeta llamada UI
UI
Vale
Vamos a crear un componente
Llamado app
También
Bueno
Decir que ahora
Se acaba la parte del dominio
Sí
Creo que no necesitamos más dominio
No
Ya hemos tenido suficiente
Sí
Exactamente
Ahora es todo UI
Que por cierto
Para que veáis que es verdad
Aunque no suena
Creo que puedes quitarte el audio
No sé
¿Más dominio?
No
No
Es verdad
Es verdad
No pero que básicamente
Que sí que se escucha
Y que aquí está la duración
O sea está pillando la URL
De Xbox
Sí que funciona guay
Vale
Entonces
Cosas que podemos hacer
Pues para empezar
Pues podemos extraer todo esto
Vamos a dejar
El
React down render
Lo que va a hacer es renderizar una app
Y esto
Lo va a renderizar
En el
En el sitio este
Que me encanta Carlos
¿Vale?
Vale
Entonces todo esto
Pues bueno
Por ahora
Lo podemos pasar a un
A un componente
Muy bien
En import
Importamos primero
UI
Y ese será el componente app
¿Vale?
Y aquí en el componente app
Pues vamos a importar react
For react
From react
Y claro
Con razón
Se veía todo en blanco
Porque tenemos esto
Vamos a hacer react hooks
Sí, sí, sí
Vamos a intentar hacer react
Por supuesto
De hecho la versión que tenemos
Cargada de react
Podemos comprobar que sea
La alfa
Es la alfa
Sí, sí
Lo hicimos ya con
Vale
Básicamente esto
Es lo que vamos a devolver
Por aquí
Perdón
Que esto se me va a pasar
Por aquí
Vale
Yo necesitaría hacer
Una pequeña pausa
Así que
Si te parece
Si quieres
Ve
¿Sí?
Sí
Nos ponemos el line cut
Nos hemos currado el line cut
Y ahora vamos a poner el line cut
O sea que nos quedamos a solas
Así ahora podemos hablar
De todas las cosas
Venga
Yo voy tirando aquí
¿Eh?
Luego
Sí
Luego verás
Lo que te estará esperando
Por aquí
Vale
No me acuerdo de mucho
De los react hooks
Así que
Espero que seáis benevolentes
Con todas las cosas
Que pueden pasar aquí
¿Vale?
Pero
Que yo recuerde
Se tendría que utilizar
Un useState
Y esto
Que estamos haciendo aquí
Una llamada
En caso de uso
De hecho vamos a hacer dos cosas
Vamos a hacer la versión sencilla
Que sería
Llamar
El useState
Y luego igual
Podemos intentar hacer
Un custom hook
Que llame
Para llamar al dominio
Que será interesante
¿Vale?
Entonces
Con el useState
Viene
Un array
Con dos elementos
Uno que sería
Pues el estado en sí
Podemos llamar
Podcast
Y asegurado
El segundo sería
SetPodcast
Esto
Por ahora
Vamos a decirle
UseState
Y le pasamos
Y le pasamos
El estado inicial
Que el estado inicial
De podcast
Pues puede ser
Puede ser
Null
¿Vale?
Entonces
Esto
También podemos utilizar
Un
UseEffect
¿Vale?
El useEffect
Básicamente es un efecto
Que hace cuando se monta
El componente
Vamos a hacer
Vamos a hacer un useEffect
Que hay que pasarle
A una función
Que será la que se ejecute
Y
Le vamos a decir
¿Sí?
¿Ya?
¡Wow!
¡Qué rápido!
El useEffect
Lo que le podemos pasar
Es un segundo parámetro
Que se ejecutará
Cuando eso
Cambie
Entonces
Si se pasa
En el ribacio
Entonces se ejecuta
Una vez
Que es la primera vez
Que se monta el componente
Esto es
Esta es la forma
De simular
El componente
Estoy haciendo
Un hook
Fácil
Por ahora
Vale
Y a lo mejor
Luego podemos
Hacer un custom hook
Con el dominio
Vale
Solo para que
Veamos como
Vale
What the front
Esto por aquí
Pum
Hacemos que esta función
Sea asíncrona
No
No se puede
Ah ¿No se puede?
No se puede
¿En serio?
En serio
Ostras
De hecho
Hazlo para que falle
Y así lo ve todo el mundo
Ostras vale
Que fuerte
Se puede hacer
Una wave
De esto
Ah
Te fastidia
Te fastidia
Claro
Es que es una limitación
De
No tienes que
No
Como claro
Los use effects
Lo que devuelven
Son la función
De
Desmontado
Claro
Y una función asíncrona
Siempre devuelve una promesa
Y no puedes
Devolver una promesa
Con función de desmontado
Que grande
Si si si
Bueno chicos
Pues nada
Bueno
Ahora que la he explicado
No funciona
Spoiler
Spoiler
Ya que fuerte
No eso
Que lástima
Si
Pues alguna cosa
Tendrán que encontrar al respecto
Porque si no
Están trabajando en ello
Están trabajando en ello
Antes de que se me olvide
Voy a importar el dominio
Domain
El dominio
Claro
El dominio
Hablando de un poco
De todo
¿Dónde lo tendríamos que importar?
Realmente
No en cada fichero que utilicemos
Claro
Sino que igual tendría sentido
Utilizar la nueva API de contexto
Que igual podríamos hacerlo
Y utilizar el hook
De useContext
Para obtener el dominio
De ese contexto
¿Vale?
Entonces
Vamos a hacerlo así
Ahora si quieres
Y después lo podemos
Sí, igual es más interesante
Si vemos el custom hook
Porque luego a la hora
La verdad
Si tenemos un custom hook
Para utilizar el dominio
Ya no he editado el contexto
Vale
O sea
Si tenemos ahí un useDomain
UseDomain
Y le pasamos el caso de uso
Vale
Podcast
Y esto
SetPodcast
Pues
Podcast
Y podcast
Ya será
Directamente
El array
Y esta será
De verdad
Vale
Vamos a utilizar
Que no lo he hecho
La imagen esta
Que había preparado por aquí
Esta
Import ya no sirve
Vale
La imagen
Con esos
Así al menos
Se verá algo
Vale
Y esto que es lo que hace
Esta imagen es
Para ponerla arriba
¿No?
Claro
Si podcast
Y podcast
¿No?
Porque si no
Esto no va a petar
Entonces
Se supone que esto
Nos va a enseñar la imagen
Y
Cuando tengamos el podcast
Pues
Haremos
El mapeo de los podcast
Y nos enseñará los podcast
De esta forma
Veremos algo
Mientras esto ocurre
El useEffect
Se ejecutará
Cuando se monte el componente
Llamaremos al caso de uso
No le necesitamos
Ningún parámetro
Y cuando termine
Actualizaremos el estado
De podcast
Con los podcast
Y esto ya
Llegará aquí
Y esto debería estar funcionando
A ver
Up
Vale
Uy
Ya está
Bueno
Vamos a ver como
One down front
Pum
Y ya lo tenemos
Y ya lo tenemos
Obviamente
El estilo
No es el mejor
Antes de que la gente
Nos mate
Igual
Podríamos hacer
Lo voy a hacer en CSS
Porque total
Lo voy a hacer en una sola
Línea
Vamos a meterle
El family
Que sea el del
System
Margen 0
Nos están pidiendo
Que hagamos una pequeña introducción
A los hooks
Vale
De hecho
Podríamos recomendar
Directamente
¿No?
Que tenemos el podcast
De los hooks
Sí
Tenemos un
El segundo
Capítulo
De nuestro podcast
De what the front
Precisamente
Mira
Está aquí
El react hooks
Que son
Y si vale la pena
Al hype
Vale
Pero básicamente
Los hooks
Es una forma
De poder gestionar
Bueno
Iba a decir
De gestionar el estado
Pero es mucho más
Más que eso
Básicamente
Es que todo lo que te proporcionaba
Un componente
Hecho con una clase
En react
Ahora lo podrás hacer
En una función
Gracias a los hooks
Que son
Básicamente
Puntos de captura
Que tienes
De tu componente
Desde el estado
Hasta los ciclos de vida
De cuando se monta
Y se desmonta
Gracias al use effect
Tiene algunos interesantes
Como el use context
Para utilizar el contexto
Todo lo que puedes hacer
De una clase
Pues ahora lo puedes hacer
De forma funcional
Gracias a los hooks
Exactamente
¿Algo más que...?
No
Muy bien explicado
La verdad
De hecho
Es lo que decías
Tenemos el podcast
Que ya está publicado
De los hooks
Y lo explicamos
Y escúchatelo
Está guay
Hay un debate
Porque como hay un debate
Explicamos las cosas buenas
Y malas de los hooks
Exacto
Así que...
Ah mira
Que esto lo teníamos pendiente
Habíamos dicho
Habíamos dicho
De si esto
A ver si funcionaba
Ah sí
¿No?
¿Esto sería así?
Oh
Ya está
Ya sabemos que no funciona
¿No?
Ah vale
Vale
No sé
Pues leí algo
Sí, sí
Flex
Align
Content
Center
Vale vamos a...
Como no funciona
Vamos a tener que quitarlo
Hombre
Contor dolor de mi corazón
Item
Center
No sé
Y
Me parece que no funciona
Ni flores
Ay no
Perdón
Perdón
No lo estamos cargando
Es que no estamos cargando
Los estilos
Vale
Esto lo vamos a cargar de aquí
Import
From UI
Styles
En el...
Nosotros estamos utilizando
Como bundle
El Swift Bundler
Que es una herramienta interna
Nuestra
¿Vale?
Sí
Bueno que no es interna
Que es código abierto
Y es un comentario
Que me hizo ayer
Bueno el otro día
Me lo hizo Juanma
De
¿Por qué no hay más tipos
De loaders?
De loaders
Ah amigo
¿Vale?
Solo tenés dos loaders
Con esta herramienta
Que es de CSS
Y de JavaScript
Punto pelota
Y está hecho por diseño
Realmente
Es una cosa que podemos hablar
De cómo aumentar los loaders
Y demás
Pero la idea que tenemos
Es básicamente
Cuanto menos nos acoplemos
A la herramienta
Que hay por debajo
Y menos magia negra
Hagamos con el Swift Bundler
Más fácil va a ser
La evolución de nuestro código
Moverse el día de mañana
De esa herramienta
Exactamente
A ver yo es que diría
Es verdad que es de código abierto
Pero es verdad que no es muy extensible
Pero porque
Nosotros es una herramienta
Que utilizamos en Shifted
Y no queremos que se pueda extender fácilmente
Exactamente
Porque queremos que todos
Digamos tengan la misma experiencia
De desarrollo
Que no haya un equipo
Que utilice un loader
Y otro
Entonces
Pero
Pero creo que
Puede tener sentido
O sea
Quiero decir
Hay librerías de código abierto
Por ejemplo
Muchas las hace Jason Miller
Que son convenciones
Y esto es lo que hay
Es como Karmatic
O Micro Bundle
Sí
Micro Bundle se llama
Micro Bundle
Pero creo que
Es bastante limitado
Su extensión
De lo que se puede hacer
Bueno
Es una filosofía
Es una filosofía
¿Quieres cero config?
Ha pillado
¿Ha funcionado?
La ha pillado
La ha pillado
¿Ha pillado?
¡Ojo!
¡Ojo!
No
¡Dios!
¡Dios!
Bueno
Se me ha olvidado aquí un flex direction
Pero sí que lo ha pillado
Sí que lo ha pillado
¡Qué grande!
Creo que es con un
Y...
Ya está
Bueno
Oye
No está mal
¿No?
Sí
Voy a estelar los audios
Para que pille aquí todo el
100% también
Bueno
Bueno, muy bien
No está mal ¿No?
Eh, no lo he pillado
¿Cómo que lo he pillado?
Pone 100% pero no está
Sí, sí
Sí, lo que pasa es que
Ah, que está puesto
Sí, he puesto un límite
Vale, vale
Lo que límite
Lo tenía que haber puesto
O sea, la imagen
Sí que es verdad
¿Dónde he puesto el límite?
No lo he puesto
Sí, sí
Sí lo he puesto
No lo he puesto
No lo he puesto
Sí, sí
Es verdad
Cierto
No lo he puesto
Que quería poner
Entonces esto que es el margin auto
Bueno, al menos para que esté un poco más presentable
Tampoco es
Oye
Estoy haciendo con mi vida
Oye
¿Por qué no me dicen nada, Carlos?
Estoy diciendo aquí tonterías
Y no
Vale, ahora
Vale
Tampoco es nada del otro mundo
Pero ya se ve un poquito
No vamos a hacer el response sin nada
Esto ahora mismo, ¿no?
Esto ya lo haremos
Bueno, de hecho
A ver
Más o menos
Bueno
Está bien, está bien
Perfecto, perfecto
Vamos a poner menos
Más o menos
Ya está
Ya está
Más o menos
Responsive
Mira, ya está
Ya se adapta
No sé si es lo que quiere
Pero
El que no se consuela porque no quiere
Oye, bueno
Pero ya ha quedado bastante
Está bien, está genial
Más bonito
De como estaba antes
Sí, sí, sí
250 y ya no queda tan grande
Vale
Bueno, pues esto está funcionando el hook perfectamente
Porque básicamente
Está haciendo lo que tiene que hacer
Vamos a hacer aquí una folder con hooks
Sí
Y hacemos
Es que mira
Es que este pues es muy guay este hook
El del dominio
Sí
Este lo he estado pensando, ¿ven?
A ver
¿Te digo las ideas o tienes tú una idea de cómo?
Hago yo una idea
Vale, dale cañita
Hago yo una idea
Y podemos hacer las dos implementaciones
Sí, sí, sí
A ver si me sale
¿Cómo le llamo?
Use domain
Use domain
Vale
No hay que importar real, ¿no?
No
Sí
Sí
Bueno, si vosotras
Ah, claro
El use state
Y el use effect
Tendrías que utilizar todo el dominio
Esa es mi idea
No utilizar el use effect
Esa es mi idea
Vale, pues entonces sí que me lo tienes que explicar
Porque entonces no
Ah, bueno
No sé, no sé
A ver si funciona, ¿eh?
O sea, es que esto es muy robo
Esto es muy robo
Bueno, lo bueno que tiene que ser robo
Claro, no sé
A mí mi idea
Explorar ideas
Use domain
A mí me gustaría pasar el use case
Directamente
¿El use case la función?
Sí
Ah, vale
No, no
El string
El string
Vale
Exacto