Construyendo una Aplicación de Shopify con React & Node

♪​♪ Creo que vamos a empezar. Es genial ver a tantas personas presentes de todo el mundo. Saludos a Copenhague, Berlín, India, Polonia, Portugal, EE.UU., Alemania, Bélgica, Reino Unido. República Checa, Polonia de nuevo, Bielorrusia. Es increíble ver a tanta gente. Buenos días, buenas tardes, dondequiera que estén. Muchas gracias por unirse a nosotros hoy. Y bienvenidos a la masterclass previa a la conferencia de hoy de React, para construir una aplicación de Shopify con React y Node, presentada por Jennifer Grey y Hanna Chen. Ambas son desarrolladoras front-end aquí en Shopify.

Jennifer y Hanna tienen años de experiencia trabajando en herramientas y recursos para desarrolladores en Shopify, por lo que tendrán muchos conocimientos y valiosos consejos para compartir con la comunidad de desarrolladores aquí. Así que durante los próximos 90 minutos, estaremos viendo cómo crear una aplicación básica en Shopify, cómo usar los componentes de React que Shopify ha diseñado para que los utilicen en sus propios proyectos de aplicaciones, así como crear funcionalidades para que estos componentes puedan acceder a los datos de la tienda.

Así que solo unas pocas notas de organización antes de empezar. Si tienen preguntas durante la masterclass, si se quedan atascados en algo, por favor utilicen la función de preguntas y respuestas y podremos intentar solucionar cualquier problema que tengan mientras siguen la masterclass. Estaré monitoreando estas preguntas así como el chat aquí y el canal de Discord. Y esperamos tener también algo de tiempo al final de la masterclass para una rápida sesión de preguntas y respuestas. Además, esta masterclass se grabará y la grabación estará disponible más tarde hoy. Todos los asistentes y registrados deberían recibir un enlace que les permitirá acceder a la grabación. Con eso, permítanme pasarles a Jennifer y Hana para mostrarnos cómo construir la aplicación de Shopify con React y Node. Muchas gracias, Liam. Y bienvenidos, todos.

Como mencionó Liam, mi nombre es Jennifer. Soy amiga y desarrolladora en Shopify. Trabajo en el equipo de docs y bibliotecas de API en Toronto, Canadá. Y nuestro objetivo es facilitar a los desarrolladores la construcción en la plataforma de Shopify creando y curando recursos como documentation, herramientas de software y diferentes bibliotecas.

Específicamente, mi principal enfoque en el equipo es la user experience en Shopify.dev, que es nuestro hogar para la documentation de desarrolladores en toda la plataforma de Shopify. Y hola a todos. Mi nombre es Hannah. Y también soy una desarrolladora frontend en Shopify. Trabajo en un equipo dedicado a proporcionar aplicaciones incrustadas con las capacidades que permitirán una gran experiencia para el comerciante. He pasado mi tiempo en Shopify en AppBridge, que es el cliente de JavaScript que alimenta las aplicaciones incrustadas.

Entonces, Liam brevemente repasó lo que cubriremos o lo que haremos hoy, pero aquí está solo un poco más in-depth agenda de la masterclass. Entonces, hoy vamos a cubrir cómo construir una aplicación utilizando las últimas herramientas y tecnologías de Shopify que se integrará sin problemas en el administrador de la tienda Shopify. Entonces, esto incluirá cómo se ve construir una aplicación para el ecosystem de Shopify, utilizando la CLI de la aplicación Shopify para crear, authenticate e instalar tu aplicación en el panel de control del socio, aprovechando el poder de Polaris para una experiencia integrada de UI y utilizando AppBridge para la comunicación entre el marco administrativo y tu aplicación.

Entonces, ¿qué es exactamente una aplicación Shopify? Una aplicación Shopify extiende la funcionalidad de lo que un comerciante recibe directamente de la caja cuando configuran una tienda con Shopify. Entonces, imagina cuando alguien compra un nuevo teléfono, ya debería venir con las capacidades básicas que la mayoría de los usuarios ya necesitarían, como mensajería, llamadas, calendarios, etc. A partir de ahí, cada propietario de dispositivo puede personalizar y extender estas capacidades de sus teléfonos para satisfacer sus necesidades específicas instalando aplicaciones adicionales. Entonces, Shopify ha adoptado un enfoque bastante similar en cuanto a lo que un comerciante recibirá automáticamente directamente de la caja. Así que hemos incluido todas las características básicas que se requieren para la mayoría de los comerciantes para configurar una tienda en línea, pero sabemos que cada tienda es única y queremos que los comerciantes puedan extender y agregar las características a su tienda que ayudarán a prosperar a sus negocios únicos. Y ahí es exactamente donde entran las aplicaciones de Shopify. Entonces, Shopify tiene aplicaciones de primera y tercera parte y a medida que la empresa crece, ha construido una plataforma robusta para construir aplicaciones ya que ha encontrado que las aplicaciones proporcionan una forma de scale rápidamente y proporcionar esta personalización necesaria para la experiencia del comerciante.

Muy bien, entonces voy a profundizar en lo que deberíamos hacer antes de construir una aplicación. A veces olvidamos que hay un paso más. Entonces, antes de construir una aplicación, tendrás que averiguar qué quieres construir. Ya sea directamente de los comerciantes o de una tendencia minorista emergente que estás notando. Tenemos una variedad de lugares de donde los desarrolladores de aplicaciones pueden encontrar inspiration para su aplicación Shopify. Entonces, voy a compartir tres formas en que los desarrolladores de aplicaciones pueden encontrar inspiration para el próximo proyecto. La primera es encontrar una industria que resuelva un punto de dolor para ellos. Nuestros comerciantes de Shopify venden en una serie de industrias. Entonces, esto podría ser hogar y jardín, alimentos y bebidas, y cada industria enfrenta su propio conjunto de regulaciones, prácticas y puntos de dolor. Como desarrollador, puedes enfocarte en una industria y aprender sobre las frustraciones con las que lidian estos comerciantes, encontrando así un problema para resolver. La segunda forma es si exploras mercados internacionales y llenas los vacíos de productos. Con los comerciantes uniéndose rápidamente a Shopify y realizando ventas en países como Japón, México y Alemania, Shopify está creciendo internacionalmente. Estos mercados internacionales vienen con sus propias variables que Shopify a veces simplemente no puede resolver de la caja. Entonces, algunos ejemplos aquí son, digamos, preferencias del comprador, opciones de envío, calculadoras de impuestos, hay muchas leyes fiscales en todo el mundo que simplemente no es posible para Shopify cubrir de la caja. Y aquí es donde tú, como desarrollador de aplicaciones, puedes jugar un papel enorme. Al hacer una investigación de mercado en estos mercados en crecimiento, los desarrolladores pueden ver qué problemas regionales existen y resolverlos a través de aplicaciones. Finalmente, los insights de los comerciantes y los comentarios de las comunidades de Shopify. Entonces, las comunidades de Shopify, como nuestros foros, grupos de Facebook, meetups, todos proporcionan insights directos sobre lo que los comerciantes están experimentando y buscando. Entonces, a través de estas comunidades en línea y fuera de línea, los comerciantes discuten abiertamente su negocio, su negocio, y lo que buscan lograr, así como las características que desean proporcionar. Y también, las herramientas que desean ver. Entonces, grandes recursos si estás buscando inspiration.

Ahora, digamos que has navegado por los foros en busca de problemas que tienen los comerciantes, o has identificado una necesidad en la community más grande. Y quieres construir una aplicación para poner en la Tienda de Aplicaciones de Shopify. Eso fue genial. De hecho, estás listo para sumergirte. A continuación, le devolveré esto a Jen para que te guíe a través de las herramientas que puedes usar para ayudarte a construir esta masterclass.

Perfecto. Entonces, Shopify ha tomado muchas de las bibliotecas y patterns que usamos internamente, y los hemos hecho públicos y de código abierto para ayudar a socios como ustedes a hacer aplicaciones. Entonces, hoy les mostraremos cómo construir una aplicación incrustada pública y mostrar estas herramientas específicas que hemos puesto a su disposición con la esperanza de que les facilitará hacer las cosas. Entonces, al final de la masterclass, tendremos una aplicación incrustada que comienza con lo que llamamos un componente de estado vacío.

Así que esa es la imagen que puedes ver en el extremo izquierdo. Así que este componente incluirá un botón. Y cuando hagamos clic en el botón, esto abrirá un selector de recursos. Esa es la imagen del medio que nos permitirá seleccionar una serie de productos de nuestra tienda de desarrollo. Luego tomaremos los IDs de los productos seleccionados para que puedas usar esta información para hacer algo como escribir una consulta a la Shopify GraphQL admin API, pero solo para el bien de esta masterclass y el tiempo, terminaremos mostrando esta información en un componente de lista, que puedes ver a la derecha.

Así que uno de los requisitos para esta masterclass es tener una cuenta de socio de Shopify gratuita configurada. Así que si aún no lo has hecho, por favor ve y hazlo justo ahora en shopify.com slash partners. Así que vamos, esta es mi cuenta de socio de Shopify aquí. Y tu panel de control de socio es el mejor lugar para mantener sincronizado con las aplicaciones, temas y negocios que estás construyendo con Shopify. Así que puedes crear cualquier número de aplicaciones de Shopify, que es lo que estaremos haciendo. Puedes crear cualquier número de aplicaciones de Shopify como dije, y en nuestro caso, la Shopify app CLI se conectará a tu cuenta y va a construir nuestra aplicación para nosotros o crear nuestra aplicación para nosotros. Y como socio de Shopify, también puedes crear un número ilimitado de tiendas de desarrollo. Una tienda de desarrollo es una cuenta de Shopify gratuita que viene con algunas limitaciones. Así que puedes usar una tienda de desarrollo como un sitio de cartera para tu negocio o para probar cualquier tema o aplicación que crees, que es lo que estaremos haciendo o para configurar una cuenta de Shopify para un cliente. Así que si aún no tienes una tienda de desarrollo, ve y crea una ahora con el botón añadir tienda, elige un tipo de tienda, querrás tienda de desarrollo, y si ya has creado una tienda, no necesitas preocuparte por esto. Solo toma unos minutos para llenar los campos requeridos y ¿qué harás con esta tienda de desarrollo? Queremos probar una aplicación o un tema. Así que ya tengo algunas tiendas de desarrollo. Estaré trabajando en esta en la nueva tienda de desarrollo de Jennifer. Y después de eso, una vez que tengas tu cuenta de socio con tu tienda de desarrollo, estamos listos para empezar a trabajar con la Shopify app CLI. Así que la Shopify app CLI es una herramienta de interfaz de línea de comandos construida para los desarrolladores de aplicaciones de Shopify. Y nos permite crear rápidamente una aplicación de Shopify usando ya sea Ruby on Rails o Node.js y React. Se va a integrar directamente con nuestra cuenta de socio de Shopify, que ya hemos creado, así como manejar la authentication al instalar tu aplicación en una tienda de desarrollo. Así que también puede automatizar tareas comunes de desarrollo como poblar ejemplo data en una tienda de desarrollo como productos o pedidos. Así que en general, es una herramienta muy útil para realmente speed up y simplificar tu proceso de desarrollo de aplicaciones automatizando muchas de estas tareas de desarrollo que consumen mucho tiempo. Así que echemos un vistazo a la instalación. Si aún no has instalado la Shopify apps CLI, por favor ve y hazlo. Hay algunos requisitos, uno siendo una cuenta de socio de Shopify, que ya hemos configurado, uno siendo una tienda de desarrollo, de la cual también hemos hablado, y uno siendo Ruby, al menos versión 2.5.1 o superior en tu computadora. Y una vez que tienes la CLI configurada, daré a todos un momento para hacer eso. Y mientras tanto, hablaremos de algunos de los comandos principales para la CLI. Así que uno de ellos es Shopify help. Y esto va a listar los comandos disponibles y describir lo que hacen. Así que voy a intentar eso ahora mismo. Voy a ir a mi terminal y escribiré Shopify help. Y aquí lo tenemos, enumera cuatro comandos principales diferentes. Así que Shopify connect, para conectar o reconectar un proyecto existente a una organización de socios de Shopify. Create, para crear un nuevo proyecto y puedes crear un proyecto de node o rails. Logout, para salir de la organización de socios actualmente autenticada. Y version, para imprimir el número de versión. Así que te mostraré qué versión estoy usando. Así que escribiré Shopify version. Así que estoy usando la versión 1.8.0. Así que esta es la versión con la que estaré trabajando. Si estás usando una que es un poco más baja que esta, está bien, puede haber algunas diferencias en cómo se ve el armazón de la aplicación, pero no afectará lo que realmente estamos reconstruyendo hoy. Pero 1.8 es la versión que estamos usando. Muy bien. Solo voy a saltar por un segundo. ¿Podrías hacer zoom un poco en el- ¿Un poco más? Sí, en el terminal y en el navegador también. Creo que el navegador es un poco difícil de ver también en los docs. Navegador. Sí.

Y luego tal vez un poco en el terminal también. Sí, en mi terminal. Salud.

Muy bien, espero que eso esté bien para todos. Muy bien. Entonces, una vez que tenga su CLI instalada, lista para usar, vamos a crear nuestra aplicación. Así que voy a escribir Shopify, ups, crear nodo, presionar enter, y ahora se nos pide que introduzcamos el nombre de nuestra aplicación. Puedes llamar a tu aplicación como quieras dentro de un cierto límite de caracteres. Llamaré a mi aplicación. Entonces, el tipo de aplicación que estamos construyendo, estamos construyendo algo así como una caja de suscripción donde puedes elegir una serie de productos para añadir a una caja para tus usuarios. Así que la llamaré caja de suscripción. De nuevo, puedes nombrarla como quieras.

A continuación, se nos pregunta qué tipo de aplicación estamos construyendo, ya sea pública o personalizada. Una aplicación pública puede ser instalada por muchos comerciantes desde la tienda de aplicaciones de Shopify. Y necesita pasar por un proceso de revisión antes de que pueda ser listada. Este es el tipo de aplicación que estaremos creando hoy. Una aplicación personalizada está adaptada a un solo comerciante. No puede ser vendida a través de la tienda de aplicaciones y por lo tanto no necesita pasar por un proceso de revisión. Así que simplemente haré clic en Enter en público y me preguntan, o me han identificado como un empleado de Shopify. La herramienta CLI, la usamos internamente para crear aplicaciones de primera parte. Probablemente no verás este aviso a menos que tú mismo seas un empleado de Shopify. Así que ahora simplemente me está preguntando si estoy trabajando en una aplicación de primera parte. No lo estoy, así que haré clic en No.

Y se requiere autenticación. Inicie sesión en mi URL con las credenciales de su cuenta de socio de Shopify para continuar. Así que en este punto también se te puede preguntar si tienes varias cuentas de socios para iniciar sesión. Pero si ves ese enlace, simplemente haz clic en él y deberías ser dirigido a una pantalla de autenticación y se ha autenticado con éxito, así que ahora puedes seguir adelante y cerrar tu página. Perfecto, así que volveré a mi terminal. Oh, aquí estamos. Ahora se me pide que seleccione mi organización de socios. Tengo varias. Así que simplemente haré clic en la primera. Y si tienes varias tiendas de desarrollo también, lo cual yo tengo, simplemente tendrás que seguir adelante y elegir a qué tienda quieres instalar tu aplicación. Así que voy a instalar la mía en la nueva tienda de desarrollo de Jennifer. Y solo tomará unos momentos aquí para clonar e instalar cualquier dependencia. Así que este sería un buen momento para que cualquiera se ponga al día o haga cualquier pregunta que tenga mientras esto se configura.

Muy bien, parece que todo está configurado. Así que voy a seguir adelante a menos que Liam haya alguna pregunta. ¿Quieres que responda? Perfecto. Rado estaba preguntando específicamente, ¿estamos reconstruyendo una aplicación para la tienda de aplicaciones de Shopify? Así que sí, eso sería un sí. Sí, así que en realidad no llegaremos a un producto terminado donde estés listo para configurar para una revisión. Pero en la etapa final, una vez que tengas tu aplicación completamente desarrollada, si vas a la administración de tu socio en la página de configuración de tu aplicación, que en realidad te mostraré ahora mismo. Así que aquí tenemos nuestra aplicación fue creada en nuestro panel de socios. Así que hay un enlace aquí que puedes copiar y pegar en tu navegador o hacer clic en él. Y esto nos mostrará nuestra configuración de la aplicación dentro del panel de socios. Y aquí puedes ver esta tarjeta que dice, Prepárate para la producción, crea una lista. Esto es lo que harías una vez que estés listo para que tu aplicación vaya a la tienda de aplicaciones y pase por el proceso de revisión. Pero por ahora, esto simplemente nos da una visión general de nuestra aplicación. Así que aquí tenemos nuestra clave API y nuestra clave secreta API. Necesitaremos usar estas en nuestra aplicación, pero afortunadamente la CLI maneja toda esta información por nosotros, así que en realidad no necesitamos tocar nada aquí en este momento.

Y si vuelves a la página principal de tus aplicaciones, haré zoom aquí, puedes ver tu aplicación listada en la parte superior aquí. Así que tengo mi aplicación de caja de suscripción. ¡Perfecto! Entonces, volvamos a nuestra terminal y veamos qué sigue. Ahora podemos cambiar los directorios a la carpeta de nuestro nuevo proyecto y ejecutar shopify serve para iniciar un servidor local. Así que hagamos eso, simplemente haré cd en mi carpeta de caja de suscripción. Y ejecutemos shopify serve. Y si esta es la primera vez que utilizas tu tienda de desarrollo o no has instalado ninguna aplicación antes, se te preguntará si quieres convertir a tu tienda de desarrollo o a una tienda de desarrollo. Hacer esto te permitirá instalar tu aplicación pero la tienda se convertirá en transferencia deshabilitada. Así que simplemente va a deshabilitar la transferencia a tu tienda. Esto significa que si estás construyendo una tienda para un cliente, no podrás hacer eso, pero vamos a poder hacer eso. Pero solo estamos utilizando esto para fines de testing de la aplicación. No vamos a construir realmente esta tienda como una tienda de producción. Así que simplemente voy a hacer clic en sí para desactivar las capacidades de transferencia. Y ahora está creando un túnel ngrok. Así que la Shopify CLI utiliza ngrok para crear un túnel seguro desde el internet público hasta tu aplicación de desarrollo local. Así que el túnel se agotará en unas dos horas. Si te registras para una cuenta gratuita de ngrok, durará unas ocho horas. También puedes registrarte para una cuenta de pago, que durará aún más tiempo. Estamos bien con esta línea de tiempo de dos horas. Y también puedes reiniciar un nuevo túnel con la CLI también, si necesitas hacerlo.

Y a continuación, se nos pregunta si queremos actualizar nuestra URL de aplicación. Queremos hacer clic en sí. Queremos que se actualice a nuestra URL de ngrok. Y simplemente esperaré a que todo se cargue.

Perfecto. Así que ya estamos listos. Y justo más cerca del medio de tu terminal, o un poco más arriba, tenemos un enlace que dice instalar y empezar a usar tu aplicación. Abre esta URL ahora. Así que de nuevo, copia y pega esta URL en tu navegador o haz clic desde tu terminal. Y simplemente seremos redirigidos a nuestra aplicación. Y esta es la pantalla de instalación. Así que ahora estamos dentro de nuestro administrador de la Tienda de Desarrollo. Y simplemente se nos pregunta desde nuestra tienda si estamos de acuerdo con estos ámbitos de acceso que nuestra aplicación podrá acceder. Y si estamos de acuerdo con eso, podemos seguir adelante e instalar la aplicación. Y una vez que la hayamos instalado, podemos seguir adelante e instalar nuestra aplicación no listada.

Y lo que es genial de la CLI es que el proceso de authentication se maneja por nosotros. Recuerdo cuando me uní a Shopify, configurar todo el andamiaje inicial solo para llegar a Hello World. Todo era manual. Y era un proceso muy consumidor de tiempo. Para cualquiera que sea completamente nuevo en la construcción de una aplicación de Shopify, sé que no parece mucho. Solo obtendremos un pequeño Hello World aquí. Pero si conoces la experiencia previa, tomó un par de horas solo para llegar a esta fase y pasar por el proceso de authentication manualmente. Esto es un gran ahorro de tiempo. Y simplemente se está cargando y deberíamos ver, aquí estamos, aplicación de Shopify con Node y React, esto es lo que la CLI escupió para nosotros.

Y te puedes estar preguntando por qué exactamente queremos construir una aplicación incrustada dentro del administrador de Shopify en lugar de simplemente tener una aplicación independiente. Esto se debe a que al incrustar tu aplicación dentro del administrador de Shopify, puedes crear una mejor user experience que es familiar para los comerciantes de Shopify. Y esto hará que tu aplicación sea más fácil de usar. También te ayuda a asegurar que esta experiencia sea consistente sin importar dónde esté visitando un comerciante. Si tienes un cliente que ya usó Shopify, en realidad obtienes la mejor experiencia ya sea en la web o en la mobile app de Shopify. Y una user experience familiar puede construir una relación de confianza entre tu aplicación y los comerciantes, haciéndolos más propensos a recomendar tu aplicación a otros.

Así que volvamos aquí. Y una cosa que tendremos que hacer al construir nuestra aplicación, queremos poder listar productos. Así que si estás en tu administrador de tienda, si haces clic en este enlace de productos aquí, en nuestra página de productos, podemos ver que en realidad no tenemos ningún producto. Así que queremos añadir solo algunos productos de muestra básicos para usar y probar en nuestra aplicación. Y podemos hacer esto usando la CLI. Así que volvamos a nuestra terminal, simplemente detén tu servidor, y podemos usar el comando de población de Shopify. Así que escribe Shopify populate y puedes poblar algunas cosas diferentes. Podemos poblar productos y clientes o pedidos. Así que queremos poblar algunos productos. Así que, Shopify populate products. Haré clic en enter y se requiere authentication de nuevo. Así que simplemente seguiré adelante y haré clic en ese enlace. Me he autenticado con éxito, y ahora si vuelvo a mi terminal, puedo ver que se han añadido cinco productos a mi tienda. Así que volvamos a nuestro administrador, refresquemos nuestra página, y perfecto. Tenemos cinco nuevos productos añadidos a nuestra tienda de desarrollo. Así que tenemos nuestros productos, tenemos nuestra aplicación configurada. Abramos nuestra aplicación en nuestro editor de texto y echemos un vistazo a los archivos que se crearon con la CLI. Así que simplemente abriré mi proyecto. Tu proyecto habría sido creado en cualquier subdirectorio en el que estuvieras trabajando en tu terminal. Así que abre esto, última actualización.

Entonces veamos lo que tenemos. Primero que nada tenemos este archivo .env. Este es el archivo donde guardaremos nuestra clave API de Shopify y nuestro secreto API de Shopify. Esto es lo que vimos en el Shopify o en nuestro panel de socios. La CLI ya ha añadido esto para nosotros, lo cual es genial. Y solo queremos mantener esta información aquí porque no queremos exponerla públicamente.

A continuación, echaremos un vistazo en esta carpeta de servidores aquí. En realidad no tocaremos nada en estos archivos, pero te daré una breve descripción general de lo que puedes encontrar aquí que la CLI ha configurado para nosotros. Así que en este archivo server.js, podemos ver que se importa este next de Next.js. Así que usamos Next.js que es un framework para configurar aplicaciones basadas en react, y se encargará de algunas cosas que normalmente tendrías que hacer en una aplicación de React, como la configuración de webpack y el reemplazo de módulos en caliente. También tenemos Koa siendo importado aquí, y esto es para la authentication. Así que las aplicaciones de Shopify están autenticadas con Open Authorization, o OAuth, que es un sistema de authentication y autorización basado en tokens que Shopify utiliza para conectar de forma segura las aplicaciones a Shopify y a los comerciantes. Y el middleware de Koa trabajará con Koa Shopify Auth, este paquete para encargarse de la mayor parte del proceso de authentication y crear tu servidor personalizado. Y también tenemos esta carpeta de handlers dentro de los servidores. Y lo que hay aquí, podemos ver que se importa el cliente Apollo, y nuestra aplicación está configurada para usar Apollo para obtener data, y el cliente Apollo y sus componentes de React fueron diseñados para permitirte construir rápidamente una UI de React que obtiene data con GraphQL. Así que eso es lo que se está configurando en esta carpeta aquí, o en este archivo. También tenemos esta carpeta de mutaciones. Esto es, solo tenemos algo de código de plantilla aquí que puede hacer llamadas a la API de facturación cuando estés listo para configurar la facturación de tu aplicación porque todos quieren cobrar. Entonces, como dije, no trabajaremos con GraphQL para configurar la facturación durante esta masterclass, pero solo quería hacerles saber lo que estaba disponible y configurado para ustedes en el andamiaje.

Ahora echemos un vistazo en esta carpeta de páginas aquí. Disculpen. Esto va a contener nuestros componentes de front end. Así que Next JS dentro de esta carpeta _app.js, Next JS utiliza un componente de aplicación. Y lo que hace es que pasa clases a los otros archivos de nuestra aplicación. Así que este archivo, pasa todo lo que normalmente encontrarías en un archivo de índice al resto de tu aplicación. Así que puedes ver que también hay algunos componentes de proveedor diferentes. Tenemos este proveedor de aplicaciones de Polaris y este componente de proveedor de Average React. Así que estas son dos bibliotecas que estaremos utilizando a lo largo de la masterclass. Hablaremos un poco sobre lo que son ambas una vez que lleguemos a ellas y llegaré a Polaris muy pronto. Pero básicamente solo necesitamos envolver toda nuestra aplicación en estos componentes de proveedor de aplicaciones para poder usar ambas bibliotecas en toda nuestra aplicación. Y la CLI ya tiene estos configurados para nosotros por lo que podemos sumergirnos directamente en el uso de estas bibliotecas. Muy bien, así que casi estamos listos para construir, pero antes de hacerlo, hablemos de Shopify Polaris. Así que Shopify Polaris, los docs se pueden encontrar en polaris.shopify.com. Y ups, no quiero imprimir quiero hacer zoom. Lo siento, no puedo ver. Así que Shopify Polaris es un sistema de design que Shopify ha construido para proporcionar una experiencia cohesiva con patrones consistentes en toda la interfaz. Así que usamos Shopify polaris en todo el administrador de la tienda. Y también está disponible para los desarrolladores de terceros para usar cuando construyen sus aplicaciones. Y esta experiencia cohesiva se relaciona con lo que hablamos anteriormente en cuanto a los beneficios de incrustar tu aplicación dentro del administrador. El uso de tu aplicación debe continuar sintiéndose como una experiencia familiar en toda la interfaz. Y Polaris definitivamente ayudará a mantener esta experiencia. Así que esto es realmente invaluable para los desarrolladores de aplicaciones que están construyendo en nuestra plataforma y buscan hacer que la interacción con nuestro producto sea más fácil y más predecible para los comerciantes porque simplemente continuará siendo esa única cosa ya que continúa siendo esa única experiencia fluida. Así que los Docs de Polaris pueden guiarte a través de algunas guías de contenido específicas y redacciones que puedes usar dentro de esta sección de contenido aquí. Así que puedes ver diferentes gramáticas y mecánicas, nombres, voz y tono que puedes usar al construir tu aplicación. También hay guías de design y puedes seguir estas guías de design al diseñar el diseño, colores, tipografía de tus aplicaciones. Y esto es realmente útil si quizás no tienes un diseñador en tu equipo puedes referirte a estos docs como un gran bloque de construcción. Y luego tenemos componentes, que son una colección de elementos de interfaz que se pueden usar en toda tu aplicación. Estos son componentes basados en react y todos están construidos con accessibility, estándares de performance y internationalization en mente. Así que estas son tres cosas de las que no necesitas preocuparte tanto cuando estás usando estos componentes porque ya están construidos con ellos en mente. Así que echemos un vistazo a un componente que ya tenemos en uso.

Así que hemos visto el componente proveedor de la aplicación Shopify y en los docs, nos da una breve descripción de lo que es cada componente. Así que este es un componente requerido que permite compartir configuraciones globales a través de la jerarquía de su aplicación. Y también tenemos un ejemplo visual de cómo se verá este componente así como algunas variaciones diferentes. Y cada ejemplo visual tendrá un ejemplo de code que puedes usar para copiar y pegar en tu aplicación si lo deseas, o simplemente mirar como referencia. Y también una lista de props disponibles que puedes usar a lo largo de tu componente.

Y volviendo a nuestro editor de code, si miramos en nuestro archivo index.js, aquí es donde realmente vamos a trabajar y podemos ver dos componentes más de Polaris siendo importados aquí. Así que aquí tenemos encabezado y página, y esto es exactamente lo que vimos en nuestro administrador de estanterías, solo esa aplicación de estanterías con texto de nodo y React. Y ahora voy a pasarlo a Hannah ya que ahora te he sobrecargado de información y Hannah va a guiar cómo realmente construir con Polaris y seguir desde allí. Así que adelante Hannah, dejaré de compartir mi pantalla y Hannah tomará el control desde aquí.

Gracias Jen, bien, déjame compartir mi pantalla por un segundo, Hannah, dame un momento. ¿Cómo terminé con tantos escritorios? Oh no, oh no, no tengo configurado correctamente el uso compartido de pantalla. Dame un segundo, necesito hacer todo el tema de la accessibility. Quiero compartir toda mi pantalla. Creo que necesito volver a unirme, dame un segundo por favor. Vale. Gracias por esperar, gente. Todavía tenemos las alegrías de las masterclass a través de zoom. De hecho, me encontré con lo mismo hace unos días, así que estoy usando un nuevo portátil y todas mis configuraciones excepto, pero espero que estés disfrutando de la masterclass hasta ahora. Gracias por todas sus preguntas en el Q y A. De hecho, Martin tiene una pregunta aquí, Jen, si quieres responder a esto. ¿Shopify admite TypeScript? Creo que hubo algunas, ¿se lanzó recientemente una biblioteca que soportaba TypeScript? Sí, sí que soportamos TypeScript. Así que la aplicación Shopify con React es una de las bibliotecas que Hannah te guiará. Eso es en realidad sobre el uso de TypeScript. Pero si quieres usar TypeScript o no, eso depende de ti. Y nuestro equipo está trabajando actualmente en una biblioteca de TypeScript también. Pero para responder a tu pregunta, sí, definitivamente soportamos TypeScript. Bueno, sí, creo que definitivamente es uno de los enfoques más populares, o recientemente populares para trabajar con aplicaciones que hemos visto. Sí. Sí, definitivamente. Algo que estamos viendo mucho más. Eso es genial. Y Omar está diciendo, charla impresionante. Muchas gracias. Gracias, Omar. Gracias por sintonizar. Otra pregunta aquí de Navdeep. Shopify recientemente entró en React JS para propósitos de UI, ¿es eso correcto? Si esto se refiere a internamente Navdeep, si esto se refiere a internamente, como dentro de nuestros administradores de tiendas. Así que sí, la historia de Shopify es que originalmente fue construido como Ruby on Rails, pero sí, con el tiempo, y más recientemente en los últimos años, hemos estado convirtiendo a React JS. Así que sí, la mayoría del desarrollo que hacemos internamente dentro de Shopify está empezando a convertirse al React JS o ya ha sucedido. Habrá mucho más de esa historia también que se contará durante las dos charlas que Shopify y Shopify están dando en el React Summit, así que definitivamente mantén un ojo en esas. Y otra pregunta de KKL, ¿se implementó mucho React Native también? No tanto React Native. Esto es algo que ha sucedido en los últimos dos años, año y medio. Algunas de las aplicaciones, como la aplicación Shop que Shopify ha creado, fue creada para React Native. Y sé que hubo un gran impulso interno para que todas las aplicaciones de primera parte o muchas aplicaciones de primera parte usen React Native para construir estas aplicaciones. Así que es algo que se está explorando y nuestros equipos de ingeniería están realmente apasionados por el futuro de las aplicaciones de primera parte y React Native. Así que Hannah está volviendo a unirse a nosotros ahora. Me gustaría darle derechos de acceso. Zoom, no es mi herramienta más familiar. Así que gracias por estar aquí conmigo. Lo siento por eso a todos.

No te preocupes, es una buena oportunidad para ponernos al día con algunas preguntas. Todo está bien. Me alegra escucharlo. Bien, ¿todos pueden ver mi pantalla ahora? Sí. Sí, está bien. Bien, para volver a nuestra parte práctica de la masterclass. La última vez que escuchamos a Jen, aprendimos qué es Polaris y dónde encontrar la documentación. Comencemos a construir. Solo una mirada más al resultado final que buscamos. Así que estaremos construyendo una aplicación de una sola página aquí que permita a los comerciantes seleccionar productos de su tienda utilizando el selector de recursos y luego mostrándolos en la lista aquí. Así que nos centraremos en los tres componentes de Polaris, que son el Estado Vacío, la Lista. Y supongo que este pequeño botón aquí, que es parte del Estado Vacío.

Bien, y luego así es como se ve nuestra aplicación desde el front end. Volvamos a nuestra tienda de prueba solo para ver eso en su lugar. Entonces, si recuerdas, esta es nuestra aplicación Hello World. Espero que la tengas en este momento. Si vamos a nuestro editor de texto, puedes usar cualquier IDE que te guste. ¿Es suficientemente grande esta fuente? Eso está bien.

Entonces, si recuerdas, estaremos trabajando dentro de las páginas y este es el index.js que mencionó Jim. Comenzaremos cambiando el estilo de nuestro return porque ahora está usando un atajo de retorno implícito. Cambiémoslo de nuevo a un formato de mano larga solo para que podamos agregar más code antes de devolver nuestro componente. Entonces, vamos a eliminar, lo siento. Vamos a eliminar los corchetes y convertirlo de nuevo en algo así. Una de las llaves rizadas más bien y luego podemos hacer return aquí, nuestro componente. Componente de envoltura, return. Y probablemente no queremos este texto aquí donde solo dice, ta-da. Voy a mover eso. Mantendremos la página, pero eliminaremos todo excepto la página. Y luego, antes de comenzar a agregar los componentes reales de Polaris, agreguemos un elemento más. Me gusta usar una tarjeta porque eso le dará a nuestra página un poco de estructura. Así que configuraremos todo para incluir la tarjeta. Y luego aquí es donde pondremos todo adentro.

A continuación, hablé sobre el estado vacío. Comencemos importándolo. Así que importaremos el estado vacío de Polaris. Pero en realidad no sabemos cómo usarlo todavía. Así que consultemos un poco los docs. Ese es uno de mis lugares favoritos para visitar. Entonces, si miramos los docs, aquí dice el estado vacío que se usa cuando una lista, una tabla o un gráfico no tienen elementos o data para mostrar. Y en este caso, tenemos una lista sin elementos. Esto es perfecto para la aplicación. Por lo general, el estado vacío es una gran oportunidad para proporcionar a nuestros comerciantes información para que comiencen, solo para que sepan a dónde ir y qué hacer. Si miramos los docs, podemos ver las props. Las props que son requeridas. Entonces, bajando por la lista, tenemos acción. Supongo que podemos alimentar a los niños en el componente. Hay un encabezado, pero la única prop requerida aquí parece ser la imagen. Así que necesitaremos encontrar una imagen. Para mantener las cosas simples, sin embargo, solo incluiremos una imagen que está alojada en internet. Y puedes copiar la que está dentro del doc. Así que solo voy a copiar esta, para que esté en nuestro portapapeles. Para renderizar el botón, aquí, solo voy a desplazarme hacia arriba para renderizar este botón. Si miramos el ejemplo, queremos alimentar una acción. También echemos un vistazo a lo que necesitamos alimentar en nuestra prop. Entonces, la acción es un objeto con contenido, eso es un string. Así que creo que ese es el texto en el botón. Y luego también hay una acción de callback para que se llame en acción. Es decir, cuando el comerciante hace clic en un botón, haremos algo con él, pasaremos un callback. En este caso, comenzaremos simplemente console bloqueando, hice clic o algo así solo para saber que está funcionando. Entonces, ahora que sabemos qué props hay, volvamos al code. Entonces, comencemos creando una variable para contener nuestros componentes. Así que hacemos host estado vacío, lo llamaremos estado vacío.

Entonces lo llamaremos post nuestro estado vacío. Y lo convertiré en un componente de cierre automático solo para mantener las cosas un poco ordenadas y poner cada prop en una línea separada. Pero dejaré el estilo a tu criterio. Entonces, si recuerdas, había un encabezado. Así que lo pasaremos. Encabezado, quería un string si recuerdo correctamente, así que simplemente lo llamaremos descuento. La caja, ya que estamos construyendo una caja de suscripción, eso simplemente nos dará texto. A continuación, queremos la imagen que se requería. Consíguelo temprano. Simplemente pegando la URL. Oh, no, perdí la URL. Solo voy a volver a copiarlo. Poniendo la URL completa aquí. Y si recuerdas, había una acción, o solo la acción, lo siento, sí. Solo la acción. Y en ella queremos pasar un objeto. Vale. Entonces, y creo que esto tenía contenido. Este será el contenido de nuestro botón. Así que suele ser algún tipo de llamada a la acción para nuestros comerciantes. En este caso queremos hacerles saber que al hacer clic en este botón, estarán seleccionando productos. Así que simplemente diré selecciona el producto. Y finalmente queremos pasar un callback en las acciones. Significando algo que queremos hacer cuando se ha hecho clic en esto. Solo voy a usar la función addrole aquí y console logout. Console.log y simplemente dirá clic. Probémoslo un segundo. Ahí vamos. Muy bien. Ahora simplemente lo hemos asignado a una variable. Podemos imprimir eso dentro de la tarjeta. Así que simplemente lo renderizaremos aquí. Entonces, todo esto debería mostrar un estado vacío. En el navegador. Así que cambiemos al navegador y veamos si aparece correctamente. Hagamos una actualización. Oh no. Oh sí, creo que mi servidor no está funcionando, por eso. Así que voy a ejecutar Shopify. Y a veces, no sé si te encuentras con esto, pero cuando trabajas con Ngrok, los problemas realmente comunes es que recibes un mensaje de error diciendo que tienes demasiadas conexiones. Entonces, si te encuentras con ese problema, solo dale como 30 segundos o algo así y luego actualiza, debería resolverse por sí mismo. Pero si no, avísanos. Muy bien, me está diciendo que instale la aplicación usando esto. Creo que la tengo instalada, pero solo quiero estar extra seguro y pegarlo. Espero ver un estado vacío aquí. Espero que eso sea todo. Esto es lo que todos ustedes también están obteniendo. Supongo que eso es lo que deberíamos ver en este punto. Yay. Muy bien, aquí está nuestro estado vacío.

Ese es uno de los dos componentes, los primeros componentes que queríamos construir. Continuando, construiremos el componente de lista. Así como antes, importaremos la lista. Y de nuevo, queremos aprender un poco sobre la lista antes de usarla, y ahí es donde los docs pueden ser muy útiles. Así que aquí dice que las listas muestran un conjunto de contenido solo de texto, y cada elemento de la lista comienza con un punto o un número. Volviendo aquí a los docs, parece que solo hay dos props, o solo un tipo, que es opcional, y el predeterminado es punto, así que parece que podemos dejar eso fuera. El resto sería solo asegurarnos de que incluimos los elementos de la lista y las listas secundarias como hijos. Así que vamos a hacer eso. Y como antes, queremos poner eso en una variable solo para que podamos probarlo en un trabajo. Así que const. Llamémosla lista de productos. Lista, sí, lista, y lista. Si recuerdas antes dentro de la lista, era un elemento de la lista, similar a una lista HTML. Y por ahora, simplemente codificaremos en code los nombres de los productos o algo así. Producto uno. Copiaré esto unas cuantas veces. Producto dos. Y finalmente, reemplazaremos este estado vacío con la lista de productos para que podamos renderizarla. Bien, volvamos al navegador para ver si se verifica. Así que tenemos nuestra lista de productos por ahora. Pero si recuerdas antes, había algún tipo de condicional sucediendo, ¿verdad? Así que cuando hay una lista de productos seleccionados, mostramos la lista. Si no, será el estado vacío. Aquí es donde podríamos querer empezar a añadir un estado o data de marcador de posición para determinar eso, para determinar si debemos mostrar o no el estado vacío. Así que hagamos eso. Así que por encima de todo, añadiremos información de marcador de posición. Llamaremos a esta variable, productos seleccionados. Y será un array de strings. Solo pondremos nuestros IDs de producto dentro por ahora. Como está codificado, simplemente pondremos algunos data ficticios. Así que este y tal vez copie eso de nuevo. Tal vez, ¿qué? Sí. Vale. Y utilizaremos este array. Como condicional en nuestro método de retorno de renderizado. Así que podemos decir que si nuestro array tiene una longitud de más de cero, lo que significa que hay más de cero elementos en él, queremos mostrar la lista de productos. De lo contrario, mostrar el estado vacío. Bien, ¿todos tienen una buena condicional ahí? Así que una vez que tengas eso, estaremos usando estos data de marcador de posición codificados para alternar entre las dos vistas. Así que porque tenemos elementos aquí ahora, espero que esto muestre una lista. Bien, y volviendo al IDE, reemplazaremos esto con nada. Así que volvemos a un array vacío. Eso debería mostrar el estado vacío. Así que veamos si ese es el caso. Yay, así que ahora hemos usado dos componentes diferentes de los jugadores. Genial, esto es realmente bueno, esto es todo para Polaris. ¿Alguien está atrasado o está bien que continúe? En realidad, no puedo ver nada más.

Bien, creo que estamos listos para seguir adelante. Gracias Liam, bien, entonces sigamos. Así que ahora que hemos construido las aplicaciones, podemos añadir algunas funcionalidades a ellas, y aquí es donde hablaré un poco sobre AppBridge. Mientras que Polaris te ayuda a ofrecer una UI consistente, AppBridge proporciona formas para que tu aplicación integrada interactúe con Shopify. En su núcleo, es simplemente un patrón de comunicación para gestionar el estado entre nuestra aplicación y el administrador de Shopify. Sin embargo, el cliente de AppBridge, ayuda a las aplicaciones a comunicarse con el administrador utilizando una API sencilla. Puedes interactuar con el marco principal que a veces puedes oír que llamamos hosts. Y el host puede ser el administrador de Shopify en un navegador, o podría ser el POS o incluso la aplicación móvil de Shopify. Así que tu aplicación podría mostrarse en cualquiera de esos dispositivos que alojan tu aplicación. Y sólo para una rápida terminología, las funciones que ofrece AppBridge a menudo se refieren como acciones porque a menudo responden a ciertas acciones. Así que el cliente de AppBridge viene con un envoltorio de React encima del paquete base. Así que a veces puede ser un poco confuso si ves dos paquetes de AppBridge. Así que tenemos uno base, simplemente llamado AppBridge, pero también hay un AppBridge React, que es un envoltorio de React alrededor del paquete base, y hace un subconjunto de esas acciones o funcionalidades disponibles como componentes de React, y el selector de recursos es uno de ellos. Como nuestra aplicación esqueleto viene con AppBridge React ya, podemos empezar a usarlo de inmediato.

Bueno, volvamos al code un poco para que podamos empezar a construir sobre él. Bueno, en realidad, antes de hacer eso, quiero sumergirme en los docs porque probablemente hay mucho que aprender aquí. Así que lo que usaremos es el botón de jugadores en el estado vacío, para activar una acción de AppBridge. Así que aquí, abriremos el selector de recursos cuando se haga clic en el botón de jugadores.

De vuelta en Shopify.dev, veremos una sección diferente de los docs. De nuevo, porque hay dos paquetes diferentes, tenemos un paquete base aquí y luego están los React componentes. Para esta masterclass, estaremos viendo la versión de React. Así que asegúrate de que este esté resaltado. De nuevo, estaremos viendo el selector de recursos. Así que mirando el selector de recursos, renderiza un modo con una lista de recursos. Y en nuestro caso, estos recursos son productos que hemos poblado en nuestra tienda anteriormente. Y desde el modo, un comerciante puede seleccionar estos recursos y luego con nuestro code, podemos hacer lo que queramos con estos recursos pasando una función de devolución de llamada.

Así que mirando el code de muestra aquí, veamos, déjame acercar un poco. Contiene el code de muestra aquí. Puede que notes que en algún punto mencionamos que necesitas almacenar el origen de la tienda durante el proceso de authentication y luego recuperarlos para que el code funcione correctamente. Pero como el CLI se encarga de todo eso por nosotros, no hay necesidad de preocuparse por ello. Podemos sumergirnos directamente en la codificación. Y si miras el code de muestra aquí, podrías ver un proveedor que está envolviendo todo y es muy necesario. De nuevo, nuestro CLI tiene eso, así que no hay necesidad de preocuparse por eso. Podemos usar esto directamente. Ahora, continuando con estos docs, inspeccionemos las propiedades que se requieren. Así que por aquí, parece que sólo tenemos dos propiedades requeridas. Eso es open, que es un Boolean para mostrar si el selector está abierto o no. Y luego Tipo de Recurso donde puedes elegir uno de los tres recursos. Nosotros, de nuevo, estaremos usando producto. Y finalmente, desplacémonos hasta el fondo porque sé que habrá devoluciones de llamada que querremos usar. Hay muchas otras opciones interesantes que puedes revisar por tu cuenta. Pero por ahora, creo que esta en-selección será de interés porque queremos recoger la información que se está enviando. Y probablemente queremos hacer algo también cuando todo el Moto ha sido cancelado. Así que tengámoslo en mente. Volviendo al code, creo que empezaremos a hacer eso. Bueno, empecemos importando mi app, selector de recursos. Asegurémonos de no poner esto como parte de Polaris porque es una biblioteca diferente ahora. Mi app bridge estará en, ahí vamos. Bien, así que ahora que hemos importado el selector de recursos de nuestra app, que reaccionamos al paquete, queremos ponerlo en algún lugar de nuestro componente. Creo que me gustaría poner esto junto al estado vacío. Así que lo que haré es envolver el estado vacío con sólo una etiqueta vacía para que todo pueda estar contenido de manera ordenada aquí. Voy a hacer un formato rápido aquí y empezar a usar el selector de recursos. Oh, mi ID reconoció un montón de propiedades para mí que eran necesarias. Así que voy a mantener eso aquí. Pero por defecto, recordarás antes, teníamos tipo de recurso como producto. Y open era un Boolean para verdadero o falso. Y porque queremos hacer una prueba rápida, pongamos verdadero. Estoy tratando de poner eso en sólo para que podamos echar un vistazo. Así que porque nuestros productos seleccionados están vacíos, este espacio vacío debería aparecer y debería incluir nuestro selector de recursos porque está abierto. Así que guarda y actualiza el navegador. Este es un buen lugar para hacer una pausa y asegurarse de que nuestro selector de recursos está implementado correctamente. Así que volvamos aquí. Oh, espera, hay algo nuevo. Bien, espero que esto sea lo que también estás viendo.

Debería ser un modo con una lista de productos que has poblado en tu tienda desde antes. Y si seleccionas estos productos, puedes hacer clic en añadir. Una cosa que podrías notar es que cuando haces clic en seleccionar producto de nuevo, no hace nada. No podemos abrirlo de nuevo y eso es porque hemos codificado el selector de recursos para que sea visible por defecto y nunca cambia los Estados, por lo tanto, nuestro componente React no refrescará la UI. Pero lo que podrías notar es que la acción de clic sí ocurrió, así que eso es bastante interesante.

Así que, ahora lo que queremos hacer es poder hacer que ese estado de apertura sea dinámico. Así que, vamos a hacer eso. Bien, así que probablemente queremos usar algún tipo de estado para seguir si el selector de recursos está abierto. Y aquí es donde creo que el hook de estado de React será útil, así que vamos a importarlo. Así que, importar use state de react. Ooh, no sé por qué no le gusta eso. Importar, oh, vale, necesito hacer esto. No está aquí, sí, ahí vamos. Así que, queremos use state. Lo ponemos justo en la parte superior de nuestro componente, así que pondremos en nuestro isResourcePicker open porque estamos siguiendo eso, isResource. Y llamamos a nuestro setter, set isResourcePicker open. Use state aquí y el valor por defecto será falso porque no queremos mostrar el selector de recursos así que vamos a establecer el valor por defecto.

Así que mientras estamos aquí definiendo nuestro estado del componente, es en realidad un buen momento para reemplazar el producto seleccionado codificado que teníamos antes como prueba. Así que vamos a adelante y reemplazamos eso con otro hook de estado de react. Así que const así seleccionado, productos seleccionados, y luego establece el producto. Estado algún array vacío para empezar, y notarás que mi ID se está quejando de dos del mismo nombre, simplemente lo eliminamos y está feliz de nuevo. Genial, vamos a hacer uso de estos nuevos hooks de estado creados. Lo que podríamos querer hacer ahora es, supongo que en la apertura, en primer lugar queremos empezar a usar este dinámico, is resource picker open, dentro de nuestro estado de apertura en lugar de usar verdadero. Simplemente escribamos eso aquí is resource picker open, y esto lo hará dinámico. Si recuerdas antes cuando hacemos clic en el botón, el botón de estado vacío, que estaba aquí, simplemente consolas log out un mensaje. Ahora lo que podemos hacer es llamar a nuestro setter para establecer el estado de apertura en verdadero. Llamémoslo verdadero. Y lo que voy a hacer ahora es simplemente limpiar nuestras props un poco para que podamos añadir un poco más porque había un par más que queríamos añadir. Así que dentro de nuestro selector de recursos, este es también un buen momento para añadir nuestras devoluciones de llamada. Tenemos una llamada, creo que se llamaba en selección. Oh sí, gracias, ID, en selección. Y hay otra donde, supongo que podemos cancelar, y lo llamaremos, se llama onCancel. Y dentro de ambos, aceptan devoluciones de llamada. Pongamos una función vacía allí por ahora para que podamos hacer cosas dentro. Así que antes, si recuerdas cuando seleccionamos algo o cuando cancelamos, en realidad no afecta al estado, pero al conectarlo aquí, debería funcionar. Así que hagamos eso. Así que setResourcePickerOpen para ser falso. Queremos que sea falso. Ciérralo, lo mismo aquí, onSelect. Oops eso no es un producto seleccionado. SetResourcePickerOpen, ahí vamos. Así que lo que estamos diciendo aquí es que en la selección, cierra el modo, en cancelar, también cierra el modo y también establece el estado en el componente. De nuevo, hagamos una pausa y veamos si todo funciona correctamente. Así que estoy esperando que nuestro clip funcione. Vale. Después de cerrar. Pensando por un segundo. Pensando durante mucho tiempo. Veamos si algo salió mal. Oh, parece que está bien.

Soy impaciente y voy a refrescar. ¿Alguien más puede ver que funciona para ellos? Vale. Bueno, por ahora seguiré adelante con el chat. Parece que todo está funcionando. Perfecto. Yay. Entonces, cuando lo abres. Cerraremos, pero podemos reabrir. ¿Verdad? Excelente. Gracias, Jen. Gracias a todos.

Muy bien. Entonces, ahora volvamos a la documentation por un segundo porque creo que lo siguiente que querremos hacer es capturar estos productos seleccionados. ¿Verdad? Así que cada vez que un comerciante selecciona un artículo y un anuncio, queremos obtener un control sobre eso y hacer algo con ello. Así que volviendo al code, vemos que hay una selección, que nos dará la oportunidad de pasar una devolución de llamada que recibe algo. Pero solo como un rápido recordatorio de cuál es esa forma, porque ha pasado un tiempo. Si estamos mirando la selección aquí, aquí dice que lo que recibiremos es algún tipo de payload seleccionado. Y es un objeto con claves ID y selección. Así que parece que podríamos necesitar profundizar en doselected para obtener la información que necesitamos. Así que probemos eso. Así que el método que la devolución de llamada que estamos pasando recibe payload seleccionado. Así que simplemente haremos console log de esos payload seleccionados para ver cómo se ven. De nuevo, podemos saltar de nuevo al navegador. un segundo. Esperemos que sea más rápido esta vez. Todavía está pensando. Está bien. Volveremos. Bien, así que vamos a profundizar directamente en este payload seleccionado porque sabemos que su selección aquí. Así que lo que queremos hacer es tomar todo aquí. Tiene un objeto. Pero lo pondremos en un solo muy así que vamos a crear uno nuevo llamado porque seleccionado. Y vamos a iterar a través de nuestro payload seleccionado. En selección. Mapearemos a través de todo aquí. Cada elemento será un producto. Y luego simplemente devolveremos. El ID del producto. Voy a saltar un paso adelante y ver si somos capaces de imprimirlo en un pequeño array ordenado. Selecciona un producto, dos, tres. Añadir, un salto. Desplázate rápido. Pero aquí, no sé si puedes ver lo mismo aquí. Pero tenemos solo un simple array de IDs de productos. Ahora podemos empezar a usar eso. Porque antes hicimos un estado que es un array con un setter. Simplemente usaremos el setter de inmediato para obtener eso. Solo el estado. Como sabemos que seleccionado es un pequeño array ordenado, exactamente como queremos, lo usaremos. Solo guardaré eso.

Finalmente, podrías notar que cuando estamos mostrando la lista, todavía está codificada. Entonces, como último paso, ya que sabemos que nuestro estado es simplemente un array de ID, actualizaremos nuestra lista. De manera que el componente secundario simplemente itere a través de estos productos seleccionados y los imprima como componentes de lista secundarios. Así que probemos eso. Entonces, pasaremos por el producto seleccionado. E integraremos todo. A nuestra función de devolución de llamada. Y diremos que devuelva una lista. Un elemento de la lista. ¿Y qué deberíamos poner aquí? Porque cada elemento es un ID de producto. Simplemente pondremos eso dentro del producto. En cada elemento. Y creo que a veces React podría quejarse de que los componentes secundarios no tienen claves, así que simplemente le daré algún tipo de índice. Entonces, no debería saber nada. T igual a I. Hay una línea ondulada. Muy bien, ¿el code de todos es más o menos así? Probémoslo ahora. Refresco rápido. Aquí vamos. Me gustan los productos, uno, dos, tres, déjame elegir cuatro elementos y añadirlos. Y nuestros cuatro elementos ahora se están mostrando en una lista. Ahora no parece mucho, pero con todo esto, voy a volver al code. Con todo esto, el producto seleccionado terminará estando dentro de este array Milo. Y en este punto, si tu aplicación tiene un back end. La nuestra no. Pero si la tuya sí, lo que puedes hacer es usar estos ID únicos para consultar nuestra API de administración GraphQL de Shopify para obtener información adicional del producto. Así que podemos obtener cosas como imágenes, precios, incluso si quieres hacer algo con ello. Digamos si quieres aplicar un descuento. Y esto es prácticamente todo para el área de la masterclass. Con esto, creo que hay más tutoriales que puedes seguir, los cuales Jen repasará. Así que espero que todos hayan podido seguir eso. Voy a pasar esto de nuevo a Jen. Puedo averiguar cómo hacerlo. Está bien. Gracias Hannah. ¿Quieres mostrar la última diapositiva? Solo tiene algunos recursos en ella. Oh sí. Eso es correcto. Avanzaremos rápidamente a nuestra lista de recursos. Ahí vamos. Entonces, en este punto, ahora has construido una aplicación básica de Shopify con Node y React. Has aprendido cómo usar la CLI de la aplicación Shopify para configurar tu aplicación incrustada. Y hemos utilizado Polaris y AppBridge para construir una interfaz cohesiva y leer data de nuestra tienda de desarrollo. Entonces, como dijo Hannah, es una aplicación muy simple, pero esperamos que esta masterclass te haya dado la orientación sobre cómo configurar rápidamente y fácilmente tu propia aplicación. Consigue una buena interfaz allí, y de esta manera puedes pasar más tiempo enfocándote en realmente resolver ese problema único para los comerciantes que tu aplicación se propone resolver. Entonces, para más recursos, tenemos algunos listados aquí, y listaremos algunos—Liam está realmente listando algunos en el chat también— así como un repositorio de GitHub que tiene el code completo de esta masterclass. También enumeraremos algunos tutoriales de Shopify.dev. Uno bueno es solo los últimos pasos en el tutorial de Node React, que te guiará a través de la API de administración GraphQL, cómo acceder y mutar algunos de esos data, y configurar la facturación para tu aplicación. También puedes consultar nuestro canal de YouTube, Shopify Devs. Tenemos un tutorial de Node React con CLI presentado por mí mismo, si quieres verlo también.

Creo que esta masterclass también será grabada. También consulta nuestros foros de la comunidad y los blogs de socios de Shopify para obtener más recursos, Mientras Liam publica estos enlaces, Hanna y yo estaremos en Discord por un rato si alguien tiene más preguntas. Pero agradecemos a todos por unirse a nosotros, y esperamos que todos disfruten el resto de su experiencia en la Cumbre de React.

Nos quedan unos 15 minutos, si alguien tiene más preguntas, pasaremos a la sesión de preguntas y respuestas y responderemos esas preguntas aquí durante el tiempo restante. ¡Así que gracias a todos! ¡Gracias a todos! Gracias Hanna, gracias Jenna, eso fue realmente, realmente genial. Fue realmente genial ver cómo esos componentes cobraban vida y poder acceder a los diferentes elementos en el código fuente, eso fue realmente genial.

Hay una pregunta que llegó aquí de Omar relacionada con HMR. ¿Se puede configurar HMR en el entorno de desarrollo? Sí, creo que respondí a esa pregunta. Estamos usando Next.js así que Next.js debería poder manejar eso por nosotros en la aplicación. Genial. Hay una pregunta aquí, no estoy seguro si está relacionada con este proyecto, pero ¿necesitas una API proxy para manejar la solicitud GET POST a la API de Shava, o puedes manejarla directamente en el cliente de Next.js? ¿Como un proxy para hablar con la API de administración de GraphQL? No estoy 100% seguro. Supongo que para... ¿Necesitas un proxy para manejar las solicitudes? Sí, así que creo que sí necesitamos eso, así que cada vez que necesitamos hacer una llamada a la API REST o GraphQL tu aplicación node necesitará algún tipo de API proxy que pueda resolver ese problema, y luego requiere algún tipo de backend que actúe como un proxy, por lo que tu frontend estará hablando con tu backend que hace una llamada usando el token de acceso, si eso responde a la pregunta. Gracias, Anna. Hay otra pregunta aquí, un poco más general, de KK L. ¿Tienes algún consejo para los estudiantes que buscan recursos de aprendizaje para aprender GraphQL? Un recurso fuera de Shopify, sé que es uno que algunos de mis compañeros de trabajo han tomado cuando han comenzado a implementar GraphQL en su trabajo es el curso avanzado de React de Wes Voss. Lo enlazaré en la respuesta aquí, sé que es uno que se ha tomado varias veces y siempre se recomienda dentro de Shopify, así que es bueno tomarlo si quieres obtener más experiencia o aprendizaje en torno a React o GraphQL. Y también por lo que recuerdo, hay algunos plugins de navegador que te dan una interfaz para jugar con GraphQL, así que también es una buena herramienta práctica para tener. Definitivamente le daría un más uno a Wes Voss también y solo voy a agregar que también tenemos algunos videos para comenzar con GraphQL. Eso fue publicado por Chuck Haslam que voy a poner en el chat aquí también. Sí y dentro de, estoy seguro de que hablarán de ello en los videos, pero tenemos, usamos la aplicación GraphQL. Puedes incrustar la aplicación GraphQL dentro de una tienda de desarrollo de Shopify para que puedas acceder directamente a la documentación y jugar con diferentes consultas y mutaciones que accederán directamente a la información en tu tienda de desarrollo. Así que encuentro que es una muy buena manera de obtener experiencia con lo que realmente está sucediendo y los datos reales con los que estás jugando en GraphQL es instalando esa aplicación en tu tienda de desarrollo. Sí, por supuesto. Sí. Si alguien tiene alguna otra pregunta, no dude en dejarla en el chat. Tenemos un par de minutos más. Tal vez también, sabes, una pregunta que realmente tengo. Así que miramos los componentes de Polaris y AppBridge para poder, esos selectores de recursos. ¿Cuáles son los otros componentes que preexisten, a los que los desarrolladores tendrían acceso cuando están, sabes, construyendo su UI. Sí. Entonces, cuando usamos específicamente AppBridge, si estamos hablando de los componentes de React que están disponibles para tus aplicaciones incrustadas, otros componentes que están disponibles son la barra de título, el modo, y creo que la navegación. Así que si quieres navegar a una página, redirigir, todo eso está disponible como componentes de React, pero no estoy seguro sobre Polaris. No sé si Jen tiene algo que agregar. Sí, con Polaris, un buen detalle más, usamos solo el componente de lista básico, pero uno más detallado es el componente de lista de recursos, creo que se llama en Polaris. Está hecho prácticamente para ir entre el modelo de recurso promedio a la lista de recursos. Realmente, te proporciona mucha más flexibilidad y complejidad en lo que puedes poner en esa lista. Así que ese se usa mucho. Uno que veo que se usa mucho en las aplicaciones es simplemente un diseño anotado básico. Se usa para cualquier página de configuración en tu aplicación. Así que la mayoría de las aplicaciones probablemente tienen ese diseño anotado. Es donde pondrías formularios y entrada de usuario, donde tus usuarios podrían ingresar lo que sea que haga tu aplicación es, sí, ese se usa mucho. Y recibimos otra pregunta de Rafael. Se pregunta, ¿es posible crear un plugin de Shopify que requiera suscripción de las tiendas? Así que supongo que probablemente está hablando de aplicaciones de suscripción de las tiendas. Así que no estoy seguro si eso es de, como si el comerciante se está suscribiendo. Sí, así que dependiendo de a qué se refiere esta pregunta, así que si es una suscripción, como para pagar por tu aplicación, está bajo un modelo de suscripción, eso es posible. Creo que puedes hacer eso a través de la API de facturación. Puedes decir, oye, para que un comerciante use mi aplicación, cuesta $5 al mes, así que eso es posible. Por otro lado, si estás construyendo una aplicación que soporta suscripciones y pagos, eso también es posible. Así que puedes hacer eso como una aplicación.

Y creo que también hay otra charla durante esta conferencia que introduce Argo. Así que esa es también otra solución que podría permitirte construir una suscripción. Y fue, sobre una suscripción para tu aplicación, como que el comerciante pagaría una tarifa de suscripción por la aplicación. El CLI construye solo una especie de código de plantilla code exactamente para eso. Está en la carpeta del servidor en Handlers en Mutation, se llama getsubscriptionurl.js. Así que puedes echarle un vistazo, básicamente solo configura una tarifa de suscripción muy básica que cuando tu comerciante instala esta aplicación recibiría una factura recurrente para pagar por la aplicación. Así que puedes revisar eso si eso es a lo que se refería la pregunta.

Sí, no, Rafael nos respondió también. Así que eso era sobre los comerciantes. Así que supongo que es más sobre el aspecto de facturación de eso. Quiero decir, es una API de facturación bastante flexible.

Tenemos otra pregunta aquí de Anda. ¿Cómo manejas el desarrollo en Polaris? ¿Usas herramientas como Storybook o las usas para testing? No estoy seguro si puedes hablar específicamente de eso.

Sí, el equipo de Polaris sí usa Storybook bastante ampliamente para pruebas de desarrollo. Personalmente no he hecho demasiado en Polaris. Solo he hecho unas pocas pequeñas correcciones de errores aquí y allá, pero no he trabajado en la construcción del sistema de design real. Pero sí, cada vez que he entrado en ese repositorio, siempre hemos usado Storybook.

Genial. Otra pregunta aquí de KKL. ¿Sabes si hay video streaming en el entorno de Shopify para los comerciantes? No estoy seguro si eso está relacionado con las aplicaciones de video streaming. Creo que hay algunas... Las compras en vivo son definitivamente algo que se está volviendo más popular. Así que si está relacionado con eso... Sí, hay aplicaciones como Live Pop que permiten la transmisión de video en vivo a las tiendas. Sí, eso parece muy viable como idea de aplicación, sí. Sí, definitivamente es algo que hemos visto un poco más de popularidad, especialmente con plataformas como Twitch volviéndose más populares y TikTok.

Genial. Bueno, esperaremos solo un minuto o dos para ver si llegan más preguntas, pero sí, de nuestra parte, muchas gracias a todos por sintonizar. Fue una sesión realmente genial. Como mencionamos, fue una grabación distribuida por los organizadores de la conferencia, pero sí, un gran agradecimiento de nuevo a las presentadoras de hoy, Jennifer y Hannah. Fue realmente genial ver todos esos pasos detallados y también todos los participantes parecían estar siguiendo muy bien. Fue realmente genial ver a la gente activa en el chat también, así que eso fue genial. Así que sí, a todos los que están ahí fuera, gracias por su atención hoy, y sí, gracias por unirse a la masterclass y disfrutar de la Conferencia de React. Y tenemos otra masterclass mañana con Scott Zinkel que estará viendo cómo usar React Native para asegurarse de que las aplicaciones que estás creando son accesibles así que sintoniza eso mañana. Lo tendremos a la misma hora mañana. Y luego durante la conferencia principal en sí, tenemos dos charlas como mencionó Hannah. Una de ellas se centrará en Argo que es muy emocionante ver. Pero sí, esperamos que en esta masterclass hayas adquirido algunas habilidades nuevas, aprendido algunas técnicas nuevas sobre cómo trabajar con React y Shopify y aprendido más sobre, ya sabes, construir en Shopify en general. Así que gracias a todos y es un adiós de nuestra parte. Gracias a todos por unirse a nosotros. Gracias. Adiós. Adiós, gente.