Vtex

Vtex IO

VTEX IO é uma plataforma nativa capaz de ajudar a entrega de soluções de negócio com mais agilidade e segurança. Ela permite o foco na experiência do usuário ao invés da preocupação extrema de lojistas em pontos como o desenvolvimento, por exemplo.

Este VTEXbook pretende dar as primeiras explicações sobre as características e o uso do VTEX IO com React (também conhecido como React.js).

Aborda-se, com apoio de imagens, as formas de utilização do VTEX IO com React e também explora-se um pouco mais de seu histórico, características e vantagens de uso.

Supõe-se que o leitor tenha um conhecimento básico da VTEX e esteja familiarizado com programação.

Para baixar o material gratuitamente, clique aqui!

 

Orientador do projeto: João Teixeira (VTEX)

Autores: Giovanna Pereira (Maeztra Consultoria), Rogério Nogueira (Maeztra Consultoria)

Agradecimento: Érick Herrera (Maeztra Consultoria)

 

Como utilizar o VTEX IO de forma eficiente e performática

Como utilizar o VTEX IO de forma eficiente e performática

A plataforma de desenvolvimento VTEX IO é uma de nossas inovações mais recentes e traz uma série de funcionalidades que facilitam e aceleram o processo de desenvolvimento de lojas virtuais e apps. Vamos conhecer algumas dessas funcionalidades e boas práticas de desenvolvimento que melhoram o desempenho das soluções construídas a partir da plataforma.

Uma plataforma de desenvolvimento completa

O VTEX IO permite que nossos clientes e parceiros utilizem a infraestrutura da VTEX para desenvolver suas próprias soluções de ecommerce. As vantagens vão muito além de estabilidade, segurança e confiabilidade: nossa plataforma facilita e acelera o desenvolvimento, reduzindo consideravelmente o time to revenue.

A principal aplicação do VTEX IO está no desenvolvimento de storefront. A VTEX oferece um framework nativo, o Store Framework, baseado em React.js, que oferece todos os componentes essenciais para um ecommerce. Com ele, as páginas são montadas utilizando blocos, que são conjuntos de componentes com funcionalidades específicas. Uma página de produto, por exemplo, pode ser facilmente construída utilizando blocos como Product Image, Product Price, SKU Selector, Shipping Simulator, dentre outros.

Todos os blocos possuem customizações que podem ser feitas declarando valores em suas propriedades. Esses valores e como eles afetam o funcionamento de cada componente estão descritos em detalhe na documentação, permitindo que até mesmo usuários que não sejam desenvolvedores de software consigam implementar uma frente de loja sem grandes dificuldades.

Os componentes também podem ser facilmente estilizados utilizando CSS Handles. E, caso não existam blocos nativos que atendam a alguma necessidade de seu negócio, é possível implementar componentes customizados baseados em React.js. Toda a praticidade de um framework especializado para ecommerce, sem limitar a liberdade dos desenvolvedores para criar novas soluções.

Muito além do frontend

Além do Store Framework, o VTEX IO oferece uma gama completa de ferramentas para desenvolvimento de aplicações variadas, incluindo serviços backend. É possível, também, criar aplicações administrativas, com interface integrada ao VTEX Admin; Pixel Apps para integração com serviços externos; aplicativos para a VTEX App Store, incluindo a possibilidade de monetização e o que mais a criatividade permitir.

O processo de publicação é direto e rápido, permitindo também o versionamento dos aplicativos, o que facilita o lançamento de patches para correções de erros e até mesmo rollbacks para versões anteriores. A função link permite visualizar em tempo real as alterações feitas no código, sem a necessidade de publicar uma nova versão. Isso facilita provas de conceito e experimentação.

A possibilidade de trabalhar em diversos workspaces separadamente é um recurso poderoso da plataforma, que facilita testes e o trabalho em equipe. Cada workspace é um ambiente único que compartilha do mesmo banco de dados da loja, como produtos, preços e logística. Com eles é possível testar rapidamente alterações de configurações e alterações no código sem correr o risco de prejudicar a loja em produção.

Como o comércio digital é data driven, não poderia faltar em nossa plataforma uma funcionalidade nativa para testes A/B: com ela é possível direcionar uma porcentagem do tráfego a um workspace de produção secundário e variar gradualmente essa proporção até que tudo seja validado e a nova aplicação seja definitivamente publicada.

Todas as funcionalidades são acessíveis através de uma CLI (Command Line Interface) intuitiva e todas as informações necessárias estão disponíveis em uma documentação completa e organizada. Os desenvolvedores também contam com o VTEX Community para tirar dúvidas e entrar em contato com outros profissionais de tecnologia e ecommerce, além do nosso suporte técnico a clientes e parceiros.

Com grandes poderes vêm grandes responsabilidades

A grande liberdade oferecida pela plataforma pode abrir precedente para a implementação de aplicativos com problemas de performance e até mesmo apresentando erros no ambiente de produção. Para reduzir esse risco e garantir o sucesso de nossos clientes e parceiros, disponibilizamos uma série de boas práticas de desenvolvimento. Todas essas dicas estão disponíveis com mais detalhes em nossa documentação.

Native first: o conjunto de microsserviços da VTEX oferece um ferramental completo para operações de ecommerce. Sempre verifique se já não existe alguma aplicação nativa que ofereça a funcionalidade desejada antes de começar a implementar customizações.

VTEX App Store: além dos apps nativos, contamos com uma série de serviços de parceiros que complementam nossa plataforma. Não se esqueça de consultar também a nossa App Store, sua necessidade pode estar a um clique de distância!

Leia a documentação: nosso time de tech writers trabalha duro para garantir que todos os detalhes técnicos sejam disponibilizados na documentação e para que ela se mantenha sempre atualizada. Leia com atenção, pois a maior parte dos problemas pode ser resolvida em uma consulta à documentação.

Pense antes de agir: uma boa arquitetura facilita o desenvolvimento e evita gargalos no futuro. Idealize e planeje o seu projeto antes de colocar a mão no código, pesquise o que for necessário, faça provas de conceito e cheque todas as limitações impostas por apps de terceiros que vão ser integrados em sua solução.

Use o versionamento a seu favor: separe a publicaçãode cada alteração, por mínima que seja, em patches diferentes. Isso facilita a identificação de bugs e também permite uma resposta rápida com um rollback em caso de crise.

Siga as boas práticas de desenvolvimento em Node e React: essas tecnologias são a base do VTEX IO, e permitem a criação de praticamente qualquer funcionalidade. Mas, para que tudo funcione corretamente, alguns conceitos básicos precisam ser respeitados e a documentação desses frameworks deve ser consultada de forma complementar à documentação da VTEX.

Teste antes de publicar: teste a funcionalidade em um workspace de desenvolvimento e faça pelo menos um teste A/B antes de instalar o app no workspace master. Alguns erros só podem ser identificados em ambientes de produção, por isso a importância do teste A/B. Considere todas as interações que seu app tem com outras funcionalidades para evitar que uma atualização cause efeitos colaterais em outras partes da loja.

E sempre conte conosco para lhe ajudar! Temos os melhores especialistas em ecommerce do mercado à sua disposição para garantir o sucesso do seu negócio, além de todo o ecossistema de parceiros.

Quer aprender mais sobre VTEX IO e se capacitar para desenvolver utilizando nossa plataforma? Confira a Trilha de Aprendizagem VTEX IO

 

Curtir:

FacebookmailFacebookmail

Compartilhar:

FacebooktwitterpinterestlinkedinmailFacebooktwitterpinterestlinkedinmail

6 FUNCIONALIDADES DO CMS VTEX PARA CUSTOMIZAR SUA LOJA

Você já deve ter conversado com alguma plataforma de mercado que te prometeu customizar, desenvolver, criar, editar, sem restrição, não é mesmo?

Mas na hora que você começou a usar a ferramenta…bom, aí parece que as coisas não eram tão flexíveis assim.

Não se surpreenda. Isso é normal na maioria das plataformas. Em geral elas não possuem um módulo específico chamado CMS, content management system ou em português o sistema de gestão de conteúdo.

Agora chegou a hora de você conhecer todo o poder que um CMS poderoso integrado a sua loja virtual pode gerar!

Conheça 6 funcionalidades sensacionais do CMS VTEX:

1. Customização e criação ilimitada de páginas

O CMS VTEX vai além de um controle de conteúdo para trocar banners ou produtos. Você terá acesso irrestrito aos códigos HTML e CSS de todas as páginas.

Primeiro que a partir do acesso aos códigos, não haverá limite para criação. Você terá capacidade de desenvolver o que você quiser, como você quiser, sem aquele famoso “estrutura padrão” ou “template padrão”:

  • Você quer colocar produtos no lugar no banner? Sim, é possível!
  • Você não quer menu lateral e sim mais produtos? Sim, é possível!
    • Você quer o botão de comprar embaixo da foto do produto? Sim, é possível.
  • Você quer colocar uma sugestão de produtos embaixo do botão comprar somente quando não tiver o item disponível? Vamos em frente!

O módulo CMS VTEX foi construído para dar completa liberdade de criação de experiência e melhorar sua conversão.

Você também poderá criar quantas páginas você desejar:

  • Quer três páginas de produtos? Uma para cada tipo de produto da sua loja? Uma totalmente diferente da outra? Não tem problema!
  • Quer fazer duas homes, uma nova, totalmente customizada para o natal? Ok! Vá em frente!
  • Quer ter 4 páginas, uma para cada categoria da sua loja, já que seu cliente navega de forma diferente em cada uma dela? Todas elas 100% customizadas? Sem problemas.

Com o CMS VTEX a sua imaginação é o limite e não o sistema.

2. Desenvolvimento de aplicativo e extensões de terceiros

Imagine que sua loja vende produtos no atacado ou atacarejo. Portanto você precisa desenvolver uma navegabilidade para que o cliente selecione, na tela de produto, de acordo com as combinações de cor e tamanho, a quantidade de cada uma.

Então o seu cliente seleciona 3 camisetas brancas de tamanho P, 5 camisetas pretas do tamanho M e 1 camiseta amarela do tamanho G.

O sistema automaticamente, ali na tela de produto enquanto o cliente insere as quantidades, já mostra o valor total e informe se alguma há disponibilidade ou não.

Esse é um caso real onde uma loja desenvolveu essa extensão diretamente com parceiro, sem interferência VTEX. Isso é liberdade total para administrar sua loja virtual.

Além disso, você sabia que no mês de julho de 2016 a VTEX realizou mais de 1000 atualizações no sistema? No ano de 2015 foram quase 9000 atualizações! Imagina quantas novas funcionalidades você não terá para melhorar sua loja.

Mas pode ser que você queira alguma funcionalidade que a VTEX ainda não possui. É improvável sim, mas não impossível.

Veja o caso que aconteceu com um cliente VTEX que tinha grande quantidade de solicitações de devoluções pela característica do seus produtos.

Diante desse cenário, a empresa conversou com uma fábrica de software parceira VTEX. Ela desenvolveu uma nova funcionalidade onde o próprio cliente, do painel de meus pedidos, pode solicitar a logística reversa de um item de um determinado pedido.

Todo o fluxo acontece dentro da loja virtual do cliente, pois o módulo CMS possibilita integração com outros sistemas. Esse sistema está também integrado ao ERP do cliente que já dispara todo o processo interno.

3. Teste A/B nativo

Se você tem uma loja virtual e nunca fez nenhum teste de usabilidade, pode ter certeza que você está perdendo dinheiro. Testes AB são primordiais para melhorar a experiência e conversão da loja virtual.

Na plataforma VTEX, isso é uma funcionalidade nativa. Como vimos antes, você pode criar quantas páginas você desejar correto? Portanto, a criação de um teste AB dura apenas alguns minutos.

Primeiro você deverá pensar em quais hipóteses que você quer testar. Lembre-se que o ideal é sempre você trabalhar com pequenas modificações para poder identificar quais foram as que surtiram efeito.

Como você partirá de uma página previamente implementada, basta você copiar o código da página antiga, criar uma nova página em branco dentro do módulo CMS da VTEX, colar o código já desenvolvido, fazendo os ajustes.

Pronto, as duas páginas já estão no sistema e você poderá realizar os testes diariamente.

4. Personalização de páginas segundo perfil do cliente

Cada vez se fala mais do marketing one-to-one, o marketing um-para-um. Portanto, é fundamental ter uma ferramenta que possa segmentar o seu público e ofertar o produto correto, no momento correto e no preço correto.

Por meio do gestor de conteúdos, um módulo dentro do CMS, você pode configurar todos os banners e produtos que serão expostos em cada uma das suas páginas.

Você pode determinar, por exemplo, qual período de data que o conteúdo aparecerá. Você pode determinar que aquele banner do natal aparece somente no mês de dezembro e aqueles produtos com desconto só em janeiro.

Imagine que você quer segmentar ainda mais e no natal só mostrar para os clientes que compraram camisetas, as calças jeans disponíveis.

Agora para aqueles que comparam calças jeans, você vai mostrar camisetas! Sim! Isso é possível.

Você ainda pode determinar para qual tipo de cliente você quer fazer uma determinada promoção. Somente para clientes VIPs ou com maior recompra.

Com o CMS VTEX você poder total de customizações dos conteúdos para segmentar corretamente o seu público alvo.

5. Multi lojas

Se você trabalha com o conceito de multilojas, você encontrará no CMS VTEX total capacidade de trabalhar as suas lojas, totalmente independentes uma das outras.

O sistema tem a capacidade de trabalhar com uma quantidade ilimitada de multi lojas. Você pode inclusive determinar, para cada uma delas, um layout completamente diferente. A navegação será totalmente customizada.

Um dos casos mais conhecidos, é da RiHappy e PB Kids que utilizam o conceito de multilojas da VTEX.

Determine quais os produtos farão parte do mix de vendas de cada uma das lojas. Quais são as promoções serão aplicadas para cada uma.

6. Mobile e omnichannel

O mundo mobile já é uma realidade em nosso país. Dados mostram que mais de 25% das compras já são realizadas por dispositivos móveis.

A VTEX, desde 2009, já está pronta para atuar com a mobilidade. Por qualquer smartphone ou tablet, de qualquer tamanho, sua loja se adaptará completamente ao dispositivo.

A plataforma já está pronta para qualquer estratégia, seja responsividade, site exclusivo, os M. ou aplicativos. Se você quer conhecer um pouco mais sobre a diferença de cada um, veja esse artigo.

Mas os diferenciais não param por aí. Que tal utilizar um totem de auto atendimento de vendas em sua loja física. O cliente poderá navegar por todo o catálogo e comprar alí mesmo, sem falar com um vendedor.

Com essa estratégia, além de diminuir a necessidade de vendedores, você poderá aumentar o mix de produtos, já que trabalhará com o estoque da loja virtual.

Se você não quer realizar a venda, você pode utilizar os totens apenas para consultas, melhorando a experiência do usuário no ponto físico.

Achou surpreendente? Quer conhecer mais ainda do poderoso CMS VTEX? Fale agora com um especialista e conheça como você poderá customizar sem limites sua plataforma.

Curtir:

FacebookmailFacebookmail

Compartilhar:

FacebooktwitterpinterestlinkedinmailFacebooktwitterpinterestlinkedinmail