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.

A Shopify, BigCommerce e Volusion facilitam para comerciantes criarem lojas online rapidamente. No entanto, é possível construir um site de e-commerce completo sem código usando o Bubble. O Bubble permite criar software poderoso apenas com recursos de design visual, fluxos de trabalho e banco de dados, sem escrever uma linha de código. Usuários ao redor do mundo já criam lojas, diretórios e até redes sociais com Bubble.

Ao longo deste guia, vamos explorar como montar um aplicativo de e-commerce gratuito no Bubble, desde o design até as funcionalidades centrais. Se o objetivo é reproduzir a plataforma completa ou apenas aplicar recursos-chave, este guia mostra 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 se cadastrar gratuitamente. Assim podemos começar a criar seu site de e-commerce com o Bubble.

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 (padrão: não)

Crie seus workflows

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

No Bubble, a principal forma de fazer isso é por meio de workflows. Cada workflow acontece quando ocorre um evento (por exemplo, o usuário clica em um botão) e executa ações como cadastrar o usuário, alterar itens no banco de dados, etc.

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

O primeiro recurso necessário é 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 página criar loja. Esses inputs vão incluir campos de texto, um carregador de imagens e um botão.

Em seguida, criaremos o primeiro workflow acionado pelo clique no botão criar loja. Nesse fluxo, escolheremos criar um item no banco de dados.

O item que queremos criar é uma nova loja. Ao criar uma loja, precisaremos ligar os elementos de input aos campos de dados correspondentes.

Após criar uma loja, adicionaremos esse item ao campo de dados lojas próprias do usuário, para que ele apareça como administrador da loja. Para isso, criamos um segundo evento no workflow: alterar um item no banco de dados.

O item a ser alterado é o usuário atual (Current User), adicionando a nova loja criada às suas lojas criadas. Esse evento prepara o caminho para o próximo estágio do fluxo: criar novos produtos para a loja.

Incluindo um evento de navegação no workflow, direcionamos o usuário para a página criar produto, passando os dados da nova loja criada.

Adicionando um produto na loja

Para enviar os dados de uma nova loja para a página de criação de produto, vamos ajustar o tipo de página para loja e incorporar um conjunto de inputs para criar o produto.

Um novo workflow é criado quando o botão criar produto é clicado. Esse fluxo segue a mesma estrutura do fluxo de criação de loja, mas cria um produto novo e o vincula à loja da página atual.

Depois de adicionar o produto, precisamos atualizar o fluxo para limpar os valores dos inputs da página, permitindo que o proprietário adicione múltiplos produtos sem sair da página.

Uma vez que o proprietário terminou de adicionar todos os produtos para a loja, criamos um workflow para exibir a nova loja.

Esse fluxo é acionado quando o botão visitar loja é clicado. Em seguida, um evento de navegação envia o usuário para a página da loja, passando os dados da loja atual.

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

Ao criar a página da loja, começamos configurando o tipo de dado da página como loja. Em seguida, estruturamos o conteúdo dinâmico que será exibido na loja, incluindo a lista de produtos criados. Para exibir esses dados, o Bubble usa um grupo repetidor vinculado a um tipo de dados: produtos, com a fonte de dados filtrada para exibir apenas os produtos da loja atual (loja original igual à loja da página atual).

Para exibir os dados de cada produto no grupo repetidor, mapeamos o conteúdo dinâmico dentro de cada linha. Além disso, criamos uma página dedicada ao produto para mostrar detalhes completos quando selecionado.

Adicionando um item no carrinho do usuário

Ao exibir os conteúdos dinâmicos na página do produto, criamos um novo workflow quando o botão adicionar ao carrinho é clicado. Nesse fluxo, alteramos o item no banco de dados para adicionar o produto atual à lista de itens no carrinho do usuário atual.

Quando o usuário finaliza a ação de adicionar itens, criamos um fluxo que o leva à página de checkout, passando os dados da loja relacionada aos produtos.

Processando pagamentos

Para pagamentos, podemos utilizar plugins para aceitar pagamentos com facilidade. Neste guia, usamos o Stripe.js para processar pagamentos com cartão de crédito via Stripe.

Nota: após instalar o plugin, configure suas chaves de API nas configurações do plugin.

Para criar uma experiência de pagamento intuitiva, adicionamos um popup na página e mapeamos um formulário de pagamento dentro dele.

Também é necessário incluir um token Stripe próximo ao formulário de pagamento. Esse token não é visível ao usuário final, mas é essencial para gerar a transação no Stripe.

Ao clicar em comprar, criamos um workflow que aciona o Stripe para concluir o checkout.

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

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

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

Ao processar o pagamento, criamos um novo pedido no banco de dados, armazenando os detalhes da página atual, incluindo cliente, endereço, itens comprados e loja.

Em seguida, criamos outro passo no workflow para atualizar o banco de dados: adicionamos os produtos do novo pedido à lista de produtos comprados do usuário atual.

Removemos os itens do carrinho do usuário para manter tudo sincronizado.

Processo de finalização

Depois de concluir os fluxos de pagamento, voltamos à nossa página para exibir o popup de pagamento. O fluxo para confirmar o pedido mostra o popup, revertendo a exibição para o usuário confirmar a compra.

Criar um painel de controle para rastrear pedidos

Ao cliente concluir um pedido, criamos um painel de controle para que os donos das lojas possam rastrear e atualizar seus pedidos. Na página de painel, adicionamos um grupo repetidor configurado para exibir pedidos filtrados pela loja associada ao usuário atual.

Podemos restringir a exibição para apenas pedidos com status de envio igual a “não”. Para ver detalhes completos de um pedido, criamos um workflow que leva o dono da loja à página de pedido individual ao clicar em “ver pedido”.

Atualizando o status de um pedido

Na página de pedidos, configuramos o tipo da página como pedido e adicionamos um grupo repetidor para exibir os itens do pedido atual. O último recurso é um workflow para atualizar o status de envio do pedido para “sim”.

Criar recursos adicionais para um site de e-commerce

Você aprendeu a criar campos de dados customizados e exibir conteúdo dinâmico. Agora pode começar a criar novas experiências para o seu site de e-commerce no estilo Shopify.

Além disso, é possível:

• Gerar faturas
• Permitir avaliações dos produtos pelos usuários
• 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://blog.semcodar.com.br/blog/bubble-how-to-build

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