Como criar um site tipo Product Hunt (sem programar)

Aprenda como criar um site tipo Product Hunt sem precisar programar, usando o editor visual web do Bubble.

Como criar um site de produtos tipo Product Hunt (sem programar)

Se você é um fabricante de produtos, provavelmente está familiarizado com o Product Hunt. A plataforma baseada em  comunidade é o lugar certo para criadores que desejam compartilhar suas criações com uma comunidade de pessoas com ideias semelhantes. Na verdade, nossa própria plataforma de aplicativos web sem código, Bubble, teve um grande impulso depois que lançamos no Product Hunt em 2015. O Product Hunt também apresentou a série Como Criar / Construir para seu público criador.

Bem, a imitação é realmente a forma mais sincera de lisonja. Nesta postagem, vamos percorrer o processo de criação da sua própria versão do Product Hunt usando o Bubble, sem escrever uma única linha de código.

Se você está procurando criar uma plataforma de comunidade dedicada, ou apenas interessado em utilizar alguns dos principais recursos do Product Hunt, este guia compartilhará como começar a montar a lógica subjacente para seu MVP.

As etapas para criar uma comunidade para compartilhamento de produtos, tipo Product Hunt, sem programar, incluem:

Iniciando

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Assim você pode acompanhar enquanto criamos nosso produto juntos.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Ao iniciar seu projeto, você pode escolher 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 da nossa plataforma. Se você está se baseando em uma versão do Product Hunt para criar sua plataforma de compartilhamento, algumas das páginas principais que desejará incluir são:

  • Página de upload – Um portal onde os usuários podem postar seus produtos
  • Página inicial – Exibindo uma lista de todos os produtos lançados
  • Página do produto – Uma página para hospedar cada produto individual
  • Perfil do usuário – Uma página para hospedar o perfil de cada usuário
Site de produtos tipo Product Hunt - Sem Codar

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 do seu banco de dados quando for necessário.

No caso da sua comunidade de compartilhamento tipo Product Hunt, você só precisará criar uma página para hospedar seus produtos individuais. Podemos então criar a lógica necessária para exibir apenas o produto relevante em cada página quando for necessário (abordaremos isso com mais detalhes em breve).

Configurando o banco de dados do Product Hunt com o Bubble

Após mapear a exibição do seu produto, podemos começar a criar os campos de dados necessários para alimentar o site. Contaremos com esses campos para conectar os workflows por trás da sua comunidade de compartilhamento.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Recomendamos dividir itens maiores em tipos de dados separados para aumentar a velocidade de seu aplicativo.

Por exemplo, vamos criar dois tipos de dados separados para cada novo produto. Um tipo de dados incluirá os detalhes básicos de um produto (incluindo o nome, fabricante e título), enquanto o outro tipo de dados incluirá arquivos de conteúdo maiores, como a descrição completa do produto e imagem em destaque.

Ao criá-los como campos de dados separados, podemos carregar apenas as informações necessárias quando são necessárias, reduzindo a quantidade de conteúdo que o editor do Bubble precisará processar.

Ao criar usando o Product Hunt como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

  • Título
  • Nome
  • Foto
  • Produtos criados – Lista de produtos. 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 campos adicionais.
  • Link do site
  • Seguidores – Lista de usuários
  • Seguindo – Lista de usuários
Criando Product Hunt no Bubble - Tipos de dados e campos

Tipo de dados: Produto

Campos:

  • Título
  • Título Headline
  • Link do site
  • Upvotes – Lista de usuários
  • Imagem de Thumbnail
  • Conteúdo adicional – Conteúdo do produto
Criando Product Hunt no Bubble - Tipos de dados e campos

Tipo de dados: Conteúdo do produto

Campos:

  • Descrição
  • Imagem apresentada
  • Comentários – Lista de comentários
Criando Product Hunt no Bubble - Tipos de dados e campos

Tipo de dados: Data de publicação

Campos:

  • Data (formatada como texto)
  • Produtos lançados na data – Lista de produtos
Criando Product Hunt no Bubble - Tipos de dados e campos

Tipo de dados: Comentário

Campos:

  • Conteúdo
  • Produto comentado – Produto
Criando Product Hunt no Bubble - Tipos de dados e campos

Criando workflows

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

Publicando um novo produto

O primeiro recurso central que criaremos é uma função para os usuários postarem seus produtos na comunidade de fabricantes.

Na página de envio do nosso sistema, você pode começar a criar esse processo usando uma combinação de inputs, incluindo; campos de texto livre, inputs multilinhas e uploaders de imagens.

Uma vez que um usuário tiver adicionado os detalhes relevantes em cada input, eles clicarão no botão postar 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 em seu banco de dados. Neste caso, estaremos criando um novo produto.

Precisamos então começar a adicionar os campos relevantes em nosso banco de dados. Mapeie cada input que deseja criar em relação ao campo de dados correspondente.

Começaremos primeiro criando o tipo conteúdo do produto, em seguida, vincularemos isso ao próprio produto.

Em seguida, adicionaremos uma etapa extra a este workflow, criando outro item – só que desta vez criaremos o próprio produto.

Ao vincular o conteúdo do produto inicial que criamos com este produto, é possível integrar perfeitamente esses dados em nossa plataforma.

Workflow para datas no Product Hunt no code

Depois de criar um produto, precisaremos definir a que data ele pertence. Isso nos permitirá exibir cada produto ao lado de uma lista de outros que compartilham a mesma data de lançamento.

Como nossas datas são um tipo de dados separado em nosso aplicativo, precisaremos adicionar outra etapa ao nosso workflow que cria uma nova entrada.

Nota: Ao criar esta etapa, precisamos primeiro adicionar uma condição que só cria uma nova data se a data ainda não existir em nosso banco de dados. Sem essa condição, ele criaria uma nova data cada vez que um produto fosse criado. Em vez disso, queremos apenas criar uma data única e, em seguida, adicionar quaisquer novos produtos a esta data atual, dependendo da hora.

Ao adicionar uma condição ‘somente quando’ a esta etapa, faremos uma pesquisa em nosso banco de dados por datas de publicação em que a data (formatada como texto – 15 de maio de 2020), seja igual à data atual, também formatada como (15 de maio de 2020). Se a contagem desta data (como texto) for 0, será criada uma nova data.

Em termos gerais – se a data já existir, não será criada outra entrada em seu banco de dados.

Depois, precisaremos estruturar o conteúdo de uma nova data no caso de uma nova entrada ser criada.

Começaremos adicionando a própria data em si – novamente, formatada como texto (15 de maio de 2020).

Também adicionaremos o novo produto que criamos à lista de produtos desta data.

Depois de criar a nova data, precisaremos adicionar mais uma etapa a este workflow – atualizando o campo de data de lançamento para nosso novo produto.

Para esta etapa, precisaremos alterar um item no banco de dados.

Ao adicionar a data, colocaremos a data / hora atual, formatada como 15 de maio de 2020.

Exibindo produtos em um feed por data de lançamento

Depois que os usuários enviarem produtos para a plataforma, precisaremos exibi-los em nossa página inicial.

Um dos principais recursos do Product Hunt é o formato no qual os produtos são agregados em listas diárias.

Para criar esse recurso, precisaremos utilizar um elemento de grupo repetidor. Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

Como exibiremos uma lista de datas dinâmicas e também uma lista de produtos dinâmicos, usaremos dois grupos repetidores empilhados um dentro do outro.

Primeiro, precisaremos adicionar um grupo repetidor que exibe uma lista das datas publicadas registradas em nosso banco de dados.

Depois de adicionar seu primeiro grupo repetidor, comece configurando o tipo de conteúdo como data de publicação, em seguida, faça uma pesquisa por todas as datas de publicação em seu banco de dados.

Nota: para fins deste guia, esse grupo repetidor é formatado em vermelho.

Bubble No Code Product Hunt Clone Tutorial RepeatingGroup

Dentro deste grupo repetidor, vamos adicionar outro – exibindo a lista de todos os produtos listados em cada data de publicação.

O tipo de conteúdo para este grupo repetidor será um produto. A fonte de dados precisará então pesquisar todos os produtos cuja data de lançamento do produto seja igual à data de publicação em nosso grupo repetidor ‘pai’.

Bubble No Code Product Hunt Clone Tutorial RepeatingGroup

Agora todos os produtos serão segmentados na data em que foram publicados.

Enviando dados entre páginas

Dentro de um grupo repetidor, também é possível criar eventos de cada coluna individual.

Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Como cada cartão de produto em nossa página inicial exibe apenas uma visão geral de cada produto (incluindo seu nome, título e Thumbnail), precisaremos exibir os detalhes completos do produto para cada item único em uma página separada.

Esse conteúdo adicional precisará ser hospedado na página de seu produto individual.

Para criar esse evento, comece fazendo um workflow que redirecione um usuário à página do produto quando a imagem do produto for clicada.

Bubble No Code Product Hunt Clone Tutorial Feature Product Workflow

Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo de página de destino como a página do produto.

Então você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual produto específico exibir. Os dados que você precisa exibir são os do produto da célula atual.

Bubble No Code Product Hunt Clone Workflow

Exibir conteúdo dinâmico na página do Product Hunt

Quando um usuário é direcionado para uma página de produto específica, você pode obter facilmente esses dados de evento de seu workflow e exibir o conteúdo relevante. Também podemos exibir o conteúdo adicional do produto que vinculamos a este produto específico.

Antes de criarmos este workflow, primeiro você precisa se certificar de que o tipo da página corresponde à propriedade de dados que você enviou por meio do evento de workflow. Nesse caso, você precisará definir a página do produto como uma propriedade do produto.

Bubble No Code Product Hunt Clone Tutorial Dynamic Content tutorial

Agora você pode começar a adicionar conteúdo dinâmico em seus elementos de página, exibindo as informações do produto ou seu conteúdo adicional que foi enviado em seu workflow.

Bubble No Code Product Hunt Clone Tutorial Dynamic Content Walkthrough

Criando uma função de pesquisa

Uma forma alternativa de descobrir novos produtos pode ser por meio de uma função de pesquisa em nossa página inicial.

Comece adicionando um elemento de barra de pesquisa que se integra a uma lista de todos os produtos atualmente em seu banco de dados.

Ao selecionar o tipo de conteúdo das barras de pesquisa como um ‘produto’, e sua fonte de dados como uma lista de todos os produtos, ele indexará todas as entradas existentes.

Bubble No Code Product Hunt Clone Search Tutorial

Para enviar um usuário à página do produto relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de um elemento é alterado (An input’s value is changed).

Bubble No Code Product Hunt Clone Tutorial Search Tutorial Walkthrough

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

Bubble No Code Product Hunt Clone Tutorial Search Product Workflow Tutorial

Criar o ‘upvote’ em sua comunidade de produtos

Dar upvote em um produto é um recurso essencial que impulsiona o engajamento da comunidade no Product Hunt.

Ao criar esse recurso, você pode começar utilizando nossos elementos de ícone para criar um botão de upvote.

Bubble No Code Product Hunt Clone Upvote System Tutorial

Quando o ícone de curtir é clicado, você criará um novo workflow que altera um item no banco de dados.

Bubble No Code Product Hunt Clone Upvote Workflow Tutorial

Em nosso banco de dados, upvotes para cada produto são medidos por uma lista de usuários. Isso nos permite adicionar o usuário a este campo de dados, aumentando a quantidade total de todos os usuários que contribuíram com um upvote.

Bubble No Code Product Hunt Clone Upvote Workflow Walkthrough

Se desejar exibir o número de upvotes de um produto, você pode adicionar um elemento de texto dinâmico para exibir a contagem total de usuários.

Bubble No Code Product Hunt Clone Upvote Dynamic Display

Comentando em um produto

Em nossa página de produto individual, podemos adicionar um grupo repetidor adicional e um input de texto, permitindo que os usuários enviem e exibam novos comentários.

Ao configurar este grupo repetidor, comece definindo o tipo de dados como comentários. Em seguida, nossa fonte de dados pesquisará por todos os comentários em que o produto comentado é o produto da página atual.

Ao criar um novo comentário, usaremos um input de texto simples e um botão. Quando o botão enviar é clicado, isso aciona um novo workflow – criando um novo item.

O item que queremos criar é um novo comentário. Mais uma vez, você também precisará combinar o elemento na página com o campo de dados de comentário necessário.

Sempre que um novo comentário é criado, o grupo repetidor nesta página será atualizado automaticamente com o novo conteúdo.

Exibindo perfis de usuários

Exibir páginas de perfis individuais é um recurso essencial para qualquer plataforma baseada em comunidade. Em todo o Product Hunt, perfis de usuário permitem que você aprenda mais sobre fabricantes individuais. Você pode até ver uma lista dos produtos que cada fabricante votou anteriormente.

Ao criar uma página de perfil de usuário separada, podemos começar a exibir dinamicamente os dados necessários para cada usuário na comunidade.

Comece configurando o tipo da página como ‘usuário’.

Em seguida, adicione os elementos dinâmicos à página que deseja exibir para cada usuário.

Por fim, adicionaremos um grupo repetidor a esta página, o que nos permite mostrar uma lista dos produtos que um usuário deu upvote.

Para economizar tempo, você pode copiar o elemento de grupo repetidor de sua página inicial e simplesmente atualizar a fonte de dados.

A fonte de dados desse grupo repetidor precisará pesquisar todos os produtos em que os upvotes contêm os usuários da página atual.

Seguindo um usuário

O recurso final central que criaremos para nosso MVP é a capacidade de seguir outro usuário na plataforma.

Na página de perfil do usuário, adicionaremos um botão para seguir. Quando este botão é clicado, criaremos um novo workflow que altera um item no banco de dados.

Criar comunidade de produtos tipo Product Hunt com o Bubble

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

Criar comunidade de produtos tipo Product Hunt com o Bubble

Em seguida, também precisaremos atualizar a lista de seguidores do usuário da página atual, adicionando o usuário atual.

Criar comunidade de produtos tipo Product Hunt com o Bubble

Adicionando novos recursos ao seu Product Hunt no code

Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a ficar criativo com as experiências criadas no seu produto. Adicionalmente, você pode:

  • Adicionar suporte para coleções de produtos
  • Adicionar vários fabricantes a um produto
  • Criar notificações quando os produtos são lançados

Aprenda a criar sites e aplicativos sem precisar programar seguindo nossos posts e tutoriais em vídeo:

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/built-product-hunt-no-code/

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

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

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente