Creación de tiendas personalizadas en Shopify con Hydrogen

Entonces, vamos directo al grano. Muy bien, genial. Bueno, bienvenidos a todos. Como dice la diapositiva de título, y estoy seguro de que ya lo saben, ya que se inscribieron en este masterclass, vamos a repasar la construcción de tiendas sin cabeza utilizando la nueva herramienta de Shopify llamada Hydrogen. Hoy vamos a hacer un poco de codificación práctica, pero estoy muy emocionada de compartir con ustedes este masterclass porque es lo último de Shopify y React.

Soy Megan. Pueden encontrarme en Discord, Twitter, YouTube. Soy una defensora de desarrolladores aquí en Shopify. Así que soy bastante activa en la comunidad. Siéntanse libres de saludar si me ven por ahí. Parte de mi trabajo en el equipo se enfoca en traerles masterclasses como este y destacar algunas de las otras cosas geniales que Shopify está haciendo, así como escucharlos a ustedes y entender en qué está interesado en que Shopify haga y ver todas las cosas geniales que la comunidad está construyendo.

Y soy Abe. También soy un defensor de desarrolladores en Shopify. Mi trabajo consiste principalmente en dejar que Megan haga su trabajo y luego aparecer para dar la charla y actuar como si hubiera hecho todo el trabajo de preparación. De manera similar, me muevo por varias redes sociales. Tengo una cuenta de Twitter y cosas así, pero no recomendaría seguirme porque no tuiteo nada interesante. Pero estoy aquí. Me verán aparecer en todo tipo de recursos relacionados con Shopify. Y, por supuesto, siempre pueden enviarme un correo electrónico si tienen alguna pregunta específica o pensamientos sobre el masterclass o cualquier cosa relacionada con el desarrollo en Shopify en general. Siempre estoy feliz de charlar o dirigir su pregunta a alguien que tenga una mejor respuesta que yo tengo.

Genial. Hoy utilizaremos Hydrogen para construir una página de producto. Lo que aprenderás son algunas de las principales características que Hydrogen ha desarrollado para ayudarte a enviar y construir rápidamente. Y al final del masterclass, pondremos manos a la obra, haremos algo de codificación. Verás algunas de las herramientas que Shopify ha desarrollado para ayudarte a construir rápidamente una tienda personalizada. Y esperamos que al final haya tiempo para preguntas y respuestas. Pero si tienes alguna pregunta, siéntete libre de escribirla en el chat mientras avanzamos y trataremos de responderlas allí también.

Así que empecemos. Abe, ¿quieres comenzar? Sí. Entonces, para aquellos que no están familiarizados, Hydrogen es un marco de trabajo que Shopify lanzó recientemente. Básicamente, lo que es, es una forma de agregar una interfaz a las API sin cabeza que Shopify ofrece. Cuando mucha gente piensa en Shopify, piensa en personas que ingresan a nuestra interfaz pública y design una tienda utilizando la interfaz de arrastrar y soltar y eligen un tema de la tienda, cosas así, personalizando experiencias de comercio electrónico ya hechas. Pero Hydrogen es un enfoque muy diferente. Ofrecemos todas estas API que básicamente te permiten hacer todo lo que podemos hacer con tu tienda, puedes hacerlo a través de una API. Y luego Hydrogen te permite construir cualquier interfaz de usuario que desees sobre eso. Así que vamos a adentrarnos un poco aquí, pero las partes importantes son, es un marco de trabajo basado en React. Por lo tanto, será familiar para cualquiera que haya trabajado con React, con un montón de ayudantes y utilidades geniales para ayudar a construir una tienda impulsada por Shopify. El comercio electrónico en general es muy difícil y verás aquí que hemos tratado de reunir un montón de utilidades y ayudantes y cosas que son como los casos de uso comunes para construir una tienda. Sabes, necesitas un carrito, necesitas páginas de productos, necesitas todos estos diferentes componentes pequeños, como diferentes versiones o variantes de las que hablaremos. Entonces, ya sabes, si tienes un producto que tiene diferentes colores o cosas así, todo esto es bastante genérico para el comercio electrónico. Y este es el problema que Hydrogen espera resolver. Simplificar el problema, hacer que la construcción de una tienda de comercio electrónico sea más fácil, pero aún darte la máxima cantidad de poder que puedas necesitar para hacer cualquier tipo de tienda loca que quieras hacer.

Sí, como acabo de decir, Hydrogen está diseñado para impulsar sitios de comercio electrónico personalizados y dinámicos. Y para hacer esto, tenemos tres estrategias separadas que trabajan juntas. Son los componentes de servidor React, el renderizado del lado del servidor en streaming y las políticas de caché flexibles. Hagamos una descripción detallada de cada una de ellas. Así que los componentes de servidor React. Tal vez hayas oído hablar de esto con React 18. Se destaca en Hydrogen y es como el nuevo y próximo tema de React. No es lo mismo que el renderizado del lado del servidor. Sé que es un poco confuso. De hecho, pensé que eran lo mismo durante un tiempo hasta que empecé a investigar Hydrogen y cómo lo utilizamos. Pero los componentes de servidor permiten que tanto el servidor como el cliente, es decir, el navegador, colaboren juntos al renderizar tu aplicación React. Entonces, si piensas en tu aplicación React típica, es como un árbol de elementos de componentes React que incluyen más componentes React, y todo se carga y se hace en el lado del navegador. Los componentes de servidor de React permiten que algunos de esos componentes en el árbol en lugar de ser renderizados por el navegador, sean renderizados por el servidor. Y luego puedes delegar parte del trabajo al lado del servidor y aún tener algunos componentes renderizados por el navegador. Esto tiene algunas ventajas. La primera es que tu servidor tiene un acceso más directo a tus fuentes de datos, como tu base de datos, puntos finales de GraphQL o incluso tu sistema de archivos, cosas así. El servidor puede obtener directamente los datos que necesitas y no tiene que pasar por un punto final de API como normalmente lo haría tu lado del cliente. Esto hace que tu aplicación sea más rápida y también más segura porque no tienes que pasar por esa capa de API. Y si tienes muchos módulos de código pesados, por ejemplo, si tienes una biblioteca de formato de fecha costosa o algo así, puedes usarla en tu componente de servidor. Esto significa que la biblioteca que estás utilizando, que puede ser un poco grande y pesada, se queda en tu servidor y nunca necesita transferirse a tu cliente. Por lo tanto, reduces el tamaño total de tu paquete y también ayudas a la rapidez de la carga. Una cosa que debes entender mientras hablamos de este tema es que los componentes de servidor pueden obtener datos y acceder al sistema o tal vez a tu sistema de archivos, pero no pueden almacenar estado ni tener ningún contexto en estos componentes. Entonces, si necesitas acceder a un estado o contexto o algo así, eso es cuando tendrías que usar un componente del lado del cliente porque ese trabajo se hace obviamente en el navegador. El siguiente tema que hemos incluido, el renderizado del lado del servidor en streaming El renderizado del lado del servidor no es en sí mismo un nuevo componente, pero en React 18. Hay una nueva API de SSR impulsada por suspense, y esto realmente desbloquea muchas características geniales para el renderizado del lado del servidor, por lo que elimina las cascadas de obtención de datos.

Entonces, si piensas en la forma antigua, el enfoque en cascada es donde cada solicitud debes esperar a que se complete la anterior antes de poder iniciar la siguiente. Si utilizas SSR en streaming y la arquitectura de suspense, puedes dividir y ocultar muchas de esas solicitudes de datos en tu aplicación renderizada en el servidor sin tener que usar el enfoque en cascada o sin tener que esperar por el enfoque en cascada. Esto te brinda una carga inicial rápida en el lado del cliente, por lo que tu shell puede renderizar React 18, comenzar a transmitir tu HTML al navegador. Mientras esto sucede, tus datos se están obteniendo en segundo plano. Por lo tanto, puedes tener varios estados de carga para cada uno de tus diferentes componentes. Antes de esto, tenías que renderizar todo en el servidor, ¿verdad? Ese es el enfoque en cascada. Es muy lento en cuanto al tiempo de carga inicial. O antes de que introdujéramos esta arquitectura, tenías que hacer todo en el cliente, lo que tal vez fuera rápido en cuanto al tiempo de carga inicial, pero introducía mucha ida y vuelta entre tu cliente y tu servidor. Tenías que obtener todo en diferentes solicitudes. Esta estrategia nos ayuda a eliminar ambos problemas.

Y finalmente, con SSR, tenemos una hidratación progresiva. Esta es una respuesta transmitida que llega al cliente. Esto significa que no tienes que esperar a que todas tus solicitudes se resuelvan, como mencionamos, y cada componente puede renderizarse en un momento diferente. Por ejemplo, un botón de compra puede ser interactivo y cargarse en la página antes de que se carguen las reseñas del producto si estas tardan un poco más. Y lo último de lo que vamos a hablar son las políticas de almacenamiento en caché flexibles. Hydrogen cuenta con algunos mecanismos de almacenamiento en caché inteligentes. Puedes almacenar en caché páginas completas o incluso solicitudes individuales. Si piensas en una página de producto de comercio electrónico en general, probablemente necesites varias solicitudes para obtener toda la información que necesitas, tal vez detalles del producto, reseñas del producto, tal vez estés obteniendo contenido de redes sociales o algo así. Puedes almacenar en caché cada una de esas solicitudes individualmente según tus necesidades. Por ejemplo, puedes querer que los detalles del producto estén siempre actualizados, por lo que solo los almacenas en caché durante un minuto, mientras que tal vez no obtienes reseñas de productos con tanta frecuencia, por lo que puedes extender el tiempo de almacenamiento en caché para esa llamada específica. Y si tienes una página que no cambia con frecuencia en absoluto, como publicaciones de blog, sobre nosotros, contáctanos, cualquier cosa que sea un poco más estática, puedes almacenar en caché toda esa página si quieres, utilizando algunas de nuestras políticas integradas en Hydrogen. Y lo último en este punto es que también hemos incluido una opción de 'stale while revalidate', lo que significa que puedes devolver los datos antiguos de inmediato. Por lo tanto, el cliente no tiene que esperar a que se complete una llamada a la API. Y luego, en segundo plano, puedes regenerar de forma asíncrona los datos actualizados y volver a cargar la página una vez que esté lista. De esta manera, obtienes un equilibrio entre velocidad, donde tu página se carga de inmediato, y frescura, donde obtienes datos actualizados en segundo plano.

No solo hemos hecho que Hydrogen sea rápido para tus clientes, ¿verdad? Para los clientes que cargan tus sitios de Hydrogen, también hemos intentado hacer que el desarrollo de Hydrogen sea rápido para nuestros desarrolladores. Hemos incluido algunas piezas fundamentales de tecnología y hemos proporcionado algunas guías de inicio rápido para que puedas comenzar rápidamente y comenzar a construir de inmediato. También hemos incluido algunos componentes específicos como hooks y utilidades que funcionan muy bien con React, para que no tengas que reinventar la rueda cada vez. También hemos cubierto algunos de esos casos de uso comunes para ti.

Muy bien, hagamos algo de codificación. Permíteme hacer una transición muy fluida aquí a nuestro Documento de Pasos. Voy a compartir este enlace en el chat, y si pueden reflejarlo en Discord, sería genial. Este documento es prácticamente lo que vamos a seguir. Debería tener enlaces a todo, todos los fragmentos de código que necesitas. También puedes seguirlo. Lo recorreremos y todo. Pero este es prácticamente un tutorial independiente. Puedes leerlo y hacerlo tú mismo. Lo recorreremos y lo seguiremos durante el resto del masterclass. Pero siéntete libre de volver a él más tarde, guardarlo en marcadores o lo que sea, no irá a ninguna parte. Como hablamos al principio de este masterclass, básicamente vamos a construir una tienda personalizada muy sencilla. Vamos a usar Hydrogen, nuestro marco base. Vamos a construir una interfaz para las API sin cabeza, eso es todo lo que hemos dicho. Las partes importantes para lo que realmente necesitas si quieres seguir y no solo escuchar es un navegador basado en Chrome, un navegador basado en Chromium, que probablemente todos tengamos. Y luego este pequeño enlace aquí al proyecto StackBlitz real.

También hay una versión, una versión más nueva que tiene algunas dependencias cambiadas y cosas. Vamos a trabajar con esta versión aquí. Puedes probar la versión más nueva, pero es posible que encuentres algunos problemas, como mencionamos antes de esta llamada. Las cosas han estado cambiando muy rápidamente con hydrogen en las últimas horas y días. Por lo tanto, hemos fijado nuestras versiones para asegurarnos de que las cosas sean exactamente como esperamos con un margen mínimo de error. Pero siempre existe la posibilidad de que algo se actualice y no nos hayamos enterado. Así que sí, si quieres seguir, esta es la versión segura para usar.

Entonces, vamos a hacer clic en abrir. Verás que se iniciará un entorno para nosotros. Tenemos nuestro pequeño navegador web aquí. Si no has utilizado StackBlitz antes, básicamente es una forma muy buena de ejecutar todo en el navegador muy rápidamente. Bien, ya hemos descargado un pequeño código de plantilla aquí. Tenemos nuestro código aquí, nuestra terminal aquí abajo y luego nuestro programa se está ejecutando aquí. Puedes abrir esto en una nueva ventana, puedes abrir esta pestaña del navegador en una nueva ventana, lo cual es bueno si quieres verificar las solicitudes de red y cosas así. No lo haremos realmente. Pero si necesitas más espacio, puedes hacer clic en ese botón de arriba. Lo abriré en una nueva ventana para no tener que estar saltando de un lado a otro. Y listo, ahí lo tienes. Genial, estaba escribiendo una respuesta en el chat, pero lo diré verbalmente. El soporte de TypeScript es algo que el equipo de Hydrogen recibe muchas preguntas. Creo que la idea es que vayamos a GA solo con JavaScript y luego rápidamente agreguemos soporte para TypeScript también. Buena pregunta, sé que el equipo recibe esa pregunta con bastante frecuencia. Bien, ¿entonces, todos amamos TypeScript? Sí, lo sé, soy fan. No, no necesitas Ruby en tu máquina, a diferencia de otros proyectos de Shopify. No vamos a tocar Ruby hoy. De hecho, StackBlitz te permite gestionar todas las dependencias y todo en tu navegador también. Por lo tanto, no necesitas clonar nada localmente ni configurar nada. Y si quieres continuar con esto por tu cuenta, solo necesitarás node y la cadena de herramientas normal. Al final, cubriremos los siguientes pasos sobre cómo sacar las cosas de Stack, y realmente construir algo real. Pero por ahora, sí, no necesitas nada más que hacer clic en ese enlace en un navegador compatible y puedes seguir el masterclass.

Genial, a medida que todos lo abren, comencemos con la introducción, familiaricémonos con lo que tenemos aquí. Lo primero que debemos ver es el archivo hydrogen config.js. Aquí es donde nos conectamos a una tienda de demostración de hydrogen. Hay una clave de API y creo que es el dominio. Esto apunta a una tienda de demostración que Shopify ha creado para que la uses y explores mientras pruebas hydrogen por primera vez. Por lo tanto, este es el archivo que define qué tienda respalda esta aplicación de hydrogen. Luego está el componente del servidor de la aplicación. Por supuesto, como en cualquier aplicación de react, este es el punto de entrada a la aplicación. Aquí puedes ver que hemos incluido suspense y el proveedor de Shopify está envuelto alrededor de todos nuestros archivos. Esto simplemente utiliza la configuración de la que acabamos de hablar y crea el contexto de React para poder conectarse a la tienda en segundo plano. Gran parte de la plantilla está cubierta por esta plantilla aquí. Será lo mismo si lo clonas por tu cuenta, si estás usando nuestro comando yard o algo así. Hemos tratado de hacerlo bastante fácil para que puedas comenzar rápidamente. Como dijo Megan, hay un enrutador aquí y puedes adivinar por el nombre. Lo que hace Hydrogen es utilizar un tipo de enrutamiento llamado enrutamiento basado en archivos, que básicamente es una forma en la que mapeamos los archivos reales que están en el directorio de tu código fuente a las URL a las que las personas accederán. Es una forma muy simple y lógica de mapear el código que escribimos a cómo se muestra en la página. Ahora mismo, si abrimos nuestra carpeta de rutas, lo único que hay aquí es un archivo index.server.jsx, que simplemente es una función que devuelve Hola Mundo. Y puedes ver aquí que estamos en la barra diagonal o página de inicio de nuestro sitio web, y simplemente dice Hola Mundo. A lo largo de esto, veremos diferentes archivos, algunos se llamarán index. o algo.server.jsx, otros se llamarán algo.client.jsx.

En un proyecto de hydrogen en general, a veces verás algo, algo, solo jsx, sin cliente ni servidor. Aquí hay algunas reglas bastante estrictas sobre lo que significan esos nombres, un archivo server.jsx siempre se representa en el servidor y client.jsx se realiza en el cliente. Y hay divisiones bastante claras sobre lo que pueden acceder esas dos cosas. Lo importante para este tutorial es que los archivos Client.jsx pueden acceder al estado. Entonces, si quisieras algo como seleccionar un color para un producto, eso es un estado del lado del cliente, por lo que necesitarías un componente del lado del cliente.

Y luego, los componentes del servidor, la parte importante para este tutorial es que una nueva página es un nuevo componente del servidor. Entonces, si queremos crear una nueva página de producto, necesitamos crear un nuevo componente del servidor. Hay algunos otros detalles sobre estos dos tipos de componentes y cuándo pueden interactuar. Hay un enlace en la página a más documentación al respecto, pero no profundizaremos demasiado en eso. Pero lo importante aquí es que si nuestro objetivo es hacer una página de producto, necesitamos crear una estructura de carpetas que represente lo que queremos que sea nuestra ruta de página. Entonces podemos ir a la carpeta de rutas y crear una nueva carpeta y llamarla 'productos', eso es solo codificar un producto para comenzar. Luego, creamos un nuevo archivo llamado 'ejemplo.server.jsx' y si volvemos a nuestro documento, verás que tenemos un pequeño fragmento de código que podemos copiar y pegar, y todo esto es un poco, se ve exactamente como la página de inicio que es un 'Hola Mundo', excepto que este dice 'ejemplo de producto'. ¿Notas que cuando guardé eso, todo se actualizó, hay un pequeño mensaje aquí abajo que dice que bifurcamos el proyecto, por lo que eso podría haber bloqueado tu servidor aquí abajo, así que si obtienes algo como 'no puedo conectar' aquí, lo que puedes hacer es volver a ejecutar 'npm install nm yarn' y luego puedes tener tu servidor nuevamente. Así que simplemente lo detuve, por lo que obtendrás 'no se puede conectar'. Entonces, si obtienes eso, simplemente vuelve a ejecutar este comando, lo serviré en el documento, lo verás. Pero de todos modos, en este punto tenemos una ruta que acabamos de configurar, que es 'productos/ejemplo', y podemos ir aquí y cambiar esta URL, 'productos/ejemplo', y obtenemos nuestro ejemplo de producto exactamente como esperaríamos. Y eso es todo lo que se necesita para hacer una ruta estática. Si quisiéramos hacer una página 'Acerca de' o algo así, esta sería una excelente manera de hacerlo. Simplemente puedes crear el archivo y poner lo que quieras. Pero eso no funciona realmente si tenemos miles de productos, así que hablemos de las rutas dinámicas.

Sí, por supuesto, si tenemos miles de productos, no queremos crear miles de páginas para cada uno, por lo que podemos actualizar el nombre del archivo para poder aceptar un parámetro. Y cómo hacemos eso es simplemente colocando corchetes alrededor del nombre de la variable que queremos declarar. Entonces aquí lo llamaremos 'handle', eso significa el identificador del producto. Y ahora que tenemos ese nombre de archivo definido, podemos obtener esos parámetros del argumento para este componente aquí. Y luego, si queremos usarlos dentro de ese componente, simplemente extraemos 'handle' de ese objeto de parámetros. Entonces, nuevamente, solo un recordatorio, esto es JavaScript, por lo que los nombres aquí importan. Ese 'handle' que estamos extrayendo entre llaves es el mismo que el nombre de variable que hemos declarado entre corchetes en el nombre del archivo. Entonces, ahora todo está conectado. Tienes tu 'handle' especificado en el nombre del archivo. Estamos obteniendo los parámetros en el componente y extrayendo 'handle' de ese objeto. Y ahora, cuando se actualiza la URL, puedes ver que extrae ese parámetro y actualiza la página para mostrar ese nombre dinámico. Fácil. Nunca he visto algo más natural o fácil en mis décadas de programación. Además de esto, el 'handle' es genial. Correcto. Entonces, tenemos un poco de información de la URL. Obviamente, puedes expandir esto. Puedes poner múltiples campos en la URL. Haz lo que quieras, lo que te guste. No profundizaremos más en eso. Entonces, lo que necesitamos hacer es tomar ese 'handle' que acabamos de extraer de la URL y hacer algo genial con él. En este caso, dado que, como mencionó Megan, ya tenemos esto conectado a una tienda de demostración, sabemos que podemos hacer una consulta, utilizando ese 'handle', para obtener información específica del producto desde nuestra API. Sin embargo, realmente no sabemos cómo hacer eso. No tenemos ningún ejemplo de llamadas a la API aquí. Probablemente nunca hayas mirado la documentación de la API. La API que vamos a utilizar se llama API de Storefront, y como su nombre indica, representa básicamente todo sobre una tienda de Shopify. Y hay varias formas de aprender sobre esto y descubrir qué datos puedes acceder. Una es consultar la documentación. Puedes ir a, creo que es hydrogen.shopify.dev, y puedes leer todo lo que quieras sobre todos los detalles.

O, dado que es una API basada en GraphQL, podemos usar esa herramienta interactiva que viene con la mayoría de las API de GraphQL, y podemos ir a GraphiQL. Así que si quieres, puedes expandir esto o hacerlo en una nueva ventana. Lo estoy expandiendo porque si lo hago en una nueva ventana, tengo que cambiar de una a otra. Pero podemos ir a /GraphiQL.

Y, ya sabes, una vez que realmente construyas tu sitio, esto estará desactivado, pero como estamos en modo de desarrollo, aparece. Y si no estás familiarizado con GraphQL, está bien. Yo tampoco soy un experto en GraphQL. Así que no te estreses demasiado. La parte importante es que esta es una interfaz realmente genial que nos permite probar la consulta contra esa API de Storefront y ver qué obtenemos como respuesta.

Entonces, la consulta más simple que podemos hacer es la que está en el documento, que es solo una consulta para el nombre de la tienda. Así que la pegaremos aquí. Nuevamente, no tienes que ser un experto en esta sintaxis. Explicaremos lo que necesitas, así que no te estreses. Pero básicamente, estamos yendo, estamos mirando el objeto de la tienda y estamos obteniendo el nombre de él para poder ejecutarlo. Y nos damos cuenta de que nuestro nombre de tienda es Snowdevil. Y eso está configurado en el panel de administración de Shopify, en el tablero para la persona que realmente mantiene el sitio.

Esto es genial. Pero la parte realmente valiosa de GraphiQL es que podemos descubrir más sobre la API y aprender sobre ella. Entonces, si presionas nueva línea y luego haces, como, un control espacio, aparece el autocompletado. Así que obtenemos un montón de otros campos aquí que podríamos querer obtener. Entonces, si quisiéramos, por ejemplo, obtener, como, la descripción de la tienda, eso es bueno. Ahora podemos ejecutar eso y obtenemos la descripción de nuestra tienda, que es el escaparate personalizado impulsado por Hydrogen. Y eso es súper fácil. Obviamente, hay un montón de otra información aquí. Esto es solo una categoría, la información de la tienda, pero también podemos consultar productos. Así que vamos a sacar un producto. Y esta consulta, hay un enlace en el documento a esta consulta. Lo siento, acabo de perder mi ventana. Hay un enlace a la documentación y puedes encontrar esta consulta y puedes ir y, como, investigar. Hay un montón de ejemplos de consultas en Shopify.dev, porque sabemos que no todos son expertos en GraphQL. Pero copiaré y pegaré esto aquí. Y básicamente lo que estamos diciendo es que queremos ver los productos. Queremos obtener los primeros 10 productos. Solo ignora esas palabras y su basura de GraphQL. Y luego queremos el ID y el manubrio de ese producto. El ID es un ID interno de Shopify. Suelen verse bastante locos. Y luego el manubrio es solo un ID legible para humanos. Y observa que también estamos usando la palabra manubrio en nuestra página. Así que eso es en lo que terminaremos, ya sabes, vinculando y consultando. Así que ejecutemos esta consulta. Y estamos obteniendo aquí una lista de 10 productos. Puedes ver que cada producto se ve así. Tenemos, ya sabes, el nodo. Y luego tenemos un ID y un manubrio, un nodo, ID y un manubrio. Así que puedes ver que tenemos un montón de nombres extraños, un montón de tablas de snowboard diferentes, cosas diferentes, la tabla de snowboard estilo libre de oxígeno, lo que sea. Podemos simplemente ir con el manubrio más genérico de nivel superior, como la tabla de snowboard. Y podemos usar esto para el resto del tutorial como una especie de base para hacer nuestras consultas. La página del producto se construirá. Estaremos consultando este producto de tabla de snowboard.

Entonces, ahora que tenemos algunos datos que se consultan, estamos extrayendo algo de la URL, tenemos algunos datos que se consultan, no estamos haciendo nada con los datos, pero los tenemos. Aquí es donde podemos comenzar a trabajar con componentes del lado del cliente y cosas que son realmente más interesantes en la página. En este caso específico, vamos a crear un componente de detalles del producto y luego vamos a utilizar esta cosa llamada proveedor de opciones de producto, que básicamente es una forma de pasar el contexto del producto que estamos viendo, que el servidor proporciona a los detalles del producto, y luego permitir que se utilice a través del gancho de opciones de producto, que utilizan varios componentes de Hydrogen, pero también podemos crear componentes personalizados que utilicen el gancho de opciones de producto y que manejen automáticamente varias cosas, como las variantes, entre otras cosas, de las que hablaremos en un momento. Pero por ahora, simplemente podemos crear este componente del lado del cliente.

En la vida real, es posible que desees crear una carpeta de componentes fuente para tu componente del lado del cliente. Simplemente lo colocaremos junto a la página, para mantenerlo simple. Pero si observas algunos de los otros ejemplos que están un poco más organizados,. Puede que estornude y pido disculpas por eso. Espera un momento. No, no estornudé. De acuerdo.

Entonces, vamos a colocar un componente de detalles del producto en client.jsx. Y recuerda, client significa que esto se renderizará en el cliente. Por lo tanto, podemos hacer cosas como tener estado. Luego, vamos a decir function detalles del producto. Tomará una propiedad que es un producto y simplemente vamos a renderizar básicamente lo mismo. Es una redacción ligeramente diferente, pero es el mismo resultado que estamos renderizando actualmente. Entonces, vamos a cambiar esto de una etiqueta p a decir detalles del producto. Y lo cerraremos. Pero si ejecutamos esto ahora, se romperá porque necesitamos pasarlo ese producto. Por lo tanto, podemos decir producto igual a data. Y ahí vamos. ¿Lo arruiné? Producto igual a data producto producto. Ups. Oh no. Creo que la propiedad es data.producto del origen. Tienes razón. Tienes razón. Creo que he visto este código lo suficiente como para entenderlo sin mirar la documentación. De todos modos, ahí lo tienes. Ahora puedes ver que se está renderizando correctamente.

Y la distinción importante aquí es que ahora que estamos haciendo estos detalles del producto, estamos utilizando este componente client. Eso significa que podemos hacer cosas interactivas. Permíteme volver a nuestro documento rápidamente. Entonces tenemos este proveedor de opciones de producto que mencioné anteriormente. Y es una de las formas en que podemos mostrar los detalles del producto en la página. No es necesario que lo usemos. Hay algunas opciones. Por ejemplo, actualmente ya estamos mostrando información del producto. Estamos mostrando el título. Pero este otro componente es mucho más completo y nos permite hacer cosas más interesantes. Así que voy a copiar y pegar nuevamente desde allí, desde nuestro pequeño documento de la masterclass. Y parece que ha cambiado mucho, pero en realidad no lo ha hecho. Todavía tenemos nuestro título del producto aquí. Y luego simplemente agregamos este nuevo componente proveedor de opciones de producto. Y pasamos ese data, y ese data es el producto. Entonces lo que estamos diciendo aquí es que el servidor solicita ese data, lo pasa a los detalles del producto. Luego, en el cliente, configuramos este proveedor de opciones de producto y le damos ese producto. Y ahora ese proveedor de opciones de producto le da ese contexto a cualquiera que quiera utilizar el gancho Use Product Options en el futuro, ya sea un componente incorporado en Hydrogen o algo específico. Guardemos esto, y no nos irá muy bien. Porque dice que los proveedores de opciones de producto requieren producto.variante.nodo. En otras palabras, el data del producto que estamos proporcionando no está completo. Y no está completo porque la consulta que estamos usando aquí es solo esa pequeña consulta de prueba.

En realidad, no tiene suficiente información para calificarse como un producto completo en el contexto del proveedor de opciones de producto. Por lo tanto, verás en la documentación que tenemos dos cosas vinculadas. Tenemos tanto la página real en Shopify.dev, como también un enlace a un gist debajo del texto de esta consulta más grande. Y cuando hagas clic en él, verás que en realidad es una consulta más grande. Es una consulta mucho más grande. Podemos reemplazar todo esto. Y se vuelve realmente grande. Es un montón de GraphQL, un montón de basura. Es una forma muy productiva de codificar porque pasamos de tener como 10 líneas de código a tener 300. Todo esto no es realmente importante para que lo entiendas. Hay una razón por la que está en la documentación. Hay una razón por la que está vinculado, porque no necesitas tener toda la información sobre todos los detalles aquí. Lo único que podría interesarte es que hay cosas como cuántas imágenes buscar aquí para que puedas cambiar eso, o, ya sabes, diferentes campos pequeños si dices `oh, realmente solo quiero que se descarguen tres imágenes`. No necesito 10 o lo que sea. En nuestro caso, todas esas variables están codificadas en duro. Lo único que esta consulta espera, al igual que la otra, es esa variable de handle y luego la busca. Y notarás que cuando guardé esto y reemplacé esta consulta por nuestra antigua consulta más simple. La página se volvió a renderizar, todavía no está haciendo nada diferente, pero al menos se volvió a renderizar y ya no muestra un error. Así que hemos llegado a un punto en el que ese proveedor está diciendo, sí, estás proporcionándome suficiente información como para no estar enojado contigo activamente. Así que eso está bien. Hay una cosa más de la que queremos hablar antes de adentrarnos realmente en el uso de las opciones de producto demasiado, que es que todavía hay algunos componentes que Hydrogen proporciona para acceder a los detalles de este producto. Ahora que es un objeto de producto completo que no necesariamente utiliza las opciones de producto o cosas que no cambian entre variantes y no necesitan ese contexto. Así que el primero de esos componentes del que quiero hablar es como, bueno, en realidad, déjame dar un paso atrás. Hay tres tipos de formas de acceder a data de tu producto para tu página. El primero es el que ya estamos haciendo. Y puedes ver aquí donde simplemente accedemos a data directamente. Luego, el segundo es usar las opciones de producto y usar el gancho useProductOptions. Y luego, el tercero es utilizar estos otros componentes que, como dije, existen fuera del uso de las opciones de producto pero aún esperan un producto completo. Uno de esos es el precio del producto. Así que podemos importarlo y el precio del producto se ve muy similar a los demás. Toma data, que es un producto, y simplemente extrae el precio. Hace exactamente lo que esperarías. Oh, también vale la pena mencionar que debido a que cambiamos esa consulta para que sea mucho más grande, esta consola log ahora muestra un montón de cosas aquí abajo. Así que este es como el objeto de opción de producto completo que estamos pasando. Así que esa es otra forma de saber que estamos obteniendo un objeto más completo. Pero de todos modos, esa es la segunda opción, simplemente hacer este precio del producto, pasarlo a data, y mostrarlo. Hay muchos de esos campos de producto integrados y cosas así para que puedas hacerlo fácilmente sin tener que saber exactamente qué campo estás buscando. Y luego, la otra opción es hacer los otros componentes de hydrogen que utilizan ganchos de producto o utilizar componentes personalizados que utilizan ganchos de producto tú mismo. Así que hablemos de cómo utilizar componentes personalizados y realmente crear algunos utilizando este proveedor de opciones de producto y hacer cosas divertidas allí. Sí, hoy vamos a crear un componente personalizado para nosotros. Creo que un caso de uso interesante sería crear un componente de imagen del producto. Así que puedes ver en la documentación que hemos creado un esquema básico de una imagen del producto utilizando una etiqueta de imagen que también está integrada en Hydrogen. Pero puedes ver en la primera línea dentro del componente que estamos utilizando ese gancho useProductOptions del que hemos estado hablando tanto. Así que tenemos el contexto configurado, ahora podemos acceder a ese contexto utilizando este gancho. Y lo que vamos a extraer de ese gancho es lo que llamamos la variante seleccionada. Ese objeto de variante seleccionada, si profundizas en ese registro de la consola, verás una cosa llamada variante seleccionada. Y luego verías dentro de ese objeto que tiene una imagen. Así que eso es lo que estamos haciendo en la línea 26, profundizando en la variante seleccionada y extrayendo la imagen de allí. Y todo esto ya está configurado para nosotros porque tenemos el proveedor configurado y ya hemos consultado todos esos data en el lado del servidor. Así que no tenemos que hacer mucho más aquí además de simplemente incluir la imagen del producto. Y si estás familiarizado con el contexto de React en absoluto, sabes que tienes que envolver ese proveedor alrededor de los elementos hijos que necesitan el contexto, así que lo vamos a agregar allí, y sí, nos falta una importación para ese gancho useProductOptions. Así que en la página, de manera bastante sencilla, ahora puedes ver la imagen de la variante seleccionada que se muestra en la página.

No tuvimos que hacer nada demasiado complicado o extravagante. Y eso se debe a que el gancho useProductOptions simplemente extrae la variante seleccionada y la imagen del proveedor que ya hemos configurado anteriormente. Para hacer esto un poco más interesante, podemos usar este contexto para hacer algo más divertido.

Entonces, el propósito de este contexto es poder realizar un seguimiento de cosas, como las variantes seleccionadas. Las variantes son un concepto en las tiendas de Shopify, los productos tienen variantes, ¿verdad? Así que piensa en diferentes tamaños, diferentes colores. Porque en nuestro caso, estos snowbirds tienen diferentes tamaños y colores.

Podemos imprimir las diferentes opciones que están disponibles para nosotros en este componente que obtiene de la documentación, simplemente opciones de producto. No está haciendo nada demasiado complicado aquí. Esto es solo react básico. Nuevamente, extrayendo la variante seleccionada y la lista de variantes de ese gancho. El uso de opciones de producto, que nuevamente está configurado en el contexto para nosotros. Mapeándolo, mostrándolo en la página en un select también conocido como menú desplegable. Y la parte interesante aquí es que al cambiar el elemento seleccionado en el menú desplegable, se llama al callback de establecer la variante seleccionada. Que nuevamente proviene de ese gancho useProductOptions. Todo esto está definido por hydrogen. No tenemos que hacer nada extravagante aquí. Y pasamos la variante que coincide con el elemento seleccionado del menú desplegable. Nuevamente, para ver esto, solo necesitamos incluirlo en nuestra página en la parte superior. Nuevamente, dentro del proveedor para tener acceso a ese contexto. Y ahora puedes ver que este menú desplegable está ahí. Y tiene todas las diferentes opciones de variantes para nosotros. Y cuando cambias el elemento del menú desplegable, porque está conectado a ese mismo contexto y estamos usando ese gancho de opciones de uso para establecer la variante seleccionada, la imagen del producto en sí se actualiza automáticamente, porque todo está conectado al mismo contexto. No tuvimos que agregar ningún código adicional. Simplemente confiamos en el estado de la variante seleccionada para poder actualizar esa imagen de manera bastante dinámica.

Justo vi a alguien en un comentario preguntar si había alguna forma de no tener que hacer estas consultas GraphQL increíblemente largas. Y es gracioso que lo menciones. Porque eso es... Megan sabe exactamente, pero sé que es algo que está por venir o que ha llegado esta semana. Sí, la respuesta es que, si no es posible en este momento, pronto será posible no tener que preocuparse por estas cosas enormes. Sí. Sabemos que es un poco excesivo. Sí, definitivamente. Incluso cuando estábamos haciendo este tutorial, ayer pensé, oh, hombre, esto no es genial. Estaba hablando con el equipo y me dijeron, sí, sabemos que realmente deberíamos proporcionar algunos ejemplos de qué exactamente necesita este gancho de uso de producto, y proporcionar una consulta para eso. Porque en este momento, estamos obteniendo todo, lo cual no es necesario en absoluto para cada caso de uso. Próximamente, mejoraremos estas consultas y lo haremos un poco mejor para ustedes. Esto realmente va en contra del propósito de tener este lenguaje de consulta que te permite ser muy específico sobre lo que solicitas. Y luego simplemente decimos, sí, solo obtén todo. Se está haciendo el trabajo.

Entonces, lo último que queremos hacer antes de tomar un breve descanso de cinco minutos es utilizar otro proveedor del que aún no hemos hablado, que es el Proveedor de Carrito. Como dije al principio, hay varios conceptos que todas las tiendas de comercio electrónico tienen. Uno de ellos es un carrito, ¿verdad? Como que tienes que poder agregar cosas a un carrito y luego eventualmente pagar y hacer cosas así. Entonces vamos a usar el Proveedor de Carrito y luego vamos a agregar un botón de Agregar al Carrito. Ahora, no tenemos tiempo hoy para realmente entrar en detalles, como hacer una interfaz para ver todo en el carrito y eliminar lo que está en el carrito. Así que eso quedará como un ejercicio para ustedes. Pero vamos a usar este genial gancho Use Cart. Y pueden ir a investigar en la documentación y configurarlo. Es tan simple como mostrar variantes o hacer cualquier otra cosa. Pero vamos a agregar este botón.

Entonces podemos agregar el proveedor de carrito aquí y no necesita proveedor de carrito, no necesita nada especial. No necesita ningún argumento ni nada. Puedes cerrarlo de nuevo. Lo guardaremos y simplemente no hace nada. Y luego lo otro que queremos hacer es obtener este botón Agregar al Carrito y podemos ir aquí abajo y decir Botón Agregar al Carrito. Y simplemente lo agregaremos al carrito. Y lo cerramos. Y puedes ver que aparece aquí en otro salto de línea porque soy diseñador. Mira eso. Así que ahora podemos presionar este botón y verás que se va como... Sí. Va como... ¿Qué? Como que se retrasa. Claramente está haciendo algo. Y te prometo que está haciendo algo, pero no podemos verlo porque no estamos mostrando nada. Pero ese data está ahí y el producto se agrega al carrito. Como dije, dejaremos eso como ejercicio. Una de las cosas divertidas, esto es un completo desvío, que realmente vi fue porque hay funciones en Chrome que recuerdan a las personas si se han olvidado de finalizar un proceso de pago, es posible que veas cuando abres una nueva pestaña de Chrome en esa pantalla en blanco y dirá, hey, dejaste una tabla de snowboard en tu carrito. Y eso es porque esto se integra automáticamente no solo con Shopify, sino también con los mejores estándares para el comercio electrónico, en general, lo cual es súper genial, aunque la tabla de snowboard que estamos comprando es como un JPG extraño de una tabla de snowboard inventada. Chrome no lo sabe. Pero sí, eso es todo lo que tuvimos que hacer para agregarlo al carrito. Como dije, puedes hacer más si quieres. Ahora vamos a tomar un descanso, y creo que. Sí, creo que eso es todo lo que queremos cubrir sobre el proveedor de carrito.

Sí, así que tomaremos un descanso de unos minutos, si lo deseas durante este descanso, puedes intentar implementar una función donde el botón Agregar al Carrito se deshabilite si la variante seleccionada está agotada. Así que te hemos dado la documentación, que, por supuesto, tiene la solución de código. Pero tal vez sea un desafío no echarle un vistazo y tomar un par de minutos para intentar configurar la funcionalidad para deshabilitar ese botón Agregar al Carrito. Sí, si la cosa no estaba disponible. Sí. Y también es un buen momento para intentar ponerse al día si te has quedado atrás en algún momento, porque solo nos queda un segmento más después de volver. Así que intenta ponerte al día si tienes preguntas o inquietudes o algo así. Tendremos tiempo para preguntas al final. Pero sí, puedes explorar o tomar un descanso o lo que sea. Voy a sonarme la nariz. Así que estaré de vuelta en un momento.

Así que espero que todos estén volviendo del descanso. Como dije, hemos proporcionado la documentación. Así que la solución de código ya está ahí. Pero puedes ver que es bastante simple hacer la lógica para deshabilitar este botón del carrito. Para el propósito de esta masterclass, simplemente agregaremos otro componente a este mismo archivo en el que hemos estado trabajando. Lo llamaremos el marcado de Agregar al Carrito. Nuevamente, estamos utilizando este gancho de opciones de producto para obtener esa misma variante seleccionada. Esta es la misma que hemos estado usando en nuestros otros componentes. Y dentro de ese objeto de variante seleccionada hay un atributo llamado disponible para la venta. Así como podemos extraer la imagen de esa consulta de GraphQL con ese enorme objeto de data que estábamos viendo, también hay una bandera llamada disponible para la venta. Y luego podemos usar eso para crear una lógica para deshabilitar o no deshabilitar el botón Agregar al Carrito en función de ese campo. Así que bastante simple, nuevamente, para obtener información de ese gancho. Y eso es realmente lo que queríamos comunicar con esta masterclass, que hydrogen te proporciona muchas de estas utilidades realmente útiles y se encarga de la configuración del contexto y el seguimiento del estado, entre otras cosas, para que puedas centrarte en desarrollar las cosas que hacen que tu tienda sea única. Como nuestro gran estilo. Sí, todos querrán usar este sitio, seguro. Tienes razón, iba a comprar una tabla de snowboard en la tienda local, pero cuando vi ese sitio web blanco con la fuente Arial, pensé, oh, tienes que hacerlo.

Lo último de lo que queríamos hablar antes de terminar y responder preguntas es simplemente recordar a todos que, aunque hydrogen está obviamente muy relacionado con Shopify, no significa que no puedas hacer otras cosas. Podrías construir todo tipo de APIs personalizadas aquí. Podrías hacer, ya sabes, cualquier tipo de servicios adicionales interesantes que necesites. Así que solo quería mostrar rápidamente cómo crear tu propia API sobre hydrogen para luego hacer lo que quieras con ella. Y es súper sencillo. Lo único que tenemos que hacer es ir a nuestras rutas, agregar un nuevo archivo, lo llamaremos API dot server dot JSX. Y el código, nuevamente, está en la documentación, al igual que todo lo demás. Y simplemente podemos configurarlo para devolver un poco de JSON, y si vamos aquí, cambiamos nuestra URL. Ups. Eso no es lo que le llamé, API. Ahí lo tienes, obtuvimos JSON y puedes hacer cualquier tipo de magia normal de JavaScript o TypeScript aquí. Y sí, es muy sencillo. Una de las cosas de las que no tuvimos la oportunidad de hablar mucho y que mencionamos al principio son algunas de las opciones de almacenamiento en caché realmente avanzadas que existen en hydrogen. Puedes hacer almacenamiento en caché en diferentes niveles. No voy a mostrar el código aquí porque está en la documentación y quiero mantenerme en línea con lo que tenemos escrito, pero puedes almacenar en caché toda una solicitud. Por ejemplo, podríamos hacer que esto se almacene en caché durante un minuto o una hora o lo que sea. Pero también puedes ir a casi cualquier llamada de gancho o de consulta, y puedes almacenar en caché esas. Así que creo que se llama caché. Sí. Así que básicamente puedes almacenar en caché cualquier llamada que hagas aShopify para que sea más rápido, puedes almacenar en caché diferentes elementos de la página si quieres. Como Megan mencionó, donde estás obteniendo data de reseñas y estás obteniendo data de la tienda y todas estas cosas. Hacemos un buen trabajo para ayudarte a crear un servicio de performance y tener un control sobre cada elemento de cómo se almacenan en caché y se sirven las cosas.

Y con suerte, al final del día, tendrás un sitio web realmente de alto rendimiento porque ese es un gran objetivo de Hydrogen, permitir a los comerciantes que están muy enfocados en la personalización y el rendimiento y en que cada milisegundo cuenta, tener el máximo control posible para construir la tienda en línea que deseen.

Así que con eso, podemos abrirlo a preguntas. ¿Hay alguna otra nota final que quieras mencionar, Megan?

Lo único antes de pasar a las preguntas es que nos encantaría si todos los que asistieron a la masterclass hoy quisieran seguir con un desafío de código. Implementamos el botón Agregar al Carrito y actualizamos parte de la lógica para mostrarlo o habilitarlo o no habilitarlo. Pero no tuvimos la oportunidad en esta masterclass de crear un elemento de interfaz de usuario que muestre el carrito. Para aquellos que están en esta masterclass hoy, si quieren llevarse eso a casa, construyan algún componente del cliente o alguna interfaz de usuario para mostrar los artículos que están en el carrito, nos encantaría verlo. Así que si nos sigues en Twitter en Shopify devs y luego usas el hashtag Shopify code intro, es posible que recibas noticias nuestras una vez que hayas completado ese desafío adicional. Pero eso es todo. Listos para las preguntas. Y una última nota, volveré a las diapositivas solo para cerrar esto. Aquí está el hashtag nuevamente. También está en el documento. Si quieres continuar tu viaje con hydrogen, aquí están los comandos básicos que puedes usar. Puedes ir a create, React, y seguir adelante para crear tu propia aplicación de hydrogen, o puedes ir a hydrogen.new, que ofrece una plantilla más completa que la que tenemos en el tutorial. Esta tiene muchas opciones diferentes, diferentes productos, ya sabes, es una demostración muy completa en comparación con la nuestra, que es lo mínimo posible. Así que eso está en hydrogen.new si quieres probarlo o crear algo localmente, lo que prefieras, pero sí, cualquier pregunta, siéntete libre de hacerla en el chat. Siéntete libre de hablar si quieres hablar, lo que sea que sientas correcto en tu corazón. Estamos encantados de hacer lo mejor que podamos. Si nadie hace ninguna pregunta, estaré triste. Necesitamos al menos una pregunta.

Sí. Tengo una pregunta. Bien. ¿hydrogen proporciona alguna función de utilidad sin hooks para obtener la API para que podamos usar hydrogen en un framework como NextJS para usar la función de obtención en getStaticProps o en la función de carga de datos de Remix?

Excelente pregunta, Megan. ¿Sabes creo que porque dependemos de esa configuración de hydrogen para que apunte a un dominio específico, podría ser posible incorporar esto en un framework diferente. Aún no he visto a nadie intentarlo. Nuevamente, esto está en vista previa para desarrolladores. Entonces, quién sabe, tal vez en el futuro permitamos la capacidad de usar esto de otras formas, pero sí, no estoy seguro si he visto eso o si es posible hasta ahora. Realmente estamos confiando en el ecosistema de react, especialmente porque react 18 es el que admite el renderizado en el lado del servidor. También vale la pena mencionar que, como dijo Megan, estamos en vista previa para desarrolladores. Todo esto sigue siendo un proyecto temprano. Entonces, si ves cosas importantes para ti que parecen estar fuera de alineación con lo que estamos haciendo, como algo en Github, contáctanos en Twitter porque ese feedback definitivamente puede influir en el producto. Totalmente. Sí. De nada. Sí, gracias. Gracias por venir. ¿Alguna otra pregunta o inquietud? ¿Qué pueden hacer las personas con el resultado? Pueden convertirse en millonarios. Pueden vender, pueden tener éxito. No, quiero decir, creo que alguien preguntó qué pueden hacer las personas con el resultado. Y la respuesta es sí, puedes tomar tu aplicación, puedes alojarla y llevarla tan lejos como quieras. Esa es una de las cosas realmente geniales de hydrogen en comparación con la oferta normal de Shopify, que puede ser un poco limitante a medida que tu empresa crece o si estás trabajando para alguien como Kylie Cosmetics o alguna tienda grande. Puedes escalar esto para que sea enorme. Y ese es el objetivo de hydrogen, que no hay un límite de hasta dónde puede llegar.

Y es algo que a medida que el framework madura, queremos recomendar a nuestros comerciantes más grandes y exigentes. Así que sí, realmente puedes hacer mucho. Sí, creo que solo para agregar a eso, algunos de los comentarios que hemos escuchado en general con el ecosistema de Shopify y definitivamente cuando Shopify comenzó, estaba destinado a casos de uso más pequeños, como emprendedores o tiendas familiares, ¿verdad? Y eso está bien, es un sitio realmente genial. La gente encuentra fácil comenzar, ya sabes, cosas así, pero estábamos luchando un poco con casos de uso más grandes, ¿verdad? Incluso para b2b o tiendas como Kylie Cosmetics que tienen muchas ventas y no necesitan manejar mucho tráfico. Ahí es donde encaja hydrogen en el ecosistema. Convertirse en un desarrollador de hydrogen abre la puerta para alejarse del desarrollo de tipo familiar y trabajar en tiendas y clientes más grandes y complicados que necesitan más personalización.

Tengo otra pregunta. Hubo otro taller sobre Shopify hace tres días. Se llamaba. No tuve la oportunidad de asistir, pero se trataba de construir la aplicación de Shopify con react y node. ¿Puedes explicar cuál es la diferencia entre esta forma en que explican el hydrogen? Sí, entonces hydrogen es como mencioné un caso de uso completamente diferente. Si estuvieras construyendo una tienda hydrogen, usarías Shopify como backend y crearías tu propia interfaz de usuario. Lo siento, cuando digo backend me refiero a que usarías Shopify como tu fuente de verdad, tu database, configurarías tus productos allí en la interfaz de usuario y todo eso, y accederías a través de las APIs como hemos estado hablando hoy en nuestro taller de hydrogen. Mientras que a principios de esta semana en el taller de node, que también dirigí, se trata de si estás utilizando Shopify de principio a fin. Así que si estás en el caso de uso de, ya sabes, tal vez una tienda de emprendedores o una tienda local así. Todavía hay puntos de extensión que Shopify proporciona dentro del ecosistema de Shopify. Si lo estás utilizando en el backend y en el frontend, permitimos que las aplicaciones puedan construir en ese ecosistema. Así que en lugar de crear un nuevo frontend completo que tendrías que alojar y con el que los clientes interactuarían como lo harías con hydrogen, construir una aplicación sería más bien en el backend de Shopify para el propietario real de la tienda. Los llamamos los comerciantes. Tienen sus propias necesidades específicas que nosotros en Shopify no construimos en nuestro backend, que es donde entran los desarrolladores de aplicaciones.

Adelante. Entonces, tal vez un caso de uso es cuando necesitas un tipo especial de flujo de cumplimiento. Un desarrollador de aplicaciones puede ingresar al backend de Shopify y crear una aplicación de cumplimiento para personalizar el flujo de cumplimiento de un comerciante y luego integrarlo en Shopify en el backend. Por lo tanto, puedes usar herramientas similares como Node y React. Tenemos una biblioteca de componentes llamada Polaris que está construida con React. Pero donde viven esas aplicaciones es muy diferente. Entonces, estás manejando la parte trasera del negocio, ya sabes, tal vez más los aspectos técnicos del negocio. Ahí es donde entra en juego la aplicación de la que hablamos a principios de esta semana. Mientras que Hydrogen se enfoca mucho más en la persona que realiza la compra, ¿verdad? Construyendo el frontend para el backend de Shopify. ¿Tiene sentido? Sí. Gracias.

También vale la pena mencionar que si eres una persona con mentalidad emprendedora que no tiene una tienda de comercio electrónico, hay muchas oportunidades interesantes para construir aplicaciones para Shopify, al igual que en la App Store de tu iPhone u otras tiendas de aplicaciones. Shopify tiene un ecosistema de desarrolladores externos que construyen y venden herramientas y contribuyen con adiciones interesantes a nuestro ecosistema a través de la Tienda de Aplicaciones de Shopify. No sé el número exacto, pero hay cientos de millones de dólares de ingresos que se pagan a terceros que construyen aplicaciones que luego utilizan los comerciantes. Es un espacio realmente interesante y el taller de Megan explora eso, y también tenemos, supongo que nunca has oído hablar del ecosistema de Shopify, pero el espacio de temas también es muy interesante. Hay todo un ecosistema de personas que construyen y venden temas, al igual que con HTML, utilizamos un lenguaje de plantillas personalizado llamado Liquid, pero crean temas y los venden a personas que crean tiendas Shopify, y hay una serie de negocios en torno a eso. Así que hay muchas formas interesantes de interactuar con el ecosistema de comercio electrónico de Shopify. Una aplicación es como un complemento básicamente. Sí. De acuerdo. Gracias.

Es mi gato. Chunky. Pregunta en el chat, Polaris se centra principalmente en las aplicaciones de Shopify. Sí. Entonces, Polaris es un sistema de diseño para aplicaciones de Shopify. No se utiliza Polaris para mostrar nada a los clientes que realizan compras. Las personas que interactúan con Polaris son los comerciantes en la parte trasera, dentro de tu página de administración de Shopify. Polaris no está destinado a ser utilizado en el frontend para las personas que intentan comprar los productos. Sí, y por lo que vale, tenemos dos implementaciones de Polaris que utilizamos internamente, todo el panel de control de Shopify está construido con ellas, por lo que si utilizas esos componentes en tu aplicación o extensión, se sentirán completamente naturales en nuestro panel de control y en los paneles de control en general. Y no tienes que ser un diseñador, lo cual como ingeniero aprecio, como puedes ver en nuestra demostración de hoy, no somos los que más nos preocupamos por el diseño. ¿Se pueden usar los hooks y componentes de Hydrogen en Next.js? Creo que la respuesta es no o no lo sabemos. Sí, creo que esa es la pregunta de la que estábamos hablando al principio. Mi respuesta es que, en realidad, no lo sé, no he visto a nadie hacer esto. Mi intuición es que probablemente no, debido a que depende de algunas de las cosas que vienen con React. Pero tal vez también podrías incluir Next.js. No lo sé. Simplemente no lo he visto. Lo siento, quiero decir que es de código abierto. Todo es posible. No creo que la intención principal sea que toda tu aplicación esté construida con Hydrogen, pero como dijimos antes, Hydrogen todavía está en una etapa temprana. ¿Las imágenes están optimizadas como las imágenes de Gatsby o Next.js? Esa es una excelente pregunta. No sé, ¿tú sabes? No, déjame ver porque creo que sí y creo que por eso, cuando renderizamos una imagen, usamos la etiqueta de imagen de Hydrogen en lugar de la etiqueta de imagen normal de HTML. Así que sé que los datos que se obtienen de la imagen son muy interesantes y mucho más complicados de lo que uno podría imaginar. Así que me gustaría imprimir esto y ver porque si vemos diferentes tamaños de imagen y cosas así, eso nos dará una buena pista de que las imágenes están optimizadas. Así que déjame ir y decir, producto/snowboard. Y bajamos aquí. Sí. Si miras este objeto de imagen, parece que solo estamos mostrando una versión de tamaño único. Así que en este caso, no parece que estemos optimizando mucho para eso, pero podría haber otras cosas aquí con las que no estoy familiarizado. Diría que me sorprendería si no hiciéramos algún nivel de optimización, pero no lo veo de inmediato aquí.

No lo sé. Sí, revisé rápidamente la documentación. No dice nada específico. Dice que se sirve desde el CDN de Shopify. No lo sé. No obtuve detalles adicionales de este documento sobre lo que exactamente significa eso. Sí, tal vez sea otra cosa en la lista. La naturaleza de un framework previo al lanzamiento, pero obviamente las imágenes son una oportunidad obvia para la optimización. Entonces, si es un framework diseñado para ser completamente renderizado Un framework diseñado para ser rápido. Estoy seguro de que eso está en la hoja de ruta, si aún no se está implementando.

¿Algo más? Sí, Solo el uso de hydrogen hace que sea diferente en cuanto a las tarifas como un emprendedor, como un vendedor, que usar el conjunto completo de Shopify. Sí, esa es una gran pregunta. No creo que haga ninguna diferencia en las tarifas, la única situación que podría ser diferente es, creo Shopify.com. Creo que hay un plan que es solo de API. ¿Sabes de lo que estoy hablando, Megan? Shopify Lite. No estoy seguro si Shopify Lite tiene acceso a la API. Supongo que sí, pero si hubiera una gran propuesta de valor aquí, sería Sería poder usar Shopify Lite, que es la versión de nuestro plan que normalmente solo se usa para agregar un único botón de compra a tu sitio web. Pero no estoy cien por ciento seguro. Creo que como desarrollador, no hace ninguna diferencia en cuanto a las tarifas o, ya sabes, lo que Shopify recortaría, creo que como comerciante hay una diferencia de precios si optas por una tienda personalizada en lugar de la plataforma de Shopify, ya sabes, la plataforma de arrastrar y soltar que está disponible de inmediato. Creo que esa es la respuesta más reciente nuevamente, las cosas están cambiando rápidamente. Me resulta difícil mantenerme al día con dónde aterrizamos solo con algunas de estas cosas. Pero definitivamente estos son detalles que se resolverán para cuando lleguemos al lanzamiento global, seguro. Vale la pena mencionar. No creo que te cobren por las solicitudes de API en absoluto. No creo que haya una cuota o algo así. Y hasta donde sé, no está escalonado de ninguna manera. Si tienes una tienda de Shopify, tienes acceso a la API. Sí. Creo que eso es cierto. Obviamente, está limitado, pero si haces demasiadas solicitudes al mismo tiempo, te costará o te bloqueará. Pero sí. ¿Hay un cronograma para el lanzamiento? No he escuchado cuál es el plazo. Um. Sí, no lo sé. Sé que anunciamos esto el año pasado. Unite con eso o algo así y la idea era en algún momento de este año, pero no tengo un tiempo más específico. Te diré que hydrogen es uno de los proyectos más importantes para shopify. Es una prioridad. Con un montón de ingeniería detrás. Entonces, aunque no sepamos el cronograma, puedo decirte eso. Es un esfuerzo enorme en el que estamos trabajando arduamente. También aprovecharé este momento para promocionar nuestro Discord de shopify. Si estás realmente interesado en hydrogen y quieres estar al tanto de todas las últimas y mejores versiones, etc. Se lanzan constantemente. Quiero decir, ayer mismo tuvieron un lanzamiento bastante importante. Si te unes a nuestro Discord de shopify, hay un canal llamado tiendas personalizadas. Y hay un feed de todas las últimas versiones de hydrogen con notas de lanzamiento y creo que lo mantienen actualizado con, ya sabes, más detalles como esto es lo que haremos a continuación y esto es lo que cómo nos sentimos acerca de un lanzamiento. No estoy completamente al día con todo lo que sucede en ese canal porque es un desarrollo tan activo.

De acuerdo, a todos. Gracias por el tiempo hoy. Sí. Gracias. Gracias por venir, hacer buenas preguntas y prestar atención.