Curso Intensivo de Remix y Storyblok

Y también, en primer lugar, necesitamos presentarnos, quiénes somos. Así que no debería olvidarlo. Mi nombre es Arisa. Trabajo en Storyblock y Storyblock es el CMS principal y por eso hoy organizamos el masterclass Crash con Remix y Storyblock.

Hoy me acompaña Facundo. Así que te dejaré que te presentes, Facundo. Claro. Bueno, hola a todos. Mi nombre es Facundo. Trabajo con Arisa. Somos parte del equipo de Relaciones con Desarrolladores en Storyblock. Lo que hacemos en el equipo de Relaciones con Desarrolladores es tratar de ayudar a los desarrolladores a obtener lo mejor del producto de Storyblock, ayudarlos a integrar Storyblock en sus proyectos e intentar facilitar su trabajo creando tutoriales, guías o presentando masterclasses como el que vamos a tener hoy.

Para no perder más tiempo, si todos están listos, primero vamos a mostrar algunas de las fuentes que vamos a utilizar. Esta es también la fuente que pueden encontrar aquí, una vista previa del sitio web final. Aquí pueden encontrar un enlace al repositorio de GitHub. Y esto es lo que les estoy mostrando ahora mismo. Estoy aquí, déjenme compartirlo con Zoom. Y con Discord. Les recomendaría que echen un vistazo a este repositorio de GitHub también. Siéntanse libres de hacer un fork si les parece una forma más segura. O si prefieren seguir uno por uno si quieren, digamos, seguir cada paso que vamos a mostrar. Y después de eso, les mostraré la introducción. De las diapositivas de remix, y para no perder más tiempo.

Entonces, al principio, diría que menos de la mitad del comienzo de este masterclass sería una base de conocimientos. Vamos a compartir con ustedes y mostrarles un par de diapositivas para proporcionarles el conocimiento fundamental. Esto será bastante útil para la parte práctica restante. Más de la mitad del resto de este masterclass será práctico. Vamos a mostrarles cómo pueden, en primer lugar, aprender haciendo.

Entonces, vamos a construir juntos una aplicación de blog de Storyblock con Remix. Al principio, voy a compartir con ustedes la introducción a las diapositivas de Remix. Así que vamos a verlo. Algunos de ustedes ya tienen experiencia con Remix, según lo que me han contado o han probado o han comenzado a interesarse. Vamos a explicarles rápidamente qué es Remix y qué características ya están implementadas y pueden usar. Aquí está la información básica. En primer lugar, Remix es una pila completa, no solo un marco de frontend. Le permite centrarse en construir una interfaz de usuario mucho mejor, en mi opinión, y también considera mucho la experiencia del desarrollador. Vamos a ver esto juntos durante la parte práctica de este masterclass, así como en la parte de conocimiento aquí. Funciona de manera rápida, fluida y resistente. No solo es una experiencia de usuario rápida y fluida, como escribí aquí, sino que también insisto en que es una UX y DX realmente rápidas, fluidas y resistentes.

Entonces, aquí hay una versión muy breve de lo que es Remix en una diapositiva. Es en realidad un marco basado en React. Si ya tienes el conocimiento fundamental sobre React, ya puedes entender cómo funciona Remix. Porque puedes transferir tus conocimientos de React directamente a Remix. Es una pila completa. Entonces, si algunos de ustedes se han presentado como desarrolladores de pila completa, probablemente Remix sea una de las mejores opciones. Porque si tienes el conocimiento fundamental de la pila completa, y Remix es un marco de trabajo de pila completa, entonces es la combinación perfecta. Y sirve el contenido y las páginas con la representación del lado del servidor. Eso es algo que a veces me preguntan en conferencias, cosas así. En realidad, eso es algo en lo que no necesitas pensar demasiado, como diferenciar el contenido prioritario primero y el contenido no prioritario o al menos accesible al final, cosas así. No hay complicaciones. Sirve el contenido del lado del servidor con la representación del lado del servidor. Y Remix utiliza la API de páginas web. Al usar esto, me refiero al lado de Remix, por lo que Remix puede, diría que tiene la lógica de, en primer lugar, la obtención de solicitudes y respuestas, ¿verdad? Estas solicitudes y respuestas de las obtenciones se pueden utilizar donde sea necesario en el futuro. Por eso, en comparación con el otro enfoque que tal vez te resulte familiar, probablemente solicitar a través de la URL, en lugar de eso, al usar la API de Webfetch, hace que Remix sea bastante sólido para comunicaciones rápidas y resistentes. Y es de código abierto, eso también es otro punto importante. Aquí están las características.

Y diría que debemos prestar atención, digamos, a cuántas variaciones de rutas proporciona Remix. En primer lugar, más adelante les mostraré cuántas variaciones tienen. Pero en Remix, puedes elegir la mejor manera de organizar las rutas. En primer lugar, utilizará la jerarquía del sistema de archivos para manejar las URL. Y, por supuesto, te darás cuenta de que, bueno, si usas solo la jerarquía del sistema de archivos, ¿no significa eso que tus editores de contenido, o tus clientes, que van a mantener el contenido e incluso quieren tener el poder o el control para estructurar ese tipo de rutas por sí mismos, no podrán hacerlo? Pero esta pregunta se responderá más adelante cuando te presentemos la opción del CMS y también en la parte práctica. Como dije antes, Remix tiene muchas formas de manejar el enrutamiento. Si, por ejemplo, utilizas rutas de comodín, que es uno de los enfoques que vamos a mostrarte y también a utilizar en este masterclass, podrás crear la lógica dinámica para quien vaya a mantener el contenido para cambiar y crear rutas anidadas incluso desde la interfaz de usuario, lo que significa que se proporcionará desde la interfaz de usuario del CMS sin cabeza. Tienes muchas opciones, así que debes elegir la que mejor se adapte a tus casos. Pero estoy aquí para presentarte Remix, no solo para mostrarte el sistema de enrutamiento. Pero si vas al sitio web de Remix, puedes ver una demostración bastante buena allí, y eso es lo que he utilizado para las capturas de pantalla aquí. Aquí, divides el contenido con el sistema de archivos anidado. Y luego, al dividir estos componentes, por ejemplo, obtienes el componente resaltado en verde con el error de ventas allí. Pero el panel lateral de la izquierda debería renderizarse y tus usuarios no experimentarán que toda la aplicación se bloquee y solo vean el spinner de carga. También puedes hacer cosas similares para el resto de los componentes para que tus usuarios tengan una experiencia mucho mejor en lugar de ver que toda la aplicación se bloquea solo por un componente pequeño, por ejemplo, como este componente de factura que se colapsó. También vamos a ver y jugar juntos en la parte práctica para manejar las páginas y los componentes anidados. Al combinar el CMS sin cabeza aquí, tendrás más control sobre cómo crear el diseño y la estructura para una historia, es decir, este contenido, en lugar de mantenerlo en el nivel del código fuente, para que tengas más tiempo para realizar tareas relacionadas con la codificación en lugar de realizar tareas no relacionadas con la codificación.

Aquí hay un par de elementos a los que quiero prestar atención, como Cargadores y Acciones. También los veremos en el nivel del código fuente con más detalles, pero en primer lugar, Loaders es la función que ayuda a trabajar con la representación del lado del servidor. Esa es en realidad la parte central clave, cómo puedes servir el contenido con la representación del lado del servidor y gestiona la solicitud HTTP GET. Por lo tanto, combinará el trabajo con otra función o API que proviene directamente del sitio de Remix, y con la combinación, podrás comunicarte mejor con la respuesta y la solicitud. Y también está la función de acción. Significa modificar y mutar datos. Como expliqué al principio, Remix es un marco de trabajo de pila completa. Por lo tanto, ya tienes o tendrás muchas API o funciones integradas que puedes llamar y usar en el mejor lugar donde quieras gestionar. También mencionamos el manejo de errores. Voy a omitir eso, pero por supuesto, vamos a compartirlo, o ya tienes acceso a las diapositivas desde la tabla de contenido de Notion que compartimos. Te recomendaría que lo revises más adelante. Aquí están las fuentes. Y antes de pasar al siguiente contenido, que será la introducción al diseño atómico, ¿hay alguna pregunta rápida? Si es así, estaremos encantados de responder. ¿Facundo, tienes alguna pregunta que haya surgido de los mensajes? No veo ninguna. Lo que veo son muchos mensajes de presentación, quiero decir, la gente, muchas gracias por compartir todos sus detalles, todas sus historias. Arisa y yo disfrutaremos mucho leyendo de dónde se unen y qué hacen y en qué están interesados, en Remix, en Storyblock. Así que muchas gracias por compartir todo.

Lo que iba a sugerir es que, quiero decir, para no perder el hilo de sus mensajes y sus detalles, si desean contactarnos, siéntanse libres de escribir los mismos mensajes en el canal de Discord que tenemos para el masterclass, o pueden contactar a Arisa o a mí en Twitter donde estamos disponibles. Así que si desean chatear después del masterclass, siéntanse libres de hacerlo ya que el chat de la llamada de Zoom desaparecerá después de la llamada. Pero sí, quiero decir, nuevamente, gracias por compartir todos los detalles y en caso de que tengan alguna pregunta, siéntanse libres de hacerla en el chat que Arisa o yo las responderemos.

También nos aseguraremos de tener publicaciones rápidas después de un par de diapositivas o después de unos minutos en la parte práctica. Así que no se preocupen, no será una sesión de tres horas sin descanso. Tendrán un par de descansos para tomar café o hacer una pausa rápida. Así que no se preocupen por eso. Y también nos aseguraremos de responder sus preguntas si tienen alguna.

Bien, si no hay más preguntas, ¿oh, se compartirá el enlace de la grabación? Sí, creo que sí, Lara nos ha informado que subirá la grabación y se compartirá con nosotros. Así que no se preocupen por eso.

De acuerdo, diría que le pediré a Facundo que se encargue de esta parte del diseño atómico. Luego, después de eso, tendremos una breve sesión de preguntas y respuestas de cinco minutos si hay algunas preguntas. Así que dejaré de compartir mi pantalla y Facundo puede comenzar a compartir su pantalla. Claro, creo que hay alguien, ah sí, ahí vamos. Increíble cómo compartieron la información entre ustedes. No, porque alguien estaba pidiendo el enlace de Notion pero ahí vamos, increíble. Genial, ahora tomaré la iniciativa. Avísenme si ven mi pantalla. Sí, puedo verla. Increíble, genial. Así que hablemos un poco sobre el diseño atómico, probablemente si has trabajado con sistemas de diseño o si estuviste involucrado en el diseño o creación de componentes para tu organización o tus proyectos, probablemente estés muy familiarizado con este concepto. La idea es repasar algunos conceptos breves relacionados con el principio de diseño atómico, porque trabajaremos con ideas similares, diría yo, durante el masterclass, en la parte práctica del masterclass porque Starblock trabaja con un enfoque de componentes que creo que Alisa mencionará mejor más adelante.

Pero la idea es familiarizarse con esta teoría y esta metodología, el principio de diseño atómico es una metodología para crear sistemas de diseño. La idea o el nombre proviene de la, bueno, la tabla periódica de elementos, quiero decir, si estás familiarizado con la química, puedes ver aquí todos los diferentes elementos que podemos tener en una tabla periódica. La idea es que podemos crear elementos, elementos HTML o grupos de elementos HTML que podemos reutilizar en diferentes partes de nuestras páginas y en diferentes páginas de nuestro sitio web. Así como se llama el principio de diseño atómico, tendremos la parte más pequeña que podemos tener y que podemos reutilizar en diferentes partes de nuestros proyectos que se llamará átomos que serán etiquetas HTML con un estilo determinado.

Como puedes ver en esta diapositiva, podemos tener una etiqueta con un texto determinado, con un formato determinado, podemos tener un campo de entrada y un botón y cada uno de ellos será lo que llamaremos un átomo. Estos átomos, como puedes ver nuevamente, en la tabla periódica de los elementos, esta imagen genial trata de mostrarte las diferentes etiquetas HTML que podemos usar en cualquier página web. Así que puedes identificar los diferentes átomos que mencionamos o que estamos usando. Y esto, quiero decir, si agrupamos estos átomos, si tomamos esta etiqueta, este botón y este campo de entrada que mencioné antes, lo que podemos crear es lo que llamamos la molécula.

Una molécula es el grupo más pequeño de átomos. Como puedes ver aquí, estamos usando nuevamente, una etiqueta, un campo de entrada y un botón para crear una pequeña caja de búsqueda. Entonces, esto es una parte de la aplicación o proyecto que podemos usar en nuestros sitios web o nuestras páginas web para agregar funcionalidad y usarla para buscar contenido en nuestro sitio web. Si vamos a la misma tabla, la misma imagen, veremos que podemos identificar los diferentes elementos HTML o átomos que incluimos y el grupo de estos elementos HTML será una molécula. Entonces, cuando tenemos más de una molécula o queremos agrupar moléculas para crear un grupo más grande de elementos, podemos hablar de organismos.

Los organismos son grupos de moléculas, como puedes ver. En el ejemplo, podemos tener una barra de navegación, por ejemplo, donde mostramos el logotipo de nuestro sitio web. Podemos usar esta caja de búsqueda que creamos antes y luego podemos tener otros enlaces que apuntan a diferentes páginas de nuestro proyecto. Si hablamos de todos estos grupos de elementos, o átomos, o cómo decirlo, los puntos clave del principio de diseño atómico. Por qué deberíamos seguir el principio de diseño atómico, o por qué deberíamos seguir este enfoque. Como mencionamos antes, podemos crear bloques reutilizables, moléculas, organismos o átomos reutilizables en las diferentes partes de nuestras páginas y en las diferentes páginas de nuestro sitio web. Podemos gestionar y organizar estos componentes en un sistema. Podemos crear un sistema de diseño para mantener los diferentes elementos que vamos a reutilizar en las diferentes partes de nuestras páginas. Lo que nos brindará es escalabilidad. Porque si tenemos un lugar centralizado donde gestionamos todos los diferentes elementos que podemos reutilizar en las diferentes páginas de nuestro sitio web, será más fácil escalar. Y también será más fácil de mantener. Si queremos aplicar un cambio a uno de los elementos que estamos usando en todas nuestras páginas, solo necesitamos ir a un lugar y aplicar el cambio que queremos allí. Y eso se aplicará a todos los lugares donde estamos usando estos elementos.

Compartimos algunas fuentes con ustedes. Si van a las diapositivas, pueden ver un video. En el segundo enlace, hay un video que les explicará un poco más a fondo sobre el principio de diseño atómico con una buena explicación. El primer enlace es el, quiero decir, el creador del principio de diseño atómico, un artículo de blog que se explica con más detalles de dónde proviene la idea y cómo lograr la idea de cómo crear sistemas de diseño utilizando el principio de diseño atómico. Y el último enlace es el libro que creó Brad Frost, el creador del principio de diseño atómico, en caso de que deseen leer el libro real.

Así que esa fue una breve introducción al principio de diseño atómico. Una idea a tener en cuenta cuando trabajemos con Starblocks, verán que tiene sentido porque vamos a crear componentes reutilizables, componentes anidables reutilizables que podemos agrupar en componentes más grandes y que podemos reutilizar en diferentes partes de nuestras páginas. Bueno, Storyblock es un sistema de gestión de contenido sin cabeza.

Lo que queremos presentar con Arisa es una pequeña introducción a lo que es un CMS sin cabeza. Para que te familiarices con el concepto, las ideas, y tengas la posibilidad de ver las diferencias con los sistemas de gestión de contenido tradicionales o monolíticos. Para hablar de eso primero, necesitamos definir qué es un CMS. Un sistema de gestión de contenido es una aplicación que se utiliza para crear y gestionar contenido digital. Entonces, lo que tendrás en tus proyectos es una interfaz de administración que se utilizará para crear contenido. Digamos, crear noticias, crear artículos, crear publicaciones de blog, crear productos con los detalles de los productos, crear cualquier tipo de producto que desees tener y un editor o un comercial creando cualquier tipo de usuario. Quiero decir, no tiene que ser un desarrollador creando el contenido. La idea es proporcionar una interfaz fácil de usar para los diferentes tipos de usuarios que tendremos en nuestro equipo para crear el contenido que mostraremos en nuestros proyectos. Con esta interfaz de administración podremos crear el contenido. Esta interfaz de administración se integrará con toda la plataforma llamada CMS monolítico o CMS tradicional. Este CMS integrará la interfaz de administración con una base de datos donde almacenaremos el contenido que mostraremos en nuestros proyectos. Y luego tendremos una capa de vista que será la forma en que presentaremos el contenido que estamos creando.

Tal vez estés familiarizado con algunos de los CMS tradicionales o los CMS monolíticos porque hay algunos de ellos que son conocidos en el mercado y se han utilizado durante varios años. WordPress es un sistema de gestión de contenido tradicional, Joomla o Drupal, pero estos sistemas de gestión de contenido tienen una limitación, digamos. El problema es que si nos fijamos en el mismo gráfico que estábamos viendo antes, como puedes ver, tenemos todo en el mismo lugar. Tenemos la interfaz de administración para crear el contenido. Tenemos una integración con todos los elementos diferentes. Tenemos una base de datos donde almacenamos el contenido y tenemos una capa de vista. El problema que tienen estos sistemas de gestión de contenido es que la tecnología que vamos a utilizar para presentar el contenido está definida por los creadores del CMS, y tenemos que ceñirnos a una determinada tecnología o un determinado lenguaje de programación para presentar el contenido que estamos creando. Por ejemplo, si usamos WordPress para crear el contenido y gestionar nuestro sitio web, estaremos limitados a usar PHP para mostrar ese contenido así que cada vez que queramos mostrar el contenido que nuestros editores están creando, el único lenguaje de programación que podremos usar es PHP porque, como en el CMS tradicional, todos los componentes o las diferentes partes del CMS están incluidos juntos en la misma plataforma, tenemos que ceñirnos a la decisión de los creadores de la tecnología que decidieron usar para presentar el contenido. Pero ¿qué sucede si queremos mostrar el contenido utilizando una tecnología diferente o un enfoque diferente? Digamos que queremos crear contenido y queremos mostrar ese contenido no solo en sitios web sino también en aplicaciones móviles o aplicaciones de escritorio. Entonces, si ese es el caso, ahí es donde aparece el concepto de CMS sin cabeza. Un CMS sin cabeza es un sistema de gestión de contenido donde el repositorio de contenido está separado o desacoplado de la capa de presentación. Hace algunos años, un grupo de desarrolladores propuso la idea de tener un sistema de gestión de contenido con una interfaz de administración para facilitar el trabajo de los editores y comercializadores de contenido, los usuarios para crear contenido. Y por otro lado, poder presentar ese contenido en diferentes canales y ofrecer una experiencia omnicanal. Como puedes ver, podemos tener una interfaz de administración donde creamos el contenido. Este contenido también se almacena y gestiona en una base de datos. Pero esta base de datos, o el lugar donde almacenamos el contenido que estamos creando, tenemos una API que podemos usar para conectar desde diferentes canales y utilizando diferentes tecnologías. Por ejemplo, podemos crear sitios web con diferentes lenguajes de programación o frameworks. También podemos utilizar otras tecnologías o plataformas como plataformas de comercio electrónico. También podemos mostrar el contenido en aplicaciones móviles utilizando Android o iOS, o también podemos mostrar el contenido en dispositivos inteligentes como el dispositivo Amazon Alexa, por ejemplo, o un reloj inteligente. Podemos mostrar el contenido que estamos creando en Starblock, utilizando diferentes plataformas y canales. Esa es principalmente la idea detrás del CMS sin cabeza. También podemos tener integraciones personalizadas con otras plataformas, porque al no limitar la forma en que podemos usar para presentar el contenido y utilizar el contenido, también podemos integrar este CMS sin cabeza con otras plataformas. Pero la idea principal del CMS sin cabeza es que podemos crear el contenido y presentar ese contenido de la forma que prefiramos, con la tecnología que prefiramos, en los dispositivos que queramos.

Entonces, ¿cuáles son las principales diferencias entre un CMS monolítico y un CMS sin cabeza? Que estamos desacoplando el front-end y el back-end, lo que dará flexibilidad a los desarrolladores para utilizar el enfoque que prefieran y poder mostrar el contenido que se está creando. Estamos proporcionando una excelente experiencia tanto para los desarrolladores como para los usuarios. Me refiero a la experiencia del desarrollador, porque los desarrolladores podrán seleccionar las tecnologías que deseen utilizar para su proyecto y mostrar el contenido, y la experiencia del usuario también será excelente, porque vamos a utilizar, vamos a proporcionar esta capa de administración o estas herramientas para crear el contenido que facilitarán el trabajo para ellos.

Finalmente, como mencioné antes, podemos proporcionar experiencias omnicanal, porque el contenido que creamos una vez en el sistema de gestión de contenido sin cabeza se podrá mostrar en diferentes canales, aplicaciones móviles, aplicaciones de escritorio, sitios web, etc. Hoy vamos a utilizar Storyblock para nuestro proyecto y la masterclass. Bueno, porque Arisa y yo trabajamos en Storyblock, pero no solo por eso, sino también por otras características y funciones geniales que Storyblock ofrece en comparación con otros sistemas de gestión de contenido sin cabeza que podrás descubrir durante esta masterclass.

Pero para resumir, las dos principales diferencias entre Storyblock y otros sistemas de gestión de contenido sin cabeza que existen en el mercado son que desde el punto de vista del usuario, estamos proporcionando una excelente experiencia de usuario porque las personas que van a crear el contenido tendrán un editor visual en tiempo real. Podrán crear el contenido y ver cómo se verá el contenido que están creando antes de publicar cualquier tipo de contenido, antes de lanzar cualquier versión de la aplicación. Lo verás más adelante, pero tendremos esta vista previa en tiempo real donde si cambias el contenido o creas contenido, verás cómo se verá tu sitio web con ese contenido que estás creando.

Y desde el punto de vista del desarrollo, lo genial de Storyblock es que utiliza un enfoque basado en componentes para crear, gestionar y guardar el contenido. Por lo tanto, podremos crear diferentes componentes reutilizables relacionados con el Principio de Diseño Atómico que vimos antes. Y estos componentes podrán crear la estructura del contenido que utilizaremos para gestionar estos diferentes componentes en las diferentes partes de nuestro sitio web. Y podremos anidar estos componentes y reutilizarlos en diferentes partes de nuestras páginas y en diferentes páginas de nuestro sitio web.

Para darte un ejemplo, podremos crear en Storyblocks un componente llamado Hero con las propiedades que queremos que los usuarios y los editores de contenido establezcan los detalles y creen el contenido para ellos. Y por otro lado, podremos vincular estos componentes con su representación visual. Así que, para darte un ejemplo, hoy vamos a trabajar con Remix. Remix es un framework basado en React. Por lo tanto, podremos crear componentes React que podemos vincular con estos componentes de Storyblock para que las diferentes propiedades que vamos a establecer en Storyblock para estas estructuras de contenido, podamos ver cómo se verán en el editor visual en tiempo real utilizando esta vista previa que utilizará la lógica del front-end de nuestra aplicación. Como mencionamos antes, podremos crear un front-end utilizando la tecnología que prefiramos. Hoy vamos a usar Remix y verás que podrás vincular los componentes en un Storyblock para crear y gestionar las estructuras de contenido y luego la representación visual de ese componente utilizando componentes React en este caso. Aquí tenemos una animación rápida donde puedes ver cómo se ve el editor visual. Me refiero al panel de la derecha con las diferentes propiedades de nuestros componentes y estructuras de contenido y luego en el panel de la izquierda el editor visual en tiempo real, me refiero a la vista previa del contenido que estamos creando y la lógica que estamos utilizando para previsualizar este contenido se conecta al verdadero front-end de tu aplicación. Arisha nos contará un poco más sobre eso más adelante y podremos trabajar con eso y probarlo durante esta masterclass de hoy.

Así que aquí tenemos el mismo gráfico que vimos antes pero con los detalles relacionados con StoryBlock en sí. Tendremos una interfaz de administración que en este caso será la URL app.stirblock.com Me refiero a la plataforma, StoryBlock fue creada usando Vue que es la aplicación que vamos a usar para crear y gestionar el contenido. Luego, StoryBlock proporciona tres tipos diferentes de APIs. La API que vamos a usar para consumir el contenido se llama API de entrega de contenido, que es una API REST. Tendremos la API de gestión en caso de que queramos editar o crear contenido desde fuera de una aplicación de StoryBlock. Y luego tendremos una API de GraphQL en caso de que queramos utilizar GraphQL en nuestros proyectos. Y como mencionamos antes vamos a tener diferentes canales, frameworks, Perdón, lenguajes de programación que podemos usar para presentar el contenido que estamos creando en StoryBlock de diferentes formas.

StoryBlock, me refiero, como equipo de relaciones con los desarrolladores estamos tratando de facilitar el trabajo de los desarrolladores para crear las aplicaciones utilizando StoryBlock y conectar StoryBlock en sus proyectos. Una de las cosas que hacemos y creamos en el equipo de relaciones con los desarrolladores son nuestros SDKs y bibliotecas que puedes utilizar para conectarte de una manera más fácil a StoryBlock. Bueno, me refiero, además de tutoriales, guías, hacemos transmisiones en vivo, creamos videos, creamos proyectos de ejemplo, pero una de las ideas que tenemos y en la que trabajamos es un SDK o diferentes SDKs de las diferentes tecnologías porque, nuevamente, StoryBlock es un sistema de gestión de contenido sin cabeza, por lo que puedes utilizar cualquier tecnología que prefieras. Como Remix es un framework basado en React, hemos creado un SDK de React que facilitará el trabajo de integrar StoryBlock en tus proyectos, y con algunas funcionalidades que se proporcionan mediante esta biblioteca de React de StoryBlock, podremos no solo consumir el contenido que proviene de StoryBlock, sino también mostrar ese contenido y luego conectarnos a esta experiencia de edición visual en tiempo real. Te mostraré algunos ejemplos aquí.

Como puedes ver, este paquete de React de StoryBlock que vamos a instalar que veremos más adelante, Arisa nos mostrará cómo instalar y configurar eso en nuestros proyectos. Bueno, llamaremos a la instalación de npm de StoryBlock React que nos proporcionará toda la funcionalidad del SDK de StoryBlock. Tendremos una función de inicialización de StoryBlock que llamaremos al principio de nuestra aplicación para crear esta conexión entre StoryBlock y nuestro proyecto, y configuraremos algunas opciones allí. Luego tendremos acceso al cliente de la API de StoryBlock que nos permitirá consultar el contenido de StoryBlock de una manera sencilla. Me refiero, podremos conectarnos a StoryBlock y traer el contenido de una manera sencilla con diferentes configuraciones, con diferentes funcionalidades que veremos más adelante. Luego también tenemos acceso a algunos React hooks que vamos a utilizar para conectarnos a este Editor Visual en Tiempo Real, y luego mostrar el contenido que estamos configurando en StoryBlock en tiempo real. También tendremos un componente dinámico o componente genérico de StoryBlock que utilizaremos para renderizar el contenido que proviene de StoryBlock, sin importar qué tipo de componente o bloque estemos creando en StoryBlock, esto tendrá más sentido cuando comencemos a trabajar en esto, así que no profundizaremos demasiado en esto. Luego también tendremos esta función StirBlockEditable que funciona como una bandera para nuestros React components donde podemos llamar a esta función StirBlockReact, perdón, esta función StirBlockEditable, y lo que vamos a decir es que estamos vinculando estos React components con los componentes creados en StoryBlock, y podremos hacer clic en ellos y editar las diferentes propiedades dentro del Editor Visual en Tiempo Real, y podremos ver los cambios en el contenido en tiempo real.

Ok, como Facundo te mostró una introducción a SCMS, y aquí tienes uno de los ejemplos, nuevamente, utilizamos StoryBlock, y veremos más a fondo cómo puedes organizar y diseñar la estructura. Y esto en realidad no, diría yo, como si estuviera destinado a ser construido para desarrolladores. Significa que en realidad serás libre para crear el diseño e incluso crear los nuevos componentes desde el sitio de Hotness CMS. Entonces, también puedes hacer eso para tus clientes o editores de contenido si están en tu equipo, pero no significa que seas el único que necesita hacer todo el trabajo. Así que te mostraré cómo, o a qué me refiero con eso, para que también puedas entender visualmente aquí. Esto es después de que inicié sesión en StoryBlock, obviamente puedes ir a storyblock.com y luego puedes crear una cuenta si no tienes, y aquí está el inicio de sesión. Pero no voy a cubrir esa parte, en su lugar, después de iniciar sesión y después de crear el espacio, aquí tienes un comienzo muy, muy básico de lo que puedes crear. Así que aún no he configurado el código fuente del front-end con el espacio de StoryBlock, pero para darte el ejemplo más simple, pensé que esto sería lo mejor. Entonces aquí, por defecto, en realidad ya tienes algunos componentes. Así que puedes ver aquí, en este componente teaser, parece que hay un titular, que en realidad es un tipo de campo. Y como puedes ver, en el otro componente, por ejemplo, dentro de la cuadrícula, hay otros componentes anidados. Me refiero a características aquí. Entonces, si voy a este componente de características, entonces hay otro tipo de campo. Este tiene un nombre diferente llamado nombre para tener un nombre o representar el nombre de este componente o lo que quieras llenar en el valor del nombre aquí. Hasta ahora, solo ves los valores de texto aquí, pero te mostraré cómo puedes cambiar a diferentes tipos de campos como activos o incluso números o selectores de fecha, etc. Te mostré cómo puedes descubrir desde esta versión muy minimalista, yo diría como la versión de hola mundo de StoryBlock, pero como desarrollador, es posible que desees echar un vistazo a la descripción general veterana, cómo se verá en la estructura de datos. Y en este caso, voy a mostrar más detalles sobre, qué más sería posible, como definir componentes, definir diferentes tipos de componentes aquí. Pero para aquellos de ustedes que se han preguntado, como puedo ver la descripción general de alguna manera más fácil para los desarrolladores, entonces te recomendaría que eches un vistazo, en primer lugar, a través de esta flecha hacia abajo. Y luego está Draft.JSON. También hay un publish.json, pero no publiqué este contenido. Como puedes ver aquí en este icono gris, dice borrador. Entonces, en este caso, tiene más sentido echar un vistazo a este Draft.JSON. Y diría que esta es más como una descripción general amigable para los desarrolladores de cómo puedes ver la estructura de datos de qué tipo de componentes se almacenan. Entonces, por ejemplo, lo que vimos juntos en el primer componente llamado teaser, en realidad está aquí. Se almacena como un objeto dentro y el padre es la matriz body. Entonces, todos los componentes que vimos juntos, comenzando desde teaser, feature y grid, todos se almacenan como un objeto de matriz. Entonces, este objeto consistirá en el contenido del componente teaser. Y de hecho, hay un titular que dice Hola Mundo. Y eso es exactamente lo que vimos juntos como el primer componente en este espacio de inicio. Entonces, si voy a, digamos, aquí abajo, hay el componente de características, en realidad el nombre de la característica, y hay el campo de nombre, tiene el valor de texto de la característica. Entonces, si abres este Draft.JSON, puedes ver todos los tipos de relaciones entre todos estos componentes están relacionados entre sí, y puedes ver la relación. Cuál es el padre y cuáles son los anidados. Entonces, aquí en este Draft.JSON, esto sería en realidad una fuente muy útil para ti cuando vayas a trabajar para crear un componente dinámico. Pero, para no saltar directamente a la parte práctica, digamos, la parte realmente divertida. En primer lugar, entendamos juntos cómo puedes crear diferentes tipos de componentes así como diferentes tipos de campos. Porque solo vimos cómo se mostraba en el espacio de inicio y cómo se mostraba en el Draft.JSON hasta ahora. Entonces, si también quieres ver la relación, sabes, qué está anidado y qué está incluido, que contiene un par de otros, como hijos dentro de esta característica de bloque de búsqueda también puede mostrarte una descripción general muy rápida. Pero, diría que esto es más como una característica para los editores de contenido, si quieres recomendárselo para que tengan más, ya sabes, digamos, control, para ver eso. Y este es el icono de la biblioteca de bloques, donde puedes ver todos los componentes definidos posibles que tenemos hasta ahora en este espacio aquí. Entonces tenemos teaser, hay una cuadrícula y características, ¿verdad? Pero resulta que son más de tres componentes. Aquí, hay una columna de tipo, diría yo, que describe qué tipo de componentes son. Entonces, además de los componentes que aún no hemos visto, echemos un vistazo a partir de teaser. Entonces, teaser, en realidad se llama tipo anidado del componente. Y las características también son anidables, pero la cuadrícula, oh perdón, la cuadrícula también es anidada. Perdón por eso. Te explicaré el otro tipo del componente más adelante, pero parece que los tres componentes que vimos juntos hasta ahora son todos anidables. Entonces, comenzando desde algo muy fácil. Lo que este tipo anidado del contenido significa es que, bueno, primero déjame hacer clic en este nuevo bloque. Este bloque es una terminología de StoryBlock. Es equivalente al componente.

Entonces, significa crear los nuevos componentes. Si haces clic aquí, verás los tres tipos de componentes. En general, eso es lo que, o eso es lo que Storyblock te ofrece para crear diferentes tipos de componentes. La primera opción es la que queremos ver juntos. Entonces, este bloque anidable significa componentes. Cualquiera de ellos puede ir dentro de una plantilla más grande de componentes. Recuerda lo que Facundo te presentó antes sobre el diseño atómico. Estos son como todos los componentes anidados, o por ejemplo, como átomo molécula, todos estos aceptan las plantillas o incluso la página. Entonces, eso es lo que significa bloque anidable. Puedes definir componentes como héroe, cuadrícula, o, no sé, carrusel, o cualquier cosa que se incluiría dentro de algún tipo de plantilla de página.

Hay un tipo diferente de tipo de contenido llamado tipo de contenido. En este caso, este es el componente de página. Antes de describir una parte un poco más compleja, te mostraré qué contiene este componente de página en su interior. En lugar de solo, como nombre o titular, simple, como los tipos de campo de valor de texto corto, ves estos bloques de contenido. Estos bloques de contenido son un tipo de campo especial en lugar de solo, ya sabes, texto corto. Lo que este tipo de bloques, ya sabes, tipo de campo puede hacer es que puedes anidar dentro, puedes anidar, como, componentes dinámicos dentro, ya sabes, para almacenarse dentro de este componente de página. En resumen, este, diría que este componente de página que estás viendo aquí es la plantilla del diseño atómico. Entonces, si tienes cientos de páginas en las que quieres anidar, cualquier tipo de componentes que se incluyan, simplemente puedes crear este componente de tipo de contenido de página, y luego puedes aplicar este componente de página a estas cientos de páginas. Todo lo que necesitas hacer es definir esta plantilla de página y aplicarla al resto del contenido de la página, y eso es todo. Entonces, también te darás cuenta de que eso es algo que tus clientes o los editores de contenido pueden hacer en su extremo porque tienen acceso a esta interfaz de usuario. Y si tienen permisos más altos, no entraré en detalles, pero también puedes darles los permisos, y ellos también pueden definir y configurar estos componentes en su extremo. Y tú puedes centrarte simplemente en convertirlo en código y luego renderizar los componentes. Este es el tipo de campo especial que puedes anidar tantos componentes diferentes como desees para crear el diseño de esta plantilla de página. Y para definir uno, puedes ir a esto, hacer clic, puedes ir a este nuevo bloque y luego elegir este bloque de tipo de contenido y completar el nombre de este componente. Luego se creará. Y hay un componente que no definí, pero quiero explicar. A veces, tal vez tengas, digamos, el caso de que no sepas qué tipo de componente quieres definir. ¿Debería definirlo como anidable? ¿Debería definir este tipo de contenido? Pero en este momento no puedo decirlo y no lo sé. En este caso, puedes definirlo como bloque universal ya que este tipo de componente permitirá o que todos definan o usen este componente para ser ambos, o actuar como ambos. Entonces puede anidarse dentro de otros componentes, pero al mismo tiempo, también puede actuar como una plantilla de página. Así es una descripción general rápida de cómo puedes definir. Y después de que, digamos, hayas creado los nuevos, digamos, componentes anidables aquí. Así que ahora solo tengo este, corto, perdón, tipo de campo de texto enriquecido pero aquí no hay mucha explicación. Aún no te mostré cómo pude definir este tipo de campo de texto enriquecido. Aquí está el pegamento. Aquí está, diría yo, como una entrada donde puedes dar un nombre al tipo de campo que vas a crear. Y aquí hay un icono donde puedes elegir el tipo de tipos de campo. Como dije antes, no solo tenemos, ya sabes, el tipo de campo de texto corto. Puedes elegir todas las opciones disponibles desde aquí. Entonces, si quiero tener múltiples opciones y luego darle el nombre como punto de montaña. Luego puedo hacer clic en agregar y se agregará, ya sabes, aquí. Pero, por supuesto, tal vez a veces quieras cambiar el orden. En este caso, tú o cualquier persona que tenga acceso y control para acceder al espacio, pueden hacer clic fácilmente, luego arrastrar y soltar. Y para múltiples opciones, por supuesto, no harás eso, probablemente ya puedes dirigirte directamente a las fuentes donde deseas obtener estas opciones. En este caso, tienes más configuración disponible aquí. Pero no entraré en demasiados detalles sobre eso porque en la parte práctica, también podrás descubrir todo esto. Y te acabo de mostrar un ejemplo muy sencillo de nuestro espacio Sort-of-to-Starter aquí. Pero aquí tienes otro ejemplo, si creas un espacio de ejemplo. Cuando vayas a crear este espacio, por cierto, también es gratuito, puedes echar un vistazo a este ejemplo y puedes jugar, por ejemplo, cambiar el orden de este espacio de Héroe, el componente Video y la sección de texto para cambiar también el orden. O incluso cambiar el color de este botón de Más información para que sea algo diferente en estilo. Así. Fantasma, Luces, País. Humo, algo así. Entonces, la posibilidad sería, o digamos que el límite es el cielo. Entonces, o tu imaginación. Así que, tantas, digamos, combinaciones, puedes crear basado en la Metodología del Diseño Atómico, pero para no complicar las cosas porque queremos que entiendas completamente la parte fundamental. Para la masterclass de hoy, hemos preparado el inicio, o vamos a tomar, y vamos a construir juntos una aplicación de blog simple de Remix Storyblock. Esa fue en realidad la introducción a Storyblock, y si alguien tiene una pregunta rápida, puedo responderla, ya que vi algunas conversaciones activas.

Pacundo, ¿tienes alguna?

Sí, tuvimos un par de preguntas que ya fueron respondidas, o eso creo. La primera pregunta fue si el componente de características que mostraste es configurable, lo que quiero decir es que sí, que puedes crear cualquier estructura de datos que desees para usar en tu proyecto, según cómo quieras organizar el contenido y mostrarlo. Durante la masterclass, verás cómo hacerlo, cómo crear tus propios componentes, tus propios bloques y usarlos en el front-end de tu aplicación. La otra pregunta fue si se necesita una cuenta de Storyblock para esta masterclass. Quiero decir, se necesita una cuenta para crear el espacio, que es el repositorio de contenido que vamos a usar para nuestro proyecto donde vivirá todo el contenido y las estructuras que vamos a usar, como dije, ¿verdad? Podríamos conectarnos a uno público, darnos una clave y eso es todo. Sí, quiero decir, la idea de que crees tu propio espacio es que luego puedas expandir ese espacio que creas durante esta masterclass en caso de que quieras crear un proyecto más complejo, Storyblock tiene un nivel gratuito que podrás usar y todas las características principales que vamos a usar durante esta masterclass están incluidas en el nivel gratuito. Entonces, crear una cuenta es gratis, crear un espacio es gratis, no se te cobrará por eso, y podrás experimentar con las diferentes características que ofrece Storyblock y luego, con la misma cuenta, puedes crear diferentes espacios o repositorios de contenido para otros proyectos en caso de que quieras crearlos. Luca dice, parece muy interesante pero parece un poco diferente al significado de un CMS sin cabeza. Estaba acostumbrado a eso. Me gustaría saber más al respecto, Luca. Sí, interesante.

Sí. Tal vez puedas escribirnos más detalles en el chat y estaremos interesados en ver tus respuestas y también responder más adelante. Quiero decir, una cosa que verás durante la parte de la masterclass donde vamos a trabajar con el código es que puedes usar cualquier tecnología o lenguaje de programación para crear tu proyecto. Y esta vista previa en tiempo real que tienes en el editor visual se genera utilizando tu front-end. Quiero decir, no es solo Storyblock el que genera la vista previa. Es el front-end de tu proyecto conectándose a este espacio que vas a crear o este repositorio de contenido donde vive todo el contenido.

¿Storyblock tiene roles para tipos de usuarios de campos? Sí y sí. Sí, puedo mostrarte pero eso acortará nuestro tiempo de masterclass. Así que si nos queda tiempo, recuérdanos, por favor. De acuerdo. En realidad, los tipos de campo los veremos durante esta masterclass. Probablemente los roles de los usuarios los veamos más adelante pero sí, puedes establecer diferentes roles para los usuarios. Puedes crear tus propios roles en caso de que quieras crear roles personalizados también puedes hacerlo. Sí. ¿Cuántas relaciones anidadas puede admitir? Hasta donde sé, no recuerdo si hay un número máximo. Depende de cómo quieras... Quiero decir, qué tan compleja quieres que sea la estructura de tu contenido, ¿verdad? Quiero decir, puedes tener... Sí. Recuerdo casos en los que se usaron seis niveles de anidamiento en una página y no recuerdo si hay algún límite en realidad. Sí. Sí. La misma respuesta desde mi parte también.

De acuerdo. Lucas dice, de acuerdo. Jugué con un par de CMS sin cabeza. Comúnmente no iban tan en profundidad. Solo definían tipos de contenido y campos internos. Aquí también veo algunas opciones como tamaño, pequeño o cuadrícula. De acuerdo. Sí. Este tipo de, digamos, las pestañas que puedes crear y también almacenar los campos relevantes se pueden configurar desde la biblioteca de bloques que te mostré antes también. Estoy muy feliz. Lo siento. No puedo sentir. Gracias. No soy bueno como tú sabes, como este tipo de. Palabras. De acuerdo. Sí. Puedes configurarlo o no solo tú. Cualquiera que tenga acceso puede configurarlo para renderizar. Por supuesto, desde el lado del front-end sería tu trabajo. Vamos a echar un vistazo a esto con un ejemplo más simple juntos en la parte práctica. De acuerdo. Muchas preguntas. Estoy muy contento de ver eso. Lo siento. Solo para aclarar estas opciones o nombres que estamos usando en el ejemplo como tamaño pequeño o cuadrícula que probablemente estén muy relacionados con una presentación particular. Como en realidad una cuadrícula HTML o algo así. Es la forma en que estás usando para estructurar el contenido que vas a tener y la forma en que prefieres usarlo para mostrar el contenido, ¿verdad? Quiero decir, puedes crear las entidades sin ninguna representación visual particular y usarlas de diferentes formas en caso de que quieras. De acuerdo. Nuevamente, muy contento de ver que surgen muchas preguntas y me gustaría asegurarme realmente de mostrar un par de características sobre las que tuvimos preguntas más detalladas al final. Entonces, para hacer eso, pasemos a la parte práctica porque algunas de las preguntas que nos hicieron podrían resolverse al ver esta parte práctica. Así que aquí estará la parte divertida. Espero que estés listo para hacer algunos ejercicios de código. Para hacer eso, voy a pasar a mi Visual Studio Code. Pero no tienes que usar Visual Studio Code, es solo mi preferencia. Y el primer paso sería, vamos a crear la aplicación de Remix desde cero. Y también vamos a proporcionarte el enlace mágico para clonar todos los componentes que necesitarás para construir juntos esta aplicación de Remix Storyblock. Y también vamos a configurar un poco de ajustes pequeños y luego vamos a crear la conexión entre Storyblock y tu código de Remix. Y luego habrá algunos estilos y luego habrá más componentes dinámicos. Para comenzar, primero puedes ejecutar... Oops, lo siento, hay un poco de código que se copió y pegó, vas a ejecutar npx create remix app latest. Así que no olvides poner app latest y avísame si el código o el terminal y el comando son muy pequeños para ti, entonces estaré encantado de aumentar el tamaño. En este caso, estoy bien para continuar. Sí. Así que voy a ejecutar y no tarda mucho y me mostrará algunas opciones para elegir, como por ejemplo, una opción bastante importante sería las opciones de alojamiento al final. Así que en esta masterclass, no vamos a implementar en los servicios de alojamiento, pero si tienes la intención de hacerlo, o si quieres hacerlo, asegúrate de elegir el que deseas implementar.

Así que después de un par de, unos pocos segundos, tal vez estoy usando demasiadas aplicaciones. Tal vez estoy usando demasiadas ahora. Esta es una pregunta de un Remixite, ¿dónde te gustaría crear tu aplicación? Voy a crearla en la raíz misma. Así que solo voy a ejecutar esto con MyRemix app. Y puedes elegir, ¿qué tipo de aplicación quieres crear? Voy a ir con lo básico. Pero si quieres tener una pila preconfigurada lista para producción para diferentes propósitos de uso, porque para este taller, podría arrojarte algunos errores que no esperabas. Así que para este taller, me quedaré con lo básico. Y aquí, vamos a elegir el servidor de aplicaciones Remix. Pero nuevamente, como dije, si quieres alojarlo en Netify, o apply.io, Vercel o CloudFlare, hay muchas, muchas opciones aquí. Pero es bastante importante que lo configures aquí. Pero en este caso, no tenemos la intención de hacerlo. Así que voy a elegir un servidor de aplicaciones Remix. Y voy a ir con JavaScript porque nuestro repositorio de GitHub sigue con JavaScript, creo. ¿Quieres que ejecute npm install? Sí, por favor, porque no quiero escribirlo yo mismo. Solo presiona Sí. Y se instalarán algunos paquetes necesarios que necesitamos. Después de eso, podemos pasar a este nuevo proyecto de Remix. De alguna manera hoy está tardando un poco, pero normalmente no lo hace. Espero que nadie tenga problemas si están siguiendo los pasos conmigo uno por uno.

Oh, y mientras tanto, antes de verificar si la aplicación funciona, voy a mostrarte el enlace mágico para clonar todos los componentes necesarios en tu espacio de Storyblock. Puedes encontrarlo en nuestra nota de Notion, pero para estar seguro, ya lo mostraré o compartiré contigo tanto en Discord como en Zoom. Porque quiero ser eficiente y no hacer que esperes con una pose incómoda. Y aquí, para que todos ya lo tengan, el registro no se pudo encontrar, oh sí, cierto. De acuerdo, de acuerdo, lo tienes, de acuerdo, esto no se pudo encontrar. ¿Puedes decirme qué versión de node y NPM tienes? Lo siento, ¿el error lo recibes cuando usas el enlace de Storyblock, ¿verdad? Ahí vamos. Ah, enlace de Storyblock. De acuerdo, disculpa por eso. Porque, sí, no estoy seguro si, oh, lo siento, si quitas la ruta después de la barra diagonal Bloody Mary, ¿funcionó para ti? De acuerdo. Oh, genial. Entonces déjame compartir el otro enlace porque de acuerdo, gracias. Solo eso. O si- Tal vez cuando copio desde Notion, incluye algo innecesario, caracteres, no estoy seguro. Gracias. Lo siento, yo- ¿Puedes probar este enlace? Veamos. ¿Funciona? No estoy seguro. También lo compartiré en Discord. Obtener lista de mis espacios. No creo. De acuerdo, parece que no funciona. Eso no está bien. ¿Podrías compartir el enlace que- que funcionó para ti, Vladimir? Porque- Sí. Sí. Porque la otra idea sería si- quiero decir, como vamos a crear- la cantidad de componentes que vamos a crear no es tanta, probablemente crearlos desde cero. También- Sí. También ve el espacio de trabajo. De acuerdo, sin errores. Sí. Chris podría tener razón. Sí. Tal vez necesitamos agregarlos como colaboradores o obtener el acceso, por eso. De acuerdo, no te preocupes por eso. Solo quería ir por un atajo. Pero no te preocupes. Podemos crear los componentes juntos en el sitio de Storyblock. Lamento que tengas que hacer eso, pero no es gran cosa. Así que.

Creo que, mientras hablábamos de si el enlace mágico funciona o no, creo que Remix ya ha terminado de crear o prepararnos un inicio muy agradable, diría yo. Así que veamos la aplicación allí, creo que la llamé mi aplicación Remix, ¿verdad? Así que. Asegúrate de, dondequiera que lo hayas creado, luego apunta a tu aplicación Remix, y luego, sí. Solo los muevo al lugar. Entonces, de acuerdo, abrámoslo primero en el editor visual de la aplicación. Ya deberías ver, como, un par de directorios y el archivo de configuración necesario, como el package.json. Creo que no debería tener problemas. Vamos a ver, si la aplicación funciona. Así que, abre el archivo package.json, ya nos ha instalado las dependencias necesarias. Así que, ejecutemos npm run dev, npm run dev. Luego, ahora va a construir el localhost:3000. Así que podemos echarle un vistazo juntos. Voy a cerrar este aquí. Compartir aquí. Para ver si la aplicación funciona. Sí, funciona. Si ves, bienvenido a Remix con un par de enlaces juntos. Entonces significa que funciona, genial. Y luego pasaremos a las estructuras de contenido. Así que voy a pasar a primero, el espacio del taller. Y te mostraré primero qué componentes necesitas crear. Remix workshop, este. Así que aquí, en la biblioteca de bloques, esta es exactamente la misma página donde puedes ver una descripción general de los componentes necesarios que vimos juntos en la otra sección que estaba explicando. Así que tenemos un par de componentes que necesitas definir y te los mostraré uno por uno. Así que empezando desde arriba, primero puedes crear el nombre técnico de todos los artículos con guión bajo para que sean anidables en este caso y es solo un campo de texto corto y simple. Así que puedes seleccionar este valor de texto y mantener un nombre como título comenzando con mayúscula. Y luego, a continuación, hay un tipo de contenido ten cuidado con este tipo de componente. Este tipo de contenido significa que se crea una plantilla de página para cada publicación de artículo de bloque porque no queremos tener el mismo diseño de página siguiendo desde la página de inicio o la página de acerca de o contacto. En cambio, queremos tener una plantilla de página especializada para cada publicación de blog. Así que para eso, puedes dar un nombre a este componente que comience con mayúscula y sea artículo. Y luego habrá un texto corto del título comenzando con mayúscula.

Y aquí está nuevamente el tipo de campo de texto corto, pero esta vez el nombre de este tipo de campo debería ser subtítulo, todo en minúsculas. Y luego aquí está el texto enriquecido, puedes elegirlo nuevamente, justo aquí. Y este nombre debería ser contenido. Y aquí hay una imagen. Entonces, para definir esta imagen, dije, es un poco, diría que es diferente de los otros tipos de campo. Así que te lo mostraré. Entonces aquí, en lugar de elegir texto enriquecido o texto corto, aquí está el recurso. Y si haces clic en recurso, oh, lo siento. Si haces clic en recurso, entonces el icono cambiará. Así que voy a nombrarlo con diferentes nombres, lo siento, prueba de recurso. Pero asegúrate de que en tu caso, deberías nombrarlo como imagen. Entonces, si lo edito y luego después de agregarlo, asegúrate de seleccionar este tipo de campo recién creado de recurso. Y luego aquí, si te desplazas hacia abajo, hay tipos de archivo. Aquí debes seleccionar imágenes y luego guardar y volver a los campos. No voy a guardar en este caso porque no quiero agregarlo. Así que eso será todo para el tipo de contenido del artículo. La característica también es fácil. Básicamente, es solo el nombre, tipo de campo de texto corto. Así que puedes seguir con este valor predeterminado. Digamos que el tipo de campo allí tiene un nombre dado, como nombre que comienza desde esta minúscula mayúscula. Luego, este componente de característica también debería definirse como componentes anidables. Así que vamos a la cuadrícula, esto también es anidable. Entonces, si haces clic primero en este nuevo bloque, ese es en realidad el primer paso. Debes seguir uno por uno para crear todos estos componentes. Aquí, tienes un tipo de campo especial llamado bloques. Entonces, este componente de cuadrícula será el padre de cualquier componente hijo, digamos que se colocará dentro. Por eso lo definimos como bloques. Este tipo especial de tipo de campo lo puedes encontrar aquí en la parte superior izquierda. Así que dale un nombre a este tipo de campo de bloques como columnas, todo en minúsculas. Y pasando a otro componente anidable llamado sección de héroe. Todo en minúsculas y luego guión bajo aquí, sección_de_héroe. Así que este también es un componente relativamente fácil de definir. Entonces, habrá, en primer lugar, un tipo de campo de texto corto de título, un tipo de campo de texto corto de subtítulo, puedes dar nombres que comiencen con minúsculas. Y luego, por último, hay otra imagen, que debes especificar que sea una imagen de la misma manera que te mostré antes. El nombre debería ser imagen comenzando con minúscula y ese sería el componente de sección de héroe. Así que aquí tienes otro tipo de contenido para aplicar a las raíces como mi página de inicio o como páginas de acerca de. Luego queremos colocar todos los componentes anidables para crear el diseño de esta plantilla de página de una manera más dinámica. Por eso defines este tipo de campo como bloques, pero le das un nombre que comienza con cuerpo. Estos son, digamos, nombres de tipo de campo y los nombres de los componentes serían sensibles a mayúsculas y minúsculas. Así que ten cuidado al dar el nombre correcto. Y aquí puedes cambiarlo más tarde también, pero es más fácil asegurarse de hacerlo al principio. Y eso es lo que realmente quería evitar al hacerte pasar por este proceso al proporcionarte el enlace mágico, pero no funcionó. Lo siento por eso. Así que casi hemos terminado. Este es el último componente que queremos definir como un componente anidable. Y el nombre de este componente debería ser teaser comenzando desde, nuevamente, minúscula, y solo tiene un tipo de campo de texto corto, que tiene un nombre como titular. Así que asegúrate de que esto también sea en minúsculas y eso sería todo. Así que espero que ya tengas todos estos componentes listos en tu espacio de Storyblock. Luego, después de eso, vamos a configurar un poco las cosas para poder ver la vista previa de lo que estamos construyendo juntos desde el lado de Remake. Y para hacer eso, déjame pasar al otro espacio de Storyblock porque este espacio ya está completo y no quiero que veas una parte de trampa. Así que voy a crear un espacio completamente nuevo. Así que voy a iniciar sesión y luego aquí, también puedes seguirme mientras creo el nuevo espacio aquí para todos los procesos que tal vez si fui demasiado rápido, así puedes alcanzarme. Y por cierto, si eliges este espacio de ejemplo, sería como este espacio de demostración que te mostré antes. Así que aquí, voy a mantener mi aplicación de Remakes. Dejaré la ubicación del servidor en la UE, pero si te encuentras en algún lugar más cerca de los EE. UU., puedes elegir EE. UU. Así que voy a crear un espacio, y aquí, tengo un espaciado aleatorio aquí. También necesito crear la apariencia aquí. Lo siento por eso. En mi caso, este enlace mágico funciona, así que déjame hacerlo rápidamente para que no tengas que verme haciendo el mismo proceso que tuviste que hacer. Lo ignoraré aquí. Ahora tengo todos los componentes necesarios listos. Sí, los tengo. Así que espero que hayas podido seguir todos los pasos que estaba mostrando, incluyendo la definición de todos estos componentes necesarios. Y luego, lo que te decía de hacer un poco de configuración sería, en primer lugar, ir al contenido en el lado izquierdo de la barra lateral, y luego aquí está la página de inicio, digamos la historia predeterminada que tienes desde el inicio. Luego puedes hacer clic en esta entrada de inicio y luego en este caso, en el menú superior aquí, hay un icono de configuración de entrada. Asegúrate de hacer clic aquí, y luego aquí, si te desplazas hacia abajo, hay una ruta real que puedes modificar para eliminar, digamos después de algo.com barra diagonal. No quieres tener como inicio, significa como el nombre de este espacio que se agregue. Por eso quiero eliminarlo y para hacerlo, puedo agregar una sola barra diagonal en la ruta real allí. Pero obviamente no he configurado ninguna URL de vista previa útil, digamos para que se muestre en este editor visual. Es por eso que no veo nada aquí, pero para configurar eso primero, quiero agregar algo útil, como algo de localhost o la vista previa de lo que implementes aquí.

Así que voy a hacer clic en este cambio de URL. Entonces me mostrará este modelo en el que puedo agregar o cambiar las nuevas URL de vista previa. Así que voy a hacer clic en este botón verde y aquí, me llevará a la configuración, que está fuera del contenido donde realmente echamos un vistazo a la página de inicio, una historia de inicio aquí. Entonces aquí, en el editor visual, si estás en otro lugar, asegúrate de ir al editor visual desde la configuración. Y luego aquí, esta es la ubicación actual que estaba viendo. Y por eso me devolvió algo que no esperaba ver. Así que para evitar eso, voy a copiar y pegar lo que tengo, este local host 3000 que viene de nuestra aplicación remix. Y lo voy a guardar en la ubicación allí. Asegúrate de agregar la barra diagonal al final para evitar tener algo inválido. Digamos una ruta mientras trabajas en esta masterclass. Voy a hacer clic en el botón de guardar. Te mostraré un par de configuraciones más y eventualmente volveremos aquí para agregar un poco más, como otra URL de vista previa pero tendría más sentido si te muestro un poco de preconfiguración. Así que volvamos al contenido y a toda la historia.

Oh sí. Lo siento Arisa, sí, lo siento, ¿puedes ir a la biblioteca de blogs, solo dos minutos más. Sí, claro, claro. Para mostrar rápidamente cómo crear los componentes. Creo que tenemos algunas personas que mientras creaban el nuevo espacio, De acuerdo, de acuerdo, de acuerdo. Necesitaban verte cómo crear un nuevo componente como los artículos, los antiguos artículos porque el teaser, la página, la cuadrícula y la función esos cuatro blogs vienen por defecto con cualquier nuevo espacio que crees en Storyblock. Pero la sección de héroe, el artículo y los antiguos artículos son blogs que Arisa creó o creamos para este proyecto. Probablemente puedas darte un poco cómo crearlos. Por supuesto, por supuesto, lo siento por eso. Es realmente un buen detalle. Gracias por hacerme saber. No, no, claro, claro. Sí, a veces es difícil, digamos, saber dónde la gente está siguiendo. Así que es realmente bueno. Así que voy a empezar desde arriba, todos los artículos. Así es como puedes empezar a darle un nombre a este componente. Cuando haces clic en este nuevo bloque y eso es a lo que puedes darle un nombre, todos_los_artículos. Y luego aquí puedes crear un tipo de campo de texto corto por defecto. No le doy un nombre al título. Así que puedes crearlo así. En este caso, ya está tomado, así que no puedo definirlo pero uno está bien. Así es como debería ser. Gracias por las capturas de pantalla. Baja configuración, si alguien se lo perdió. Gracias. Muchas gracias. Y espero que todos los artículos estén bien. Si no, deténganme de nuevo y estaré encantado de mostrártelo. Y pasando al artículo que debería ser, lo siento, tipo de contenido. Así que si haces clic en este nuevo bloque y eliges entre una de estas tres opciones deberías elegir el bloque de tipo de contenido y deberías mantener un nombre como artículo aquí. Y luego hacer clic en agregar bloque. Y luego te llevará a la pantalla que estaba mostrando aquí. Y por supuesto, si creas uno nuevo no se han definido tipos de campo. Así que lo que puedes hacer es crear el tipo de campo de texto corto por defecto para el título que por defecto es texto corto. Así que puedes darle un nombre como título. Nuevamente, me advertirá porque ya existe. Y a continuación, puedes crear otro tipo de campo de texto corto llamado subtítulo. Así que no tienes que cambiar este segundo en su lugar, puedes darle un nombre como subtítulo. Y hacer clic en agregar, asegúrate de hacer clic en agregar luego guardará los tipos de campo para que se muestren aquí. Y a continuación, vas a crear el tipo de campo de texto enriquecido que necesitarás cambiar este icono haciendo clic en este icono verde para que sea texto enriquecido. Así que aquí puedes cambiar el icono y luego después de eso, contenido, darle un nombre de contenido y hacer clic en agregar. Luego, pasando a la imagen nuevamente, puedes cambiar el tipo de campo desde este icono aquí y elegir el recurso. Y luego de darle un nombre, recurso e imagen y hacer clic en agregar, te mostraré la misma pantalla después de que hayas hecho eso. Luego tendrás que elegir el tipo de tipos de archivo en la parte inferior, cuando te desplaces hacia abajo, entonces por defecto, debería ser cualquier tipo de archivo pero queremos especificar que sean imágenes. Así que eso es lo que vas a elegir, la casilla de verificación y hacer clic en guardar y volver a los campos. Luego guardará todos los componentes necesarios. Así fue el componente de artículo. Espero que haya quedado claro. Si no, deténganme de nuevo y estaré encantado de mostrártelo de nuevo. Entonces la función es algo creado por defecto pero solo para asegurarnos qué tipo de nombre debes dar debes dar un nombre que comience con letras minúsculas, y dice nombre. Y la cuadrícula debería ser anidada. Esto debería ser bloques, y el nombre aquí podría ser un poco diferente al de por defecto, y debería ser columna. Así que lo que puedes hacer es que por defecto, ya son bloques, supongo, pero columnas. Eso es lo que necesitas cambiar el nombre. Y hacer clic en agregar, y si simplemente quieres cambiar el nombre del existente, haz clic aquí, y luego en la configuración, lo siento, campos, debería ser, espera, pensé que era desde la configuración. Tal vez sea más rápido que elimines el existente si tiene un nombre diferente, luego columnas, y crea los nuevos bloques aquí. Así que esa es la cuadrícula, y aquí una sección. Eso es algo que necesitas crear desde cero. Debería ser anidado, y luego el nombre de este componente debería ser sección_de_héroe. Y aquí ves tres tipos de campo. El primero con el título, tipo de campo de texto corto. Nuevamente, puedes definir desde aquí el texto corto y darle un nombre como título, y hacer clic en agregar. Aquí está el subtítulo. Asegúrate de que el tipo de campo sea texto corto, y subtítulo, haz clic en agregar. Y por último, debería ser una imagen. Asegúrate de cambiar este tipo de campo a recurso y darle un nombre como imagen, haz clic en agregar. Y luego no olvides cambiar o especificar el tipo de campo de imagen de las secciones de héroe para que sean imágenes en lugar de cualquier tipo de archivo. Y haz clic en guardar y volver a los campos. Muy bien. Y la página también...

La página podría estar ya definida por defecto, pero queremos asegurarnos juntos si tenemos el tipo de campo correcto. Así que el nombre de este tipo de campo especial se llama 'bloques'. En primer lugar, asegúrate de elegir estos bloques y luego dale un nombre como 'body'. Y haz clic en agregar, eso es todo para la página. Eso es un componente de tipo de contenido. Y luego el teaser es anidado y solo tiene el titular. Y supongo que, según lo que vimos en el inicio, ya tiene la misma configuración.

Muy bien, si alguien todavía necesita tiempo, avísennos. Facundo puede detenerme. Si no estoy al tanto de lo que está sucediendo en el chat de texto allí, estaremos encantados de echarle un vistazo juntos. Así que espero que todos hayamos configurado los componentes aquí. Entonces, lo que estábamos haciendo es sí, echar un vistazo a la URL de vista previa que hemos agregado en la configuración. Así que vamos al contenido. Y en el contenido, creo que deberías tener por defecto este espacio de inicio. Haz clic en este espacio de inicio. Y ahora, en lugar de ver, digamos, como la pantalla anterior, ahora ves 'HTTP no permitido'. A propósito, muestro esta pantalla porque hay comandos importantes que se muestran aquí. Así que diría que tenemos el método uno y dos pero elegir el método uno sería el más fácil. Diría que si es realmente la primera vez que trabajas en mi proyecto de Storyblock, debes ejecutar estos comandos de brew en comandos relacionados con brew. Asegúrate de que brew esté actualizado y configura o ejecuta estos comandos. Puede llevar un poco de tiempo, así que avísame o avísale a Facundo si necesitas un poco de tiempo, luego podemos esperarte. Y después de eso, puedes ejecutar este NPM, e instalar el proxy SSL local global. Y luego, después de eso, puedes ejecutar exactamente el mismo comando que este. Puedes copiar y pegar porque el destino del localhost ya se ha dirigido al 3000, que es donde remix inicia por defecto el localhost, así que solo puedes copiar y pegar. Y mientras esperamos a las personas que necesitan ejecutar y esperar un poco de lo que se va a devolver, un poco de información para ti. Puede que te preguntes, bueno, entonces la próxima vez, digamos, al día siguiente, si necesito volver a este proyecto de aplicación de Storyblock, ¿cómo debo, ya sabes, ejecutar o iniciar o desarrollar mi proyecto para ver el editor visual aquí. Para hacer eso, no necesitas volver a ejecutar todos estos comandos de Perl, en su lugar, puedes ejecutar esto aquí. Lo siento, Arisa. Sí, tenemos un par de comentarios que iba a no quería interrumpirte. Entonces, ¿cuál es el comando en Windows y si se ejecutará en Linux? Si vas a la página de Notion que compartimos en la parte inferior de la página, tenemos dos enlaces con tutoriales que tenemos en la página de Storyblock que puedes seguir para instalar dependiendo de si tienes Windows o Mac, dependiendo del sistema operativo que estés utilizando. Adiós Luca, nos vemos luego. Gracias por unirte. Dependiendo del sistema operativo que estés utilizando tienes esos enlaces que puedes seguir para facilitar la instalación. Y lo siento, Brittany volvió y preguntó, esto es algo que me ha confundido en este proyecto de construcción. ¿El paquete 'bit cert' sobrescribe esto en BitProject? Esa es una muy buena pregunta. Creo que, quiero decir, depende de dónde instales estos certificados porque puedes instalarlo en una ubicación global en tu computadora y ejecutarlo sin necesidad, sin necesidad, sin perdón, de especificar un proyecto en particular donde lo estás ejecutando. Así que es una dependencia de desarrollo en ese proyecto. Creo que esto no debería sobrescribir. Quiero decir, si estás ejecutando el certificado bit y el proxy HTTPS, creo que esto debería funcionar con bit en tu caso. Creo que puedes ejecutar uno u otro pero eso es algo que tendremos que probar. Sí, sí, definitivamente, sí. Y también tenemos expertos en nuestro equipo de desarrollo, no hoy, pero también estamos encantados de conectarnos con ellos. Muy bien, ¿hay alguna pregunta que surja? Creo que esta parte está clara. Oh, ya sabes, Scott y Josephine. Genial, ellos son los que. Muy bien, ahora tengo a Gonzalo diciendo, cuando se crea el proyecto Remix, eliges JavaScript. ¿Tienen soporte para TypeScript? Sí, de hecho, hay un SDK que voy a instalar junto contigo en unos pasos más. Y este SDK, que se llama Storyblock React, lo siento, no Remix, Storyblock React, admite TypeScript. Y Kevin, ¿has probado el que está en el documento en Linux? Porque probablemente, quiero decir, debería ser bastante similar. Lo siento, dame, sí, llevará un tiempo instalarlo. Sí, y especialmente si tienes algunas actualizaciones en GRU en sí, podría llevar un poco más de tiempo. Por eso estoy tomando un poco de tiempo aquí para esperar a los demás. Oh, no tienes, es posible que desees instalar el GRU de inicio. Puedes buscar aquí, y aquí, y tienen todos los comandos necesarios para instalar. Asegúrate, puedes instalarlos en Linux. Esto es solo para Windows, ¿verdad? Lo que estoy viendo es que el paquete MK cert, puedes instalarlo en Linux. Necesitarás obtener el análogo para GRU de inicio para tu distribución de Linux e instalarlo probablemente. Hay una solución alternativa para aquellos que no desean instalar el certificado HTTPS o si quieres continuar ahora y luego seguir trabajando. Pero lo que estamos usando, ahí tienes. Quiero decir, estamos en esta versión de Storyblock, la Storyblock v2 es la nueva versión de la interfaz de usuario, y estamos tratando de obligar a los desarrolladores a usar certificados HTTPS porque es más seguro para ti. Estamos tratando de pasar a una conexión security. Bueno, el método dos es más fácil en el caso de que no desees instalar algo. Sí. Podría ser. Puedes crear la página HTML estática para contener este código fuente. Luego, en caso de que, digamos el método uno no funcione para ti, luego puedes tomar el método dos. Supongo que, siempre y cuando hayas agregado este localhost 3000 desde la configuración, entonces deberías ver que es exactamente la misma página, así que puedes simplemente copiar y pegar aquí. Advertencia, okay. Certito no está disponible.

Para verlo, no se puede instalar en Firefox. De acuerdo, porque intentas abrir Storyblock y echar un vistazo en Google Chrome o Brave. Pero diría que Chrome sería más fácil si usas un bloqueador de aplicaciones. Sí, de hecho, recomendamos oficialmente en Storyblock que primero lo verifiques en Google Chrome. Y si aún se comporta de la misma manera, entonces podemos echar un vistazo más profundo. Ya estás usando Chrome, bien. Sí. Freddy, ¿tienes, si verificas el método dos, tienes este archivo HTML estático en la raíz? Sí, tengo la URL estática. Bien, bien. Intenta instalar el NSS. De acuerdo. O es otro truco, pero no es ideal, pero digamos que cubre todo el contenido para este taller, solo para aquellos de ustedes que no veamos el resultado ideal aquí, pueden volver rápidamente a la V1, lo que significa que la interfaz de usuario será diferente, pero no necesitas preocuparte por el certificado SSL. Significa que en realidad puedes echar un vistazo a la vista previa sin configurar eso. Es solo para más seguridad con esta interfaz de usuario actual que te pide que hagas eso. Pero si tienes este problema, si vuelves a hacer clic en V1, no es ideal, nuevamente, porque tendrás una interfaz de usuario antigua, pero no necesitas configurar esas cosas. En cambio, deberías poder ver este 'bienvenido a Remix' aquí. Así que es otro truco en este caso para asegurarnos de que podamos, digamos, cubrir todo el contenido en el taller. Pero diría que si tienes preguntas posteriores a este taller, estaremos encantados de trabajar juntos. ¿Suena bien, Freddy? Sí, intenté la versión incorrecta y ahora lo tengo todo en funcionamiento. Bien, bien. De acuerdo, bueno, después de eso, ejecutarás este comando aquí y luego debería poder mostrarte la vista previa, pero antes de hacer eso, en realidad voy a abrir la terminal porque no quiero arruinar o hacer que se vea caótico en mi VSCode, así que lo voy a ejecutar. Deberías ver algo como esto aquí y asegúrate de copiar este localhost 3010 en este caso porque la razón por la que es que quiero que lo agregues como una nueva URL de vista previa. A propósito, quería mostrarte esta pantalla para que puedas copiar todo este método uno y dos. Pero si ya has configurado eso, simplemente puedes cambiar esta ubicación a 3010 o si quieres mantener esta pantalla anterior que proviene, digamos, de una ruta no certificada SSL, puedes mantenerla y en su lugar simplemente puedes agregar la URL de vista previa aquí también. Entonces, en este caso, simplemente voy a sobrescribir y hacer clic en guardar y volver al contenido y dirigirme a la historia de inicio y si cambio, en realidad ya está cambiado, pero si mantuviste dos URL, puedes cambiar fácilmente desde aquí, cambiar la URL y ahora deberías ver este 'bienvenido a Remix'. Espero que hasta ahora todos estén siguiendo. Permíteme revisar rápidamente el chat. Oh, de acuerdo. Sí, sí, sí. Estoy feliz de mostrarte. El método dos, en realidad, lo voy a mantener aquí para que sea más fácil y seguro. Un momento, voy a mostrarte, oh sí, agregué el HTTPS, por eso. Entonces, el método dos, te rediriges, ah, mira, sí, es porque aquí en la configuración de entrada, no lo mencioné claramente porque fuimos a responder algunas otras preguntas. Entonces, si haces clic en esta configuración de entrada y cuando te desplazas hacia abajo hasta el final, está la ruta real. Y de forma predeterminada, está en blanco. Y eso es lo que estás viendo, ya sabes, el directorio de inicio se mostraría así y no te mostrará la vista previa que deseas ver. Y para evitar eso, ve a la configuración de entrada, ve a la ruta real en la parte inferior de la pantalla y agrega una sola barra diagonal y corregirá la ruta para eliminar esta ruta innecesaria, diría que el nombre de la ruta para la diapositiva. Cuando hagas clic en guardar y cerrar, ahora esta línea de inicio innecesaria debería eliminarse. Sí. Entonces, Storyblock muestra el servidor de desarrollo real que estamos ejecutando. Sí, exactamente. Y esto es bastante genial y hace que el desarrollo sea mucho más fácil y rápido. Sí, funciona. Impresionante. Espero que haya quedado claro. Lo siento, no copié y pegué el método dos. Sería más fácil. Voy a hacer eso aquí. Muy bien. Ahora hemos configurado la URL de vista previa, así que voy a cambiar de nuevo a 3010 y eso es lo que deberíamos estar viendo ahora. Entonces, hemos configurado la ruta real para eliminar la línea de inicio innecesaria. Y el siguiente paso es instalar un paquete llamado Storyblock React. Si quieres ver más, encontrarás un enlace en la nota de Notion, pero voy a mostrarte rápidamente, oh, ya lo abrí, donde puedes encontrarlo. Entonces, la versión debería ser 1.3.1. Si lo instalas ahora, ya deberías tenerlo, pero si ya tienes algo antiguo o estás trabajando en algún proyecto actual en el que estabas trabajando, asegúrate de que la versión siga siendo 1.3.3. Eso es lo que vamos a instalar. Y voy a volver a mi VSCode. Voy a terminar un poco y voy a ejecutar npm install. Asegúrate de incluir '@storyblock/react' en el comando de instalación. Así es como deberías hacerlo. Voy a pegarlo para que puedas copiar y pegar y ejecutarlo. Solo necesitas instalarlo en las dependencias. No tiene que ser en las dependencias de desarrollo. Eso es lo único de lo que debes tener cuidado. Britney, eso estaba en la ruta también, ¿verdad? Sí, sí. Agregué Kevin. Agregué editor.html. Entonces, el archivo a la carpeta pública, pero no puedo ver mi entorno de desarrollo en Storyblock.

De acuerdo, para una solución rápida, con el fin de cubrir todo el contenido de la masterclass, no es lo ideal, nuevamente. Pero si vuelves a la pantalla anterior, saliendo del editor visual, hay una especie de truco, diría yo, una salida rápida, volver a v1.ui. Desde la interfaz actual, te pide tener una forma segura de previsualizar el contenido, pero usando un certificado SSL, pero si vuelves a la v1, no te pedirá hacer eso. Así que en realidad no tienes que configurar todo lo que estaba mostrando en la pantalla. Y debería mostrarte, incluso sin este archivo HTML estático. Nuevamente, no es lo ideal, pero para ser más rápido y obtener el resultado que deseas, sería una salida rápida, diría yo. Avísame si aún no puedes ver la vista previa en el texto. Luego, Facundo y yo revisaremos lo que escribas aquí.

De acuerdo. Espero que todos hayan instalado el SDK de Storyblock React. Por cierto, como habrás notado por el nombre de este SDK, también puedes usar exactamente el mismo SDK para, digamos, tu proyecto de React en combinación con Storyblock. Por eso quería mencionar rápidamente por qué el nombre de este SDK incluye React. Después de eso, vamos a inicializar la integración de Storyblock en el archivo root.jsx. Debes ir al directorio 'app' y allí está el archivo root.jsx. Entonces, aquí, oh, lo siento, este menú está sobrescribiendo. Vamos a llamar a una API especial que en realidad proviene de lo que instalamos, el SDK de Storyblock React. Voy a copiar y pegar. Y por cierto, para que no te pierdas en lo que estoy hablando, si vas a la página de Notion, voy a mostrar eso. Estamos casi aquí. Estamos aquí. Todos estos enlaces, que parecen representar los componentes. Si haces clic allí, puedes ir directamente a este repositorio de la masterclass donde puedes copiar y pegar el código fuente del que estoy hablando. Espero haber agregado un par de cosas. Aquí, lo siento por esta ruta. No lo agregué, pero puedes ir fácilmente a este repositorio de la masterclass, ir a la carpeta 'app', ir al archivo route.jsx y tienes toda la información que necesitas. Esta es en realidad la versión completa de eso. Así que si obtienes algún tipo de error, asegúrate de venir aquí, copiar y pegar y luego verificar si funciona o no. De acuerdo. Esa fue una pequeña nota para ti y si abres este archivo route.jsx, por defecto, no importamos esta API especial a la que voy a llamar aquí. Permíteme mover esta vista aquí a la derecha. Un segundo, en realidad voy a importar estas tres API especiales que provienen de Storyblock React. Al hacerlo, lo que voy a hacer es, oh, espera, lo siento. Necesito inicializarlo en realidad. Un segundo, quiero asegurarme de un par de cosas. De acuerdo, estoy importando la API equivocada. Lo siento por eso. Debería ser esto. Lo siento, dos APIs. Esto es lo que estaba buscando, storyblock.init y API plugin. Y lo que voy a mostrarte es cómo inicializar para decirle a Storyblock que quiero usar la API de Storyblock para obtener los datos. Entonces, después de importar estas dos APIs a continuación, voy a pegar aquí. No te preocupes, ya tengo el token de clave de API de vista previa por defecto, en tu caso, es posible que no lo tengas. En este caso, tomé el token de clave de API de la interfaz de usuario de Storyblock. Así que voy a decirte dónde puedes obtener este valor porque es el valor más importante para crear una conexión entre tu Storyblock y Remix. Volviendo a la interfaz de usuario de Storyblock. Espero que sea esta. Volviendo o saliendo del editor visual. Y luego, si vas a la configuración en el lado izquierdo de la barra lateral, hay los tokens de acceso. Si vas a los tokens de acceso, verás uno, dos, tres tokens allí. Y por defecto, deberías tener disponible este token de nivel de acceso de vista previa. Así que eso es lo que quiero que copies y pegues en el código fuente. Hay un icono de copiar para copiar el valor. Volviendo a VSCode y cambia el valor. Si has copiado y pegado desde el repositorio de GitHub que compartimos contigo, cambia el valor aquí. No voy a hacer eso en realidad. Y aquí está el plugin de API que le estamos diciendo a Storyblock que realmente queremos usar las API que provienen de Storyblock para comenzar a obtener los datos allí. Y el valor de components es algo que vamos a definir más adelante. Ahora mismo no sabemos qué tipo de componentes queremos importar porque aún no hemos creado componentes dinámicos a nivel de código fuente. Cubriremos eso más adelante. Y luego, el primer paso para crear la conexión entre Storyblock y Remix está técnicamente hecho. Pero es posible que te arroje un error porque aún no hemos creado componentes dinámicos que deben definirse en algún directorio de componentes que debemos crear. Así que no queremos ver la vista previa en este punto, pero antes de hacer eso, vamos a instalar un par de configuraciones de estilos. Vamos a usar Tailwind CSS. Y aquí está el enlace para, digamos, toda la información para Remix. Si sigues este enlace, deberías ver toda la configuración necesaria precisamente para Remix. Puedes ignorar el primer paso porque ya lo hicimos, pero en su lugar, primero, vamos a ir al segundo, diría yo, el comando de línea, y luego asegúrate de ejecutar estos comandos. Voy a hacer eso. Asegúrate de copiar y luego ejecutarlo aquí, y luego está el comando init. Debería crear un nuevo archivo llamado tailwindconfig.js, supongo, el archivo de configuración de Tailwind.

Entiendo que puede llevar un poco de tiempo, pero creo que también podrías necesitar unos segundos para completar la instalación. Avísame si hasta ahora tienes algún problema con la sesión de preguntas y respuestas, Facundo y yo estaremos encantados de responder.

De acuerdo, no veo algunos de los próximos comentarios en el chat. Hemos instalado en realidad un par de paquetes aquí. En realidad, no se muestra, pero instalamos Tailwind CSS, en primer lugar. Y luego, como Post CSS, hay una configuración de ES, Autoprefixer, cosas así. Ya hemos inicializado el archivo de configuración y volvemos a la página de configuración de Tailwind y Remix. En este archivo de configuración de Tailwind (tailwind.config.js) que deberías tener ahora después del comando init, puedes copiarlo al portapapeles y luego abrir este archivo de configuración de Tailwind y pegarlo así. Ya puedes guardarlo. Después de eso, vamos a verificar qué más necesitamos configurar. Sí, en el package.json, vamos a modificar un poco los scripts de npm para que no necesitemos, ya sabes, abrir varias terminales para ejecutar estos comandos. Así que vamos a copiar eso. Voy a copiarlo aquí y luego abrir este package.json aquí. Voy a asegurarme de hacerlo correctamente con mi hoja de trucos que no has visto. Creo que lo estamos haciendo bien. Sí, asegúrate de guardarlo. Y luego, hay algunos pasos más que debemos seguir en esta página de configuración de Tailwind y Remix. Así que debemos agregar este archivo app.css en el directorio de estilos que creaste y llamarlo app.css. Voy a mostrarte dónde debes hacer eso. Pero para ahorrar tiempo, voy a copiarlo de mi hoja de trucos y luego pegarlo. Debes crear el directorio styles aquí en la raíz principal y, dentro de él, crear este nuevo archivo de estilos llamado app.css y copiar y pegar el contenido de esta página aquí y luego pegarlo. Después de eso, volvemos al archivo route.jsx, donde inicializamos Storyblock para decirle que queremos usar la API de Storyblock. Vamos a importar este estilo primero. Vamos a volver al archivo route.jsx. Voy a importarlo aquí. Y luego, necesitamos exportar, digamos, lo que importamos, es decir, esta hoja de estilos. También voy a echar un vistazo a mi hoja de trucos para no cometer errores. Así que voy a pegarlo debajo de la inicialización de Storyblock. Asegurémonos de que todo esté bien. Creo que el resto solo necesitamos construir el proceso y ver si está en marcha. La configuración de Tailwind CSS se ha completado. Si ves algún error o algo así, siempre puedes volver a esta página de configuración de Tailwind y Remix y asegurarte de que no haya errores tipográficos o definiciones en diferentes niveles de directorio. Veo algunos comentarios. De acuerdo. Kevin, no puedes ver tu proyecto en Storyblock. Zika también. Permíteme leer primero qué está sucediendo en el chat. Oh, lamento escuchar eso, Chris, por el incidente. Oh, de acuerdo, de acuerdo. Estabas hablando de configurar la ruta real. Permíteme volver al editor visual. Aquí está, sí, lo que mostramos antes. Así que ve a la configuración de entrada desde el contenido y selecciona la historia de inicio. Y luego, aquí, verás la configuración de entrada. Bajando, está la ruta real. Por defecto, está vacía, pero en lugar de eso, si arreglas este error para forzar que sea solo una barra diagonal, en lugar de tener la página de inicio, haz clic en el botón de guardar y debería eliminar la ruta innecesaria de inicio de aquí. Espero que eso te ayude a ver la página o la vista previa que necesitas ver. De acuerdo, si aún tienes algún problema para previsualizar el proyecto, avísanos a través del chat. Facundo o yo lo revisaremos. Espero que todos estén siguiendo. Hasta ahora, hemos configurado los enlaces entre tu aplicación de Remix y el editor visual de Storyblock. Hemos inicializado la API de Storyblock para comenzar a obtener los datos y hemos implementado la configuración de Tailwind CSS. De acuerdo, a continuación, vamos a crear los componentes. Lo que te sugeriría es que abras, no sé, en algún lugar del navegador donde puedas ver. Ve a esta parte de Crear Componentes de React. Verás que he vinculado un repositorio de GitHub dedicado. Si haces clic en el componente de página, que voy a crear contigo en unos segundos, podrás ver lo que realmente necesitas escribir en el código. Pero, por supuesto, si escribimos el código desde cero, a veces cometemos errores tipográficos o nos olvidamos de algo. Para evitar eso, lo importante es que sigamos juntos. Asegúrate de copiar y pegar en el código fuente. Lo que voy a hacer es volver al editor visual y, en mi caso, voy a... Espera, primero voy a copiar. Pero en el directorio de la aplicación, voy a crear una nueva carpeta llamada... enFullNames en este caso. Asegúrate de que sea en plural. Y luego, aquí, puedes crear el nuevo archivo que se llama page.js. Voy a pegarlo, en realidad, para ahorrar tiempo. Y como te mostré antes, puedes copiar y pegar desde donde puedes encontrar todos los enlaces a los repositorios de GitHub dedicados en cada código fuente. Esto es lo que puedes pegar aquí. Y aquí, vamos a crear otro archivo de componente llamado teaser.

Lo que puedes hacer es ir a la página de Notion, hacer clic en este teaser, y luego... Voy a borrar eso. Y luego copiar el componente que puedes ver aquí, crear el archivo teaser en el directorio Android de los componentes, y luego pegarlo. En realidad, voy a copiar de mi hoja de trucos y pegarlo. Eso es lo que puedes hacer. Y tenemos algunos componentes más que queremos crear, el siguiente será un grid. Así que volviendo a Notion, tabla de contenidos, haz clic en este grid y luego copia el código, ve a VS code, directorio Android de los componentes. Puedes crear un nuevo archivo llamado grid. En este caso, voy a copiar y pegar. Así que puedes pegar el código en este archivo de componentes grid.

Por último, para este paso, volviendo de nuevo a Notion, ve al enlace de features. Así puedes acceder al archivo de componentes de features. Asegúrate de copiar el código fuente de aquí. Después de eso, puedes volver a VS code y en el mismo directorio de components. Puedes crear un nuevo archivo con el nombre feature. En este caso, voy a copiar y pegar el atajo, el tiempo, y puedes pegar el código que copiaste del repositorio de GitHub aquí. Sé que fue bastante rápido, pero en este punto tenemos cuatro archivos de componentes dinámicos que existen en nuestra aplicación Remix. Pero necesitamos, de alguna manera, llamar o importar al menos. Y para hacer eso, he dejado una explicación aquí volviendo al archivo root.jsx. Voy a cerrar esto, porque no es necesario. En el archivo root.jsx, del que aún no he mencionado nada sobre el componente. Aquí es donde vamos a modificar eso. Y para hacerlo, en lugar de, ya sabes, llenar algunas líneas de código dentro de la API de inicialización de Storyblock, vamos a crear una, diría yo, una variable constante que almacene un objeto y el nombre de estos componentes. Pero aún no ves algunos, como, correcto, diría yo, resaltados de fragmentos de código porque aún no he importado todos estos archivos de componentes dinámicos. Para hacerlo, puedes abrir el archivo root.js. j.s.x del repositorio de GitHub, y puedes copiar y pegar. Diría que aquí hasta aquí. Sí, aquí hasta aquí. Supongo que esta es una versión completa del repositorio de GitHub. Así que ya tienes algunos otros componentes, pero hasta ahora puedes copiar estas cuatro líneas de la línea 13 a la 16, y puedes copiar. Voy a copiar y luego pegarlo arriba. Así que tengo algunos componentes que aún no he creado, así que los voy a borrar por un momento. Eso es lo que voy a importar. Y luego voy a guardar este archivo, y espero que todos estén siguiendo hasta ahora. Avísame si algo no está claro. Voy a revisar este chat aquí. Gracias en Notion por los componentes que no están activos, el enlace no funciona. OK, page, grid, etc. Hmm, eso es extraño. Hmm, el punto es que puedes ir a este repositorio de GitHub. Y luego puedes ir al directorio components aquí. Y hasta ahora hemos creado un feature, grid, page, y teaser. Puedes entrar y copiar y pegar el código fuente. Sí, para algunos funciona, para otros no. No estoy seguro de cuál es el problema aquí, pero no creo que tengas problemas para acceder a este repositorio de GitHub. Pero si los tienes, avísanos. OK, si alguien todavía necesita tiempo, avísanos. Pero si no, puedo pasar al siguiente paso. Y luego, después de unos pasos más, vamos a tener un descanso rápido de cinco a diez minutos, diría yo, porque estamos atrasados, estamos fuera del horario. Ahora hemos editado el archivo root.jsx. Y a continuación, vamos a ir a los directorios de la aplicación routes. Ábrelo aquí. Y hay un archivo index.jsx. Deberías tenerlo por defecto. Y aquí, lo que voy a hacer es que, puedes ir aquí a las rutas desde la URL del repositorio de GitHub. Y hay un archivo index.jsx. No te preocupes por el otro archivo que ya existe aquí. Lo vamos a crear en un minuto más o menos. Así que cambia el código existente por esta única línea de código. Así que voy a hacer exactamente eso. Será solo esta línea de código. Y habrá más configuración para el otro archivo que viste en el mismo directorio aquí. En este punto, diría que si echamos un vistazo a la página de inicio aquí, veamos la vista previa en el editor visual. Así que voy a ejecutar npm run dev. Luego deberíamos poder ver la vista previa desde Storyblock. Así que volvamos a nuestro proyecto de Storyblock. Se está recargando de alguna manera. No tienes que recargar, en realidad solo necesitas hacer clic en esta recarga si estás trabajando con localhost, así que debería activar la recarga para ti. Sí, me muestra Bienvenido a Remix. En realidad debería mostrarme los componentes que están definidos.

Un segundo, puede que haya configurado algo mal en este caso. Sí, también deberíamos tener Tail Wind. Deberíamos tener el Componente Dinámico. Debería renderizarse, pero de alguna manera no lo detecta. El Token de Acceso debería ser correcto. Sí, es el mismo. Se está cargando el servidor de componentes. Sí, por supuesto, aún no he creado este archivo específico de rutas con asterisco ($)? Eso es lo que podría costar, y veo un par de preguntas. OK, sí, sí, sí, si usas el bloqueador de anuncios, diría que el editor visual podría no funcionar, así que asegúrate de desactivar el escudo para Storyblock. Y si estás obteniendo el error, y components no está definido en el JSX raíz. Sí, estoy pensando que probablemente configuramos el archivo index.jsx de esta manera para dirigirnos a este archivo que aún no hemos creado, así que eso es lo que vamos a seguir. Así que vamos a ir a. En realidad, este paso, así. Tuvimos un descanso aquí, así que vamos a ir a este archivo create. Up, roads, single dollar sign, archivo jsx que utiliza estas rutas con asterisco ($). Y si quieres echar un vistazo a esto, los brotes negros remix tienen realmente una buena documentación completa, así que te recomiendo que le eches un vistazo. Y la razón por la que lo usamos es que queremos que, digamos, quienes usen el contenido desde la interfaz de Storyblock puedan crear diseños anidados o no anidados, cualquier tipo de diseño de ruta en su extremo. Así que solo necesitamos invertir nuestro tiempo una vez para implementar la función y el resto estará en manos de los editores de contenido, por lo que puedes ir a este enlace y copiar. Y pegar todo, de hecho, porque podríamos necesitar acelerar un poco y también queremos evitar fallas por algún error inesperado. Así que copiemos todo. Y luego vamos a crear este archivo single dollar sign en JSX en el directorio que ya tienes. Se llama rutas, así que voy a tomar mi hoja de trucos. No lo estamos fallando y voy a pegarlo. En la ruta, puedes crear un nuevo archivo en mi caso, voy a pegarlo, así que hay un par de APIs que, de nuevo, provienen de nuestro SDK de Storyblock react. Y la parte importante es que, en primer lugar, queremos cargar los datos desde el lado de Storyblock y hay un hook personalizado que ya hemos implementado y proporcionado desde el sitio del SDK de react. Así que no necesitas hacer el trabajo extra en tu extremo. Y esto es lo que pasas. Guardando. Está listo. Entonces, lo siento, ¿tienen alguna pregunta? OK, si tienen alguna, avísenme, OK donde estaba, sí, aquí, así que. Esta variable story contendría el valor del hook personalizado con el que estás tratando los eventos como entrada o publicado y publicado en segundo plano, por lo que se cargará. Diría que JS bridge, que es el conjunto de herramientas que proporcionamos desde otro SDK, pero no tienes que lidiar con eso porque eso es lo que este SDK de Storyblock react se encarga de ello, y todo lo que necesitas hacer es pasar las props al bloque prop aquí. Y la razón por la que ya sé esto, el resto de la ruta de los datos para continuar después de story debería ser el contenido. Es porque vimos juntos en el principio uno de los archivos Jason, ¿verdad? Y ahí es donde puedes ver toda la ruta de los datos que debería seguir comenzando desde story, y luego está el contenido, y luego habrá como todos los componentes dinámicos con la ruta de los datos que puedes ver allí. Así que por eso dije al principio que este archivo Jason, especialmente el archivo Jason de borrador, sería como tu mejor amigo mientras trabajas en esto porque puedes ver toda la ruta en él. Bien, ¿qué estamos manejando aquí? Estoy seguro de que si explico un poco más en detalle cuando vamos a manejar e implementar como rutas con asterisco dinámicas, no las dinámicas. Lo siento, quiero decir que es dinámico, pero esta función de rutas con asterisco está en eso y soy el único que ya no puede escucharte. Oh. Déjame verificar si mi micrófono está silenciado. No está silenciado. ¿Todos pueden escucharme? Yo puedo escuchar. Puedo escuchar a ambos. OK, OK, ¿te importa volver a unirte? No estoy seguro si eso ayuda o no, pero. No estoy seguro. Sí, o tal vez el dispositivo para captar el sonido no se detecta. Sí. OK, si voy a escribir rápidamente a Freddie que tal vez verifique el dispositivo al que está conectada para escuchar el sonido. OK. Actio's error sí, sí, sí. Sí, recibimos algunos informes de error de Actio's. ¿Puedes decirnos qué versión de Actio's estás instalando? Porque creo que hay un problema con. Una de las últimas versiones de Actio's que debemos verificar. Sí, verifiquemos. Sí, y lo que dice Britney es correcto. Quiero decir, estamos trabajando en eliminar la dependencia de Axios muy pronto. Diría que en las próximas semanas no necesitarás instalar Axios porque estamos mejorando nuestro cliente. Sí, dame un segundo para confirmar contigo cuál es la última versión de Axios que tienes. Si puedes instalar la 1.1 1.1 punto dos, eso debería funcionar, así que el problema ocurre con la última versión. OK, gracias por la información Huckündo. Si alguno de ustedes tiene aún más problemas o errores de Axios, avísenos. La versión 1.2 funciona. Sí, avísanos después de cambiar la versión de Axios. Si no funciona, avísanos. Sí, bien, entonces, ¿dónde estaba? Sí, creamos este archivo específico de rutas con asterisco ($) en el directorio de rutas. Y lo que vamos a hacer. Es que vamos a crear un par de componentes más de react porque vamos a crear una aplicación de blog, por lo que queremos organizar un par de diseños. Los componentes globales, como la navegación para el encabezado y el pie de página. Así que primero voy a crear el código para eso y luego más adelante vamos a ver la vista previa. Entonces después de eso, voy a pasarle el control a Facundo.

Muy bien, vamos a empezar con el diseño. Puedes copiar este código. Luego crea el archivo del componente de diseño en el directorio de componentes de Android. Justo aquí. En mi caso. Voy a pegarlo aquí, pero puedes crear un archivo nuevo. Pégalo aquí para que puedas pegar el archivo aquí.

A continuación, vamos a crear la navegación yendo a la página de Notion y luego vamos a crear una navegación. Así que voy a abrir. La navegación, es un poco largo, pero puedes copiar y pegar todo. No hay necesidad de codificar todo aquí en este taller. Así que simplemente copia esta navegación. Volviendo al VS Code en mi caso nuevamente. Nuevamente, voy a copiar en tu caso. Puedes crear un archivo nuevo en el directorio de componentes, así que voy a pegarlo aquí. Así que todos deberían tener el código necesario para la navegación. Luego, volvemos a la página de Notion. Debería haber un pie de página. Así que voy a abrir este enlace del pie de página. Copia el código. Nuevamente, esto es algo en lo que no necesitas perder tiempo codificando, así que simplemente cópialo en mi caso. Voy a copiarlo. Y pegarlo en el directorio de componentes. Puedes crear un nuevo archivo de pie de página. Para que tengas el archivo necesario para el pie de página. Volviendo nuevamente a la página de Notion. Podemos incluir el diseño en la ruta dinámica que también tienes. Nuevamente, otro enlace, así que haz clic aquí. Te llevará a una línea específica del código al que quiero que prestes atención. Aquí es donde queremos importar y aquí es donde queremos llamar al componente de diseño. Por lo tanto, puedes copiar una línea aquí. O ya tienes, de hecho, lo que ya has copiado y pegado antes. Así que debería mostrarse aquí. Y supongo que ya tienes el diseño. Si has copiado y pegado desde el informe de GitHub. Por último, vamos a crear un nuevo componente, pero se llama sección de héroe como puedes ver en la página de Notion. Ya hemos creado este nuevo componente al principio. Así que lo que vamos a hacer es crear el archivo del componente de sección de héroe. Nuevamente, tienes el enlace aquí, así que al hacer clic en él te llevará al archivo del componente donde puedes copiar todo lo que necesitas. Así que asegúrate de copiar eso y volver al VS Code. Y puedes crear este archivo del componente de sección de héroe en el directorio de componentes. Puedes crearlo eligiendo un archivo nuevo o voy a pegarlo en este caso. Luego tienes todo lo que necesitas. Solo una información rápida sobre esta prop de blog, pero esta prop de blog contiene los valores que serían como todos los valores que viste en el archivo Jason de borrador. Justo aquí. Así que la ruta de datos comienza desde story y ahí está el contenido, y eso es lo que te mostré al principio. Por eso ya sé el resto de la ruta de datos que sigue desde el contenido y luego está el cuerpo. Por eso puedes mapear el resto de los valores que son los objetos de componentes. Por eso ya lo sabía. Así que hasta este cuerpo, digamos que la capa de ruta de datos de data ya la has configurado desde, digamos, como en el archivo root o en el archivo index.jsx, y solo necesitas agregar los adicionales, como la imagen, para renderizar el componente de imagen o el nombre del título o el subtítulo. Y eso es lo que todos están viendo aquí en este caso. Así que volviendo a la página de Notion aquí, y eso es lo que queremos explicar. Justo aquí, pero puedes echar un vistazo más adelante en el taller y podemos usar todos estos componentes que hemos instalado. El story block en sí significa. Está en el archivo route.jsx, por lo que en realidad necesitamos importar este componente de sección de héroe que hemos creado, así que en realidad voy a copiar ese valor. Voy al archivo route.jsx del VS Code que está aquí. Luego vamos a importarlo. Por supuesto, lo incluiremos. En los componentes aquí. Así que voy a copiar aquí. Y pegarlo. Asegúrate de que aquí esté el nombre técnico que debe definirse desde la interfaz de usuario de Storyblock. Aquí está el nombre del componente que puedes almacenar. Y guardo los cambios. Y veamos. En este caso, aún no has agregado la sección de héroe. Voy a minimizar. Aquí está la sección de héroe que puedes agregar y para hacer eso.

Creo que hasta ahora no has visto ningún componente listado en la página de inicio. Si ves este botón de agregar bloque, significa que has podido definir correctamente. Ya sabes, como este cuerpo. Sube el cuerpo. Digamos que el tipo de campo debe ser bloques. Recuerda este tipo de campo especial y puedes hacer clic en bloque y desde aquí ya has creado el componente de sección de héroe en la interfaz de usuario de Storyblock, así que eso es lo que puedes seleccionar haciendo clic. Luego, aquí después de eso puedes ver que la sección de héroe debe mostrarse dentro. Y aquí ya puedes comenzar a completar los valores, como el título que puede ser cualquier cosa que desees, el subtítulo, puedes completar cualquier cosa que desees, la imagen. Puedes cargarla fácilmente desde nuestros activos. No necesitas configurarlo. Ya tienes la función de activos disponible, así que simplemente haz clic en este tipo de campo de imagen y este tipo de campo de imagen y luego agrega la imagen aquí.

A partir de ahora, será más como una configuración de blog, incluyendo cómo renderizar el texto enriquecido, cosas así, y creo que el resto del contenido le corresponde a Facundo. Pero debo admitir que tenemos un horario muy ajustado, así que quiero asegurarme de que todavía tengas tres minutos para estar con nosotros, siéntete libre de quedarte con nosotros. Y si no tienes tiempo, lamento haber excedido nuestro tiempo, pero la grabación estará disponible para que puedas revisarla más tarde. Sí, lo siento Aresa, lo que iba a decir es que, sinceramente, aparte del editor de texto enriquecido, no creo que estemos introduciendo ningún otro concepto destacado en la política que quede del tutorial. Mostraré rápidamente cómo hacerlo, pero lo que quería decir es que creo que desde un punto de vista de aprendizaje, lo que explicarías son los conceptos básicos para entender cómo conectar Storyblock al proyecto, por lo que una vez que las personas tengan acceso al repositorio de GitHub y al código de los artículos y las partes del proyecto, probablemente seguir eso no sería complicado, digamos puedo compartir mi pantalla y mostrar eso principalmente para mencionar el editor de texto enriquecido y una parte en la que estamos cargando obteniendo datos de Storyblock que me gustaría dejar como tarea para las personas y que compartan con nosotros cómo lo harían o cómo resolverían un escenario que hicimos de cierta manera en el taller, creo que se puede hacer de una manera diferente usando Remix. Así que me gustaría compartir eso y pedirle a la gente que. Y ver si pueden resolver ese escenario y compartir con nosotros la solución, si está bien, sí. Sí, por supuesto. Entonces, con eso, ¿quieres decir que quieres tomar el control a partir de ahora o puedo mostrar un poco, sabes, sería más fácil. Aquí, creo, sí, lo siento, tenemos una pregunta de Serban que dice eso. Está recibiendo un error que dice que. No puedes usar la API de Storyblock si no estás cargando el complemento de la API. No sé si hay algún otro problema. Quiero decir, el código que creaste se ve exactamente igual que el del repositorio. Sí, lo siento, entonces, tener el en archivo raíz es exactamente lo mismo. Entonces, mi pregunta era si cargar ese complemento de API implica algo más o pasar como un parámetro allí para el storybook en sí es suficiente. Quiero decir, lo importaste, sí. OK, OK, entonces importas el complemento de la API y luego lo envías como parámetro a la función init de Storyblock. Sinceramente, creo que no es necesario hacer nada más. Sí, y la razón por la que dejamos la opción de usar este complemento de API o configurarlo a tu manera es que en caso de que decidas no usar la API de Storyblock para obtener los datos, dejamos opciones para eso. Pero en la mayoría de los casos, es posible que desees usar una forma fácil o simple. Por lo tanto, en realidad no se necesita mucha configuración complicada para eso. Entonces, el punto es, debes tener el valor del complemento de API almacenado en la propiedad de uso, y también necesito ver cómo se verá mi vista previa actual. Y luego, ¿tienes algún otro error que aparezca en tu lado? Serban? Bueno, este es el más descriptivo, y también dice que ocurre en el cargador que definimos. Y exportamos en el archivo index en rutas. Pero sí, eso es básicamente donde estamos intentando usar get storyblock y eso es lo que lo está causando. No estoy seguro, tal vez pueda intentar lo siento y estás ejecutando la función init de Storyblock fuera de la función de la aplicación, ¿verdad? Sí, sí, bueno, eso es extraño. Sí, puedo seguir buscando un poco y luego puedes continuar y tal vez al final podemos ver si no logro nada. No logro nada. Sí, claro, sí, gracias. Gracias a todos.

De acuerdo, con eso me diste una buena pista. Puede que tenga algo. Aún no lo he configurado o me lo he saltado en la ruta. Como que estaba copiando y pegando parcialmente. Pero veamos primero cómo se verá. Editor visual. Sí, de acuerdo, así que en mi caso, siguiendo lo que vimos, digamos que todos estos enlaces dirigidos a los archivos de cada componente. Puedo ver la vista previa. O la edición en tiempo real, la función de edición visual en tiempo real funcionando. Así que espero que también tengas la misma función disponible. Si hago clic dentro del rango de este contenedor con líneas punteadas. Luego detectará el evento de clic y me permitirá mostrarlo. Así que detectará el evento de clic y saltará a donde sea que esté anidado. Digamos el componente donde seleccioné hacer el cambio de contenido. Así que en este punto creo que sí, tengo la función de edición en tiempo real porque hemos llamado a un gancho personalizado llamado useStoryblock y esto tiene toda clase de lógica detrás. Digamos que maneja todas estas entradas, publicaciones y eventos de publicación que vienen a través del otro SDK llamado JS Bridge. Y por eso ves la lógica aquí. Así que avísanos si tienes otras preguntas o si aparece algún error. Luego, a menos que pueda pasarle a Facundo. Después de mí, ¿de acuerdo? Lo siento por dejarte, pero sí, nos vemos pronto. De acuerdo. Probablemente podamos continuar con tu pantalla. No sé qué piensas al respecto, así que no tengo que cambiar. Ir y venir o prefieres que tome la iniciativa, como prefieras. No te preocupes, podemos revisar primero el texto enriquecido, sí, sí, y luego pasar a la... Lo que estoy pensando es que es posible que no tengamos suficiente tiempo, ya que solo tenemos unos minutos para revisar y completar el bloque. Pero ¿qué prefieren todos ustedes? ¿Quieren...? Lo que quería hacer o si van a la página de Notion ahora verán que el siguiente paso es crear. Crear una carpeta de bloque que ya hicimos en el espacio, luego instalar el renderizador de texto enriquecido de Storyblock. Probablemente puedas abrir ese enlace porque quería hablar de eso. El renderizador de texto enriquecido de Storyblock es porque, como habrás visto, cuando creé el tipo de contenido para el artículo. Cuando tenemos, hay un campo llamado contenido que tiene texto enriquecido. Quiero decir, en Storyblock puedes agregar texto a esa propiedad y agregar formato a esa propiedad. Puedes establecer la fuente en negrita o cursiva. Si quieres agregar el título, si quieres tener el párrafo, quiero decir, puedes agregar estilos HTML al contenido que estás creando en el editor de texto enriquecido. Lo que sucede es que en Storyblock, un texto enriquecido es una historia en esa información como un objeto JSON. ¿Cómo le decimos al frontend de nuestro tipo de contenido qué contenido necesitamos renderizar? Porque como somos headless, no queremos guardar el estilo de ese texto enriquecido como HTML porque puede ser diferente al HTML. Si estamos usando ese texto enriquecido en otras capas de presentación, probablemente van a usar un concepto diferente en lugar de HTML. Entonces, si vas, por ejemplo, digo si vas a uno de los blogs que tenemos en el espacio. Pero podemos ver que si vas al blog y abres cualquier artículo, digamos blog uno o tres, es lo mismo. Lo que quería mostrar es que. Si, um, se está cargando, esto no, no. Este es un espacio en progreso, es por eso que no ves el contenido porque aún no lo hemos. En primer lugar, deberías ver eso para crear esta carpeta de blog juntas, técnicamente tengo, técnicamente tengo porque uso el enlace mágico que todos no pudieron, ya sabes, usarlo. Razón personal. Por eso lo tengo, pero solo para darte el contexto, íbamos a crear la carpeta desde este icono plus, elegir la carpeta, darle un nombre como blog. Y simplemente presionar el botón de crear y luego tendrás un nuevo blog y dentro y aquí por defecto. Por supuesto, no tienes las páginas, por eso vas a crear nuevamente otra historia. Y le das el nombre como love one. No uno. Love uno algo así y eso es lo que omitimos, lo siento, en esta explicación, pero después de seguir esta forma de crear el blog, cada página. Asegúrate de que el tipo de contenido sea artículo, no la página, así que ese es el punto que creamos este componente de contenido de artículo y presionamos el botón de crear, luego puedes hacer lo mismo para el resto de los dos. Esta página de descripción general del blog debería seguir el título del contenido de la página. Lo siento, eso fue lo que faltó y está en progreso. Está bien, solo ves los componentes globales que creamos estáticamente, lo siento por molestarte, Facundo. No, no, no, no. Está bien, lo que quería mencionar es que si ves en el lado derecho el texto enriquecido que estamos configurando con estilo en negrita, en cursiva, etc. Si vas a abrir el objeto JSON que representa esta historia, verás cómo se estructura el texto enriquecido en Storyblock porque no es contenido HTML que se muestra usando CSS o escribiendo HTML como puedes ver, un texto enriquecido no es. Como puedes ver, un campo de texto enriquecido se ve así con las marcas con el tipo de fuente que estamos agregando. Si estamos agregando diferentes párrafos y esta es la lógica que el renderizador de texto enriquecido que estamos instalando. Quiero decir, el paquete que estamos usando pasará y luego, según el contenido que el renderizador esté analizando, aplicaremos el formato correcto. Por eso necesitamos otro. Otro paquete que se instale. Este renderizador de texto enriquecido de Storyblock que puedes ver nuevamente. Si vas al componente de artículo, verás que estamos usando eso.

Si quieres leer más, puedes ir al repositorio de GitHub para el paquete y leer más al respecto. Muy bien. Gracias. Hemos cubierto el contenido de texto enriquecido. Sí. Si ves, nuevamente la estructura de las historias, el artículo y la página de artículos antiguos, todos ellos son componentes y estructuras que creamos. La tarea que quería pedir a las personas hacer después de que termine la masterclass. Sería genial si puedes compartir eso con nosotros. Si vas al componente de artículos antiguos en React, probablemente puedas mostrarlo si vas a la página del blog. Ahora, no sé quién eres. Nos falta eso. Si vas a la primera página, la página del blog. Esta. Sí, si abres eso, probablemente no tengamos nada. No, no, porque no creamos el enlace entre. Sí, sí. De acuerdo, entendido. Porque quería mostrar, probablemente puedas crear eso rápidamente y eso es lo último que veremos y dejaremos a las personas libres por hoy. De acuerdo. Un segundo. Quiero decir, solo copia el código y enlázalo en la función de inicio de sesión del servidor, ¿verdad? ¿No más que eso? Correcto, tal vez sea más rápido si compartes tu pantalla porque entiendo lo que estás diciendo, pero podría llevar un poco más de tiempo tomar una acción. ¿Qué dices? Sí, dame un segundo. Sí, no te preocupes. Voy a dejar de compartirlo. Lo siento. Oops. Oops. Un segundo. De acuerdo. Porque estoy tratando de, ahí vamos. No. ¿Tienes permiso, no? Sí, sí. Estaba tratando de hacer zoom... Sí, ahora puedo ver. Ahí vamos. ¿Puedes ver mi... Podemos ver tu VS Code. Genial. Entonces, lo que quería mostrarte es que voy a ejecutar npm rundev. El componente que estamos creando es este componente de artículos antiguos que puedes ver aquí. Lo que estamos haciendo aquí es básicamente listar todos los artículos que tenemos en nuestro sitio web con este componente llamado teaser de artículo. Este teaser de artículo es un pequeño componente que estamos usando que... Nuevamente, estamos usando esta función de renderizado del renderizador de texto enriquecido de Storyblock para renderizar el contenido del artículo que es un campo de tipo texto enriquecido. Y esto es como una vista previa de cada uno de los artículos que tenemos en nuestro sitio web. Estamos usando esta tarjeta, digamos, para mostrar la información principal sobre cada uno de los artículos que tenemos en nuestro espacio. Y en este componente de todos los artículos, lo que estamos haciendo es básicamente crear una lista de artículos basada en lo que tenemos en nuestro espacio. Si abro esta URL, verás que aquí, la abro y voy al blog. Y como puedes ver, estamos listando los tres tipos diferentes de blogs, lo siento, los tres artículos diferentes que tenemos en nuestro sitio web. Si hago clic en cada uno de ellos, somos redirigidos a la página del artículo que muestra cómo crearlo. Pero la parte importante, lo que quería mostrarte es que esta lista se renderiza dinámicamente con todo el contenido que tenemos en Storyblock. Quiero decir, esto no es un con. Quiero decir, no estamos creando esa lista de artículos en Storyblock manualmente. Esto se genera automáticamente con todos los artículos que tenemos en nuestro sitio web. Y la forma de obtener esa lista es llamando a la API de Storyblock y obteniendo todas las historias que están dentro de la carpeta de blogs. Y eso no es la página principal del blog, que es la que realmente lista todos los artículos. Lo que quería pedirte como tarea es que, como puedes ver aquí, estamos listando todos los artículos dentro de los componentes de React. Entonces, la obtención que estamos haciendo utiliza el hook useState y el hook useEffect para llamar a la función fetch, quiero decir, para obtener los datos dentro del componente React. Por lo tanto, esto sucede en el lado del cliente. Estamos listando todos los artículos en el lado del cliente cada vez que actualizamos la página o cada vez que visitamos nuestra página. Lo que creo que se puede hacer y sería genial si puedes hacerlo y compartir la solución con nosotros es cómo implementar esto utilizando Remix porque podemos usar las funciones de carga y ejecutar toda esta lógica en el lado del servidor y simplemente devolver los artículos que queremos mostrar a la función que va a renderizar el contenido pero haciendo la llamada a la API de Storyblock en el lado del servidor utilizando una función de carga. Si vas al repositorio de GitHub, podrás ver todo el código que te estoy mostrando ahora en el repositorio. Pero lo que quería pedirte que intentes es si puedes extraer esto de este componente de React. Entonces, lo único que tendrá el componente de todos los artículos será una lista de artículos que proviene del lado del servidor. Estamos llamando al API de Storyblock en el servidor y obteniendo todos los artículos. Eso es básicamente lo que quería pedirte si quieres, por supuesto, ¿verdad? Pero sí, aparte de eso, creo que hemos cubierto todo, ¿verdad? O al menos la parte principal para conectar a Storyblock para conectar una aplicación de Remix a Storyblock. No sé si tienes alguna pregunta en particular sobre lo que vimos, déjame... Oh, gracias. Sí. Muchas personas ya necesitan irse. Y lamento mucho que hayamos excedido más de 10 minutos de la masterclass. Y sí, espero que no hayamos ido demasiado rápido aunque extendimos un poco el tiempo. Y sí, siempre tratamos de hacer lo mejor pero suceden cosas inesperadas, pero no dudes en contactarnos en Twitter o incluso, digamos, si nos has visto en algún lugar, digamos, no sé, en línea o en conferencias, yo también estaré en la conferencia. Habrá una sesión de preguntas y respuestas en vivo basada en mi charla pero si tienes alguna pregunta relacionada con esta masterclass, estaré encantado de responder. De hecho, será más de 10 minutos de la larga sesión de preguntas y respuestas, así que sí, estaré feliz de verte allí y sí, tener una charla allí. Espero que el contenido haya sido útil y te hayas divertido. Nuevamente, avísanos si tienes alguna pregunta y no dudes en compartir el progreso actual en Twitter o compartir tu repositorio de GitHub con el progreso actual y estaremos encantados de verlo.