Como criar um app de viagens (como o Tripadvisor) sem programar

Aprenda como criar um aplicativo de viagens como o Tripadvisor gratuito e sem programar, usando o editor visual web do Bubble.

Se você está planejando a viagem dos sonhos, o Tripadvisor é o aplicativo de viagem completo para comparar e reservar experiências de viagem. No entanto, se você está buscando uma forma de criar um aplicativo tipo Tripadvisor, então o Bubble é a ferramenta completa para agilizar o processo de desenvolvimento – tudo gratuito e sem precisar programar nada.

A poderosa ferramenta de programação visual do Bubble capacita criadores de todas as origens para criar softwares. Se você está criando uma loja virtual, uma rede social, ou um aplicativo mobile, nossos clientes usam nosso conjunto de ferramentas para criar ricas experiências de aplicativos.

Ao longo deste artigo, vamos percorrer o processo de criação do seu próprio aplicativo de viagens. Ao criar nosso MVP, vamos guiá-lo através dos workflows requeridos para mostrar cidades e uma lista de suas atividades em destaque.

Como o Tripadvisor hospeda uma miríade de recursos adicionais – como reservar hotéis, voos, e experiências de restaurante – você pode facilmente replicar os mesmos workflows para criar uma versão completa do aplicativo.

Os passos para criar um app de viagens tipo Tripadvisor sem programar incluem:

Fazer cadastro no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. E então pode acompanhar enquanto criamos nosso aplicativo tipo Tripadvisor juntos.

Cadastre-se no Bubble e comece a criar seu app de viagens.

Quando estiver iniciando seu projeto, você pode começar fazendo o protótipo do design de seu aplicativo, ou criar os campos necessários dentro do seu banco de dados.

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

• Página de upload – Um portal onde você pode adicionar novas atividades/coisas para fazer no aplicativo
• Página inicial – Permitindo aos usuários procurar por cidades
• Página da cidade – Uma página para exibir uma visão geral de cada cidade no seu aplicativo
• Página de coisas para fazer – Um resumo de todas as atividades disponíveis em cada cidade
• Página de atividade individual – Uma página dedicada à hospedar cada atividade

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 mostre dinamicamente o conteúdo relevante do seu banco de dados quando requisitado.

No caso do seu aplicativo tipo Tripadvisor, você só precisará criar uma página para hospedar cada cidade individualmente. 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 um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para aumentar a velocidade do seu aplicativo.

Por exemplo, em vez de armazenar fotos e comentários gerados pelo usuário em cada cidade, vamos criá-los como tipos de dados separados, mas vinculá-los de volta a uma cidade única.

Separando fotos e comentários em tipos de dados separados, isso nos permite carregar apenas o conteúdo necessário quando for preciso, reduzindo a quantidade de dados que o editor do Bubble precisará renderizar.

Ao criar um app de viagens tipo Tripadvisor (gratuito e sem programar no Bubble!), precisaremos dos seguintes tipos de dados e campos:

Tipo de dado: Usuário

Campos:

• Nome
• Foto
• Atividades reservadas – Lista de coisas para fazer. 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.

Tipo de dado: Cidade

Campos:

• Nome
• Estado
• País
• Descrição

Tipo de dado: Coisas para fazer

Campos:

• Título
• Foto
• Descrição
• Preço
• Cidade – Cidade
• Categoria
• Usuários reservados – Lista de usuários
• Endereço

Tipo de dado: Avaliação

Campos:

• Conteúdo
• Classificação
• Coisas-para-fazer – Coisas para fazer
• Título

Tipo de dado: Foto

Campos:

• Cidade – Cidade
• Imagem

Workflows – ações lógicas necessárias para criar um app de viagens

Com o design e o banco de dados estruturados, é hora de começar a juntar tudo – tornando seu aplicativo 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.)

Adicionando novas coisas para fazer

O primeiro recurso que criaremos é um portal back-end para adicionar coisas para se fazer / atividades no nosso aplicativo. Embora esses itens possam ser adicionados manualmente dentro do seu banco de dados, criar uma interface front-end vai permitir que qualquer administrador adicione conteúdo novo facilmente.

Comece definindo o tipo de escolha como cidade, e então pesquise por todas as cidades dentro do seu banco de dados. Finalmente, selecione a opção de legenda para exibir o nome das cidades.

Uma vez que um administrador adicione os detalhes relevantes em cada input, eles clicarão no botão criar para acionar uma nova entrada no seu banco de dados. Esse clique de botão será a ação necessária para criar seu workflow.

Usando o workflow editor, você pode selecionar para criar um item no banco de dados. Nesse caso, iremos criar uma nova coisa para fazer (Thing-to-do).

Você então precisará começar a combinar os elementos on-page com os campos correspondentes no seu banco de dados.

Criar uma função de pesquisa

Para permitir aos usuários pesquisar e clicar através de uma cidade específica, você pode utilizar um elemento de busca na sua home page que irá indexar todas as cidades atuais que você adicionou no seu banco de dados.

Configurando o campo de busca para uma lista dinâmica, você pode novamente exibir uma lista de todas as cidade disponíveis que criou. Uma vez configurada, essa caixa de pesquisa vai indexar todas as entradas disponíveis e até mesmo oferecer sugestões de pesquisa enquanto são digitadas.

Para enviar o usuário à página da cidade relevante, navegue para o seu workflow editor, e então crie um novo item que é acionado quando o valor de um input é alterado.

Você então cria um evento de navegação, definindo a página de destino como a sua página da cidade, e enviando a fonte de dados do valor atual da caixa de pesquisa.

Exibir conteúdo dinâmico na página da cidade

Quando um usuário é direcionado para uma página da cidade específica, você pode facilmente puxar esse dado de evento e exibir o conteúdo relevante para cada local.

Para criar essa função, primeiro precisa se certificar que o tipo da página de destino combina com a propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a página cidade como uma propriedade cidade.

Classificando o tipo de conteúdo em uma página, o Bubble pode facilmente puxar e enviar dados relevantes de fontes existentes.

Agora você pode começar a adicionar conteúdo dinâmico nos campos que exibem informações de uma cidade individual.

Nessa página, também iremos adicionar um elemento grupo repetidor para mostrar uma variedade de fotos de uma cidade.

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á linkar o elemento a um tipo de dado no seu banco de dados. Nesse caso, você vai classificar o tipo de conteúdo como foto.

Você também vai precisar configurar a fonte de dados para identificar qual conteúdo será exibido na grade. Para esse grupo repetidor, vamos procurar no nosso banco de dados por todas as fotos onde as fotos listadas da cidade são as mesma da cidade da página atual.

Descobrindo coisas para fazer

Depois que o usuário encontrou uma cidade de interesse, podemos começar a criar a experiência front-end para listar todas as atividades naquele local.

Na nossa página da cidade, começaremos criando um evento de navegação para o botão coisas para fazer (Things To Do).

Dentro desse workflow, enviaremos dados da página da cidade atual.

Depois, na nossa página de coisa para fazer, vamos configurar o tipo da página também como cidade.

Agora, começaremos a adicionar grupos repetidores individuais para exibir todas as atividades disponíveis nesta cidade.

O tipo de conteúdo desses grupos repetidores será definido como coisas para fazer, e a fonte de dados irá buscar por todas as coisas para fazer onde a cidade equivale a página da cidade atual.

Finalmente, também vamos adicionar uma restrição adicional a cada grupo repetidor – apenas exibindo o seguimento de atividades baseado em suas categorias únicas.

Mais uma vez, vamos mapear o conteúdo que gostaríamos de exibir dentro de cada grade do nosso grupo repetidor.

Dentro de grupos repetidores, também é possível criar eventos baseados nos elementos em cada grade.

Quando a imagem de uma atividade é clicada, criaremos um novo workflow, enviando o usuário a uma página dedicada a essa atividade específica.

Nesse workflow, vamos direcionar os usuários para nossa página de atividades, enviando com ele as células atuais coisas para fazer.

Hospedando atividades individuais

Na nossa página de atividades, vamos novamente precisar configurar o tipo da página, dessa vez como propriedade coisas para fazer.

Depois, você precisará mapear o conteúdo dinâmico exibido nessa página.

Processando pagamentos com o Stripe

Quando um usuário decide reservar uma atividade, precisamos processar o pagamento em nosso aplicativo.

Usando o Bubble, é possível aproveitar o poder de vários plugins para facilmente aceitar 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: Depois de integrar este plug-in, você precisará primeiro configurar suas chaves de API nas configurações do plugin.

Você também precisará incluir um elemento de token Stripe ao lado do formulário de pagamento. Este elemento não ficará visível para seus usuários finais, mas é essencial para alimentar uma nova transação no Stripe.

Em nossa experiência de pagamento, também precisaremos incluir um elemento selecionador de data / hora. E também um menu suspenso para selecionar quantas reservas um usuário gostaria de realizar.

Finalmente, precisamos criar uma condição para o preço total de nossa atividade, multiplicando-a pelo número total de viajantes para os quais um usuário está reservando.

As condições são uma forma eficaz de os elementos se comportarem de uma maneira específica quando as regras pré-configuradas são atendidas.

Nesse caso, nossa condição vai identificar quando o valor dos menus suspensos não está vazio. Quando essa condição for atendida, atualizaremos o texto dinâmico desse elemento.

O texto precisará calcular o custo atual do item coisas para fazer, multiplicado pelo valor suspenso dos viajantes.

Isso irá atualizar o preço em tempo real de acordo com o que o usuário selecionar.

Processando o pagamento do usuário através de um workflow

Depois de fazer a condição acima, podemos criar o workflow restante para processar o pagamento do usuário. Este workflow será acionado quando o botão reservar agora for clicado.

Neste workflow, vamos começar selecionando o evento ‘converter cartão em Stripetoken”. Dentro deste evento, você precisará configurar seus campos de input para combinar com a estrutura de pagamento do Stripe.

Depois que o cartão for convertido em token do Stripe, será necessário criar um workflow adicional que processe esse token automaticamente de uma conta bancária do usuário.

Usando o evento ‘Stripe.js – change – create’, você vai verificar o token do Stripe, assim como a quantia final a ser paga (incluindo a moeda).

Após o pagamento ser processado, precisamos adicionar novos passos a esse workflow, colocando a reserva na conta do usuário.

Comece criando uma ação que altera um item no banco de dados.

O item que queremos alterar é a atividades reservadas atuais do usuário, adicionando a esse item as coisas para fazer da página atuail.

Por fim, criaremos uma última ação neste workflow, adicionando o usuário atual à lista de usuários reservados das páginas atuais.

Criar e exibir no app avaliações de viagens geradas pelo usuário

O recurso final que criaremos em nosso MVP é uma função para oferecer suporte a avaliações geradas pelo usuário para cada atividade.

Em nossa página de atividades, precisaremos adicionar um grupo repetidor adicional. Isso será usado para exibir uma lista de todas as avaliações relevantes.

O tipo de dados será definido como avaliações, e a fonte de dados pesquisará todas as avaliações em que a coisa a fazer corresponda à coisa a fazer nas páginas atuais.

Após mapear o conteúdo dinâmico em cada linha do grupo repetidor, vamos adicionar uma matriz de campos de input abaixo, permitindo aos usuários criar e enviar novas avaliações.

O workflow para criar e exibir avaliações geradas pelo usuário é similar ao processo de criar uma atividade. Quando o botão publicar é clicado, vamos criar um novo item no banco de dados.

É claro, o item que queremos criar é uma avaliação.

Ao criar uma avaliação, também separamos o conteúdo da foto em um evento adicional. Esta foto apresentada não será exibida diretamente em um comentário, ao invés disso será usada para preencher as fotos na página geral da cidade.

Cada vez que esse workflow executar, o conteúdo mostrado no grupo repetidor vai se atualizado automaticamente em tempo real.

Exemplos para criar novas funcionalidades em um app de viagens

Agora você já sabe criar campos de dados personalizados e exibir conteúdo dinâmico, certo? Então pode começar a ficar criativo com as experiências do seu aplicativo. Existem muitos recursos adicionais que você pode criar em seu app de viagens tipo Tripadvisor, incluindo:

• Colocar conteúdo adicional para hotéis, restaurantes, etc.
• Permitir aos usuários reservar atividades
• Criar perfis de usuários para exibir reservas, avaliações, e atividades salvas

• Como criar um Marketplace do Zero tipo a Amazon (sem programar)
• Bubble.io: API Correios – Cálculo gratuito e automático de preço e prazo de entrega
• NO-CODE: Criei um aplicativo que publica no WordPress (sem código)

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 desse tutorial em inglês: https://bubble.io/blog/build-tripadvisor-clone-no-code/