Aprenda a criar um aplicativo de delivery tipo Uber Eats, iFood e Doordash grátis, usando o editor visual web do Bubble.
Se você está faminto, recomendamos pedir algo no Uber Eats. Mas se você está com fome para começar a criar software sem a necessidade de programar, recomendamos o uso da tecnologia de ponta da ferramenta de desenvolvimento visual do Bubble.
Nossa plataforma poderosa está revolucionando a forma como as pessoas comuns podem criar software, tornando o caminho para a criação de um negócio online mais acessível. Podemos usar o Bubble para criar portfólios, lojas virtuais e até redes sociais.
Neste artigo, vamos percorrer o processo de criação de sua própria plataforma de entrega de refeições – sem tocar em uma única linha de código. Se você sempre quis criar um aplicativo tipo Uber Eats, iFood, Seamless, Postmates ou DoorDash grátis, este tutorial sem código é perfeito para você.
Ao longo deste guia, iremos destacar como criar os seguintes recursos-chave para seu app de entregas sem código:
- Criando uma página inicial que exibe opções de refeição por suas categorias relevantes;
- Criando uma página dinâmica para exibir todos os detalhes de cada refeição em seu banco de dados;
- Suporte para receber pagamentos e processar pedidos;
- Exibindo uma lista de refeições para entregar, em um portal back-end para entregadores.
As etapas para criar um app tipo Uber Eats ou iFood, sem código, incluem:
Índice
Iniciando nosso Uber Eats Sem Codar
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Com a conta Bubble você pode acompanhar enquanto criamos nosso aplicativo juntos.
Faça seu cadastro gratuito no Bubble.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do aplicativo 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 app. Como estamos fazendo uma versão sem código do Uber Eats, algumas das páginas principais que precisaremos incluir são:
- Uma página inicial – Exibindo uma lista de refeições por suas categorias;
- Uma página de refeições separada – Exibindo os detalhes completos de cada refeição que é selecionada, bem como uma função de checkout;
- Um portal back-end para parceiros de entrega – permitindo que eles monitorem as entregas de novas refeições em tempo real.
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.
No caso do seu modelo de Uber Eats, você só precisa criar uma página para hospedar suas refeições individuais. Podemos então criar a lógica necessária para exibir apenas os detalhes relevantes da refeição em cada página quando eles forem necessários (abordaremos isso com mais detalhes em breve).
Configurando seu banco de dados
Depois de mapear a exibição de seu aplicativo, você pode se concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar os workflows por trás de seu app.
O banco de dados pré-construído do Bubble agiliza o processo de criação de diferentes tipos de dados com campos únicos. Para criar a lógica subjacente para os principais recursos listados acima, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Nome
- Endereço
- Refeições compradas – Nota: Criar um campo como uma lista, com base em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar valores de campo adicionais.
Tipo de dados: Refeições
Campos:
- Título
- Descrição
- Imagem
- Categoria
- Preço
- Restaurante / criador
- Comprador
Tipo de dados 3: Restaurante
- Nome
- Refeições – lista de refeições
- Endereço
Tipo de dados 4: Contratante de entrega
- Nome
- Refeições para entregar
Workflows para um Uber Eats no Bubble
Agora que você estruturou o design e o banco de dados para sua aplicação, é hora de começar a juntar tudo – tornando seu aplicativo 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.)
Exibir uma lista de conteúdo dinâmico em sua página inicial
Para exibir o conteúdo em seu Uber Eats, você precisa primeiro adicionar novas entradas em seu banco de dados. No Bubble, há duas maneiras de fazer isso.
Se você for o único moderador de seu app, poderá adicionar manualmente uma nova entrada em seu banco de dados para os campos relevantes.
Como alternativa, também é possível criar uma página separada em seu aplicativo, onde você pode adicionar visualmente os envios usando os inputs.
Depois de começar a enviar refeições em seu banco de dados, 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.
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 refeição.
Você também precisará definir a fonte de dados como uma lista de todas as refeições em seu banco de dados. Se quiser segmentar cada repetição por uma categoria relevante, você pode até adicionar uma restrição adicional à sua fonte de dados.
Agora 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 você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Criando eventos no grupo repetidor do Uber Eats
Ao usar um grupo repetidor, também é possível criar eventos dentro de cada coluna individual.
Este recurso se tornará útil ao criar funções de navegação em sua plataforma. Como a página inicial do Uber Eats exibe apenas uma visão geral de cada produto (incluindo seu nome, imagem e preço), você desejará exibir os detalhes completos da refeição para cada item único em uma página separada.
Este conteúdo adicional precisará ser hospedado em página de refeição individual.
Para ativar esse evento, você precisará começar criando um workflow que redirecione o usuário à página do produto quando a imagem da refeição é clicada.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo de página de destino para ser a página da refeição.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubbles saiba qual produto específico exibir. Os dados que você precisa exibir são os da refeição da célula atual.
Também é possível usar nosso elemento de barra de pesquisa para ajudar a navegar pelas páginas de seu aplicativo. Se você quiser saber mais sobre este poderoso elemento, recomendamos a leitura deste guia.
Exibir conteúdo dinâmico em uma página de refeições
Quando um usuário é direcionado para uma página de refeição específica, você pode facilmente extrair esses dados de evento de seu workflow para exibir o conteúdo relevante.
Antes de criarmos esse workflow, você primeiro precisa garantir que o tipo de página de destino corresponda à propriedade de dados que você está enviando por meio da lógica de evento. Nesse caso, você precisará definir a página da refeição como uma propriedade da refeição.
Agora você pode começar a adicionar conteúdo dinâmico em seus elementos da página, exibindo as informações da refeição que foram enviadas em seu workflow.
Suporte à refeição do usuário – plugin Stripe.js
Usando Bubble, é possível aproveitar o poder de vários plug-ins gratuitos para aceitar facilmente pagamentos e processar pedidos no seu Uber Eats no code.
Neste guia, usaremos o plugin Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.
Observação: 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 de seus cartões de crédito. Para o bem do nosso MVP, adicionaremos esses campos relevantes abaixo do botão de compra. Em seu aplicativo, você pode adicionar esses elementos a um pop-up ou até mesmo em uma página separada.
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.
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 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á criar um novo pedido para uma nova empresa de entrega.
Ao adicionar uma etapa extra ao workflow de pagamentos, criaremos um novo item (contratante de entrega). Os dados que queremos adicionar são as refeições da página atual.
Exibindo entregas de refeições para entregadores
Por fim, depois que uma refeição for adicionada ao painel do entregador, desejaremos exibir o endereço de busca e entrega.
Comece configurando o tipo da página de backend da entrega (delivery backend) como contratante da entrega (delivery contractor).
Agora use um grupo repetidor para exibir as refeições dos contratantes atuais a serem entregues.
Você pode então formatar as células do grupo repetidor para exibir o endereço de busca (endereço do restaurante) e o endereço de entrega (endereço do usuário que comprou).
Recursos adicionais para o Uber Eats no code
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 ser criativo com as experiências criadas com seu aplicativo de entregas tipo Uber Eats.
Adicionalmente, você pode:
- Adicionar comentários a cada refeição;
- Adicionar grupos repetidores extras em uma página de refeição para sugerir cozinhas diferentes;
- Criar uma página individual para exibir informações sobre cada restaurante;
- Adicionar uma função para contratantes de entrega marcarem as refeições como entregues.
Veja também os Tutoriais em Vídeo:
- [NOVO VIDEO] Como criar um aplicativo delivery multi-restaurantes
- Como criar o melhor aplicativo Delivery de Pizzaria do Brasil 🍕
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-meal-delivery-platform-no-code/
