Aprenda como criar um fórum usando o Stack Overflow como MVP, com o editor visual web do Bubble.
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:
Índice
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
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
Tipo de dados: Tags
Campo:
- Nome da categoria da tag – criado como um campo com várias entradas
Tipo de dados: Respostas
Campos:
- Pergunta original
- Conteúdo da resposta – Vinculado à pergunta original
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.
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.
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.
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.
Isso adicionará o usuário à contagem total, que pode então ser exibida na página da pergunta original.
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:
- Como criar uma comunidade de design do zero tipo Dribbble (sem programar)
- Bubble.io: Sobre Privacidade e Segurança de Dados
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/
