Como criar um site de aluguel tipo AirBnB grátis (sem programar)

Aprenda como criar um site do mercado de aluguel de imóveis, usando o editor visual web do Bubble.

Se você tem interesse em criar um site no mercado de aluguel de imóveis como o AirBnB, encontrar uma ‘white-label’ AirBnB que você possa personalizar, ou criar uma loja virtual para habitações de curto prazo – mas não sabe como programar – então temos um solução para você.

Usando o Bubble podemos facilmente criar e personalizar qualquer aplicativo web para suas necessidades e visões exatas. Tudo sem contratar um engenheiro ou ter qualquer experiência em programação. Neste guia, vamos percorrer a configuração e estrutura básica para criar um site de aluguel sem programar com o Bubble.

Neste guia vamos criar uma plataforma “AirBnBSemCodar”, permitindo aos usuários encontrar lugares para ficar ou alugar quartos disponíveis.

As etapas para criar seu próprio site de aluguel de imóveis tipo AirBnB sem código incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito.

💻

Como as pessoas começam a criar seus aplicativos?

A resposta curta é que isso se resume à preferência pessoal. Alguns Bubblers gostam de começar projetando suas páginas de forma que possam visualizar como são as interações do usuário, e depois conectam suas páginas ao banco de dados e aos workflows. Outros Bubblers gostam de começar definindo o banco de dados de seus aplicativos, o que influencia a forma como eles pensam sobre o design da página e os workflows. Não existe resposta certa, então experimente diferentes abordagens para ver qual se encaixa melhor com seu estilo de pensamento.

Projetando seu AirBnB no code

Começaremos pensando nas páginas principais que um aplicativo tipo AirBnB sem código precisa para fornecer aos usuários os recursos que eles esperam de um app de mercado de mercado de aluguel de imóveis em curto prazo. Essas páginas funcionarão como a interface de usuário principal em que seus usuários visualizarão os quartos para alugar ou fazer reservas, por isso é importante fazer tudo certo.

Uma das vantagens do Bubble é a capacidade de enviar dados para uma página. Isso significa que você só precisa criar uma versão genérica de uma página com um design simples. O Bubble irá preencher automaticamente os elementos da página com os campos de dados armazenados na página. Isso significa que você não precisará de milhares de páginas diferentes para cada sala no AirBnB sem código!

Para criar um MVP de mercado de aluguel por temporada, criaremos as seguintes páginas:

• Uma página de login – permitindo que os usuários cadastrem ou façam login em seu aplicativo
• Backend de propriedade – um portal onde os usuários podem criar as listagens de propriedades
• Página inicial – exibindo uma lista de todos os quartos listado nada plataforma
• Página de quartos individuais – fornecendo todas as informações sobre um quarto, incluindo análises de usuários
• Checkout – permitindo que os usuários paguem por reservas de quartos

Configurando o banco de dados

Como o banco de dados Bubble é diferente dos bancos de dados normais?

O Bubble abstraiu muitas das dificuldades técnicas em interagir com bancos de dados, mas muitos dos mesmos conceitos básicos estão lá. Em bancos de dados você tem tabelas; no Bubble, você tem uma tabela para cada “tipo de dados”. Os tipos de dados do Bubble possuem campos, representados como colunas. Você define que tipo de dados um campo possui, como texto, número ou sim / não (binário).

Uma diferença são os joins de banco de dados; o Bubble simplifica muito isso, permitindo que você defina um tipo de campo como um tipo de dados que você tem no aplicativo. Se isso não faz sentido para você agora, não se preocupe – fica mais claro depois que você vê um exemplo.

Alguns usuários preferem começar com a configuração dos tipos de dados, que é essencialmente configurar o banco de dados. Cada aplicativo Bubble vem com um banco de dados integrado que você pode configurar da maneira que precisar, o que significa que não há problemas de configuração para você.

Queremos um tipo de dados para cada tipo de ‘item’ que queremos no aplicativo. Pense em um ‘item’ exatamente como isso – algo que você mostrará, armazenará dados ou utilizará no aplicativo.

Cada um desses tipos de dados deve ter campos que contenham as propriedades daquele item. À medida que continuamos criando as páginas, os elementos na página se basearão em diferentes campos de diferentes tipos de dados.

Tipos de dados e campos para um AirBnB no code

Tipo de dados: Usuário

Campos:

• Email (incluído por padrão);
• Nome
• Sobrenome
• Imagem do perfil
• Número de telefone
• Lista das reservas feitas. Nota: tipos de dados também são definidos, então nós (e o Bubble) sabemos o tipo de dados de cada campo. Por exemplo, um primeiro nome é um trecho de texto, então, ‘texto’‘é o tipo de dados. ‘Reservas Feitas’ é uma lista de Reservas.

Tipo de dados: Reserva – a reserva que o usuário fará quando quiser alugar um quarto.

Campos:

• Data de Saída (data em que termina a reserva do hóspede)
• Data da Estadia (data da mudança)
• Preço por Noite da estadia
• Quarto para o qual a reserva é feita. (Nota: o tipo deste campo é ‘Quarto’, para que possamos vinculá-lo corretamente ao Quarto correto)

Tipo de dados: Quarto – o quarto que está em oferta para aluguel pelo público. Um usuário pode fazer uma ‘Reserva’ neste quarto se quiser ficar lá.

Campos:

• Título
• Descrição
• Fotos – lista de fotos
• Preço / noite
• Comentários – lista de comentários
• Usuários reservados – Lista de usuários

Estes são os campos mínimos necessários para fazer o aplicativo funcionar. Conforme criamos mais recursos, provavelmente adicionaremos mais tipos de dados e campos. Por exemplo, podemos adicionar um endereço para o quarto, ou um campo booleano “Rascunho” para indicar se o quarto está em ‘modo rascunho’ e ainda não foi publicado. Podemos então ocultar e mostrar diferentes elementos de design ou alterar a maneira como o aplicativo se comporta com base nesses bits de dados.

Recursos principais

Como você cria recursos no Bubble?

Junto com o design da página e o banco de dados integrado, um recurso central igualmente importante do Bubble são os “workflows“. Os workflows permitem definir partes da lógica na forma de “Quando X acontecer, execute as ações A, B, C, etc.”. Na realidade, as declarações “se X, então A, B, C” são os blocos de criação básicos para a maioria dos recursos em sites – elas conectam o que os usuários veem na página com o banco de dados nos bastidores.

Agora que temos algumas páginas em branco e o banco de dados configurado, daremos ao aplicativo web algumas funcionalidades reais, conectando tudo e executando algumas ações básicas. No Bubble, a principal maneira de fazer isso é com uma lista de “ações” agrupadas em um “workflow”.

Cada workflow é acionado quando um “evento” acontece (por exemplo, um usuário clica em um botão ou a página está totalmente carregada) 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”, ou “ocultar / mostrar um elemento ”etc.)

Para começar com o básico dos workflows, você precisará criar os seguintes recursos:

Cadastro do usuário

Para entender melhor como criar e editar contas de usuário, veja como cobrimos isso em mais detalhes no nosso artigo Como criar um site tipo Quora.

• Crie um elemento Botão com o texto “Faça seu cadastro”. Clique em “Iniciar / Editar workflow” e crie o workflow: Conta > “Cadastrar o usuário” para usar o cadastro de usuário integrado no Bubble.

• Você também pode usar Conta > “Cadastro / login com uma rede social” para login com o Google ou Facebook se desejar.

Adicionando uma propriedade ao AirBnB no code

Uma vez que um usuário tenha criado um perfil, faremos um recurso que permite a ele criar um quarto para alugar – tornando-se um host em nossa plataforma.

Em nossa página criar quarto, comece usando uma combinação de inputs, incluindo; campos de texto livre, uploaders de imagem ou inputs multilinhas.

Depois que um usuário tiver adicionado seus detalhes relevantes em cada input, ele clicará no botão listar quarto para alugar para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.

Usando o editor de workflow, você pode optar por criar um novo item dentro do banco de dados. Neste caso, estaremos criando uma novo quarto.

Você então 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.

Exibir quartos disponíveis para aluguel

Uma vez que os usuários começarem a enviar quartos para a plataforma, você estará pronto para exibir cada item em um feed na página inicial. Isso pode ser feito utilizando nosso elemento grupo repetidor.

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á primeiro vincular o elemento a um tipo de dados em seu banco de dados. Neste caso, você classificará o tipo como um quarto.

Você também precisará definir a fonte de dados como uma lista de todos os quartos cedidos do seu banco de dados.

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 deseja mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Envie 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. Como a página inicial do AirBnB exibe apenas uma visão geral de cada anúncio (incluindo seu nome, imagem e preço), você desejará exibir os detalhes completos dos quartos para cada item exclusivo em uma página separada.

Este conteúdo adicional precisará ser hospedado na página do quarto individual.

Para alimentar este evento, você precisará começar criando um workflow que redirecione o usuário para a página do seu imóvel quando a imagem do quarto é clicada.

Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. Daqui, selecione o tipo da página de destino como pagina do quarto.

Em seguida, você precisará enviar dados adicionais para esta página para que o editor do Bubble saiba qual lista de quartos específica exibir. Os dados que você precisa exibir são os do quarto da célula atual.

Exibir conteúdo dinâmico na página de um quarto

Quando um usuário é direcionado para a página de um quarto específico, você pode obter facilmente esses dados de evento de seu workflow para exibir o conteúdo relevante.

Antes de criarmos essa função, você primeiro precisa garantir que o tipo de página corresponda à propriedade de dados que você está enviando por meio do workflow. Nesse caso, você precisará definir a página do quarto como propriedade do quarto.

Agora você pode começar a adicionaraos elementos da página, exibindo as informações do quarto que foram enviadas em seu workflow.

Reservar um quarto

Um dos principais recursos do AirBnB é a capacidade dos usuários de reservar e pagar pelos quartos. Usando o Bubble, podemos aproveitar o poder de vários plugins para aceitar pagamentos e processar pedidos com facilidade.

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á configurar suas chaves de API nas configurações do plug-in.

Para os pagamentos, começaremos criando uma página adicional chamada checkout. O tipo de página também deve ser configurado como quarto.

Após criar esta página, voltaremos para a nossa página do quarto e criaremos um workflow quando o botão de reservar quarto é clicado.

Dentro deste workflow, criaremos um evento de navegação, redirecionando o usuário para a página de checkout. Também enviaremos os dados do quarto da página atual.

Na página de checkout, crie um formulário de pagamento usando os dados necessários para cobrar no cartão de crédito.

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.

Acionando um pagamento no Stripe

Quando o botão reservar quarto é clicado, criaremos um novo workflow que aciona um pagamento Stripe.

Você vai começar selecionando o evento ‘convert card into Stripetoken A‘. Dentro desse evento, configure os inputs para corresponderem à estrutura de pagamento do Stripe.

Com o cartão convertido em token Stripe, criaremos um workflow que processa automaticamente esse token da conta bancária do usuário.

Usando o evento ‘Stripe.js – charge – create’, verificamos o token Stripe, bem como o valor final a ser pago (incluindo a moeda).

Assim que processarmos o pagamento, criaremos uma última etapa no workflow: Adicionar o usuário atual à lista de quartos de estadias reservadas e vice-versa.

Comece criando uma etapa que faz alterações em um item no banco de dados.

O item que queremos mudar é o quarto da página atual, adicionando o usuário atual à sua lista de usuários com reserva.

Por fim, faremos alterações no usuário atual, adicionando o quarto da página atual à sua lista de quartos reservados.

Adicionando avaliações de usuários

Depois que um usuário aproveita sua estadia (graças ao seu site sem código 👏), ele pode deixar uma avaliação e compartilhar sua experiência com os usuários do site.

Começaremos a criar essa função adicionando primeiro um grupo repetidor em nossa página do quarto. Este grupo repetidor será usado para exibir uma lista de todas as avaliações.

Configure seu grupo repetidor como dados do tipo avaliações (Reviews), em seguida, atualize sua fonte de dados para ser apenas as avaliações do quarto da página atual.

Mais uma vez, mapearemos a célula superior do grupo repetidor para exibir o conteúdo relevante – incluindo o conteúdo da avaliação, a foto do perfil do criador da avaliação e a data em que a avaliação foi criada.

Agora que criamos um grupo repetidor para apoiar nossas avaliações de quarto, adicionaremos um input abaixo deste elemento, permitindo que os usuários enviem novas avaliações.

A seguir, criaremos um workflow quando o botão enviar for clicado. O objetivo deste workflow será criar um novo item no banco de dados.

Obviamente o que queremos criar é uma avaliação. Mais uma vez, você criará os elementos na página com os campos necessários em seu banco de dados.

Quando uma nova avaliação é criada, o grupo repetidor na página será atualizado automaticamente com o conteúdo mais recente.

Adicionando recursos ao AirBnB no code

Aqui estão algumas idéias divertidas de próximos recursos para adicionar mais funcionalidade ao seu aplicativo de aluguel de imóveis tipo AirBnB. Esses não são apenas recursos que seus usuários irão adorar, mas criá-los ajudará você a praticar a projeção de páginas, a estruturação do banco de dados e a criação de workflows no Bubble.

• Adicionando uma função para filtrar quartos na página inicial por sua cidade ou proximidades
• Adicionando input de intervalo de datas, para que a pessoa que listou o quarto possa adicionar as datas de disponibilidade do quarto.
• Um painel de administração onde o proprietário do site pode gerenciar suas reservas, visualizar informações sobre os hóspedes que ficam em seus quartos ou cancelar reservas.
• Adicionar avaliações com estrelas aos comentários
• Adicionar perfis de usuário – exibindo um resumo das reservas de quartos

Saiba mais sobre como criar sites e aplicativos sem programar com nossos Tutoriais em Vídeo:

• Criando um Aplicativo Real de Aluguel de Barcos com Bubble
• 🚀 Como Publicar seu Aplicativo Bubble (domínio gratuito e pago)
• Como criar um aplicativo integrado à Tabela FIPE
• Como criar Apps Nativos com Webview (Android e iOS)

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-airbnb-no-code/