Transcript
00:00:00Configurar tiendas Shopify es más fácil que nunca porque ahora solo tienes que combinarlo con los
00:00:04agentes de IA que usas para programar y dejar que ellos se encarguen de todo. Pero conectar Claude Code a
00:00:09tu tienda no es suficiente por sí solo. Para terminar realmente con una tienda que no parezca genérica como
00:00:14todas las demás tiendas Shopify que existen, necesitas combinarlo con algunas piezas clave en tu configuración.
00:00:19Al final de este video, conocerás todo el flujo de trabajo que puedes usar para configurar tu propia
00:00:23tubería de Shopify de principio a fin, para que puedas empezar a vender tus productos de inmediato.
00:00:28Necesitas seguir algunos pasos para prepararte para construir tu tienda. Lo primero
00:00:32que necesitas es una cuenta de Shopify Partner, así que vas al navegador y te registras. La cuenta
00:00:37de socio es importante porque te da acceso a herramientas de desarrollo que te permiten experimentar con
00:00:41la plataforma. Es básicamente un entorno de pruebas para tus tiendas, donde puedes crear tu aplicación como
00:00:46lo harías normalmente, a la vez que utilizas herramientas de desarrollo como pagos falsos y usuarios de prueba para que
00:00:51puedas probar la aplicación antes de que salga al público. Y más adelante, si crees que tu aplicación está lista para empezar
00:00:56a vender, solo tienes que añadir integraciones de pago y puedes mover fácilmente la cuenta de desarrollo a la
00:01:01cuenta de comerciante, donde podrás empezar a vender productos reales a personas reales.
00:01:05Ahora, una vez que hayas creado la aplicación en el proyecto, es hora de instalar la CLI de Shopify. Puedes hacerlo
00:01:10copiando el comando de instalación de la documentación de la CLI y ejecutándolo en la terminal. Una vez que lo ejecutes,
00:01:15se te pedirá que elijas entre una aplicación de React o una aplicación de extensión. Elegimos la aplicación de React porque es
00:01:20en lo que más desarrollamos y es más fácil personalizar la aplicación de esa manera. Después de eso, puedes elegir el
00:01:26lenguaje que quieres usar y elegimos TypeScript por su seguridad de tipos y características de seguridad en
00:01:31comparación con JavaScript. Una vez que hayas completado esta configuración, instalará todas las dependencias necesarias para
00:01:37ejecutar la aplicación. Después de que las dependencias estén instaladas, el proyecto estará listo y, cuando lo ejecutes,
00:01:41verás una plantilla básica de la aplicación desde donde puedes empezar a realizar cambios adicionales. Así que, una vez que la CLI ha
00:01:46sido instalada, hay otras cosas que necesitas instalar, empezando por el kit de herramientas de IA de Shopify, que
00:01:51añade funcionalidad al proceso de construcción. La parte más importante es el MCP y el comando de instalación para este
00:01:56MCP para todos los agentes de codificación de IA se puede encontrar en la documentación. Como estábamos usando Claude Code, copiamos el comando
00:02:03para Claude e instalamos el MCP; puedes hacer lo mismo con cualquier herramienta de codificación de tu elección. Una vez que el MCP
00:02:08está instalado, expone sus herramientas a Claude, pero el MCP por sí solo no es suficiente, porque todas las herramientas en él
00:02:14están básicamente ahí para ayudar a Claude a construir mejor. El MCP no tiene forma de enviar cambios a tu tienda ejecutándose
00:02:19en la nube. Solo contiene documentación y conocimiento sobre la API de Shopify, junto con otras validaciones. Así que
00:02:25esta configuración no era suficiente para construir por sí sola. Y por eso la CLI es importante, porque es
00:02:30realmente el puente entre la aplicación de Shopify y la configuración local. Aparte del MCP, también necesitas
00:02:35instalar el plugin. El plugin es importante porque contiene múltiples agentes y habilidades combinadas.
00:02:40Puedes instalarlo siguiendo los comandos de instalación. Después de ejecutar los comandos de instalación,
00:02:44ejecuta el comando para recargar los plugins y todos los agentes y habilidades estarán listos para usarse.
00:02:49Ahora, la configuración principal está lista, pero antes de empezar a construir, necesitas preparar el proyecto
00:02:53en sí mismo. Lo primero que hay que configurar es el archivo Claude.md, que es básicamente el archivo para guiar al
00:02:59agente sobre las prácticas que quieres que siga. El Claude.md que añadimos contiene todas las mejores prácticas que
00:03:05siempre mencionamos. Tenemos un video completo dedicado a esto donde repasamos las mejores prácticas para
00:03:10el archivo Claude.md, que puedes ver en el canal. Aparte del Claude.md, necesitas algunas otras
00:03:15cosas en su lugar también. Por defecto, Claude genera SVG y los usa como marcadores de posición para imágenes. Pero
00:03:21estos SVG no serán suficientes para los visuales de nuestra tienda, así que creamos una habilidad para cubrir el vacío. Creamos una
00:03:26habilidad de generación de imágenes con Gemini, que permite que cualquier agente en el que la instales llame a la CLI de Gemini y
00:03:32le indique que genere imágenes para el sitio web. La habilidad contiene instrucciones sobre cómo llamar a la CLI de Gemini
00:03:38y dónde guardar las imágenes generadas. Y debido a que la CLI de Gemini tiene la generación de imágenes integrada, no hay
00:03:44necesidad de una clave de API por separado, por lo que puedes usar esta habilidad directamente confiando en la autenticación
00:03:50de la CLI de Gemini. Aparte de la generación de imágenes, también construimos otra habilidad para nuestra propia comodidad. La habilidad de prototipado
00:03:55funciona de tal manera que, siempre que le pides al agente un cambio de diseño, primero crea un archivo HTML
00:04:01que puedes previsualizar, y una vez que lo has visto, aplica ese cambio al diseño de la aplicación. El archivo
00:04:05skill.md contiene detalles sobre todo el flujo de trabajo dividido en dos fases. Una vez que estas habilidades están
00:04:11en su lugar, hay algunos ganchos que también debes configurar y conectar en el archivo settings.json dentro de la carpeta .claud.
00:04:17Estos ganchos actúan básicamente como barandillas para Claude. Por ejemplo, el script usado antes de la herramienta puede
00:04:22detener a Claude antes de que envíe cambios directamente a la aplicación sin tu aprobación. Puedes configurar tantos
00:04:28ganchos como quieras. Así que, con esta configuración establecida, estábamos listos para construir la aplicación. Pero antes de seguir
00:04:33adelante, escuchemos a nuestro patrocinador, Willow Voice. Si pasas la mayor parte del día escribiendo correos electrónicos,
00:04:37mensajes de Slack, documentos y prompts, estás trabajando mucho más lento de lo que deberías. Willow Voice te permite
00:04:42hablar en lugar de escribir en cualquier lugar de tu computadora, y el texto aparece al instante. No es como el
00:04:47dictado integrado que se equivoca una palabra sí y otra no. Willow es tres veces más preciso, y
00:04:52realmente formatea todo correctamente con párrafos y estructura. Lo mejor es que se adapta a lo que estás
00:04:57haciendo: formal cuando escribes un correo, casual cuando estás en Slack y técnico cuando estás programando.
00:05:02Aprende cómo escribes con el tiempo para que el resultado suene como tú, no como un robot. Más de 100,000 profesionales
00:05:07lo usan a diario, y cuenta con certificación SOC2 y cumplimiento HIPAA con retención de datos cero, por lo que tus palabras
00:05:13se mantienen privadas. He estado usándolo durante la última semana, y volver a escribir se siente dolorosamente lento ahora.
00:05:18Descarga Willow Voice gratis usando el enlace en la descripción. Ahora, una vez que esto esté en su lugar, puedes
00:05:23simplemente indicarle a Claude lo que quieres construir. Debes describir la página de inicio que deseas,
00:05:27al igual que cómo mencionamos el estilo que queríamos que siguiera la página de destino. Y debido a que habíamos
00:05:31configurado la habilidad, cargó la habilidad de prototipado primero. Así que, en lugar de realizar los cambios directamente en
00:05:36la aplicación real, escribió código HTML en el que finalizó el diseño y luego esperó nuestra aprobación.
00:05:41También abrió el diseño en una nueva pestaña para que pudiéramos previsualizarlo. La primera versión que construyó
00:05:46parecía limpia y funcionaba bien visualmente, pero usó secciones de marcador de posición en la página de destino donde las
00:05:51imágenes deberían haber ido. Dado que habíamos instalado la habilidad de generación de imágenes, debería haber cargado
00:05:55eso directamente y usado la generación de imágenes en primer lugar. Así que le pedimos nuevamente que usara la habilidad de
00:06:00generación de imágenes y generara imágenes reales para esas secciones de marcador de posición. Después de que le dimos esa instrucción,
00:06:05lanzó múltiples CLI de Gemini a través de la herramienta bash y las abrió en modo YOLO para que la CLI de Gemini
00:06:12no fuera bloqueada por ningún mensaje de permiso. Claude lanzó múltiples terminales y todas ellas
00:06:17comenzaron a generar imágenes en paralelo. La generación de imágenes lleva más tiempo, así que tienes que esperar a que
00:06:22termine. Una vez que las imágenes estuvieron listas, puedes revisar el sitio web y se verá mucho más pulido. Y
00:06:27como los prompts de generación de imágenes también fueron controlados por Claude, las imágenes coincidían muy bien con el estilo de la interfaz.
00:06:33Ahora, con los visuales añadidos, el sitio web estaba completo. Puedes iterar sobre el diseño en este
00:06:38punto. Como no teníamos más cambios que hacer, le pedimos a Claude que procediera e implementara la aplicación en la tienda.
00:06:43Te hará algunas preguntas relacionadas con cómo quieres que se implemente la aplicación, como si quieres que
00:06:48esté sincronizada con la tienda en vivo o no, lo cual hicimos, así que elegimos esa opción. Una vez que respondes a sus
00:06:53preguntas, procedió a convertir el diseño HTML en la aplicación en sí, no directamente a la aplicación principal,
00:06:58sino a la aplicación de desarrollo que habíamos creado. Imitó el diseño uno a uno y puedes previsualizar la aplicación
00:07:03tú mismo para ver que ha imitado completamente el diseño. Ahora, fue bueno que usáramos la vista previa HTML
00:07:08antes de implementarlo realmente en la aplicación, porque este proceso toma mucho tiempo. Y si
00:07:13estuvieras iterando en el diseño usando este proceso, habrías desperdiciado mucho tiempo y tokens. La creación de prototipos HTML
00:07:18era mucho más rápida y fácil de iterar. Además, si estás disfrutando de nuestro contenido, considera
00:07:23presionar el botón de apoyo porque nos ayuda a crear más contenido como este y llegar a más personas.
00:07:28Hasta este punto, la aplicación está sincronizada con la URL de la tienda real. El diseño que acabas de construir está en el
00:07:34servidor local para previsualizarlo en la máquina local y también se encuentra dentro de la vista previa del tema, que es donde básicamente
00:07:39envió el tema a la aplicación de desarrollo para que podamos previsualizarlo en vivo. No es la versión final,
00:07:44es solo un borrador. Así que simplemente le dijimos que sincronizara en vivo y usó la CLI de Shopify y las herramientas MCP
00:07:50para sincronizar el diseño con la URL principal configurada para la tienda Shopify. Y después de esto,
00:07:55Claude habrá actualizado el diseño en vivo en tu aplicación. Ahora, de manera similar, puedes pedirle que actualice todas las
00:08:00demás páginas de tu sitio web y seguirá el mismo proceso. Primero creará prototipos de las secciones,
00:08:05luego las actualizará en la aplicación real y después las sincronizará con la tienda alojada. Pero hay algunas cosas
00:08:10que aún necesitarás hacer en tu tienda para que esté lista. En este punto, no podrás agregar
00:08:14productos, porque actualizar los productos y prepararlos para la implementación requiere la API de administración de Shopify.
00:08:20No se puede hacer sin la API de administración, porque esto es lo que te da acceso a las partes principales
00:08:25de la tienda, como la página de acerca de, los productos y otras funciones de administración. Hasta ahora, solo estábamos
00:08:30haciendo cambios en el tema y aplicando ese tema a la tienda misma para obtener visuales. Para conectar
00:08:35la API de administración, necesitas autenticarla con la tienda usando la CLI de Shopify. Una vez que ingresas el
00:08:41comando de autenticación con tu enlace de autorización, abrirá el navegador desde donde puedes autenticarte. Después
00:08:46de eso, podrás crear páginas relacionadas con la tienda y usará el MCP de Shopify y la herramienta CLI
00:08:52juntos para actualizar las otras secciones de la página. Ahora, puedes indicarle que añada otros productos a
00:08:56tu tienda para que puedas empezar a vender. Pero para añadir productos, necesitas configurar los permisos
00:09:01de la tienda Shopify para que pueda acceder a las herramientas a través de la API de administración. Añadir productos necesita más
00:09:06permisos que los que dimos anteriormente. Solo habíamos añadido el permiso de escribir contenido, pero para añadir
00:09:11productos, necesitamos permisos adicionales como escribir productos y leer y escribir publicaciones.
00:09:16Entonces, necesitas ejecutar el comando de autenticación de nuevo, pero con permisos añadidos. Una vez que eso esté hecho,
00:09:20puedes pedirle a Claude que añada productos a tu sitio. Y una vez que lo haga, puedes revisar la aplicación y ver
00:09:25los productos listados allí, junto con la tienda lista con detalles de producto y funciones de carrito, y
00:09:30también puedes verificar los productos en el panel de administración. Pero cualquiera que visite tu tienda aún no podrá realizar
00:09:35compras en este punto. Para que la tienda esté realmente lista para vender productos, necesitas añadir detalles de
00:09:40pago para que se puedan procesar los pagos. También necesitarías seleccionar un plan porque, a menos que lo hagas,
00:09:45quien visite tu tienda deberá ingresar una contraseña para verla, lo cual obviamente no es factible. Así que,
00:09:51una vez que hayas seleccionado tu plan, podrás empezar a vender tus productos. Ahora, toda la guía de configuración
00:09:55y todas las habilidades creadas aquí se pueden encontrar en AI Labs Pro para este video y para todos nuestros videos anteriores,
00:10:02desde donde puedes descargarlos y usarlos para tus propios proyectos. Si encontraste valor en lo que hacemos
00:10:07y quieres apoyar al canal, esta es la mejor manera de hacerlo. El enlace está en la descripción.
00:10:11Eso nos lleva al final de este video. Si te gustaría apoyar al canal y ayudarnos a seguir haciendo
00:10:16videos como este, puedes hacerlo usando el botón de super gracias de abajo. Como siempre,
00:10:20gracias por ver y te veré en el próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video