Aprenda como criar seu próprio site de comunidades online no code, usando o editor visual web do Bubble.
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:
Índice
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.
Tipo de conteúdo: Subreddit
Campos:
- Nome
- Posts – Lista de posts
- Usuários – Lista de usuários
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
Tipo de conteúdo: Comentário
Campos:
- Conteúdo
- Post do comentário
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.
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.
O evento do workflow enviará um usuário a uma página.
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.
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.
Felizmente, o workflow para criar esta função é direto. No editor de workflow, você vai começar alterando um item no banco de dados.
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.
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.
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.
Em seguida, você optará por alterar um item no banco de dados.
Finalmente, você vai querer fazer alterações no subreddit da página atual adicionando o usuário atual.
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.
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.
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.
Obviamente o elemento que precisamos mostrar é o pop-up.
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.
Assim que o post for criado, adicionaremos uma etapa extra em nosso workflow para ocultar o pop-up.
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.
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.
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.
Mais uma vez, você começará a mapear os elementos da página que gostaria de exibir para cada post.
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).
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.
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.
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/
