Como criar um aplicativo de supermercado no code

Aprenda como criar seu próprio aplicativo de supermercado como o Instacart no code, usando o editor visual web do Bubble.

Quando se trata de compras de supermercado, utilizar aplicativos como o Instacart pode ser a maneira mais econômica.

Ao criar seu próprio aplicativo, no entanto, a alternativa mais econômica é simplesmente criá-lo você mesmo. Mas e se você não tiver experiência em escrever código?

À medida que o cenário no code evolui rapidamente, ferramentas como o Bubble tornaram mais fácil do que nunca para criadores de todas as origens começarem a criar software. A plataforma é uma porta de entrada para os fabricantes do amanhã – apoiando aqueles que estão moldando o futuro do desenvolvimento de produtos sem ter que escrever código. Usamos o Bubble para criar portfólios, marketplaces e até redes sociais.

Neste artigo, vamos percorrer o processo de criação da sua própria plataforma de entrega de supermercado – sem tocar em uma única linha de código. Se você sempre quis fazer sua própria versão do Instacart, este tutorial é perfeito para você.

As etapas para criar seu Instacart no code incluem:

Iniciando seu aplicativo de supermercado

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Isso o ajudará a começar o trabalho para criar seu app de entregas no code.

💻

Recomendamos que você entenda como criar e editar contas de usuário, assunto que abordamos em nossos outros guias ‘Como criar’.

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

Nesse caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Se você estiver replicando uma versão do Instacart, algumas das páginas principais que vai querer incluir são:

• Configurações da conta – uma página onde os usuários podem atualizar as informações de suas contas
• Um portal back-end – usado para fazer upload dos itens de supermercado
• Uma página para selecionar supermercado
• Uma página de lista de mantimentos – exibindo uma lista dos mantimentos de uma supermercado selecionado
• Página de checkout – Resumindo uma lista de itens adicionados ao carrinho de um usuário
• Um portal de parceiro de entrega – uma página onde os prestadores de serviço podem visualizar os pedidos disponíveis para atender
• Uma página de resumo do pedido – usada para exibir os itens em cada pedido para parceiros de entrega

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 do seu banco de dados quando for necessário.

No caso de seu app de entregas de supermercado no code, você só precisará criar uma página para hospedar sua lista de itens. Então podemos  criar lógica necessária para exibir apenas os itens relevantes em cada página quando eles forem necessários (abordaremos isso com mais detalhes em breve).

Configurando o Instacart no Bubble

Com o produto mapeado, podemos nos concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar os workflows por trás de seu app.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar um MVP Instacart, precisaremos dos seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

• Nome
• Endereço
• Itens adicionados ao carrinho – lista de itens do supermercado. 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.

Tipo de dados: Supermercado

Campos:

• Nome
• Logotipo
• Endereço
• Itens do supermercado – Lista de itens

Tipo de dados: Item do supermercado

Campos:

• Nome
• Descrição
• Imagem
• Preço
• Categoria – Lista de textos
• Compras do supermercado – supermercado

Tipo de dados: Pedido

Campos:

• Usuário que fez o pedido- usuário
• Supermercado de compra – supermercado
• Endereço de saída
• Endereço de entrega
• Total de itens- Lista de itens do supermercado
• Status de progresso – sim / não, ‘não’ como padrão
• Status de pedido concluído – sim / não, ‘não’ como padrão

Workflows para um aplicativo de supermercado

Agora que você estruturou o design e o banco de dados para seu Instacart sem programar, podemos juntar tudo – tornando 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. )

Adicionar itens de supermercado ao Instacart

O primeiro recurso que criaremos não é algo que os usuários verão diretamente, mas uma ferramenta back-end que você usará para gerenciar o conteúdo na plataforma.

Criando um portal onde os administradores podem fazer upload dos produtos ajuda a agilizar o processo de adição de novos itens aos supermercados em destaque.

Na  página de adicionar item, você começará a mapear os inputs relevantes necessários para cada item de supermercado. Usando uma combinação de inputs de texto, inputs multilinhas, menus suspensos e uma barra de pesquisa, podemos adicionar facilmente todas as informações necessárias para um item.

Como nossa barra de pesquisa será usada para encontrar uma supermercado existente na qual estamos adicionando um item, precisaremos configurar esse elemento para exibir uma lista dinâmica do nosso banco de dados.

Comece procurando por supermercados em seu banco de dados, em seguida, configure a pesquisa por nomes de supermercados. Agora isso irá indexar uma lista de todos os supermercados em seu banco de dados e até mesmo oferecer resultados preditivos conforme você digita o nome de um supermercado.

A partir daqui, criaremos nosso primeiro workflow para criar um novo item de supermercado quando o botão Adicionar item for clicado.

Ao criar seu workflow, precisaremos criar um novo item, configurando o tipo de dados para um item de supermercado.

Você então combinará os elementos relevantes em sua página com os campos de dados do tipo item de supermercado em seu banco de dados.

Exibindo conteúdo dinâmico

Depois de fazer upload de um catálogo de itens de supermercado, é hora de começar a exibi-lo em uma página pública que os usuários possam acessar.

Usando o elemento de grupo repetidor do Bubble, você pode exibir uma lista de dados dinâmicos do seu banco de dados, com base em quaisquer configurações definidas.

Seguindo a experiência do usuário Instacart, começaremos criando uma página para exibir uma lista de todos os supermercados em seu banco de dados. Chamaremos esta página de seletor de supermercado.

Para começar a exibir dados em seu grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Isso o ajudará a identificar o conteúdo que será necessário apresentar.

O tipo de conteúdo a ser exibido serão os supermercados do seu banco de dados. Também configuraremos esse grupo repetidor para pesquisar todos os supermercados, exibindo uma lista rolável de cada opção.

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.

Enviando dados entre páginas

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 sua plataforma. Depois que um usuário seleciona o supermercado em que deseja comprar, redirecionaremos o usuário para uma nova página, exibindo uma lista completa de todos os itens do oferecidos por esse supermercado específico.

Para potencializar este evento, você precisará começar criando um workflow de navegação quando a imagem do supermercado 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 do supermercado.

Em seguida, você precisará enviar dados adicionais para esta página para que o editor do Bubble saiba quais mantimentos relevantes exibir. Os dados que você precisa exibir são os do supermercado da célula atual.

Exibir os itens únicos de um supermercado

Depois que um usuário clicar de um supermercado para a página da lista de compras , seguiremos um processo semelhante ao de antes ao configurar os elementos da página.

Antes de adicionarmos nosso grupo repetidor, primeiro você precisará garantir que o tipo da página corresponda à propriedade de dados que acabou de ser enviada por meio do seu workflow. Nesse caso, você precisará definir o tipo da página como supermercado.

Em seguida, configuraremos nosso grupo repetidor para um tipo de dados supermercado. Depois, atualizaremos a fonte de dados para pesquisar itens de supermercado que sejam apenas do supermercado da páginas atual.

Isso garantirá que apenas os itens relevantes sejam mostrados para cada supermercado.

Mais uma vez, você pode mapear o conteúdo em seu grupo repetidor. Para cada linha, incluiremos a foto, o nome e o preço dos itens.

Criar uma pesquisa para encontrar itens específicos

Como nosso grupo repetidor exibe uma lista de todos os itens de um supermercado, precisaremos também criar um recurso para pesquisar itens individuais e, em seguida, exibi-los em nosso grupo repetidor.

Usando um elemento de caixa de pesquisa, podemos pesquisar itens de supermercado pelo campo título de itens.

Em seguida, precisaremos adicionar uma configuração adicional ao nosso grupo repetidor para responder ao input desta caixa de pesquisa.

Neste ponto, adicionaremos uma restrição ao nosso grupo repetidor para exibir itens onde o campo de título corresponda ao valor das caixas de pesquisa.

Mas e se a caixa de pesquisa estiver vazia em uma página? Nesse cenário, nosso grupo repetidor não mostraria nenhum dado, pois não há valor para indicar quais dados devem ser recuperados.

Para aliviar isso, adicionaremos uma condição ao nosso grupo repetidor. As condições podem ser usadas para criar regras adicionais para elementos.

A condição que adicionaremos indicará que, quando o valor na caixa de pesquisa for vazio, a fonte de dados do grupo repetidor será todos os itens do supermercado da página atual.

Agora, por padrão, o grupo repetidor exibirá todos os itens do supermercado até que um valor seja adicionado na caixa de pesquisa.

Adicionar um item ao carrinho do usuário

Quando um usuário decide que está pronto para adicionar um item ao carrinho, ele clica no ícone de adição (+) para acionar um novo workflow.

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

O item que precisamos mudar é o usuário atual, no qual queremos adicionar o item das célula atual aos itens adicionados ao carrinho.

Crie um checkout

Um dos recursos exclusivos de qualquer plataforma ou mercado de comércio eletrônico é a capacidade de comprar produtos por meio de um checkout. Para economizar tempo de desenvolvimento, criaremos nossa página de checkout replicando nossa página de lista de compras.

Ao criar uma página de checkout, comece configurando o tipo da página como um pedido.

Em seguida, você começará adicionando um grupo repetidor que exibe uma lista de todos os itens de supermercado contidos no campo de dados adicionar ao carrinho do usuário.

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

Abaixo desse preço, você pode mapear uma forma de pagamento onde um usuário pode adicionar seus detalhes de pagamento.

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

Você também precisará incluir um elemento de token Stripe ao lado do 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.

Processar pagamentos para seu Instacart no code

Quando o ‘botão comprar’ é clicado, criaremos um novo workflow que aciona um pagamento Stripe para concluir este processo de checkout.

Antes de processar este pagamento, precisaremos primeiro criar um novo pedido em nosso banco de dados, armazenando os detalhes da página atual.

Neste workflow, vamos criar um novo item.

O item que vamos criar é um novo pedido. Dentro desta ordem, vamos estruturar os campos de dados relevantes, incluindo: a lista de itens do pedido, o usuário que criou o pedido, e ambos os endereços de saída e entrega.

A seguir, adicionaremos uma etapa extra este workflow, 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).

Estruturar pedidos para parceiros de entrega

O último recurso que precisaremos criar é um portal onde os parceiros de entrega podem visualizar uma lista de pedidos enviados e marcá-los como concluídos assim que forem atendidos.

Comece criando outra nova página. Chamaremos essa página de portal de entrega. O tipo da página deverá ser definido como um pedido.

Em seguida, adicionaremos um grupo repetidor, configurando o conteúdo como pedido. Ao adicionar outras restrições, podemos exibir apenas os pedidos que não foram entregues e não estão em andamento.

Dentro deste grupo repetidor, adicione uma matriz de elementos de texto dinâmico para exibir:

• A contagem total de itens dos pedidos atuais
• Os pedidos atuais, usuários dos pedidos e nome
• O endereço de saída dos pedidos atuais
• O endereço de entrega dos pedidos atuais

Quando um parceiro de entrega decide sobre qual pedido desejam processar, eles clicarão no botão atender, acionando um novo workflow.

O objetivo deste workflow é direcionar o parceiro de entrega para uma nova página onde ele pode visualizar uma lista de todos os itens do pedido.

Antes de criar um evento de navegação, primeiro precisamos atualizar o status deste pedido para marcá-lo como em andamento.

Selecione alterar um item no banco de dados, atualizando p status do pedido em andamento para sim.

Isso vai remover o pedido da lista de pedidos disponíveis em nosso portal de entrega.

A seguir, criaremos um evento de navegação, enviando o usuário para nossa nova página de pedir itens, enviando com ele os dados do pedido da células atual.

Exibindo uma lista de itens em um pedido

Nossa página de itens do pedido pode ser replicada da nossa página inicial da lista de compras, você apenas precisará atualizar o tipo da página para um pedido.

Agora, um parceiro de entrega pode ver uma lista de todos os itens de supermercado desse pedido.

Atualizar o status dos pedidos

O workflow final que precisaremos criar é uma função para um parceiro de entrega marcar o pedido atual como concluído.

Na parte inferior da nossa página de itens do pedido, adicionaremos um botão ‘completo’.

Quando este botão é clicado, criaremos um workflow que altera um item no banco de dados. Nesse caso, o que queremos mudar agora é o status completo do pedido.

A partir daqui, vamos atualizar o status completo para sim.

Recursos adicionais para um Instacart no code

Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a ficar criativo com as experiências criadas em seu aplicativo Instacart.

Adicionalmente, você pode:

• Adicionar suporte para dicas
• Adicionar campos extras aos mantimentos – peso, nutrição, etc.
• Adicionar uma função para selecionar tempos de entrega personalizados
• Adicionar opções para comprar itens em múltiplos
• Filtrar grupos de mantimentos repetidos por categorias

Aprenda como criar sites e aplicativos com nossos Tutoriais Sem Codar:

• [NOVO VIDEO] Como criar um aplicativo delivery multi-restaurantes
• Como criar o melhor aplicativo Delivery de Pizzaria do Brasil 🍕
• Exemplo de um Aplicativo Real criado em Bubble (e quanto tempo leva pra criar)

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-instacart-clone-no-code/