micas06gua / store-framework

store-framework-template

The template repository for the Store Framework course on Learning Lab.

store-framework's Issues

Basic configurations

Configurações básicas

Para o vídeo de setup do Mac, clique aqui

Introdução

Antes de começar a botar a mão na massa e aprender mais sobre o Store Framework do VTEX IO, algumas configurações básicas precisam ser feitas por você, como:

• Instalar o Git;
• Instalar o Toolbelt;
• Fazer login em uma conta VTEX;
• Criar um workspace de desenvolvimento;
• Linkar seus arquivos locais com a plataforma.

Confira abaixo o passo a passo para cada uma dessas configurações:

Instalando o Git

Instale o Git no seu computador acessando o link abaixo e selecionando o software usado pelo seu computador (Windows, MAC ou Linux):

https://git-scm.com/downloads

Instalando o Toolbelt

O Toolbelt é a ferramenta de linha de comando do VTEX IO. É ele quem permite a realização de qualquer atividade na plataforma, como criar um novo workspace de desenvolvimento, fazer login em uma conta VTEX, desenvolver novas apps, gerenciar as já existentes, etc.

Uma vez que o Toolbelt é quem estabelece a comunicação entre o desenvolvedor e a plataforma, você precisará dele para conseguir realizar todas as atividades propostas durante o curso do Store Framework.

1. Instale o Node.js. Se o computador que você está usando é MAC, instale também o Yarn;
2. Execute o comando npm i -g vtex no seu terminal se você estiver trabalhando de um Windows e yarn global add vtex no MAC;

Você pode executar o comando vtex-v (Windows) ou vtex (MAC) para confirmar se a instalação do Toolbelt ocorreu como esperado.

Com a instalação concluída, o seu próximo passo deve ser logar em uma conta VTEX.

Fazendo login

1. Execute o comando vtex login contaVTEX no seu terminal, substituindo contaVTEX pelo nome real da conta em que você deseja trabalhar. Por exemplo, vtex login appliancetheme.

2. Uma vez logado, execute o comando vtex whoami para confirmar em qual conta e workspace você está.

Workspaces nada mais são do que espaços de trabalho. Na plataforma do VTEX IO, as contas possuem três tipos principais de workspaces: master, de produção e desenvolvimento.

O próximo passo irá fazer com que um workspace de desenvolvimento seja criado para você, permitindo que as configurações feitas nas atividades do curso não alterem a versão final pública da loja.

Criando um workspace de desenvolvimento

1. Execute vtex use nome-do-workspace, substituindo nome-do-workspace pelo nome desejado. Por exemplo, vtex use devworkspace.

Visualizando seu workspace

Depois que seu workspace foi criado, você conseguirá acessá-lo a partir do link https://{workspace}--{conta}.myvtex.com, substituindo {workspace} e {conta} pelo workspace criado anteriormente e pelo nome da conta, respectivamente. Por exemplo, https://devworkspace--appliancetheme.myvtex.com

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Com todas as configurações básicas concluídas, você está pronto pra começar o curso!

Para continuar clique em Close Issue

Course functioning

Funcionamento do curso

Objetivo

É importante estabelecer que este não é um curso expositivo. O seu objetivo é ensinar os participantes sobre o Store Framework do VTEX IO a partir de atividades práticas. Por isso, para que se consiga avançar, é preciso que um pouco do seu tempo e dedicação sejam investidos.

No começo do curso você recebeu um repositório com código mínimo e queremos que, ao completar todas as tarefas, você o tenha transformado em uma loja completa e funcional.

Introdução

O curso é divido em etapas. Ao começo de cada etapa, você receberá instruções iniciais, como você já recebeu nesse e no anterior. Você deve ler todo o conteúdo apresentado e receberá, ao fim, uma pequena atividade.

Para que suas respostas sejam enviadas, siga os seguintes passos:

1. Abra uma nova janela do VSCode
2. Execute Ctrl + Shift + P (Cmd + Shift + P)
3. Digite git clone

4. Digite o nome do repositório como https://github.com/micas06gua/store-framework
5. Confirme e selecione o lugar onde deseja baixar o repositório
6. Clique em Open na notificação que abre no canto inferior direito

7. Abra a página de instalação do nosso robô de testes e clique em Configure;
   • ⚠️ Note que este bot é diferente do bot do GitHub Learning Lab. Ele é responsável por analisar a resposta de cada etapa do curso.
8. Selecione Only selected repositories, clique em Select repositories e digite store-framework;
9. Clique em micas06gua/store-framework e clique em Install.

Submetendo as suas respostas

Ao terminar de ler todo o conteúdo e fazer a atividade proposta, você deve enviar a sua resposta seguindo os passos abaixo:

1. Clique em Source Control, no menu lateral do VSCode;

2. Clique no + na seção de CHANGES;

3. Escreva alguma mensagem que represente sua mudança. Por exemplo:

4. Clique no ✓ (Commit);

5. Clique no canto inferior esquerdo;

6. Quando uma nova janela aparecer, coloque o nome da Branch que lhe foi dado no começo do texto e clique em + Create new branch...;

7. Para finalizar, clique na nuvem no canto inferior esquerdo:

Quando terminar de fazer todo o fluxo, nosso robô responderá se você conseguiu ou não acertar a resposta que esperávamos. Se sim, receberá uma resposta como:

Em seguida, você receberá uma outra resposta que indicará os próximos passos:

Se você é familiarizado com o git, todo esse fluxo equivale a criar uma branch com um nome predefinido, fazer commit das mudanças e dar push.

Tentando novamente

Ao longo do curso, é possível que você não consiga completar corretamente a atividade na primeira tentativa. Se isso acontecer, você receberá uma mensagem de feedback que indicará qual foi o por quê da falha:

Você pode submeter quantas respostas você quiser, basta refazer todo o processo explicado na seção anterior.
⚠️ No item 6 não será necessário refazer tudo, uma vez que a branch do step já foi criada. No item 7, ao invés de ver uma nuvem, você verá algumas setas, basta clicar nelas para reenviar:

Progresso do curso

A qualquer momento do curso você pode acompanhar o seu progresso voltando na página inicial. Nela, serão indicados todos os steps, quais você já completou e um botão para você voltar para o step de onde parou:

Não esqueça de linkar

A todo momento, abrindo o terminal do VSCode, você pode executar um vtex link e acompanhar a evolução do seu projeto em https://{workspace}--{conta}.myvtex.com. Certifique-se que visualmente a solução é equiparável com o que foi apresentado e que nenhum erro aconteceu no link.

⚠️ Cuidado ⚠️

Não crie issues e PRs durante o fluxo do curso, isso pode interferir no seu funcionament

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Para continuar clique em Close issue

Store Framework 101

Store Framework 101

Antes de começarmos a colocar as mãos na massa vamos passar por alguns conceitos importantes que serão recorrentemente referenciados daqui pra frente.

Introdução

O Store Framework é uma ferramenta commerce low-code de construção de frentes de loja únicas e customizadas.

O fluxo de construção se dá pela customização de um tema, que pode ser trabalhado em diferentes workspaces sem que o ambiente de produção seja impactado.

Tema

Um tema é, essencialmente, um arranjo de blocos e suas posições. Nele são definidas todas as customizações, posições e estilos de cada um dos blocos que o compõem. Também é possível declarar novas páginas em um tema que, futuramente, podem representar páginas institucionais ou landing pages promocionais (dia das mães, black friday, cyber monday). O resultado final de um tema e o conteúdo que o compõe é a frente de uma loja.

Blocos

Os blocos são a abstração mínima no Store Framework. Eles declaram pequenas peças que compõem o layout de uma loja. Por mais que pareçam simples, os blocos tem alto poder de customização, fazendo com que design complexos sejam possíveis de ser alcançados. Há quatro níveis de customização para blocos:

• estilo semântico (styles);
• propriedades (props);
• classes css (handles);
• filhos (children)

Workspaces

Ambientes de trabalho protegidos que representam uma cópia bem próxima do está montado em produção, possibilitando a evolução de temas sem que nada na loja seja afetado.

---

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

---

Para continuar clique em Close issue