Como criar um site de comércio eletrônico no code como o eBay

Aprenda como criar seu próprio site de comércio eletrônico, usando o editor visual web do Bubble.

Encontrar uma ótima compra online nunca foi tão fácil. Com mais de um bilhão de produtos listados no eBay, compradores e vendedores de todo o mundo podem se conectar e trocar valores.

Portanto se você está procurando criar uma dedicada loja virtual ou se estiver interessado em utilizar alguns dos principais recursos do eBay, este guia mostrará como começar a criar seu próprio MVP no code.

Dessa forma ao longo deste artigo, vamos destacar como criar as seguintes características principais do eBay:

• Listagem de Produtos – Permitir que os usuários façam upload e vender produtos
• Uma função de pesquisa, permitindo aos usuários descobrir rapidamente produtos específicos
• Exibir listas dinâmicas de produtos em uma página inicial
• Criando páginas dinâmicas de produtos
• Uma experiência de checkout para facilitar as transações

Os passos para criar um leilão virtual como o eBay no code incluem:

Faça seu cadastro gratuito no Bubble.

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito, assim você conseguirá começar a criar seu site tipo eBay.

Além disso, também será benéfico se você entender como criar e editar contas de usuário em seu site de comércio eletrônico . Já cobrimos isso com mais detalhes em nosso artigo Como criar um site tipo Quora.

Logo ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do produto ou criando os campos necessários em seu banco de dados.

Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Portanto se você está criando uma versão do eBay, algumas das páginas principais que desejará incluir são:

• Uma página inicial – Apresentando listas de produtos
• Página de upload de produtos – Um portal onde os usuários podem fazer upload de produtos que desejam vender
• Uma página de produto individual – Exibindo todos os detalhes de um produto selecionado

Além disso um recurso importante no Bubble é a capacidade de enviar dados entre páginas. Isso permite, dessa forma, que você crie uma versão genérica de uma página e exiba dinamicamente o conteúdo relevante de seu banco de dados quando necessário.

No caso do seu comércio eletrônico, você só precisará criar uma página para hospedar um produto individual. Posteriormente nesta postagem, explicaremos como você pode exibir dinamicamente um produto relevante nesta página apenas depois de selecionado.

Configure seu banco de dados

Logo depois de mapear a exibição do seu produto, você pode se concentrar em criar os campos de dados necessários para seu site de comércio eletrônico. Contaremos com esses campos para conectar os workflows por trás do seu eBay no code.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Portanto ao criar nosso site de comércio eletrônico tipo eBay MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Produto

Campos:

• Nome do produto
• Preço de “compre agora”
• Lance inicial
• Descrição
• Imagem
• Endereço
• Custo de envio
• Categoria
• Preço do lance atual
• Licitante do produto (usuário)

Tipo de dados: Usuário

Campos:

• Nome
• Endereço
• Produtos adquiridos – lista de produtos

Workflows para criar um site de comércio eletrônico no code

Agora que você estruturou o design e o banco de dados para sua aplicação, é hora de começar a juntar tudo e tornar seu produto funcional.

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

Listando um produto à venda

Um dos principais recursos do eBay é a capacidade dos usuários de listar produtos à venda na plataforma.

Assim, na página de lista de produtos, você pode começar a criar esse recurso usando uma combinação de inputs, incluindo campos de texto livre, uploaders de imagem e campos suspensos.

Depois que um usuário tiver adicionado os detalhes relevantes para um produto em cada input, eles clicarão no botão enviar para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.

Usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo produto.

Você precisará então começar a adicionar dados aos campos relevantes em seu banco de dados. Portanto mapeie cada input que deseja criar em relação ao campo de dados correspondente.

Exibir produtos em sua página inicial

Depois de começar a enviar produtos para a plataforma, você está pronto para exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso  elemento de grupo repetidor.

Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

Assim, ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como um produto.seus liderados através de benchs. Um líder formal ou informal,

Além disso, você também precisará definir a fonte de dados como uma lista de todos os produtos submetidos em seu banco de dados.

Como a página inicial do eBay é filtrada por categorias de produtos, também adicionaremos um elemento suspenso à nossa página inicial, permitindo assim aos usuários visualizar os produtos por seus segmentos relevantes.

Além disso, também é possível integrar este menu suspenso como uma fonte de dados para nosso grupo repetidor e exibir apenas produtos de nosso banco de dados que correspondam à mesma categoria do menu suspenso selecionado.

Dessa forma, basta adicionar uma nova restrição à fonte de dados do seu grupo repetidor. Assim, essa restrição vai filtrar o grupo repetidor pelos produtos que apresentam a mesma categoria que o valor selecionado em nosso menu suspenso.

Depois de configurarmos corretamente a fonte de dados desse grupo repetidor, podemos começar a estruturar o conteúdo dinâmico que será exibido em cada coluna. Portanto simplesmente mapeie a primeira coluna com o conteúdo relevante que gostaria de mostrar, e o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

O conteúdo que adicionaremos a cada coluna é o título do produto, a imagem do produto e o preço de “compre agora” do produto.

Navegar entre as páginas

Ao usar um grupo repetidor, também é possível acionar eventos dos elementos em cada coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em seu site de comércio eletrônico. Portanto como a página inicial do eBay mostra apenas uma visão geral de cada produto, você desejará exibir os detalhes completos do produto para cada item único em uma página separada.

Esse conteúdo adicional precisará ser hospedado na sua página do produto individual.

Para potencializar este evento, comece criando um workflow que redirecione o usuário para a página do seu produto quando a imagem do item é clicada.

Em seguida selecione um evento de navegação para enviar um usuário a outra página. Portanto, a partir daqui, selecione a página de destino como a página do produto.

Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble possa identificar qual produto específico exibir. Os dados que você precisa exibir são os do produto da célula atual.

Pesquisando por produtos

Na sua página inicial, os usuários também podem navegar até um produto específico integrando um elemento de navegação de pesquisa. Dessa forma, uma barra de pesquisa é uma maneira poderosa de agilizar o processo de descoberta de produtos específicos por seu título.

Assim, depois de adicionar um elemento da barra de pesquisa à sua página inicial, configure a fonte de dados como o tipo de dados do produto, junto com o campo de dados título. Isso agora vai indexar todas as entradas do seu banco de dados e até mesmo oferecer sugestões de pesquisa à medida que são digitadas.

A partir daqui, você pode direcionar um usuário para a página do produto relevante, criando um workflow de navegação.

Dessa forma comece criando um novo evento que é acionado quando o valor de um elemento é alterado. O elemento com o qual estaremos trabalhando, é claro, sua barra de pesquisa.

Em seguida, crie outro evento de navegação, definindo a página de destino como sua página do produto. Os dados que serão enviados são o valor atual da caixa de pesquisa.

Exibir conteúdo dinâmico na página de um produto

Quando um usuário é direcionado para a página de um produto específico, você pode obter facilmente esses dados de evento de seu workflow e exibir o conteúdo relevante.

No entanto antes de criarmos essa função, você primeiro precisa garantir que o tipo da página corresponda à propriedade de dados que você está enviando por meio do seu workflow. Nesse caso, você precisará definir a página do produto como uma propriedade do produto.

Dessa forma, agora você pode começar a adicionar conteúdo dinâmico em seus elementos de página para exibir as informações do produto que foram enviadas em seu workflow.

Faça um lance ou compre um produto

Agora que o usuário acessou a página de um produto que gostaria de comprar, é hora de criar nosso recurso principal final em nosso site de comércio eletrônico.

No eBay, existem duas alternativas para a compra de produtos listados para venda. A primeira é fazer uma oferta por um produto e a segunda é pagar um preço fixo e comprá-lo imediatamente.

Abordaremos as duas opções, começando com a alternativa de lance.

Primeiramente, na página do produto, usaremos um elemento de texto para exibir o preço de lance atual do produto.

Este campo de texto exibirá o preço de lance inicial que um usuário adicionou originalmente ao seu produto. Dessa forma como um campo dinâmico, ele será atualizado automaticamente sempre que um lance mais alto for adicionado.

No entanto para facilitar o processo de licitação, também adicionaremos um input e um botão de lance. Assim cada vez que um usuário enviar um lance, precisaremos fazer alterações no preço de lance do produto atual.

Quando o botão de lance for clicado, faremos alterações no produto da página atual, depois atualizaremos o preço de lance e os campos de dados do licitante do produto.

Dessa forma, sempre que um novo lance for adicionado, nosso aplicativo armazenará um registro desse preço e quem é o licitante atual.

Se um usuário deseja comprar um produto imediatamente, no entanto, precisaremos criar um workflow separado. Isso seguirá um processo semelhante à criação de uma experiência de checkout regular em qualquer plataforma de comércio eletrônico no Bubble.

Assim, abaixo do preço do produto, comece a projetar uma forma de pagamento onde um usuário pode adicionar seus detalhes de pagamento.

Processando pagamentos em nosso eBay no code

Usando o Bubble, é possível aproveitar o poder de vários plug-ins para aceitar pagamentos e processar pedidos com facilidade.

Neste guia, usaremos o plug-in Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.

Nota: Depois de integrar este plug-in, você precisará primeiro configurar suas chaves de API nas configurações do plug-in.

Depois de configurar o plug-in, você precisará adicionar um elemento de token Stripe próximo ao seu formulário de pagamento.

Este elemento não será visível para seus usuários finais, mas é essencial para realizar uma nova transação no Stripe.

Quando o botão de compra é clicado, criaremos um novo workflow que aciona um pagamento Stripe.

Assim, você começará selecionando o evento ‘converter cartão em Stripetoken A‘. Dessa forma, nesse evento, você precisará configurar seus inputs para corresponder à estrutura de pagamento do Stripe.

Após converter o cartão em token Stripe, criaremos um workflow que processe automaticamente esse token da conta bancária do usuário.

Usando o evento ‘Stripe.js – charge – create’, você verificará o token Stripe, bem como o valor final a ser pago (incluindo a moeda).

Adicionando novas funcionalidades ao seu eBay Sem Codar

Enfim, agora você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico. Então pode começar a adicionar novas funcionalidades em seu site de leilão online no code. Adicionalmente você pode:

• Refinar categorias com subcategorias para uma melhor experiência de pesquisa
• Permitir que usuários adicionem produtos a uma lista de interesse
• Permitir que usuários adicionem avaliações aos produtos. Cobrimos isso com mais detalhes aqui. ← Link para o post sobre IMDb

• Essa ferramenta gratuita vai acelerar 10x a criação do seu aplicativo Bubble
• Bubble.io: API Correios – Cálculo gratuito e automático de preço e prazo de entrega
• Comparativo AppsGeyser x Thunkable x AppGyver | A MELHOR PARA CRIAR APPS NATIVOS NO-CODE (GRÁTIS)

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
Acesse aqui a versão original deste tutorial em inglês