Aprenda como criar um site tipo Product Hunt sem precisar programar, usando o editor visual web do Bubble.
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:
Índice
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
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
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
Tipo de dados: Conteúdo do produto
Campos:
- Descrição
- Imagem apresentada
- Comentários – Lista de comentários
Tipo de dados: Data de publicação
Campos:
- Data (formatada como texto)
- Produtos lançados na data – Lista de produtos
Tipo de dados: Comentário
Campos:
- Conteúdo
- Produto comentado – Produto
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.
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’.
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.
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.
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.
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.
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.
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).
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.
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.
Quando o ícone de curtir é clicado, você criará um novo workflow que altera um item no banco de dados.
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.
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.
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.
O item que queremos mudar é o usuário atual, adicionando o usuário da página atual à sua lista de usuários seguidos.
Em seguida, também precisaremos atualizar a lista de seguidores do usuário da página atual, adicionando o usuário atual.
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:
- Criando um Aplicativo Gratuito para Loja de Carros e Motos
- [TUTORIAL] Como criar um software que envia ORÇAMENTOS direto por WHATSAPP no Bubble
- OS 4 DEGRAUS DA CRIAÇÃO DE RIQUEZA (e como ganhar dinheiro com apps)
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/
