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.

Criar app de viagens Tripadvisor - aplicativo sem codar

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
Criar app de viagens Tripadvisor - interface de usuário
Amostra de UI de Landing Page para um aplicativo tipo Tripadvisor no Bubble.

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.
Criar app de viagens Tripadvisor - dados do usuário sem programar

Tipo de dado: Cidade

Campos:

  • Nome
  • Estado
  • País
  • Descrição
Criar app de viagens Tripadvisor - tipos de dados e campos

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
Criar app de viagens Tripadvisor - tipos de dados e campos

Tipo de dado: Avaliação

Campos:

  • Conteúdo
  • Classificação
  • Coisas-para-fazer – Coisas para fazer
  • Título
Criar app de viagens Tripadvisor - tipos de dados e campos

Tipo de dado: Foto

Campos:

  • Cidade – Cidade
  • Imagem
Photo data type built in Bubble’s no-code platform

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.

Configuring dynamic city inputs in Bubble’s no-code platform

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.

Building a workflow using Bubble’s no-code tool

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

Creating a workflow using Bubble’s visual programming tool

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

Creating an activity in a no-code Tripadvisor clone

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.

Criar app de viagens sem codar - configurações de página

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.

Criar app de viagens tipo Tripadvisor - alterando o valor de input sem codar

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.

Criar app de viagens tipo Tripadvisor - sem programar

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.

Configuring a no-code Tripadvisor page type to be a city

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.

Adding dynamic content to a Tripadvisor page using no-code tools

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.

Building the structure of a repeating group to display Tripadvisor photos

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

Bubble no-code Tripadvisor tutorial building a navigation menu

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

Sending data between pages with Bubble’s no-code tool

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

Bubble no-code Tripadvisor clone page configurations

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.

Displaying a list of activities in Bubble’s no-code Tripadvisor clone

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

Displaying dynamic images from Tripadvisors activities

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.

Creating a workflow to power a no-code Tripadvisor platform

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

Creating a new Tripadvisor activity in Bubble

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.

Configuring a Tripadvisor page type using Bubble

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

Adding dynamic content to a page without code

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.

Integration a Stripe token into a Tripadvisor no-code clone

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.

Using dropdown menus to improve the UX of a no-code Tripadvisor app

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.

Displaying dynamic activity prices in Tripadvisors no-code app

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.

Building a new workflow in Bubble’s no-code programming tool

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.

Configuring a Stripe payment in Bubble’s visual programming platform

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

Using stripe to process payments in a no-code clone of Tripadvisor

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.

Updating a users Tripadvisor account using no-code tools

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

Confirming a Tripadvisor booking in Bubble’s platform

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.

Exibindo avaliações - app de viagens tipo tripadvisor

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.

Formatando avaliações com Bubble - app de viagens tipo tripadvisor

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.

Criando avaliações app de viagens sem programar

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.

Upload de fotos - app de viagens tipo tripadvisor

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

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/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email