Como criar um fórum online sem programar

Aprenda como criar um fórum usando o Stack Overflow como MVP, com o editor visual web do Bubble.

Criar um fórum Stack Overflow sem programar

A criação de software não requer mais que os fabricantes sejam desenvolvedores experientes. Usando o Bubble, é possível criar facilmente aplicativos poderosos sem escrever uma única linha de código. Em todo o mundo, milhares de fabricantes estão criando suas próprias lojas virtuais, redes sociais e diretórios – todos usando essa ferramenta de desenvolvimento no code.

Se você é um desenvolvedor de software, no entanto, provavelmente está familiarizado com o Stack Overflow. O Stack Overflow é um popular fórum de comunidade para desenvolvedores, permitindo-lhes publicar e responder a perguntas sobre problemas específicos de engenharia. Em outras palavras, é um repositório de conteúdo valioso para aqueles que precisam de orientação.

Este post irá guiá-lo através do processo de usar o Bubble para criar uma versão ‘white-label’ do Stack Overflow. Esteja você procurando criar seu próprio fórum de comunidade específica ou apenas interessado em utilizar alguns dos principais recursos da plataforma, este guia mostrará como começar a criar a lógica subjacente para seu site.

Ao longo deste artigo, iremos destacar como criar os seguintes recursos principais:

  • Uma função para que os usuários enviem perguntas para a plataforma
  • Uma função de pesquisa – A capacidade dos usuários de pesquisarem perguntas específicas com base em uma consulta
  • Exibindo uma lista de perguntas dinâmicas em um feed
  • A capacidade dos membros da comunidade enviarem respostas para cada pergunta
  • Uma função de upvote em perguntas populares ou respostas

As etapas para criar um fórum sobre programação no code incluem:

Faça seu cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Clique no link e acompanhe o passo a passo de como criar um fórum oline sem precisar programar.

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

Agora podemos começar a criar um Stack Overflow no code.

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

Nesse caso, começaremos usando a ferramenta de design visual para moldar a interface de usuário do nosso produto. Se você estiver se baseando na plataforma do Stack Overflow, algumas das páginas principais que vai querer incluir serão:

  • Página inicial – Incluindo uma barra de pesquisa, um grupo repetido de perguntas da comunidade e quaisquer menus de navegação relevantes
  • Páginas de perfil do usuário
  • Uma página onde os usuários podem enviar perguntas
  • Uma página para hospedar cada pergunta única – Isso incluirá a própria pergunta, as respostas da comunidade e uma seção para os usuários contribuírem com novas respostas.

Um recurso importante no Bubble é a capacidade de enviar dados para uma página. Nesse sentido 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 do seu banco de dados.

No caso do seu Stack Overflow no code, precisamos apenas fazer uma página para hospedar suas perguntas individuais. Podemos então criar a lógica necessária para exibir apenas o conteúdo relevante para cada pergunta quando for necessário (abordaremos isso com mais detalhes em breve).

Configurando o banco de dados para um Stack Overflow no code

Depois de mapear a exibição do seu site, você pode se concentrar em criar os campos de dados necessários para alimentar seu fórum. Contaremos com esses campos para conectar a lógica por trás da 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 usar o Stack Overflow como um MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

  • Nome
  • Bio
  • Localização
  • Foto de perfil
  • Lista de tópicos / idiomas
  • Título do trabalho
  • Perguntas enviadas – Nota: Criar uma lista baseada em um o tipo geral de dados permitirá que você integre perfeitamente todos os seus campos de dados relevantes, sem a necessidade de criar valores de campo adicionais.
  • Perguntas respondidas – Vinculado a um campo existente com várias entradas
Criar um fórum online Stack Overflow - Tipos de dados e campos

Tipo de dados: Perguntas Enviadas

Campos:

  • Título da pergunta
  • Conteúdo da pergunta
  • Tags – Lista do tipo de dados ‘tag’
  • Upvotes – Lista do campos de dados de usuários existentes
  • Respostas – Vinculado a um campo existente com várias entradas
Criar um fórum online Stack Overflow - Tipos de dados e campos

Tipo de dados: Tags

Campo:

  • Nome da categoria da tag – criado como um campo com várias entradas
Criar um fórum online Stack Overflow - Tipos de dados e campos

Tipo de dados: Respostas

Campos:

  • Pergunta original
  • Conteúdo da resposta – Vinculado à pergunta original
Criar um fórum online Stack Overflow - Tipos de dados e campos

Workflows para criar um fórum online

Logo depois de estruturar o design e o banco de dados do seu site, é hora de começar a costurar tudo juntos 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 uma pergunta

Um dos principais recursos do Stack Overflow é a capacidade dos usuários de criar e publicar novas perguntas. Usando elementos de input, fazer o workflow para criar uma nova pergunta é um processo contínuo.

Dica profissional: Usando a biblioteca de plug-ins do Bubble, é possível integrar nosso input gratuito ‘rich text editor’ ao seu site. Isso permite que os usuários finais formatem campos de texto ou adicionem elementos extras, como código bruto. Isso será útil ao criar seu Stack Overflow no code.

Depois de projetar a UI (user interface) para a página de envio de perguntas, você iniciará seu workflow quando uma ação de clique for acionada no botão de envio.

Em seu workflow, você desejará criar um novo item em seu banco de dados. O que você deseja criar é uma nova entrada no tipo de dados ‘perguntas enviadas’.

Em seguida, você combinará os inputs relevantes necessários para estruturar sua postagem.

Exibindo um feed de perguntas dinâmicas em sua página inicial

Após a função de enviar perguntas, é hora exibi-las na página inicial como uma lista dinâmica. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.

Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

Ao usar grupos repetidores, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo do conteúdo como ‘perguntas enviadas’.

Este grupo repetidor agora exibirá todas as perguntas geradas pelo usuário em seu banco de dados.

Ao integrar um campo de pesquisa acima do grupo repetidor, também é possível exibir apenas o conteúdo relevante para uma palavra-chave ou consulta específica.

Para oferecer suporte a essa integração, você precisará configurar a fonte de dados do seu grupo repetidor para ser o valor do seu campo de pesquisa – refletindo o ‘título da pergunta’ do post da pergunta.

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 gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

Criando eventos com o grupo repetidor

Ao usar um grupo repetidor, também é possível criar eventos dentro de cada linha única.

Este recurso se tornará útil ao criar funções de navegação em sua plataforma. As perguntas exibidas na página inicial do Stack Overflow mostram apenas uma visualização da linha superior do título e descrição. Essas perguntas não exibirão comentários da comunidade até que um usuário clique na página da pergunta completa. Este conteúdo adicional será hospedado em sua página de ‘pergunta (postada)’ para cada envio único.

Para criar este evento, você precisará começar criando um workflow que redirecione o usuário à sua página da pergunta quando o título da pergunta for clicado.

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 da página de destino como a página da pergunta (postada).

Em seguida, precisaremos enviar dados adicionais a esta página para que o editor do Bubble saiba qual pergunta específica exibir. Os dados que você precisa exibir são os da pergunta das célula atual.

Você repetirá esse processo ao redirecionar as pessoas para o perfil de um usuário, quando um nome ou foto de perfil for clicado.

Exibir conteúdo dinâmico na página de perguntas

Quando alguém é direcionado para a página de uma pergunta específica, você pode obter facilmente esses dados do evento e exibir o conteúdo relevante para cada pergunta.

Para criar esse workflow, primeiro você precisará garantir que o tipo da página de destino corresponda à propriedade de dados que está enviando no workflow. Nesse caso, você precisará definir as ‘perguntas (postadas)’ como propriedade de perguntas enviadas.

Criar fórum online Stack Overflow - Exibindo conteúdo dinâmico

Ao classificar o tipo do conteúdo de uma página, o Bubble pode facilmente extrair e enviar dados relevantes de fontes existentes.

Agora você pode começar a adicionar conteúdo dinâmico aos campos que exibem informações de uma pergunta específica.

Criar fórum online Stack Overflow - Exibindo conteúdo dinâmico

 

Enviando e exibindo respostas

Na página que exibe a pergunta completa com as respostas existentes, você não só precisará incluir um grupo repetidor das respostas atuais para cada postagem, mas também precisará adicionar um campo extra, permitindo que os usuários publiquem novos envios de respostas.

Contribuir com uma resposta a uma pergunta segue o mesmo processo de criação de uma nova pergunta – só que desta vez, você precisará criar uma nova resposta, garantindo a integração adequada com a pergunta atual em mãos.

Ao exibir uma lista de respostas atuais para uma pergunta em um grupo repetidor acima deste campo de envio, o elemento será atualizado em tempo real quando uma nova resposta for enviada.

Criar ‘upvote’ e ‘downvote’ em nosso fórum online

A capacidade de dar ‘upvote’ ou ‘downvote’ em um conteúdo é uma maneira importante de identificar conteúdo popular em sua plataforma de comunidade. Esteja você criando um sistema de votação para as perguntas enviadas ou até mesmo para cada resposta individual em uma postagem – o workflow que alimenta esse recurso permanecerá o mesmo.

Dica profissional: Dentro do editor do Bubble, é possível usar nossos símbolos existentes como botões para acionar seu workflow de votação.

Stack Overflow Bubble No Code Walkthrough

Quando seu ícone de voto positivo (upvote) for clicado, você criará um workflow que faz alterações em um campo existente em seu banco de dados. Nesse caso, você precisará adicionar o usuário atual à lista total de pessoas que votaram positivamente em uma postagem individual.

Stack Overflow Bubble No Code Walkthrough

Isso adicionará o usuário à contagem total, que pode então ser exibida na página da pergunta original.

Stack Overflow Bubble No Code Walkthrough

Ao criar a lógica para votos negativos (downvotes), seu workflow seguirá o mesmo processo, mas, em vez disso, removerá o usuário da lista total de quem gosta de uma postagem.

Veja também:

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/how-to-build-stack-overflow-clone-without-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