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.
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:
Índice
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:
- Nome
- Endereço
- 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
- Produtos adquiridos – lista de produtos
Tipo de dados: Produto
Campos:
- Título
- Descrição
- Imagem destacada
- Preço
- Localização
- Custo de envio
- Categoria
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.
Usando o editor de workflow, selecione para criar um novo item em seu banco de dados. Assim, 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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).
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.
