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/fobarros/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 fobarros/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

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

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

Hello, World!

✨ Branch: helloworld

Introdução

Começamos nossa jornada pelo clássico "Hello, World!". Para criar algo do tipo, precisamos conhecer os blocos do Store Framework e usar um que nos possibilite a criação de textos. Este bloco se chama Rich Text.

Rich Text

O Rich Text é somente um das dezenas de blocos disponíveis no Store Framework. É um bloco que parece simples, mas que possibilita uma série de customizações para criar textos. Para começar, todo texto escrito no Rich Text suporta linguagem Markdown, isso faz com que a estilização do texto seja muito mais fácil.

Olhando a documentação do bloco é possível encontrar a especificação técnica. Uma das seções presentes é a de Blocks API nela é vista toda a lista de propriedades (props) que o Rich Text possui. As propriedades são o principal ponto de customização de um bloco, são elas que garantem que um mesmo bloco possa ter visual e comportamento completamente diferente, dependendo de como for configurado.

Começando

Vamos então começar a personalizar a home page. No seu tema é possível encontrar um arquivo chamado home.jsonc na pasta /store/blocks. Neste arquivo é determinada a organização dos blocos que se deseja usar. A linguagem para composição do layout é simples e baseada em JSON.

No home.jsonc se ver um bloco que é padrão em todos os temas: store.home. Este bloco determina os blocos filhos que estarão expostos na home page.

{
  "store.home": {
    "blocks": []
  }
  ...
}

Vamos então usar o Rich Text em seu corpo:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  }
  ...
}

Dessa forma, o store.home agora sabe que precisará renderizar um Rich Text. Todavia, ainda não especificamos qual o visual desse Rich Text. Para isso, precisamos fazer uma definição de bloco.

Definição de blocos

A definição de blocos deve ser sempre feita fora de qualquer outro bloco, no nível da raiz do arquivo JSON.

{
  "store.home": {
    "blocks": [
      "rich-text" <----- Aqui o bloco está sendo usado dentro de outro
    ]
  },
  "rich-text": { <----- Aqui está na raiz
  }
}

Na definição é possível determinar o comportamento e visual de um bloco. Para tal devem ser usados pontos de customização, começaremos usando as props do Rich Text:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {

    }
  }
}

Observe novamente a documentação do Rich Text e vamos, então, definir as props que usaremos para customizá-lo.

Queremos fazer um simples "Hello, World!", olhando nas props vemos uma que se chama: text (Text written in markdown language to be displayed). Essa é, então, a prop que determinará qual o texto que será exibido.

Incluindo essa prop temos, então:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "Hello, World!"
    }
  }
}

Olhando a documentação do Markdown vemos que para deixar itálico basta colocar * antes e depois do texto:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*"
    }
  }
}

Para posicioná-lo ao centro, podemos adicionar a prop textPosition e atribuir a ela o valor CENTER:

{
  "store.home": {
    "blocks": [
      "rich-text"
    ]
  },
  "rich-text": {
    "props": {
      "text": "*Hello, World!*",
      "textPosition": "CENTER"
    }
  }
}

Atividade

Defina um Rich Text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.

ℹ️ Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

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

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.