Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. E então você pode acompanhar enquanto criamos nosso app juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Páginas principais de um app para motoristas
Quando estiver iniciando seu projeto, você pode escolher começar fazendo o protótipo do design de seu aplicativo, ou criar os campos necessários dentro do seu banco de dados.
Neste caso, começaremos usando a ferramenta de design visual Bubble para moldar a interface de usuário da nossa plataforma. Se você está replicando um app de transporte como Uber, algumas das páginas principais que vai querer incluir são:
- Página de configurações da conta – onde os usuários podem atualizar as informações de suas contas
- Página inicial – usada para selecionar o endereço de início e de término de uma viagem
- Um portal do motorista – uma página onde os motoristas podem ver todas as viagens disponíveis
- Uma página de resumo da viagem – exibindo um resumo de cada viagem, uma vez que uma viagem foi aceita
- Conta de usuário – mostrando uma lista de todas as viagens anteriormente reservadas pelo usuário
- Página de avaliação – onde os usuários podem deixar avaliações de uma viagem
Uma característica importante no Bubble é a habilidade de enviar dados entre as páginas. Isso permite que você crie uma versão genérica da página, e então exiba dinamicamente o conteúdo relevante do seu banco de dados quando requisitado.
No caso do seu aplicativo de transporte como Uber, você só precisará criar uma página para hospedar cada resumo de viagem. Podemos então criar a lógica necessária para exibir apenas os itens relevantes em cada página quando eles forem requeridos.
Configure seu banco de dados
Uma vez que você mapeou a exibição do seu aplicativo, pode focar em criar os campos de dados necessários para alimentar seu aplicativo. Vamos depender desses campos para conectar os workflows / ações lógicas por trás do seu aplicativo.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao criar seu app de transporte como Uber como um MVP, precisaremos criar os seguintes tipos e campos de dados:
Tipo de dado: Usuário
Campos:
- Nome
- Motorista – sim / não – com o ‘não’ como padrão
- Viagens anteriores – lista de viagens. Nota: Criar um campo como uma lista baseada em um tipo de dados separado permite que você integre perfeitamente todos os seus campos de dados relevantes, sem ter que criar campos adicionais
- Número do cartão
- Cartão CVV
- Data de validade do cartão (mês)
- Data de validade do cartão (ano)
Tipo de dado: Viagem
Campos:
- Motorista
- Avaliação – avaliação
- Preço
- Local de partida
- Local de destino
- Motorista – usuário
- Em progresso – sim / não com o ‘não’ como padrão
- Completo – sim / não com o ‘não’ como padrão
Tipo de dado: Avaliação
Campos:
- Viagem – viagem
- Classificação por estrelas
- Motorista – usuário
- Conteúdo
Workflows – Ações lógicas necessárias para criar um aplicativo de transporte
Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo – tornando seu app funcional.
No Bubble, a principal maneira de fazer isso é com workflows / ações lógicas. 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.)
Atualizando detalhes da conta do usuário
Uma função poderosa do editor visual de aplicativos do Bubble é a habilidade de criar contas de usuário. A plataforma pode facilmente agilizar todo esse processo; nós entramos em mais detalhes sobre como criar usuários em nossos guias Como Fazer anteriores.
O primeiro recurso que vamos criar, no entanto, é uma página que permite aos usuários editar os detalhes de suas contas, incluindo seu nome e informações de cartão de crédito. Esta informação será instrumental ao reservar viagens pela plataforma.
Em nossa página de configurações de conta, começaremos adicionando vários elementos do tipo Input de entrada de texto para cada campo de dados em uma conta de usuário.
Depois que um usuário adiciona seus detalhes, criaremos um workflow que é acionado quando o botão de atualização (Update) é clicado.
Ao longo deste workflow, queremos fazer alterações em um item do banco de dados.
O item que queremos mudar é o usuário atual (Current User). Vamos atualizar suas informações atuais combinando cada Input com seu campo de dados correspondente.
Planejando uma viagem
Depois de criar nossas contas de usuário, podemos começar a criar os principais recursos de nosso aplicativo de transporte. Começaremos com uma função de reserva – permitindo que os usuários insiram o endereço de partida e de destino desejados e, em seguida, geram uma viagem com base nesses dados.
Em nossa página inicial, começamos adicionando um elemento de mapa e dois campos de entrada. Você precisará começar a configurar ambos os Inputs para um formato de conteúdo endereço (Address).
Ao atualizar o formato dos Inputs, eles se integram perfeitamente a qualquer endereço em seu mapa.
Em seguida, precisaremos configurar nosso mapa para exibir cada um desses locais à medida que são adicionados. Comece definindo o endereço do marcador no mapa para ser o endereço de início da viagem.
Depois, queremos exibir o marcador de destino assim que este endereço for adicionado.
No workflow editor do Bubble, crie um novo evento quando o valor de um item é alterado.
A entrada para a qual vamos configurar isso é o nosso Input de destino.
Uma vez que o usuário tiver adicionado os dois endereços, podemos produzir uma previsão de viagem, detalhando a distância total e o preço da viagem.
Abaixo de nosso mapa, adicionaremos um campo de texto dinâmico, exibindo a distância entre as duas entradas de endereço.
Gerando preços
Assim que a distância entre os dois locais foi classificada, podemos criar um algoritmo para determinar o preço da viagem.
Usando um Input, podemos adicionar nossas próprias condicionais para definir variações de preço. As condicionais tornam possível exibir elementos únicos quando os requisitos são atendidos em todo o seu aplicativo.
Nossas condições para este elemento identificarão a distância entre dois endereços (medidos em milhas de acordo com nosso mapa) e então, acionarão um determinado preço se ele se encaixar entre um limite único.
Por exemplo: se a distância do endereço de destino e do endereço de partida for > 1 E a distância do endereço de destino e do endereço de partida for < 5, nossa condição exibirá o texto $ 15.
Você pode continuar adicionando condições para atender aos diferentes limites de preço que deseja cobrar.
Nota: Ao atualizar o estilo de um Input, é possível remover o fundo e a borda padrão do elemento.
Finalmente, também precisaremos desativar esse Input, garantindo que os usuários não possam editar o preço das viagens.
Gerando uma nova viagem e processando pagamentos
Assim que o usuário estiver pronto para reservar uma viagem, criaremos um novo workflow que é acionado quando o botão de reservar viagem é clicado.
Dentro deste workflow, queremos criar um novo item no banco de dados.
O item que queremos criar é uma nova viagem. Em seguida, você combinará os elementos relevantes em sua página com os campos de dados do tipo de viagem em seu banco de dados.
Depois de gerar uma nova viagem em nosso banco de dados, também precisaremos cobrar do usuário. Usando o Bubble, é possível aproveitar o poder de vários plug-ins para aceitar facilmente pagamentos e processar pedidos.
Neste guia, usaremos o plug-in Stripe.js para processar pagamentos com cartão de crédito por meio do Stripe.
Nota: Após integrar este plug-in, você precisará primeiro configurar suas chaves de API nas configurações do plug-in.
Para utilizar o plug-in Stripe, você também precisará adicionar um elemento de token Stripe ao lado do botão de reservar viagem.
Este elemento não ficará visível para seus usuários finais, mas é essencial para gerar uma nova transação com o Stripe.
Ao processar um pagamento, adicionaremos uma etapa adicional em nosso workflow que gera uma nova viagem.
Selecione o evento ‘converter cartão em Stripetoken A’. Nesse evento, você precisará configurar os detalhes de pagamento dos usuários atuais para corresponder à estrutura de pagamento do Stripes.
Uma vez 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).
Como criar um portal para motoristas em nosso aplicativo de transporte
Após uma nova viagem ser criada, precisaremos exibir essas informações aos motoristas na página do portal do motorista.
Nesta página, adicionaremos um Grupo Repetidor exibindo uma lista de todas as viagens disponíveis criadas pelos usuários.
Grupos Repetidores são elementos que se integram ao banco de dados, exibindo e atualizando conteúdo dinâmico.
Ao usar um grupo repetidor, precisamos configurar seu tipo e fonte de dados. Então atualizamos o tipo de dados para exibir viagens e a fonte de dados para pesquisar todas as viagens dentro do banco de dados.
Adicionalmente, também colocaremos duas restrições, filtrando apenas as viagens que têm o status em andamento e completo definido como ‘não’. Isso garantirá que apenas as viagens atualmente ativas serão exibidas nesta grade.
Agora estamos prontos 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 nos dados existentes.
Quando um motorista está pronto para aceitar uma viagem, ele pode clicar no botão aceitar, disparando um novo workflow para atualizar o status dessa viagem.
Nesse workflow, faremos alterações em um item do banco de dados.
O item que queremos mudar é a viagem da célula atual, atualizando seu status em andamento para ‘sim’ e, em seguida, adicionando o usuário atual como o motorista designado.
Nota: Depois de alterar o status em andamento, essa viagem será removida do grupo repetidor.
Em seguida, queremos enviar o motorista para a nossa página de resumo da viagem, exibindo uma visão geral dessa viagem específica.
Comece adicionando outra etapa ao seu workflow atual, optando por ir para outra página.
Ao enviar o usuário para a página de resumo da viagem, também precisaremos enviar com ele os dados da viagem da célula atual.
Marcando uma viagem como completa
Na página de resumo da viagem, você vai querer exibir as informações da viagem que o motorista acabou de aceitar.
Para começar, configure o tipo da página como viagem.
Mais uma vez, você pode mapear o conteúdo da página usando elementos dinâmicos, exibindo as informações de viagens atuais.
Após o término da viagem, o motorista clica no botão concluir, atualizando o status dessa viagem específica.
Ao criar outro workflow, vamos optar por fazer alterações na viagem das páginas atuais, desta vez atualizando o status completo para ‘sim’.
Criando um resumo das viagens do usuário e avaliando uma viagem
Após a conclusão da viagem, queremos adicionar um resumo da viagem à conta do usuário e dar a ele a opção de avaliar sua experiência geral.
Em nossa página da conta do usuário, adicionaremos outro grupo repetidor. Este grupo repetidor será novamente configurado como um tipo de dados viagem, mas vamos atualizar a fonte de dados para exibir apenas as viagens em que o passageiro era o usuário atual e o status completo é ‘sim’.
Adicionando essas configurações adicionais, garantirá que o usuário veja apenas as viagens que são relevantes para sua conta.
Se o usuário quiser avaliar seu motorista, pode clicar no botão avaliar viagem, acionando outro evento de navegação.
Neste workflow, enviaremos o usuário para nossa página de avaliação, passando com ele os dados da viagem da célula atual.
Criando uma página dedicada à avaliação em nosso app para motoristas, um usuário pode deixar um comentário sobre uma viagem anterior que fez.
Esta página deverá ser configurada como um tipo viagem.
Nessa página, usaremos um elemento deslizante (Slider Input) e um Multiline Input (campo de entrada de várias linhas), permitindo que os usuários adicionem o conteúdo relevante para sua classificação.
Quando o botão enviar avaliação é clicado, criaremos um novo workflow que cria um novo item no banco de dados. O item que queremos criar é uma nova avaliação.
Mais uma vez, você mapeará os elementos na página com os campos de dados necessários em cada avaliação.
Comentários
Postar um comentário