Curso intensivo sobre Astro y Storyblok

Rate this content
Bookmark
Slides

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

This workshop has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Un CMS sin cabeza es una arquitectura de sistema de gestión de contenidos donde la parte del front-end y el back-end están separadas, lo que permite una mayor seguridad y la posibilidad de usar diversas tecnologías de front-end.

Puedes crear una cuenta en Storyblok accediendo al sitio web de Storyblok y haciendo clic en 'probar gratis'. El proceso de creación de cuentas es gratuito.

Astro es un marco de trabajo que permite usar componentes de varias tecnologías de front-end, como React, Vue, entre otros, optimizando la carga al enviar menos JavaScript cuando es posible.

Si te quedas atrás durante una masterclass en línea, puedes seguir las instrucciones y el código fuente a través de una página de Notion compartida, lo que te permite actualizar y seguir el curso a tu propio ritmo.

JAMstack es una arquitectura de desarrollo moderna basada en JavaScript, APIs y Markup. Permite interactuar con las APIs para obtener datos, mejorando la seguridad y la velocidad de carga de las páginas.

Puedes bifurcar el repositorio de la masterclass desde el enlace proporcionado durante la sesión. Esto te permite tener una copia del proyecto en la que puedes trabajar y hacer cambios sin afectar el repositorio original.

Si encuentras un problema durante una masterclass en línea, puedes escribir tu pregunta en el chat en vivo si la sesión es interactiva, o contactar al instructor a través de medios como Twitter o Discord para obtener ayuda personalizada.

El diseño atómico en Storyblok se refiere a la organización sistemática y minimalista de componentes. Permite reutilizar y reorganizar componentes para crear diferentes páginas o elementos sin necesidad de duplicar plantillas.

Arisa Fukuzaki
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.

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,

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.
Curso Intensivo de Remix y Storyblok
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Curso Intensivo de Remix y Storyblok
WorkshopFree
Facundo Giuliani
Arisa Fukuzaki
2 authors
Tal vez ya hayas leído sobre Remix. Probablemente ya lo hayas usado, y recientemente hayas escuchado mucho sobre los CMS sin cabeza. En este curso rápido, pondremos todas las piezas juntas y te mostraré por qué Storyblok en combinación con Remix es la mejor opción para tu próximo proyecto. ¡Pasa y pruébalo tú mismo!
Tabla de contenido:- Introducción a Remix, diseño atómico y el mundo sin cabeza- Configuración del entorno- Creación de páginas y comprensión de cómo funcionan las rutas dinámicas con splat routes- Consejos futuros y preguntas frecuentes
Prerrequisitos: Node.js instalado, cuenta de GitHub.
Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
WorkshopFree
Harshil Agrawal
Harshil Agrawal
El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos
Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
Node Congress 2022Node Congress 2022
134 min
Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js se ha convertido en un lenguaje cada vez más popular para construir y desplegar APIs backend. En un mundo de CMSs heredados que adoptan implementaciones desacopladas, han surgido muchos frameworks que se autodenominan CMS "headless", diseñados desde el principio para proporcionar una forma fácil de personalizar modelos de contenido, administrar permisos y autenticación, y servir rápidamente una API de contenido.
Strapi, uno de los líderes en este espacio, ha lanzado recientemente su versión 4 del framework, y con Platform.sh se puede desplegar junto con varios frontends dentro del mismo proyecto, lo que brinda una experiencia de desarrollo drásticamente simplificada al trabajar con sitios desacoplados. En este masterclass, desplegaremos una aplicación de demostración de Strapi, que ha sido configurada para servir un sitio de reseñas de restaurantes.
Paso a paso, agregarás servicios de base de datos, pruebas y frontends, todo dentro de entornos de desarrollo aislados. Al final, cada usuario tendrá un sitio desacoplado funcional y una mayor comprensión de cómo trabajar con sitios desacoplados en producción.

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

Diseño Opt-in – La Nueva Era de los Marcos de React
React Advanced Conference 2023React Advanced Conference 2023
23 min
Diseño Opt-in – La Nueva Era de los Marcos de React
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
Todo Sobre Astro
React Day Berlin 2023React Day Berlin 2023
28 min
Todo Sobre Astro
Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.
Cómo manejar correctamente los cambios de URL slug en Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
Cómo manejar correctamente los cambios de URL slug en Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
React Summit 2022React Summit 2022
21 min
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
Desafíos en proyectos a gran escala (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Desafíos en proyectos a gran escala (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.