Como criar um Marketplace do Zero tipo a Amazon (sem programar)

Aprenda a criar um Marketplace do Zero tipo a Amazon (sem programar) usando o Bubble, uma ferramenta de desenvolvimento no-code de aplicativos, de forma 100% visual, sem programar.

Criar um Marketplace do Zero (tipo Amazon)
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

Se você precisa de um produto físico enviado rapidamente, a Amazon é a referência no mercado para uma grande seleção e entrega rápida.

Portanto, ao longo deste guia, descobriremos o processo de usar o Bubble para criar um marketplace do zero. Como se fosse sua própria versão ‘white-label’ da Amazon.

Se você está procurando criar uma loja virtual própria assim como interessado em utilizar alguns dos principais recursos da Amazon, este guia mostrará como começar a criar a lógica subjacente para um MVP.

Ao longo deste post, vamos destacar como criar os seguintes recursos principais do marketplace da Amazon:

  • Permitindo que os vendedores criem novas listas de produtos
  • Exibindo produtos dinamicamente em uma página inicial
  • Uma função de pesquisa dedicada a descobrir produtos específicos
  • Criando páginas dinâmicas para listas de produtos
  • Comprando produtos através de um experiência de checkout

As etapas para criar um marketplace do zero como a Amazon usando ferramentas no code incluem:

Faça seu cadastro gratuito no Bubble.

Clique aqui para criar sua conta gratuita no Bubble. Dessa forma você poderá começar a trabalhar para criar seu marketplace do zero tipo Amazon.

Além disso, será benéfico se você entender como criar e editar contas de usuário. Já cobrimos isso anteriormente 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.

Dessa forma, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Se você está se baseando no marketplace da Amazon, algumas das páginas principais que desejará incluir são:

  • Uma página de listagem de produtos – um portal back-end onde os vendedores podem listar seus produtos
  • Uma página inicial – usada para exibir uma lista de produtos em destaque
  • Uma página de resultados de pesquisa – exibindo uma lista de produtos com base na pesquisa do usuário
  • Uma página do produto – usada para exibir todas as informações de um produto individual
  • Uma página de checkout – onde os usuários podem revisar seus itens de carrinho e pagar pelos pedidos.

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

Portanto, no caso da sua plataforma baseada na Amazon, você só precisará criar uma página para hospedar seus produtos individuais. Podemos então criar a lógica necessária para exibir apenas o produto relevante em cada página quando for necessário.

Configurando o banco de dados do marketplace

Logo após mapear a exibição de seu produto, você pode se concentrar na criação dos tipos de dados e campos necessários para alimentar seu aplicativo. Assim contaremos com esses campos para conectar os workflows por trás do seu site.

Além disso o banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Portanto ao usar a Amazon como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

  1. Nome
  2. Endereço
  3. Itens adicionados ao carrinho – lista de produtos. Nota: Criar um campo baseado em lista, em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar campos adicionais
  4. Produtos adquiridos – lista de produtos
Banco de dados
Banco de dados

Tipo de dados: Produto

Campos:

  • Título
  • Descrição
  • Imagem destacada
  • Preço
  • Localização
  • Custo de envio
  • Categoria
Criar marketplace tipo Amazon no Bubble - Campos

Criando workflows do marketplace

Com o design e o banco de dados estruturados, podemos começar a juntar tudo e tornar seu marketplace funcional.

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.)

Adicionando um novo produto

Atualmente um dos principais recursos ao criar um Marketplace como a Amazon é a capacidade dos vendedores de listar seus produtos à venda na loja virtual.

Portanto em nossa página de upload do produto. Você pode começar a criar esse processo usando uma combinação de inputs, incluindo; campos de texto livre, uploaders de imagens ou campos de seleção múltipla.

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

editar workflow

Usando o editor de workflow, selecione para criar um novo item em seu banco de dados. Assim, estaremos criando um novo produto.

novo produto 1

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.

novo produto 2

Exibir uma lista de conteúdo dinâmico em sua página inicial

Depois que vários produtos foram adicionados à sua loja, você está pronto para exibir cada item em um feed na página inicial. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.

Grupo 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.

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

Nota: Se desejar segmentar cada repetição por uma categoria relevante, você pode adicionar uma restrição extra à sua fonte de dados.

lista de produtos

Depois que essa fonte de dados for configurada, você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapeie a primeira coluna com o conteúdo relevante que gostaria de mostrar. Então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

conteúdo dinâmico

Enviando dados entre as páginas do marketplace

Em um grupo repetidor, também é possível criar eventos em cada coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em seu marketplace. Assim como a página inicial da Amazon exibe apenas uma visão geral de cada produto (incluindo seu nome, imagem e preço), você desejará exibir os detalhes completos do produto para cada item único em uma página separada.

Portanto este conteúdo adicional precisará ser hospedado em sua página de produto dedicada.

Para ativar esse evento, primeiramente você precisará começar criando um workflow que redirecione o usuário a sua página do produto quando a imagem do produto é clicada.

Criar marketplace tipo Amazon no Bubble - envio de dados

Nesse workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo da página de destino como a página do produto.

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

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

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

Logo, na página de destino, você precisará configurar o tipo da página como o mesmo tipo de dados que está sendo enviado por meio de seu workflow.

Nesse caso, você definirá a página do produto como uma propriedade do produto.

Criar marketplace tipo Amazon no Bubble - conteúdo relevante

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

Criar marketplace tipo Amazon no Bubble - página de produto

Criando uma navegação de pesquisa

Ao criar um marketplace, é possível inserir uma função de pesquisa para navegar entre as páginas como um recurso de navegação alternativo.

Ainda mais com milhões de produtos no marketplace da Amazon, os usuários frequentemente precisarão pesquisar itens específicos por meio de uma barra de pesquisa na página inicial.

Isso permite que os usuários insiram uma consulta e, em seguida, visualizem uma lista de todos os produtos relevantes que correspondem a essas palavras-chave.

Assim, ao criar uma página adicional em nosso aplicativo, podemos criar uma lista de resultados da pesquisa. Além disso, como usaremos o mesmo elemento de grupo repetidor que criamos em nossa página inicial, você pode agilizar o tempo de criação replicando esta página existente.

Ao criar esta página, também precisaremos configurar o tipo de conteúdo da página como um produto.

Criar marketplace tipo Amazon no Bubble - navegação de pesquisa

De volta à nossa página inicial, usaremos um input de texto, permitindo aos usuários inserir as palavras-chave do produto.

Daqui, criaremos um novo workflow que classifica uma frase de pesquisa do usuário e, em seguida, passa esses dados para nossa página de resultados da pesquisa.

Além disso, para potencializar esse workflow, criaremos um gatilho de evento que reconhece quando um valor de input é alterado. O elemento será, obviamente, o input de texto.

Criar marketplace tipo Amazon no Bubble - input de texto

Como precisaremos adicionar um campo de pesquisa exclusivo à string do nosso URL, não enviaremos um usuário a uma página com este workflow, mas, em vez disso, abriremos um site externo. Isso nos permitirá personalizar o caminho do URL entre as páginas.

A URL para a qual enviaremos o usuário será a URL inicial do site atual + a URL da nossa página de resultados da pesquisa + o valor da consulta dinâmica de nosso input de texto.

Criar marketplace tipo Amazon no Bubble - caminho do URL 1

Agora, em nossa dedicada página de resultados da pesquisa, atualizaremos a fonte de dados de nosso grupo repetidor para assim exibir apenas os produtos que incluem nosso texto de strings de URL em seu campo de título.

Criar marketplace tipo Amazon no Bubble - grupo repetidor

Enfim, você será solicitado a selecionar de qual campo do URL obterá estes dados. Portanto simplesmente escolha obter dados do caminho do URL (URL path), não do parâmetro.

Criar marketplace tipo Amazon no Bubble - caminho do URL 2

Agora será exibido qualquer produto cujo título corresponda a uma instância da palavra-chave específica que está sendo pesquisada.

Agora que você indexou uma lista de produtos relevantes, pode repetir as mesmas etapas de antes. Para assim, criar uma função de navegação entre as células do grupo repetidor e a página individual do produto.

Adicionando itens a um carrinho

Depois que um usuário decide que está pronto para comprar um produto, ele clica no botão adicionar ao carrinho e aciona um novo workflow.

A lógica por trás desse workflow é semelhante à criação de um novo produto, mas desta vez faremos alterações em um campo em seu banco de dados, não criaremos algo novo.

Criar marketplace tipo Amazon no Bubble - adicionar ao carrinho

O único item que precisa mudar é o usuário atual. No qual vamos querer adicionar o produto da página atual aos seus produtos adicionados ao carrinho.

Criar marketplace tipo Amazon no Bubble - usuário atual

Armazenar uma lista do total de itens no carrinho de um usuário será útil ao criar nossa experiência de checkout final.

Criando um checkout em seu Marketplace

A princípio um dos recursos cruciais ao criar um marketplace como a Amazon (ou de qualquer plataforma de comércio eletrônico) é a capacidade de comprar produtos por meio de um checkout. Dessa forma, usando o Bubble, é possível aproveitar o poder de vários plugins para aceitar pagamentos e processar pedidos com facilidade.

Portanto neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.

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

Ao criar uma página de checkout, você começará adicionando um grupo repetidor que exibe uma lista de todos os itens atualmente no campo de dados ‘adicionar ao carrinho’ do usuário

Criar marketplace tipo Amazon no Bubble - checkout 1

Abaixo dessa lista, queremos exibir o preço total dos itens em seu carrinho. O Bubble irá calcular isso automaticamente com base em seus campos de dados existentes.

Criar marketplace tipo Amazon no Bubble - checkout 2

Dessa forma, depois de indicar o preço total do carrinho, você pode mapear uma forma de pagamento onde um usuário pode enviar seus detalhes de pagamento. Além disso você também precisará incluir um elemento de token Stripe próximo ao formulário de pagamento.

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

Criar site tipo Amazon no Bubble - token stripe

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

Você começará selecionando o evento ‘converter cartão em Stripetoken A’ (convert card into Stripetoken A). Nesse evento, você precisará configurar seus inputs para corresponder à estrutura de pagamento do Stripe.

Criar site tipo Amazon no Bubble - stripetoken a

Depois que um cartão for convertido em token Stripe, você precisará criar um workflow adicional que processe automaticamente esse token da conta bancária de um 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).

Criar site tipo Amazon no Bubble - stripe.js

Próximos passos

Depois de criar os recursos principais para seu MVP, você estará familiarizado com o processo de criação de campos de dados personalizados e exibição de conteúdo dinâmico.

Ao criar um marketplace você poderá continuar adicionando recursos à sua plataforma de comércio virtual:

  • Criando perfis para lojas
  • Adicionando suporte para diferentes variações de produtos em uma única listagem
  • Permitindo que os usuários deixem avaliações sobre os produtos.

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email