Transcript
00:00:00Configurar lojas Shopify está mais fácil do que nunca, porque agora você simplesmente as combina com
00:00:04agentes de IA que você usa para programar e deixa que eles cuidem de tudo. Mas apenas conectar o Claude Code à
00:00:09sua loja não é suficiente por si só. Para acabar com uma loja que não pareça genérica como
00:00:14todas as outras lojas Shopify por aí, você precisa combiná-lo com alguns elementos-chave na sua configuração.
00:00:19Ao final deste vídeo, você conhecerá o fluxo de trabalho completo que pode usar para configurar seu próprio
00:00:23pipeline da Shopify de ponta a ponta, para que possa começar a vender seus produtos imediatamente.
00:00:28Você precisa seguir alguns passos para se preparar para construir sua loja. A primeira
00:00:32coisa de que você precisa é uma conta de parceiro Shopify, então vá ao navegador e inscreva-se. A conta de
00:00:37parceiro é importante porque lhe dá acesso a ferramentas de desenvolvimento que permitem experimentar
00:00:41a plataforma. É basicamente um ambiente de testes (sandbox) para suas lojas, onde você pode criar seu aplicativo da maneira que
00:00:46normalmente faria, ao mesmo tempo que expõe ferramentas de desenvolvimento como pagamentos falsos e usuários de teste, para que você
00:00:51possa testar o aplicativo antes que ele entre no ar. E mais tarde, se achar que seu aplicativo está pronto para começar
00:00:56a vender, basta adicionar integrações de pagamento e você pode mover facilmente a conta de desenvolvimento para a
00:01:01conta de comerciante, onde você pode começar a vender produtos reais para pessoas reais.
00:01:05Agora, depois de criar o aplicativo no projeto, é hora de instalar o CLI da Shopify. Você pode fazer isso
00:01:10copiando o comando de instalação da documentação do CLI e executando-o no terminal. Assim que executá-lo, você
00:01:15será solicitado a selecionar entre um aplicativo React ou um aplicativo de extensão. Escolhemos o aplicativo React porque é
00:01:20isso que mais desenvolvemos e é mais fácil personalizar o aplicativo dessa forma. Depois disso, você pode escolher o
00:01:26idioma que deseja usar e escolhemos TypeScript por causa de sua segurança de tipo e recursos de segurança em
00:01:31comparação com JavaScript. Depois de passar por essa configuração, ele instalará todas as dependências necessárias para
00:01:37executar o aplicativo. Após a instalação das dependências, o projeto estará pronto e, quando você o executar, verá
00:01:41um modelo básico do aplicativo de onde você pode começar a fazer alterações. Então, assim que o CLI
00:01:46for instalado, há outras coisas que você precisa instalar, começando pelo kit de ferramentas de IA da Shopify, que
00:01:51agrega valor ao processo de construção. A parte mais importante é o MCP, e o comando de instalação para este
00:01:56MCP para todos os agentes de codificação de IA pode ser encontrado na documentação. Como estávamos usando o Claude Code, copiamos o comando
00:02:03para o Claude e instalamos o MCP, e você pode fazer o mesmo com qualquer ferramenta de codificação de sua escolha. Uma vez que o MCP
00:02:08está instalado, ele expõe suas ferramentas ao Claude, mas o MCP por si só não é suficiente, porque todas as ferramentas nele
00:02:14estão basicamente lá para ajudar o Claude a construir melhor. O MCP não tem como enviar alterações para sua loja em execução
00:02:19na nuvem. Ele contém apenas documentação e conhecimento sobre a API da Shopify, além de outras validações. Portanto,
00:02:25essa configuração não era suficiente para construir por conta própria. E é por isso que o CLI é importante, porque ele
00:02:30é, na verdade, a ponte entre o aplicativo Shopify e a configuração local. Além do MCP, você também precisa
00:02:35instalar o plugin. O plugin é importante porque contém vários agentes e habilidades agrupados.
00:02:40Você pode instalá-lo seguindo os comandos de instalação. Após executar os comandos de instalação,
00:02:44execute o comando de recarregar plugins e todos os agentes e habilidades estarão prontos para uso.
00:02:49Agora a configuração principal está concluída, mas antes de começar a construir, você precisa preparar o projeto
00:02:53em si. A primeira coisa a configurar é o arquivo Claude.md, que é basicamente o arquivo para orientar o
00:02:59agente sobre as práticas que você deseja que ele siga. O Claude.md que adicionamos contém todas as melhores práticas que
00:03:05sempre mencionamos. Temos um vídeo completo dedicado a isso, onde percorremos as melhores práticas para
00:03:10o arquivo Claude.md, que você pode conferir no canal. Além do Claude.md, você precisa de algumas outras
00:03:15coisas instaladas também. Por padrão, o Claude gera SVGs e os usa como espaços reservados para imagens. Mas
00:03:21esses SVGs não servem para o visual da nossa loja, então criamos uma habilidade para cobrir a lacuna. Criamos uma
00:03:26habilidade de geração de imagens do Gemini, que permite que qualquer agente em que você a instale chame o CLI do Gemini e
00:03:32o instrua a gerar imagens para o site. A habilidade contém instruções sobre como chamar o CLI do Gemini
00:03:38e onde salvar as imagens geradas. E como o CLI do Gemini tem geração de imagens integrada, não há
00:03:44necessidade de uma chave de API separada, então você pode usar essa habilidade diretamente, apenas contando com a autenticação
00:03:50do CLI do Gemini. Além da geração de imagens, também criamos outra habilidade para facilitar nosso trabalho. A habilidade de
00:03:55prototipagem funciona de forma que, sempre que você pede ao agente uma mudança de design, ele primeiro cria um arquivo HTML
00:04:01que você pode visualizar e, depois de visualizado, ele aplica essa alteração ao design do aplicativo. O
00:04:05arquivo skill.md contém detalhes sobre todo o fluxo de trabalho, dividido em duas fases. Assim que essas habilidades estiverem
00:04:11em vigor, existem alguns ganchos (hooks) que você também configura e conecta no settings.json dentro da pasta .claud.
00:04:17Esses ganchos basicamente agem como guardrails para o Claude. Por exemplo, o script usado antes da ferramenta pode
00:04:22parar o Claude antes que ele envie alterações diretamente para o aplicativo sem sua aprovação. Você pode configurar quantos
00:04:28ganchos desejar. Então, com essa configuração em vigor, estávamos prontos para realmente construir o aplicativo. Mas antes de prosseguirmos,
00:04:33vamos ouvir nosso patrocinador, Willow Voice. Se você passa a maior parte do dia digitando e-mails,
00:04:37mensagens no Slack, documentos e prompts, você está trabalhando muito mais devagar do que deveria. O Willow Voice permite que você
00:04:42fale em vez de digitar em qualquer lugar do seu computador, e o texto aparece instantaneamente. Não é como seu
00:04:47ditado integrado que erra a cada duas palavras. O Willow é três vezes mais preciso, e ele
00:04:52realmente formata tudo corretamente com parágrafos e estrutura. A melhor parte é que ele se adapta ao que você está
00:04:57fazendo: formal quando você está escrevendo um e-mail, casual quando está no Slack e técnico quando está codificando.
00:05:02Ele aprende como você escreve com o tempo para que a saída soe como você, não como um robô. Mais de 100.000 profissionais
00:05:07o usam diariamente, e ele é certificado SOC2 com conformidade HIPAA e retenção de dados zero, para que suas palavras
00:05:13permaneçam privadas. Tenho usado durante a última semana, e voltar a digitar parece dolorosamente lento agora.
00:05:18Baixe o Willow Voice gratuitamente usando o link na descrição. Agora, uma vez que isso esteja no lugar, você pode
00:05:23apenas pedir ao Claude o que deseja construir. Você precisa descrever a página de destino que deseja,
00:05:27exatamente como mencionamos o estilo que queríamos que a página de destino seguisse. E como havíamos
00:05:31configurado a habilidade, ele carregou a habilidade de prototipagem primeiro. Então, em vez de fazer as alterações diretamente no
00:05:36aplicativo real, ele escreveu um código HTML no qual finalizou o design e aguardou nossa aprovação.
00:05:41Ele também abriu o design em uma nova guia para que pudéssemos visualizá-lo. A primeira versão que ele construiu
00:05:46parecia limpa e funcionava bem visualmente, mas usava seções de espaço reservado na página de destino onde as
00:05:51imagens deveriam ter ido. Como tínhamos instalado a habilidade de geração de imagens, ele deveria ter carregado
00:05:55isso diretamente e usado a geração de imagens em primeiro lugar. Então, pedimos novamente para usar a habilidade de
00:06:00geração de imagens e realmente gerar imagens para essas seções de espaço reservado. Depois que demos esse comando,
00:06:05ele lançou vários CLIs do Gemini através da ferramenta bash e os abriu no modo YOLO, para que o CLI do Gemini
00:06:12não fosse bloqueado por nenhum prompt de permissão. O Claude lançou vários terminais e todos eles
00:06:17começaram a gerar imagens em paralelo. A geração de imagens leva mais tempo, então você tem que esperar até que
00:06:22termine. Uma vez que as imagens estivessem prontas, você pode verificar o site e ele parecerá muito mais polido. E
00:06:27como os comandos de geração de imagens também eram controlados pelo Claude, as imagens combinaram muito bem com o estilo da interface.
00:06:33Agora, com os visuais adicionados, o site estava completo. Você pode iterar sobre o design neste
00:06:38ponto. Como não tínhamos mais alterações a fazer, pedimos ao Claude que prosseguisse e implementasse o aplicativo na loja.
00:06:43Ele fará algumas perguntas relacionadas a como você deseja que o aplicativo seja implementado, como se você
00:06:48quer que ele seja sincronizado com a loja ativa ou não, o que fizemos, então escolhemos essa opção. Depois de responder às suas
00:06:53perguntas, ele prosseguiu para converter o design HTML no próprio aplicativo, não diretamente no aplicativo principal,
00:06:58mas no aplicativo de desenvolvimento que havíamos criado. Ele imitou o design um para um e você pode visualizar o aplicativo
00:07:03você mesmo para ver que ele imitou completamente o design. Agora, foi uma coisa boa termos usado a visualização HTML
00:07:08antes de realmente implementá-lo no aplicativo, porque esse processo leva muito tempo. E se você
00:07:13estivesse iterando no design usando esse processo, teria desperdiçado muito tempo e tokens. A prototipagem em HTML
00:07:18foi muito mais rápida e fácil de iterar. Além disso, se você está gostando do nosso conteúdo, considere
00:07:23pressionar o botão de hype, porque isso nos ajuda a criar mais conteúdo como este e alcançar mais pessoas.
00:07:28Até este ponto, o aplicativo está sincronizado com a URL da loja real. O design que você acabou de construir está no servidor
00:07:34local para visualização na máquina local e também fica dentro da visualização do tema, que é onde ele
00:07:39basicamente enviou o tema para o aplicativo de desenvolvimento para que possamos visualizá-lo ao vivo. Não é a versão final,
00:07:44é apenas um rascunho. Então, simplesmente dissemos a ele para sincronizar o ao vivo e ele usou o CLI da Shopify e as ferramentas
00:07:50MCP para sincronizar o design com a URL principal configurada para a loja Shopify. E depois disso,
00:07:55o Claude terá atualizado o design ao vivo em seu aplicativo. Agora, da mesma forma, você pode pedir que ele atualize todas as
00:08:00outras páginas do seu site e ele seguirá o mesmo processo. Ele primeiro prototipará as seções,
00:08:05depois as atualizará no aplicativo real e depois as sincronizará com a loja hospedada. Mas há algumas coisas
00:08:10que você ainda precisará fazer em sua loja para deixá-la pronta. Neste ponto, você não conseguirá adicionar
00:08:14produtos, porque atualizar os produtos e prepará-los para implementação requer a API de administrador da Shopify.
00:08:20Isso não pode ser feito sem a API de administrador, porque é isso que lhe dá acesso às partes principais
00:08:25da loja, como a página sobre, produtos e outros recursos de gerenciamento. Até agora, estávamos apenas
00:08:30fazendo alterações no tema e aplicando esse tema à própria loja para obter visuais. Para conectar
00:08:35a API de administrador, você precisa autenticá-la com a loja usando o CLI da Shopify. Uma vez que você inserir o
00:08:41comando de autenticação com seu link de autenticação, ele abrirá o navegador de onde você pode se autenticar. Depois
00:08:46disso, você poderá criar páginas relacionadas à loja e ele usará o MCP da Shopify e a ferramenta CLI
00:08:52juntos para atualizar as outras seções da página. Agora, você pode dizer a ele para adicionar outros produtos à
00:08:56sua loja para que você possa começar a vender. Mas para adicionar produtos, você precisa configurar as permissões
00:09:01para a loja Shopify, para que ele possa acessar as ferramentas via API de administrador. Adicionar produtos precisa de mais
00:09:06permissões do que as que demos anteriormente. Tínhamos adicionado apenas a permissão de gravar conteúdo, mas para adicionar
00:09:11produtos, precisamos de permissões adicionais, como gravar produtos e ler e gravar publicações.
00:09:16Então, você precisa executar o comando de autenticação novamente, mas com permissões adicionais. Uma vez feito isso,
00:09:20você pode pedir ao Claude para adicionar produtos ao seu site. E assim que ele fizer isso, você pode conferir o aplicativo e ver
00:09:25os produtos listados lá, junto com a loja estando pronta com detalhes dos produtos e recursos de carrinho, e
00:09:30também pode verificar os produtos no painel de administração. Mas quem visitar sua loja ainda não conseguirá fazer
00:09:35compras neste momento. Para que a loja realmente esteja pronta para vender produtos, você precisa adicionar detalhes de pagamento
00:09:40para que os pagamentos possam ser processados. Você também precisaria selecionar um plano porque, a menos que faça isso,
00:09:45quem visitar sua loja precisará inserir uma senha para vê-la, o que obviamente não é viável. Então,
00:09:51assim que você tiver selecionado seu plano, poderá começar a vender seus produtos. Agora, todo o guia de configuração
00:09:55e todas as habilidades criadas aqui podem ser encontrados no AI Labs Pro para este vídeo e para todos os nossos vídeos anteriores,
00:10:02de onde você pode baixar e usar em seus próprios projetos. Se você encontrou valor no que fazemos
00:10:07e quer apoiar o canal, esta é a melhor maneira de fazê-lo. O link está na descrição.
00:10:11Isso nos traz ao final deste vídeo. Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo
00:10:16vídeos como este, você pode fazer isso usando o botão de super thanks abaixo. Como sempre,
00:10:20obrigado por assistir e vejo você no próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video