Aula 76 – Loja Shopify do Zero ao Avançado: Shopify CLI e ferramentas de desenvolvimento 🚀

📚 O que você vai aprender nesta aula

Nesta aula, mergulharemos no universo do desenvolvimento Shopify com o Shopify CLI (Command Line Interface) e outras ferramentas essenciais. Você aprenderá:

• O que é o Shopify CLI e como instalá-lo.
• Gerenciar temas com o Shopify CLI: download, upload, desenvolvimento e deploy.
• Criar, visualizar e testar alterações em temas localmente.
• Utilizar o Theme Kit como alternativa ao CLI.
• Boas práticas e dicas para otimizar seu fluxo de desenvolvimento.
• Introdução ao Shopify Hydrogen (menção breve para aprofundamento em aulas futuras).

🔗 Conectando com aulas anteriores

Nas aulas anteriores, trabalhamos com a interface administrativa do Shopify, personalizando temas diretamente na plataforma. Aprendemos sobre Liquid, HTML, CSS e JavaScript no contexto do Shopify. Agora, daremos um salto na eficiência do desenvolvimento com ferramentas que agilizam o processo e permitem um controle de versão mais robusto. Lembram daquela dificuldade em gerenciar diferentes versões do tema? O CLI resolve isso! 😉

📖 Conteúdo Principal

O Shopify CLI é uma ferramenta de linha de comando poderosa que permite gerenciar diversos aspectos do desenvolvimento de sua loja Shopify, principalmente temas. Ele oferece uma maneira mais eficiente de desenvolver, testar e implantar temas, além de integrar com outras ferramentas de desenvolvimento.

Instalação do Shopify CLI:

Você pode instalar o Shopify CLI via npm (Node Package Manager):

bash

npm install -g @shopify/cli

Comandos básicos:

• shopify theme init: Cria um novo tema a partir de um tema existente (Dawn, por exemplo) ou um tema em branco.
• shopify theme serve: Inicia um servidor de desenvolvimento local para visualizar as alterações em tempo real.
• shopify theme deploy: Implanta o tema para sua loja Shopify.
• shopify theme download: Baixa o tema da sua loja para a sua máquina.
• shopify theme pull: Baixa o tema e mantém sincronizado com a sua loja.
• shopify theme push: Envia as alterações locais para o tema na sua loja.

Theme Kit (alternativa):

O Theme Kit é uma ferramenta mais antiga, mas ainda funcional, que também permite gerenciar temas via linha de comando. Ele utiliza um arquivo de configuração config.yml para conectar com a sua loja.

Fluxo de trabalho recomendado:

1. shopify theme init meu-tema: Inicializa um novo tema.

2. cd meu-tema: Entra na pasta do tema.

3. shopify theme serve: Inicia o servidor de desenvolvimento.

4. Faça suas alterações nos arquivos do tema (HTML, CSS, JavaScript, Liquid).

5. shopify theme push: Envia as alterações para sua loja.

Shopify Hydrogen (breve introdução): O Hydrogen é um framework React para desenvolvimento de lojas Shopify headless, que abordaremos com mais profundidade em aulas futuras. Ele oferece uma experiência de desenvolvimento moderna e performática, ideal para projetos mais complexos.

💻 Exemplos Práticos

Exemplo de criação de um tema e upload de uma alteração:

1. shopify theme init meu-tema --name=MeuTemaIncrivel

2. cd meu-tema

3. Abra o arquivo sections/main-product.liquid e adicione um título

.

4. shopify theme serve (observe as mudanças localmente em http://127.0.0.1:9292)

5. shopify theme push (as alterações serão enviadas para sua loja).

!Exemplo de alteração no tema (Screenshot ilustrativo de uma alteração no tema)

🎯 Exercícios e Desafios

1. Instale o Shopify CLI e crie um novo tema baseado no Dawn.

2. Modifique o arquivo sections/header.liquid adicionando seu nome no cabeçalho.

3. Faça o deploy do tema modificado para um tema de desenvolvimento na sua loja.

4. Explore a documentação do Shopify CLI e teste outros comandos.

📝 Resumo da Aula

Aprendemos sobre o poder do Shopify CLI e do Theme Kit para gerenciar temas de forma eficiente. Vimos como instalar, utilizar comandos básicos e otimizar o fluxo de trabalho de desenvolvimento. Também tivemos uma breve introdução ao Shopify Hydrogen, que exploraremos mais a fundo em breve.

🚀 Preparação para próxima aula

Na próxima aula, vamos mergulhar no Shopify Hydrogen e construir nossa primeira loja headless! Prepare-se para um novo patamar de desenvolvimento Shopify.

📚 Recursos Adicionais

• Documentação do Shopify CLI
• Documentação do Theme Kit

Lembrem-se: a prática leva à perfeição! Quanto mais vocês utilizarem essas ferramentas, mais familiarizados ficarão com o processo e mais eficientes serão no desenvolvimento de lojas Shopify. Não hesitem em perguntar se tiverem dúvidas! 😉