Aprenda a criar um site de anúncios como a Craigslist usando ferramentas no code

Aprenda como criar um site de anúncios no code, usando o editor visual web do Bubble.

Se você deseja comprar ou vender quase tudo que existe, o Craigslist é um bom lugar para começar sua busca.

Portanto, ao longo deste guia, vamos percorrer o processo de uso do Bubble para criar seu próprio site de anúncios no code como Craigslist.

Esteja você procurando criar uma dedicada plataforma de anúncios ou apenas interessado em utilizar alguns dos principais recursos do Craigslist, este guia compartilhará como começar a criar a lógica subjacente para um MVP no code.

Este tutorial explicará o processo de criação dos seguintes recursos principais:

• Permitindo que os usuários criem e publiquem listagens no site
• Criando uma função de pesquisa para que os usuários descubram listagens relevantes
• Enviando dados entre páginas para exibir conteúdo dinâmico
• Permitindo que os usuários enviem mensagens aos criadores de uma listagem de anúncio, por meio de uma plataforma terceirizada (Gmail)

As etapas para criar o Craigslist no code incluem:

Faça seu cadastro gratuito no Bubble.

Primeiramente, para começar a criar seu site de anúncios, é necessário uma conta Bubble.

Além disso, 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.

Ao iniciar seu projeto, você pode escolher começar criando um protótipo de design de seu produto ou criando os campos necessários em seu banco de dados.

Dessa forma, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso produto. Assim, se você está criando sua própria versão do Craigslist, algumas das páginas principais que deseja incluir são:

• Uma página para criar novas listas de anúncios – um portal back-end onde o usuário pode enviar anúncios
• Uma página inicial – usada para exibir uma lista de categorias em destaque e uma barra de pesquisa
• Uma página de resultados de busca por categorias – exibindo a lista completa de anúncios em cada categoria
• Uma página de resultados de busca para listagens – exibindo uma variedade de listagens de anúncios com base em uma pesquisa do usuário
• Uma página de listagem de anúncio individual – usada para exibir as informações completas de um anúncio individual

Um dos principais recursos do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.

No caso do seu site de anúncios, você só precisará criar uma página para hospedar suas listas de anúncios individuais. Podemos então criar a lógica necessária para exibir apenas a lista relevante em cada página quando for necessário (vamos cobrir isso com mais detalhes em breve).

Configure seu banco de dados

Logo após mapear a IU (interface de usuário) do seu site, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar a lógica por trás da sua plataforma.

Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de nível superior e, em seguida, adicione os campos necessários em cada categoria.

Ao criar um MVP Craigslist no code, precisaremos dos seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos de dados:

• Nome
• Localização
• Listagens criadas – lista de listagens. Nota: Criar um campo baseado em lista, em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar campo adicional

Tipo de dados: Listagem

Campos de dados:

• Título
• Descrição
• Imagem apresentada
• Preço
• Localização
• Categoria (tipo de categoria)

Tipo de dados: Categoria

Campos de dados:

• Nome da categoria
• Listagens de categorias – lista de listagens

Criando workflows

Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo e tornar 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. )

Criando e publicando novas listagens de anúncios

Um dos principais recursos do Craigslist é a função de criar listagens de anúncios geradas pelo usuário.

Portanto, para criar esse recurso, vamos adicionar uma combinação de elementos de input para criar um formulário de envio em nossa página de criar listagem.

Para o bem do nosso MVP, esta página incluirá alguns detalhes básicos como um título, uma imagem de destaque, uma descrição e uma categoria.

Para selecionar uma categoria no menu suspenso, precisaremos configurar este elemento para integrar com nosso banco de dados.

Primeiramente, comece atualizando o estilo do menu suspenso como escolha dinâmica. Logo depois, vamos selecionar a escolha deste elemento como uma categoria. Por fim, definiremos a fonte de dados dos itens exibidos como nossas categorias – exibindo os títulos das categorias.

Ao configurar adequadamente este menu suspenso. Como resultado ele agora adicionará quaisquer novas listagens de anúncios em suas categorias relevantes. Isso será útil mais tarde.

Quando um usuário preencher este formulário, começaremos a criar um workflow que cria uma nova lista assim que o botão criar é clicado.

Neste workflow, queremos criar um novo item em nosso banco de dados.

Você então precisará começar a adicionar dados aos campos relevantes em seu banco de dados. Portanto mapeie cada input que deseja criar em relação ao campo de dados correspondente.

Criando sua página inicial

Assim que sua comunidade começar a publicar listas de anúncios, você precisará criar uma página inicial para seu site de anúncios, para filtrá-las por suas categorias.

Dessa forma, ao usar um  elemento de grupo repetidor, iremos criar uma lista das categorias atuais em todo nosso site de anúncios. Conforme os grupos repetidores se integram ao seu banco de dados, ele exibirá todas as categorias atuais que foram criadas.

Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a uma fonte de dados de nosso banco de dados. Neste caso, você classificará a fonte como categorias.

Logo depois de configurar a fonte de dados do grupo repetidor, você pode começar a mapear o conteúdo dinâmico que será exibido em cada linha. Basta adicionar um elemento na linha superior do grupo repetidor, então este elemento preencherá automaticamente as linhas restantes.

Além disso, dentro do seu grupo repetidor, também é possível criar eventos com base no conteúdo individual de cada linha. Você usará esse recurso quando começar a criar recursos de navegação em todo o mercado.

Enviando dados entre páginas

Quando um usuário clica em uma categoria selecionada, precisaremos redirecioná-lo para uma nova página, exibindo uma lista de todas as listagens relevantes dentro da categoria escolhida.

Ao criar esse recurso, começaremos criando uma página separada chamada resultados da pesquisa de categorias. A princípio, esta página incluirá um grupo repetidor usado para exibir toda a gama (array) de nossas listas de anúncios relevantes.

Em seguida, precisaremos configurar o tipo de página desta página de resultados de pesquisa – garantindo que corresponda ao tipo de dados que enviaremos por meio de nosso workflow. Nesse caso, o tipo da página será definido como categorias.

Enfim, configuraremos a fonte de dados de nosso grupo repetidor. Neste caso, queremos apenas exibir as listagens que estão incluídas na categoria da página atual.

Uma vez que essa fonte de dados for configurada, você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade.

Ao passo que terminamos de criar esta página, podemos criar o workflow que irá navegar os usuários entre a página inicial e a lista de anúncios em cada categoria.

De nossa página inicial, precisaremos criar um novo workflow quando o título de uma categoria é selecionado.

Daqui, selecione a página de destino como a página de resultados da pesquisa de categorias. Ao longo deste workflow, você também vai querer enviar os dados da categoria de células atual. Enviando esses dados, o grupo repetidor em nossa página de resultados terá agora um ponto de referência.

Navegue por uma função de pesquisa

Atualmente, uma maneira alternativa de descobrir anúncios no Craigslist é usando a função de pesquisa na página inicial. Ao passo que, com milhares de listagens de anúncios na plataforma, os usuários podem querer pesquisar listagens relevantes por suas palavras-chave, não por suas categorias. Assim, ajudando a otimizar a experiência de obtenção de uma determinada listagem.

Antes de criarmos o workflow para oferecer suporte a esse recurso, precisaremos mais uma vez criar uma página separada de resultados da pesquisa. Como o design desta página permanecerá o mesmo da nossa página de resultados da pesquisa por categoria, você pode replicar a página já existente.

Como o conteúdo que exibiremos em nossa nova página de resultados é especificamente para listas de anúncios, também precisaremos atualizar o tipo da página de categorias para listagens.

Depois de criar esta página, volte para a página inicial e adicione um elemento de input de texto como um campo de pesquisa.

A partir daqui, criaremos um novo workflow na página quando o valor de um elemento é alterado. O elemento será, obviamente, o input de texto.

Como precisaremos adicionar uma consulta de pesquisa única à string do nosso URL, não enviaremos um usuário a uma página com este workflow, mas, em vez disso, abriremos um site externo. Como resultado, isso nos permitirá personalizar o caminho do URL entre as páginas.

Assim, a URL para a qual enviaremos o usuário será a URL inicial do site atual + a URL de nossa página de resultados de pesquisa + o valor da consulta dinâmica do nosso input de texto.

Agora, em nossa dedicada página de resultados da pesquisa, atualizaremos a fonte de dados do grupo repetidor para buscar o termo que está sendo enviado entre as páginas.

Por fim, você será solicitado a selecionar de qual campo da URL irá extrair os dados. Portanto, simplesmente escolha obter dados do caminho do URL (URL path), não do parâmetro.

Como resultado, qualquer lista de anúncios em que o campo de título corresponda a uma instância da palavra-chave específica que está sendo pesquisadas será exibida.

Navegue até uma página de lista de anúncios individual

Depois de terminar a criação das duas páginas de resultados de pesquisa, faremos o recurso de navegação final que direciona o usuário a uma lista de anúncios individual assim que clicar em um cartão específico.

Dentro de um grupo repetidor, é possível criar eventos em cada linha individual. Para esta função, criaremos um novo workflow quando uma imagem da listagem for clicada.

Ao longo do workflow, optaremos por enviar um usuário a uma página. A página para a qual iremos enviá-los é a página de listagem. Além disso, também precisaremos enviar os dados da listagem da célula atual.

Exibindo dinamicamente o conteúdo de uma lista individual

Depois que um usuário foi redirecionado para uma página de lista específica, você pode facilmente obter esses dados de evento de seu workflow e exibir o conteúdo relevante.

Na página de destino, você precisará configurar o tipo da página como uma lista.

Por fim, você pode começar a adicionar conteúdo dinâmico aos elementos da sua página, exibindo as informações da lista única que foi enviada em seu workflow.

Contatando criadores de anúncios

Enfim, o recurso final que criaremos em nosso MVP é uma função para enviar uma consulta por e-mail ao usuário que criou uma lista de anúncios.

Usando o Bubble, há várias maneiras de criar esse recurso. Assim, para o bem do nosso MVP, usaremos uma solução simples.

Logo ao criar um workflow quando o botão responder for clicado, escolheremos abrir um site externo.

Logo depois vamos configurar o URL externo como um ‘MailTo address’ para o e-mail do criador da lista de anúncios.

Próximos passos

Depois de criar os recursos principais para seu MVP, você se familiarizará com o processo de criação de campos de dados personalizados e exibição de conteúdo dinâmico.

Se desejar continuar adicionando recursos a sua plataforma de anúncios, você também pode considerar:

• Adicionar suporte para comentários de usuários
• Criação de perfis de usuário
• Adicionar campos de dados extras em cada lista de anúncios