Curso intensivo sobre Jamstack con Next.js y Storyblok

Mi nombre es Jagat y estoy basado en India. Creo que esa información ya está disponible. Y trabajo como Ingeniero de Relaciones con Desarrolladores en Storyblock. Y creo, sí, y puedes encontrarme en Twitter.

Mi nombre es Arisa, originalmente de Japón, pero actualmente basada en Berlín. Pero dependiendo de los días y las semanas, es posible que me encuentres en algún lugar del mundo porque tiendo a aparecer en un par de conferencias y hablar, pero principalmente en horario europeo. Regiones europeas allí. Así que gracias por mí. También diría que soy una ingeniera de desarrollo en Storyblock como verificarlo. Pero lo que pasa es que, como, también trabajo con un par de, digamos, diferentes charlas y talleres como hoy. Así que tal vez algunos de ustedes me hayan visto antes. Pero sí, estoy feliz de verlos de nuevo. Si es la primera vez que los conozco a todos. Muy agradable conocerte, y espero verte de nuevo en alguna sala del mundo también. Pero hoy estoy muy feliz de tenerte aquí.

Este es el enlace donde puedes ver lo que vamos a construir. Entonces sí, esto es nuevamente solo un sitio web de blogs normal con un encabezado, quiero decir, con un héroe, luego también agregamos un par de bloques, incluso puedes ver la página de blog, creo que debería funcionar. Sí. Y también tendremos esta página donde puedes ver los detalles de un blog en particular. Entonces sí, creo que eso es lo más importante de la introducción aquí. Quiero decir, creo que vamos a comenzar desde aquí. Como puedes ver, este es el horario, también vamos a tener algunas pausas en el medio en caso de que tengas alguna pregunta o algo, entonces estamos felices de responder también. Hablemos sobre Jamstack. Y como mencioné, hablemos un poco sobre la terminología. Vamos a profundizar un poco en la historia, cómo solían funcionar las cosas, cómo funcionan ahora. Así que comencemos con las páginas estáticas primero. Entonces sí, ¿qué es una página estática? Una página estática es algo que se entrega exactamente al lado del cliente tal como está almacenado. Quiero decir, es el mismo HTML que va a ser utilizado por todos. Entonces, quien visite el sitio web, quien visite la página, va a ser el mismo HTML, definitivamente puedes cambiar algunas cosas en el front-end. Pero en su mayoría va a ser el mismo HTML que se entregará a cualquiera de los usuarios, no importa qué usuario se una o qué usuario acceda al sitio web, es como si siempre tuvieras el mismo código HTML presente allí. Entonces eso es principalmente páginas estáticas, donde nuevamente se entrega exactamente de la manera en que se almacena. Luego hablemos de las páginas web dinámicas. Las páginas web dinámicas son algo en las que tu HTML se decide en el servidor. Incluye un motor de plantillas, sabes, como, digamos, un cliente está enviando una solicitud a tu alrededor, tienes algo de lógica allí, sabes, haces algunas cosas allí, y luego renderizas el HTML o envías el HTML al front-end dependiendo de la solicitud o dependiendo del tipo o dependiendo del usuario o dependiendo de cualquier caso de uso. Entonces eso es en su mayoría, la mayor parte de la página web dinámica. Y así es como se ven las páginas web dinámicas. Sí, también tengo uno de los diagramas conmigo hoy para explicarte cómo se ve eso. Entonces puedes ver que la primera parte aquí, la primera parte del diagrama, dice que, sabes, como, este es el ejemplo de una página web estática. Entonces puedes ver que el usuario está solicitando algo o el usuario está solicitando una página desde el lado del cliente. Y puedes ver que es como si fuera, quiero decir, es como si fuera una especie de, quiero decir, es como si fuera esta especie de interacción donde el usuario solicita algo del servidor y el servidor luego devuelve exactamente la misma página HTML que mencioné. Por otro lado, puedes ver que este es el caso de las páginas web dinámicas. Entonces puedes ver que solicitas algo al servidor, luego el servidor va a la base de datos o encuentra algo o el servidor realiza algún tipo de manipulación dependiendo del caso de uso o cualquier otra cosa y luego el servidor cambia el HTML detrás de escena y luego te entrega el HTML. Así que eso es principalmente, eso es solo una breve introducción a las páginas web estáticas y dinámicas. Hay un par de, quiero decir, no un par de, hay muchos beneficios ahora. Quiero decir, sabes, obtienes con las páginas web estáticas. El primero sería rápido porque es como si fuera la misma página que se está entregando. Entonces no es como si estuvieras aplicando lógica cada vez con cada solicitud. Es como si obtuvieras instantáneamente lo que tienes. Luego es económico. Es porque, sabes, está principalmente relacionado con el almacenamiento. No es como si necesitaras mucho, necesitaras una infraestructura muy buena o necesitaras, sabes, quiero decir, es, es, es de nuevo económico porque no tienes que realizar lógica en todas partes. Y nuevamente, es fácil de mantener porque está relacionado con el almacenamiento. Entonces, en caso de que desees tener más páginas web estáticas en tu servidor o más de estas páginas en tu servidor, solo necesitas trabajar con el almacenamiento. La mayoría de las veces es, de nuevo, no es que necesites configurar muchas cosas. Y no es como si tuvieras que mantener muchas cosas en eso. Pero nuevamente, es seguro, porque cada vez que envías una solicitud al servidor, va a ser lo mismo. No es que vaya a haber muchas cosas, no tienes que preocuparte mucho por la seguridad de la aplicación. Quiero decir, definitivamente necesitas tener los controles en su lugar. Necesitas hacer las cosas básicas que generalmente hacemos. Pero es como si las aplicaciones estáticas, las páginas web estáticas fueran más seguras. Y de manera similar, son fáciles de escalar y estables debido a las mismas razones. Está principalmente relacionado con el almacenamiento. Y está principalmente relacionado con, sabes, menos cantidad de lógica, quiero decir, menos lógica en el lado del servidor. Entonces, creo que estos son los beneficios de las páginas estáticas. Sigamos adelante. También tenemos actualmente aplicaciones de una sola página. Entonces, las aplicaciones de una sola página, quiero decir, sabes, solíamos tener muchas páginas estáticas en el pasado porque no podías interactuar mucho con las páginas web que solían estar allí. Entonces, ese fue el momento en que solíamos tener muchas páginas web estáticas. Y, sabes, a medida que pasaba el tiempo, usábamos muchas páginas web del lado del servidor, donde quiero decir, páginas web dinámicas donde aplicas la lógica y cosas así, pero los beneficios de las páginas web estáticas, se mantienen allí. Hablando de las aplicaciones de una sola página, la mayor parte del tiempo, es un archivo HTML que se entrega en tu front-end. Y luego tu JavaScript es responsable de hidratar eso, la mayor parte de las veces, sabes, regenerando las rutas, ya sean dinámicas o estáticas o cualquier cosa, pero es como si no vieras muchas recargas sucediendo dentro de una aplicación de una sola página. Quiero decir, como dice el nombre, es una aplicación de una sola página y para la mayoría de los frameworks de front-end que usamos hoy en día. No estoy hablando de la parte de JAMstack primero porque obviamente vamos a llegar allí con el tiempo, pero hablando de React, hablando de Vue, hablando de Angular si los usas en su modo general o en la forma en que eran, es como si la mayoría de ellos fueran estáticos, son aplicaciones de una sola página y son bastante útiles. Quiero decir, puedes tener muchas interacciones dinámicas, puedes jugar con muchas cosas y, sabes, puedes controlar muchas cosas y puedes jugar como mencioné, dependiendo de dónde se una el usuario y se vuelve mucho más fácil y la carga allí sigue siendo rápida. Quiero decir, la carga dinámica, sigue siendo rápida y cosas así. De acuerdo, sigamos adelante. Veamos también los tipos de renderizado que tenemos. Lo primero que te estoy mostrando aquí es el renderizado en el lado del servidor. Entonces, el renderizado en el lado del servidor es algo nuevamente, donde tu HTML se renderiza en el servidor, donde se genera en el servidor. Luego, si hablamos del renderizado en el lado del cliente, es como si la mayor parte del renderizado, la mayor parte del HTML que se renderiza, en su mayoría se maneja con JavaScript, pero, como, en su mayoría, sucede en el lado del cliente, en el lado del cliente, por lo que tienes lógica allí. Y todo lo que ves o todo lo que obtienes, en su mayoría sucede en el lado del front-end, el front-end juega con los datos, oculta algunos de los datos, obtiene algunos de los datos y cosas así. Y por otro lado, si hablamos del lado del cliente, es como si, por otro lado, si hablamos del lado del servidor, es como si todo el renderizado fuera en el lado del servidor y nuevamente te está dando el HTML que se genera en el servidor. Hablando de los pros y los contras de ambos tipos de renderizado, si hablamos del renderizado en el lado del servidor, la mayor parte del tiempo, sabes, el beneficio que creo que la mayor parte del tiempo tengo con el renderizado en el lado del servidor es un mejor SEO y optimización en redes sociales porque el lado del servidor se puede indexar fácilmente, es como si el HTML renderizado se pudiera indexar fácilmente y cosas así. Incluso puedes ver un par de pros más que se enumeran aquí. Entonces, sabes, por ejemplo, como dice, carga inicial más rápida. Entonces dice que si usas el lado del cliente, quiero decir, si usas el lado del cliente, va a ser como si fuera el mismo HTML la mayor parte del tiempo, la misma página HTML que quieres la mayor parte del tiempo. Y es como si la primera carga fuera bastante complicada cuando usas algún tipo de renderizado en el lado del cliente o aplicaciones de una sola página, pero en el lado del servidor, nuevamente, la mayor parte de la parte complicada sucede en el servidor y obtienes exactamente lo que necesitas ver en el front-end. Las aplicaciones del lado del servidor, quiero decir, el renderizado en el lado del servidor, son más seguras, obviamente, porque hay código del lado del servidor involucrado. Y, obviamente, es más liviano, quiero decir, no es una carga muy pesada en las aplicaciones del lado del cliente o en los dispositivos del lado del cliente, porque todo, la mayor parte de la lógica, la mayor parte de la lógica se realiza en el servidor.

Si hablamos de las desventajas, puedes ver que, ya sabes, en general, en general, cada vez que necesitas recargar la página completa cada vez que te mueves a otra página. Sí, creo que esas son la mayoría de las dificultades, que siento cuando trabajo con el renderizado en el lado del servidor, y también puedes ver que las páginas se cargan más rápido. Pero no son muy interactivas. Por otro lado, si hablamos del renderizado en el lado del cliente, puedes ver que hay ventajas, como interacciones rápidas. Porque, de nuevo, estás jugando con JavaScript en el front-end, puedes hacer prácticamente cualquier cosa que quieras allí. Hay una carga menor en el lado del servidor, porque la mayor parte de la lógica ocurre en el lado del cliente o, quiero decir, en tu lado del cliente. Y, de nuevo, una vez que se carga tu página inicial, la mayoría de las veces, si te mueves a otra página o si generas una nueva página o si realizas alguna lógica, es más rápido en comparación con el renderizado en el lado del servidor, porque todo, de nuevo, no tiene que pasar por el servidor, no tiene que venir del servidor. En este punto, también puedes tener componentes de interfaz de usuario utilizables. Estoy seguro de que la mayoría de nosotros ya estamos familiarizados con esta parte, porque es como, de nuevo, si estás usando alguna vista de React o algún framework como React, Vue o Angular, la mayoría de ellos utilizan componentes de interfaz de usuario reutilizables. Por otro lado, si hablamos de las desventajas, nuevamente, como mencioné antes, la carga inicial de la página va a ser muy lenta, porque es como si fuera la página completa, que es como el HTML completo que simplemente se carga y luego tu JavaScript trabaja en ello. Entonces, JavaScript tiene que renderizar, quiero decir, JavaScript tiene que aplicar la lógica. Tiene que trabajar en el lado del front-end y tiene que ver qué renderizar. Entonces, sí, es lento y la carga inicial de la página. Luego también tenemos un bajo SEO, porque, quiero decir, recuerdo cuando recién comencé con los frameworks de front-end, solía haber momentos en los que estaba construyendo mi portafolio y cosas así, y pensaba, ya sé Vue, pero ahora, ¿cómo voy a hacer la parte de SEO y cosas así? Luego me di cuenta de que la mayoría de las veces, necesito instalar un par de cosas y no va a funcionar de manera muy eficiente como solía funcionar con páginas estáticas y renderizado en el lado del servidor. Sí, esas son las desventajas y hay muchas dependencias, como mencioné antes, las bibliotecas externas y cosas así. Entonces, incluso si deseas tener algo para el lado de SEO, necesitas instalar un par de cosas. Y así es como funciona dependiendo del framework de front-end que estés utilizando. Creo que esa fue una breve introducción sobre el renderizado y el tipo de páginas. Ahora podemos pasar a Jamstack y ver exactamente qué es Jamstack y cómo Jamstack utiliza todos los beneficios de, no diré todos los beneficios, pero diré los beneficios de todas las cosas que discutimos y cómo funciona y qué términos están asociados con Jamstack. Esta es la definición normal que encontramos en Internet. Dice que es una nueva forma de construir sitios web y aplicaciones que ofrecen un mejor rendimiento, mayor seguridad, menor costo de escalabilidad y una mejor experiencia para los desarrolladores. Pero, quiero decir, ¿cómo funciona eso? Así que vamos a ver cómo funciona y, quiero decir, también estoy leyendo la definición porque nunca puedo aprender la definición porque necesito ver cómo funciona. Y solo entonces puedo entender lo que significa la definición.

De acuerdo, sí. Así es como encontré esta imagen y muestra qué son las cosas. Entonces, quiero decir, lo primero es esta mermelada. ¿Qué significa la J? ¿Qué significa la A? ¿Qué significa la M? Entonces, en general, se necesita usar todas estas cosas de tal manera que todo se optimice más. Entonces, necesitas usar JavaScript en el lado del cliente y necesitas tener tu lógica allí. Cómo puedes usar JavaScript y luego puedes usar las APIs para obtener los datos en caso de que haya algo dinámico, luego necesitas usar las APIs, y luego tenemos el marcado, que es la parte de HTML la mayoría de las veces. Y sí, quiero decir, la mayoría de las veces hacemos esto del marcado, quiero decir, construimos esto del marcado en el momento de la compilación. Quiero decir, solo tenemos ese tipo de cosas en su lugar. Pero será más claro una vez que nos adentremos en ello. Quiero decir, como mencioné, hay algunos términos y hay algunas cosas que, quiero decir, no diría que son solo estas reglas estrictas que debes seguir, pero es algo que si sigues en el enfoque de Jamstack, es mejor, quiero decir, puedes llamarlo más como una cosa de Jamstack cuando sigues estas cosas de las que vamos a hablar. De acuerdo. Principalmente dice que necesitas generar sitios web estáticos que se puedan almacenar en caché o activos estáticos en el momento de la compilación siempre que sea posible. Entonces, la mayoría de las veces, cuando estás construyendo la aplicación, cuando estás, ya sabes, cuando estás implementando la aplicación antes de eso, cuando construyes la aplicación, la mayoría de las veces queremos que todas estas cosas estáticas se generen en ese momento. Entonces, incluso si, ya sabes, digamos, si estás obteniendo los datos de algún lugar, la mayoría de las veces los has obtenido primero, luego has construido la página y esa página construida va a ser similar para todos los usuarios o algo así. Quiero decir, definitivamente necesitas tener una parte dinámica en el medio a veces, pero por eso dice que siempre que sea posible y en la medida en que sea posible. Entonces, necesitas hacer este tipo de construcción estática tanto como puedas, porque la construcción estática, estos activos estáticos nos van a dar los beneficios de la página web estática de los que hablamos. Entonces, quiero decir, si la mayor parte ya está renderizada allí, solo necesitas mostrarla. Es como, ya sabes, es más fácil para el SEO. Es más fácil para entregarlo porque no hay mucha lógica que ocurra todo el tiempo. No es que JavaScript esté renderizando algo que está ahí para todos los usuarios cada vez. Solo construye uno. Quiero decir, solo construyes ese tipo de activos estáticos una vez y luego simplemente los entregas a través de la red de una CDN o cualquier otra cosa en la que estés implementando. Sí. Entonces, sí, y eso es lo que iba a mencionar a continuación. Entonces, es como que necesitas implementar estos activos en una CDN. Entonces, ya sabes, por eso mencionamos la parte de almacenamiento en caché allí. Una vez que tienes esto, es mejor que lo implementes en una red de distribución de contenido. Y, ya sabes, puedes usar esos bordes de esa red de distribución de contenido para brindar al usuario una experiencia más rápida, ya que esas páginas son principalmente estáticas. O ya sabes, ya que esos activos son principalmente estáticos, de todos modos son más rápidos. Incluso si los implementas en una CDN o en una red de distribución, será aún más rápido para que el usuario, ya sabes, interactúe. O quiero decir, obtenga esas páginas o obtenga esas aplicaciones web para ellos mismos. Una cosa que mencionar aquí es que, creo que todos estos activos estáticos, que estás entregando, no es que, ya sabes, quiero decir, ya lo mencioné antes, no es que no puedas tener una parte dinámica allí. Pero es como que una vez que estás construyendo la mayor parte de eso, tiene que ser estático. Y sí, creo que eso es la mayoría de eso aquí. Y puedo pasar a la siguiente diapositiva, que dice nuevamente que necesitas usar JavaScript en el lado del cliente. Y, ya sabes, necesitas llamar a APIs de terceros, junto con estas funciones sin servidor para interacciones dinámicas, que mencioné antes. Otra cosa aquí, ya sabes, cuando tenemos esta red de borde, quiero decir, cuando tenemos la red de distribución de contenido, es como que cada vez que algo cambia en tu sitio web, digamos, ya sabes, tienes un blog y luego cambias algo dentro de un blog, luego necesitas reconstruir esa página en particular, porque no va a cambiar de nuevo. Entonces reconstruyes ese tipo de cosas y esta caché debe invalidarse para que los usuarios puedan ver el contenido actualizado. Entonces, una vez que se crea, necesitas reconstruir ese tipo de cosa, esa página en particular o esa parte en particular para que el usuario pueda ver el contenido actualizado. Sigamos adelante. Así es como se ve la estructura. Entonces, puedes ver que generalmente estará en tu repositorio de Git, tal vez estés usando GitLab, GitHub o cualquier otra cosa. Hoy vamos a usar GitHub para implementarlo nosotros mismos. Pero sí, así es como se ve. Cambias algo cuando quieras, luego ese CI, CD pipeline en particular, que tienes, va a reconstruir ese tipo de páginas, tal vez el sitio web completo o tal vez las páginas específicas que hayas seleccionado, y eso va a generar estos activos estáticos, ya sea HTML, PNG y otros archivos estáticos que tenga. Y una vez que eso esté, ya sabes, está en la CDN. Y los usuarios pueden acceder desde estos puntos. Quiero decir, el usuario puede acceder a cualquiera de las páginas desde estos puntos. Y luego tienes las APIs, cuando hay algo dinámico sucediendo, entonces puedes usar estas APIs. Quiero decir, puedes usar estas APIs para generar contenido dinámico. Entonces, digamos que hay una página donde, ya sabes, tienes algunas cosas y solo necesitas que una pequeña parte sea dinámica. Puedes, quiero decir, solo puedes solicitar esa parte de las APIs, desde cualquier sistema o desde donde quieras. Sí, hablemos también de los generadores de sitios estáticos. Es un software o una herramienta que te permite generar los activos estáticos para cualquier sitio web o cualquier proyecto del que estábamos hablando. Por ejemplo, si estás construyendo un sitio web, hay muchos constructores de sitios estáticos o generadores de sitios estáticos que te permiten, ya sabes, extraer los activos estáticos de eso. Entonces, solo puedes implementar esos activos estáticos en cualquier lugar. Sí, como dice la definición, es un software que produce e implementa un sitio web estático utilizando fuentes de datos y plantillas. Creo que hay algunos ejemplos que deberían estar en algún lugar, pero creo que estarán en las próximas diapositivas. Pero así es como se ve el flujo de generación de sitios estáticos, puedes ver que hay datos, hay contenido, hay plantillas, usas el generador de sitios estáticos en el medio, y eso va a generar el sitio web para ti. Y te va a dar un sitio web estático. Y luego puedes, de nuevo, obtener los beneficios de una página web estática, de los que hablamos con este sitio web, va a ser más rápido, va a ser más fácil de mantener, va a ser más barato y todas las demás cosas. Y hoy vamos a usar Next JS como nuestro constructor de sitios estáticos. Entonces, vamos a usar la parte de generación de sitios estáticos de Next JS con nuestro código hoy. Vamos a usar esto. Sigamos adelante. ¿Qué es un sistema de gestión de contenido? No siempre es necesario utilizar un sistema de gestión de contenido en el enfoque de Jamstack.

So it's like, you need to have those sort of, you know, like things in place as well. Why we're talking about content management system right now it's because it's going to be used over here. And we're going to be extracting the data from content management system, just just to let you know what the content management system is. I mean, you can even I mean, you can even say CMS in place, its application or set of related programs, which are used to create, manage, update, you know, like, like, do all these sort of things. For for, for, for your particular website, or for a particular web app, or any other app, you can you can use this content management system to store the content to update the content and stuff like that.

So, yeah, these these used to be the, you know, usual content management systems, for example, WordPress, Trueboot, these, these were the things which were where you, you know, were used to manage the content, these are the monolithic ones. These are the traditional ones, we'll be taking a deeper dive into what monolithic is and what headless is. But this is just to give you an example on I mean, just just to give you an example, or just to show you how these things they can afford. So yeah, the though previously, we used to use these monolithic systems, but but with JAMstack, it's mostly, you know, like decoupled sort of system. So you're you're fetching the sort of data from the API's and stuff like that. So it's like, you cannot be using all of these monolithic systems in place. So there comes the bottom for headless CMS, which is separated or you can say decoupled from the front end. So you can say that the website is sitting over here at one place. And then your CMS is sitting over here at one place. And then you can interact between you can have that sort of interaction. It's not that the front end layer is binded with I mean, it's it's not that the front end layer is with the CMS. I mean, that's why it's called headless, we chopped the head off. So it's like, I mean, obviously not an off or real human being. I mean, in this case, it's just the front end or the presentation, real layer is being chopped. And then you can just, you know, like fetch the data from the CMS to any sort of front end. And today we are going to be using Storyblocks. So Storyblocks is a headless headless CMS, which comes along with a visual editor and we'll be seeing more of the benefits of storyblock in a while. But yeah, this is this is this is the CMS, which we are going to be using today. Yeah, and then you also I mean, while talking about the JAMstack Part, you also have serverless platforms in place. So where you can, you know, like build, deploy, and host your host your application. So for example, today, we are going to be using a Vercel. So that's that's one of the examples of these. But yeah, these are all the terms which are mostly associated with JAMstack. So for example, markup API JavaScript. Then you have a headless CMS, then you have the serverless platforms and a couple of other things as well. So yeah, I mean, that's, that's most about the JAMstack part. And as I was mentioning, we are going to be using Vercel today for deploying in case, I mean, I really hope that we get the time. And I see that I see the time now. And I think I should just make it quick because we have a lot to cover. Alright, so these are the these are the pros of pros of JAMstack. You can. You can assume already that you know we are we are playing around with the static part. We are playing around with the dynamic part and then we get the then we get the benefits combined over there here. So you can see that it's going to give you a better performance. It's going to give you I mean it's it's going to be cheaper. The caching is going to be better, the security is going to be better, it's easy to scale. And nowadays the JAMstack frameworks they are like they are getting better and better day by day. So it's like you can even generate a couple of pages. It's not like that. You need to build a complete website if you are, you know, like if you if you change anything it's like you can just generate or build that that part again it's not like that. You need to rebuild the complete website and again that the SEO is going to be better because there is a static part involved. And I mean most of the times it's like the developer experience. It's it's it gets better with the JAMstack approach because developers are very happy. Most of the times using JAMstack because it gives a lot of power to them on how to how to control the pages, how to control the structure, how to control the data. And most of the times it's the you know like decoupled approach so it's not like that. They are binded to use any specific thing. They can be using any software, any platform and any anything of that sort. There are a couple of problems as well with JAMstack. You can see that sometimes the build time is too high, sometimes you need to generate the complete website even if you're changing some smaller part or even if you're changing some smaller part you need to generate the complete page. So that those sort of things are there then you have the external dependencies and you know like sometimes the cost is I mean it's kind of difficult to evaluate I'd say. So yeah.

What is atomic design? First of all, so it's not going to be difficult and a deep topic for this workshop but if you want to study about atomic design in depth it's quite a deep methodology. So there are a couple of sources that I can show you later on, the links and also you can get access to those for example ebooks or blog posts that are written by the author the creator of the atomic design methodology. But let's get started first to show you what is atomic design like in five minutes. So first of all it's a methodology, it's not about like web design it's a methodology for creating design systems, so that is something completely different from what you know from the let's say design over there it's more of like methods in there. So it has a couple of different levels and the scales of the components and each different levels and the scales of the components are categorized into the different names. So I'm going to show you from like the smallest level and the scale of the component and then covering like the bigger scale and the levels of the components. So the smallest component is described or categorized as atoms, so whatever you see say like a very simple HTML tag in there such as like, let's say, just a label over there, or even like an input, or even just a button. All these three HTML simple elements or the tags are considered as equivalent to the atoms. So all these separated like individual component would work as, or are considered as atoms. But if you combine them, let's say, to create this component to search the inside of this website to find what you are looking for, let's say some relevant blog posts or anything, then it's going to be considered as the molecules. So whatever it consists, let's say the small scale and the level of the atoms are considered as the molecules. So it went up to the next scale and the level. So also keep in your mind that this is the smallest group of atoms. So if you combine with the other, let's say, molecules over there, then it's not going to be molecules anymore. Then it's going to be something else. That is something considered as organisms. So in this case, there is a molecule component that we created or define for searching the site in there on the right hand side. But on the left hand side, there is the navigation and the header. So it means that if you combine the molecules, then it become into another, let's say, bigger and more higher level of the scale. So that is what is called organisms. And if you combine these organisms, then it becomes as a template. So what you can use, the page template to create homepage, blog posts about contact. These are considered as templates. I think to imagine templates aren't so much difficult for you because that's something probably you might be already familiar if you have built a couple of webs out there. So this is considered as the group of the organisms with placeholders. The important thing is that here you do not have the real content in there. So you do not see like the precise images that you want to put into the hero, or you don't even see any paragraphs of the text that you want to or your content editors want to like edit and keep maintaining it. So it has to be with the placeholders. But if you put all these contents into the templates, then it becomes pages. And that is the biggest level or the scale of the component in the atomic design methodology. So we know in general of what is atomic design now, I hope. So here's another question. Why we should go for atomic design or why we should be interested in to go for the atomic design? Well, it's because if you follow this methodology, then means that you can reuse all these components, such as atoms, molecules, organisms, templates, and pages. And it's organized in our systems and components.

Probablemente puedas imaginar, digamos, si organizas todo para almacenarlo en dónde y qué, imagina eso en tu habitación o tu oficina, puedes trabajar cómodamente, ¿verdad? Pero si no tienes ningún sistema en absoluto, entonces te encontrarás con una habitación realmente caótica, ¿verdad? Y no quieres quedarte ahí, ¿verdad? Así que es exactamente lo mismo. Tener un sistema te mantendrá ordenado. Además, es escalable porque tiene el sistema, eso significa que puedes adaptar el sistema para desarrollarlo en escalas más grandes en lugar de no tener ningún sistema en absoluto para construir cosas al azar. Así que eso también es otro punto a favor y es fácil de mantener porque si las personas saben qué seguir, entonces no necesitas educarlos durante mucho tiempo de tu tiempo precioso. En cambio, puedes decirles que seguimos el design atómico y esto es lo que es el design atómico y estos son los componentes que puedes reutilizar para crear cualquier tipo de plantilla que desees crear y eso. Así que aquí están las fuentes. Espero haberme ajustado a los cinco minutos. Como dije, hay un ebook del autor e incluso hay un artículo del blog del autor, ambos son gratuitos.

Así que puedes literalmente comenzar con estas integraciones. Quiero decir, esto es una integración en poco tiempo. Puedes ver que primero necesitamos instalarlo. Creo, quiero decir, una vez que comencemos, Lisa te mostrará todo en detalle, pero esto es solo un resumen. Luego necesitamos inicializar Storyblock dentro de nuestra próxima aplicación, y también hay un par de otras características. Entonces, quiero decir, esta función de Storyblock te ayudará a habilitar el puente que tenemos para la edición en tiempo real, y este componente se utilizará para renderizar componentes dinámicos. También tenemos esta función editable, que te permite hacer clic y identificar el componente, y luego hacer cambios en tiempo real. Así que sí, creo que eso es, eso es la mayor parte de este paquete. Y vamos a ver eso con más detalle en un momento. Sí, creo que esa es la parte que quería cubrir sobre Redless CMS. Avísame si tienes alguna pregunta hasta ahora. Estaré encantado de responderlas y sí, eso fue todo.

Sí, hasta ahora no veo que surjan preguntas, sino que simplemente sugerí o pregunté a todos si está bien repasar rápidamente la introducción a Storyblock. Y luego tomemos un descanso de cinco minutos para mantener la relevancia en la primera parte del conocimiento fundamental. Y luego, después de eso, mantengamos nuestras mentes más frescas y podremos pasar a la parte práctica. Vi un par de respuestas. Pero sí, ahora veo más respuestas que llegan.

Tengo algunos blogs que utilizan Next.js con MDX. Oh, interesante. Y estaba dispuesto a migrar a Hello! CMS. ¿Storyblock admite MDX? Según lo que sé, no lo admitimos de forma nativa. Como integrarlo. Pero dependiendo de cómo puedas, digamos, construir una extensión, podrías integrarlo con esta función, dependiendo, nuevamente. Pero según lo que sé, hay algunos usuarios que han creado algunas extensiones interesantes. Creo que hay algunas posibilidades de que puedas desbloquear esa función. Sí. ¿Qué dices, Cekid? Sí, quiero decir, como mencioné, la mayoría de las veces todo es ampliable, por lo que puedes crear tu propio tipo de campo donde puedes jugar con cosas como JSX. Pero sí, quiero decir, no tenemos esa función de forma nativa, pero definitivamente puedes crear algo similar si quieres. Y estoy seguro, quiero decir, no estoy completamente seguro, pero tal vez si buscamos en GitHub, incluso podríamos encontrar algo relacionado. Sí. A veces, incluso descubro que algunos usuarios ya han creado cosas interesantes, ya sabes, como módulos de npm relacionados con eso. Y más adelante también vamos a cubrir juntos cómo puedes habilitar, ya sabes, la función para usar el Resolver de Rich Text. En realidad, hay un módulo que también fue creado por los usuarios de la comunidad. Entonces, sí, diría que tal vez intentes buscar un poco. Es posible que encuentres que alguien ya ha construido algo antes de comenzar a crear una extensión similar. Sí. Muy bien. Solo para agregar a eso, quiero decir, una vez que comiences a usar Storyblock, es como, ya sabes, como la mayoría de las veces, headless, puede haber momentos en los que ni siquiera necesites tener ese JSX presente dentro del CMS. Si, quiero decir, entiendo que puede haber un caso de uso, pero, ya sabes, tal vez puedas hacer que funcione sin necesidad de esas cosas dentro del CMS y simplemente tener ese enfoque desacoplado. Sí, sí. Muy bien. Como algunas personas están de acuerdo en que podemos repasar rápidamente la introducción a Storyblock, seré muy rápido para llevarte al mundo de Storyblock. Pero será principalmente sobre cómo puedes, digamos, usarlo. Permíteme enviar algo de entrenamiento. Cómo puedes usar este enfoque basado en la metodología de diseño atómico en Storyblock para que no necesites implementar esa metodología por tu cuenta. Puedes usar lo que ya está implementado. Aquí, en la biblioteca de bloques, puedes ver todos los componentes que has definido. Y en lugar de, digamos, crear este tipo de lógica desde cero, simplemente puedes elegir el tipo de componente. Entonces, en este caso, comencemos a crear un tipo de componente. Y puedo mostrarte qué tipos ofrecemos. Así que comencemos a crear un nuevo bloque haciendo clic en este nuevo bloque. Y primero, le daré un nombre técnico, digamos, Contacto en este caso. Aquí puedo seleccionar un tipo de bloque. Bloque, por cierto, es un término de Storyblock para describir el significado como componente. Así que no te confundas si usamos bloque. Significa en realidad componentes. Aquí puedes elegir tres tipos. El primero se llama bloque anidable. Esto es algo que ya aprendiste de la metodología de diseño atómico. Como átomos, moléculas. Estos componentes más pequeños que, digamos, las plantillas. Por lo tanto, se considera que esos componentes son bloques anidables. Eso significa que puedes anidar cualquiera de ellos. Independientemente de los niveles que puedas considerar o preguntarte. El otro se llama tipo de contenido. Esto equivaldría a lo que se describe como plantillas en la metodología de diseño atómico. Entonces, si quieres crear, por ejemplo, la plantilla de entrada de blog, simplemente puedes elegir este tipo de bloque de tipo de contenido. Y luego no necesitas duplicar, ya sabes, muchos más, ya sabes, bloques de tipo de contenido de entrada de blog. Porque siempre que definas uno, puedes reutilizar todos estos. Recuerda que la metodología de diseño atómico se basa en la reutilización. Así que eso es lo que también adoptamos. Y el bloque universal es algo único, tendemos a recibir muchas preguntas. Pero siempre explicaría como si, por alguna razón, no sabes qué tipo, ya sea bloque anidable o bloque de tipo de contenido, definir cuando vas a crear los componentes. Y definirlo como bloque universal, porque se comportará como ambos. Se comportará como bloques anidables, algo así como átomos, moléculas, organismos, así. Pero también se comportará como la plantilla, como se llama tipo de contenido en Storyblock. Entonces, si no estás seguro de qué tipo definir, simplemente usa bloque universal, luego se comportará como ambos. Así que supongamos que quiero crear el bloque de contenido, porque el contacto, digamos, este componente de contacto, debe hacerse para la plantilla de página. Así que voy a hacer clic en Agregar bloque, y ahora pude crear el componente de contacto. Y eso es lo que puedo ver en el lado izquierdo con la descripción general. Por cierto, si quieres almacenar estos, digamos, grupo relevante de los componentes, puedes crear fácilmente un nuevo grupo, algo así como átomos, así, y así. Y luego puedes almacenarlos fácilmente en los átomos. No voy a mostrar esta parte porque llevará más tiempo. Así que en lugar de eso, volvamos al contacto que he creado. Entonces aquí no tengo ningún tipo de campo en comparación con los otros componentes que ya existen, como característica, cuadrícula, página, teaser. Todos ellos tienen algo, ya sabes, al menos un tipo de campo. Así que para definir uno, puedo crear un nombre, algo así como nombre. Y de forma predeterminada, me dará el tipo de campo como texto corto, pero, por supuesto, no siempre es el caso, ¿verdad? Para cambiar eso, puedes seleccionar aquí el icono y puedes elegir el que quieras elegir. En este caso, estoy contento con el nombre, así que me quedaré con eso. Pero digamos que quiero tener la dirección de contacto y necesito tener algo más largo que el texto corto. En este caso, voy a elegir texto enriquecido. Tal vez sea un poco excesivo, pero voy a elegir, en este caso, o también puedes elegir área de texto. Así que voy a agregarlo aquí. Y ahora pude almacenar o crear dos tipos de campo en este tipo de contenido de contacto, que se considera una plantilla de página. Entonces, si incluso quiero modificar, digamos, esto. Lo siento, no soy bueno para dar nombres cuando se trata de convención de nombres y no sé qué definir. Solo quería mostrarte la cantidad de opciones para que podamos ver cómo puedes modificar los campos o los tipos de campo que has creado. Entonces, para modificar, estamos yendo más a fondo más allá de la metodología de diseño atómico. Pero después de descubrir y definir y usar esta metodología de diseño atómico, te estoy mostrando ahora cómo puedes, ya sabes, crear nuevos tipos de campo en cada componente que has definido. Entonces, aquí, si quiero, digamos, campo requerido, hacerlo un campo requerido, puedo marcar la casilla de verificación.

¡Ups, lo siento! Eso no se esperaba. O si quiero cambiar la fuente de donde quiero recuperar los data que vienen a esta prueba, digamos, el tipo de campo, puedo cambiar la fuente de todas estas, ya sabes, diferentes tipos de lugares. Entonces, las historias son nuevamente, otro término de Storyblock. En este caso, vamos a construir un proyecto de blog. Lo siento, su blog en una aplicación web. Entonces, las historias son equivalentes a las páginas en este caso. Idiomas, si tienes otros idiomas para recuperar los data, entonces puedes obtenerlos de allí. Hay otra función llamada fuente de data que está disponible en Storyblock. No vamos a cubrir esto en profundidad esta vez, pero es algo en lo que puedes almacenar las claves y los valores. Solo quería mostrarte rápidamente las posibilidades de lo que puedes modificar en los tipos de campo. Entonces, si estoy listo con esta configuración, tal vez cambiarlo en el orden o algo así, puedo hacer clic en guardar. Y cada vez que quiera, digamos, crear una nueva historia, en este caso serían como las páginas, entonces puedo crear una nueva, eligiendo esta historia. Y desde aquí, digamos que quiero crear la página de contacto, por eso creé la plantilla de página de contacto, ¿verdad? Entonces, desde aquí, antes no estaba aquí, pero solo porque creé y definí como una de las metodologías atómicas de design, plantillas, entonces está el contacto, así que puedo crear uno nuevo. Y ahora, en comparación con la otra historia de inicio, este contacto, digamos, página en este caso, utiliza una plantilla diferente. Eso es lo que quería mostrarte. Cómo adaptamos la metodología de diseño atómico y cómo puedes reutilizar todos estos componentes disponibles en el sitio de Storyblock. Y todas estas, digamos, configuraciones que he hecho, que están disponibles en la biblioteca de bloques, todos los usuarios que tienen los permisos más altos o los administradores, pueden hacer eso. Entonces, significa que no solo tú, los desarrolladores pueden modificar todo esto y necesitan ayudar a los usuarios no desarrolladores. No, ellos también pueden hacerlo por ti. Y tendrás toda la información disponible en los archivos JSON, uno de los archivos JSON. Entonces, en este caso, he usado el contacto y aquí puedes ver parte de la información de slug y hay un par de información allí. No agregué muchos componentes allí. Por eso no lo ves. Pero básicamente verás todas las relaciones con los componentes relevantes disponibles en formato JSON, que es más familiar o amigable para los desarrolladores, pero para las personas no técnicas, tienen aquí la biblioteca de bloques para configurar y ver lo mismo. Muy bien, eso fue una introducción a Storyblock. ¿Alguien tiene alguna pregunta? No creo que tenga algo que surja. Ah, gracias, Tekir, por responder. De acuerdo, muy bien. Así que vamos a tomar un breve descanso. Diría que tal vez cinco minutos. Sé que tal vez queramos tomar un poco más de tiempo. No sé, pero tenemos la parte práctica esperándonos. Queremos asegurarnos de terminar nuestra masterclass a tiempo. Así que para hacer eso, mantengámonos en el camino correcto. Digamos que volveremos en, veo que la mayoría de los asistentes están en la zona horaria de Europa Central. Así que diría que después de cinco minutos, Tekir y yo también encenderemos nuestras cámaras y comenzaremos a hablar. Entonces, si nos ven a ambos comenzar a hablar y veo aquí en la pantalla, significa que estamos comenzando. ¿Suena bien? Veo pulgares arriba. Muy bien, entonces es hora de descansar. Volveremos enseguida. Ahora vamos a la parte práctica. Así que te recomiendo que abras esta nota en Notion que compartí con todos ustedes, déjame compartirlo de nuevo, porque habrá muchos enlaces donde puedes ir directamente, ya sabes, saltar a los archivos de componentes dedicados o algunas líneas de código fuente. Simplemente puedes copiar y pegar para evitar, ya sabes, correr el riesgo de tener algunos errores tipográficos y luego quedarte atascado en algunos errores desagradables. Sí, hemos preparado algunos atajos rápidos para ti, incluyendo algunas fuentes que también puedes consultar mientras construimos juntos la aplicación de blog aquí. Para comenzar, estoy en esta sección de creación de Next.js. Entonces, lo que vamos a hacer juntos como la primera tarea que debemos hacer, es ejecutar este comando npx create next app. Para hacer eso, voy a abrir mi terminal porque estoy usando macOS. Permíteme ampliar un poco. Si es demasiado pequeño, avísame, y estaré encantado de aumentarlo. Oh, ¿qué es eso? Eso es algo extraño, copiar y pegar no funciona desde la función, pero déjame escribirlo. Solo un par de información, si ejecutas este comando npx para crear el nuevo, crear, déjame ver eso, crear next app, creará la versión 13 de Next.js. Así que eso es lo que debes tener en cuenta. Y nuestro taller no va a utilizar exactamente las funciones beta de Next.js 13. En cambio, vamos a utilizar lo que ha sido probado, y luego estable. Hay algunas notas, que vamos a informarte aquí, necesitas probablemente adherirte a, digamos, alguna versión anterior, digamos, la versión 12, debido a estas razones. Y solo quería hacerte saber que en este caso, vamos a generar en realidad la nueva aplicación Next.js con la versión 13. Pero debemos tener en cuenta que en este taller, vamos a utilizar las funciones estables. Como también puedes ver correctamente en tu pantalla, si me estás siguiendo, vas a obtener un nombre, digamos, React, DaVinci, puedes dar cualquier nombre aquí. Y voy a crearlo en la raíz de mi máquina. Así que vamos a darle unos segundos más a Next.js, luego estará listo. ¿Qué versión se necesita? Sí, sí, tanto la versión 12 como la 13 funcionarán, sí. Y asegúrate de que haya algunos, digamos, requisitos que pueden ayudarte a evitar encontrarte con algunos, digamos, errores inesperados. Así que esperamos que ya tengas instalado Node.js con LTS y ya sea NPM o Yarn. En este caso, de forma predeterminada, si generas una aplicación Next.js, usan Yarn. Así que voy a quedarme con Yarn, pero si prefieres, siéntete libre de usar NPM. Esperamos que ya tengas una cuenta de GitHub. Si no la tienes, no te preocupes. Puedes verlo más adelante en la parte de implementación. Eso es lo que necesitamos principalmente para GitHub en este caso. La cuenta de Vercel es lo mismo. Si aún no la tienes, no te preocupes. Puedes verlo nuevamente al final de este taller, luego verás cómo puedes implementar tu aplicación Next.js. Entonces, el editor de texto, voy a usar VS Code, pero si tienes alguno favorito, JetBrain, lo que sea, siéntete libre de usar ese. Git, obviamente, lo necesitarás para la implementación para confirmar los cambios que hemos hecho. Pero principalmente, creo que sería mejor adherirse a la versión de trabajo de Node.js y usar Yarn o NPM. Muy bien. Ahora tenemos, ¿cómo se llamaba React? Lin, supongo, ¿verdad? Supongo que sí. Creo que lo llamaste mi app, tal vez. No, no, no, no. El más reciente es React Burning. Así que vamos allí. Y luego voy a abrirlo en VS Code. Así que veamos. Vale, espero que también puedas ver tu nueva aplicación CreateNext. Aquí ves los módulos más minimalistas que ya están instalados. Hay un par de directorios que son necesarios. De acuerdo, gracias a todos por su paciencia. Ahora vamos a seguir adelante.

Muy bien, volviendo a nuestra nota de Notion, nuestro próximo paso es verificar si la aplicación funciona. Así que vamos a ejecutar en VS Code, Ejecutar para ver. En este caso, uso Yarn allí. Así que voy a ejecutar, oh, lo siento, Yarn dev, porque hay un script para ejecutar el localhost. Y parece que aquí está el localhost, que podemos ver. Así que echemos un vistazo en el navegador si funciona. Deberíamos poder ver el nuevo ¡Bienvenido a la aplicación Next.js en ejecución! Espero que no tengas problemas allí, y dudo que no tengas problemas, ya que me llevó mucho tiempo, lo cual no debería suceder en esta masterclass de todos modos.

El siguiente paso que quería hacer es abrir esta nota de Notion, la que estoy compartiendo contigo ahora mismo, y hacer clic en este enlace Duplicar, o este enlace, ambos son iguales. Esto es para ahorrar tiempo, tanto el tuyo como el nuestro, para tener los mismos componentes precisos que necesitaremos para esta aplicación de blog en Next.js. Así que voy a hacer clic en ese enlace allí, tú también puedes hacer exactamente lo mismo, y te mostrará exactamente la misma pantalla. Ahora puedes ver, o deberías poder ver, este nuevo proyecto, digamos, Space MIS, en funcionamiento en tu StoryBlock. Aquí verás tu espacio de ejemplo, y en la biblioteca de blogs, donde te mostré una introducción a StoryBlock. Verás más de tres componentes que ya están preparados. Obviamente, estos son algo que configuramos para ti. Así que espero que todos puedan ver estos componentes listos en tu espacio, si no, avísanos. Sí, primero necesitas tener una cuenta de StoryBlock, es gratis crear una. Necesitas iniciar sesión para poder, digamos, clonar el espacio y echarle un vistazo. Sí, puedes crear una cuenta de StoryBlock en storyblock.com. Voy a pegarlo aquí, aquí y también en Discord. Déjame ir a Discord. Y desde aquí, puedes hacer clic en registrarse para completar tu información y registrarte. Si ya tienes una cuenta, pero no has iniciado sesión, aquí puedes iniciar sesión. Avísanos si necesitas un poco más de tiempo. Sí, mencionaré eso en los requisitos previos la próxima vez. Muchas gracias. Muy bien. Si alguien necesita más tiempo, avísame. De lo contrario, este paso no debería llevar mucho tiempo porque simplemente se trata de crear una cuenta, iniciar sesión y luego hacer clic en Duplicar. Muy bien. Después de eso, vamos a configurar algunas cosas pequeñas desde el panel de control de StoryBlock. Vamos a configurar la ruta de la página raíz. No esta. ¿Dónde está eso? Sí, aquí. Oh, lo siento. Este. Voy a cerrar esto. Para hacer eso, vamos a ir al contenido en el lado izquierdo de la barra lateral. Y aquí, tenemos un par de historias y la carpeta ya existente. Así que ve a Home, porque este home debería ser la raíz más alta. No te preocupes si aún no ves la vista previa, porque aún no hemos configurado dónde vamos a ver la vista previa. Así que lo vamos a configurar juntos en unos segundos. Lo que quiero que hagas es hacer clic en este icono de configuración de entrada en la parte superior de la navegación. Y desde aquí, cuando hagas clic, simplemente desplázate hacia abajo hasta el botón del ratón. Aquí puedes encontrar la ruta real. Esta ruta real, si has hecho clic en este enlace mágico para duplicar el mismo espacio, entonces deberías tener ya esta simple barra diagonal lista. La razón por la que lo hacemos es, bueno, puedo mostrarte en realidad, si lo elimino. Si guardo y clono, verás que se agrega este home inesperado al final. Y eso no es lo que queremos porque imagina que sampling.com barra diagonal home no se ve bien, ¿verdad? Así que es por eso que modificamos nuestra ruta real desde la configuración de entrada de la ruta real allí. Así que lo voy a arreglar agregando la simple barra diagonal y guardando y cerrando. Así que ahora la barra diagonal se ha reemplazado, en lugar de tener un home adicional allí. Espero que no haya sido demasiado difícil. Y en lugar de eso, vamos a configurar dónde vamos a ver la vista previa porque obviamente esto no es algo que quieras ver. Desde el cambio de URL, si haces clic, hay una opción para agregar o cambiar la URL de vista previa. Así que esto es en lo que voy a hacer clic. Vamos a hacer clic en este gran botón verde. Luego nos dirigirá a la configuración del panel de control. Incluso al editor visual. Así que aquí, la ubicación se ha establecido en algo como un valor predeterminado, que no es, diría que no es el valor que queremos ver. En cambio, queremos ver el local host 3000, ¿verdad? Así que voy a ir aquí. Voy a volver aquí, copiar ese local host del editor visual, y luego reemplazarlo. Y voy a agregar la barra diagonal al final porque qué pasa si quiero agregar algo de configuración de slack más adelante. No quiero tener 3000 y luego de repente about o contact, necesitamos tener la barra diagonal. Así que voy a hacer clic en el botón de guardar. Voy a mostrarte otra pantalla o otro paso hasta que llegues a ver la pantalla de bienvenida a Next.JS. Porque habrá pasos importantes que querrás ver. Así que volvamos al contenido y a la raíz más alta de la historia, es decir, la página de inicio. Y aquí. Así que ahora, en lugar de, ya sabes, algo de registro de error que vimos antes, ahora puedes ver que HTTP no está permitido por razones de security. Queremos que configures el proxy. Y hemos preparado dos métodos. El Método 1 es el recomendado. Así que primero, puedes instalar un par de, digamos, módulos relacionados con el proxy allí. Si aún no los has instalado, puede llevar un poco de tiempo. Así que te recomiendo ejecutar estos comandos ahora. Y trataré de esperar si todos los siguen. Si tienes algún problema siguiendo el Método 1, te recomiendo encarecidamente que sigas el Método 2 para este taller si el Método 1 no funciona, para que podamos, ya sabes, seguir con el resto del contenido del taller. El Método 2 es algo así como un parche rápido, diría yo, si el Método 1 no funciona. Así que simplemente puedes crear la página HTML estática que debería llamarse editor.html. Y puedes copiar todo desde aquí. Si por alguna razón no ves esta pantalla, no te preocupes, tenemos una copia de seguridad. Así que volviendo a la página de Notion y en la parte inferior de nuestra página de Notion, aquí están los recursos de proxy HTTPS disponibles. Así que probablemente haya algunas personas usando Windows con diferentes configuraciones. Así que tenemos los recursos disponibles en estas publicaciones de blog o preguntas frecuentes, más probablemente. Aquí puedes seguir simplemente copiando y pegando el código fuente para el Método 2 o incluso para el Método 1 también. Voy a dar un poco de tiempo a las personas por si acaso para que lo sigan. Sí, veo una pregunta, ¿dónde pongo el token que veo en la página? Buena pregunta, muy buen detalle. Aún no he cubierto esa parte porque primero necesitamos configurar cómo ver la vista previa. Y luego más adelante, te mostraré dónde puedes almacenar o poner el valor del token de la clave de API de vista previa, que estará en el nivel del código fuente. Pero es un buen detalle. Sí.

Arisa, lo siento. En realidad, no estaba seguro de dónde ni cómo seguir en ningún momento debido al registro. Y luego perdí por completo el rastro de dónde ibas. ¿Cómo llegaste a esta página en absoluto?

No te preocupes. Es bueno que nos lo hayas preguntado. Muchas gracias. Y para mostrarte una buena descripción general de dónde estamos en esta página actual. Primero, puedes iniciar sesión si ya tienes una cuenta de Storyblock o puedes crear una cuenta en storyblock.com, puedes hacerlo desde esta URL que he publicado en el zoom. Ya he creado una cuenta.

De acuerdo, genial. Bien. Después de eso, inicia sesión y luego, sí, bien. Luego en esta pantalla ves uno o algo así, ya sabes, un proyecto en marcha. Después de eso, ve a la página Noshem donde hemos puesto todas las notas importantes porque desde allí te mostraré dónde puedes encontrar el enlace para clonar el espacio aquí. Así que ve a crear un nuevo espacio y simplemente duplica o haz clic en el enlace de abajo, luego podrás duplicar exactamente la misma configuración de los componentes para esta aplicación de blog en el taller. Así que haz clic en duplicar o haz clic en este enlace, luego te generará el nuevo espacio de Storyblock.

Y luego... Ya hice todo, pero, página y luego después. Después de eso, creo que verás este espacio de ejemplo con una pantalla de inicio, ¿lo ves aquí? Sí, todo bien. De acuerdo, bien. Después de eso, ve al contenido en el lado izquierdo de la barra lateral, y aquí hay un inicio. Así que si vas a inicio, creo que verás una línea de registro de error que se muestra. ¿Lo ves? Sí, lo veo.

De acuerdo, bien. Bien. Después de eso, ya está configurado, pero solo para tu conocimiento, ve a la configuración de entrada. Así que desde aquí hasta la parte inferior, si te desplazas hacia abajo, hay una ruta real y aquí debería haber una sola barra diagonal. ¿Es así en tu entorno? Sí. Bien, bien. Después de eso, simplemente cierra porque no hiciste ningún cambio. Y para solucionar la vista previa, haz clic en cambiar URL aquí. Y luego después de eso, hay un gran botón verde que dice agregar o cambiar URLs de vista previa. Así que haz clic en este enorme botón verde, luego te dirigirá a la configuración y al editor visual. ¿Ves el editor visual desde la pantalla de configuración? Sí. Genial. Genial. Así que aquí, en la parte superior, hay una entrada que dice ubicación, esto es algo diferente en tu caso, supongo. Así que simplemente cámbialo a localhost 3000, donde se está ejecutando la aplicación predeterminada de Next.js en este momento. Y te recomiendo encarecidamente agregar la barra diagonal al final porque más adelante vamos a agregar un par de fragmentos adicionales. Será útil. Después de cambiar esta entrada de ubicación, el botón de guardar debería tener algún color en lugar de estar en gris, así que haz clic en el botón de guardar. Luego después de eso, volvemos al contenido en el lado izquierdo de la barra lateral y luego desde aquí, volvemos a la historia de inicio. Así que voy a hacer clic en inicio. Así que aquí, en lugar de ver solo una línea de registro de error, ahora deberías ver que HTTP no está permitido. ¿Ves la misma pantalla? Sí, lo veo.

Genial, genial. Sí, después de eso podemos seguir el método uno o el método dos. El método uno puede llevar un poco más de tiempo, pero es más fácil para tus futuros usos, así que ejecuta estos tres comandos primero y luego el cuarto más adelante, puede llevar un poco más de tiempo, o si tienes algún problema mientras configuras el proxy con el método uno, hay el método dos para simplemente crear un archivo HTML estático llamado editor. Y aquí está el código que puedes copiar y pegar. Esta misma información está en nuestras notas de Notion, donde seguimos los pasos uno por uno, así que en la parte inferior, puedes ver exactamente la misma configuración de proxy. Si por alguna razón no ves el código fuente en el editor visual, que debería estar allí, siempre puedes consultar las notas de Notion. Espero que eso haya quedado claro. Sí, gracias. Genial, genial. Sí, y si alguien tiene algún problema o si voy demasiado rápido, avísame, haremos todo lo posible para terminar nuestro taller a tiempo, pero al mismo tiempo tampoco queremos dejarte atrás. Así que avísanos si ese es el caso, siéntete libre de dejar mensajes en el chat de Zoom o Discord o hablar sin silenciar el micrófono. De acuerdo. Supongo que la mayoría de las personas ya han configurado correctamente. ¿Es así, Chikit? ¿Ves algún chat apareciendo? Sí, creo que la mayoría de las personas están ahí. No estoy seguro de cuántas personas ya tienen la configuración del proxy en funcionamiento, pero creo que... Sí. Todos deberían estar ahí ahora. De acuerdo, de acuerdo. Si no es así, avísanos. Para no tomar más tiempo, si todos están listos, voy a ejecutar esta línea de código porque estoy siguiendo el método uno. Si estás siguiendo el método dos, no necesitas hacerlo. Así que voy a copiar este comando aquí. El destino debería ser 3000 porque ahí es donde se está ejecutando la aplicación predeterminada de Next.js en este momento. Así que lo que voy a hacer es... Solo una pregunta, Arisa. Sí. No he usado la segunda opción donde usamos el archivo HTML interno. ¿Hay una pregunta al respecto? Sí. Esto debería estar en la carpeta pública. Así que voy a mostrarte el VS Code. Ya está la carpeta pública, ¿verdad? Así que dentro de este directorio público debería estar este archivo HTML estático. De acuerdo. Voy a pegar esta última línea de configuración del proxy y la voy a ejecutar, pero asegúrate de que el destino sea 3000. Así que voy a hacer eso. Y ahora me mostrará que está configurado. Y voy a copiar este nuevo localhost, 3010. Y lo que voy a hacer es volver al editor visual de Storyblock, y nuevamente, hacer clic en cambiar URL, porque quiero agregar esta nueva ruta de localhost configurada con el proxy. Para hacer eso, sigue los mismos pasos. Haz clic en este botón verde que dice agregar o cambiar URLs de vista previa, y vuelve al editor visual desde la configuración. Así que ahora voy a agregar en este caso, agregar las URLs de vista previa para poder cambiar entre múltiples URLs de vista previa diferentes en el editor visual. Voy a pegar en el lado derecho de la entrada. Y le voy a dar un nombre como algo configurado con el proxy, así.

Puedes darle cualquier nombre que desees. Después de hacer clic en el botón de agregar, asegúrate de hacer clic en el botón de guardar. Y ahora, debería poder cambiar entre este localhost 3000 y 3010. Oh, olvidé agregar la barra diagonal. Asegúrate de hacerlo también en tu caso. Voy a hacer clic en guardar. Veo que hay algunas preguntas que surgen. Debería cambiarse para el método 2. Irina, no entiendo a qué te refieres con eso. ¿Quieres que describa un poco más en detalle? Tal vez mientras muestro cómo puedes configurar o guardar la nueva ruta de vista previa, puedes echar un vistazo a qué respuesta. Creo que tal vez se trata del archivo HTML. No necesito cambiar nada. No. Solo necesitas copiar el código fuente que también puedes volver a la NotionNode y ver aquí, y luego crear el archivo editor.html en el directorio público allí. Y eso es todo para el método dos, si el método uno no funciona. Así que he agregado este nuevo proxy configurado para la vista previa de localhost. Lo he guardado. Así que volvamos al contenido. Volviendo a HomeStory. Y luego cambiemos esta URL por esta nueva vista previa configurada con proxy. Ahora he habilitado correctamente, digamos, la configuración del editor visual configurado con proxy. No puedo completarlo porque no puedo interactuar o, digamos, cambiar el contenido allí de forma dinámica. Al menos pude crear el enlace desde el localhost predeterminado que se ejecuta desde nuestra nueva aplicación CreateNext. Entonces, OK, Thomas, ¿sigues obteniendo el error HTTP con el método dos? ¿Qué tipo de mensajes de error recibes? ¿Te importaría pegarlo aquí? HTTP no es desconocido. OK. OK. Volvamos a ver los pasos juntos nuevamente. Para hacer eso, voy a cambiar de nuevo a 3000. Te recomiendo que eches un vistazo si sigues el método uno. Asegúrate de no tener errores de escritura, sigue los pasos para el método dos, también lo mismo, copia y pega. Si no funciona, hay otra opción de escape en este caso, que no es ideal, pero por cuestiones de tiempo para este taller, la voy a presentar. La interfaz de usuario que estás viendo ahora es la interfaz de usuario más reciente llamada v2, pero eso significa que en realidad teníamos el código de la antigua interfaz de usuario v1. Entonces, en la versión anterior de la interfaz de usuario, no era necesario configurar el proxy. Nuevamente, esta no es una solución ideal, pero por cuestiones de tiempo, te la voy a presentar. Aquí, si vuelves a esta página del panel, digamos, hay una opción para volver a v1. Entonces, si el método uno y el método dos por alguna razón no funcionaron en absoluto para ahorrar tiempo, volver a v1, luego verás una interfaz de usuario diferente aquí. Y si vas a inicio y con este localhost 3000, que no está configurado con el proxy en absoluto, verás la vista previa lista aquí. Esto, nuevamente, no es una solución ideal. Y sé que vamos a descontinuar esta interfaz de usuario v1 bastante pronto. Así que después de este taller, te diría que te asegures de revisar los métodos que seguiste. Si sigues lo mismo aquí, funcionará. Si no, avísanos. Estamos encantados de ver cómo te va después del taller. Así que puedes seguirnos en Twitter e incluso preguntarnos allí o en Discord también. Storyblock también tiene Discord. Y también el canal de Discord de React Day Berlin. De acuerdo. Espero que esta solución de escape un poco astuta te haya funcionado. Si no es así, avísanos. Entonces debería haber otros problemas. De acuerdo, creo que, sí, creo que todos ahora pueden ver la vista previa, ¿verdad? Si no es así, avísanos. Muy bien. Volviendo a la página de Notion para ver cuáles son los siguientes pasos. Así que voy a retroceder un poco. Hemos configurado la URL de vista previa, y ahora vamos a conectarnos con Storyblock, lo cual será un par de, digamos, otra configuración, pero vas a instalar un par de modules y, digamos, obtener la clave de token de la API de vista previa que proviene de Storyblock y se almacena en nuestra aplicación Next.js. Y para hacer eso, vamos a instalar dos modules. Entonces uno se llama Storyblock React. Si haces clic en leer más, verás el archivo leeme de nuestro SDK. Así que este es en realidad un SDK de React que también puedes usar en la aplicación Next.js porque se basa en React, ¿verdad? Este marco en sí mismo. Entonces puedes ver toda la información necesaria sobre el uso y algunos de los parámetros importantes que puedes configurar por ti mismo. No voy a profundizar demasiado porque esto podría ser otro taller. Para evitar eso, solo te diré que instales este Storyblock React. Y también queremos que instales Axios en este punto. Sé que muchos de ustedes ya saben que Axios no es ideal para usar, no sé, para algunos proyectos, pero en realidad estamos trabajando para eliminar eso. Probablemente muy pronto podremos anunciar que, oye, ya no necesitas instalar Axios, puedes estar libre de Axios. Pero todavía estamos trabajando un poco para finalizar nuestro trabajo. Entonces, por hoy, queremos que experimentes la versión estable con Axios. Así que eso es por lo que puedes instalar, digamos, copiando este comando allí, si usas Aron, si usas NPM, el comando sería un poco diferente, pero hagámoslo rápidamente. Así que voy a cerrar el localhost por un segundo. Y voy a, por alguna razón, realmente no funciona esta copia y pega en mi caso. No tengo idea de por qué, pero digamos, para un bloque react y Axios con una versión específica, que debe ser 0.27.2, 0.27.2. Así que agreguémoslos. Y por cierto, no necesitas agregarlos a las dependencias de desarrollo, solo agrégalos a las dependencias allí. Asegúrate de que Axios siga esta versión porque la versión más nueva de Axios tiene un pequeño problema con nuestro SDK actual de Storyblock react. Y estamos trabajando para solucionarlo junto con eliminar la opción de Axios. Así que asegúrate de seguir esta versión. Espero que hayas podido instalar todo esto. Si voy demasiado rápido, nuevamente, avísame en el chat y Ceget puede, ya sabes, déjame saber, ya sabes, si voy demasiado rápido o si encuentras algunos problemas. Muy bien. Hemos instalado dos paquetes y ahora inicialicemos la API de Storyblock en el archivo app.js subrayado. Entonces vamos a usar la API especial que proviene del SDK de Storyblock react. Si haces clic en este story block in it, serás dirigido a las líneas exactas del código donde puedes copiar y pegar en el archivo app.js subrayado. Este código completo ya está en el repositorio que también puedes, nuevamente, copiar y pegar si algo sale mal y no funciona. Pero para seguir, digamos, con fines de aprendizaje, he resaltado las líneas del código que necesitas copiar y pegar. Copiemos estas líneas de código y abramos el archivo app.js subrayado, que está en las páginas. Aquí, voy a pegarlo, después de la entrada, y obviamente aún no he importado la API de inicialización de Storyblock que debería provenir del SDK de Storyblock react. Lo que voy a hacer es que voy a copiar esta línea 2, la voy a resaltar de manera diferente, línea 2 allí. Así que pégalo, debajo de esto, Storyblock, debajo de esto, lo siento, la importación allí, solo en caso de que te envíe donde lo estoy copiando en el Zoom discord.

Entonces, simplemente puedes, ya sabes, hacer clic en este enlace y copiar la línea que he resaltado aquí. Ese es el primer proceso que necesitamos hacer. En realidad, no necesito esto, así que lo voy a minimizar. Después de eso, está la clave de token de la API de vista previa, que claramente no es la tuya en este caso. Así que eso es lo que necesitamos reemplazar con tu clave de token de API de vista previa. Y te voy a mostrar dónde puedes encontrar esta clave de token de API de vista previa. Recuerda, esto es como una especie de pegamento donde puedes crear, digamos, el vínculo entre tu aplicación de Storyblock y la aplicación Next.js en una sola. Para encontrarlo, por supuesto, viene de tu Storyblock. Así que ve a tu pantalla de Storyblock como esta, y aquí es donde nos detuvimos. Pero en lugar de buscar en el editor visual de la pantalla, vamos a volver a la pantalla anterior haciendo clic en esta flecha izquierda arriba. Y desde aquí, lo que vamos a hacer es ir a la configuración en el lado izquierdo un poco abajo. Entonces, a partir de aquí, aquí hay otra barra lateral en la parte blanca del fondo, encontrarás los tokens de acceso. Así que aquí es donde quiero que obtengas tu clave de token de API de vista previa. Y recuerda, tenemos un par de niveles de acceso diferentes de tokens. Entonces, para desarrollar tu aplicación, digamos, primero queremos tener la clave de token de API de vista previa, no la pública ni la del tema. El tema es algo en lo que no necesitas pensar ahora porque eso es algo que en realidad proviene de una versión un poco más antigua, pero solo tenlo en cuenta que probablemente usarás la vista previa y la clave de token de API pública. Verifícalo, te mostrará cuándo vas a usar la clave de token de API pública, pero en mi caso, te mostraré que vas a usar la clave de token de API de vista previa. Aquí está la opción de copiar, o simplemente puedes copiar este valor, lo siento, el valor así, y después de copiar este valor, volvemos al editor visual en el archivo underscore apto j s reemplazamos este valor predeterminado de la clave de token de la API con el tuyo. Esto es bastante importante. Y si tienes una clave de token de API de vista previa incorrecta, te mostrará, digamos, que no funciona en la pantalla de vista previa, o en algún proyecto diferente en el que estés trabajando. Así que asegúrate de que esto sea como un 101. Si algo sale mal con el editor visual, verifica si la clave de token de API de vista previa es la correcta o no. Después de eso, volvamos a la página de Notion para ver si todo se ha seguido. Hemos inicializado la integración de storybook utilizando la llamada especial de la API storybook init. Hemos obtenido la clave de token de API de vista previa de un espacio de cerveza. Teóricamente, solo podemos guardar este resultado, como ejecutar el localhost nuevamente, comenzando de nuevo. Veamos si funciona de nuevo. Creo que funciona, si no, puedo simplemente volver a ejecutarlo. Volver a ejecutar, pero lo que quería explicarte rápidamente es que, oh, hay un error, bueno, interesante. Veamos. Componentes, supongo. Ah sí, exactamente. Sí, este componente aún no se ha definido. Así es como obtengo un error, pero no te preocupes por eso. Si agregamos los componentes, podremos solucionarlo. Entonces, antes de hacer eso, quería darte un poco de información, lo que llamo, digamos, para inicializar la API de Storyblock. Entonces, en primer lugar, queremos obtener los data que provienen del sitio de la API de Storyblock para que podamos obtener el contenido, lo que sea que, ya sabes, tus editores de contenido vayan a ingresar desde el Editor Visual de Storyblock o la Interfaz de Usuario. Así es como lo llamo aquí. Y ya tiene el formato, digamos, ya sabes, la sintaxis ya formateada allí. Y eso es lo que puedes ver en nuestro archivo leeme del SDK de Storyblock React. Entonces, puedes ver aquí toda la información necesaria, digamos, los valores que puedes configurar o algunas de las configuraciones, digamos, para las opciones, etc. Y lo que Jaquit se dio cuenta antes que yo es esta parte, componentes, aún no hemos configurado ningún componente. Más precisamente, componentes dinámicos. Ni siquiera los hemos creado. Ni siquiera hemos creado estos componentes dinámicos. Entonces, por eso. Entonces, lo que hemos configurado aquí es el token de acceso. También hemos configurado las opciones de la API. Si te encuentras en EE. UU., esto es lo que necesitas configurar. Pero veo que la mayoría de los asistentes aquí están accediendo desde el área europea. Entonces, no tendrás problemas con la configuración predeterminada. Así que más adelante te mostraré cómo vamos a configurar la parte de los componentes, pero esto es muy importante para crear la conexión entre tu aplicación Next.js y el espacio de Storyblock. Así que pasemos al siguiente paso que será instalar algunos estilos. Por supuesto, queremos que nuestra, digamos, aplicación de blog se vea más bonita, ¿verdad? Pero debo admitir que no soy el mejor, digamos, persona para dar estilo a las cosas. Y creo que algunos de ustedes podrían estar de acuerdo conmigo. Por eso vamos a instalar tailwind-css. Oh, lo siento por eso. No quiero cambiar nada aquí. Si quieres leer más, haz clic aquí. Y en realidad voy a hacer eso. Ya lo tengo abierto en algún lugar aquí. Entonces, tailwind-css tiene información bastante detallada sobre cómo puedes instalarlo dependiendo de los frameworks o las bibliotecas que uses. Así que en este caso, quiero saber sobre la configuración de Next.js. Y para hacer eso, en primer lugar, hay un par de comandos que puedo ejecutar. Así que en realidad puedo, ya sabes, ejecutar este comando mpx. Espera. No, ya hemos terminado este paso uno, lo siento por eso. Así que simplemente podemos ignorar esto porque se trata de generar una nueva aplicación. Aplicación Next.js. Aquí está lo que necesitamos hacer. Así que voy a instalar un par de modules necesarios que deben ser proporcionados por el sitio de tailwind-css. Voy a, en realidad voy a, ya sabes, pausar el localhost por un segundo, y voy a instalar un par de paquetes que necesito. También puedes encontrar el mismo comando exacto aquí. Oh, lo he instalado con npm y con Yarn. No quería mezclarlos, pero de todos modos, aquí está lo que puedes hacer. Y puedes ver, aquí está lo que puedes hacer. Y después de eso, también hay comandos que también puedes seguir. Eso es exactamente lo mismo que puedes ver desde aquí. Entonces, a continuación, voy a ejecutar esta configuración con NPX. Veamos si funciona. Tengo un poco de trauma con NPX de los minutos anteriores, pero funcionó. Así que pasemos a configurar las rutas de las plantillas. Por defecto, no se ve algo como esto. Necesitamos tener esta configuración de contenido. Así que simplemente voy a copiarlo en el portapapeles desde allí, y el nombre del archivo debería ser tailwindconfig.js. Ya debería estar allí, ya que ejecutamos el comando anterior, así que voy a reemplazar los valores predeterminados, digamos, los valores del código fuente por algo que hemos copiado de la página de Tailwind CSS. Y luego, vamos a, nuevamente, modificar el archivo globalls.css. Voy a copiar estas líneas de código en el portapapeles, y vamos a buscar este archivo en el directorio de estilos. Así que busquemos el directorio de estilos, voy a cerrar los lugares innecesarios. Aquí está el directorio de estilos, por defecto debería estar en la raíz.

Y ahí está el globalls.css. No necesitas crear uno. Deberías tener uno por defecto. Así que voy a reemplazar todo con solo estas tres líneas de código y lo guardo, por si acaso. Volvamos a lo que dice tailwind-css. Necesitamos configurar el resto. Parece que la configuración se ha hecho correctamente. Necesitamos importar o asegurarnos de importar este archivo CSS. Así que eso es lo que vamos a asegurarnos. Volviendo a VS code. Voy a cerrar esta configuración y archivos. Aquí, sí, en el archivo underscore.js, vemos que la ruta de importación es correcta. Así que si queremos llamar, digamos, valores o el atributo de clase de tailwind-css, debería cargarse. Si hay algún problema, siempre podemos volver a la documentación de tailwind-css. Espero que no haya sido demasiado complicado y no veo algunos de los mensajes que aparecen. Así que espero que esté listo. Voy a mostrarte de nuevo, la nota de Notion aquí. Estos son los pasos que seguimos. Pasemos a crear. Un par de componentes dinámicos en este caso significa que es la mezcla de las plantillas o cualquier nivel de los componentes basados en la metodología del diseño atómico. Por ejemplo, esta página es en realidad un componente de plantilla que llamamos bloque almacenado como componentes de tipo de contenido. Entonces, teaser, grid, feature. Estos son componentes anidables, lo que significa que podrían ser átomos o moléculas o incluso cualquier otro nivel superior, excepto plantillas, diría en este caso porque todos estos son anidables. Así que si también estás viendo esta página de Notion, que también está disponible públicamente para ti, haz clic en este enlace de componente de página. Ahora deberías ver el archivo de componente exacto de page.js. Puedes copiar todas estas líneas de código. Y te explicaré un par de notas importantes después de crear estos cuatro componentes. Así que terminemos esta parte. Después de copiarlo, en mi caso, voy a configurar mi pantalla. Ahora ves que tengo una especie de hoja de trucos, pero no voy a mostrarte esa parte porque no será bueno para tu aprendizaje, pero para acortar mi tiempo, voy a copiar y pegar este archivo de componente. Creo que copiaste el componente de página. Y para almacenar, digamos, este archivo page.js, vamos a crear una carpeta en la raíz. Así que aquí vamos a crear una carpeta llamada componentes. No estoy escribiendo esto correctamente. componentes. Sí, soy muy malo para escribir. De todos modos. Así que dentro de esta carpeta componentes, luego voy a pegar o en tu caso, puedes crear un nuevo archivo con el nombre de page.js. Ahí es donde puedes pegarlo. Todavía nos quedan tres más. Así que volvamos a la página de Notion. Aquí está el teaser. Vamos a hacer clic en este teaser. Ahora puedes ver el archivo de componente de teaser. Así que esto también debería estar dentro del directorio de componentes. Lo que puedes hacer es copiar este valor. En mi caso, voy a copiar el archivo teaser.js, volviendo a VS code. Y en el directorio de componentes, voy a cerrar esto aquí. Puedes crear un nuevo archivo. Debería tener el nombre teaser.js. Solo copia y pega, pero debería ser lo mismo. Así que simplemente pega el valor donde lo copiaste del ejemplo del repositorio de GitHub. Nos quedan dos más. Volvamos a la página de Notion, espero que ahora hayas entendido el ritmo aquí. Así que vamos al grid. Voy a hacer clic en este grid. Ahora puedo ver el archivo de componente grid, que está dentro del directorio de componentes. Todo lo que necesitas hacer es copiar. Voy a copiar también en mi caso. Volviendo a VS code, dentro del directorio de componentes, puedes crear un nuevo archivo con el nombre de grid.js. Y puedes pegar el valor. El último. Volviendo a la página de Notion, ahora vamos a crear, o en realidad en este caso, copiar el archivo de componente feature. Así que este archivo de componente también debería estar dentro del directorio de componentes. Asegúrate de copiar todo. También voy a copiar feature en mi caso. Volviendo a VS code, dentro del directorio de componentes, puedes crear un nuevo archivo al que puedes dar el nombre de feature.js. Asegúrate de pegar lo que copiaste allí. Y podemos ver que ahora hemos creado cuatro archivos de componentes dinámicos. Y último paso. En este punto, hemos creado rápidamente cuatro importantes componentes dinámicos en el nivel de código fuente, pero aún no los hemos importado en ningún otro lugar. Aquí es donde aparece el mensaje de error porque no creé ni importé ningún componente dinámico en absoluto, pero ahora tengo todos estos componentes. Así que voy a importarlos y llamarlos dentro del bloque almacenado en él. Para ser rápido, también hay otro atajo donde puedes hacer clic para ver cómo puedes hacer eso. Así que primero que nada, esto es lo que quiero decir. También puedes almacenar directamente estos componentes en él, pero para tener un código más limpio, o digamos una forma más fácil de mantener, voy a almacenarlo en una variable, como un objeto, para que pueda, ya sabes, llamar a este, digamos, nombre de variable en él. Así que si copias todo, luego vas a copiar, digamos, los pocos componentes dinámicos que vamos a crear en unos minutos más tarde. Pero digamos que hemos creado hasta ahora, cuatro de ellos. Así que diría que puedes comentarlos o simplemente no los copies todavía. En este caso, no voy a copiarlos una vez más. Y vuelvo al archivo underscore después de JSX. Voy a eliminar o cerrar los archivos innecesarios aquí. Y arriba, desde el bloque almacenado en él, ahí es donde voy a pegar. Y para que quede más limpio, voy a eliminar por si acaso. Y primero necesitamos importarlo. Por eso aún no lo hemos importado. Por eso vemos que esta sintaxis no está resaltando nada todavía. Y para hacer eso, voy a resaltar desde la línea tres hasta la seis. Así que ahí es donde también puedes copiar.

Y voy a compartir contigo este enlace en Zoom. Así puedes seguir exactamente dónde lo estoy copiando. Así que copiemos esto, y luego peguémoslo en un nuevo archivo, el resto de las importaciones. Ahora ves que el color de sintaxis o resaltado ha cambiado. Después de eso, guardémoslo. Veamos si funciona. En mi caso, uso yarn, así que yarn depth. Y veamos si aparece algún error, parece que no hasta ahora.

Así que volvamos al editor visual de Storyblock. Así que vuelvo al editor visual de Storyblock, para hacer eso, estoy en la configuración ahora mismo, pero quiero ver el editor visual, así que voy a ir al contenido y luego hacer clic en el inicio y ver cómo va. Veo algún tipo de progreso, ¿verdad? Se ha aplicado este estilo. Y algunas de las fuentes son diferentes, ¿verdad? La razón por la que no vemos, digamos, esa característica o un teaser, este tipo de, digamos, componentes dinámicos que hemos creado, excepto la plantilla de página, es porque, bueno, hay otra característica genial que realmente me gusta usar de Storyblock. Puedes ver la relación anidada, digamos, en esta historia de inicio específica. Puedes ver que no hay, digamos, componentes dinámicos que hemos creado hasta ahora definidos dentro, excepto la plantilla de página. Por eso no ves ninguno, digamos, como teaser o grid feature, cosas así. Pero podemos ver que se ha aplicado el estilo. Así que significa que tampoco hay errores que aparezcan, lo que significa que hemos podido inicializar con éxito la API de Storyblock hasta ahora, e importar y habilitar los componentes dinámicos allí. Así que volvamos a ver el progreso actual en el que estamos desde la página de Notion. Así que hemos llegado, hemos llegado a este nivel, y ahora vamos a editar el archivo index.js, el que aún no hemos tocado hasta ahora. Y por cierto, en realidad estamos siguiendo uno de los tutoriales que creamos para el caso de Next.js que se llama Ultimate Tutorial series. Y ahí es a donde te voy a llevar al código fuente para ver el progreso actual. Así que puedes echar un vistazo a este enlace de tutorial definitivo de nuestra página de Notion, que está arriba del diagrama o tabla, lo siento. Así que aquí está el tutorial definitivo, ¿dónde está? Sí, aquí. Tutorial definitivo que puedes ver la misma página que te estoy mostrando ahora mismo. Y déjame pegarlo allí. Y desde aquí, lo que estoy haciendo está aquí. Te voy a llevar a este primer paso del tutorial definitivo. Y si echas un vistazo a esta primera serie del tutorial definitivo, ahora puedes ver todos los pasos que hemos estado siguiendo hasta ahora, ¿verdad? También vimos esto, bienvenido a next.js con el nodo directo, hemos configurado todo. También configuramos y recuperamos la clave de token de API bonita. Y aquí es donde vamos a copiar y pegar y editar el archivo index.js. Y para hacer eso, también he creado el enlace rápido para ti. Así que si te perdiste donde te lo estaba mostrando, muy rápidamente ahora, vuelve a la página de Notion, vuelve a crear la sección de componentes de react. Hemos completado hasta ahora hasta este agregar componentes a store block en él llamar. Aquí, editar el archivo index.js es el enlace donde quiero que hagas clic. Así que si lo haces, ya puedes saltar a uno de los tutoriales definitivos, que es el primero para obtener los data que provienen de la API de store block. Así que aquí está el código fuente donde puedes simplemente copiar y pegar o tu archivo index.js. Puedes copiarlo al portapapeles desde aquí y volvamos al VS code. Así que vuelvo al VS code. Aquí está el archivo index.js. Hay un par de cosas que tenemos aquí, pero quiero eliminar todo y pegar lo que tenemos hasta ahora. Así que guardémoslo y veamos cómo va en el Editor Visual. Así que vuelvo a nuestro editor visual de store block. Y ahora en lugar de ver, bienvenido a next.js arriba, ahora ha cambiado a mi sitio. Así que este es mi sitio, de dónde viene este mi sitio. En realidad, viene de este archivo index.js, donde configuramos el nombre de las historias. Recuerda, en este ejemplo de aplicación de blog, una historia es casi equivalente a la página, significa que este es el nombre de la página. Así que esto es en realidad como algún valor predeterminado. Si por alguna razón no podemos recuperar el nombre de la historia, que es inicio, entonces vamos a mostrar, digamos, el valor de cadena, mi sitio. Por eso lo estás viendo. Eso, por alguna razón, no pudimos obtener el nombre de la historia, inicio, pero lo dirigimos en una salida de escape para mostrar el nombre. Así que ahora podemos ver en realidad, sí, nuestro primer hola mundo de Storyblock en la aplicación de blog de Next.js está en funcionamiento. Así que supongo que hay un poco de error al recuperar, pero es porque no configuramos completamente. Así que esto debería solucionarse y ahora siguiendo mi par de configuraciones. Así que espero que puedas ver el mismo resultado que te estoy mostrando ahora mismo. Si no es así, avísanos. Pero no veo a nadie que nos diga que no pudo llegar a este punto, pero si te quedaste atascado en algún lugar, avísanos. Así que déjame verificar dónde estamos ahora mismo. Así que estamos aquí después de, lo siento, editar el archivo index.js y ahora podemos ver un muy, muy minimalista tipo de hola mundo de la aplicación Storyblock Next.js en funcionamiento. Vamos a completar el resto de, digamos, esta sección. Espero que no sea demasiado largo ya que el primer fragmento del contenido es en realidad lo que vamos a usar en los slugs de captura todo. Así que Next.js proporciona un par de, digamos, formas de manejar las rutas dinámicas. Vamos a usar uno de los enfoques, que es que vamos a usar un solo, digamos, corchetes cuadrados. También hay corchetes dobles, pero no queremos que el enfoque de ruta dinámica sea opcional. En este caso, queremos usarlo completamente en cualquier momento. Así que ahí es donde vas a quedarte con los corchetes simples de los slugs de captura todo. Si quieres echarle un vistazo más a fondo, es bastante contenido en mi opinión. Puedes echar un vistazo a las fuentes, quiero decir, la documentación de Next.js desde allí, pero no voy a profundizar demasiado en este caso por cuestión de tiempo. En su lugar, vamos a crear esta ruta dinámica del archivo. Lo siento, olvidé agregar el enlace en este archivo de slug, pero ahora voy a compartirlo contigo. Esto es lo que quiero que copies por ahora y crees este slug, quiero decir archivo de slug de captura todo en el directorio de páginas porque ahí es donde Next.js genera las páginas independientemente de las rutas dinámicas o no. Así que hagamos eso. En mi caso, voy a copiar en mi extremo. Así que déjame copiar eso. Así que asegúrate de copiar todo en tu extremo. Vuelvo al VS Code y creemos ese, digamos, archivo en el directorio de páginas. En mi caso, voy a pegar. Así es como debería verse. Hay algunas líneas de código con un par de, digamos, IA específica de Next.js, como get static props, get stored, lo siento, esto no es específico de Next.js. Obtener rutas estáticas, etc. Como te habrás dado cuenta, no estamos utilizando, digamos, algunas de las características beta del Next 13. Por eso ves un poco de enfoques del Next 12, como configurar, como revalidar para el ISR, cosas así. Va a ser un poco diferente, pero vamos a ceñirnos, digamos, al enfoque estable en este caso. Así que después de crear este archivo de slug, luego vamos a configurar un par de componentes adicionales. No todos son dinámicos, en este caso, como Night Hooter y la navegación, porque esto es algo que probablemente no siempre los no desarrolladores necesitan tener un control, pero si quieres que lo tengan, puedes hacerlo, pero para esta demostración, no lo hacemos. Así que ten en cuenta que un par de componentes no son dinámicos, pero de todos modos los vamos a crear. Así que sigamos adelante y creemos más componentes en este caso. Así que hagamos clic en este diseño. Así que esto es algo, diría yo, un tipo de componente global al que vas a aplicar el diseño predeterminado, como Hooter y los componentes de navegación. Por eso los importamos, y los vamos a crear después de eso.

Sí, claro. Pero significa que el siguiente paso que se trata del renderizado de componentes dinámicos está fallando o simplemente no se está renderizando. Hasta ahora no lo estamos renderizando. Quiero decir, no lo estamos haciendo. Sí, no entiendo el diseño en la historia de inicio. Sí, sí, sí. Mi culpa, lo siento. Solo importé el diseño y no lo llamé en el ámbito JSX. Por eso. ¿Soy solo yo? Oh, te quedaste atascado por un segundo y pensé. Oh, vale, vale. Sí. Sí, quiero decir, la forma en que lo tenemos dentro de slug.js, lo estamos usando de manera similar dentro de la ruta index.js. Y es como, para el diseño, quiero decir, el diseño simplemente nos dará el encabezado y el pie de página, y este componente de Storyblock es un componente especial, por lo que cualquier componente que registremos aquí se renderizará de forma dinámica. Eso es lo que estamos haciendo. Y como Arisa te mostró los data, que obtenemos de la API, esos data vienen aquí dentro de estas props estáticas. Y pasamos esos data como props, y luego el componente de Storyblock está renderizando cada componente que ve. Entonces, en el nivel superior, ve el componente de página porque estamos dentro de la página. Creo que también necesito importarlo aquí. Ahí vamos. Whoa. Creo que no hemos hecho un par de cosas aquí. Muy bien, dame un segundo. Y también necesitamos tener esto, digamos, necesitamos tener la historia que estamos obteniendo de aquí. Necesitamos usar el estado de Storyblock, y necesitamos pasar la historia que teníamos aquí. Así que sí. Esto es lo que habilita el puente y esto es lo que nos permite, esto es lo que habilita el puente para nosotros. Y esta es la historia que obtenemos de las props, obtenemos la historia al pasarla a través de get static props. Y luego usamos esa historia e inicializamos el puente aquí. Así que esto nos permitirá editar cosas en tiempo real. Veamos si funciona. Bueno, hay mucho que debe hacerse. Déjame ver. Creo que probablemente podamos eliminar esta parte. Sí, y aquí vamos. Ahora vemos el contenido. Muy bien, sí. Entonces, este es el diseño, que renderiza el encabezado. Y este es el diseño, que renderiza el pie de página. Y entre eso, puedes ver que estamos renderizando el componente hero, que tenemos. E incluso si voy aquí y si agregamos los otros componentes dinámicos que Arisa ya hizo. Entonces, por ejemplo, si entramos en el teaser, vamos a obtener el componente teaser y luego podemos, espero que funcione. Sí, funciona. Entonces podemos hacerlos, hacer estas ediciones en tiempo real nuevamente en tiempo real. Así es como puedes agregar y jugar con los componentes. Por ejemplo, como el componente hero, que tenemos o cualquier otro componente que tengamos. Eso nos va a ser devuelto en la API. Solo para reiterar una vez más, porque creo que puede haber causado confusión porque pasamos de un lugar a otro muy rápido. Pero sí, este es el lugar donde estamos obteniendo los data. Y este es el lugar, donde habilitamos este puente donde podemos hacer la edición en tiempo real. Y nuevamente, esta es la página. La página va a contener varios bloques. Entonces, estos bloques, nuevamente, los estamos renderizando dentro de los componentes de Storyblock. Por lo tanto, estos van a ser dinámicos. Pero por ejemplo, si hablamos del hero u otro componente, nuevamente, lo obtenemos como un bloque y luego simplemente usamos ese data, que obtenemos en cualquier otro componente. Entonces, sí, así es como funciona. Y creo que ahora podemos agregar rápidamente la carpeta de bloques o Arisa, ¿qué piensas? Quiero decir, la carpeta de bloques ya está ahí ahora. Así que no creo que necesite hacer cambios, pero sí, solo para mostrarte el esquema de un blog, cómo se ve eso. Entonces, si voy a la biblioteca de bloques, y si voy al artículo, verás que estos son todos los campos que hemos agregado a los artículos y estos son los campos, que también vas a obtener dentro del espacio clonado que tienes. Entonces, por ejemplo, esta imagen, título, subtítulo, teaser y contenido, estos van a ser los campos. Y lo que puedes hacer es, nuevamente, déjame ir rápidamente a, sí, lo que puedes hacer es ir rápidamente a esta carpeta de bloques y este archivo de artículo, y simplemente puedes copiar este archivo de artículo, como que va a renderizar los artículos para nosotros. Entonces, si entro en este componente, voy a crear un archivo article.js. Y voy a pegar esto, oops. Voy a pegar el código. Y ahora, cada vez que entremos en el artículo, también tenemos que instalar el renderizador de texto enriquecido, que mencionó Arisa, la biblioteca que tenemos para, ya sabes, para el texto enriquecido que solemos obtener. Por ejemplo, si vuelvo aquí para mostrarte de nuevo, esta es la versión de producción. Si entro en el contenido y si entro en el blog, y si abro cualquier artículo, verás que este es el esquema, pero no vemos el artículo porque, nuevamente, ese componente aún no está guardado, pero este es el campo de texto enriquecido, que, ya sabes, que se ve más o menos así, y vamos a obtener el data más o menos así. Entonces, necesitamos renderizar esto en el formato exacto en el que lo vemos, quiero decir, nos da los objetos que dicen que esto es un párrafo, esto es otro párrafo, este es el contenido dentro del párrafo, qué tipo de contenido es y, ya sabes, como en caso de que apliques algún estilo o tal vez, ya sabes, si lo conviertes en un encabezado o haces cualquier tipo de cosas, esas cosas se almacenarán aquí. Entonces, sí, esto es una cosa, por ejemplo, incluso puedes ver que si algo está en negrita, se verá así. Entonces, por ejemplo, esto va a estar dentro de la respuesta de la API así. Y para renderizar esto, necesitamos, ya sabes, por ejemplo, esto es blog.content y esto es blog.content, que tenemos el campo de contenido para renderizar esto, necesitamos este renderizador de texto enriquecido de Storyblock, que es, nuevamente, quiero decir, SDK, que te va a ayudar a renderizar esto. Y puedes ver que es bastante fácil de usar, solo puedo instalar esto, y tan pronto como esté instalado, simplemente va a renderizar esta parte para nosotros. Creo que debería estar funcionando ahora. Dice que el componente de artículo no existe porque aún no existe, pero debería existir ahora, nope. Hay un error. El componente de artículo no existe. Muy bien, sí, quiero decir, aquí es donde vemos los problemas. Necesitamos importarlo dentro de, como dentro del área de componentes dinámicos que tenemos, así que necesitaré importar el artículo aquí, y luego también necesitaré mapearlo aquí. Entonces, el artículo debería ser article. Eso es lo que la API devuelve, quiero decir, eso es lo que dice que el componente de artículo no existe. Tan pronto como hagas que funcione, verás que así es como también funciona el artículo, y también, ya sabes, puedes editar estas cosas en tiempo real también, lo cual creo que no está funcionando de nuevo. Creo... Sí, creo- Debido a la forma en que buscaste la página, es ISL, ¿verdad? ¿Cuánto tiempo dijiste? Sí, pero creo. Oh, vale. Creo que debería... Sí. Debería funcionar ya, porque estás trabajando en local, así que creo que la parte de ISL funciona en local. Sí. Sí. Así que creo que algo aquí no está bien.

Creo que este entorno de vista previa puede causar un par de cosas. Quiero decir, íbamos a agregar el entorno de vista previa, así que ahora mismo no estamos en el entorno de vista previa y por eso el puente no está habilitado. Pero el puente debería estar habilitado en este momento. Así que veo que las relaciones de resolución aún no están configuradas, ¿verdad? Sí, sí, vamos a usar eso dentro de la historia de inicio cuando publiquemos artículos. Pero sí, como puedes ver, quiero decir que el puente de Storyblock que teníamos, no estaba habilitado debido a la vista previa que es falsa y por defecto. Esa vista previa se configurará, quiero decir, creo que si tenemos tiempo, que ya hemos pasado, pero si tenemos tiempo, creo que te mostraré el entorno de vista previa, cómo configurar el entorno de vista previa para Next.js porque como se mencionó, si se trata de una compilación estática, entonces, una vez que la página esté construida y si cambias algo aquí, necesitas volver a implementarla. Pero digamos que quieres ver los cambios que estás haciendo en tiempo real, ¿verdad? Para eso, agregamos un enlace de vista previa que es compatible con Next.js y simplemente podemos usarlo desde allí. Pero sí, creo que eso es la mayor parte y así es como también puedes jugar con los blogs y quiero decir, de manera similar podemos crear más blogs. Así que ahora mismo creo que simplemente volveré porque ya tenemos cuatro blogs aquí.

Ahora viene la parte en la que tenemos esta página de inicio del blog, para la cual estamos utilizando el componente de todos los artículos, quiero decir, el componente de todos los artículos. Este componente de todos los artículos, simplemente te mostraré cómo se ve. Y este este componente de todos los artículos es simplemente como obtener las historias que comienzan desde el bloque. Por lo tanto, va a obtener todas las historias dentro de la carpeta de blogs. Y luego va a renderizar eso, quiero decir, esa es solo la parte básica de estilo que estamos haciendo aquí. Pero también tiene el componente de teaser de artículo creado. Así que eso es un componente estático. No es un componente dinámico según recuerdo el componente de teaser de artículo. Solo copiaré estos. Pero sí, de manera similar podemos crear dos de tus, como dos de tus archivos. Uno con el componente de todos los artículos que se ve más o menos así. Está obteniendo todos los componentes dentro del usuario. Por lo tanto, está obteniendo todas estas historias. Está obteniendo todas las historias que comienzan desde el blog. Por lo tanto, va a obtener todas las historias. Y luego las estamos filtrando. Como no debería obtener esta, que ya está ahí. Entonces, si vuelvo aquí, estamos obteniendo todos estos artículos. Y quiero decir, estamos filtrando la historia de inicio que tenemos porque no queremos mostrar eso. Y una vez que obtenemos todos los artículos porque queremos mostrar las tarjetas para todos los artículos. Simplemente pasamos, quiero decir, simplemente usamos esta área de artículos que obtenemos aquí. Quiero decir, la que filtramos, que obtenemos aquí. Y luego simplemente renderizamos el componente de teaser de artículo. Y el componente de teaser de artículo, nuevamente, no es muy complicado. Es solo lo básico, ¿qué decimos? Quiero decir, ni siquiera es dinámico, pero tiene este enlace. Así que simplemente agregaré el comportamiento heredado aquí. Pero sí, está tomando el artículo y simplemente obtiene, quiero decir, simplemente crea una tarjeta con él. Entonces, el componente de todos los artículos no existe como dice. Así que necesitaré nuevamente, decir todos los artículos aquí, ups, no necesito decir si la importación automática funciona, pero no lo hizo, así que, bueno, ¿estoy haciendo algo mal aquí? Sí. Bien, ahora debería funcionar. Y si voy aquí dentro de esto, debería funcionar. Sí, como puedes ver, quiero decir, este es solo un componente estático con solo uno de los campos que es algo dinámico aquí. Por lo tanto, podemos editar esto, pero este componente, quiero decir, esta área del componente es dinámica. Quiero decir, es más o menos estática, que simplemente obtiene todos los bloques y puedes verlo aquí. Está obteniendo los cuatro artículos que tenemos, y simplemente los está renderizando. Y nuevamente, puedes agregar estos artículos o, quiero decir, puedes agregar estos tipos de componentes una vez que se creen a cualquiera de tus páginas. Entonces, incluso si voy dentro de la historia de inicio aquí o tal vez la historia sobre aquí, puedes ver que tenemos este teaser y luego tenemos la cuadrícula. Entonces, quiero decir, puedes, ya sabes, usar este tipo de cosas en cualquier lugar. Entonces, incluso si copio esta cuadrícula, y si voy a la página de inicio, y si lo pego aquí, verás que eso sucede en tiempo real. Así es como puedes jugar con LiveEdit y cosas así.

Ahora, lo último, que necesitamos hacer para los artículos populares, es crear un componente, nuevamente, que se llama componentes de artículo popular. Lo agregaré aquí. Y una vez que lo agregue aquí, como por ejemplo, artículos destacados, puedes ver que no cambia nada porque necesitamos crear este componente dentro de nuestro frontend. Y nuevamente, hacer las mismas cosas que estábamos haciendo. Solo lo agregaré. Y ahora si guardo esto, y si te muestro la respuesta de cómo se ve, verás que así es como vemos los artículos. Es como, vemos la referencia de estos artículos. Quiero decir, si voy aquí a la configuración, puedes ver que, lo hemos configurado para seleccionar todas las historias de la carpeta de blogs, y es un campo de selección múltiple. Y solo debería permitir el contenido o permitir estas historias, que tienen este tipo de contenido como artículos. Solo nos dará las opciones de todos los artículos aquí. Pero quiero decir, puedes seleccionar cualquiera de estos artículos. Y ahora si vuelvo aquí, dentro del archivo index.js, porque esto está sucediendo en la página de inicio. Lo que debemos hacer, es mientras estamos obteniendo la historia, debemos resolver las relaciones para estos artículos. Así que creo que como no tenemos mucho tiempo, haré un poco de trampa y simplemente copiaré el código. Y si voy aquí, puedes ver que dentro de los parámetros, por ejemplo, ahora mismo estamos obteniendo el draft.json, puedo decir que, sí, puedo decir que resuelva las relaciones cada vez que veas artículos populares dentro de los artículos. Solo resuelve esos. Así que obtendré los artículos resueltos completos allí. Y obtendré el JSON completo, que también tiene estos artículos poblados. Así que puedo guardar esto y luego también necesito crear los componentes de artículo popular. Nuevamente, solo los copiaré y pegaré, pero puedes ir aquí nuevamente y puedes, creo que deberíamos tenerlo aquí. Y puedes obtener este componente de artículo popular dentro de tus componentes también. Y sí, creo que estamos listos para continuar. Necesitamos resolver las relaciones en otro lugar, pero solo te mostraré cómo se ve. Así que si actualizo esto, no funciona porque no sé por qué estoy cometiendo el mismo error una y otra vez, pero es bueno que aprendamos de esto. Necesitas importar los artículos populares aquí y luego necesitaré mapear los artículos populares porque puedes ver nuevamente, dice que el componente de artículo popular no existe. Pero sí, así que cualquier componente que necesites, ya sabes, como cualquier componente que necesites renderizar dinámicamente, solo necesitas registrarlo. Artículos populares y eso es artículos populares. Y si guardo, ups, si guardo. Creo que puede haber un pequeño error tipográfico en el lado izquierdo. Gracias por notarlo. Sí, y puedes ver que ahora también vemos los artículos populares. Una cosa aquí es que, sabes, si intento editar esto, se romperá porque también necesitamos decirle al puente que estas relaciones deben resolverse. Entonces, si voy, quiero decir, para eso, quiero decir, para esto donde tenemos los ajustes del puente, si voy dentro del archivo index.js, que estamos usando para esta historia de inicio en particular, estos son los ajustes del puente, como también viste. Toma un par de argumentos. Entonces, por ejemplo, cuando la vista previa estaba habilitada aquí, no pudimos inicializar esto similar a lo que tenemos en slug.js. De manera similar, necesitamos tener un par de, incluso puedes pasar un par de otras cosas también. Así que puedo tener otro objeto aquí que dice que resuelva las relaciones para estos, nuevamente, para lo mismo que hicimos. Entonces incluso puedes tener múltiples, quiero decir, incluso puedes tener esta matriz de, quiero decir, múltiples relaciones, ya sabes, múltiples relaciones que necesitas resolver. También puedes agregar eso. También puedes agregar un par de otros argumentos de la página que Arisa ha mostrado, como el GitHub donde tenemos documentation de Storyblock React, cómo funciona esta función en particular. También puedes verlo allí. Sí, y si guardo, y por cierto, incluso puedes donde. Sí, incluso puedes ver que, ya sabes, lo hemos mencionado aquí que necesitas hacerlo en dos lugares. Entonces, uno en el estado de Storyblocks y el otro es en las props donde lo hicimos. Entonces, dentro de las props, este es el lugar donde obtenemos la historia. Así que solo lo resolvemos allí para que los datos estén, ya sabes, y cuando estamos, quiero decir, dentro del estado de Storyblock que está jugando con el puente. Entonces sí, si voy aquí ahora, y si voy aquí, puedes ver que ahora también podemos jugar con esto. No creo que esté funcionando. Sí, está funcionando, está funcionando. Bien, así que sí, puedes ver que también funciona. Como incluso si juego con el orden de los artículos, también sucede en tiempo real. Entonces sí, creo que eso es la mayor parte y vamos, bien, entonces debe haber algunas cosas, pero sí, probablemente podamos ignorar esto por un tiempo. Y sí, creo que estamos listos para continuar ahora. Creo que podemos pasar al despliegue de esto. Sí, quiero decir, el despliegue de este proyecto. Entonces, si ahora voy aquí, he hecho algunos buenos cambios. Creo, pero creo que, creo que será tu repositorio de GitHub. Entonces. Oh sí, pude verlo. Sí. Creo que solo crearé un repositorio para mí y lo empujaré allí o tal vez si quieres desplegarlo. Creo que crearlo en tu nuevo repositorio podría tener más sentido porque ya tienes el código listo ahora. Yo no. Sí. Seguramente tienes, pero no el que tienes. ¿Verdad? Solo crearé uno nuevo. Bueno, no he iniciado sesión. Bueno, vaya, vaya. Sí. Debería haber iniciado sesión. Sí. Entonces, si voy aquí, solo agregaré esta rama. Así que. Voy a decir solo nuevo origen aquí. Voy a empujarlo a tu GitHub también, lo cual no creo. No creo que tengamos permisos allí, pero creo que solo lo ignoraremos por un tiempo. Y sí, creo que ahora lo tengo en mi GitHub. Si lo actualizo. Debería estar allí. Sí, tenemos todo el código. Ahora podemos ir a Vercel para el despliegue. Lo siento mucho por hacerlo rápido porque sé que ya estamos tarde, así que lo estoy haciendo un poco rápido. Bien, solo voy a agregar un nuevo proyecto y veamos si obtenemos, sí, ese es el primer repositorio que obtenemos, así que es fácil para nosotros. No necesitamos buscar y todo y solo puedes hacer clic en desplegar. Así es como puedes hacer que funcione en Vercel también. Solo puedes, ya sabes, puedes, quiero decir, necesitas crear una cuenta de Vercel y este es un lugar donde ves todos tus proyectos. Puedes agregar uno nuevo y hacer clic en proyecto, luego puedes importar ese proyecto con GitHub, GitLab o Bitbucket, supongo, sí. Con Bitbucket y una vez que hayas terminado con eso, creo, quiero decir, la mayoría de las veces Vercel maneja todo en el momento, así que sabe qué tipo de proyecto es, sabe si es un proyecto Vue, sabe si es un proyecto Nxt o un proyecto Nxt y solo, ya sabes, solo va a configurar los comandos para construirlo y solo tienes que hacer clic en desplegar. Entonces sí, así es como se está desplegando ahora, lo cual tomará un par de segundos. Puedes ver que está construyendo, pero mientras tanto, creo que podemos agregar, bueno, ¿Por qué está sucediendo esto? ¿Tienes varias cuentas? No creo.

Hmm. No estoy seguro, tal vez porque el repositorio es tuyo, creo que puede ser algo que no puedo cambiar un par de cosas allí. Sí, creo que sí. Sí. Pero sí, creo que nuestra aplicación ya está desplegada y sí, podemos compartir esto con todos. Solo encuentra el chat. Sí. Lo compartiré contigo. Entonces sí, este es el enlace desplegado donde acabamos de desplegar nuestro proyecto, nuestro código. Entonces sí, esta es la aplicación Next.js que acabamos de desplegar. También tenía en mente agregar el entorno de vista previa que nos permite realizar cambios en el entorno de producción pero creo que no estoy seguro si tenemos tiempo para eso. Así que creo que simplemente omitiré esa parte pero realmente intentaré ir a la configuración para esto. Arisa, tal vez no estoy seguro si puedo hacer esto porque el repositorio era tuyo y pude desplegarlo. Así que debería tener la configuración de eso también pero. Sí, tú también deberías tener eso pero no sé por qué no está funcionando. Lo tengo. No estoy seguro, no he visto eso. Nunca he visto eso antes. Sí, nunca lo he visto antes. Sí. Muy bien, así que creo que podemos ir a las funciones. No, creo que, ven aquí. Y sí, podemos crear un gancho de despliegue. Entonces este gancho de despliegue, puedes ingresar este gancho de despliegue dentro de Storyblock. Entonces es como, cada vez que le des a Publicar, el sitio web se reconstruirá porque es estático. Entonces nuevamente, todo lo que sucede ocurre en tiempo real. Entonces si cambio algo aquí, sabes, como, ¿a dónde se fue el espacio? Oops. Sí, si cambio algo, vamos a mantenerlo simple, vamos a ir a la historia de Inicio. Si cambio algo aquí, sabes, como agregar un par de signos de exclamación. Y si le doy a Guardar, y luego si voy a este proyecto, que acabamos de desplegar, y si le doy a Actualizar, no mostrará las diferencias. No agregará los signos de exclamación. No tiene el contenido actualizado porque es como, como estábamos hablando de JAMstack, es esta cosa en particular, este marcado en particular, este HTML en particular se construye en el, quiero decir, se construye en el momento de la construcción. Entonces esta especie de cosa estática ocurre en el momento de la construcción. Es por eso que no vemos los cambios aquí. Porque como cuando lo estamos construyendo, esa especie de cosa ya es la obtención de los datos, esas cosas están sucediendo en el servidor. Y eso es lo que acaba de suceder de una vez. Entonces ahora, quien visite este sitio web, simplemente estará allí. Pero con el ISR, puede funcionar. Y creo que debería funcionar en un momento. Pero lo que haré es, simplemente, ya sabes, desplegarlo de nuevo. Entonces, si lo despliego de nuevo, puedes ver que si lo vuelvo a desplegar, quiero decir, va a tomar un poco de tiempo. Y una vez que esté desplegado, puedes ver que los cambios estarán allí. Pero sí, antes, quiero decir, una vez, una vez, quiero decir, hasta que se complete, quiero decir, hasta que se complete, vamos a ir dentro de este gancho y crear un nuevo gancho. Muy bien, digamos rama principal. Ya es la rama. Sí, rama principal. Y digamos que este es el gancho publicado. Y puedo crear un nuevo gancho aquí, y puedo copiar este gancho. Y ahora si voy dentro de, oops, si voy dentro del espacio de ejemplo, y si voy a la configuración de este espacio, dentro de los webhooks, puedo agregar esto, quiero decir, puedo agregar esta URL, que teníamos. Esto va a, sabes, cada vez que le demos a Publicar ahora, o cada vez que le demos a decir, quiero decir, cada vez que despublicamos ahora, este gancho se ejecutará, y esto va a desplegar automáticamente el sitio web en Vercel. Entonces esto es así, quiero decir, esto es algo de lo que estaba hablando antes, también cuando estábamos hablando de Jamstack, que necesitas tener estas plataformas serverless. para tener el pipeline, quiero decir, el pipeline de alguna manera, ya sabes, donde se despliega automáticamente y el pipeline se ejecuta, y automáticamente hace todas las cosas completas por ti. Muy bien, veamos si el despliegue ya está hecho. Sí, está casi hecho. Y ahora si le doy a actualizar, deberíamos ver los signos de exclamación agregados. Así que puedes ver que los signos de exclamación se agregaron ahora mismo. Y, nuevamente, si hacemos un par de cambios más, ahora nuestro gancho debería funcionar también. Entonces si voy aquí y digo, una prueba de gancho o algo así, y si simplemente le doy a publicar, y si volvemos a WordCell, y si le damos a actualizar, lo cual creo, sí, puedes ver que tan pronto como le doy a actualizar, ves que este gancho se activa y está construyendo el sitio web nuevamente. Entonces esto va a construirlo nuevamente, y esto va a volver a desplegar el código con la nueva construcción. Entonces, sí, creo que eso es la mayor parte, y solo veré si nos queda algo más, pero sí, eso fue la mayor parte. Comitamos todos los archivos, configuramos el proyecto, también configuramos el gancho de despliegue para desplegarlo nuevamente automáticamente. De todos modos, hemos terminado. Creo que el modo de vista previa es algo que creo que simplemente, ya sabes, probablemente simplemente agregaré un enlace en esta vista previa. Como dentro del artículo de Next JS, que Alisa mostró el artículo de cinco minutos, tiene esa configuración de vista previa en su lugar. Necesitamos agregar esta URL de vista previa porque, ya sabes, como mencioné, esto es estático, y ahora si agrego este enlace en particular, que tenemos en nuestro espacio, no me permitirá editar porque es estático. Entonces, no funcionará correctamente de la manera que debería. Entonces esta vista previa nos permite ejecutar, por ejemplo, dentro del local, quiero decir, dentro de nuestro localhost, estos métodos, que es como, por ejemplo, getStaticProp y este getStaticPaths se ejecutarán cada vez que lo carguemos, porque así es como funciona el localhost. Pero una vez que lo despliegas, ni siquiera verás esto porque solo está ahí en el momento de la construcción. Y, ya sabes, como, esta es la razón por la que no podremos editarlo. Y esto simplemente se queda en el servidor. Entonces una vez en tu código desplegado, estas funciones no están allí y no estarán presentes dentro de la página. Pero una vez que agregues la vista previa, eso, para cada página que cargues allí, estas cosas se ejecutarán cada vez, no solo en el momento de la construcción. Entonces una vez que se ejecute una y otra vez, obtendrás la nueva página, ya sabes. Incluso si cambias algo, recibirás esos datos entregados. Entonces es por eso que tenemos la vista previa en Next.js. Pero creo que, creo que, creo que podemos omitirlo por ahora porque es demasiado largo para todos, supongo. Entonces sí, avísanos en caso de que, avísanos en caso de que tengas alguna pregunta o alguna consulta. Arisa, ¿crees que tenemos algo más que cubrir? Creo que, creo que hemos terminado con la mayor parte, ¿no? Sí, creo que hemos completado todo. Y nuevamente, lo siento mucho a todos, por exceder el tiempo. Y también recibimos algunos comentarios de que también debemos tener en cuenta el tiempo. Así que lo tendremos en cuenta para futuros talleres. Y gracias nuevamente a todos por unirse al taller. Y si estás interesado en, sobre el modo de vista previa, cómo configurar el modo de vista previa, que fue el contenido que Chaked mencionó que probablemente puedas descubrir más adelante. De hecho, tenemos el tutorial listo. Así que puedes echar un vistazo a nuestro tutorial, puedes acceder desde el tutorial definitivo, por cierto, desde la página de Notion. Eso es todo por mi parte, no quiero excederme más, pero cualquier comentario será apreciado por nosotros. Así que siéntete libre de tuitear, digamos, cómo te sentiste, o qué aprendiste, o cómo fue para ti en Twitter, mencionando a ambos o a uno de nosotros, está bien. Estaremos encantados de echarle un vistazo más adelante o esperamos que disfrutes de las grabaciones más adelante. Muy bien, con eso dicho, diría muchas gracias a todos y espero verte de nuevo en algún momento del verano, en algún lugar, no pude decir eso. Sí, muchas gracias por unirse. Adiós, nos vemos pronto a todos. Sí, gracias a todos, adiós.