Como criar uma loja virtual do mercado imobiliário no code

Aprenda como criar uma loja virtual para o mercado imobiliário tipo Zillow, usando o editor visual web do Bubble.

Você tem interesse em criar uma loja virtual como o Zillow? Se você achava o custo das comissões imobiliárias alto, ficará chocado ao procurar uma equipe de desenvolvimento para seu projeto.

Então por que não criar você mesmo?

O movimento no code permite que fabricantes de todas as origens comecem a criar software poderoso através de interfaces visuais.

O Bubble simplifica o processo de design e desenvolvimento de aplicativos, permitindo que qualquer pessoa se torne um desenvolvedor. Assim podemos usar o Bubble para criar todos os tipos de produtos, incluindo: fóruns, diretórios e até redes sociais.

Este post mostrará o processo de como usar o Bubble para criar uma loja virtual do mercado imobiliário sem codar. Inspirando-se em produtos existentes como Zillow, Trulia e Redfin.

Portanto, se você quer criar uma loja virtual completa ou apenas tem interesse em utilizar alguns dos principais recursos do Zillow, este guia mostrará como começar a criar a lógica subjacente para seu site.

Ao longo deste guia, destacaremos como criar os seguintes recursos-chave para o seu marketplace:

• Criação de um portal onde os usuários podem fazer upload de uma lista de propriedades na sua plataforma
• Uma função para pesquisar propriedades com base em bairros específicos e, em seguida, exibir uma lista de conteúdo relevante
• A capacidade de enviar dados entre páginas

As etapas para criar um mercado imobiliário online no code incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Isso vai te ajudar a ter um bom começo ao criar seu site do mercado imobiliário no code.

No início do seu projeto, você pode escolher começar criando um protótipo para o design do seu produto ou criando os campos necessários em seu banco de dados.

Nesse caso, começaremos usando nossa ferramenta de design visual para moldar a interface de usuário do nosso produto. Ao criar uma loja virtual como o Zillow, algumas das páginas principais que você vai desejar incluir serão:

• Página de envio de propriedades – onde os usuários podem listar suas propriedades
• Uma página inicial – usada para pesquisar bairros
• Página de resultados de bairros – usada para exibir uma lista de propriedades que pertencem a um bairro pesquisado
• Página da propriedade – Exibindo todos os detalhes de uma propriedade selecionada

Um recurso importante do Bubble é a capacidade de enviar dados para uma página. Isso significa que você só precisa criar uma versão genérica da página podendo exibir informações sobre usuários específicos ou itens do banco de dados.

Para criar sua loja virtual, você só precisará fazer uma página do bairro para mostrar uma lista de suas propriedades relevantes. Assim poderemos criar a lógica para exibir apenas as listagens necessárias em cada bairro específico (abordaremos isso com mais detalhes em breve).

Configurando o banco de dados da sua loja virtual

Agora que mapeamos a interface visual do produto, podemos nos concentrar na criação dos campos de dados necessários para alimentar o back-end do nosso aplicativo.

Criar um banco de dados no Bubble é um processo contínuo. Você pode começar listando seus tipos de dados de nível superior e, em seguida, adicionar os campos necessários nas categorias.

Para nosso MVP de mercado de propriedade no code, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Casas

Campos:

• Bairro
• Endereço
• Descrição
• Preço
• Quartos
• Banheiros
• Aluguel (sim / não)
• Comprar (sim / não)

Tipo de dados: Usuário

Campos:

• Listagens publicadas – Nota: Criando uma lista baseada em um tipo geral de dados permitirá que você integre perfeitamente todos os seus campos de dados relevantes, sem ter que criar valores de campo adicionais.

Criando workflows

Agora que você estruturou o design e o banco de dados para seu site, é hora de começar a juntar tudo, tornando seu mercado imobiliário no code 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. )

Enviando uma lista de propriedades para a loja virtual

Ao criar uma loja virtual do mercado de propriedades, uma das características mais importantes é a capacidade de começar a adicionar propriedades à sua plataforma.

Um recurso poderoso do Bubble é o nosso suporte para contas de usuário. Isso permite que outras pessoas criem conteúdo e atualizem os campos de dados. Este artigo se concentrará no processo de criação de novos conteúdos pelos usuários a partir de suas contas; no entanto, se você quiser ler mais sobre os workflows de criação e edição de contas de usuário, abordaremos isso com mais detalhes aqui.

Em sua página de envio de propriedade, você pode usar elementos de input para criar dados quando ocorre um evento. Neste caso, começaremos criando um evento quando o botão enviar for clicado.

Em seu workflow, você desejará criar um novo item no banco de dados.

Selecionando assim uma nova ‘casa’ em seu banco de dados e, em seguida, combine os elementos de input com seus campos de dados relevantes.

Procurando propriedades

Agora que temos conteúdo armazenado em seu banco de dados, podemos começar a criar na loja virtual as funções para pesquisar e exibi-las aos usuários.

Utilizando um elemento de pesquisa em sua página inicial, os usuários podem pesquisar propriedades por seus bairros.

Ao selecionar o campo de pesquisa como ‘casas – bairros’ (homes – neighborhoods), ele indexará todas as entradas, bem como irá fornecer sugestões de pesquisa à medida que são digitadas.

Para enviar um usuário à página do bairro relevante, navegue até o editor de workflow e crie na loja virtual um novo evento que é acionado quando o valor de um elemento é alterado.

Em seguida, você criará um evento de navegação, definindo a página de destino como sua página do bairro e enviando a fonte de dados do valor atual da caixa de pesquisa.

Exibindo uma lista de propriedades relevantes

Depois que um usuário for redirecionado para a página do seu bairro, você precisará exibir uma coleção de todas as propriedades atuais em seu banco de dados que estão listadas neste bairro específico.

Isso pode ser obtido utilizando nosso elemento de grupo repetidor. Os 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. Neste caso, você classificará o tipo do conteúdo como ‘casas’.

Além disso, você também precisará definir a fonte de dados como uma lista de todas as casas enviadas do seu banco de dados, e depois adicionar uma restrição para filtrar essas opções pelo campo de bairro.

Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido na grade. portanto mapeie a coluna superior com o conteúdo relevante que gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Dentro de um grupo repetidor, também é possível criar eventos com base em cada linha individual. Isso será necessário quando os usuários lerem uma visão geral de uma propriedade e logo depois decidirem clicar para ver todos os detalhes.

A criação desse workflow seguirá um processo semelhante ao redirecionamento anterior no elemento de pesquisa, mas desta vez você precisará criar o gatilho do workflow quando um elemento for clicado.

Dessa forma, o dado que você enviará nesta instância é a listagem da casa individual, da célula do grupo repetidor atual.

Como sua página de listagem de propriedade individual será configurada como um tipo de conteúdo ‘casa’, podemos usar elementos dinâmicos para exibir todos os detalhes relevantes da listagem.

Recursos adicionais para sua loja virtual do mercado imobiliário

Por fim, agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, é hora de ficar criativo com as experiências da sua loja virtual do mercado imobiliário no code.

Posteriormente, você pode:

• Adicionar suporte para filtrar propriedades por faixa de preço
• Filtrar conteúdo nas páginas com categorias de ‘alugar’ ou ‘comprar’
• Permitir que os usuários salvem uma propriedade em sua lista pessoal

Gostou desse tutorial? Aprenda também como criar um aplicativo de gestão financeira e como criar uma marketplace do zero tipo a Amazon, tudo sem precisar digitar uma única linha de 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 deste tutorial em inglês: https://bubble.io/blog/build-real-estate-marketplace-no-code/