Como criar um site de e-commerce (sem programar)

Aprenda a criar sua própria loja virtual tipo Shopify, usando o editor visual web do Bubble.

Para ter uma loja virtual, sites de e-commerce como o Shopify, BigCommerce ou Volusion deixam fácil para comerciantes criar e começar a vender produtos rapidamente pela internet.

Se você tem interesse em criar seu próprio site de e-commerce, no entanto, tradicionalmente seria necessário um time de engenheiros de software para desenvolver um aplicativo rico em recursos – a menos que você crie com Bubble. As ferramentas de programação visual do Bubble tornam possíveis para qualquer um criar seu próprio software poderoso sem ter que tocar numa única linha de código. Os usuários do Bubble de todo o mundo estão criando suas próprias lojas virtuais sem programar, diretórios, e até mesmo redes sociais.

Ao longo deste post, vamos descobrir o processo por trás de criar um aplicativo de e-commerce como o Shopify gratuito usando o Bubble. Se você está procurando replicar a plataforma de e-commerce completa, ou apenas tem interesse em utilizar alguns dos recursos principais do site, este guia vai compartilhar como começar a criar seus workflows.

Os passos para criar um site de e-commerce tipo Shopify gratuito sem precisar programar incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Então podemos começar a criar seu site de e-commerce com o Bubble.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Podemos escolher começar criando o protótipo para o design do site, ou os campos necessários dentro do banco de dados.

Aqui iniciaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário da nossa plataforma. Se você está criando uma loja virtual tipo Shopify, algumas das páginas principais que precisará incluir são:

• Criar loja: Uma página para criar uma nova loja
• Criar produto: Usado para criar produtos dentro de uma loja
• Página da loja: Usado para hospedar cada loja e uma lista dos produtos da loja
• Página do produto: Uma página para exibir os detalhes completos de um produto individual
• Checkout: Usado para revisar pedidos e processar pagamentos
• Painel de controle: Um portal de administração para gerenciamento de pedidos
• Página de pedido: Usado para exibir os detalhes completos de um pedido individual

Configurando o banco de dados

Depois de mapear a exibição do seu site, você pode focar em criar os campos de dados necessários para alimentar sua aplicação. Vamos depender desses campos para conectar os workflows por trás da plataforma.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Quando estiver criando sua plataforma de e-commerce como o Shopify de MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dado: Usuário

Campos:

• Nome – texto
• Itens no carrinho – Lista de produtos. Nota: A criação de um campo como uma lista, baseado em um tipo de dados separado, permite a integração perfeita de todos os campos de dados relevantes.
• Produtos comprados – Lista de produtos
• Loja própria – Loja

Tipo de dado: Loja

Campos:

• Nome – texto
• Logo – imagem
• Descrição – texto

Tipo de dado: Produto

Campos:

• Nome – texto
• Preço – número
• Imagem – imagem
• Descrição – texto
• Loja original – loja

Tipo de dado: Pedido

Campos:

• Cliente – usuário
• Endereço de entrega – endereço geográfico
• Loja – loja
• Produtos comprados – Lista de produtos
• Status de pedido enviado – sim / não com ‘não’ como padrão

Crie seus workflows

Agora que você estruturou tanto o design quanto o banco de dados, é hora de começar a juntar tudo e deixar seu site funcional.

No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando ocorre um evento (ex: o usuário clica em um botão), e então executa uma série de “ações” como resposta (ex: “cadastre o usuário”, “altere um item no banco de dados”, etc.)

Criar uma nova loja virtual em nosso site de e-commerce

O primeiro recurso que precisamos é uma experiência de integração para que os usuários criem sua própria loja.

Começaremos adicionando uma combinação de elementos de Input na nossa página criar loja. Esses elementos vão incluir inputs padrões de texto, um carregador de imagens, e um botão.

Em seguida, criaremos nosso primeiro workflow usando o editor do Bubble. Este workflow será acionado quando o botão criar loja é clicado.

Ao criar esse workflow, vamos optar por criar um item no banco de dados.

O item que queremos criar é uma nova loja.

Ao criar uma loja dentro do nosso banco de dados, precisaremos combinar os elementos de input on-page com os campos de dados correspondentes.

Após criar uma loja, vamos precisar adicionar este item em um campo de dados lojas próprias do usuário. Isso vai reconhecer os usuários atuais como administradores da loja.

Para alcançar isso, vamos criar outro evento dentro do nosso workflow, mas dessa vez, estaremos alterando um item no banco de dados.

O item que queremos alterar é o usuário atual (Current User), adicionando a nova loja criada às suas lojas criadas (created stores).

Após este evento, iremos direcionar nossos usuários para o próximo estágio do workflow de integração – permitindo-os criar novos produtos para sua loja.

Incluindo um evento navegacional no nosso workflow, vamos direcionar o usuário para nossa página criar produto.

Ao enviar o usuário para essa página, também passaremos pelos dados da nova loja que acabamos de criar.

Adicionando um produto na loja

Para enviar os dados de uma nova loja através da nossa página de criar produto, também iremos configurar o tipo de página como loja (Store).

Em seguida, você pode começar incorporando um matriz de elementos de input para criar o produto.

De novo, vamos criar um novo workflow quando o botão criar produto é clicado.

Esse workflow vai seguir a mesma estrutura daquele que usamos para criar uma loja nova, mas dessa vez, estaremos criando um produto novo.

Dentro desse workflow, vamos linkar o produto novo à loja da página atual.

Após um novo produto ser adicionado, também precisaremos incluir uma etapa adicional no nosso workflow – restando os valores dos elementos de input on-page. Isso permitirá que o dono da loja adicione múltiplos produtos sem sair da página.

Uma vez que o dono da loja terminou de adicionar todos os produtos em uma loja, criaremos um workflow que os permite ver a nova loja.

Esse workflow será acionado quando o botão visitar loja é clicado (Button Visit store).

Ao criar esse workflow, usaremos um evento de navegação para direcionar o usuário para nossa página da loja, enviando com eles os dados das página das lojas atuais.

Exibindo conteúdo dinâmico na página da loja

Após o dono da loja criar um catálogo de produtos para o site de e-commerce, podemos começar a exibi-los em uma loja pública que os usuários possam acessar.

Ao criar nossa página da loja, iremos novamente começar configurando o tipo de dados como loja.

Agora podemos começar estruturando o conteúdo dinâmico que será exibido na página da loja.

Na nossa página da loja, também precisamos exibir uma lista dos produtos que foram criados. Isso pode ser feito o elemento grupo repetidor do Bubble.

Para começar a exibir dados em um grupo repetidor, você precisa primeiro linkar o elemento a um tipo de dados dentro do banco de dados. Isso ajudará a identificar qual conteúdo será mostrado.

O tipo de dado do grupo repetidor precisa ser configurado como uma lista de produtos.

Então teremos que selecionar uma fonte de dados para este elemento, permitindo-o saber qual produto específico será exibido. A fonte de dados vai realizar uma pesquisa por todos os produtos no banco de dados onde a loja original equivale a loja da página atual.

Depois que o grupo repetidor foi configurado, você poderá adicionar o conteúdo dinâmico que será exibido dentro de cada linha.

Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar, e o grupo repetidor vai preencher as colunas restantes com base nos seus dados existentes.

Embora nosso grupo repetidor mostre uma visão geral de cada produto, vamos ter que criar uma página dedicada ao produto para mostrar todos os detalhes do produto individual quando é selecionado.

Para direcionar o usuário à nossa página do produto, criaremos um workflow quando o botão ver produto é clicado.

Mais uma vez, usaremos um evento de navegação para direcionar o usuário, dessa vez enviando os dados do produto da célula atual (Current cell’s Product).

Adicionando um item no carrinho do usuário

Seguindo o processo das páginas anteriores, primeiro precisamos começar a configurar nosso tipo de página – mas dessa vez, será definido como produto.

Após exibir os elementos de conteúdo dinâmico na página, criaremos um novo workflow quando o botão adicionar ao carrinho é clicado.

Nesse workflow, precisamos alterar um item no banco de dados.

O item que iremos alterar é o usuário atual, colocando o produto das páginas atuais na lista de itens no carrinho.

Uma vez que o usuário terminou de colocar produtos no carrinho, vamos então criar outro workflow que os direciona à página de checkout.

Enquanto o usuário compra produtos que são hospedados na mesma loja, também enviaremos através  dos dados da loja dos produtos.

Enquanto enviamos dados de uma loja específica, também precisaremos configurar o tipo da página de checkout como sendo loja.

Em seguida, você pode adicionar um grupo repetidor que mostra uma lista de todos os produtos dentro do campo de dados ‘adicionado ao carrinho do usuário atual’.

Abaixo dessa lista, você vai então exibir o preço total dos itens coletivamente no carrinho. O Bubble vai calcular automaticamente com base nos seus campos de dados existentes.

Processando pagamentos

Após criarmos nossa experiência de checkout, precisamos criar um recurso que processa pagamentos para novos pedidos.

Usando o Bubble, é possível aproveitar o poder de vários plugins para aceitar pagamentos facilmente.

Neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito através do Stripe.

Nota: Após instalar esse plugin, você vai precisar configurar suas chaves de API primeiro dentro das configurações do plugin.

Para criar uma experiência de pagamento intuitiva, vamos começar adicionando um elemento popup à nossa página. Popups permitem exibir conteúdos novos sem enviar um usuário para longe da página atual.

Ao criar este popup, mapearemos um formulário de pagamento onde o usuário pode adicionar os detalhes de pagamento.

Também será necessário incluir um token Stripe próximo ao formulário de pagamento. Esse elemento não será visível para os usuários finais, mas é essencial para gerar uma nova transação no Stripe.

Quando o botão de comprar é clicado, criamos um novo workflow que aciona um pagamento no Stripe para completar este processo de checkout.

Dentro desse workflow, começamos selecionando o evento que ‘converte o cartão em Stripetoken A’. Dentro desse evento, é preciso combinar os campos de input do popup à estrutura de pagamento do Stripe.

Processando o token da conta bancária do usuário

Com o cartão convertido em token Stripe, criaremos um workflow adicional que processa esse token automaticamente da conta bancária do usuário.

Usando o evento ‘Stripe.js – charge – create’, verificamos o token Stripe, assim como a quantia final a ser paga (incluindo a moeda).

Quando o pagamento for processado, criaremos um novo pedido dentro do banco de dados, armazenando os detalhes da página atual.

Incluindo passos adicionais neste workflow, vamos optar por criar um novo item no banco de dados – um novo pedido.

Dentro deste evento, registraremos quem é o cliente, qual o endereço, uma lista dos produtos comprados, e a loja da qual os produtos foram comprados.

Após esse evento, precisamos criar outro passo do workflow – desta vez alterando um item no banco de dados.

O item que queremos mudar é a lista de produtos comprados do usuário atual, adicionando a ela os produtos do nosso novo pedido.

Após adicionar esses produtos a uma lista comprada, temos que remover os itens do carrinho do usuário.

Uma vez completos os workflows para processar um pagamento, precisaremos voltar para nossa página e criar um evento para exibir nosso popup de pagamento.

Quando o botão de confirmar pedido é clicado, acionaremos um novo workflow.

Nesse workflow, selecionaremos mostrar um elemento (Show).

É claro,o elemento que queremos mostrar é nosso popup.

Criar um painel de controle para rastrear pedidos

Uma vez que um cliente fez um pedido, precisaremos criar um painel de controle para que os donos de lojas rastreiem e atualizem o status desses pedidos.

Na nossa página do painel de controle, começaremos adicionando um elemento grupo repetidor.

O tipo de dados desse elemento precisa ser configurado como pedidos, e a fonte de dados vai procurar por todos os pedidos onde a loja comprada = a loja pertencente aos usuários atuais.

Também podemos adicionar uma restrição ao grupo repetidor, exibindo apenas pedidos onde o status de envio é rotulado como ‘não’. Por padrão, todos os pedidos novos vão incluir esse status até que sejam modificados.

A fim de ver os detalhes completos de um pedido e atualizar seu status, criaremos um workflow que envia o dono da loja para uma página de pedido individual quando o botão ver pedido é clicado.

Esse workflow usará um evento de navegação, enviando com ele dados do pedido das células atuais.

Atualizando o status de um pedido

Na nossa página de pedidos, primeiro precisaremos configurar o tipo da página como pedido.

Depois, adicionaremos um grupo repetidor para exibir todos os itens dentro do pedido da página atual.

O último recurso que vamos colocar é um workflow para atualizar o status de um pedido.

Com o pedido recolhido e enviado, o dono da loja pode clicar no botão marcar como completo, acionando um workflow.

Esse workflow fará alterações em um item – atualizando o status de envio dos pedidos da página atual como ‘sim’.

Criar recursos adicionais para um site de e-commerce

Você aprendeu neste artigo como criar campos de dados customizados e exibir conteúdo dinâmico. Agora pode começar a criar novas experiências em seu site de e-commerce tipo Shopify.

Adicionalmente você pode:

• Gerar faturas – Cobrimos isso em mais detalhes dentro deste artigo.
• Permitir que os usuários deixem avaliações nas páginas dos produtos. Aprenda como criar um sistema de classificação por avaliações no nosso tutorial como criar um site tipo IMDb.
• Criar uma página de configuração da loja para editar o conteúdo do site de uma loja.

ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar.

Acesse aqui todos os tutoriais: https://bubble.io/how-to-build

Acesse aqui a versão original deste tutorial em inglês: https://bubble.io/blog/build-shopify-clone-no-code/