Localizando tu sitio web de Remix

Para darles una idea de lo que vamos a construir hoy, es una aplicación web de recetas muy simple. Como pueden ver, en este momento solo tengo tres recetas diferentes. Estas son algunas de mis recetas favoritas. y hay un selector de idioma aquí. Puedo cambiar el idioma y verán que cambia el nombre. También actualiza los valores aquí y el contenido también. Puedo abrir esa receta y obtener esa información también. Si lo cambio a inglés, nuevamente se traduce o me da el contenido localizado en inglés nuevamente. Entonces esto es algo que vamos a construir y también lo vamos a aprender desde cero.

Para darte una breve introducción sobre mí, mi nombre es Harshal Agrawal, y trabajo como defensor del desarrollador en Contentful, que es algo en lo que vamos a profundizar más. Me encanta experimentar con diferentes tecnologías. En mi experimento más reciente, he estado jugando con la API de WebHID. Si no estás familiarizado con la API de WebHID, es una API fantástica que te permite conectar tus dispositivos HID a tus aplicaciones web. Y un proyecto divertido en el que he estado trabajando es conectar mi controlador de PS5 a un juego basado en web. Y si quieres saber más sobre mí, solo contáctame. Puedes ir a ese sitio web donde encontrarás todos los enlaces a mis redes sociales y leer más sobre mí y mi trabajo también.

Muy bien. Volviendo a esto, los requisitos previos son, necesitas tener Node.js instalado en tu máquina. Puedes usar plataformas como Gitpod o algo así, pero voy a ejecutarlo localmente en mi máquina. Entonces, si encuentras errores en esas plataformas en la nube, es posible que no pueda ayudarte completamente con eso. Así que espero que lo estés ejecutando localmente en tu máquina y que tengas node.js instalado. Necesitamos un buen editor de código porque facilita la vida. Si quieres usar, ¿cómo se llamaba? Texto, no sé. El editor de código predeterminado que proporciona Windows. Si quieres usar el bloc de notas, está bien. Adelante y úsalo. Como mencioné, vamos a usar Contentful. Así que tener una cuenta en Contentful será muy útil. Si no tienes una cuenta en Contentful, puedes crear una rápidamente. Solo ve a contentful.com y crea una cuenta. No necesitas una tarjeta de crédito. Puedes comenzar sin necesidad de ingresar tu tarjeta de crédito allí. Y tenemos conocimientos básicos de JavaScript y también es importante tener conocimientos básicos de React. No vamos a usar mucho React aquí porque estamos usando Remix. que es maravilloso. Pero vamos a usar mucho JavaScript. Y una idea básica de GraphQL también sería muy útil porque vamos a usar la API de GraphQL aquí.

Muy bien. Lo que voy a hacer es tomar un par de minutos aquí, ver si hay alguna pregunta hasta ahora sobre los requisitos previos o cualquier otro requisito o cualquiera de esas cosas de las que acabo de hablar. Si no hay preguntas, solo denme un pulgar hacia arriba para que sepa que todo está claro hasta ahora y que puedo seguir adelante, muy bien, está bien, súper, sigamos adelante y hablemos de la localización como mencioné quiero que esto sea más interactivo, así que tengo curiosidad por saber qué significa la localización para ustedes nuevamente siéntanse libres de desactivar el silencio y simplemente hablar sobre lo que significa para ustedes. O si prefieren, si prefieren escribirlo en el chat, adelante y escríbanlo en el chat. Pero tengo curiosidad por saber qué es la localización para ustedes. Y aquí no hay respuestas incorrectas. Así que no se preocupen por, ya saben, preocuparse por dar una respuesta que pueda no ser correcta. así que la localización consiste en hacer que tu aplicación esté disponible en diferentes idiomas cierto, cierto, eso es absolutamente correcto muy bien, voy a construir sobre eso y voy a decir que también se asegura de que no solo sea el idioma, sino también la forma en que tu aplicación se ve y se siente en esa región en particular, ¿verdad? Algunos ejemplos maravillosos sobre la localización que puedo pensar son marcas como McDonald's. India es un país donde la mayoría de la población es vegetariana. así que si piensas en McDonald's, ofrecen hamburguesas, ¿verdad? Y las hamburguesas en su mayoría contienen tienen esas hamburguesas que no son aptas para vegetarianos, por lo que para tener éxito en India McDonald's adoptó su estrategia y sacó opciones que se centraban principalmente en vegetarianos, por lo que todas sus hamburguesas se centraron principalmente en vegetarianos y así es como es un ejemplo de localización, así que nuevamente, para hablar de una definición adecuada de localización, básicamente es una adaptación del producto, la aplicación o el contenido del documento para cumplir con el idioma nuevamente, no solo el idioma, sino también los requisitos culturales y otros requisitos de un mercado objetivo específico y no se trata solo de traducción, es más que eso Tenemos a Emanuel. Espero estar pronunciando tu nombre correctamente, uniéndose. Hola, gracias por unirte. Acabamos de comenzar el masterclass y hablamos sobre qué es la localización.

Si no estás en Discord, te animo encarecidamente a unirte al servidor de Discord. Ya he compartido mi repositorio de GitHub que vamos a utilizar en este masterclass Y solo un breve resumen de los requisitos previos, necesitas tener Node.js, instalar un editor de código, algunos conocimientos básicos de JavaScript, React y GraphQL serían muy útiles para ti en este masterclass.

Muy bien, así que hablamos de la localización. La siguiente parte que a menudo escucho a la gente cuando hablo de la localización es este término llamado internacionalización. Y la gente se confunde cuando hablan de localización o internacionalización a menudo usan estas palabras indistintamente, lo cual no es realmente cierto porque mientras que la localización es adaptar tu producto a una región específica, la internacionalización es el proceso de llegar allí si miramos la definición de internacionalización es diseño y desarrollo de un producto, aplicación o contenido de un documento que permite una fácil localización para un público objetivo nuevamente, este público puede variar en cultura, región e idioma también, ¿verdad? Para resumir esto, la internacionalización es el proceso de uh internacionalización es el proceso de implementar o preparar tus aplicaciones para la localización. ¿Tiene sentido, y aclara la diferencia entre la localización y la internacionalización? Veo un pulgar hacia arriba. Dos pulgares hacia arriba. Vale, siento que puede haber una pregunta aquí. No, vale. Muy bien, eso es perfecto. Voy a esperar un minuto más porque Fez también se está uniendo. Solo quiero asegurarme de que antes de pasar a la siguiente parte, pueda escuchar lo que hemos cubierto y luego podemos seguir rápidamente.

¿Puedo hacer una pregunta mientras tanto? Claro. Desde el punto de vista de la implementación, por supuesto, la definición es diferente para la localización y la internacionalización. Desde el punto de vista de la implementación del proyecto, la forma en que funciona es que a menudo las personas usan estas palabras indistintamente lo cual no es cierto siempre debes si has investigado sobre la localización antes, es posible que hayas encontrado bibliotecas como i18n pero si lo piensas bien, no se trata de localización se trata de internacionalización, ¿verdad? porque ese es el proceso de implementar la localización Entonces, cuando estás trabajando en un proyecto, habilitas que se pueda localizar, aunque es posible que no necesites eso en el futuro. Entonces, básicamente, estás adoptando los principios que están definidos por la intención, uh, por, para la internacionalización porque eso facilita la implementación de la localización. Ahora, uh, la forma en que me gusta pensar en esto es, y creo que tendrás una mejor idea sobre esto cuando comencemos a trabajar en la aplicación es, si vuelvo al ejemplo aquí. Ahora, sé que una cierta parte de mi texto va a cambiar en la aplicación, ¿verdad? Ya he comenzado a trabajar en la implementación de esa parte y sé que, por ejemplo, el mensaje de bienvenida aquí es diferente en alemán. La forma en que creé esto es teniendo en cuenta que esta palabra en particular va a cambiar, pero todo este mensaje en particular va a cambiar. Porque ya sabía qué cosas quería hacer. ¿Eso te da una idea? ¿Eso responde tu pregunta? Sí. Sí, lo hace. Entonces, ¿podemos decir que la internacionalización es un subconjunto de la localización? No lo diría así porque para mí, ambos son dos procesos diferentes. porque la forma en que lo pienso es que la internacionalización te permite preparar tu producto para la localización, ¿verdad? Ahora, es posible que desees luego localizar ese producto solo para una región, pero aún así debes pasar por el proceso de internacionalización y asegurarte de que tu producto esté listo para hacer eso. Más adelante, puedes decidir que quieres ampliarlo a una nueva región, ¿verdad? porque ya has implementado la internacionalización, todo lo que tienes que hacer es preparar ese contenido localizado, hacer que ese contenido esté disponible en ese idioma localizado y luego simplemente publicarlo. Para mí, son dos pasos diferentes, dos procesos diferentes, y no es un subconjunto de otro. Vale, tiene sentido. Gracias. Muy bien. Faz, creo que acabas de unirte. Así que hablamos de la localización. Hablamos de la internacionalización. Y pasamos a la siguiente parte del masterclass. Y veo que ya estás en los servidores de Discord. Ya tienes el repositorio de GitHub, lo cual es fantástico. Entonces, avanzando, vamos a hablar un poco sobre Remix porque ese es el framework que vamos a usar hoy. ahora, ¿cuántos de ustedes han escrito código con Remix antes o han escuchado sobre Remix antes ¿puedo ver un pulgar hacia arriba o nuevamente siéntanse libres de activar el sonido ustedes mismos solo escriban en el chat, está bien Muy bien así que puedo decir que la mayoría de ustedes han escuchado sobre Remix pero uh una persona no lo ha hecho, eso está completamente bien, vamos a verlo uh cuando comencé a explorar Remix cuando comencé a jugar con Remix siempre pensé que era uh otro meta framework que se construye sobre react pero al leer la documentación al trabajar con Remix aprendí que no es solo otro framework un framework de react más, es más que eso porque cuando hablan de Remix como un compilador, en realidad compila tu código y te da código del lado del cliente y del lado del servidor. También genera un archivo de manifestación de activos, que te da un gráfico de dependencias y permite que el código se mapee a la pieza de código específica correctamente. Entonces, básicamente, simplemente compila tu código y te da código tanto del lado del servidor como del lado del cliente. Y me encanta esta parte de Remix que es un controlador HTTP del lado del servidor, lo que significa que simplemente puedes usar Remix como un servidor. Puedes crear APIs utilizando Remix. No necesitas usar ningún otro framework para eso. Porque hace uso de la web, la API de búsqueda web en el fondo, lo que facilita su implementación en cualquier tipo de plataforma realmente, no importa si estás usando Node.js o Deno. En el fondo, te permite hacer eso. Y la forma en que Remix te permite hacer eso es que tiene envoltorios integrados alrededor de los frameworks existentes como Express. Ya tiene esos envoltorios construidos sobre esos frameworks así que ahora no tienes que preocuparte por aprender Express o aprender cómo funcionan los trabajadores de Cloudflare o cómo gestionar servidores en Vielhel o Netlify y cosas así. Y también es un framework del lado del servidor, lo que significa que puedes construir toda tu API solo usando Remix. Y no necesitas proporcionar ninguna salida del cliente o no necesitas tener un front-end para eso. Remix puede manejar todo el proceso. Entonces, la forma en que me gusta pensar en Remix aquí es la vista y el controlador en el framework MVC.

Ya no tienes que preocuparte por el modelo. Remix te brinda la posibilidad de usarlo tanto como vista como controlador. Así que cada ruta que vayas a usar en Remix puede tener su propia vista y también puede tener su propio controlador. Esto puede parecer mucho mientras lo estamos hablando, pero una vez que comencemos a trabajar con Remix, lo entenderás mejor.

Pero solo para darte una idea rápida, básicamente hay tres funciones diferentes que exportas en Remix. La primera es una función de acción, que manejará cualquier tipo de solicitud POST o envío de formularios que tengas en tu aplicación. Luego está la función de cargador, que manejará cualquier tipo de solicitud GET o cualquier tipo de obtención de datos que desees hacer. Ahora, usando solo estas dos funciones, puedes tener una API. Pero si quieres dar una salida al usuario, si quieres tener un sitio web para el usuario, todo lo que tienes que hacer es exportar una función predeterminada que contenga el componente que deseas renderizar. Luego, Remix como un framework de navegador. Con el framework de navegador, te permite crear una interfaz de usuario para el usuario, también maneja la hidratación, lo que lo hace realmente fácil. Realmente, Remix tiene muchos conceptos como la interfaz de usuario optimista, la hidratación, que maneja por sí mismo, pero no voy a profundizar en todos esos temas. Porque la mayor parte del tiempo, Remix lo maneja por sí mismo, así que no tienes que preocuparte realmente por eso. Siempre puedes consultar la documentación de Remix y aprender más al respecto.

Bien. Ahora que hemos hablado de Remix, vamos a comenzar con la configuración de un proyecto de Remix. Ahora es el momento en el que voy a dejar de hablar mucho y vamos a sumergirnos en la parte principal de la sesión. Lo primero que quieres hacer es configurar un nuevo proyecto de Remix y para hacerlo, vamos a usar el comando npx create-remix latest. Te dará una buena guía de cómo crear un remix. Tengo un video aquí. Como puedes ver, solo estoy ejecutando el comando npx create remix latest. Y me pedirá el nombre del proyecto. Y me dará un par de opciones aquí. Puedes seleccionar si ya sabes qué servidor quieres usar. Y para este masterclass, vamos a usar JavaScript, no te preocupes por TypeScript. Asegúrate de seleccionar JavaScript, porque no he realizado ninguna integración de tipos en eso. Tiene sentido. Entonces, cuando ejecutes la función, perdón, cuando ejecutes el comando npx create remix latest, asegúrate de seleccionar JavaScript y TypeScript, si quieres, puedes seleccionar plantillas preconfiguradas que tienen, pero eso no es necesario para esta sesión.

Muy bien. Una vez que hayas configurado el proyecto de Remix, dame un pulgar hacia arriba y luego pasaremos a la siguiente parte. Solo asegúrate de estar en las dependencias. Cuando te pida que ejecutes npm install, di que sí y deja que instale las dependencias. Ya he hecho esta parte aquí. Ya tengo mi aplicación de remix configurada aquí, también he agregado Tailwind. Me gusta más Tailwind porque no sé mucho de CSS. No me gusta escribir mucho CSS, y Tailwind te ayuda con eso. También he instalado Tailwind. Si quieres saber cómo instalar Tailwind en tu aplicación de Remix, puedo mostrarte rápidamente cómo hacerlo. Y veo que Mail tiene una aplicación de Remix en funcionamiento. Eso es fantástico. Voy a esperar a que los demás configuren el proyecto de Remix. Muy bien. Mientras los demás configuran el proyecto de Remix, voy a mostrarte rápidamente cómo puedes agregar Tailwind al proyecto. Lo primero que quieres hacer es, en tu archivo remix.config.js, establecer la bandera tailwind en true. Luego, quieres instalar Tailwind, así que ejecuta el comando npm install tailwind, una vez que esté instalado, debes ejecutar npx tailwind init. Eso básicamente creará este archivo de configuración de Tailwind. Ahora, en ese archivo, quieres agregar el contenido que será esto. Básicamente le estás diciendo a Tailwind que busque el componente donde se encuentra el código.

Una vez hecho esto, vamos a entrar en el directorio de la aplicación. Vamos a crear un archivo tailwind.css e importaremos los componentes y utilidades basados en Tailwind. Luego, en el archivo raíz, vamos a importar Tailwind. A continuación, vamos a exportar una función de enlace en la que vamos a agregar la hoja de estilos aquí. Así es como puedes agregar Tailwind a tu aplicación de Remix.

Ahora, avanzando, voy a repasar rápidamente la estructura del proyecto aquí. Como puedes ver, hay un directorio de la aplicación. En ese directorio de la aplicación, hay algunas cosas. La primera es la ruta. Aquí es donde puedes definir todas tus rutas. Es similar a la forma en que trabajamos con Next.js. En Next.js, tenemos un directorio llamado pages, mientras que en Remix tenemos un directorio llamado routes. Ahora, en esto puedes crear un nuevo archivo. Si lo llamo, digamos, ejemplo.jsx. La forma en que esto funcionará es que tendrá un dominio slash ejemplo.jsx y luego puede exportar un renderizado de lo que estoy haciendo aquí. Digamos, exportar función predeterminada. Y para ejecutar la aplicación, déjame cerrar este servidor. Puedes hacer NPM run allí. Iniciaremos el servidor de Remix. Vuelve aquí, vemos que ahora tenemos la página predeterminada, y si vamos a ejemplo, es solo un pequeño ejemplo. Así que tenemos una ruta aquí, la creada.

Ahora, con Remix, puedes hacer fácilmente anidamiento de rutas. Puedes hacer anidamiento de diseños y todas estas cosas también. Pero hay entry.client.js. Como puedes ver, podemos eliminar este archivo. Remix se encarga de esto. Básicamente hidrata todo el contenido en el lado del cliente aquí. Luego está el archivo entry.server nuevamente. Esto es generado por Remix, y maneja la parte en el lado del servidor. Luego está el archivo raíz. Diría que este es un archivo importante porque con esto, puedes configurar la estructura general de tu página. En la ruta aquí, puedes ver que importamos Tailwind y lo exportamos como un enlace. Si vuelvo a esta página, abro los registros. Si ves aquí, exportamos los enlaces y ahora obtenemos los enlaces aquí. Si quieres agregar hojas de estilo o si quieres agregar otros enlaces de búsqueda. Así es como lo haces y en remix básicamente puedes agregar la mayoría de las cosas aquí si quieres. Similar a esto, hay otra función llamada función de meta que te permite establecer información meta. Básicamente, el título de tu página. La información de SEO, que son las imágenes de gráficos abiertos, descripción y todas esas cosas en esa función de meta. Y esto viene nuevamente de Remix. Tenemos el cuerpo, este es el outlet. Ahora, el outlet contiene todos los elementos hijos que tiene esta ruta en particular. Debido a que este es un root, tiene todas las demás rutas que están presentes aquí, se convierten en hijos por defecto. Pero si estás creando un diseño que puede tener otro hijo allí, también puedes usar el componente outlet allí. ¿Correcto? Luego está el archivo tailwind.css. Hay un directorio de construcción, esto se generará cada vez que inicies el servidor de remake. los módulos de nodo, la carpeta pública, luego hay algunos archivos de configuración aquí, y esa es básicamente la estructura de un proyecto de Remix. Bien. No estoy seguro si me olvidé de alguien. Sí, no estoy seguro si todos han completado la configuración, pero voy a seguir adelante porque queremos asegurarnos de completar o cubrir la mayoría de las cosas que queremos hacer en este masterclass.

Ahora que tenemos la aplicación remix funcionando, lo siguiente que queremos hacer es empezar a trabajar con ella. Lo primero que haremos es actualizar el título de la página. Crearemos un componente de navegación. También crearemos un componente de tarjeta y mostraremos las recetas utilizando el componente de tarjeta. Todo esto está disponible en el repositorio de GitHub. Voy a compartir el enlace aquí también. En el repositorio de GitHub, si vas a las ramas y seleccionas... Esto es extraño. De todos modos, si vas a las ramas y seleccionas el paso uno, verás todos los pasos que hemos cubierto y los pasos que debemos seguir. Necesitamos crear un componente F. Para eso, lo que voy a hacer es no borrar esto, cerrar esto en el propio directorio F. Crearé un nuevo archivo que estará dentro de la carpeta de componentes. Y luego aquí voy a poner la barra de navegación, de nuevo, no la voy a codificar desde cero. Pero esta es la barra de navegación simple que tengo aquí. Remix también tiene un componente de enlace, así que voy a usar eso para que cada vez que el usuario haga clic en Remix recipes en el título, llegue a la página de inicio de nuestro sitio web. Aquí, este div, lo dejaré vacío por ahora, porque aquí quiero agregar un selector de idioma para que si el usuario hace clic en EN, el contenido se muestre en inglés. Si el usuario selecciona DE, el contenido se muestra en alemán. Tengo el componente de navegación en mi ruta. Lo voy a importar. Y lo voy a agregar dentro del cuerpo para que sea accesible para todas mis rutas secundarias. Si vengo aquí, podemos ver que tenemos Aquí, si hago clic en él, me lleva a la página de inicio. El siguiente paso es crear un componente de tarjeta y ahora en este componente de tarjeta, necesitamos pasar props. Estas props serían el título, la imagen y el ID, así como una descripción para esa receta en particular.

De acuerdo. Voy a intentar crear esto desde cero. Así que empecemos con la exportación. Ahora, como puedes ver, estos son simplemente componentes que no estoy utilizando realmente o no estoy utilizando estos archivos en particular para llamar o obtener data de donde estoy simplemente pasando data a este componente en particular. Este puede ser un componente simple donde no necesito tener ningún tipo de, cómo se dice, ningún tipo de cargador o función de acción aquí. Quiero enlazar esto con el slug que estaré pasando, así que voy a tener que pasar el slug aquí

Lo siguiente que quiero hacer es tener un div dentro de ese div habrá otro div. Este div contendrá la imagen que tendrá una fuente. Voy a pasar una imagen de portada que tendrá la fuente y también un texto alternativo. Llámalo descripción. A continuación, quiero tener el título. Así que vamos a tener el título, que básicamente será el nombre de esa receta, y luego queremos la descripción de la receta. No estoy haciendo ningún estilo aquí por ahora. Solo voy a dejar esto como está. Y vamos a pasar la imagen de portada, que básicamente sería un objeto.

Ahora, tengo la tarjeta, voy a ir a mi ruta de índice. Y no estoy interesado en ninguno de estos. Los voy a eliminar. Voy a tener una etiqueta principal. En esa etiqueta principal, quiero tener tal vez dos divs. Este va a ser... Bienvenido a Remix. Recetas, ¿verdad? Y aquí, como mencioné antes, puedes cambiar el título. Ahora mismo, dice nueva aplicación Remix. Que es el título aquí dice nueva aplicación Remix. Así que puedo seguir adelante y cambiar esto y llamarlo. Recetas Remix. Si guardo esto aquí, podemos ver que el título aquí también cambia. Así es como puedes trabajar con las metatags y Remix. Y luego otro div y aquí tendremos la tarjeta.

Pero para la tarjeta necesitamos tener algunos datos ficticios o alguna información ficticia. De nuevo, he preparado esta información de antemano. Así que voy a usar eso. Y esta información es muy similar a la información que está disponible que vamos a usar y vamos a obtener de Contentful, así que no tienes que preocuparte por esos datos estructura u otras cosas aquí. ¿De acuerdo? Ahora, tenemos un array que contiene toda esta información. Así que lo que vamos a hacer es hacer un map de la receta. Y aquí, vamos a pasar una sola receta. y luego la vamos a renderizar. Hagamos el título. Esto va a ser cp.title ¿Qué más necesitamos? Necesitamos una descripción. Así que hagamos cp.description Teníamos un slug, para el slug aquí voy a usar el ID. Vamos a hacer recipe.ht, y luego la imagen la estamos llamando imagen de portada, y en nuestros datos ficticios, también se llama imagen de portada. Vamos a pasar simplemente ese objeto completo. Y por último, una cosa importante, porque estamos. Usando la función map para crear componentes, necesitamos agregar una clave. Bueno, identificar estos componentes de forma única. La. De acuerdo. Esto debería funcionar con suerte y deberíamos obtener algunas cosas aquí. Puedes ver que tenemos. La página web, que muestra algunos datos ficticios. que no se ve muy bien, pero tenemos algunos datos que se renderizan en nuestro sitio web. Así que lo que voy a hacer es actualizar el código de la tarjeta y el índice y probablemente el root para que se vea bonito.

Mientras tanto, puedes seguir adelante y comenzar e implementar esto, terminar esta implementación. Nuevamente, el estilo es algo que está completamente bien si no se ve muy bonito. Eso no es para lo que estamos aquí. Estamos aquí para aprender sobre la internacionalización y localización. Ese debería ser nuestro enfoque principal. Una vez que hayas completado estos pasos y puedas renderizar contenido en tu página web, solo dame un pulgar arriba o avísame en el chat para que podamos continuar con los siguientes pasos. También, mientras tanto, si alguno de ustedes tiene alguna pregunta, no dudes en desactivar el silencio o preguntarme en el chat o también puedes simplemente publicarlas en el chat. ¡Vamos a hacer esto! Ahora nuevamente, aún no hemos comenzado con la parte de internacionalización. Todo lo que estamos haciendo es tratar de familiarizarnos un poco con Remix y comprender cómo funciona. Tú Gracias. tú . Veo alguna pregunta que aparece en el chat. Y no creo haber visto ningún pulgar hacia arriba. Voy a asumir que ustedes están trabajando en esta parte e intentando implementarla. Nuevamente, puedes encontrar el código. Puedes encontrar el código en el repositorio de GitHub. Y si quieres mirar esto en tu tiempo, puedes obtener el código allí. Estoy usando Tailwind, así que tendrías que instalar Tailwind y configurarlo. Pero aparte de eso, debería ser bastante sencillo de usar. Si tienes alguna pregunta, avísame.

Lo que voy a hacer es hacer trampa un poco aquí, y voy a copiar los estilos, básicamente el código, del repositorio de GitHub para que se vea un poco más bonito que esto. tú Esto se ve mucho mejor.

Parece que Bill ha terminado, sí, adelante. No tengo ningún conocimiento previo de Remix, así que tal vez ni siquiera sea una pregunta válida pero me preguntaba cómo es diferente de Next.js, como eso es una buena sí, esa es una buena pregunta, así que si piensas en Next.js antes de Next 13, debería decir que era principalmente un generador de sitios estáticos siempre te daría un sitio estático, pero después de la suspensión de React, se está convirtiendo en más un marco de pila completa. Pero Remix tiene un enfoque diferente a Next.js. Entonces, si... Ahora mismo, no hemos implementado las funciones de carga o las funciones de acción, no implementaremos las funciones de acción para esto. Pero cuando implementemos la función de carga, verás cómo Remix funciona con la obtención de datos y cómo Remix obtiene los datos. Otra cosa que Remix también proporciona, hay muchas cosas que Remix proporciona. Una de esas cosas es una forma fácil de trabajar con el almacenamiento en caché. También tiene funciones o métodos para gestionar fácilmente las cookies. Entonces, de alguna manera, Remix no genera ni te da un sitio estático en sí. Lo que hace es darte un sitio web que no siempre es un sitio estático. Obviamente puedes generar un sitio estático a partir de Remix, pero así no es como está construido Remix. Así que esa es otra diferencia. Y con Remix, realmente no necesitas el suspense de React porque Remix maneja todo por sí mismo. Así que digamos que tienes, estás enviando un formulario, ¿verdad? En el estado actual de la generación de sitios estáticos o los marcos que tenemos, lo que sucede es que cuando se envía el formulario, puedes mostrar un cargador al usuario y luego representar la salida que recibes en función de un mensaje de éxito o fracaso, ¿verdad? Pero Remix maneja eso por sí mismo, solo tienes un envío de formulario. Si tiene éxito, Remix con un bueno, por lo que ese mensaje de éxito o la lógica allí, si no tiene éxito, Remix también representará la salida de esa manera. Así que Remix hace mucho trabajo pesado por ti. No tienes que preocuparte por muchas cosas. Estoy tratando de encontrar un enlace que contenga todos los conceptos sobre Remix, porque eso te ayudará a entender mucho mejor cómo difiere de Next.js. Y también con Next, siento que sin las funciones sin servidor, realmente no puedes crear una API porque nuevamente, era nuevamente un marco primero de front-end. Ahora nuevamente, se está transformando en más de un marco de pila completa, que es algo diferente. Pero eso es lo que era Next, ¿verdad? Así es como está cambiando con el tiempo. He compartido un enlace en el chat.

De acuerdo, gracias. Pongs, tal vez tengas que seleccionar la regla particular. Si puedes ver el canal de elegir tu regla, te sugiero que hagas clic en ese React emoji de la Cumbre. Sí, tienes que ir al canal de recoger tu antiguo antes y seleccionar. Sí, gracias. Gracias, Neil, por eso. Entonces sí, si haces eso, probablemente obtendrás la opción. Espera, ¿qué? Tienes que esperar 10 minutos. De acuerdo. Permíteme compartir el enlace en el chat nuevamente. Así que ahí tienes que no tienes que esperar 10 minutos. ¿De acuerdo? ¿Lo tienes? Perfecto. Es perfecto. Voy a mostrarlo aquí de nuevo, por si acaso. Muy bien, una vez que hayamos completado el primer paso, que fue actualizar el título de la página, crear un nombre de componente, crear un componente de tarjeta, y luego representar algunas recetas simuladas usando un componente de tarjeta. Vamos a esperar dos minutos, y luego pasaremos al siguiente paso. Mientras tanto, si alguien quiere desactivar el silencio, entonces, simplemente dé una breve introducción sobre sí mismo. Eso sería maravilloso. Me gustaría saber desde dónde te unes. ¿En qué estás trabajando actualmente? Y sí, unirse desde Francia, eso es fantástico. ¿Dónde en Francia? Sí, ¿desde dónde en Francia? Estoy bastante seguro de que es hermoso porque he oído que las ciudades de Francia son realmente muy bonitas y realmente hermosas, así que estoy bastante seguro de que es hermoso allí también para ella, hace bastante calor en Francia en este momento estaba hablando con alguien que vive en París si no me equivoco y mencionaron que Francia se pone muy muy muy caliente durante el verano No, no, no hace tanto calor en realidad. Entonces, ¿cómo está la temperatura hoy? Parece que está a 15 grados Celsius.

Esa es una buena temperatura, sí. Pero, ¿tienen mucho sol? Está un poco nublado. De acuerdo, bien, avancemos a la siguiente parte, que es comenzar con la internacionalización para esta aplicación en particular en la que estamos trabajando. Ya existen bibliotecas que facilitan la implementación de la internacionalización, no digo que sea muy fácil, pero un poco más fácil porque hacen mucho trabajo por ti, como ayudarte a detectar el idioma seleccionado por el usuario y mostrarle el contenido en ese idioma. Cosas así te permiten hacer. Así que para esto, vamos a comenzar agregando estos paquetes y luego haremos algunas configuraciones. Crearemos algunos archivos y luego crearemos algunos archivos en la carpeta pública que básicamente contendrán las cadenas que queremos localizar. Para esto, voy a cerrar mi servidor. Ya tengo todos estos paquetes conmigo aquí. Esto es nuevamente el paso dos en el repositorio de GitHub. Así que si vas al repositorio de GitHub, permíteme compartir rápidamente el enlace con todos ustedes, y si seleccionas el Paso 2, ahí es donde puedes encontrar todo este código o la información para este paso en particular. Ahora que tenemos estos paquetes instalados, espero haberlo hecho en el repositorio correcto. El siguiente paso es crear un archivo de configuración.

Entonces, una vez más... De acuerdo, no te preocupes. Nuevamente, el código ya está contigo, por lo que, cada vez que regreses, simplemente puedes obtener el código de este repositorio y continuar con los siguientes pasos.

Muy bien, ahora estamos en el directorio de la aplicación y aquí necesitamos crear un nuevo archivo. Lo llamaremos i18n, que es una abreviatura de internacionalización. I 18 next options.js. Sí. Ahora este archivo contiene la configuración básica que queremos tener para nuestro proyecto, como el idioma compatible. Para este caso, voy a elegir inglés de EE. UU. y luego alemán. También puedes tener, es posible que hayas visto el código de localización como simplemente EN, DE para alemán, FR para francés, pero cuando piensas en la localización y en los idiomas, ¿verdad?, el mismo idioma puede hablarse con un dialecto diferente en diferentes partes del mundo, por ejemplo, si hablamos de inglés, se habla de manera diferente en EE. UU. y en el Reino Unido. Lo mismo ocurre con el alemán, hay diferentes dialectos del alemán, el alemán austriaco es un poco diferente, el alemán suizo es un poco diferente, y luego el alemán de Alemania también es diferente de esos dos, por lo que si quieres ser más localizado, puedes especificar los locales de esta manera o si quieres tener un enfoque más general, puedes usar simplemente ENDE FR o sí, este tipo de notaciones también.

Ahora bien, ¿qué sucede si tu aplicación o el usuario ha seleccionado un idioma que tu aplicación no admite? Para eso, tenemos un idioma de respaldo. Y en mi caso, será inglés de EE. UU. Ahora puedes tener un idioma de respaldo diferente según tu caso de uso. Pero para este taller, vamos a elegir inglés de EE. UU. Lo siguiente es el espacio de nombres predeterminado. Básicamente, este es el nombre del archivo que vamos a crear en esas carpetas locales. Idioma compatible, idioma de respaldo, espacio de nombres predeterminado. Ahora, una cosa aquí, como estamos usando Remix, No vamos a usar suspense. Así que vamos a decir que useSuspense es falso. Y esta bandera en particular es opcional. Realmente no tienes que configurar esto. Pero si quieres tener, si quieres registrar información en la consola, cuando estás en desarrollo, siempre puedes configurar debug en verdadero. Entonces, si no está en producción, vamos a decir algo como, Oye, dame toda la información y debe tener la bandera debug habilitada. Este es el archivo de opciones de i18 next. Nuevamente, aquí solo estamos configurando las configuraciones básicas para nuestro proyecto. Lo siguiente que queremos hacer es crear un nuevo archivo y vamos a llamarlo i18n.server.js y este archivo básicamente manejará la parte i18 en el servidor o la parte de internacionalización en el lado del servidor. Esto es vmix i18 next. También queremos las opciones, por lo que vamos a importar i18 next options vamos a importar backend de i18 fs backend y luego resolver desde node y vamos a exportar una nueva instancia de remix iot next y vamos a pasar algunos valores de configuración aquí el primero es la detección de cómo queremos que se realice la detección o qué otros idiomas compatibles porque ya lo hemos configurado en nuestras opciones de iot next, simplemente lo pasaremos por aquí aquí está el idioma compatible, lo siguiente es el idioma de respaldo una vez hecho esto vamos a tener i18 next y aquí vamos a configurar el backend así que digamos load path y hagamos path, ahora lo ponemos en recurso y esto vendrá de Public Locales. Ahora, para cada idioma compatible vamos a crear una nueva carpeta y dentro de esa carpeta vamos a tener. Un archivo que contendrá la traducción para nosotros. ID siguiente está configurado y luego vamos a decir que el backend será backend. Esto está hecho. Vamos a crear las carpetas locales en la carpeta pública. Carpeta. Locales. Locales y ahora aquí, como he configurado enus, voy a nombrar esta carpeta ahora enus. Si lo hubieras configurado simplemente como en, entonces tendrías que nombrarlo simplemente en porque si ves aquí, la forma en que se hace referencia es viene del canal de idioma, ¿verdad? y también vamos a crear una nueva carpeta para DE y ambas contendrán un archivo JSON que contendrá nuestras cadenas así que voy a llamar a esto título y como es en inglés, vamos a decir bienvenido a Make it recipes y voy a hacer lo mismo para el local DE pero voy a cambiar el contenido aquí. No estoy cien por ciento seguro de si así se dice o se escribe en alemán. Todavía estoy aprendiendo alemán, pero supongo que así es como se hace. Entonces, bienvenido a Remix Recipes será el título en alemán. Y Welcome to Remix Recipes será el título en inglés. ¿De acuerdo? Y otra cosa que podemos hacer es, digamos, título de la cabeza o puedes llamarlo título meta si quieres. En inglés, quiero llamarlo receta remezclada. Realmente no sé cómo se llama eso en alemán. Así que voy a... Solo para asegurarme de que hemos actualizado esto también. Lo voy a llamar, de-remix. Voy a volver a las diapositivas y ver, estos son los pasos que he completado. Ahora, nuevamente, voy a hacer una breve pausa aquí solo para asegurarme de que ustedes hayan seguido lo que hemos completado hasta ahora, y si tienen alguna pregunta, y luego continuaré con los siguientes pasos. Gracias. Me da curiosidad, ¿alguno de ustedes también habla alemán? o ¿algún otro idioma aparte de su lengua materna? Pero hombre, supongo que como vives en Francia, hablas francés y al hablar contigo, estabas hablando en inglés, así que también hablas inglés, por lo que ese es el otro idioma que hablas aparte de tu lengua materna, ¿verdad? Bueno, está bien. ¿Cuál de estos es tu lengua materna, es francés o inglés? Bien, entonces hablas inglés y ese es tu idioma no nativo, ¿de acuerdo? Muy bien, vamos a ver los siguientes pasos ahora, así que el siguiente paso, tenemos que actualizar el archivo entry.client.gxs, el archivo entry.server.gsx, el archivo root.gsx, ¿de acuerdo? Tenemos que agregar el título y el título de la cabeza.

Ya hemos hecho eso. Y tenemos que ejecutar los valores desde la línea de comandos o archivos de partición. Muy bien, así que empecemos con el archivo entry.client.jsx. Y luego pasaremos al archivo server.jsx y luego el archivo root, ¿de acuerdo? Cerraremos todos estos archivos por ahora. componente, no necesitas una ruta, tengo anti.client.server, simplemente borra todo aquí Voy a empezar desde cero. Porque queremos hacer la hidratación aquí, vamos a deshidratar el siguiente import remix browser y también el archivo i18n i18n de i18n next y luego importaremos un proveedor, el proveedor de i18n y en realidad necesitamos una inicialización. Muy bien. Necesitamos algo para detectar el idioma, deberíamos importar el detector de idioma ¿Dónde está? No necesitas las opciones, necesito el detector de idioma eso es interesante, ¿por qué No me muestra el detector de idioma? Puede que me haya perdido algo. No sé, vamos a ver. backend de R18 http y luego importamos get initial namespaces y R18 next Next. Pero lo primero que queremos el objeto React de i18n next. Así que básicamente primero vamos a comprobar si no lo hice. Next está inicializado o no. Vamos a hacer la inicialización y si no está inicializado. Vamos a hacerlo en i18n next. vamos a usar no usar cuando usemos use cuando usemos función seles vamos a hacer el detector de idioma vamos a hacer el detector de idioma vamos a usar el import backhand y en el en el vamos a configurar las opciones vamos a extender estas opciones que vienen de las opciones de i18n next Esto va a ser local, idioma, espacio de nombres JSON. Obtener espacio de nombres inicial Esto nos dará el espacio de nombres que está configurado allí y la detección. Siempre es una buena práctica pasar el idioma con la etiqueta HTML. para ver que quieres hacer eso. Vamos a usar esto. Para la detección de idioma. Y no queremos cachear. No queremos capturar nada, así que es un array vacío. Una vez que se haya completado todo esto. Así que hidratación. Proveedor de i18n next y tomará i18n y leerá el siguiente componente. Y ese es el documento. Correcto. Entonces, hemos configurado el archivo entry.client.jsx. De nuevo, puedes encontrar todo ese código en ese repositorio de GitHub. El siguiente paso es el archivo del servidor. Ahora, para esto, simplemente voy a copiar esto desde GitHub, desde allí lo pego aquí y recorro el código. De nuevo, estamos importando todas las opciones o la configuración que ya tenemos e importando los paquetes de i18n next que hemos instalado. Estamos creando una nueva instancia. Ahora, esta es una función importante porque esta función básicamente detecta el idioma del usuario, y vamos a usar esto un par de veces en el código también. y luego estamos pasando el espacio de nombres y así es como lo inicializamos aquí lo estamos haciendo aquí estamos diciendo que use init react 18 init react i18n next objeto use el backend y luego estamos configurando alguna información aquí Y luego simplemente renderizamos esos datos aquí. Así es como lo estamos haciendo. Es algo estándar similar a cómo lo hicimos para el cliente, pero esto es ahora para el servidor. Hicimos este otro archivo que necesitamos actualizar fue el archivo root. Así que veamos qué tenemos que hacer en el archivo root aquí. Ahora en el archivo root es donde vamos a usar. Vamos a empezar a usar esas cosas que hemos configurado aquí. Lo primero que queremos importar será, luego vendrá de Remix, I18n, y de I18n server. a continuación, queremos hacer el cambio de idioma y luego el gancho de uso de traducción así que el gancho de cambio de idioma detectará que el usuario ha seleccionado el idioma diferente o el idioma ha cambiado y luego lo usará para pasar esa información y en función de eso cargará el contenido localizado.

Vamos a pasar data. Y. Aquí vamos a decir que será data. Título correcto. Entonces, si guardo esto ahora y si vuelves a la página. realmente no cambió nada porque el título se configuró de esta manera pero si cambiamos el idioma, vamos a intentar esto, he intentado esto, mira esto, lo que sucede es que hacemos p-e-d-e ven aquí puedes ver que el título, no sé cómo hacer zoom en esto pero el título de la página básicamente cambia, bueno, puedo mostrártelo en la consola y también en el inspector, así que aquí ahora vemos que es de remixes si hd, así es como también puedes cambiar los valores que deseas actualizar en las etiquetas meta, así que esto funciona muy bien con esto funciona muy bien si quieres hacer SEO quieres localizar tu parte de SEO también.

Muy bien. Así es como puedes hacer el título, pero también queremos que esto ocurra en nuestra página también, que básicamente es Actualización del título. Para obtener la función aquí. Tenemos uno listo y también vamos a tener I18n, luego vamos a usar el gancho de traducción. No. Aquí vamos a usar la función. Y pasaremos la clave, y la clave es 'title'. Voy a guardar eso. Ahora puedes usar el indicador 'ready' para asegurarte de que el contenido se muestre cuando esté disponible, así que puedes hacerlo si no está listo. Deberíamos devolver. Puede ser 'cargando'. Bien, si volvemos a la página, dirá 'cargando'. Pero debería dejar de cargar. Debería darnos información. No lo hace, eso es extraño. Pero parece que nos encontramos con algún tipo de error aquí, eso es interesante los locales públicos, ¿lo estamos llamando título? llamando a un título, ¿verdad? Una cosa que hacer es reiniciar el servidor. ¿Hice algo mal? Creo que eso está en la entrada que carga el cliente. Creo que ese es el incorrecto. Sí. Que es ES al final de los locales. Correcto. Gracias por eso. Y sí. Locales, pero está bien. Así que voy a reiniciar este servidor muy rápido. Todavía no carga eh pero el título se estaba cargando, así que las cosas funcionan correctamente implementadas, solo que algo no lo estoy haciendo bien primero, si cambio de idioma, el título cambia aquí. Sí, no hay etiqueta 'lang' ni atributo 'lang' en tu etiqueta html. Eso es correcto, ¿por qué no está ahí? Vamos a la raíz, tenemos y el idioma resuelto Creo que me he saltado un paso en algún lugar que está causando este problema correcto, voy a detectar el idioma aquí también ntremix.cat.ocl, pasamos el solicitud que no va a cambiar nada sí, todavía va a marcar una diferencia Muy bien, lo que voy a hacer es obtener el código del repositorio. No quiero perder mucho tiempo depurando. Así que vamos a hacerlo rápidamente. Está aquí. Y solo por si acaso, también voy a copiar el código de entrada. Sé de dónde viene esto. Es porque la propiedad de la tarjeta es imagen y no imagen de portada en el archivo index gs que la parte que hiciste no cubrió Muy bien, esto funciona. Pero ahora la parte interesante es tenemos el título en inglés. Esto es en inglés también. No hace eso. Va al idioma predeterminado. Hmm. Pero esto no cambia por alguna razón. ¡Ok, gracias! eso es lo que hablamos después de hacer el cambio que hizo Jason pasa de Jason. De acuerdo. Entonces, el problema fue que no lo codifiqué correctamente aquí. Por eso no haces codificación en vivo. Sí, no pongas este. Sí. Así que básicamente era con una 'e' minúscula, no una 'E' mayúscula. Y sí, ahora lo sabemos.

Muy bien. Así que esto está funcionando. No quiero esto. De acuerdo. Así que esto está funcionando. Tenemos los data que llegan. Se renderizan según el idioma. Las cosas lucen bien. Así que avancemos con el siguiente paso, que es actualizar la navegación. componente para agregar un idioma para Joe. Muy bien. Así que ya di una idea muy básica de cómo funciona el cambio de idioma. Así que si ves aquí, tenemos el parámetro ¿Puedo hacer zoom aquí? No creo, pero básicamente tengo un parámetro lng igual y luego el parámetro de idioma. Si lo elimino, vuelve a la palabra predeterminada. Pero si lo agrego de nuevo, tete, va a tomar ese contenido localizado y renderizarlo aquí así que en mi componente de navegación lo que tengo que hacer es básicamente decirle a mi componente o básicamente agregar ese parámetro al final de la URL, así que hagámoslo ya tenemos el componente de enlace renderizado aquí De acuerdo. Así que tendremos, puedes hacerlo de una mala manera, que es hacerlo de forma estática, por cada localización básicamente codificarías el componente de enlace o lo que puedes hacer es tener un array de idiomas. También pueden hacer esto, obtener esta información que viene de IIT Next y crear este objeto en particular. Pero por simplicidad, lo voy a mantener aquí. El valor que queremos pasar será enus. Haremos lo mismo. para alemán, será de te de. Y luego simplemente haremos un mapeo de los idiomas. Y Y aquí estaremos devolviendo el componente de enlace que ahora agregará el parámetro. Así que tengo que hacer la clave, que será language dot value y aquí vamos a tener language dot name. Y creo que no hay nada más que hacer, tal vez no. Voy a guardar esto, volver aquí. Ahora, si hago clic en en, obtenemos el contenido localizado en inglés, si hago clic en de, obtenemos el contenido localizado en alemán lo que voy a hacer es hacer que se vea un poco más bonito para esto voy a usar nuevamente el gancho de traducción nombre de clase FI18N.resolve language es igual al idioma actual luego queremos tener la clase underline clase aquí y luego queremos hacer un relleno a la derecha, tal vez de dos. Solo para que se vea bonito, ahora tenemos un selector de idioma que también tiene este indicador. Así que también implementamos el selector de idioma. Lo siguiente es implementar las cookies. Ahora, esta es una parte opcional. Pero muchas veces, la forma en que funciona esta biblioteca es que primero verifica la cookie. Si la cookie de I18n está presente o no, si no, verifica el parámetro de idioma, que acabamos de implementar. Si también verificaría esto, si has almacenado esta información en esta sesión. Verificará el encabezado de idioma aceptado y si no puede encontrar la información de ese idioma en ninguno de estos lugares, simplemente mostrará el contenido basado en el idioma de respaldo que hayas configurado. Así que simplemente queremos implementar la cookie porque no es mucho trabajo cuando se trata de remix cuando trabajas con cookies. Así que vamos a verlo ahora mismo para implementar la cookie. Todo lo que tenemos que hacer es crear un nuevo archivo. Lo llamaremos cookie.js. Y aquí vamos a usar la función create. una cookie pet y luego exportar const iodine y cookie. Sí. vamos a llamar a esta línea durante mucho tiempo. Era... ¿Dónde estaba el parámetro de detección? Sí, ¿aquí? Queremos decir, hey, también puedes detectar esto. Usando la cookie que acabamos de crear. I18n cookie. y también lo importaremos. De acuerdo, hecho y aquí donde estamos enviando la localización y el título también podemos establecer la cookie, solo hacemos eso, encabezados y luego como cookie esperamos areHating y cookie punto para realizar mirar ¿Por qué estoy ¿estoy obteniendo este error aquí ahora? cambiado Ahora, si verificamos las cookies, tenemos la cookie aquí si la cambio a de, el valor cambia lo cambio de nuevo, el valor también cambia, también implementamos la cookie donde mis diapositivas saltan porque es hora de un descanso, muy bien, pero antes de continuar Entonces, Greg, quiero consultar contigo y ver si tienes alguna pregunta.

Hasta ahora. Entonces, comencemos en la siguiente parte de esta masterclass, que trata sobre Contentful. ¿Has oído hablar de Contentful o lo has utilizado antes? No, nunca. Muy bien. Esto es perfecto porque aprenderás desde cero. Para darte una idea rápida sobre Contentful, es una plataforma de contenido componible con una arquitectura API-first. Con Contentful, básicamente puedes orquestar contenido desde múltiples plataformas y publicarlo en cualquier canal digital, ¿verdad? Así que Contentful, anteriormente, cuando hablamos de Contentful, hablamos mucho sobre un sistema de gestión de contenido sin cabeza. Pero ahora estamos evolucionando como una plataforma y nos estamos convirtiendo en una plataforma de contenido componible. Así que obtendrás más ideas sobre Contentful y cómo funciona en las próximas diapositivas, donde te guiaré a través de la aplicación web y los modelos de contenido. Pero para darte una idea rápida, Contentful te ofrece cinco APIs diferentes. La API de Gestión de Contenido, que te permite tanto leer como escribir contenido. Entonces, puedes eliminar contenido. Puedes crear contenido fuera de la aplicación web que tenemos. Luego está la API de Activos, que te permite interactuar con los activos que tienes almacenados en Contentful. A continuación, está la API de Entrega de Contenido. Esta es la API que querrás usar para obtener contenido de Contentful y renderizarlo en cualquier canal digital. La cuarta es la API de Vista Previa. A menudo, cuando estás trabajando con contenido, puede haber contenido que está publicado y otro que está en estado de borrador. ¿Verdad? Entonces, para ver este contenido que está en estado de borrador, usarías algo como la API de Vista Previa, porque la API de vista previa te dará el contenido tanto en el estado de borrador como en el estado publicado. Y luego está la API de GraphQL. La API de GraphQL puede darte contenido tanto en el estado de borrador como en el estado publicado, y básicamente es una API de GraphQL que puedes usar para obtener contenido. Aparte de la API de gestión de contenido, las otras cuatro APIs son solo de lectura, no puedes manipular el contenido o la información que tienes en Contentful utilizando estas APIs. Esa fue una introducción no tan corta sobre Contentful y las APIs en Contentful, así que déjame abrirlo ahora mismo. Así que voy a asumir que has creado una cuenta en Contentful. Pero si no lo has hecho, ve a Contentful.com y regístrate para obtener una cuenta. Una vez que crees una cuenta, verás algunas cosas allí. Y voy a intentar guiarte a través de esas cosas y ayudarte a entender qué son. En Contentful, puedes ser parte de varias organizaciones. Aquí, déjame hacer zoom. Aquí tengo mi organización personal donde hago muchos experimentos y la llamo Herschel. Y en esta organización, tengo varios espacios. Cada espacio es para un proyecto en particular. Similar a esta organización, tengo un par de otras organizaciones y estas organizaciones contienen espacios. Ahora, estos espacios también pueden tener algo que se llama entornos. Aquí tengo un espacio de recetas, que he creado para este taller en particular. Y ese espacio también tiene dos entornos diferentes. El entorno principal y luego el entorno del taller. Entonces, si estoy probando algo, digamos que quiero hacer algunos cambios en el modelo de contenido que tengo. Entonces, en lugar de hacerlo directamente en el principal, puedo crear un nuevo entorno, hacer esos cambios, probar esos cambios y si estoy satisfecho, puedo fusionar esos cambios en el entorno principal. Esa es una descripción general rápida del entorno. Ahora, una vez que inicies sesión en tu espacio de Contentful y crees una cuenta en Contentful y crees un espacio, obtendrás varias opciones. Esta es la pantalla de inicio predeterminada y luego está el modelo de contenido, donde definirás toda la estructura para tu contenido. Para nuestra aplicación, es una aplicación de recetas, por lo que necesitamos un tipo de contenido de receta. Este tipo de contenido contiene un título que es de texto corto, también tiene una descripción corta, luego para que se vea bonito, quiero agregar una imagen, así que he creado un tipo de contenido de activo, que tiene una imagen de portada, y luego estoy creando un campo de contenido de tipo texto enriquecido, que se llama ingredientes, y luego hay otro campo de texto enriquecido, que se llama instrucciones. Luego hay otro tipo de contenido llamado ingrediente, y esto básicamente contiene todos los ingredientes que tengo en mis recetas. Contiene el nombre y tiene un tipo de cantidad. Así que vamos a intentar crear y trabajar en estos modelos de contenido y tratar de crear un tipo de contenido. Volvamos a la diapositiva. Lo primero que queremos hacer es importar un modelo de contenido existente, así que ya he creado un modelo de contenido que contiene actualmente solo el tipo de contenido de receta, que también está un poco incompleto. En el siguiente paso, una vez que hayamos terminado de importar, avanzaremos y comenzaremos a agregar más tipos de contenido a esto. Para importar un modelo de contenido, puedes ejecutar el comando 'npx contentful cli if then space import' y luego especificar el archivo de contenido. Ahora, si has clonado el repositorio de GitHub que compartí anteriormente y si vas a la pestaña 5, creo que hay una carpeta de Contentful en la que se encuentra un archivo JSON llamado workshop.json. Voy a verificar rápidamente si es la etapa 5. Sí, eso es... hmm... bien, todavía está en la etapa 4, aún puedes encontrarlo en la etapa 4 y en la etapa 5. Así que adelante, si alguna vez cierras el repositorio, ejecuta este comando para encontrar... Las diapositivas no están funcionando bien hoy. Sí. Y también te pedirá que ingreses un ID de espacio. Permíteme volver a Contentful y mostrarte cómo puedes obtener ese espacio. Hay dos formas diferentes. La primera es obtenerlo desde la URL. Si vas a la URL, está después de un guion y la palabra 'spaces'. Los caracteres son tu ID de espacio, o lo que puedes hacer es ir a la configuración.

Una vez que hayas importado esto, avísame, y luego podemos comenzar a ver el modelo de contenido incompleto y comenzar a agregar o actualizar el modelo de contenido. Así que cuando lo importes, este será el modelo de contenido que obtendrás. Solo tendrá el tipo de contenido de receta y no tendrá el campo de ingredientes aquí. Simplemente no tendrá el contenido de ingredientes tampoco. Está bien. Es importante. La otra cosa que hará por ti es que también importará el contenido. Así que no perderemos mucho tiempo creando ese contenido desde cero para este taller, por lo que ya encontrarás algunos medios y contenido aquí una vez que se complete la importación está bien, es importante correcto, así que si revisas la pestaña de modelo de contenido o si revisas la pestaña de contenido podrás ver el contenido y el modelo de contenido, sí, eso es perfecto, ahora hay dos cosas que necesitamos hacer, necesitamos crear un modelo de contenido para ingredientes y luego queremos referirnos a esto en nuestro tipo de contenido de receta, así que vamos a crear un contenido de ingredientes tipo y debería tener dos campos. El primero es el nombre y el tipo de cantidad. Entonces hacemos clic en agregar tipo de contenido. Voy a llamarlo ingrediente crear. Voy a agregar un campo que será el nombre. Muy bien, puedo hacer clic en agregar y configurar y aquí puedo especificar diferentes configuraciones para este campo en particular, este campo representará el título de la entrada y este es un campo obligatorio. También puedes configurar otros valores de configuración, pero para este campo en particular, esto se ve bien suficiente. Así que voy a hacer clic en confirmar. Muy bien, voy a volver a la diapositiva. Muy bien, esto es lo que es. Y luego eso es el tipo de cantidad, pero con el tipo de cantidad, lo que queremos hacer es darle al usuario una lista de opciones para seleccionar el tipo de cantidad. Entonces, un ingrediente puede venir en una lata. Puede venir en, uh, no sé, paquetes. Entonces quieres especificar como cuánta cantidad se requiere para ese ingrediente en particular así que también vamos a configurar eso, nuevamente en Contentful voy a hacer clic en agregar campo hacer clic en texto, llamémoslo tipo de cantidad uh muy bien, esto va a ser un texto corto, no queremos que sea una lista voy a hacer clic en aceptar y configurar. Y ahora, bajo validación, lo que quiero hacer es decir, hey, solo puedes seleccionar algunos valores específicos. Voy a agregar algunos aquí. Cucharada, tal vez gramos, mililitros. Si estás horneando una taza, si estás horneando un pastel. Puedes usar Taza como valor. Pero por ahora esto se ve bien. Puedo cambiar la apariencia de una sola línea a desplegable. Eso es lo que voy a seleccionar. Y luego voy a hacer clic en confirmar. Ahora puedo guardar esto. Y aquí, si vuelvo a mi modelo de contenido, tengo tanto el tipo de contenido de ingrediente como el tipo de contenido de receta. Esto se ve bien. Esto funciona bastante bien, pero hay una cosa más. No está en las diapositivas, no importa. Pero queremos. Tenemos los ingredientes, pero no estamos mostrando el ingrediente con la receta y sin decirles a los lectores cuáles son los ingredientes requeridos. Tener una receta no tiene sentido. Así que queremos agregar un nuevo campo. Esto será un campo de texto enriquecido. Lo llamaremos ingredientes y aquí. No necesito todos estos formatos. Simplemente los voy a desactivar.

Hemos analizado los campos. Con los campos, puedes tener una localización a nivel de campo, también puedes tener una localización a nivel de entrada, y luego una localización a nivel de tipo de contenido o espacio. Te guiaré a través de los tres y también hablaré un poco más sobre lo que funciona bien cuando,

Lo primero es la localización a nivel de campo. Con esta localización, básicamente puedes localizar cada campo individualmente. Si vuelvo a mi modelo de contenido, aquí en la receta, si abro la configuración para el título, verás que he habilitado la localización de este campo. Pero si te muestro la descripción, no quiero que se localice. Así que no lo tengo habilitado aquí, puedes seleccionar qué campo quieres localizar y puedes habilitarlo en esa configuración. Ahora esto es mejor en escenarios donde tienes tipos de contenido con menos campos como tenemos ahora aquí y quieres que el contenido se publique de forma sincrónica. Ahora, ¿qué significa eso? Digamos que he habilitado la localización aquí, ¿verdad? y si voy a mi contenido, si voy a una carnicería aquí ahora porque este campo no es obligatorio aún puedo publicarlo sin tener un título en alemán, y también he configurado el respaldo en inglés. Entonces, si no lo encuentra, irá al inglés. Pero eso generalmente no es una buena práctica si estás usando la localización a nivel de campo, porque en la localización a nivel de campo quieres publicarlo de forma sincrónica, y es entonces cuando quieres hacer esto.

Avanzando, tenemos la localización a nivel de entrada. Ahora, la forma en que funciona la localización a nivel de entrada es diferente a la localización a nivel de campo, obviamente y la forma en que funciona es que para cada idioma diferente vas a crear una nueva entrada, ahora en nuestro ejemplo, si no habilité la localización a nivel de campo para el campo del título y quiero localizar todo esto e implementaría la localización a nivel de entrada, crearía una nueva entrada de contenido para esto. Y esa entrada estará en alemán. ¿Correcto? Así que vamos a tomar un ejemplo aquí con los ingredientes. Por ejemplo, quiero implementar la localización a nivel de campo para los ingredientes. Ya he creado uno para las cebollas. Y estoy bastante seguro de que no se llama `we burn`, se llama de otra manera y se me ha olvidado completamente, pero puedo hacer esto. Ahora tendré que crear una entrada similar. Solo para alemán aquí. Ahora esto funciona bien porque ahora lo que sucede es que puedes hacer una publicación asíncrona. Incluso si no tengo una entrada en alemán, aún puedo seguir adelante y publicar ese contenido allí.

Lo siguiente es la localización a nivel de tipo de contenido o la localización a nivel de espacio. La forma en que funciona esto es que para cada idioma, tendrás un tipo de contenido diferente. Entonces, si quiero implementar esto crearé un tipo de contenido diferente para la receta que sea solo para el idioma alemán. También puedo hacer lo mismo para los amigos. Esto es lo mejor cuando tienes una separación estricta del contenido y quieres tal vez tener campos diferentes según el idioma esto es cuando este enfoque funciona muy bien y también permite la publicación asíncrona al igual que la localización a nivel de entrada, por lo que esa fue una breve introducción sobre todos los tipos de formas posibles de implementar la localización con Contentful Voy a hablar un poco sobre la gobernanza, porque cuando trabajas con contenido, tendrás un equipo que te ayudará con esto, y también querrás ver la parte de gobernanza de esto. Entonces, con la localización a nivel de campo, tienes la gobernanza, por lo que básicamente puedes restringir a las personas para crear o editar una parte específica del contenido. contenido. Sin embargo, con la localización a nivel de entrada, porque cualquiera puede crear una entrada particular o nueva, no puedes restringir eso. Pero puedes hacerlo con el tipo de contenido porque con el contenido tipo, estás especificando o estás dando permisos solo a contenido específico a un usuario en particular. No puedes hacer la publicación asíncrona con la localización a nivel de campo, puedes hacerlo con las otras dos. Y puedes tener un respaldo para la localización a nivel de campo y a nivel de entrada. Pero no puedes tener un respaldo para el tipo de contenido. Aún puedes tener un respaldo, pero tendrás que codificar eso en tu código. Entonces, tendrás que hacer algunas comprobaciones en tu código para ver si las cosas están ahí o no. Y si no, tendrás que obtener el contenido de tu idioma de respaldo. Muy bien. He hablado mucho, he dado mucha información. Así que voy a tomar un poco de agua, pero también te daré la oportunidad de hacer preguntas que puedas tener. No, está bien. Me parece claro. Mucha información, por supuesto. Sí, esto es mucha información y realmente vamos a usar esta localización a nivel de campo. Pero quiero decir, ese es el método más popular que he visto en la community, la comunidad de Contentful. Pero según tu caso de uso, es posible que también desees probar diferentes métodos. Ya tenemos la documentación para todo esto. Tenemos cursos para todo esto donde puedes aprender en profundidad. Solo di una visión general y no profundicé.

Avanzando, veamos cómo podemos agregar una localización en Contentful. Para agregar una localización en Contentful, ve a configuración, ve a Localizaciones y haz clic en Agregar Localización. Aquí puedes seleccionar la localización que deseas agregar, también puedes, como mencioné, tener una localización personalizada. No tengo francés aquí, así que voy a agregar francés y veré si hay francés de Francia, que es mundial para esto. Luego voy a establecer un respaldo, que será inglés de Estados Unidos. Voy a habilitar esta localización, habilitar la edición de esta localización, eso es verdadero. Voy a permitir campos vacíos para esta localización porque no voy a configurar este idioma para todo el contenido que tengo aquí. Puedo hacer clic en compartir y ahora tengo una nueva localización aquí. Ahora, solo como información adicional, según el plan que tengas, puedes tener limitaciones en la cantidad de localizaciones que puedes tener en Contentful. Supongo que, como acabas de registrarte, estarás en el nivel gratuito que te permite, si no me equivoco, tener dos localizaciones. Pero si quieres tener más de dos, tendrás que actualizar tu plan. Muy bien, y la forma de ver esto es si voy a Pero te mostraré cómo habilitar esto nuevamente para un breve resumen. Si voy a receta. También quiero localizar la descripción. Hago clic en configuración, habilito la localización de este campo. Hago clic en confirmar. Hago clic en guardar. Ahora, la localización está disponible para este campo también. Hago clic en Haka Noodles. Por defecto, así es como se verá la entrada. Puedes tener solo el título y la descripción. Pero si vas a Traducción, haces clic en Cambiar, puedes seleccionar qué localizaciones deseas mostrar. Puedo seleccionar francés y alemán. Hago clic en guardar y ahora tengo en francés y en alemán también. No sé cómo se llama haka en francés, pero noodles son noodle, no tengo idea de cómo se llama en francés. Creo que es lo mismo que en inglés. ¿Pero se escribe de la misma manera? Sí. Oh, interesante. Bueno. No, simplemente no lo traducimos, entendido, interesante, sí, y luego puedo publicar los cambios y ahora tenemos el título en inglés, francés y alemán. Muy bien, también puedes, según la localización, configurar las imágenes también. Si vuelvo a modelo de contenido, voy a receta, nuevamente hago clic en configuración, nuevamente habilito la localización para este campo. Según cada localización, puedes tener un conjunto diferente de imágenes en la. ¿Correcto? Volvamos a las diapositivas.

Hemos agregado algunas localizaciones, ahora lo que queremos hacer es comenzar a obtener los datos de Contentful, pero antes de hacer eso, asegurémonos de tener todos los datos en Contentful. Al igual que importar el workflow.json, si puedes importar el modelo final.json en lugar de workshop.json y ejecutar el mismo comando, importará todo el contenido con los ingredientes y todo lo demás para ti y luego veremos cómo obtener los datos. Orador 2 De acuerdo. Ya lo hice. De acuerdo. Perfecto. Ahora que tienes el modelo de contenido terminado, podemos comenzar a obtener los datos de contenido. Como estamos usando Remix, también vamos a usar la API de GraphQL aquí. No vamos a usar la API de entrega o el SDK, pero si quieres, puedes usar la API de entrega o el SDK o la API de vista previa también. Lo primero que queremos hacer es crear un archivo contentful.server.ch en el que queremos crear una función que maneje las llamadas a la API. Tendremos que obtener las recetas y luego renderizar todas las recetas. Así que vamos a hacer eso. Dentro de la aplicación, tendrás. Utils Contentful. punto. Server.js. Y en esto voy a. También voy a agregar hmm, y en el archivo de variables de entorno, que voy a usar para almacenar mis credenciales. Esto será contentful. Space ID. Contentful. content for token. Vamos a configuración, vamos a la rama principal.

Así que vamos a configuración y ahora a claves de API. Voy a cookbook uno, copio el ID del espacio, lo pego aquí. Ahora, como estoy usando la API de GraphQL, voy a usar el token de API de vista previa en lugar del token de acceso a la API de entrega. Copio eso. Lo pego aquí. Ahora, si cometes un error, si te gusta, a menudo recibimos esta pregunta como, eh, ¿qué pasa con nuestros tokens de API que se exponen? Así que voy a reiterar esto de nuevo. Este es un token de API de solo lectura, ¿verdad? Así que incluso si se expone, nadie puede manipular tus data o pueden. Solo obtenemos esa data pero no podemos manipular la data. Estás seguro. Tu contenido no se está. O los actores maliciosos no pueden manipular tu contenido. Obtengamos esto ENV.contentful. Voy a copiar esto porque siempre lo escribo mal. Y luego roto. Así que la forma en que hice esto, aunque estoy usando GraphQL, no estoy usando la API específica de GraphQL, solo estoy usando la API fetch en lugar de usar una API específica de GraphQL, porque en este momento no es un proyecto muy complicado. No quiero implementar cosas complicadas aquí como el almacenamiento en caché y cosas así. Voy a hacer algo así. Aquí vamos a tener opciones que pasaremos al método y luego los encabezados que contendrán el tipo de autorización. correcto y el cuerpo tendrá que ser json.stringify consulta y variables return await fetch URL y las opciones Esta es una función simple y reutilizable que vamos a usar en el resto de nuestro código. Ahora esta función que estoy escribiendo aquí nos va a obtener todas las recetas de Contentful. Acabo de echar un vistazo rápido al tiempo y estamos muy atrasados en el tiempo. Lo que voy a hacer es copiar el código de GitHub y pegarlo aquí, y así puedo revisarlo y explicarte qué está sucediendo aquí. Para obtenerRecetas, lo que queremos hacer es basado en la localización, queremos obtener esa información de receta. Estoy pasando un parámetro de localización y eso va a mi colección de recetas, Y luego básicamente estoy obteniendo esa información, haciendo una llamada a la API y devolviéndola aquí. Guardaré esto y vendré a index.js aquí. En lugar de usar esto aquí, simplemente puedo tener una función de carga que me obtendrá esa receta. También necesito importar esto. Vamos a eso. vmx i 18 y de writing dot server esto es correcto, solo voy a copiar y pegar el código solo para ahorrar tiempo. Básicamente, tengo la función de carga que llama a la función obtenerRecetas. Obteniendo las recetas, pasándolas a mi componente y en el componente es donde las renderizo. Cuando lo llamo. Imagen de portada. Tenemos que reiniciar el servidor. Muy bien, si volvemos a nuestra aplicación, nos encontramos con un error, eso es fantástico. Eso es lo último que quería esta vez. Vamos a verificar rápidamente. hacer clic en contentful server.js misma localización pasando la localización el código en el repositorio funciona así que voy a pasar a la siguiente parte porque solo nos quedan como 5 minutos y realmente quiero asegurarme de cubrir todos los pasos Pero si vuelves a tener algún problema, avísame. Estoy encantado de ayudarte con los siguientes pasos. Así que, suponiendo que las cosas estén funcionando bien. Teníamos una página que renderizaba las recetas provenientes de Contentful, pero había un problema. Si hacíamos clic en cualquiera de esas recetas, iría a una nueva ruta y nos daría un 404 porque no configuramos el enrutamiento dinámico. Entonces, en este paso en particular, veremos el enrutamiento dinámico, especialmente en Remix. La forma en que funciona el enrutamiento dinámico en Remix es usando el signo de dólar. Puedes tener un signo de dólar, puedo llamarlo id, y luego tengo .gsx, GSX. Y luego puedo hacer algo como exportar. Función predeterminada. Solo voy a hacer un rápido retorno.