Aprenda como criar um e-commerce no code, usando o editor visual web do Bubble.
Você não precisa mais saber escrever código para criar um software poderoso. Criadores de todas as origens estão se voltando para ferramentas no code como o Bubble para criar produtos com nosso editor visual integrado. Nossa plataforma simplifica o processo de criação e desenvolvimento de aplicativos de qualquer tipo. O Bubble pode ser usado para criar quadros de empregos, redes sociais e até ferramentas internas da empresa.
Essa postagem irá percorrer o processo de usar o Bubble para criar uma versão ‘white-label’ do Groupon. Groupon é um mercado para descobrir ofertas e descontos, permitindo aos usuários encontrar ofertas em produtos e serviços que se alinham com seus interesses.
Se você está procurando criar sua própria versão no code de um e-commerce Groupon, ou apenas interessado em utilizar alguns dos principais recursos da plataforma, este guia compartilhará como começar a criar a estrutura subjacente para seu site.
Ao longo deste guia, iremos destacar como criar os seguintes recursos principais do Groupon:
- Hospedar um portal onde as marcas podem enviar ofertas
- Categorização e exibição de ofertas
- Usando páginas dinâmicas para exibir os detalhes completos de uma oferta
- Uma função para os usuários comprem ofertas
- Exibindo ofertas reivindicadas do usuário em seu painel de conta
As etapas para criar o Groupon no code incluem:
Índice
Criar um e-commerce local tipo Groupon
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Então você pode acompanhar enquanto criamos nosso site juntos.
Faça seu cadastro gratuito no Bubble.
Isso o ajudará a começar a trabalhar com seu e-commerce tipo Groupon.
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.
Nesse caso, começaremos usando a ferramenta de design visual para moldar a interface de usuário do nosso produto. Algumas das páginas principais que você desejará incluir em seu MVP do Groupon são:
- Página inicial – Exibindo todas as ofertas disponíveis, bem como quaisquer menus de navegação relevantes
- Uma página onde as marcas podem enviar ofertas
- Uma página para hospedar cada oferta única – listando todos os detalhes e oferecendo suporte para comprar a oferta
- Uma página de conta de usuário – usada para exibir a lista completa de ofertas que um indivíduo comprou
Um recurso importante no Bubble é a capacidade de enviar dados para uma página. Isso significa que você só precisa criar uma versão genérica de uma página que pode solicitar informações sobre usuários específicos ou itens do seu banco de dados.
No caso de seu site Groupon no code, você só precisará criar uma página para hospedar cada oferta individual. Então podemos criar a lógica necessária para exibir apenas o conteúdo relevante de cada oferta quando for necessário (abordaremos isso com mais detalhes em breve).
Configuração do banco de dados para um Groupon no code
Depois de mapear a exibição do seu site, mapearemos os campos de dados necessários para criar um e-commerce. Contaremos com esses campos para conectar a lógica por trás do seu site.
Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de nível superior e, em seguida, adicione os campos necessários em cada categoria.
Ao criar seu Groupon MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Ofertas
Campos:
- Título
- Descrição
- Foto
- Preço
- Categoria de
- Código do cupom
- Acordos reivindicados pelos usuários – Nota: Criar uma lista baseada em um tipo de dados separado permitirá que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar valores de campo adicionais.
Tipo de dados: Usuário
Campos:
- Ofertas reivindicadas – lista de ofertas
- Nome
- Cidade ou localização
Workflows para um Groupon sem programar
Com o design e o banco de dados estruturados, é hora de começar a juntar tudo para 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. )
Criando novas ofertas
Se uma marca ou um moderador está adicionando uma oferta à plataforma, você pode criar um portal privado para facilmente dar suporte a esse processo. Em seu portal de ofertas, você usará inputs para mapear campos de texto livre, estruturados ou campos de arquivo que podem ser usados para atualizar seu banco de dados.
Depois que uma marca adicionar os detalhes relevantes da oferta em cada input, eles clicarão no botão enviar para criar novos dados em seu banco de dados.
Usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados sob o tipo de dados ‘oferta’.
Então você combinará os inputs relevantes com os campos de dados em seu banco de dados.
Usando grupos repetidores em nosso Groupon no code
Depois de criar ofertas, é hora de começar a escrever a lógica na página inicial para exibi-las como listas dinâmicas. Podemos fazer isso utilizando os grupos repetidores.
Ao usar um grupo repetidor, primeiro vinculamos o elemento a um tipo de dados no banco de dados. Nesse caso, classificaremos o tipo de conteúdo como “Ofertas”.
Você também precisará definir a fonte de dados como uma lista de todas as ofertas armazenadas no banco de dados.
Nota: Se quiser classificar as ofertas exibidas em sua página inicial por suas categorias, você pode adicionar outras restrições à fonte de dados dentro do grupo repetidor – apenas buscando os dados com a categoria relevante.
Agora vamos estruturar o conteúdo dinâmico que será exibido na grade. Mapeie a primeira coluna com o conteúdo relevante que gostaria de exibir; o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
É possível criar eventos com base em cada coluna individual do grupo repetidor. Este recurso será útil ao criar funções de navegação na plataforma.
A página inicial do Groupon exibe apenas uma visão geral de cada oferta – incluindo um título, uma imagem e um preço. No entanto, não exibe todos os detalhes de uma oferta até que um usuário clique na página da oferta.
Para criar a lógica desse evento, você precisará começar fazendo um workflow que redirecione um usuário para sua página de pergunta quando a imagem da pergunta for clicada.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione a página de destino como a página da oferta.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual oferta específica exibir. Os dados que você precisa exibir são os da oferta de célula atual.
Exibir conteúdo dinâmico em uma página de ofertas
Quando alguém é direcionado para uma página de oferta específica, você pode obter facilmente esses dados de evento e exibir seu conteúdo relevante.
Ao criar essa função, você primeiro precisa garantir que o tipo da página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a página da oferta como uma propriedade de ofertas.
Ao classificar o tipo de conteúdo em uma página, o Bubble pode facilmente extrair e enviar dados relevantes de fontes existentes.
Agora você pode começar a incluir conteúdo dinâmico nos campos que exibem informações de uma oferta específica.
Permitindo que os usuários comprem ofertas
Usando Bubble, é possível aproveitar o poder de vários plug-ins para aceitar pagamentos e processar pedidos facilmente.
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.
Ao aceitar pagamentos, você precisará criar uma interface de checkout que permita aos usuários adicionar os detalhes dos seus cartões de crédito. Para criar nosso e-commerce no code, adicionaremos esses campos relevantes abaixo do botão de compra.
Você também precisará incluir um elemento de token Stripe próximo ao 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.
Em seguida, precisaremos criar um novo workflow que acione um pagamento Stripe quando o botão “Comprar” for clicado.
Você começará selecionando o evento ‘converter cartão em Stripetoken A’. Nesse evento, você precisará configurar seus inputs para corresponder à estrutura de pagamento do Stripe.
Depois que um cartão for convertido em um 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).
Assim que o pagamento for processado, você precisará exibir esta oferta ao usuário atual no painel da conta.
Adicionando uma etapa extra ao workflow de pagamentos, iremos alterar um item no banco de dados (o usuário atual). O dado que queremos alterar é a lista de ofertas reivindicadas do usuário atual – adicionando a oferta do item que ele acabou de comprar.
Exibindo ofertas reivindicadas de um usuário
Por fim, depois que a oferta de um usuário for reivindicada, exibiremos o conteúdo em uma página separada chamada conta de usuário.
Nesta página, vamos simplesmente adicionar um elemento de grupo repetidor e configurar a fonte de dados como “Ofertas reivindicadas do usuário atual“. Cada linha incluirá o código de cupom da oferta atual.
Criar novos recursos no e-commerce
Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a criar novas experiências em seu e-commerce local.
Além disso, você pode:
- Adicionar uma função para salvar ofertas na lista de desejos de um usuário
- Adicionar comentários de usuários a ofertas
- Adicionar variantes à ofertas
- Adicionar uma função de pesquisa na página inicial
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-groupon-clone-no-code/
