Curso intensivo sobre Astro y Storyblok

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.

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,

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,

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