React Day Berlin 2023

React Day Berlin 2023

Versión en Español

Curso intensivo sobre Astro y Storyblok

Arisa Fukuzaki

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.

En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.

Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.

- Domina los fundamentos de CMS sin cabeza

- Domina un enfoque de Astro & CMS sin cabeza

- Usa el diseño atómico en tu aplicación Astro & Storyblok

- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

astro headless cms

Arisa Fukuzaki

119 min

04 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass introduce Astro Storyblok y lo combina con el CMS sin cabeza, Storyblok. Cubre temas como CMS sin cabeza, JAMstack, y el uso del diseño atómico. Los participantes aprenden cómo configurar una cuenta de Storyblok, configurar la URL de vista previa e importar esquemas de componentes. También exploran la edición en tiempo real, los componentes anidados y los menús dinámicos. La masterclass concluye con la personalización de componentes existentes, la adición de imágenes y el uso del componente de imagen de Astro.

Available in English

1. Introducción a la Masterclass de Astro Storyblok

Short description:

Hola a todos. Gracias por unirse a mi masterclass sobre Astro Storyblok. En esta masterclass, exploraremos la introducción de Astra y lo combinaremos con el CMS sin cabeza, Storyblok. Utilizaremos el diseño atómico y construiremos una aplicación de blog juntos. Aunque no cubriremos la implementación, hay un tutorial práctico de Storyblok para que explores después de la masterclass. Comencemos evaluando su conocimiento sobre CMS sin cabeza. ¿Has oído hablar de algún CMS sin cabeza?

Hola a todos. Oficialmente, un gran día. Y muchas gracias por unirse a mi masterclass. Espero, sí, que estén emocionados, como yo. Esto es parte del Día de React en Berlín. No estoy en Berlín, técnicamente, en la conferencia. Pero si estás interesado, sé que tienen charlas muy interesantes y la conferencia en marcha. Y supongo que también tienen las charlas virtuales también. Asegúrate de echarle un vistazo. De todos modos, hoy nos reunimos para un curso intensivo en Astro Storyblok. Así que voy a empezar compartiendo uno. Diría que, como, no exactamente una hoja de trucos, pero podría ser una hoja de trucos. Así que durante esta masterclass, voy a estar usando esta página de notion y voy a compartir mi pantalla para mostrarles de qué estoy hablando. Es una página de notion. Pero tiene un montón de información que querrás saber mientras te unes a esta masterclass. Y también, hay muchas fuentes. No te preocupes por, ya sabes, que vaya rápido por ahora. Porque eso es algo de lo que vamos a hablar y ver de todos modos. Y aquí está el contenido de la masterclass. Así que voy a estar compartiendo bastante a menudo esta pantalla, la que te envié el enlace justo ahora. Si acabas de unirte y no puedes ver, digamos, la conversación pasada, por favor siéntete libre de escribir tu pregunta. Y también, no olvidar. Así que ya que estamos haciendo esto en línea, en su mayoría va a ser como yo compartiendo mi pantalla y mostrándote cómo también puedes, tú sabes, como, seguir junto conmigo. Y si tú, digamos, como, te quedas un poco atrás, no hay problema. Por eso tengo esta nota de notion para la masterclass, porque, déjame bajar un poco aquí. Así que aquí, desde aquí va a ser la parte práctica. Pero aquí tengo, como, un par de atajos, que también puedes echar un vistazo. Y luego en, diría que, como, cada parte, tengo, déjame bajar un poco aquí. Sí, esto aquí, como una pequeña nota, como cada parte al final, tengo algo que puedes, de hecho, como, bifurcar del repositorio de la masterclass, para que no te quedes, ya sabes, como, atrás. Y puedes simplemente, ya sabes, como, bifurcar la rama correcta, en la que estabas trabajando conmigo, y luego simplemente intercambiar ciertas claves, que también voy a explicarte. Así que esa es otra regla de la casa que quería mostrarte, de hecho, y decirte. Y este es el repositorio de la masterclass, que también voy a compartir contigo ahora. Así que, espero que puedas ver eso. Sí, diría que, como, cuando tienes acceso aquí, te recomendaría que abras esta página de notion para esta masterclass, para que, ya sabes, como, tengas todo el código fuente que puedes simplemente copiar y pegar, entonces no tendrías ningún error de tipeo. Y para empezar, primero que nada, el propósito de esta masterclass, muy rápidamente, es sumergirse en, ya sabes, la introducción de Astra. Así que, si eres totalmente nuevo en Astra, eso también está totalmente bien, pero no solo, ya sabes, sumergirse en el mundo de Astra, también vamos a combinarlo con el headless CMS, que va a ser un bloque de historias esta vez. Así que, con esta masterclass, podrás obtener los dos conocimientos a la vez. Así que, por eso, como, tenemos el, diría que, como, esquemas o una tabla de contenido para esta masterclass aquí, y vamos a usar el diseño atómico, y por eso elegí este headless CMS en este caso. Y luego, sí, vamos a ver el ejemplo de la aplicación de Astra y story block con Hands-On, no solo echándole un vistazo. Vamos a construir juntos. Así que, al final de esto, vamos a construir el blog. Digamos, sí, la aplicación de blog, que también puedes implementar más tarde. Pero en esta masterclass, digamos que desde el marco de tiempo que tenemos, no vamos a entrar en la implementación. Pero si estás interesado, hay la fuente, de hecho, el tutorial práctico que es proporcionado por el lado de story block. Así que, puedes, ya sabes, echarle un vistazo después de la masterclass e implementarlo. Bien. Así que, esa es la introducción. Y las fuentes, las voy a saltar, porque las vamos a cubrir de todos modos juntos en la masterclass. Pero para alinearnos con, digamos, como, tus niveles de conocimiento, quiero asegurarme primero de dónde podemos empezar, porque habrá diferentes puntos de partida, dependiendo de la audiencia de la masterclass. Así que, puedes participar para escribir tu respuesta, sí o no, a las preguntas que voy a hacerte. Así que, creo que voy a empezar desde aquí, como cuánto tienes el conocimiento sobre el headless CMS? ¿Conoces o has oído hablar de algún headless CMS? Headless sistema de gestión de contenidos. Puedes responderme sí o no en el chat. Y dependiendo de eso, voy a empezar desde algo muy básico, qué es headless CMS, o podemos pasar a la siguiente pregunta. Jumpstart. Okay. Veo no de Anna. Khan también dice no. Okay. Patricia también dice no. Okay. Veo algunos sí. Sí. Sí. Okay. Okay.

2. Introducción a CMS sin cabeza y JAMstack

Short description:

El CMS sin cabeza separa los lados de front-end y back-end, mejorando la seguridad y permitiendo flexibilidad en la elección de tecnologías de front-end. JAMstack, que significa JavaScript, API y Markup, interactúa con las API para obtener datos, evitando la interacción directa con las bases de datos. Storyblok es el CMS sin cabeza utilizado en esta masterclass. Crea una cuenta gratuita en el sitio web de Storyblok para continuar.

Mm-hmm. Lo conozco, pero no lo he probado. Bien. Veo una buena mezcla. Entonces, para ser más justo con todos, creo que voy a cubrir rápidamente qué es un headless CMS. La explicación más sencilla sería como la parte de la cabeza y la parte del cuerpo, que se podría traducir, digamos, como el lado del front-end y el lado del back-end. Estos no están en un solo lugar. Entonces, a diferencia del sistema de gestión de contenido monolítico como WordPress, Drupal, la arquitectura de headless CMS es que divides el lado del front-end y el lado del back-end. Entonces, desde la perspectiva de la seguridad, también es bastante más seguro porque, sabes, si quieres atacar con fines maliciosos, cosas así, entonces necesitas atacar varios lugares en lugar de solo uno. Entonces, de esta manera, también es mejor. Y lo bueno es que en el mundo monolítico, tienes que ceñirte a cierta tecnología como PHP, cosas así. Pero con el headless CMS, porque interactúas, sabes, para obtener los datos a través de las API. Y quiero decir, el lado del front-end es completamente, sabes, agnóstico del lado del back-end, por lo que puedes elegir cualquier tipo de, la mayoría de, las tecnologías de front-end. Por eso puedes, sabes, usar headless CMS con Astro, como en la masterclass de hoy. Entonces, sí, eso es algo que puedo decir muy rápidamente.

Bien. Entonces, la siguiente pregunta, cubrimos esta parte. Y diría, ¿conoces JAMstack? Puedes decir sí o no en el chat. Y dependiendo de eso, decidiré ir a esta parte o esta parte. Bien. Bien. Veo, sí. Mayormente no hasta ahora. Sí, solo he oído hablar de ello. Veo algunos sí. Bien. Entonces también voy a cubrir rápidamente eso. Y sí. Ah, por cierto, olvidé decirte, pero estos son en realidad los enlaces que puedes ver más tarde. Entonces, si no entiendes, digamos, lo que expliqué rápidamente, entonces siempre puedes, sabes, venir a esos enlaces. Estos son videos muy rápidos que también puedes ver. El video no está disponible. Oh, ¿no está disponible? Déjame comprobar rápidamente. Oh, no. Eso es muy malo. Bien. Lo siento por eso. Creé este contenido en realidad no hace mucho tiempo. En ese momento estaba funcionando. Pero, de todos modos, voy a encontrar uno mejor para ti después de la masterclass. Pero, de todos modos, el JAMstack es, en primer lugar, como, JAM de JAMstack, en primer lugar, significa JavaScript y la A significa API y la M significa Markup. Y entonces, lo que pasa es que interactúas con las API para obtener los datos. Entonces, no va a ser, como, sabes, en el mundo monolítico que necesitas interactuar directamente con las bases de datos. Y probablemente hayas visto algunos de los casos o hayas oído hablar de los casos en que los usuarios no desarrolladores también tienen acceso a esas bases de datos. Y entonces, hacen lo mejor que pueden para modificar algunas cosas. Pero luego, se vuelve demasiado difícil, digamos, arreglar si algo sale mal. Entonces, sí. Y para prevenir eso, el headless CMS utiliza, digamos, un enfoque primero en API. Y eso es lo que el JAMstack, diría, como, se ajusta mejor. O en realidad, va en la misma dirección. Podría explicarte o mostrarte, como, más recursos. Pero el punto de esta masterclass no es profundizar en, digamos, muchas lógicas o la teoría sobre el JAMstack. Entonces, creo que voy a terminar alrededor de qué es JAMstack en este punto. Pero vas a ver cómo voy a interactuar, digamos, para obtener los datos, recuperarlos y luego renderizarlos al final a través de las API. Entonces, creo que cubrimos esta parte.

Y esta pregunta, la última pregunta, que quiero hacerte sería, ¿conoces Storyblok? Ese es en realidad el headless CMS que vamos a usar. Mi suposición es que muchos no. Sí, veo no, no, no. Oh, he oído hablar de él. Bien. Bien. Bien. Me gusta que todos respondan tan rápido. Muchas gracias. Y sí, estoy feliz de mostrarte, en realidad. Entonces, creo, ¿qué debería hacer? Sí, creo que voy a mostrarte directamente, sí, este sitio web. Entonces, ya puedes abrir este sitio web para ir al sitio de Storyblok. Y de todos modos, desde aquí, te pediría que crees una cuenta. Entonces, mientras estás escuchando, qué es Storyblok, ya puedes, sabes, acceder a esta URL que te envié. Y luego si no tienes una cuenta, puedes hacer clic en probar gratis. Crear cuentas es gratis. Y luego si ya tienes una cuenta y olvidaste, cosas así, puedes, sabes, acceder para iniciar sesión. Y mientras estás creando tu cuenta de Storyblok o averiguando si ya tienes una cuenta o no,

3. Introducción a Storyblok y Astro

Short description:

Permíteme ver. Gracias. Storyblok es un CMS sin cabeza con un editor visual en tiempo real. Permite a los editores de contenido previsualizar y editar contenido fácilmente. Storyblok utiliza el diseño atómico para organizar los componentes de manera sistemática y minimalista. Astro es un marco que te permite combinar tus tecnologías favoritas con su plan. Únete a la comunidad de Astro para obtener soporte. Puedes aprender más sobre el enfoque de Astro y la entrega de contenido rápido en los artículos recomendados. En esta masterclass, cubriremos las partes uno a cuatro de la serie de tutoriales definitivos.

entonces te explicaré qué es Storyblok. Permíteme ver. Gracias. Veo que la gente todavía se está uniendo. Bienvenidos a todos. No te has perdido mucho de la masterclass. Y de todos modos, está grabada. Así que, siéntete libre de volver a verla. Entonces, Storyblok es también un headless CMS. Sí, pero la razón por la que lo estoy usando es porque tiene el editor visual en tiempo real ya incorporado. Entonces, si quieres permitir a tus editores de contenido echar un vistazo a la previsualización mientras están editando, entonces pueden ver muy rápidamente qué está pasando. Y pueden, sabes, cambiar el orden de los componentes en tiempo real sin pulsar el botón de guardar o publicar, digamos, el contenido en el que están trabajando. Así que, puedes activar fácilmente, sabes, esta característica siguiendo principalmente, como, tres pasos. Sería como, quiero decir, el proceso para activar eso dependería de las tecnologías de front-end de tu elección. Pero en realidad, sería la mayoría de las veces lo mismo. Así que, diría, como, de una manera muy rápida para explicar Storyblok, sería como el CMS headless con la característica de edición visual en tiempo real integrada en él. Y una cosa más, lo que quiero decir es que Storyblok utiliza la metodología llamada design atómico. Así que, rápidamente, como, te mostraré esta imagen, o podría ser digamos una imagen para mostrarte qué es el design atómico. Entonces, el design atómico es no se trata del design. Es más bien cómo puedes organizar los componentes de la manera más sistemática y minimalista posible. Entonces, en lugar de, digamos, como tienes la página A. Diría, como, tienes la página de contacto y tienes otra página de contacto diferente, pero pidiendo a tus usuarios que se pongan en contacto con otro lugar. Y estas, digamos, dos páginas de contacto, en realidad comparten muchos componentes similares. Pero si quieres cambiar solo la línea de fondo de dónde quieres, sabes, enviar cosas así. Solo digamos que una entrada es diferente, entonces no necesitas realmente, sabes, crear dos plantillas de página diferentes para esas dos páginas de contacto diferentes. Pero en cambio, puedes realmente como crear algunas partes de los componentes. Y luego al combinar, sabes, estas diferentes partes más pequeñas del componente, entonces puedes consistir en una plantilla de página muy similar. Pero puedes modificar muy fácilmente intercambiando una entrada. Así es como funcionaría el design atómico. Y para más detalles, te recomendaría que eches un vistazo y leas el artículo. Y también tienen un libro electrónico, si no me equivoco. Esa es una versión más larga y más detallada de él. Pero realmente vale la pena leerlo. Y aprendí mucho, sabes, como organizar las cosas de una manera muy minimalista y reutilizar mucho. Así es como Storyblok utiliza en su raíz para organizar el componente. Bien. Entonces, creo que cubrimos, sí, este diagrama de flujo. Así que, podemos seguir adelante. Y ¿qué es Astro? Esto es algo que también quiero que eches un vistazo a su documentation. Y también, sí, únete a su Discord porque yo también soy un usuario de Astro. Y cuando tengo, digamos, como algunas características nuevas que he probado y quiero, sabes, hacer algunas preguntas, están muy abiertos a ello. Y una de las cosas que te recomiendo, sabes, probando Astro es que su community es realmente increíble, muy abierta. Así que, cuando te atasques, siempre puedes hacer preguntas en su Discord. Y Astro en sí es que diría, como, no necesitas sentir que necesitas aprender un nuevo marco de trabajo. Es un marco de trabajo. Sí. Pero si, digamos, vienes del fondo de usar otro marco de trabajo, digamos, por ejemplo, como Next.js o Svelte o, sabes, Vue incluso Next, entonces puedes realmente como combinar esas tecnologías para usar con Astro. Así que, el, cómo lo digo, como el plano de tu aplicación será, sabes, construido por el lado de Astro. Pero digamos, si quieres escribir o si quieres, sabes, trabajar con tus tecnologías favoritas de la sintaxis, entonces puedes realmente como crear esos componentes en tus tecnologías favoritas para combinar. Porque Astro tiene, digamos, la teoría de las Islas de Componentes o la forma de pensar en ello. Y hay muchos artículos geniales que puedo recomendarte que eches un vistazo. Creo que voy a conseguir rápidamente, como, esto para ti. Un segundo. Porque no creo que haya añadido la fuente en el nodo de Notion, pero este artículo es algo adicional que puedo recomendarte para conocer más a fondo qué es Astro y puedes aprender muchos enfoques diferentes, digamos, lo que Astro, sabes, está diciendo a la gente. Así que, hay muchos, sabes, tips que hacen para servir, digamos, contenido rápido. Así que, cuando vienes de diferentes formas de servir el contenido en las páginas, como SSG, cosas así, entonces SSG también es rápido, sí. Pero puedes ver bastante diferente que cuando consideras, sabes, enviar más JS o menos JS, cuál es más rápido, y Astro es, sabes, solo más para enviar menos JS cuando es posible. Y solo cuando lo necesitas y lo cargas. Y esto también hace una gran diferencia. Sí. Gracias, Ricardo. Sí, ese es el Discord de Astro al que puedes unirte. Bien. Así que, no creo que la gente quiera verme solo explicando cosas en esta masterclass, porque es una masterclass. También quiero que, sabes, practiques conmigo y la gente esperaría que yo, sabes, te mostrara la parte práctica, así que vamos a ello. Y esto es en realidad como basado en el tutorial que tenemos, y voy a mostrarte esto. Así que, te voy a enviar una de las fuentes que he listado, y voy a mostrar lo que quiero decir con eso. Así que, el enlace que te envié ahora en el chat es este tutorial. Así que, este tutorial es mantenido por el equipo de Storybook, y luego tenemos la serie de tutoriales definitivos, y tenemos la parte uno a la parte siete. Así que, esto es lo que quiero decir, como si quieres desplegar tu aplicación de blog Astro al final de esta masterclass, entonces puedes echar un vistazo aquí. Y lo que vamos a cubrir en esta masterclass será como de la parte uno a la parte cuatro, y idealmente, si tenemos suficiente tiempo, entonces vamos a llegar a la parte parcial cinco,

4. Configuración de la cuenta de Storyblok y el marco Astra

Short description:

En esta parte, cubrí la importancia de crear una cuenta de Storyblok y configurar un espacio para la masterclass. También obtuvimos un token de clave de API de vista previa y configuramos el marco Astra con el administrador de paquetes MPM. Ahora, podemos proceder al siguiente paso de instalar los paquetes necesarios y ejecutar el host local.

Diría yo. Así que eso es lo que voy a cubrir. Así que, incluso si te pierdes durante la masterclass, no te preocupes, tienes un tutorial práctico en formato escrito, así que puedes leerlo a tu propio ritmo. Muy bien. Así que, quiero asegurarme de que todos o el que quiera seguir exactamente lo que voy a mostrarte, como en práctica en esta masterclass, ya crearon la cuenta de Storyblok, tal vez puedes mostrarme un pulgar hacia arriba o escribir sí en el chat rápidamente, así entonces puedo ver que si estoy listo para continuar. Okay. Okay. Bien. Bien. Gracias. Genial. Muy bien. Increíble. Si todavía necesitas tiempo, diría que puedes volver a ver esta masterclass, como grabación, y por ahora puedes concentrarte en verla también, y eso está totalmente bien. Y puedes contactarme más tarde en Twitter o Discord. Estoy en Discord en Storyblok, así que puedes hacer preguntas fácilmente también.

Muy bien. Entonces, si has creado la cuenta y cuando has iniciado sesión en Storyblok, esta es la especie de página que vas a ver. Así que, tienes los espacios, si ya los tienes. Si no los tienes, entonces no ves ninguno, pero esto parece algo lo que vas a ver ahora. Así que, déjame cerrar esto, y luego lo que voy a pedirte que hagas es hacer clic en este botón verde de añadir espacio. Así que, aquí tenemos dos opciones. Asegúrate de elegir la izquierda opción de nuevo espacio del lado izquierdo, y podemos darle un nombre a este, ya sabes, como espacio. El espacio es en realidad un entorno en el que puedes pensar que puedes trabajar o tal vez diría como un repositorio si eso te resulta más fácil de imaginar. Okay. Así que, puedo darle un nombre a react. Digamos Berlin, y pulsa el botón de crear espacio. Y por lo que veo, ya sabes, todos ustedes están asistiendo principalmente desde la zona horaria de Europa Central. Diría como seleccionar la ubicación del servidor en la UE, y pulsa el botón verde de crear espacio. Y después de eso, se va a generar. Déjame ver. Podría ser que mi conexión a internet no sea buena hoy. ¿Ves también el mismo problema en tu entorno, o puedes crear un espacio? Házmelo saber en el chat.

Okay. Okay. Funciona. Genial. Genial. Déjame recargarlo. Tal vez fallé en algo. Okay. Okay. Funcionó. Genial. Gracias a todos. Sí, me gusta esta parte. Ya sabes, como todos pueden ayudarme, ya sabes, como para hacer que la masterclass siga adelante. Okay. Gracias. Genial. Así que, creo que todos crearon el espacio, y esta sería la primera página que puedes ver con un inicio rápido. Así que, eso es lo que quiero que veas ahora y sigas los pasos. Así que, creamos el espacio, y lo que vamos a hacer es obtener una copia local. Así que, aquí está el comando que puedes copiar y pegar con este código de copia. E incluye el alfabeto aleatorio y los números. Este es en realidad un token de clave de API de vista previa, que sería un valor muy importante para interactuar con, digamos, la API para obtener los data a través de nuestra API de entrega de contenido en tu código fuente. Así que, lo que quiero que hagas es simplemente copiar este código, y luego puedes abrir tu terminal o cualquier cosa que uses para las herramientas de línea de comandos, y luego en el lugar donde prefieres tener, simplemente pégalo, lo que copiaste del inicio rápido, y luego puedes pegar lo siento, no pegar, ejecutar lo que copiaste. Y deberías ver este gran logo de Storyblok y desde aquí, puedes seleccionar el marco, y vamos a seguir con Astra hoy. Así que, voy a elegir el Astra, y pulsa Enter. Puedes, ya sabes, moverte con la tecla de flecha.

Okay, creo que fui con Astra, y luego puedes seleccionar tu administrador de paquetes. Voy a ir con MPM. Así que, si prefieres BUN, siéntete libre de ir. Y de nuevo, la región es la mayoría de todos ustedes están basados en la UE, así que la UE. Y puedes darle un nombre a esto, diría, proyecto. Así que, voy a decir React Day Berlin. Y va a generar la demo. Así que, espero que todos estén viendo la pantalla similar. Házmelo saber si tienes un error, entonces haré lo mejor que pueda para resolverlo contigo. Pero a menos que podamos seguir adelante para echar un vistazo a lo que hay dentro de aquí. Y dice que ya puedes ir a el directorio que acabas de generar aquí, y luego instalar los paquetes necesarios,

5. Configuración del host local y URL de vista previa

Short description:

Voy a abrir el directorio en VS Code e instalar el paquete npm. Después de eso, ejecutaré npm run dev para iniciar el host local. Luego podemos proceder al editor visual y configurar la URL de vista previa. Volvamos a la interfaz de usuario de Storyblok y hagamos clic en la historia de inicio. Luego, podemos cambiar la URL y agregar la nueva URL de vista previa. Esto mostrará el editor visual en la página de configuración.

y luego ya puedes ejecutar el host local, diría yo. Así que, diría que voy a ir al directorio que acabo de crear, y luego abrirlo con VS Code. No tiene que ser solo VS Code. Solo usa el editor de texto con el que te sientas cómodo. Déjame ver el chat. ¿Qué pasará si selecciono EU en el panel de control, pero US en CLI? Entonces diría que podrías tener problemas para ver, en primer lugar, la obtención de los data. Y tal vez podrías tener problemas con las características de edición visual en tiempo real, también. Es mejor, ya sabes, como, sincronizar ambas regiones que vas a elegir en el lado de la aplicación Storyblok para generar el espacio. Y luego, digamos, como, desde el comando CLI que estás usando. Pero si estás interesado en probarlo, siéntete libre de hacerlo, y avísame. Pero en esta masterclass, diría que te apegues a las mismas regiones. Okay. Sí. Bien. Entonces, ¿lo abrí correctamente? Espero que sí. Déjame ver rápidamente eso. Sí. Creo que estoy en el editor visual con el directorio que acabo de crear, y espero que también estés alineado conmigo. Entonces, necesitamos instalar el paquete npm. Lo siento. Mi terminal está un poco desordenada. De todos modos. Y avísame si la pantalla o las fuentes que estoy mostrando aquí son demasiado pequeñas, entonces estaré encantado de reescalar. Entonces, aquí voy a instalar el paquete. Y luego de eso, debería poder, ya sabes, como, ejecutar el npm run dev. No te preocupes por algunas advertencias. Ves que no va a impactar en lo que vamos a trabajar juntos. Entonces, aquí está el dev. Entonces, voy a ejecutar npm run dev para comenzar a ejecutar el host local. Y la razón por la que usé esta opción rápida, digamos, crear la opción de bloque de historia CLI es porque ya configurará los necesarios componentes, como los componentes minimalistas básicos para ver ya renderizados. Podemos interactuar con, ya sabes, los data que provienen de nuestra API de entrega de contenido, y luego el token de la clave de la API para previsualizar esos contenidos ya está configurado. Entonces, puedo mostrarte para probar primero si el host local está funcionando o no. Entonces, sí, podrías ver esta pantalla, que es importante. Voy a mostrarte esto. Y si ves la misma pantalla que yo, no te asustes. Esto es todo normal. Lo que puedes hacer es hacer clic en advanced, y luego proceder al host local, que incluso dice que no es seguro, pero está bien. En realidad está en el HTTPS, diría, como, para revisar el navegador. Entonces, ya puedes ver que se está ejecutando en el host local, y ves un par de componentes que vas a ver en el bloque de historia . Avísame si fallas hasta ahora en este paso. Entonces haré lo mejor que pueda para ayudarte. Pero de lo contrario, entonces podemos seguir adelante. Pero siéntete libre de escribir las preguntas nuevamente en el chat. Y en realidad estoy viendo en el segundo monitor para verificar si está bien con todos o no. Sí, podemos obtener una grabación de este seminario web. Supongo que ese es el punto en el que estamos grabándolo. No estoy seguro de cuánto tiempo va a tomar. Pero con esta pregunta, probablemente, Lara puede responderte más tarde. Okay. Entonces, para completar, digamos, el proceso de que todo está funcionando, y podemos pasar al siguiente paso. Volvamos a la interfaz de usuario de Storyblok, que ves con el inicio rápido y esos dos pasos que hemos seguido hasta ahora. Entonces, vamos a ir a este contenido en el lado izquierdo de la barra lateral, y este va a ser, diría yo, el punto de entrada para, ya sabes, como, saltar al editor visual en tiempo real. Entonces, por defecto, solo tienes una página. Y por cierto, en Storyblok, llamamos páginas como historia e historias. Es algo similar a, digamos, el nombre de nuestro producto. Y tiene su razón, sí, porque no solo, ya sabes, como, construyes con Storyblok solo para la Web y las aplicaciones web. En realidad puedes, ya sabes, como, almacenar el contenido y, ya sabes, como, buscarlo, renderizarlo a muchos tipos diferentes de, diría yo, aplicaciones. Entonces, también puedes construir una aplicación móvil con Storyblok. También puedes construir una VR, AR, ya sabes, como, aplicaciones y muchas más cosas. Es por eso que, como, no llamamos a estos, ya sabes, como, elementos solo páginas, sino que en su lugar, los llamamos historias para contar historias. Larga historia, pero podemos hacer clic en esta historia de inicio. Y luego, ahora, lo que necesitamos hacer es configurar la URL de vista previa. Entonces, en el lado izquierdo y un poco hacia arriba, hay un lugar donde ves la vista previa actual, que no es correcta. Es por eso que vemos esta bienvenida al editor visual, y eso no es realmente lo que queremos ver. Entonces, haz clic en este cambio de URL, y luego cuando hagas eso, te mostrará un modelo para agregar la nueva URL de vista previa. Entonces, después de hacer clic en este cambio de URL, y luego haz clic en este botón verde que dice agregar o cambiar las URL de vista previa. Entonces, y luego después de eso, te mostrará un editor visual en la configuración. Entonces, técnicamente, también puedes ir desde el lado izquierdo de la configuración desde el panel de control, y luego si te navegas al editor visual aquí, entonces puedes llegar al mismo lugar. Bien.

6. Configurando la URL de vista previa y comprobando dependencias

Short description:

Permíteme verificar rápidamente contigo. Cuando vas a contenido, historia de inicio, ¿qué tipo de pantalla ves? ¿Ves un espacio, fondo de video? Ahora veo. Genial. Cambia la URL al URL local predeterminado de Astro. Rellena la ruta real con una sola barra diagonal hacia adelante para eliminar el inicio innecesario. Si no ves la misma pantalla, avísame. Seguimos unos pocos pasos y se habilitó el editor visual minimalista en tiempo real. Debería funcionar en tiempo real, pero se requiere el botón de guardar. Lamento las molestias. Hay nuevas actualizaciones. Eliminé la ruta de inicio en la configuración de entrada. Cambiar el titular no aplica cambios en vivo. Se requiere el botón de guardar. Volvamos rápidamente a nuestra nota de Notion para revisar dónde estamos. Si quieres ver pantallas anteriores, se muestran en la nota de Notion. Comprueba package.json para las dependencias correctas.

No URL. Vale. Permíteme verificar rápidamente contigo. Cuando vas a contenido, historia de inicio, y qué tipo de pantalla ves, ¿no ves esta, como vacía, o qué ves? Normalmente, deberías poder ver la misma pantalla, en realidad. O, ¿acaso ves un espacio, video de fondo? Ah, vale. Ahora veo. Genial. Genial. Entonces, vale. Bueno. Gracias por preguntar. Cambiar URL. Añadir al editor visual de vista previa. Entonces, aquí en la ubicación, esto es lo que vemos ahora, pero no queremos eso. Entonces, lo que voy a hacer es copiar y pegar esta URL local predeterminada de Astro, y luego pegarla aquí para que no necesitemos ver esa pantalla de bienvenida al editor visual anterior, y no olvides pulsar el botón de guardar. Ahora, he pulsado el botón de guardar, así que puedo guardar el contenido. Entonces, podemos volver al contenido en el lado izquierdo de la barra lateral, historia de inicio, y luego ahora vemos 404. No te preocupes por ello. Es esperado, y estoy contento de que veamos lo que esperaba. Entonces, cuando ves este 404, es porque no tenemos ninguna ruta configurada para el inicio. Entonces, para solucionar esto, puedes hacerlo desde la interfaz de usuario de las aplicaciones de Storyblok. Entonces, en la parte superior de la, diría, cabecera, y hay una de las navegaciones que dice configuración de entrada. Entonces, cuando haces clic en este icono de configuración de entrada, entonces ves un modelo que dice configuración de entrada. Entonces, cuando desplazas todo el camino hasta el fondo, entonces ves la ruta real, y esto es en realidad lo que puedes modificar la ruta de la página de vista previa. Entonces, queremos usar esta historia de inicio como una raíz muy básica. Entonces, lo que podemos hacer es rellenar con una sola barra diagonal hacia adelante, y eso es todo, pero no olvides pulsar el botón de guardar y cerrar. Entonces, haz clic en este enorme botón verde de guardar y cerrar después de rellenar esta ruta real con la barra diagonal hacia adelante, solo una barra diagonal hacia adelante, y luego va a eliminar el inicio innecesario, que en realidad proviene del nombre de esta historia. Entonces, espero que puedas ver este Hola Mundo con la característica uno a la característica tres, y espero que puedas ver esos contenedores de línea de puntos. Intento hacer un zoom. Vale, si no ves la misma pantalla conmigo, siéntete libre de escribir que no ves eso, dime qué ves ahora. Entonces, estaré encantado de debug contigo. Este es el punto de, ya sabes, hacer la masterclass en línea en vivo. Genial, bien, bien, funciona. Bueno, bueno, bueno, supongo. Mientras tanto, mientras veo y leo, ya sabes, cómo la gente está siguiendo conmigo, entonces puedo empezar lentamente a pasar al siguiente paso. Entonces, en realidad seguimos solo unos pocos pasos, y no configuramos nada, ya sabes, como en el código, en realidad, pero por alguna razón, ya tiene, ya sabes, como las configuraciones necesarias, y el editor visual muy minimalista en tiempo real con la, no el editor visual minimalista en tiempo real, lo siento, el contenido minimalista aquí con la función completa del editor visual en tiempo real está habilitado. Entonces, lo que quiero decir con eso es que dondequiera que hagas clic en el componente, oh, vale, creo que la conexión a internet hoy conmigo es muy mala hoy, lo siento por eso, cada vez que haces clic en el contenido, o podría haber algún otro problema, en realidad debería llevarme a este titular, porque hice clic en este Hola Mundo, y debería saltar aquí. Déjame comprobar si funciona. Uno, dos, tres, cuatro. Algo no está correcto. Voy a recargar la nueva versión de la aplicación. Es un poco desafortunado. Deberías ver en vivo uno, dos, tres, cuatro escrito, pero espero que entiendas el punto. Debería funcionar como dije en tiempo real, pero cuando pulsas el botón de guardar, entonces por supuesto el contenido sería guardado. Entonces, no pulsé el botón de publicar, pero aún puedo ver, ya sabes, la vista previa actual con lo que he configurado, ya sabes, el contenido hasta ahora. Lo siento por algo que no está funcionando correctamente, pero sé que es porque en realidad lanzamos algo el fin de semana. Entonces, alrededor digamos como la parte de demostración. Entonces, lo siento por eso, pero espero que entiendas el punto. Vale, veo el mensaje, nuevo mensaje, en la parte superior. Vale, en la parte superior al lado del logo mencionaron que hay nuevas actualizaciones. Ah, sí, sí, sí, sí. Y entonces ¿cuándo hiciste el cambio para eliminar la ruta de inicio? Ah, vale, hice un cambio para eliminar el inicio al final de la URL haciendo clic en esta configuración de entrada. Y luego cuando desplazas todo el camino hasta el fondo, está la ruta real y debería estar vacía por defecto. Pero puedes rellenar esta sola barra diagonal hacia adelante y pulsar guardar y cerrar. Entonces deberías ver la misma pantalla, pero sin uno, dos, tres, esto es algo que añadí hace unos segundos. Entonces, cambiar el titular no aplica cambios en vivo. Sí, se requiere el botón de guardar. Sí, gracias. Sí, en realidad, sí, lo que requiere esos es algo de lo que me está pasando. Y eso es algo que diría como, en realidad deberías ver que el evento de clic está siendo escuchado y puedo saltar a este titular aquí. Pero hoy creo que algo no está funcionando. Pero no perdamos nuestro tiempo porque el resto de las cosas están funcionando. Entonces, espero que estés aquí en los mismos, digamos, los pasos en los que estoy aquí. Y volvamos rápidamente a nuestra nota de Notion para revisar dónde estamos en realidad. Entonces, ya terminamos aquí. Por cierto, si necesitas, digamos, si quieres ver, ya sabes, como hace unos segundos hace unos minutos, una pantalla que estaba compartiendo. En realidad, la mayoría de todas las pantallas están, ya sabes, como mostradas aquí, así que puedes echar un vistazo rápidamente en tu final si fui demasiado rápido. Y aquí, sí, vimos eso. Sí, vamos a comprobarlo en realidad. Nuestro paquete. Oh, lo siento, package.json

7. Configuración del Proyecto e Importación del Esquema de Componentes

Short description:

Para configurar el proyecto, abre VS Code y actualiza el archivo package.json. Cambia las dependencias de profundidad a dependencias y guarda el archivo. Antes de ejecutar npm install, asegúrate de que la versión del SDK de Storyblok Astro sea al menos 3.0.1. Si no es así, actualízala. Después de confirmar la versión, ejecuta npm install o npm i. Las dependencias se actualizarán correctamente. Además, puedes configurar el token de la clave de la API de vista previa para que se almacene en la variable de entorno. Este paso es opcional para una aplicación lista para producción. Para importar el esquema de componentes, instala el CLI de Storyblok e inicia sesión. Luego, descarga el archivo JSON proporcionado y utiliza el comando push components, reemplazando la ruta del archivo JSON y el ID del espacio objetivo. Esto importará los componentos necesarios en tu proyecto de Storyblok.

para asegurarte de que todas las dependencias están en las correctas, digamos, dependencias. Entonces, abramos nuestro VS Code. Este es el cheat sheet, lo siento. Esta es la misma pantalla que tenía que compartir contigo. Así que, aquí en el package.json puedes ver si el SDK de astro de Storyblok está en las dependencias de profundidad, pero en realidad está en las dependencias de profundidad. Y de hecho, el resto de ellas también están en las dependencias de profundidad. Lo que quiero que hagas es en realidad actualizar esta profundidad de dependencias a dependencias, y luego ejecuta el npm install, entonces debería estar bien. Así que, aquí está en realidad las instrucciones. Así que, hagámoslo juntos en tu VS Code. Y luego aquí estoy en realidad voy a actualizar estas dependencias de profundidad a solo dependencias, y luego voy a pulsar el botón de guardar. Lo siento, necesito salir mientras lo estaba ejecutando. Y antes de que vayas a ejecutar npm install, quiero que te asegures de que la versión del SDK de Storyblok Astro es al menos 3.0.1, porque si tienes 3.0.0 o algo inferior, entonces podrías tener un problema menor, y no quiero que experimentes eso. Así que, asegúrate de que tienes 3.0.1, y supongo que todos deberían tener eso ya que seguimos los mismos pasos juntos. Así que, después de que te asegures de eso, puedes ejecutar npm install o npm i, y luego pulsa enter para ejecutar, y ahora las dependencias se actualizan a las dependencias correctas, diría yo. Así que, hemos terminado aquí. También ya configuramos la URL de vista previa, también resolvimos este problema, tenemos el contenido siendo renderizado, y esta es en realidad una nota rápida para 4.04 cuando ves eso. Sí, necesitamos configurar la vista previa del token de la clave de la API para que se almacene en la variable de entorno. Pero de nuevo, si quieres simplemente descubrir cómo funcionarían Astro y Storyblok, puedes saltarte esta parte. Esto es más opcional, si quieres empezar a trabajar en una aplicación lista para producción. Así que, si es así, entonces necesitas usar la variable de entorno. Con Astro, diría que no es tan difícil, pero puedes configurar eso en realidad desde el astroconfig.mjs, y en realidad voy a mostrar tú, y este es el lugar donde en realidad ves tu token de la clave de la API de vista previa está siendo, ya sabes, almacenado. Así que, si no usas la variable de entorno, entonces así es como vas a hacer eso. Esto no va a estar listo para producción, obviamente, pero si quieres almacenar la variable de entorno, diría, como, aquí, esta clave sería el, diría, el lugar donde necesitas configurar el nombre correcto de la variable de entorno. Pero no voy a profundizar demasiado, pero el punto es, como, como ya usaste nuestro CLI para generar la aplicación de Storyblok, diría, con Astro, entonces ya tienes todo configurado, y si bajas, aquí están los componentes, componentes dinámicos, diría. Así que, todos estos son dinámicos. Por eso, como, cuando hice el cambio del contenido en el teaser, déjame volver aquí, teaser, como, de Hello World a 1, 2, 3, 4, entonces viste que el cambio es dinámico cuando pulsé el botón de guardar. Así es como está ya configurado aquí, y solo necesitas, ya sabes, como, echar un vistazo a cómo están las cosas siendo configuradas, cómo se están llamando los componentes, y ya sabes, como, obteniendo los datos, etc., entonces el resto de la parte debería ser bastante fácil. Así que, una rápida explicación de eso, y diría, volvamos a la hoja de trucos de Notion, y veo que algunas personas se unen, como, desde la mitad de la llamada, así que diría, oh, gracias. Sí, sí, sí, muchas gracias. ¿Es correcto pronunciar tu nombre, KL? Espero que sí. Muchas gracias por ayudarme. Sí. A continuación, vamos a importar el esquema de componentes, porque solo tenemos dos horas, y el tiempo es realmente precioso, y el tiempo es dinero, así que quería tener exactamente el mismo esquema de componentes que el mío de una manera más precisa, y de una manera más rápida. Así que, lo que vamos a hacer es, vamos a usar el CLI de Storyblok, que ya usamos, pero va a ser más el real CLI. En realidad, el comando que ejecutamos para generar la nueva aplicación de Storyblok es algo llamado createStoryBlock. Es parte del CLI, también, pero esto va a ser, como, uno más oficial. Así que, si aún no has ejecutado antes desde este CLI de Storyblok, entonces puedes seguir lo que ves en mi pantalla ahora mismo. Así que, vamos a instalar el CLI de Storyblok. Ya lo tengo instalado, así que no voy a ver la misma, digamos, pantalla que la tuya, pero puedes ejecutar, primero, como, en tu terminal o cualquier herramienta de línea de comandos diciendo, en la raíz de tu máquina local, puedes ejecutar npm install Storyblok-G para instalar globalmente, y luego de eso, puedes ejecutar Storyblok login. Necesitas iniciar sesión, en realidad. Si ya has usado el CLI de Storyblok, te recomendaría que salgas primero porque podrías ver algún error, porque después de cierto tiempo, va a salir tú sabes, como, por una razón de seguridad de datos, y te pediría que inicies sesión de nuevo. Así que, si tú recuerdas que en el pasado podrías haber usado un CLI de Storyblok, diría, como, Storyblok log out, y luego Storyblok login de nuevo, pero para la mayoría de todos ustedes, diría, como, si eres la primera vez que usas Storyblok CLI, solo ejecuta este Storyblok, lo siento, npm install, y luego ejecuta Storyblok login. Entonces deberías poder ver esta misma pantalla. En realidad voy a, como, hacerla a pantalla completa para que puedas ver mejor. Así que, puedes, ya sabes, como, seleccionar una forma de iniciar sesión. En su mayoría, diría, como, el correo electrónico sería bastante conveniente porque puedes, ya sabes, obtener el código de autenticación, y luego puedes, ya sabes, como, iniciar sesión a través de la terminal. Y luego déjame revisar el chat. Recibí el mensaje. Inicio de sesión exitoso. El token ha sido añadido. Sí, sí, diría que parece que has tenido éxito, Ricardo. Así que, podemos seguir adelante para el siguiente paso. Creo que todos pueden seguir, como, lo que voy a explicar los siguientes pasos. Así que, después de que instales el CLI de Storyblok, déjame revisar la hora, después de que instales el Storyblok CLI, y luego inicies sesión para usar el CLI de Storyblok, entonces quiero que descargues este archivo JSON, que ya creé el archivo JSON para que tengas el mismo esquema de componentes, para que no necesites verme, ya sabes, como, diciéndote que, okay, necesitas crear este componente con exactamente el mismo nombre, y luego configurar eso, eso, eso, eso, algún tipo de, eso va a ser, como, un proceso muy largo para hacer eso, y estoy bastante seguro de que incluso yo mismo, incluyéndome, voy a cometer un error. Así que, para evitar tener algunos problemas para ahora ver exactamente el mismo, diría, contenido de la masterclass, puedes ir a esta página de Notion, para aquellos de ustedes que acaban de unirse ahora mismo, y luego puedes bajar a, ya sabes, como, esta parte para instalar el CLI de Storyblok, y luego haz clic en esto, oh, lo siento, haz clic en este archivo, y luego voy a maximizarlo. Entonces puedes, ya sabes, como, descargar este archivo de componentes. Y el punto por el que vamos a usar este CLI de Storyblok es que, no exportar, en realidad, como, importar, ya sabes, como, este esquema de componentes archivo JSON en tu Storyblok para que tendrías todos los componentes necesarios listos, porque ahora mismo puedo mostrarte rápidamente que no necesitas ir a verlo, pero puedo mostrarte rápidamente. Así que, en la biblioteca de bloques, este es el lugar donde puedes ver todos los componentes necesarios, pero solo tenemos cuatro componentes, que no es suficiente para esta masterclass. Quiero que tengas más que solo cuatro, ya sabes, componentes, y todas las configuraciones ya están listadas en este archivo de esquema de componentes. Así que, lo que vamos a hacer es, puedes simplemente copiar y pegar desde la Notion página, y aquí voy a copiar eso en realidad, y luego hay un comando llamado pus

8. Obtención del ID del Espacio y Exploración de la Edición en Tiempo Real

Short description:

En esta parte, volvemos a la interfaz de usuario de Storyblok y obtenemos el ID del espacio. Copiamos el número y reemplazamos el ID del espacio objetivo. Después de ejecutar el CLI de Storyblok para empujar los componentes, podemos ver los componentos en la biblioteca de bloques. Podemos registrar los componentes y explorar la función de edición en tiempo real. La edición en tiempo real se implementa utilizando la API Editable de Story Block, que nos permite hacer los componentos dinámicos. Envolvemos los componentes que queremos hacer dinámicos con la API Editable de Story Block, como el titular en el componente de avance. Los componentes pueden ser anidados basándose en el concepto de diseño atómico. Al utilizar la API Editable de Story Block, habilitamos la edición visual en tiempo real. Esto se hace ejecutando la aplicación y viendo los cambios en los componentes de avance y titular.

sabes, como una pantalla. Así que, voy a volver a nuestra interfaz de usuario de Storyblok. Así que, lo que quiero que veas es que en realidad estoy saliendo del editor visual. Oh, lo siento. React. Día de React. Y luego continúa con la prueba. A donde quiero que vayas es a esta configuración en el lado izquierdo del panel de control. Así que, aquí en el espacio, en general, ya hay un ID de espacio, así que puedes copiar solo este número. Me di cuenta de que cuando haces clic en copiar aquí, a veces incluye este gráfico, pero por favor no incluyas este gráfico o asegúrate de que no está incluido, así que voy a copiar eso, o alternativamente, en la URL, en realidad, hay un ID de espacio que puedes obtener, así que de cualquier manera, puedes, ya sabes, obtener el ID del espacio, así que voy a en realidad intercambiar este ID de espacio objetivo con el valor que obtuve, así que solo los números de nuevo, y luego voy a, en realidad, como, empujar los componentes a, sí. Vale, porque probablemente no cerré la sesión. Si has visto un caso similar o un error similar entonces te recomendaría que cierres la sesión para el cierre de sesión de Storyblok, entonces voy a hacer un story, iniciar sesión, y luego con correo electrónico, sí. No cometí ningún error, supongo. Vale, debería comprobarlo rápidamente. Un segundo. En ti, sí, vale. Debería ver eso ahora, el código de authentication. Vale, si estás un poco detrás de lo que estaba mostrándote, algunos de los pasos, entonces ahora es el momento de ponerse al día. Vale, así que creo que puedo volver a ejecutar lo que quería correr, así que voy a volver a ejecutar esto y ver qué va a pasar. Sí, todo parece estar bien y funcionó con éxito, y puedes ver qué tipo de componentes están siendo empujados a este espacio en el que estamos trabajando. Así que, vamos a ir a la interfaz de usuario de Storyblok y vamos a, diría, la biblioteca de bloques en el lado izquierdo del panel de control, así que cuando haces clic aquí, ves más de cuatro componentes. Y algunos de los componentes, digamos, este artículo podría ser algo interesante, ves más que solo el texto corto, ¿verdad? Y está también configurado ya con la imagen, título del avance, contenido de texto enriquecido, y también ves configurado con algunos componentes únicos, que también puedo explicar. Y esto es algo basado en la teoría del diseño atómico. Así que, el punto es, hasta aquí, si tienes los mismos números de los componentes después de ejecutar el CLI de Storyblok para empujar componentes, entonces estás siguiendo hasta ahora. Avísame si ves algo diferente en tu pantalla o si algo no está funcionando, de lo contrario, entonces creo que podemos pasar al siguiente paso. Vale. Puedes escribir si funciona o algo no está funcionando, y dependiendo de eso, entonces trato de ayudar a trabajar todo contigo. Vale. Oh, y por cierto, mientras espero las reacciones de la gente o de ti, diría que si estás interesado en lo que puedes hacer con el CLI de Storyblok, aquí está el enlace a la documentation que tenemos. Y es bastante divertido, en realidad. Y también puedes escribir tu propio script de Node para ejecutar muchas cosas. Por ejemplo, como, digamos, descargar todos los activos que has subido al gestor de activos de Storyblok, y luego a tu máquina local, ya sabes, o al revés, si quieres hacer eso, este tipo de, ya sabes, cosas. Si tienes, como, algunas ideas, entonces es muy divertido trabajar con. Y vale. Así que, aquí sería, como, mostrarte, sí, los componentes donde puedes, en realidad, como, registrar todos ellos. Esto es en realidad solo para mostrar. Así que, ya cubrimos eso. Podemos seguir adelante. Vale. Ya vimos la función de edición en tiempo real. Quizás puedo explicar rápidamente cómo la función de edición en tiempo real está implementada. Porque eso es algo que omití mostrarte. Así que, no en la configuración de astro. No en el oh, esta es una pantalla diferente. Lo siento. Así es como yo quería mostrarte. Lo siento por eso. Esto es algo, Rebecca, que no iba a mostrarte. Así que, lo que quiero decir con eso es que en la fuente, story block. Vale. Así que, bajo el directorio de la fuente y el story block, aquí es donde viven todos los componentes dinámicos. Y yo iría con algo fácil. Así que, aquí en la línea 7, supongo, en tu entorno 2, ves una API llamada Story Block Editable. Esta es una API que puedes importar y simplemente llamar desde el SDK de Storyblok astro que acabas de instalar. Y sí, lo que puedes hacer con este Story Block editable es que al establecer las props correctas para obtener los datos correctos de los componentes dinámicos, entonces serías capaz de hacer que los componentes envueltos dentro de los componentes sean dinámicos. Así que, aquí en el titular donde vimos en realidad el hola mundo con 1, 2, 3, 4 siendo añadido, eso es en realidad lo que estaba, ya sabes, como haciendo la edición en vivo, ya sabes, como contenido modificaciones. Y sí, diría que el truco detrás es por causa de esta API. No voy a profundizar demasiado como para mostrar cómo nuestros SDKs están definiendo realmente esta API. Pero el punto es que necesitas, puedes usar esto, ya sabes, como Story Block Editable en el archivo de componentes dinámicos. Y el punto es que puedes envolver los componentes donde quieres hacerlos dinámicos. Así que, aquí lo que queremos hacer dinámico es el titular del componente de avance. Y así es como lo estoy haciendo. Y, por supuesto, puedes anidar componentes como te estaba mostrando o diciéndote el punto de usar story block es que basado en el diseño atómico concepto para usar los componentes reutilizables y anidables. Y lo que puedo mostrar aquí. Así que, oh, no estoy ejecutando nada. Déjame correr. Creo que está aquí. Debería estar ya ejecutándolo. Sí, aquí. Así que, el punto es que este es el avance y este es el titular, ¿verdad? Y eso es lo que habilitamos la edición visual en tiempo real con el uso de una función especial llamada Story Block Editable. Y para ver, digamos, cómo lo digo? Oh, no, estaba explicando,

9. Componentes Anidados y Relaciones JSON

Short description:

Aquí hay otro ejemplo de cómo hacer dinámicos los componentes anidados. El componente de cuadrícula actúa como padre, sosteniendo tres componentes hijos de características. Al envolver los componentes con la API Editable de Story Block, puedes hacerlos interactivos y editables en tiempo real. La API de Componente de Story Block se encarga de renderizar dinámicamente los componentes anidados. Puedes comprobar las relaciones entre los nombres de los componentes y los tipos de campo en la interfaz de usuario de Storyblok. Para ponerse al día con cualquier paso perdido, consulta la rama de la parte 1 del repositorio de GitHub y actualiza el token de la clave de la API de vista previa en el archivo astro.config.mjs.

lo siento, lo siento por ir en muchas direcciones. Te estaba explicando cómo puedes hacer que los componentes anidados sean dinámicos. Y aquí hay otro ejemplo. Hay un componente de cuadrícula que funciona como padre para sostener los tres componentes hijos de características. Así que, aquí dentro del componente de características hay nombre e imagen. Así que, imagen, no configuré nada. Por eso no ves eso. Pero en una característica, deberías poder ver, ya sabes, como los cambios aquí. Dinámico. Y ahora ves tres signos de exclamación añadidos. Y sin importar dónde esté anidado o incluso sin estar anidado, puedes hacer que prácticamente todos los componentes sean dinámicos. Y la lógica es la misma. Envuelve el componente que quieres hacer interactivo y editar en tiempo real con Story Block Editable. Y te mostraré en realidad la parte de los componentes de cuadrícula porque el teaser no está realmente anidado. Técnicamente, está anidado, pero desde digamos como esta historia de inicio no está realmente anidado, diría yo. Y esta es la cuadrícula como un componente padre para anidar los componentes hijos dentro. Y lo que ves es que, por supuesto, probablemente quieras arrastrar y soltar y cambiar el orden de estas características de uno a tres dentro del componente de cuadrícula. Por eso también envuelves, ya sabes, los componentes hijos, que van a estar dentro del componente de cuadrícula con Story Block Editable. Y aquí, lo que estás viendo aquí es que estamos mapeando en realidad todos los componentes hijos. Así que si vas a añadir cientos más de componentes de características o cualquier otro componente anidado, cualquier otro componente anidado diferente dentro de este componente de cuadrícula, debería renderizar sin importar qué. Porque estamos mapeando tantos como almacenamos esos componentes dentro de la cuadrícula. Así que no necesitas hacer eso manualmente. En su lugar, lo manejas programáticamente. Así que para renderizar, digamos, el resto de los componentes hijos, puedes usar otra nueva API llamada Story Block Component, que es un componente, en realidad. Y sí, eso es lo que puedes hacer con esto. Así que no envuelves nada porque no sabemos cuántos componentes queremos renderizar, cuántos componentes están en realidad, ya sabes, siendo anidados dentro de la cuadrícula. En su lugar, llamas a este Story Block Component, y entonces este, diría yo, componente, este componente en realidad ya maneja para atrapar todos los componentes dinámicos dentro de, ya sabes, la cuadrícula y luego el resto de la parte, que puedes ver desde la característica, ves una estructura muy similar a la que ya vimos desde el componente teaser. Porque este es el hijo más pequeño del componente, en el que no tenemos nada para anidar dentro. Así que solo necesitamos envolver, ya sabes, el contenido, lo que queremos, ya sabes, como, renderizarlo y también modificar el contenido. Y eso es todo. Pero tal vez como desarrollador, quieras tener algo, formato JSON para ver, ya sabes, como, todas estas relaciones con el nombre de las props y los data. Y con eso, diría yo, ya tienes esta característica en la interfaz de usuario de Storyblok. Así que en lugar de hacer clic alrededor, entrar y comprobar el nombre de estos tipos de campo, así que este nombre, imagen, todo, todos ellos se llaman tipos de campo. Así que para comprobar la relación de los nombres de los componentes y los tipos de campo, puedes ir a esta flecha hacia abajo, botón verde. Y entonces desde aquí, puedes ver dos tipos diferentes de archivos JSON. Así que no pulsé el botón de publicar. Cuando ves esto en gris, y también cuando pasas el ratón por aquí, si dice borrador, entonces deberías ver el JSON del borrador. Si ya has publicado, entonces deberías echar un vistazo al JSON publicado, que va a ser un poco más limpio. Así que porque para la versión del borrador del JSON, necesitamos tener la información, cuáles son los componentes editables y cuáles no. Así que voy a hacer clic en el JSON del borrador. Voy a maximizar un poco. Así que aquí, hay un nombre de la historia. Y entonces voy a buscar en realidad la característica. Así que sí, ahí está. Así que este componente de características con la característica 1 y 3 signos de exclamación, que hice una modificación, también está en Android, digamos la ruta o el camino del nombre después de las columnas. Y entonces hay el cuerpo y hay el contenido. Y entonces hay la historia. Así que todo comienza desde el contenido de la historia, y dentro del contenido, hay un cuerpo. Y eso es lo que estamos mapeando en realidad todos los componentes dinámicos. Así que no necesitas modificar eso para renderizar todos estos componentes manualmente. En su lugar, puedes renderizar todos estos componentes de forma dinámica y programática. Así que eso es lo que puedes ver. Y entonces diría yo, vamos a comprobar rápidamente dónde llegamos a esta masterclass. Hasta ahora, te mostré cómo funcionaría el Story Block Editable, y también el componente Story Block. Esto puedes leerlo si estás interesado en ello o si te perdiste algunos de los pasos y no ves la misma pantalla que la mía, entonces siempre puedes ir a la rama de la parte 1 del GitHub repositorio que compartí contigo al principio. Así que déjame hacer eso de nuevo para aquellos de vosotros que se unieron unos minutos después de esta masterclass. Así que ve a este repositorio de la masterclass. Y entonces cuando cambies a la parte 1, tienes todo, la misma configuración que estás viendo en mi pantalla. Y solo necesitas cambiar o intercambiar, este, lo siento. Solo necesitas intercambiar, digamos, en el archivo astro.config.mjs, este token de la clave de la API de vista previa para que sea tuyo. Así que eso es lo único que necesitas hacer. Así que si te perdiste algunos de los pasos de la parte 1, eso es lo que puedes hacer para ponerte al día. Gracias. Y diría... aquí, parte 2. Antes de pasar a la parte 2, veo que ya ha pasado una hora, así que hagamos una rápida pausa para el café, o para ir al baño, y continuemos. Así que en realidad ya completamos la parte 1. Así que, oh vale, déjame ver... Vale, el comando push no funcionó. Vale,

10. Importando el Componente de Encabezado en el Diseño Base

Short description:

¿Y qué más ves en tu pantalla? El componente de encabezado no está definido. Aún no estamos utilizando todos los componentes importados. Sigue la hoja de trucos de la masterclass para capturas de pantalla y orientación. En la parte dos, importa el componente de encabezado en el diseño base comprobando el archivo index.astro en el directorio de páginas. Asegúrate de que el diseño base está importado y sigue las instrucciones proporcionadas.

Cerré sesión e inicié sesión. ¿Y qué más ves en tu pantalla? Vale, la referencia de área del encabezado no está definida. Los encabezados no están definidos. Eso es lo que viste en la terminal o en la interfaz de línea de comandos, ¿verdad? Vale, lo cual es un poco extraño. Encabezados, encabezados, encabezados. Por supuesto que no tenemos los encabezados. No necesitas seguir en este proceso ahora mismo. Solo estoy intentando averiguar qué problema está enfrentando Nikita ahora mismo. Encabezados. No creo que tengamos algunos encabezados. No, no, no, no tenemos. O tal vez... ¿podrías comprobar si... diría que la ruta del archivo JSON es correcta primero? No está bien... sí... El encabezado no está definido. Por lo que parece... suena un poco... Diría que... Técnicamente puedes ver la misma pantalla que la mía en este punto porque no estamos utilizando todos los componentes que importamos. Diría que qué tal si cada vez que intentamos usar los nuevos componentes cada vez que intentamos usar los nuevos componentes, entonces te lo voy a mostrar. De hecho, creo que puedes ver eso, sí, como esto en la captura de pantalla. Así que, intenta mirar alrededor en esta noción. Diría que la hoja de trucos de la masterclass. Y recuerdo que hice todo lo posible para mostrar, ya sabes, tantas capturas de pantalla para los componentes. Así que, puedes seguir estas. Y si tienes preguntas, entonces anótalas. Luego intentamos, ya sabes, como ayudar con tu solución. Vale, gracias. Muy bien. Entonces... ¿dónde estamos? Parte dos. Sí, sí, sí. Entonces... parte dos. Sí, la parte dos será bastante fácil. De hecho, es solo como allí. Y ya hay una parte tres. Entonces, lo que vamos a hacer es importar el componente de encabezado en el diseño base. Veamos eso... importar los componentes de encabezado. Vale, déjame rápidamente... en realidad... mostrarte. Entonces, este es ya un proyecto en funcionamiento. Lo que quiero decir con eso es el componente de encabezado en el diseño base. Entonces, este es el archivo de diseño base aster. Deberías tener eso por defecto. Si no es así, avísame. Creo que lo tienes. Déjame comprobar rápidamente en lo que estaba trabajando. Diseño. Sí, por defecto, lo tienes. Déjame... Sí, y lo que quiero que hagas es... voy a mostrarte... Mostrarte... Mejor. Un segundo. Estoy un poco perdido en lo que estaba haciendo aquí. Índice. Vale. Entonces, lo que quiero que hagas es dentro del... dentro del directorio de páginas, hay un índice.astro. Cuando lo abres aquí, comprueba si el diseño base está siendo importado. Si no, diría que puedes echar un vistazo a la parte dos. Y luego, ve al directorio correcto siguiendo el directorio que te estaba mostrando aquí. Fuente, páginas, índice.astro, y deberías tener este diseño base importado. Y déjame echar un vistazo rápido a lo que quiero decir aquí para el componente de encabezado.

11. Importando el Componente de Encabezado y Renombrando el Índice

Short description:

Asegúrate de que el diseño base esté importado y renombra index.astro para usar corchetes con el operador de propagación y el slug. Utiliza el código proporcionado desde el repositorio de GitHub. La API getStaticPaths te permite buscar y modificar rutas con Astro. Utiliza el punto final de enlace de Storyblok para conectar y recuperar enlaces. Modifica los parámetros en getStaticPaths basándote en las banderas. La CDN es la API de entrega de contenido de Storyblok para acceso de solo lectura. Define la ruta para buscar datos relacionados con las historias y modifica las configuraciones de slug. Establece la versión para recuperar contenido en borrador o publicado. Prueba una nueva página sobre utilizando el tipo de contenido de página, que es equivalente a una plantilla de página llamada página.

Vale. Probablemente debería... el núcleo... No lo tengo. Vale. Probablemente quiero decir que solo asegúrate de que el diseño base esté importado. Y luego el siguiente paso que queremos hacer es renombrar este índice.astro para usar corchetes con el operador de propagación y usar el slug. Entonces, diría, como, puedes copiar y pegar aquí, pero si vas a ver algunos errores, intenta... intenta no copiar y pegar, porque vi la última vez que organicé esta masterclass, cuando copias y pegaste el texto de la noción, en realidad no siguió el exacto, digamos, los operadores y los formatos y las fuentes. Así que, esto causó un poco de error. Entonces, si ves algún tipo de errores, entonces intenta escribirlo tal como se muestra aquí. Diría, como, que normalmente no hay problema en hacer eso, pero si tienes un problema entonces intenta modificar esta parte. Voy a ir en realidad, como, a la parte dos. Sí. Debería ser en realidad esto aquí. Entonces, puedes ver el nombre del índice.astro archivo ahora se ha rehecho en los corchetes y el operador de propagación con el slug. Y así es como deberías ver eso. Y diría que he añadido un par de códigos adicionales, y no te preocupes por eso. Puedes tener un atajo por... No añadí el enlace. Vale. Puedes tener un atajo a este repositorio de GitHub, al que puedes ir a la parte dos. Voy a enviarte el enlace. Y luego voy a navegar hasta la fuente. Ahí están las páginas. Y luego, sí. Slug, Astro. Y aquí, puedes copiar y pegar simplemente desde aquí. Así que tienes no errores de tipeo, no errores inesperados, creo. Y luego pégalo en el archivo slug.astro. Así que quiero explicarte algunas cosas mientras estás copiando y pegando el código. Y si tienes un problema, avísame mientras te explico. Y aquí, lo que quiero explicarte es el getStaticPaths. Esta es en realidad la API proporcionada por el lado de Astro, no el lado de Storyblok. Entonces, lo que pasa es que puedes buscar y modificar la ruta con Astro. Así que, si quieres modificar las rutas dinámicamente utilizando las características del lado de Astro, que deberías hacer eso, en realidad, entonces necesitas usar este getStaticPaths. Y con la combinación del enlace de Storyblok punto final, entonces puedes modificar de la mejor manera y la más flexible. Así que eso es lo que ves el getStaticPaths aquí. Y lo que ves aquí en los enlaces es que data está en realidad buscando todos los data que viste del archivo JSON de borrador conmigo. Y luego, con eso, puedes en realidad usar la API de enlaces de nosotros. Y eso es lo que puedes conectar para obtener los enlaces. Y luego, estás mapeando todos los enlaces que existen en este, diría, como el espacio. Y luego, aquí, estamos modificando los parámetros dentro del getStaticPaths porque ese es el punto de usar esta API de Astro. Y luego, estamos diciendo, si la bandera es equivalente a la cadena de inicio. Lo siento, si está indefinido o cadena de inicio, entonces estamos en realidad como renderizando en el inicio. Quiero decir, a la ruta. Y aquí, el resto de las diferentes banderas, vamos a digamos, echar un vistazo a todas estas banderas falsas y luego renderizar estas rutas. Así que, inicio, la más ruta de la ruta funcionaría de manera diferente porque modificamos para eliminar el inicio. Desde la UI, UI de Storyblok. Por eso tenemos este operador condicional. Pero el resto no es tan complicado. Y aquí es en realidad como lo que data se explica en más detalles. Así que, la CDN representa nuestra API de entrega de contenido de Storyblok. Eso es solo para leer. Así que puedes en realidad como hacer otras cosas. Con este propósito, tenemos la otra API llamada API de gestión. Pero esto es para en realidad obtener la API de entrega de contenido de Storyblok. Y luego, definimos la forma, la ruta para buscar los data que están relacionados con las historias. Y también, definimos el sí, creo que también definimos y modificamos la última configuración de los slugs. Sí. Y aquí hay también algo que podrías querer tener en mente cuando vayas a construir una aplicación lista para producción. Así que, mientras estás desarrollando tu aplicación, entonces puedes establecer la versión para recuperar los data para el borrador. Eso es lo que viste los dos diferentes archivos JSON en la pantalla para ver la estructura JSON. Lo siento, no el diseño. Estructura JSON para ver toda la información de los componentes. Y si estableces esto para publicar, entonces puedes ver la versión publicada del contenido. Así que, estuve explicando bastante tiempo alrededor del get static paths y el punto final del enlace. Y ahora, podemos ir a testing una nueva página sobre utilizando el tipo de contenido de página. Así que, el tipo de contenido es también un, diría terminología de Storyblok. Pero puedes pensar que esto es equivalente a la plantilla de página. Así que, el tipo de contenido representa las plantillas de página. Así que, hay una plantilla de página llamada página que

12. Creando la Página Acerca de y Añadiendo Componentes

Short description:

Para crear una nueva página acerca de, abre el editor visual y haz clic en la flecha hacia abajo en el lado izquierdo. Selecciona 'crear nuevo contenido' y elige 'historia'. Rellena el nombre y el tipo de contenido, luego haz clic en 'crear'. Verás un error 404 porque no hay componentes en el lado derecho. Haz clic en 'añadir opción de blog' y selecciona 'teaser'. Rellena el titular y pulsa guardar. Si el contenido no se está cargando, comprueba si el componente de cabecera se ha copiado correctamente. Crea un directorio 'componentes' bajo el directorio 'fuente' y dentro de él, crea un archivo 'header.astro'. Copia y pega el código desde el repositorio de GitHub.

ya existe. E incluso, sabes, como si fallas al, digamos, importar el esquema del componente este ya existe por defecto. Así que no te preocupes por ello. Así que, diría que necesitas crear la página acerca de, ¿verdad? Así que, vamos a crear una nueva página acerca de. Así que, diría, probablemente puedes abrir el editor visual o quedarte en la pantalla del editor visual como puedes ver aquí. Porque puedes hacer prácticamente todo en el editor visual, no solo editar el contenido, sino mucho más que eso, puedes hacerlo. Así que, cuando vas al lado izquierdo de la pantalla, hay una flecha hacia abajo. Así que, desde aquí, hay un icono de más que dice crear nuevo contenido. Así que, podemos hacer clic y luego seleccionar la historia. Hay una carpeta, que también vamos a usar más adelante. Así que, vamos a crear la página acerca de. Así que, puedes rellenar el nombre aquí. Mientras rellenas el nombre de esta página acerca de, viste que este slide se está rellenando automáticamente. Y eso es algo que tus editores de contenido o quien sea que vaya a trabajar en tu aplicación de Storyblok también tiene acceso y puede modificar eso sin pedir ayuda a nosotros. Así que, tenemos muchas características en Storyblok que los desarrolladores pueden centrarse en, sabes, como sus tareas relacionadas con el código en lugar de ser interrumpidos por los editores de contenido pidiéndote que modifiques los slugs o crees, generes nuevos slugs para sus nuevas páginas, etc.

De todos modos, así que, este es el tipo de contenido de lo que estaba hablando, que es equivalente a la plantilla de página. Y desde aquí, puedes elegir entre tres diferentes tipos de contenido si fuiste capaz de importar el esquema del componente. Así que, aquí, tienes la página y por defecto, también es la página. Así que, mientras veas la misma pantalla, puedes hacer clic en crear y listo. Y ahora, por supuesto, vemos el 404, porque acabamos de crear esta página acerca de. Y volvamos a la hoja de trucos y veamos dónde estamos ahora. Déjame ver si la gente está siguiendo. Vale. No hay nuevo chat. Vale. Déjame recargar la pantalla primero. Y sí, obtenemos el 404 porque en el lado derecho, no tenemos ningún componente. Lo estamos usando. Por eso, como, en el cuerpo, vemos añadir opción de blog. Así que, aquí, lo que voy a hacer es hacer clic en esta opción de añadir blog, y luego voy a decir, digamos, como, teaser. Así que, aquí en el teaser, hay un titular, y vamos a decir página acerca de. Pulsa el botón de guardar. Y luego ve si los contenidos se están cargando. Hay algo que no funciona. Déjame ver. Creo que necesitamos vale. Creo que también necesitamos copiar el encabezado. Sí, sí, sí, sí, sí. Eso podría ser. Creo que omití esta parte. Lo siento por eso. Así que, sí. Lo que me perdí esta parte es esta. Gracias. Muchas gracias, Keyur. Así que, bajo el directorio de fuente, creo que necesitas crear este directorio de componentes, y luego con el clic derecho y luego nueva carpeta, entonces puedes crear eso. Y dentro de aquí, puedes crear el encabezado.astro, y no te preocupes por el código porque puedes copiar y pegar desde nuestro repositorio de GitHub. Déjame volver a la raíz. Así que, aquí en la parte dos, y luego fuente componentes, entonces hay encabezado, y luego puedes copiar y pegar. Así que, te enviaré el enlace, en realidad, donde exactamente puedes venir aquí y copiar y pegar. Sí. Y veamos eso. Por supuesto, no tengo esta estructura. Por eso estoy obteniendo un error. Sí, esto también tiene que ser renombrado. Sí. Sí, esto debería estar aquí.astro. Vamos a quedarnos con eso. Creo que estaba mostrando principalmente el proyecto ya funcionando. Por eso no funcionó. Mis disculpas. Páginas, Snug, sí. Aquí. Sí. Y luego el encabezado, sí. Puedes crear una nueva carpeta, componentes, y dentro de aquí, podemos crear un nuevo archivo llamado headers.astro. Creo que era

13. Añadiendo Menús Dinámicos y Configurando Astro

Short description:

Vamos al encabezado, copiamos y pegamos. Necesitamos incluir un nuevo encabezado en el diseño base. Lo siento por el fallo. Pasemos a la parte tres, que trata sobre los menús dinámicos. Crea un nuevo archivo de configuración astro en el directorio source/storyblock/config. Añade el componente de configuración al archivo de configuración astro. Asegúrate de comprobar el repositorio de GitHub para obtener el código correcto. Puede haber un error tipográfico en el componente del encabezado astro. Comprueba dos veces el componente del encabezado en el repositorio de GitHub.

encabezado. Lo siento. Mi error. Encabezado. Y luego puedo copiar y pegar. Vamos al encabezado, copiamos, y pegamos. Vale. Y, por supuesto, creo que necesitamos incluir un nuevo encabezado en, vamos a comprobarlo, astro config. Oh, no, no este. Creo que voy a encontrar el encabezado. Ahí. Creo que voy a encontrar el encabezado. Sí. En el diseño base. Sí, eso es lo que me faltaba. Vale. Entonces, en el diseño base, eso es lo que necesitábamos importar, en realidad. Mi error. Lo olvidé. Así que, voy a copiar y pegar. En realidad puedes copiar y pegar desde el diseño, diseño base, astro en la parte dos. Así que, voy a pegar eso donde puedes copiar y pegar desde aquí. Así que, este debería ser el nuevo diseño base. Voy a pegar esto como nuevo diseño base. Así que, debería ser esto. Sí. Vale. Lo siento por el fallo. Esto podría suceder si es en vivo. Veamos si va a funcionar. ¡Sí, funciona! Muchas gracias. Me gusta mucho que los asistentes también estén ayudando y siendo interactivos. Bien. Espero que todos también puedan ver la misma página que yo. Si no, avísame y haremos todo lo posible para resolverlo juntos. De lo contrario, creo que pasaría al siguiente paso. Veamos cuál es el nuevo paso. Sí. Vale. Eso era todo sobre la parte dos. Así que, podemos pasar a la parte tres, que va a ser sobre menús dinámicos. Así que, en la hoja de trucos, como puedes ver, podemos crear un nuevo archivo de configuración astro en el directorio de Android de source, story block, y la configuración. Así que, creo que ya voy a ir a la parte tres desde el repositorio de GitHub. Así que, déjame ir a eso. Así que, puedes cambiar a la parte tres y luego ir a source, story block, y luego sí config astro. Así que, eso es. Está justo ahí. Muy simple. Pero para hacerlo interactivo, necesitaríamos este archivo. Así que, voy a crear el archivo de configuración, que va a estar bajo el directorio de source, story block. Así que, crea config. Así que, un punto astro. Y luego sí. Así que, después de eso, vamos a comprobarlo, los pasos que necesitamos seguir. Necesitamos agregar este nuevo componente dinámico, el componente de configuración, al archivo astro config dot mjs. Así que, para comprobarlo en realidad, voy a mostrarte el archivo de configuración astro de la parte tres. Y este es el lugar al que voy a enviarte donde exactamente puedes ver copiar y pegar. Así que, esta línea 14 es lo que necesitábamos. Así que, vamos a yo voy a cerrar la configuración. Y simplemente abrir el archivo de configuración astro. Y donde está siendo añadido bajo la página. Así que, voy a añadir eso. Pulsa el botón de guardar. Y probablemente tenemos algunas cosas más que añadir. Necesito ver eso. Y también necesitamos oh, lo siento. Hay un error tipográfico. Componentes. Source, componentes, encabezado astro. Veamos. Encabezado astro algo no está funcionando. Creo que quiero comprobarlo, el encabezado primero. En el repositorio de GitHub. Así que, vamos a comprobarlo juntos. Hay

14. Configurando los Componentes de Encabezado y Menú

Short description:

Hemos añadido código dinámico para obtener datos de la API de entrega de contenido. Compartiré el enlace para que actualices el archivo header.astro. Si encuentras algún problema, consulta la hoja de trucos. Vamos a revisar el editor visual para ver el error. El error ocurrió porque falta la historia de configuración. Para ahorrar tiempo, te mostraré el espacio de trabajo. En la parte tres, necesitas configurar la historia de configuración. Crea un nuevo contenido y elige 'config' como tipo de contenido. Si no puedes ver el tipo de contenido de configuración, revisa la biblioteca de bloques. Dentro del componente de configuración, crea un campo llamado 'header_menu' y permite que sólo se inserten componentes específicos. Si no pudiste importar el esquema del componente, mira las grabaciones e inténtalo de nuevo. Ponte en contacto conmigo en Twitter o Discord si necesitas más ayuda.

los componentes. Header astro. Sí, hemos añadido el código para que sea dinámico. Así que, en realidad estamos obteniendo los data de nuevo de la API de entrega de contenido. Y después de configurar esto, puedo mostrarte cómo lo estamos usando. Así que, creo que voy a compartir contigo el enlace aquí. Puedes actualizar tu código en el archivo header.astro. Vamos a copiar eso. Y luego vamos al encabezado. Así que, aquí voy a pegarlo. Quizás voy un poco rápido. Pero voy a volver para explicarte este camino donde puedes verlo. Así que, revisando la hoja de trucos para la masterclass. Y esto debería serlo en realidad. Veamos qué ha pasado en el lado del editor visual. Y sí, por supuesto. Veamos dónde ha... Voy a volver a la página principal. Y ver dónde ocurrió el error. No encontrado. Este registro no pudo ser. ¡Ah! Porque no tengo la historia de configuración. Esa es la razón. Así que, para ser más rápido porque estamos un poco atrasados en el horario, voy a mostrarte el espacio de trabajo para que puedas echarle un vistazo y configurarlo más rápido. Así que, esta es la parte tres. Lo que voy a mostrarte es... Un segundo. Estoy configurando cosas ahora mismo. Vamos a la parte tres. Vamos a la parte tres. Voy a mostrarte el repositorio de trabajo. Y lo que necesito ver es el token de la clave de la API de vista previa. Así que, parte tres. Puedo ir aquí. Un segundo. Copiar. No necesitas seguir esto ahora. Solo quiero mostrarte el entorno de trabajo primero y luego puedes configurarlo más rápido. Vale. Así que, como puedes ver aquí, independientemente del panel de control o donde sea que estés, más que solo la página principal y acerca de, tienes que configurar la historia también. Eso es lo que realmente tenemos que configurar. Así que, déjame resolver esto. Sí. Y proceder. Bien. Vale. Así que, voy a ir a esto aquí en la flecha hacia abajo y lo que puedes hacer es hacer clic en crear nuevo contenido y puedes elegir la historia de nuevo y puedes dar un nombre como config. Y diría que para el tipo de contenido, porque este es un tipo de contenido especial que queremos usar, en lugar de la página, puedes elegir la configuración. Si no ves la configuración, probablemente la importación del esquema del componente pudo haber fallado. Si ese es el caso, te voy a mostrar qué puedes configurar. Pero si puedes elegir la configuración, puedes pulsar el botón de crear y luego deberías tener la historia de configuración. Así que, para aquellos de ustedes que, digamos, como no pueden ver el tipo de contenido de configuración, pueden ir a la biblioteca de bloques en esta pantalla del editor visual. Y aquí es donde puedes realmente como probablemente imitar para crear el mismo componente. Así que, este tipo de contenido de los componentes, se llama tipo de contenido, significa que cuando creas un nuevo componente haciendo clic en este nuevo bloque, entonces puedes elegir este bloque de tipo de contenido en el medio y luego dar un nombre como config. Y eso es todo por ahora. Para crear un bloque, puedes pulsar el botón de añadir bloque y luego déjame mostrarte por dentro. Así que, aquí en el interior, si acabas de crear este nuevo componente de configuración, entonces no ves nada. Pero aquí, lo que puedes hacer es hacer clic en el icono verde a, b, que representa el texto corto. Selecciona este tipo de campo de bloques, lo siento, el tipo de campo. Y luego después de eso, puedes dar un nombre para ser, sí. Puedes dar un nombre para ser el menú de encabezado. Así que, puedo hacer eso, el menú de encabezado. Me va a preocupar porque ya tengo uno, pero quería mostrarte cómo puedes añadir eso. Así que, después de eso, puedes pulsar eso y entonces deberías poder tener exactamente la misma configuración hasta ahora. Y aquí dentro, cuando, después de que creaste este nuevo tipo de campo de bloques llamado menú de encabezado, lo que puedes hacer es ir hasta el final y luego marcar la casilla de permitir sólo componentes específicos para ser insertados y luego seleccionar los componentes. Y desde aquí, podrás elegir, sabes, los componentes y luego debería haber un enlace de menú que también necesitas crear uno. Pero diría, para aquellos de ustedes que no pudieron importar el esquema del componente, diría que graben esta grabación más tarde y luego, lo siento, vean las grabaciones más tarde e intenten por su cuenta. Y si las cosas aún no funcionan, siempre puedes contactarme en Twitter o en Discord en Storyblok. Vale. Así que, diría que después de eso, entonces aquí, cuando creas esta nueva historia de configuración, entonces lo que puedes hacer es hacer clic en este botón de añadir bloque y entonces podrás, sabes, añadir este enlace de menú automáticamente que ya importaste cuando ejecutaste este Storyblok CLI. Estoy

15. Personalizando Componentes Existentes y Añadiendo Imágenes

Short description:

Dentro del enlace del menú, puedes seleccionar el enlace interno y elegir entre las historias que has creado. El componente de menú dinámico permite a los editores de contenido modificar y crear enlaces de menú de forma dinámica. En la parte cuatro, personalizamos los componentes existentes y añadimos el componente de imagen al componente de características. Configuramos el tipo de campo de imagen en la biblioteca de bloques y subimos los activos a mostrar. El componente hero se importa y puede ser personalizado rellenando el contenido y seleccionando la imagen de fondo. Utiliza los enlaces proporcionados para activos de imagen similares. Sube los activos y selecciona la imagen a mostrar. Configura las modificaciones necesarias.

voy a eliminar aquí porque no necesito tres de ellos. Entonces, dentro del enlace del menú, lo que puedes hacer es que puedes seleccionar el enlace interno. Entonces, cuando haces clic aquí, puedes seleccionar de todas las historias que has creado. Una debería ser home, como seleccioné aquí, y luego cuando vuelvas a la raíz del ratón, el segundo enlace del menú debería ser sobre esto. Así que ahora tienes el componente de menú dinámico disponible para que, ya sabes, tus editores de contenido puedan modificar y crear eso cuando lo necesiten por su cuenta. Todos ellos son dinámicos. Entonces, si va a ser, ya sabes, como otras cinco navegaciones de menú de encabezado, no importa porque puedes renderizar como quieras y puedes, ya sabes, permitir a los editores de contenido seleccionar cualquier tipo de ruta de enlaces internos de forma dinámica. Así que espero que todos hayan podido seguirme. Lamento haber ido un poco rápido. Si tienes algún problema, avísame en el chat. Si las cosas están funcionando, eso es también genial. No dudes en decírmelo. De lo contrario, supongo que intentamos llegar a la parte cuatro, que queríamos apuntar, ya sabes, como objetivo inicial. Parece que nos quedaremos sin tiempo para la parte cinco, pero tienes esta nota de noción, así que puedes probarla como tarea después de esta masterclass. Entonces, la parte cuatro es crear los componentos personalizados. Y lo que quiero hacer es que realmente queremos interactuar con los activos porque ahora mismo lo que vemos es solo hola mundo y la página acerca de. Y luego está solo la configuración para el encabezado dinámico, que es un poco aburrido. No podemos llamar a esto un blog. Entonces, vamos a personalizar los componentes existentes. Lo que vamos a hacer es ir al componente de características, que ya tenemos. Oh, lo siento. Y luego vamos a añadir primero el componente de imagen, con el que podemos interactuar con el componente de imagen de astro, que se actualizó de una manera agradable en el astro tres. Ya lanzaron la beta de astro cuatro. En esta masterclass, no voy a experimentar con la beta de astro cuatro, pero podemos probarla con la versión estable de astro tres. Entonces, diría que podemos añadir este componente de imagen al componente de características existente y para mostrarte lo que también deberías tener, igual que mi entorno, te voy a mostrar lo que ya está configurado. Así que no habría, no, no habría errores. Y entonces puedes ver cómo debería verse. Entonces, lo que iba a hacer, ir al contenido, creo que ya voy a ir a home. Pero a lo que voy es a esta biblioteca de bloques, que parece un icono de Lego. Entonces, cuando vas a esta biblioteca de bloques, y cuando seleccionas esta característica, en lugar de solo ver el tipo de campo de nombre, que es un texto corto, queremos añadir un nuevo tipo de campo de activo. Entonces, lo que puedes hacer es hacer clic en este icono verde AB cuadrado, y luego cambiar esto a activo. Así que después de eso, puedes dar un nombre como imagen. No te preocupes, de nuevo, porque ya tengo este tipo de campo de imagen con el mismo nombre. Pero en tu caso, no creo que debas ver eso. Así que pulsa el botón de añadir. Y luego después de eso, puedes hacer clic en este nuevo tipo de campo de imagen. Y lo que quiero que hagas es ir hasta el final hasta abajo, desplazándote hacia abajo, y en los tipos de archivo, quería elegir esta casilla de verificación de imágenes. Así que marca la casilla de verificación de imágenes y luego pulsa el botón de guardar. Y entonces deberías tener exactamente el mismo componente de características que yo. Vale. Así es como puedes configurar, ya sabes, los componentes existentes. Y vamos a ir a, déjame cambiar rápidamente el token de la clave de la API de vista previa para mostrar cómo deberías ver al final. Así que esto es, esto es la parte cuatro, ¿verdad? Así que tokens de acceso, voy a coger este. Voy a cambiar esto, empezando. Sí, debería funcionar, supongo. Y luego cuando voy a home. Había algo que está funcionando perfectamente porque cambié el token de la clave de la API de vista previa. Oh, vale, eso es un poco raro. Un segundo. Sí, esto es parte tres, está bien. Vale, mi error. Así que ahora estoy en la rama correcta, porque estamos en la parte cuatro. Y veamos. Vale. Ahora vemos lo que deberíamos ver al final, por supuesto, si eliges los diferentes activos de imagen, entonces no va a parecerse a esto, obviamente. Pero el punto es, cuando voy a esta parte de astro, esta imagen de astro, que está en el componente hero, que ya tienes de la biblioteca de bloques. Así que lo que puedes hacer es en el editor visual, hay un botón de bloque más que dice un bloque. Así que haz clic aquí, busca el héroe, y luego haz clic en él. Así que y luego puedes añadir aquí, digamos que si el héroe se añade al fondo, puedes arrastrar y soltar hasta arriba. Así que tienes el mismo aspecto si quieres tener el mismo aspecto. Y dentro del héroe, puedes rellenar el contenido del titular, el contenido del subtitular y la imagen de fondo. También puedes rellenarlo. Así que este componente, este componente de héroe ya está importado. Cuando ejecutas el CLI de Storyblok para importar el esquema del componente, por eso ya tienes todo. Así que lo que necesitas hacer es creo que ves subir imagen aquí. Y luego cuando haces clic en él, puedes subir los activos, lo que quieras tener, para aquellos de vosotros, digamos no quieren pensar en qué tipo de imágenes instalar, he incluido los enlaces que puedes usar para crear un aspecto similar, digamos, puedes crear después de esta masterclass, que tomé prestado de estas imágenes de aspecto oficial de Astra, pueden, ya sabes, usar fácilmente sus activos de prensa para tenerlo, y luego subirlo aquí. Y cuando lo subas, entonces puedes seleccionar la imagen que se va a mostrar. Así que cuando haces clic en ella, entonces creo que voy a hacer eso. Y cuando pulso el botón de guardar, debería ver la nueva imagen, que necesito, por supuesto, configurar algunas de las modificaciones porque se ha estirado y cosas así. Déjame volver a como estaba antes

16. Añadiendo Componentes de Imagen y Hero

Short description:

En esta parte, añadimos un componente de imagen al componente de características, lo que nos permite subir y mostrar imágenes. Actualizamos el código para usar el nuevo componente de imagen de Astro y recuperar los activos de la función de gestión de activos digitales de Storyblok. El nombre del archivo se utiliza para buscar el activo de la imagen, y el resto de la ruta de datos se añade al componente de características. También presentamos el componente hero, que utiliza el componente de imagen y recupera datos del borrador. Siguiendo estos pasos, creamos componentes reutilizables y anidables, mejorando nuestra comprensión de la estructura. Por favor, consulte el enlace proporcionado para copiar y pegar el código necesario. No olvide actualizar el archivo de configuración de Astro para incluir los nuevos componentos. Puede encontrar los activos para usar en la masterclass.

rápidamente porque esto se ve mejor. Sí. Así que podemos tener el contenido ya mostrado y en la parte inferior, cuando vuelvo a la raíz más, por supuesto, dentro de la cuadrícula, hay características por defecto, pero no teníamos ninguna imagen al principio, especialmente cuando estamos en la parte uno, parte tres, parte dos, parte tres de esta masterclass. Así que en la imagen, puedes subir la imagen, cualquier imagen que te guste, y luego seleccionar los activos que quieres mostrar. Y luego la forma de mostrar, necesitamos actualizar nuestro código en nuestro entorno. Así que pasemos a la parte cuatro. Y luego aquí, déjame comprobar rápidamente. Sí, modificamos un componente de características. Y luego también tenemos un nuevo componente llamado componente hero. Así que creo que voy a seguir con el componente de características primero. Así que vamos a la fuente de los componentes. Lo siento, fuente de story blog, y luego una característica. Así que aquí, puedes copiar y pegar, y luego actualizar tu característica archivo astro en tu extremo. También voy a mostrarte que no necesito esto. No necesito esto. No necesito esto. Así es como debería verse. Hay un componente de imagen, que es una API de astro. Y desde el astro tres, necesitas tener esto, diría, nuevo componente de imagen de astro, que viene de un camino diferente. Antes solía ser el diferente camino. Y ahora deberías usar este camino en realidad. Y luego lo que puedes hacer es en lugar de usar el clásico, digamos, elemento de imagen, puedes usar este componente de imagen. Y estos, digamos, atributos de fuente de salida con altura son obligatorios, requeridos. Así que lo que estoy haciendo es que almaceno, ya sabes, todo el camino para llegar a los, digamos, como estos activos data, donde está almacenado en realidad en los activos de story blog, característica de gestión de activos digitales. Y luego puedo renderizar la imagen al final. Así que voy a mostrarte rápidamente dónde estoy mirando. Así que esta imagen de astros Houston es lo que quiero renderizar. Ya estoy renderizando, pero para mostrarte la lógica, porque ahora me estás siguiendo y luego intentas renderizar al final. Así que lo que puedes ver es, de nuevo, ir a esta flecha hacia abajo en el botón verde, y luego ir a este borrador JSON, porque yo no lo publiqué. Y luego aquí lo que quiero ver es la imagen aquí. Así que dentro de la imagen, todavía hay, ya sabes, como un par de objetos clave. Y luego lo que quiero ver es el nombre del archivo, porque esta es en realidad la URL para recuperar nuestros activos. De hecho, cuando yo copio y pego de esta ruta de URL, puedo ver que en realidad, oh lo siento, en realidad debería ver eso. También podría mostrarte como en el bloque de historia el activo, la parte de la característica de gestión de activos digitales. Pero ese no es el punto de esta masterclass por ahora. La parte importante es que necesitamos obtener este nombre de archivo. Y para obtener este nombre de archivo, el camino comienza desde la historia, contenido, cuerpo, y esto es un objeto de matriz. Así que mapeamos el resto de los componentes y dentro del componente hijo, que es el componente de características, y eso es lo que estamos modificando para añadir un nuevo componente. Simplemente añadimos el resto del camino restante para almacenar en la característica. Digamos aquí, por aquí. Así que esta propuesta de bloque en realidad contiene todo el camino desde el principio hasta llegar a esta parte del cuerpo de la data path. Y el resto del camino sería dependiendo del componentes hijos, sería diferente. Por eso necesitas añadir el resto de la data path para buscar este activo de imagen de Houston. Y lo mismo para el out. No añadí, digamos, el valor en el out. Por eso viste vacío. Pero si añado desde los activos de story blocks, entonces debería ver en realidad el valor del texto allí. Y estos son obligatorios. Así que establecí estos valores, pero por supuesto puedes cambiarlo si quieres. Y luego usando este Astros componente de imagen, entonces serías capaz de tener un performance y un activo modificado manejo. Así que el siguiente componente que necesitamos terminar para renderizar todo es el componente hero. Así que voy a ir a esta parte cuatro, el repositorio. Y luego hay un componente hero. Así es donde puedes copiar y pegar. Te voy a enviar el enlace donde puedes copiar y pegar. Y luego después de añadir esos nuevos componentes, hay un trabajo más que necesitamos hacer, que necesitamos añadir estos nuevos componentes al archivo de configuración de Astro. Así que voy a ir al archivo de configuración de Astro. Y aquí está el héroe. Sí, que necesitas añadir. Así es como puedes actualizar tu archivo de configuración de Astro. Deberías ver un héroe como este. También utiliza el componente de imagen. Y de la misma manera para ver el data path desde el borrador. Y aquí puedes ver que el camino que estoy obteniendo es ligeramente diferente porque el nombre del tipo de campo que di el nombre en el storybook es diferente. Por eso ves ligeramente diferente data path. Pero para buscar el resto de los titulares, voy a usar el resto del titular, sub titular. Es también bastante igual que la forma en que conseguiste la imagen del activo de Houston en el componente de características. Así que espero que hayas empezado a ver los patterns. Y espero que hayas empezado a, digamos, entender, como, estos componentes reutilizables y anidables estructura. Y luego una vez que tienes eso, vamos a comprobar si seguí todo. Sí,

17. Explorando Astro Image y el tipo de campo condicional

Short description:

En esta parte de la masterclass, demostré cómo usar Astro Image y obtener activos remotos de Storyblok. Añadimos el componente hero y exploramos el tipo de campo condicional, permitiendo a los editores de contenido elegir diferentes estilos de diseño. Al configurar las opciones en el tipo de campo, puedes controlar los valores que se muestran en la interfaz de usuario de Storyblok y en el archivo JSON correspondiente. La lógica condicional determina qué estilo aplicar en función del valor del diseño. Utilizamos el estilo Tailwind CSS y establecemos la clase hero dinámica en la capa exterior del componente hero. Esta parte es opcional, pero completa la estructura del artículo del blog. Sigue el repositorio de GitHub para la rama correcta y actualiza el token de la API de vista previa. El componente del artículo incluye varios tipos de campos, como imagen, título, teaser y texto enriquecido. Puedes subir activos desde Storyblok y manejar el texto enriquecido utilizando el SDK de Storyblok Astrid. Establece la prop adecuada y almacénala en el ámbito JSX.

sí, sí. Aquí están los activos que puedes usar. Te mostré cómo puedes ver la ruta de los data y luego usar Astro image. Sí. Por cierto, en este, digamos enfoque, necesitas usar el activo remoto para obtener esas imágenes porque todos los activos que subiste en los bloques de historia, story block están en un entorno remoto. Así que no tienes esos activos en tu entorno local. ¿Verdad? Así que si estás buscando las imágenes locales para obtener, entonces puedes echar un vistazo en la documentación de Astro. Pero estamos usando las imágenes remotas para obtener. Y eso también está documentado en el Astro. Así que creo que ya te mostré esta nueva característica. Sí, es requerida. Y ahora deberías ver eso aquí en la pantalla. Y puedes añadir el nuevo bloque, que se llama hero. Te expliqué ya al principio, pero ahora puedes ver probablemente una pantalla similar a la tuya. Y añadimos con AppBlocks, el componente hero. Ya tenemos el código para el componente hero. Y sí, hay en realidad un interesante condicional, ¿cómo debería decir, el tipo de campo condicional que puedes realmente, sí, tipo de campo que puedes ver eso desde el componente hero. Sí, no voy a profundizar demasiado porque es casi la hora de terminar nuestra masterclass. Pero para darte una idea, si quieres que tus editores de contenido tengan múltiples opciones diferentes para cambiar el diseño al vuelo, ya puedes, ya sabes, digamos, darles las opciones desde el tipo de campo. Y la lógica es que puedo mostrarte rápidamente, hay múltiples tipos de campo diferentes que puedes elegir, ¿verdad? Al principio, por defecto, es texto. Pero creamos los nuevos tipos de campo de activos para añadir al componente de características existente. Y la lógica que usé aquí es usar la opción única. Y la cosa es que puedes añadir las, ya sabes, opciones desde la pantalla de configuración. Y luego aquí, el lado izquierdo sería el valor que tus editores de contenido verían en la aplicación de Storyblok, la interfaz de usuario. Y en el lado derecho es el valor que vas a ver en el archivo JSON. Así que después de que, ya sabes, configures esos valores y pulses el botón de guardar, ahora yo, lo siento, cambié a elegir el ancho completo. Así que, y ahora cuando pulso el botón de guardar, y luego echo un vistazo al borrador JSON porque no publiqué el contenido, entonces debería ver el ancho completo, sí, aquí. Y este diseño es la ruta de los data que estamos añadiendo la lógica condicional, digamos, aquí. Este es el hero, ¿cómo se llama? Diseño, sí. Así que aquí está la lógica condicional que estamos añadiendo. Y si el diseño, si el que comienza desde el contenido de Storyblok body, y luego el valor del diseño se establece como restricción, entonces vamos a usar este, diría, estilo. Y por cierto, usamos el estilo Tailwind CSS, si te has dado cuenta. Y luego si no, el else, entonces probablemente vacío. Y aquí, puedes establecer esta clase hero dinámica en la capa más externa del componente hero para establecerla en el atributo de clase. Y luego dependiendo de eso, puedes permitir a tu editor de contenido seleccionar el diferente estilo del diseño desde la interfaz de usuario. Así que, sólo quería mostrarte rápidamente, veamos dónde estamos ahora. Carga, sí, carga el componente hero, creo que cubrimos esta parte. Y si te perdiste algún, digamos, pasos, siempre hay un repositorio de GitHub con la rama correcta, que es la parte cuatro en este caso. Entonces puedes olvidar y luego sólo actualizar el token de la API de vista previa en tu extremo. Y creo que el tiempo ya se ha acabado. Como dije, esta parte cinco es opcional. Pero si, digamos, pruebas esta parte después de esta masterclass, entonces serás capaz de completar y tener la mínima, digamos, estructura del bloque. Así que, ya tienes los componentos necesarios. Así que, sólo sigue y selecciona los componentes correctos y actualiza el código fuente en tu máquina local. Y entonces serás capaz de tener esta vista del artículo del blog, que puedo mostrar rápidamente cómo va a ser parecer al final. Lo siento por quedarme sin tiempo, pero espero que todavía seas capaz de disfrutar de eso después de esta masterclass. Esta es la parte cinco de la masterclass. Voy a cambiar el token de acceso para poder mostrarte. Lo hice y luego cambié a la parte cinco y voy a actualizar esto y luego volver a ejecutar. Así que, deberías ser capaz de ver lo que puedes ver al final. Así que, hay un nuevo icono que puedes ver que puedes realmente, como, crear eso desde este crear nuevo cuando estás seleccionando la historia. Pero en lugar de eso, puedes seleccionar la carpeta y luego puedes dar un nombre, igual que antes. Y luego puedes, ya sabes, decidir el slug, cómo debería ser mostrado, modificarlo, y luego dentro de aquí, puedo mostrarte el artículo tres como debería ser mostrado. Sí. Así que, aquí en el componente del artículo, cuando voy a la biblioteca de bloques para ver todos los componentes, puedes ver este componente de artículo que importaste como el archivo JSON del esquema del componente. Tienes múltiples números de diferentes tipos de campos como imagen, título, teaser, contenido que es un texto enriquecido. Y aquí, en la imagen, tengo la imagen que subí. También puedes hacer eso desde los activos de Storyblok. Y aquí está el valor del título. Aquí está el teaser que puedes rellenar. Y aquí está el texto enriquecido. El texto enriquecido se muestra aquí. Si quieres, digamos, cambiar el texto en algo, puedo hacer eso aquí, tal vez, en negrita, y luego guardarlo aquí. Sí. Ahora, ves que la primera parte de la palabra es siendo actualizada. Así que, para el blog, digamos, aplicación, será más útil para tu editores de contenido y los usuarios tener este tipo de los tipos de campo. Y para manejar el texto enriquecido, nuestro SDK de Storyblok maneja esa parte. Puedo mostrar rápidamente eso aquí. Hay el texto enriquecido, render rich text API que viene de nuestro SDK de Storyblok Astrid. Todo lo que necesitas hacer es establecer la prop correcta para llegar a este tipo de campo. Y luego simplemente

18. Conclusión y Próximos Pasos

Short description:

¡Eso es todo! Ahora tienes todas las características. Actualicé la navegación del encabezado para enlazar a los artículos del blog. Lamento no haber cubierto la parte cinco, pero si seguiste las partes anteriores, no debería ser demasiado difícil. Puedes continuar siguiendo los pasos y acceder al resto del tutorial definitivo para el despliegue. No dudes en hacer preguntas en el Discord de Storyblok. Gracias a todos por unirse. La grabación será subida, y puedes referirte a la nota de Notion para las pruebas después de la masterclass.

necesitas almacenarlo en el ámbito JSX correcto. Y eso es todo. Entonces tendrías todas estas características. Porque todo se maneja en la parte más difícil de nuestro SDK de Astrid. Deberías estar listo para continuar. Así es como puedes ver al final. Y por cierto, actualicé la navegación dinámica del encabezado para enlazar a en lugar de solo la página de inicio y acerca de. Porque queremos ver los artículos del blog. Así que, ahora tenemos tres artículos de blog. Así que por eso puedo actualizar esta configuración aquí en lugar de inicio y acerca de. Así es como lo hice. Y, sí. De nuevo, lamento no tener tiempo para hacer la parte práctica para la parte cinco. Pero, sí, si ya has seguido, digamos, las partes hasta la parte cuatro, entonces no debería ser demasiado difícil. Y, sí, de nuevo, puedes seguir los pasos hasta el final. Y si quieres desplegarlo, en realidad el resto del tutorial definitivo, al que puedes acceder aquí en la tabla. Y en la parte más inferior, hay un enlace donde puedes hacerlo. Y diría que espero que todos hayan disfrutado y avísame si tienes algunas preguntas. Entonces Storyblok también tiene un Discord. Y puedes, ya sabes, hacer tus preguntas en el Discord de Storyblok en el canal de Astrid. Así que, puedes unirte, ya sabes, desde aquí en Storyblok.com y los recursos luego van a Access All Guys. Y luego, sí, en realidad en el Hooter, lo siento. Hay un Discord y puedes unirte y hacer preguntas. Bueno. Creo que debería terminar a tiempo. Así que, con eso, diría muchas gracias a todos por acompañarme hoy. Y, sí, espero que hayas aprendido muchas cosas juntos en estas dos horas de masterclass. Y la grabación será subida en la plataforma en línea de Git Nation, diría, así que deberías poder ver las grabaciones más tarde. Y tienes acceso a esta nota de Notion. Voy a enviarla tarde por última vez porque esto es muy importante para las personas que quieren probarlo después de la masterclass. Así que, avísame cómo te va en tu extremo. Y, sí. Muchas gracias a todos.

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, what else?

React Advanced Conference 2023

102 min

Fetch, useEffect, React Query, SWR, what else?

Top Content

WorkshopFree

Ondrej Polesny

In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others

Building Blazing-Fast Websites with Next.js and Sanity.io

React Summit 2023

71 min

Building Blazing-Fast Websites with Next.js and Sanity.io

WorkshopFree

Nancy Du

Nataliya Ioffe

2 authors

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

next.js headless cms

Crash Course into Remix & Storyblok

Remix Conf Europe 2022

162 min

Crash Course into Remix & Storyblok

WorkshopFree

Facundo Giuliani

Arisa Fukuzaki

2 authors

You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.

Localizing Your Remix Website

React Summit 2023

154 min

Localizing Your Remix Website

WorkshopFree

Harshil Agrawal

Harshil Agrawal

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps

web development remix internationalization headless cms

Crash Course Into Astro, Kontent.ai and Portable Text

React Summit 2023

91 min

Crash Course Into Astro, Kontent.ai and Portable Text

WorkshopFree

Ondrej Polesny

During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.

astro headless cms

Deploying a decoupled restaurant review site to production with Strapi and Platform.sh

Node Congress 2022

134 min

Deploying a decoupled restaurant review site to production with Strapi and Platform.sh

WorkshopFree

Shedrack Akintayo

Chad Carlson

2 authors

Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.

web development case study headless node.js headless cms

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Opt in Design – The New Era of React Frameworks

React Advanced Conference 2023

23 min

Opt in Design – The New Era of React Frameworks

Benjamin Holmes

Benjamin Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

Picking up a new technology, developers stick with defaults. It's a fact that every tool from JQuery to NextJS has needed to face. At their worst, defaults ship hundreds of wasted JS kilobytes for routing, state, and other baggage developers may never use. But at their best, defaults give us a simple baseline to start from, with a clear path to add the exact set of features our project demands. This is the magic of opt-in design.
Let's see how smart defaults guide modern frontend tools from Astro to React Server Components, and why this new era reshapes your workflow, and performance metrics, for the better.

frameworks builders and founders astro

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

Emanuele Stoppa

The Astro Technology Company

A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.

next.js serverless astro

All Things Astro

React Day Berlin 2023

28 min

All Things Astro

Elian Van Cutsem

Elian Van Cutsem

Astro Ambassador with a strong focus on design, front-end development and cloud native web-applications with the emphasis on personalisation and technical innovation.

Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing

How to properly handle URL slug changes in Next.js

TypeScript Congress 2022

10 min

How to properly handle URL slug changes in Next.js

Top Content

Ondrej Polesny

Developer Evangelist @ Kontent.ai

If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022

typescript next.js headless cms

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

React Summit 2022

21 min

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

Jeff Everhart

Senior Developer Advocate @ WP Engine

One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.

wordpress remix headless cms

Large scale projects challenges (NextJS - Contentful)

React Summit 2022

20 min

Large scale projects challenges (NextJS - Contentful)

Leonidas Mamais

Leonidas Mamais

Front-end chapter lead @ Vodafone

NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.

case study next.js enterprise headless cms