Curso Intensivo de Astro, Kontent.ai y Portable Text

Rate this content
Bookmark

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.

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

FAQ

Content.ai es un proveedor de CMS sin cabeza, especializado en el almacenamiento de contenido y que permite una alta personalización en el desarrollo de sitios web.

En el taller se cubrieron temas como la importación de contenido en el CMS, la ejecución de un proyecto en Astro, la creación de páginas y componentes en Astro, la generación de modelos TypeScript y la implementación de la resolución de texto enriquecido.

Astro es un marco de trabajo de front-end que se enfoca en hacer que los paquetes del cliente sean lo más pequeños posible, ofreciendo una alternativa a marcos más pesados como Next.js o Gatsby.

Se puede participar en el taller de manera virtual, clonando el repositorio de GitHub proporcionado durante el evento y siguiendo las instrucciones en línea para configurar el entorno de desarrollo.

La resolución de texto enriquecido es el proceso de convertir texto con formato enriquecido, como HTML, a un formato que puede ser correctamente gestionado y mostrado por un CMS sin cabeza.

Para el taller práctico se necesitan herramientas como Visual Studio Code y Git instalados, además de acceso al repositorio de GitHub para clonar el proyecto y seguir los pasos del taller.

Ondrej Polesny
Ondrej Polesny
91 min
22 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El curso de hoy cubre los conceptos básicos de varios temas, con un enfoque en la resolución de texto enriquecido en los CMS sin cabeza. Los participantes aprenderán cómo importar contenido, crear páginas y componentes, generar modelos TypeScript y resolver texto enriquecido. El taller también discute el texto portátil y sus beneficios. Se destaca el uso de Astro como marco de front-end, junto con su compatibilidad con React, Vue.js y JavaScript puro. Los participantes también aprenderán sobre el trabajo con entornos, la obtención de datos y la adición de componentes personalizados en Astro.

1. Introducción y Agenda

Short description:

Hola a todos, soy Andrej. Hoy cubriremos los conceptos básicos de varios temas y nos centraremos en la Resolución de Texto Enriquecido en Headless CMS. Importaremos contenido, ejecutaremos un proyecto en blanco de Astro, crearemos páginas y componentes, generaremos modelos TypeScript, implementaremos una página de listado y resolveremos texto enriquecido en la página de inicio. También discutiremos el texto portátil. Pueden encontrar todos los enlaces necesarios en el repositorio. Tienen la opción de registrarse en content.ai o usar mi ID de proyecto. ¡Clonemos el repositorio y empecemos!

Así que hola a todos. Soy Andrej. Gracias por estar aquí. Esto debería ser una tarde divertida. Les saludo desde la República Checa. Estos son todos temas bastante amplios. Así que trataré de cubrir al menos los conceptos básicos. No quiero contarles todo sobre cada uno de estos temas, sino darles una visión general de cómo todo funciona en conjunto. Luego, por supuesto, si están en la conferencia, podemos hablar más sobre ello allí o también pueden encontrar recursos en línea para todo esto. Mi objetivo es simplemente pasar un buen rato durante la próxima hora o dos y espero que puedan llevarse algo de ello.

Así que soy Andrej, soy un evangelista de desarrollo aquí en Content.ai. Somos un proveedor de CMS sin cabeza, por lo que estamos bastante involucrados en el campo de los sitios web, el desarrollo frontend, JavaScript, etc. Mi pasión personal solía ser .NET porque comencé como desarrollador .NET. En estos días hago prácticamente de todo, lo que se espera. Así que Astro es uno de estos proyectos donde fue solo el último en llegar y fue divertido hacerlo. Ese soy yo. Compartiré los detalles del contenido justo después del taller.

Pero veamos qué vamos a cubrir hoy. Quiero que sea breve. Nadie quiere estar aquí durante cuatro horas. Esto es lo que vamos a hacer. Este es el sitio web que terminaremos al final del taller. Es solo un sitio de muestra para una aerolínea. Lo llamamos Contenare porque somos Content.ai. Así que hay un juego de palabras bastante bueno aquí. Nos vamos a centrar en la Resolución de Texto Enriquecido porque esa es la tarea más importante de cualquier sitio web que utiliza un CMS sin cabeza. Ahora, la agenda para hoy es, en primer lugar, este será un taller práctico. Si tienen Visual Studio Code instalado y listo para usar, si tienen Git, eso es perfecto. Siempre les daré unos minutos para hacer lo que estoy haciendo. Pero no habrá un bloque de 15 minutos en el que trabajarán por su cuenta. No tenemos tanto tiempo para eso. Entonces, lo que vamos a hacer es importar contenido en el proyecto del CMS. Luego, ejecutaremos un proyecto en blanco de Astro. Ya he creado uno para ustedes, así que simplemente les daré el repositorio de Git para que lo clonen. Así que no tenemos que perder tiempo en eso. Crearemos dos páginas y algunos componentes en Astro, para que puedan ver lo fácil que es crear estos componentes. Generaremos modelos TypeScript con tipado fuerte. Los llamo modelos porque, como dije, solía ser desarrollador .NET, pero en realidad son tipos en TypeScript. Pero hay un script para eso, así que también debería ser rápido. Implementaremos una página de listado que mostrará todos los datos que tenemos en el CMS sin cabeza. Implementaremos la resolución de texto enriquecido en la página de inicio. Y eso es todo. Luego convertiremos la resolución de texto enriquecido en texto portátil. También les contaré qué es el texto portátil, si están interesados en eso. Esa es la agenda para hoy. Como dije, para cada parte les daré tiempo para trabajar en eso. Déjenme ver. Ok, aquí vamos. Así que solo para compartir algunos enlaces importantes. Este es el repositorio con el que trabajaremos. En realidad, está en mi GitHub. Voy a copiar ese enlace en el chat en un segundo para que no tengan que escribirlo desde la diapositiva. Hay un archivo links.txt dentro de ese repositorio que contiene todos los demás enlaces. No necesitan escribir nada por su cuenta, pueden simplemente copiar y pegar. Ahora, como mencioné, vamos a utilizar content.ai como el CMS sin cabeza como almacenamiento de contenido. Ahora, hay dos opciones para ustedes. O bien pueden registrarse para obtener un plan gratuito o una prueba gratuita y hacer todo por su cuenta. Les daré los scripts de importación y todo, es bastante fácil de configurar. O les daré el ID de proyecto de mi proyecto y pueden usar eso. Depende de lo que estén buscando. Es más fácil si se registran por su cuenta e importan sus propios datos y pueden jugar con ellos. Pueden hacer clic en la interfaz de usuario. Pero ambas opciones son posibles. Si no quieren registrarse. Ahora es el momento de clonar el repositorio. Así que solo copiaré la URL en la ventana de chat. Si logro abrir Firefox cuando el zoom está aquí. Déjenme ver. Ahí está el archivo linux.txt. Y ahí está el registro de content.ai.

Read also

2. Registrar, Importar Datos y Configurar el Entorno

Short description:

Para comenzar, regístrese e inicie sesión en el CMS. Luego, importe datos en su proyecto utilizando content.aicli. Asegúrese de tener las claves de API necesarias y el ID del proyecto. Clone el repositorio de CLI y configure el entorno. Consulte el Workshopx.pdf para obtener instrucciones detalladas.

Si desea registrarse por su cuenta, solo tomará unos segundos. Así que simplemente copie este enlace aquí. Y péguelo allí. Obviamente, ya estoy conectado. Así que solo usaría iniciar sesión. Pero para unirse, simplemente ingrese su correo electrónico y elija una contraseña para ingresar. Les daré unos segundos para hacer eso mientras luchó con mi Firefox y otras extensiones.

De acuerdo, ahora que están registrados, deberían ver esto pero completamente en blanco. Así que veamos si podemos solucionar eso. Y, por supuesto, cuando comienzas con un proyecto en blanco, el primer paso sería importar algunos data al proyecto para tener algo con qué trabajar. Hay un par de formas de hacerlo. La primera es un administrador de respaldo. Entonces, si tienes tu proyecto, lo respaldas en un paquete zip. Puedes usar el administrador de respaldo para importar el paquete zip en otra instancia o en otro proyecto. Hoy vamos a utilizar una solución mejor, y eso es content.aicli. Ahora, el siguiente enlace debajo del registro es para el repositorio que contiene todos los data. Entonces, una vez que hayas terminado con el registro, este será el siguiente paso para llegar al proyecto CLI. También voy a clonar eso, si puedes. Ya tengo ambos clonados en mi local, así que solo te daré unos segundos para hacer lo mismo. Así que solo toma la URL y clónala en tu local.

De acuerdo, voy a abrir el proyecto en Visual Studio Code. Ahora, avísame en el chat cuando veas lo mismo que yo, así sé que podemos continuar. En realidad, este es el proyecto principal. Este es en el que estoy trabajando. Hay otro. Este es el CLI. Mientras tanto, voy a crear un nuevo proyecto para mí también para poder ejecutar la importación contigo. Puedo eliminar todos estos y tener un proyecto en blanco así. Así que solo cierra esto y elimina todo esto y también elimina las aplicaciones de contenido. Este es un proyecto bastante vacío, así que puedo trabajar con eso. Avísame en el chat si necesitas más tiempo. Si ya tienes el proyecto configurado y el segundo repositorio clonado para que podamos continuar. Solo para asegurarnos, voy a poner la segunda URL en el chat también. Pero espero que ya hayas terminado para ahora. Si no, avísame en el chat, ¿de acuerdo? Puedo esperar o puedo explicar algo más. Veamos que todos estamos aquí en el CLI de Content-Aware. Ese es el segundo repositorio que te mostré. Si lo clonaste, eso es perfecto. Ahora, para importar los data en el sistema, vamos a necesitar dos cosas. Necesitaremos el ID de la API de entrega. Cada proyecto que creas en el CMS tiene un ID de proyecto. Aquí está esta URL. Esa es esta parte de la URL. También está en la configuración en Entorno, ID. Entonces, si vas a Entorno, Configuración, General, entonces el ID del proyecto está aquí. Así que simplemente lo voy a copiar. Lo pongo en algún lugar. Podría ser aquí o en cualquier otro lugar, no importa. Voy a crear un nuevo archivo de texto. Solo lo pongo aquí. Este es el ID del proyecto. Y hay otra cosa que necesitaremos. Si volvemos al CMS, hay una sección de clave de API en Entorno, Configuración, y también vamos a necesitar la API de administración. Ahora, la API de administración es una API que te permite editar contenido en el CMS. Ahora, los casos de uso que necesitamos para importar data en el CMS. Así que definitivamente necesitamos una API de administración para hacer eso. Entonces, si no tienes eso habilitado, si es un proyecto en blanco, primero debes habilitarlo con el interruptor aquí y luego generar tu clave de API. Al principio, no estará aquí, debes definir la validez de la clave de API y luego podrás copiar eso. Así que cópialo también en el archivo de texto. Entonces, dos claves de API, ¿verdad? Una es para la API de entrega, otra es para la API de administración. Y lo que vamos a hacer es crear un nuevo entorno para el CLI. Permíteme mostrarte el repositorio de GitHub del CLI donde tenemos los ejemplos. Así que vamos a los repositorios y busca CLI. Es este. Entonces, para la configuración, deberás agregar el entorno, ¿verdad? Esa es esta parte aquí. También está, por cierto, en la presentación que he compartido. Entonces, si miras el proyecto principal, el primer repositorio que te mostré hay un archivo llamado Workshopx.pdf. Aquí, verás toda la presentación que estoy mostrando, que también contiene todos los comandos importantes, ¿verdad? Así que siéntete libre de usar eso también. Pero ahora mismo, solo voy a copiar el comando del repositorio. Así que ese es el contenido del comando de agregar entorno.

Watch more workshops on topic

Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced 2023React Advanced 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 sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
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
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 2023React Advanced 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.