www.codeblue.com.

br
Treinamento VTEX
IO Native

O que veremos?
Introduction
 LinkedIN

Diego Perly
Ex-VTEX, ex-TOTVS, CEO na CodeBlue.

13 anos de atuação na área de Ecommerce,

mais de 400 projetos entregues, mais de 5000
ex-alunos.

Atuou como Desenvolvedor Front-end,

Capacitação de pessoas e Gestão de parceiros.
 Uma origem pioneira

Não atendemos ao cliente final, e sim prestamos suporte para

que as agências possam voar cada vez mais alto.

Somos totalmente whitelabel e surgimos de um sonho de

permitir que as agências cresçam e se desenvolvam, sem
A primeira agência para gargalo ou pausa nos projetos por falta de profissionais.
agências do Brasil!
Não queremos apenas analisar ou recrutar, queremos
pegar qualquer problema técnico que a agência
possua e resolver!

Somos exclusivos VTEX como solução

para ecommerce!
Trilhas de
Conhecimento
CodeBlue
Overview
VTEX IO
VTEX IO é um novo framework
serverless componentizado, que
tem o objetivo de otimizar o
desenvolvimento de projetos e
facilitar a experiência do cliente.
 Substituição Assinatura

O que é VTEX?
(no ponto de vista técnico) Vale-
compras
Gestão de
Uma estrutura de microsserviços
Pedidos Pagamento
para ecommerce voltados a
(OMS)
trazer soluções para lojistas com Preço
base no mercado atual.

Estoque

Catálogo
Cross- Cupons Frete
sell

+ Estabilidade Á vista

+ Escalabilidade Logística Promoções

+ Performance Pontos
de
retirada
Campanhas

Geolocali Políticas Digital

zação Comerciais Marketing

Regras de
negócio
Canais
De onde veio o IO?
Da necessidade de evoluir o módulo CMS (Content Management System), mas ao invés disso a VTEX criou
uma nova tecnologia, que pode ser usada tanto na parte da frente da loja de clientes, mas também para os
desenvolvedores internos da VTEX criarem as novas telas do Admin em IO. Ele também permite que
agências possam criar Apps e comercializá-los.

Frente de loja
Apps Admin VTEX
(Store Framework)

IO
Onde entra o IO? Estrutura Legada
(cuidado, sincericídio à frente!)
Usa tecnologias globais

CARACTERÍSTICAS
Total liberdade de customizações

CMS Mais barato

Mais demorado
Mais agências fazem
Apenas Brasil

Front-end
Estrutura Atual
Usa tecnologia proprietária

CARACTERÍSTICAS
Usa componentes nativos
Para customizações, usa apps em React
IO Mais caro (se usar apps não nativos)
Mais rápido (com apps nativos)
Poucas agências fazem (ainda)
Internacional apenas IO
Nativos x Personalizados Busca Compra rápida
Menu Selos de coleção
Abas

EXEMPLOS
Espiar

Nativos Accordion Banners

Prateleiras Vídeos
Filtros Descontos
Mini-cart Formulários

IO
Frete no mini-cart
Quantidade na prateleira
Compre Junto

EXEMPLOS
Personalizados Paginação nas listagens
Timer
Ferramentas de terceiros*
Vínculos com API’s

* Ferramentas devem ser instaladas utilizando Apps ou GTM.

Tecnologias
Tecnologias
Tecnologias e linguagens de desenvolvimento VTEX IO

FRONT-END
(LAYOUT)
- TypeScript
- JSON
- CSS
- Markdown
- Tachyons
FRONT-END (FLUXOS)
- Github
- Git e Yarn (ou NPM)

FRONT-END (APPS)
- React
- GraphQL
- NodeJS
Fluxo Ecommerce VTEX CMS
O fluxo de um ecommerce em VTEX IO é
semelhante ao de um ecommerce em CMS.

CHECKOUT

Home
Carrinho

Listagens (busca e dpto)

Institucionais

Smart Checkout

Produtos
Área do Cliente

Order Placed
(Confirmado)
Identificação

404 e 500

Páginas de fluxo de compra

Customização restrita*

Outras páginas
Customização total
Páginas de erro * Topo, rodapé, CSS e JavaScript.
Fluxo Ecommerce VTEX IO
O fluxo de um ecommerce em VTEX IO é
semelhante ao de um ecommerce em CMS.

CHECKOUT

Home
Carrinho

Listagens (busca e dpto)

Institucionais

Smart Checkout

Produtos

Área do Cliente

Order Placed
(Confirmado)
Identificação

404 e 500

Páginas de fluxo de compra Depende da APP Checkout

Customização restrita*
presente na loja

Outras páginas * Topo, rodapé, CSS e JS.

Customização por blocos

Páginas de erro
GitHub
Fluxo do IO com Github
Ambiente de produção
Só existe um

CARACTERÍSTICAS
Não é “linkável”

Master A URL é a da loja

Possui um Site Editor próprio
Pode ter Apps específicos
Acessível à todos (quando em produção)

Conta da loja Ambiente de desenvolvimento

Também utilizados para testes
Ambiente Local

CARACTERÍSTICAS
Podem existir vários
Workspace É onde “linkamos” o projeto
Possui uma URL específica
Possui um Site Editor próprio
Pode ter Apps específicos
Acessível somente para quem tem acesso ao Admin da loja
 Fluxo do IO com Github

Conta da loja

● É uma cópia da Master, no

momento da sua criação;
Workspace ● Tem seu próprio Site Editor;
vtex use
● Tem seus próprios Apps.

Master
● É uma cópia da Master, no
vtex use momento da sua criação;
git remote add origin Workspace ● Tem seu próprio Site Editor;
● Tem seus próprios Apps.
GitHub da loja
Fluxo do IO com Github

Conta da loja

Este dev fez atualizações e

Workspace
git commit subiu para a Master.

Master

Este dev pediu as atualizações

vtex update Workspace
mergeadas no seu workspace.

GitHub da loja git pull

Setup
Primeiros Passos
STORE
FRAMEWORK
Ao lado estão os primeiros
passos para criar seu próprio
workspace e começar a
trabalhar no layout do site.
Instalar Visual Studio Code, Git, NodeJs 14 e Yarn.
Baixar arquivos do Store Theme.
https://github.com/vtex-apps/store-theme
Aplicar o comando yarn global add vtex no terminal.
(Instala o Toolbelt, conjunto de ferramentas para trabalhar
com lojas VTEX).
Aplicar comando vtex login [nome-da-conta]
(Login no ambiente master da loja).
Aplicar comando vtex use [nome-do-workspace]
(Criação do Workspace próprio, para desenvolvimento).
Aplicar comando vtex browse
(Abre o workspace no navegador).
Aplicar comando vtex link
(Ligando o código da máquina ao workspace).
Correção de
erros comuns
Caso tenha realizado os passos anteriores e a loja
apresenta erro, é preciso realizar o processo abaixo:

Aplicar o comando vtex ls no terminal.

No terminal aparecerão todos os apps instalados no workspace.

Verificar se o app vtex.store@2.x está instalado.

Aplicar o comando vtex install vtex.store@2.x --force na master.

Comandos
Necessários
O admin possui a funcionalidade de editar o
StoreFront e seus componentes. Na master:

Aplicar o comando vtex install vtex.admin@3.x

(Instala a versão do admin compatível com storefront).

Aplicar comando vtex install vtex.admin-pages@4.x

(Adiciona a aba de configurações de “Páginas” no CMS).

Aplicar comando vtex install vtex.admin-apps@3.x

(Adiciona a página de apps correta no admin).

Aplicar comando vtex install vtex.colossus-legacy-proxy@2.x

(Corrige redirecionamentos do site).

Aplicar comando vtex install vtex.rewriter@1.x --force

(Corrige redirecionamentos do site).
 Realizado apenas uma vez no repositório local
Criando uma App
STORE
FRAMEWORK
Subindo a primeira versão
Ao lado estão os principais passos
para se criar um repositório no
gitHub e criar um aplicativo na
VTEX com base nisso.
OBS: Antes de criar a app é preciso
validar quem é o vendor e a versão atual
no arquivo MANIFEST.JSON
É necessário ter uma conta e um repositório vazio no GitHub.
Aplicar o comando git init no terminal.
(Inicia funções de git no repositório local).
Aplicar comando git remote add origin “url-do-repositório”
(Indica qual repositório remoto é ligado ao seu local).
Aplicar comando git status
(Verifica se há alterações pendentes).
Aplicar comando git add .
(Indica que o git deve rastrear todos os arquivos).
Aplicar comando git commit -m “comentário”
(Cria um pacote de alterações com a descrição do que foi feito).
Aplicar comando vtex release patch stable
(Aplica um push para o gitHub e sistema da VTEX).
Aplicar comando git push --set-upstream origin master
Aplicar comando vtex deploy
Instalando a App
NA MASTER

Realizado apenas uma vez no repositório local

Para que o código seja aplicado
no ambiente master, é preciso
instalar a app que agora existe no
ambiente VTEX.
Aplicar o comando vtex use master no terminal.
(O terminal será conectado ao ambiente master).
Aplicar comando vtex install vendor.appName@version
(É possível encontrar o Vendor, AppName e Version no manifest.json)

Aplicar comando vtex update

Publicando o que foi desenvolvido Fluxo realizado para
PARA A MASTER (PRODUÇÃO) novas lojas em VTEX
IO ou lojas que já
Sabemos que a Master é o ambiente de produção e o Workspace o de desenvolvimento. estão no VTEX IO.
Para subirmos o código realizado para produção, podemos realizar as seguintes ações.

Existem dois caminhos:

PROMOVENDO WORKSPACE PARA MASTER: SUBINDO A NOVA VERSÃO DA APP:

Estar no Workspace Workspace: comando git status

Workspace: comando vtex workspace promote Workspace: comando git add .

Workspace: comando git commit -m “comentário”

● Neste fluxo, o Workspace deixa de existir, pois se
torna a nova Master;
● O Site Editor e os Apps instalados no Workspace
são enviados para a Master.
Workspace: comando vtex release patch stable
Workspace: comando vtex deploy (+7 minutos)
comando vtex use master

Master: comando vtex update

Master: corrigir o Site Editor.


Resumindo
Após publicar o app e instalar em
master.
Aqui indicamos o fluxo de trabalho
que utilizamos para lojas que ainda
não são migração CMS > IO!
No Workspace de Desenvolvimento alterar o código
Fazer alterações necessárias no código.
Aplicar os comandos dos passos anteriores:
- git status
- git add .
- git commit -m “Comentário dos ajustes”
- vtex release patch stable
- vtex deploy (+7 minutos)
No Workspace Master atualizar a app e alterar o Site Editor
Aplicar comando vtex use master
(O terminal será conectado ao ambiente master).
Aplicar comando vtex update
(O comando atualiza todas as apps com atualizações pendentes).
Realizar as configurações no Site Editor
(As configurações do Site Editor sobrepõem o que é feito via código).
Testando para lojas migrando Fluxo realizado para
DE CMS PARA IO lojas que estão
migrando de CMS
para IO.

WORKSPACE DE PRODUÇÃO

Estar no Workspace

Workspace: comando vtex use

{workspaceName} --production
Instalando a App
INTELLIGENT
SEARCH
Realizado apenas uma vez na Master

Siga os seguintes passos na Master:

Para que a loja funcione
corretamente, é preciso instalar
esta App e indexar os produtos.
https://vtex.io/docs/app/vtex.search@2.8.2/
Indexar os produtos no Admin, em Configurações
da loja / Busca / Configurações de Integração.
Instalando a App
REVIEWS AND
RATINGS
Realizado apenas uma vez na Master

Siga os seguintes passos na Master:

Para que a loja funcione https://vtex.io/docs/components/all/vtex.reviews-
corretamente, é preciso instalar and-ratings@2.10.2/
esta App.
Problema conhecido:
Páginas Internas

Tem acontecido de algumas novas lojas em VTEX IO

precisarem que a VTEX libere a loja para edição,
permitindo a navegação em páginas internas da loja.

Somente colaboradores VTEX podem fazer essa liberação,

necessitando um chamado solicitando a correção (:
 Comandos mais utilizados:
vtex ou vtex help vtex install [vendor.app@version]
Lista os comandos possíveis Instala o app no workspace

vtex ls vtex release patch stable

Lista o que está instalado na loja Envia os arquivos para a master

vtex whoami vtex deploy

Exibe a conta e ambiente logados Confirma o envio para a master

vtex browse vtex update

Exibe o workspace no navegador Atualiza os apps do workspace

vtex use [workspace] vtex login [accountname]

Cria ou acessa um workspace Loga na conta

vtex link vtex workspace [command]

Conecta os arquivos locais ao workspace Executa um comando no workspace

Comando pode ser dado na master ou workspace Comando só pode ser dado no workspace

Comando preferencialmente na master

Entendendo a estrutura
de arquivos
01
Manifest.json
Possui todas as dependências do
projeto, assim como a última versão
da app e vendor da mesma. Todos
os microsserviços utilizados devem
ser citados aqui, caso o contrário a
mesma não irá funcionar.
02
Pasta STORE
Engloba a estrutura de blocos
utilizada para definir o layout de
todas as páginas. A estrutura de
blocos se baseia na organização dos
microsserviços dentro da página.
03
Pasta STYLES
Possui todos os arquivos CSS da
loja, incluindo o arquivo
“styles.json” que determina as
configurações do storefront no
admin. Cada microsserviço possui
um arquivo de CSS diferente.
Componentes
Nativos
Store Framework
é a funcionalidade
para facilitar a
criação de layouts!

Layout inicial completo e

Componentes nativos
responsivo (StoreTheme)
Entendendo a
ESTRUTURA DE BLOCOS
Página JSON Página JSON

Declaração de blocos da página

Chamada do bloco
Chamada do bloco

Chamada do bloco
Chamada do bloco

Chamada do bloco
Chamada do bloco

Conteúdo do bloco
Conteúdo do bloco

Conteúdo do bloco

Chamada do bloco

Conteúdo do bloco

Conteúdo do bloco
Personalizando Exemplo:

BLOCOS
Página JSON

Declaração de blocos da página

Chamada do bloco

Props que
personalizam este bloco

Chamada do bloco

Props que
personalizam este bloco

Conteúdo do bloco

Props que
personalizam este bloco
 COMPONENTE PAI, QUE
ESTÁ SENDO EDITADO “BLOCKS” E “CHILDREN”
"store.home": { INDICAM QUAIS OS
COMPONENTES FILHOS
"blocks": [

Sintaxe da
"carousel#home",
"flex-layout.row#forms",

ESTRUTURA DE "shelf#home1",
“rich-text#link”

BLOCOS },
]

Montar uma página é como “PROPS” INDICA AS

PROPRIEDADES DO
colocar vários blocos em "rich-text#link": {
COMPONENTE, CADA
APP POSSUI PROPS
ordem, indicando quais as "props": {
ESPECÍFICAS

características principais de "text": "texto exemplo",

cada um desses blocos. "blockClass": "link"
}
}
Tudo que vem depois do # é apenas
para nomeação
Ex: Rich-Text é o tipo do componente, e
link é o nome individual desse
componente
Flexibilidade de
COMPONENTES NATIVOS (PROPS)

Inflexível Flexível Complexo

Atende usos específicos Atende a maioria dos usos Muitas configurações

0% 100%

Usar Usar slider-layout Desenvolver um slider

carousel com product-list e integrar com API

0% 100%
Componentes mais comuns:

1 Intelligent Search 8 Menu 15 Gifts

2 Minicart 9 Disclosure 16 Wishlist

3 Shelf’s 10 Tabs 17 Order Placed

4 Flex 11 Iframe 18 RichText

5 Slider 12 InfoCard 19 Images

6 Responsive 13 Modal 20 Login

7 Newsletter 14 Reviews & Ratings 21 Sandbox

Estilos
Exemplificando a
estrutura do CSS

styles.json

O IO faz uso de estilos e classes pré-definidas,

algumas dessas classes podem ser alteradas no
StoreFront do admin como também no arquivo raiz.

css do componente

Cada componente possui um CSS customizado, que

deve ser alterados de acordo com seus “CSS
Namespaces”.
Customizando o
CSS namespace
Exemplo de “class” encontrada ao se inspecionar os elementos do site.

vtex-menu-2-x-styledLinkContainer

componente a CSS namespace que pode ser

qual essa tag e customizado de acordo com
class fazem parte o CSS do componente

Como customizo esse elemento de exemplo em específico?

Criar ou encontrar o arquivo de css específico para o componente,
nesse caso seria vtex.menu.css
Após encontrar ou criar esse arquivo, aplica-se o código abaixo:

.styledLinkContainer{
font-size: 10px;
color: #fff;
}
Customizando a
propriedade blockClass
blockClass é uma prop na estrutura de Blocos que gera uma
extensão na classe CSS do componente específico.
"vtex.menu@2.x:menu#Products": { vtex-menu-2-x-styledLinkContainer--thisIsBlockClass
"props": {
Componente a CSS namespace que pode ser
"blockClass": "thisIsBlockClass"
qual essa tag e customizado de acordo com o
}, class fazem parte CSS do componente
};

Como customizo esse elemento de exemplo em específico?

Criar ou encontrar o arquivo de css específico para o componente, nesse caso
seria vtex.menu.css
Após encontrar ou criar esse arquivo, aplica-se o código abaixo:

.styledLinkContainer{ .styledLinkContainer--thisIsBlockClass{
font-size: 10px; font-size: 12px;
color: #fff; color: #000;
} }
Evolving
Site Editor
É muito fácil para o lojista poder cuidar da sua loja.
Rotas &
INSTITUCIONAIS

Realizado no workspace

Para criar uma página Defina a URL para a página no arquivo routes.json.
institucional, você precisa criar
uma rota e a página com seu
conteúdo. Crie a página e insira seu conteúdo.
Q&A
Any
Questions?
Documentações
Documentações completas e oficiais para o VTEX IO:

● https://vtex.io/
● https://learn.vtex.com/
● https://github.com/vtex-apps
● https://vtex.io/docs/components/general
● https://lab.github.com/vtex-trainings/store-framework
 Thanks

www.codeblue.com.br