Aprenda como criar seu próprio site para reservas de viagens no code, usando o editor visual Web do Bubble.
Planejar férias pode ser uma tarefa árdua. Com uma infinidade de opções entre voos, hospedagem e passeios, é difícil saber por onde começar.
A criação de software, por outro lado, não deveria ser um processo árduo. No entanto, muitas vezes, criadores sem experiência em desenvolvimento web precisam terceirizar para equipes caras de desenvolvimento e esperar meses antes de enviar algo tangível.
Com o surgimento de ferramentas no code como o Bubble, criadores de todas as origens podem começar seus próprios softwares, tudo sem escrever código. A plataforma poderosa do Bubble tornou mais fácil do que nunca começar sua jornada de desenvolvimento. Usamos o Bubble para criar sites, diretórios e até redes sociais.
Ao longo desse post, vamos percorrer o processo de usar o Bubble para criar seu próprio site de reservas de viagens no code, semelhante ao Expedia ou Skyscanner.
Compartilharemos um guia para criar a lógica subjacente do seu MVP Expedia no code em questão de minutos.
Para o bem do nosso MVP, vamos nos concentrar em criar um site específico para reservas de voos. Se desejar adicionar suporte para hotéis, aluguel de carros e passeios, você pode replicar a estrutura principal para atender às suas necessidades específicas.
As etapas para criar um site de reservas de voos no code incluem:
Índice
Iniciando a criação do seu Expedia no code
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Agora poderemos começar a criar nosso site de reservas tipo Expedia juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Também será benéfico se você entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso artigo Como criar um site tipo Quora.
Podemos começar criando um protótipo para o design do 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 site. Ao criar sua própria plataforma de reservas de viagens, algumas das páginas principais que você deseja incluir são:
- Um portal de administração – usado como back-end para adicionar voos ao seu banco de dados
- Página inicial – Inclui vários campos de pesquisa e uma função para exibir os resultados da pesquisa
- Página de voos – uma página dedicada a exibir todos os detalhes de um voo selecionado. Esta página também incluirá sua função de checkout.
Um recurso importante no Bubble é a capacidade de enviar dados entre as páginas. Permitindo criar uma versão genérica da página, e depois exibindo dinamicamente o conteúdo relevante do banco de dados quando necessário.
No caso de seu site tipo Expedia, você só precisará fazer uma página para hospedar seus voos individuais. Podemos então criar a lógica necessária para exibir apenas os detalhes relevantes do voo em cada página.
Configurando seu banco de dados
Depois de mapear a exibição do seu site , você pode se concentrar em criar os campos de dados necessários para alimentar seu site de reservas de voo. Contaremos com esses campos para conectar os workflows por trás da plataforma.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao criar o MVP para uma plataforma de reservas de voo, precisaremos dos seguintes tipos de dados e campos:
Tipo de dados: Voos
Campos:
- Local de partida
- Local de destino
- Companhia aérea
- Número do voo
- Custo
- Data de partida
- Data de chegada
- Duração do voo
- Distância do voo
Tipo de dados: Usuário
Campos:
- Nome
- Endereço
Workflows para criar um site de reservas de viagens
Agora que você estruturou o design e o banco de dados de sua aplicação, é hora de começar a juntar tudo – tornando seu site 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. )
Adicionando voos ao Expedia Sem Codar
Ao adicionar novos voos à sua plataforma, é possível colocar manualmente novas entradas à sua base de dados. Se você estiver gerenciando a plataforma entre vários administradores, recomendamos a criação de um portal dedicado para facilitar esse processo.
Na página de criar voos , você pode começar a criar esse processo usando uma combinação de inputs, incluindo; campos de texto livre, uploaders de imagens, seleções suspensas ou campos de seleção múltipla.
Depois que um administrador adiciona os detalhes relevantes em cada input, ele clica no botão criar para acionar uma nova entrada em seu banco de dados. Este clique no botão será a ação necessária para criar seu workflow.
Usando o editor de workflow, você pode optar por criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo evento.
Em seguida, você precisará começar a adicionar dados aos campos relevantes em seu banco de dados. Mapeie cada input que deseja criar em relação ao campo de dados correspondente.
Criando uma função de pesquisa
Depois de começar a adicionar voos à sua plataforma, é hora de começar a criar o resto da plataforma com a qual seus usuários irão interagir.
Um dos principais recursos da Expedia ou de qualquer site de reservas de viagens é a capacidade dos usuários de pesquisar voos com base em seus requisitos específicos. Isso pode incluir seu local de partida, destino, datas preferenciais de viagem e muito mais.
Na página inicial, usaremos um agregado de diferentes elementos para oferecer suporte a essas funções de pesquisa.
No caso do nosso MVP, começaremos usando os elementos de caixa de pesquisa e o seletor de data / hora para mapear a IU (interface do usuário / user interface) da página.
Então você precisará configurar seus elementos de pesquisa para exibir apenas os itens de seu banco de dados que são relevantes para cada campo. Reserve um tempo para configurar a fonte de dados para os voos em seu banco de dados e, em seguida, atualize o campo de pesquisa específico para incluir o local de partida ou o local de destino.
Ao estruturar esses campos de pesquisa, o elemento agora indexará todas as entradas existentes em seu banco de dados e até mesmo oferecerá sugestões de pesquisa à medida que forem digitadas.
Exibir resultados de pesquisa dinâmicos
Depois que um usuário inserir seus parâmetros de voo desejados, precisaremos exibir uma lista de todos os voos relevantes em nosso banco de dados.
Usando o Bubble, há uma infinidade de maneiras de fazer isso – incluindo o uso de elementos pop-up ou mesmo redirecionando os usuários para uma nova página e enviando dados relevantes.
Para o nosso MVP, iremos apenas adicionar um elemento de grupo repetidor abaixo da barra de pesquisa.
Grupos repetidores se integram ao seu banco de dados para exibir 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. Estaremos classificando nosso grupo repetidor da fonte de dados do voo.
Ao adicionar outras restrições à nossa fonte de dados, podemos filtrar o conteúdo dos grupos repetidores para buscar apenas os resultados relevantes com base em cada um dos parâmetros de pesquisa dos seus usuários.
Você também pode adicionar restrições extras aos seus campos de pesquisa e data.
Sob as restrições atuais, nosso grupo repetidor será atualizado dinamicamente cada vez que um campo de elemento for alterado.
Configurações adicionais no grupo repetidor
Se você quiser que a grade busque os resultados relevantes apenas quando um usuário terminar de preencher todos os campos de pesquisa, podemos selecionar para ocultar este elemento no carregamento da página. Você pode fazer isso desmarcando a configuração do elemento de exibição ao carregar página.
Como esse elemento ficará oculto por padrão, ele só se tornará visível depois de criarmos um workflow para facilitar essa função.
Como você deve ter adivinhado, este workflow será baseado no botão ‘pesquisar’ que adicionamos abaixo de nossos campos de pesquisa.
Comece selecionando o botão de pesquisa e, em seguida, selecionando para criar / editar o workflow.
No editor de workflow, você escolherá as ações do elemento, e então mostrar um elemento quando o botão de pesquisa for clicado.
O elemento que precisamos mostrar é, obviamente, seu grupo repetidor.
Agora, seu grupo repetidor só exibirá os resultados relevantes depois que um usuário enviar sua consulta completa.
A última coisa que você precisa fazer é estruturar o conteúdo dinâmico que será exibido em cada grade. Simplesmente mapeie a coluna superior 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 navegações de página
Dentro de um grupo repetidor, também é possível criar eventos com base em cada linha individual.
Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Como nosso grupo repetidor exibe apenas uma visualização da linha superior dos detalhes de cada voo, precisaremos exibir a lista completa de informações em uma página separada assim que um usuário clicar.
Esse conteúdo adicional precisará ser hospedado em sua página de voo.
Para realizar esse evento, comece criando um workflow que redirecione um usuário para a página de voo quando um dos elementos da célula do grupo repetidor for clicado.
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 de voo.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual voo específico exibir. Os dados que você precisa enviar são os do voo da célula atual.
Exibir conteúdo dinâmico em uma página de voo
Enviar dados entre as páginas simplifica a exibição de apenas o conteúdo relevante necessário.
Ao enviar dados para uma página, é importante configurar o tipo da página de destino para corresponder à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a página de voo como uma propriedade de voo.
Ao classificar o tipo de conteúdo de uma página, o Bubble pode combinar facilmente os dados das fontes enviadas.
Agora você pode começar a adicionar conteúdo dinâmico em sua página para exibir informações de um voo específico.
Comprando voos
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 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 plug-in.
Ao aceitar pagamentos, você precisará criar uma interface de checkout, permitindo que os usuários adicionem 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.
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’. Nesse evento, você precisará configurar os inputs do cartão de crédito 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.
Quando um token Stripe para uma conta bancária for criado, você usará o evento ‘Stripe.js – charge – create’ para verificar esse token, bem como o valor final que será pago (incluindo a moeda).
Recursos adicionais para cirar um site de reservas
Agora você está familiarizado com a criação de campos de dados personalizados e a exibição de conteúdo dinâmico. Então pode começar a criar novas experiências em seu site para reservas de voo. Alguns recursos extras que você pode adicionar são:
- Adicionar comentários de usuários ou classificações em voos
- Crie um recurso para os usuários marcarem voos em suas contas
- Oferecer recomendações dinâmicas para venda cruzada de produtos em sua página de voos
Veja também outros tutoriais usando o Bubble:
- Como criar um app de viagens (como o Tripadvisor) sem programar
- Como criar um aplicativo de transporte como Uber sem programar
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-expedia-clone-no-code/
