Aprenda a criar uma plataforma de comunidades como o Reddit, sem precisar programar

Aprenda como criar seu próprio site de comunidades online no code, usando o editor visual web do Bubble.

Criar site de comunidades como o Reddit Bubble no code

Comunidades são uma forma poderosa de envolver o público e gerar discussões significativas. Quer se trate de fóruns esportivos, hobbies, trabalho ou nosso favorito pessoal – programação visual – há um hub para cada nicho.

O Reddit é conhecido como uma das plataformas de comunidade online mais populares. Com milhares de subreddits para cada nicho, a plataforma é o lar de algumas das comunidades mais engajadas do mundo. Mas se você é um criador que está interessado em criar uma comunidade, usar uma plataforma de terceiros muitas vezes pode acarretar alguns riscos. Ao hospedar sua comunidade em uma plataforma existente, você está sujeito às regras, políticas e mudanças da plataforma deste provedor.

A melhor solução? Por que não criar sua própria comunidade?

Com o surgimento de ferramentas no code, criadores de todas as origens podem começar a fazer seus próprios softwares, tudo sem escrever uma única linha de código.A poderosa plataforma do Bubble tornou mais fácil do que nunca começar sua jornada de desenvolvimento. Nossos clientes usam o Bubble para criar sites, aplicativos móveis, e claro, comunidades.

Ao longo desse post, vamos descobrir o processo de usar o Bubble para criar sua própria versão ‘white-label’ do Reddit. Compartilharemos um guia passo a passo para criar a lógica subjacente para seu MVP em questão de minutos.

Os passos para criar uma comunidade online tipo Reddit incluem:

Fazer cadastro gratuito no Bubble

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

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

Também recomendamos entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso guia Como criar um site tipo Quora.

Podemos começar criando um protótipo para o design do site ou criando os campos necessários no banco de dados.

Nesse caso, começaremos usando a ferramenta de design visual para moldar a interface de usuário do nosso site. Ao replicar o Reddit, algumas das páginas principais que você deseja incluir serão:

  • Página inicial – Exibindo uma lista de posts e todos os subreddits disponíveis
  • Página de criação de Subreddit – Um portal usado para criar novos subreddits
  • Página do Subreddit – Exibindo uma lista dos posts em uma comunidade
  • Página de post individual – Exibindo todo o conteúdo de um post

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 de uma página que possa refletir informações sobre usuários específicos ou itens em seu banco de dados.

No caso do seu site no code baseado no Reddit, você só precisará criar uma página para hospedar seus subreddits e posts individuais. Podemos então criar a lógica necessária para exibir apenas o conteúdo relevante em cada página quando for necessário.

Configurando seu Reddit no code

Depois de mapear a exibição 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 do seu site.

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 usar o Reddit como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de conteúdo: Usuário

Campos:

  • Nome de usuário
  • Subreddits participados – Lista de subreddits. Nota: Criando uma lista baseada em dados gerais permitirá que você integre perfeitamente todos os seus campos de dados relevantes, sem ter que criar valores de campo adicionais.
Criar site de comunidades como o Reddit Tipos de Dados e Campos

Tipo de conteúdo: Subreddit

Campos:

  • Nome
  • Posts – Lista de posts
  • Usuários – Lista de usuários
Criar site de comunidades como o Reddit Tipos de Dados e Campos

Tipo de conteúdo: Post

Campos:

  • Título
  • Conteúdo da post
  • Comentários – Lista de comentários
  • Upvotes – Lista de usuários
  • Downvotes – Lista de usuários
Criar site de comunidades como o Reddit Tipos de Dados e Campos

Tipo de conteúdo: Comentário

Campos:

  • Conteúdo
  • Post do comentário
Criar site de comunidades como o Reddit Tipos de Dados e Campos

Workflows necessários para um site de comunidades tipo Reddit

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 subreddits

Uma vez que um usuário tenha criado uma conta, o primeiro recurso principal que vamos focar é a criação de uma página dedicada onde eles podem criar subreddits.

Para o bem do nosso MVP, manteremos o design desta página mínimo, adicionando apenas um elemento de input de texto e um botão.

Quando um usuário clica no botão criar, este evento aciona um novo workflow.

Dentro deste workflow, queremos criar um novo item.

O item que queremos criar, é claro, um subreddit – adicionando a ele o nome do elemento de input e o usuário atual.

Exibindo conteúdo dinâmico na página inicial

Depois de adicionar conteúdo à plataforma, agora você pode exibi-lo em sua página inicial.

A página inicial será usada para mostrar uma lista de todos os subreddits disponíveis em sua plataforma, bem como uma lista de todos os posts dos subreddits que um usuário participa.

Criar site de comunidades como o Reddit Conteúdo Dinâmico

Começaremos configurando o elemento de grupo repetidor no lado direito de nossa página que apresenta uma lista de subreddits.

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 de conteúdo como subreddits.

Depois de atualizar o tipo de dados, você também precisará adicionar uma fonte de dados – indicando quais subreddits deseja exibir.

Para nosso MVP, vamos simplesmente exibir uma lista de todos os subreddits disponíveis.

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

Criando eventos de navegação para o Reddit no code

Dentro de um grupo repetidor, também é possível criar eventos com base em cada linha individual.

Este recurso se tornará útil ao criar eventos de navegação em sua plataforma. Se um usuário quisesse ver todas os posts em um subreddit, ele clicaria no nome da comunidade e seria redirecionado para a página relevante.

Para realizar esse evento, você precisará começar criando um workflow quando o título do subreddit for clicado no grupo repetidor.

Criar site de comunidades como o Reddit Workflow

O evento do workflow enviará um usuário a uma página.

Criar site de comunidades como o Reddit Workflow

A partir daqui, selecione o tipo da página de destino como a página do subreddit.

Em seguida, você precisará enviar dados adicionais para esta página para que o editor do Bubble saiba qual subreddit específico exibir. Os dados que você precisa exibir são os do subreddit das células atuais.

Criar site de comunidades como o Reddit Workflow

Agora que terminamos de criar este grupo repetidor, precisaremos configurar o segundo grupo repetidor em nossa página inicial – exibindo uma lista de posts.

Mais uma vez, começaremos configurando o tipo de dados deste grupo repetidor, desta vez definindo-o como post.

Ao adicionar uma fonte de dados, também incluiremos uma restrição adicional, garantindo que o usuário veja apenas uma lista de posts que foram publicadas nos subreddits participados.

Ao começar a mapear o conteúdo de visualização para cada linha de post, você pode incluir:

  • O nome do subreddit de células atuais em que foi postado
  • Os posts das células atuais e títulos das células atuais
  • Os posts das células atuais, criadores e nome

Criando upvotes

Um dos principais recursos do Reddit que você deseja replicar são as funções de upvote e downvote.

Usando o elemento de ícones, você pode adicionar perfeitamente esses dois recursos e criar um workflow quando eles forem clicados.

Tutorial Criar Reddit no Bubble

Felizmente, o workflow para criar esta função é direto. No editor de workflow, você vai começar alterando um item no banco de dados.

Tutorial Criar Reddit no Bubble

O item que você deseja alterar é o post das células atuais. O campo de dados que você mudará é o de upvotes do post, adicionando a ele o usuário atual.

Tutorial Criar Reddit no Bubble

Ao criar um recurso de voto negativo (downvote), você pode replicar esse workflow – mas ao invés disso alterando o campo de dados de downvote.

Tutorial Criar Reddit no Bubble

Pesquisando subreddits

De volta à nossa página inicial, há um último recurso-chave que precisamos adicionar – uma função para um usuário pesquisar e descobrir livremente novos subreddits nos quais possa estar interessado. Podemos criar facilmente esse recurso usando nosso elemento de caixa de pesquisa.

Ao configurar a lista de busca desse elemento como subreddits, podemos indexar o campo de pesquisa como os nomes dos subreddits.

Agora todas as entradas de subreddit disponíveis serão indexadas por seus nomes e até mesmo sugestões de pesquisa serão oferecidas à medida que são digitadas.

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

Em seguida, você criará um evento de navegação quando o valor da caixa de pesquisa for alterado, definindo a página de destino como sua página de subreddit, enviando com ela a fonte de dados do valor atual da caixa de pesquisa.

Exibindo conteúdo dinâmico nas páginas do Reddit

Depois que um usuário é direcionado para um subreddit, precisaremos configurar a página do subreddit para exibir o conteúdo relevante para esta comunidade específica.

Comece atualizando o tipo de conteúdo da página como subreddit.

Depois de atualizado, você pode mapear os elementos dinâmicos restantes em sua página.

Ingressando em um subreddit

Criar suporte para usuários ingressarem em subreddits pode ser feito facilmente em um workflow direto. Comece acionando um workflow quando o botão de ‘participar’ (join) for clicado.

Bubble No Code Reddit Clone Join A Subreddit Workflow Walkthrough

Em seguida, você optará por alterar um item no banco de dados.

Bubble No Code Reddit Clone Join A Subreddit Workflow

Finalmente, você vai querer fazer alterações no subreddit da página atual adicionando o usuário atual.

Bubble No Code Reddit Clone Join A Subreddit Workflow Tutorial

Criando um post

Agora que os usuários podem ingressar em subreddits, nosso próximo recurso principal será uma função para publicar posts dentro da comunidade. Iremos acionar esse workflow quando o botão criar post for clicado.

Bubble No Code Reddit Clone Create a Post Workflow Example

Em vez de redirecionar um usuário para uma nova página, usaremos um elemento pop-up para criar nosso próximo post. Pop-ups são uma maneira útil de exibir informações ou criar eventos sem direcionar o usuário para fora da página atual.

Bubble No Code Reddit Clone Create a Post Pop Up Walkthrough

Para exibir um pop-up em seu workflow, comece selecionando a aba ações do elemento (element actions), e então opte por mostrar um item.

Bubble No Code Reddit Clone Create a Post Workflow Backend Logic

Obviamente o elemento que precisamos mostrar é o pop-up.

Bubble No Code Reddit Clone Create a Post Pop up Workflow Walkthrough

O workflow restante para a criação de um post seguirá a mesma estrutura da criação de um novo subreddit, mas desta vez incluiremos inputs adicionais para o título e o corpo do post.

Também garantiremos que o novo post esteja vinculada ao subreddit da página atual.

Bubble No Code Reddit Clone Create a Post Workflow Walkthrough

Assim que o post for criado, adicionaremos uma etapa extra em nosso workflow para ocultar o pop-up.

Bubble No Code Reddit Clone Create a Post Hide Popup Step

O grupo repetidor em sua página de subreddit será atualizado automaticamente em tempo real quando um novo post for criado.

Exibindo e visualizando posts

Ao exibir posts em nossa página de subreddit, você pode duplicar o grupo repetidor existente que criamos anteriormente na página inicial.

Ao adicionar este grupo repetidor, você precisará atualizar a fonte de dados, exibindo posts que foram publicadas no subreddit da página atual.

Bubble No Code Reddit Clone Display Posts Tutorial

Isso garantirá que apenas os posts desta comunidade sejam exibidos. De acordo com nossa pagina inicial, você também pode replicar os mesmos workflows ao criar seus recursos de upvote e downvote para cada post.

Nota: Como cada post armazena seus próprios dados exclusivos, ela sincronizará constantemente a contagem total de upvotes, independentemente de onde seja exibida.

Como os posts em nosso grupo repetidor exibem apenas uma visualização do conteúdo completo – incluindo o título do post, o criador e a descrição – precisaremos hospedar o conteúdo completo em uma página separada assim que o usuário clicar.

Para fazer este evento, crie um workflow que direcione o usuário para a página do post, enviando com ele os dados do post da célula atual.

Bubble No Code Reddit Clone Display Posts Workflow Tutorial

Comentando nos posts

Depois de enviar um usuário para a página do post, primeiro precisaremos configurar o tipo da página para exibir o conteúdo relevante do post.

Bubble No Code Reddit Clone Comment System Tutorial

Mais uma vez, você começará a mapear os elementos da página que gostaria de exibir para cada post.

Bubble No Code Reddit Clone Comment Dynamic Content Tutorial

Por fim, também adicionaremos um novo grupo repetidor nesta página, exibindo os comentários dos posts da página atual (Current Page Post’s).

Bubble No Code Reddit Clone Comments Section Template

Abaixo da lista de comentários, também adicionaremos um elemento de texto multilinhas e um botão de comentário. Quando o botão de comentário é clicado, vamos dispara um novo workflow para criar um novo item – um comentário.

Bubble No Code Reddit Clone Comments Section Walkthrough

Nesse workflow, precisaremos combinar o input na página com o conteúdo de um comentário, e também adicionar esse novo comentário ao post da página atual.

Bubble No Code Reddit Clone Create Comment Workflow

Assim que o novo comentário for criado, o grupo repetidor na página de post será atualizado com este novo conteúdo.

Recursos adicionais para um site tipo Reddit

Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ser criativo com as experiências criadas em seu site de comunidades no code.

Adicionalmente, você pode:

  • Criar comentários encadeados
  • Criar uma função para enviar mensagens entre os usuários
  • Criar perfis de usuário públicos, exibindo uma lista de cada atividade do usuário
  • Adicionar pontos de carma para cada ação na plataforma (karma points)

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-reddit-clone-no-code/

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

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

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