Como criar um site de perguntas e respostas tipo Quora (em plataforma no code)

Aprenda como fazer uma site de perguntas e respostas tipo Quora, usando o editor web no code do Bubble.

Criar um site tipo quora sem programar

Criadores de todas as origens estão recorrendo ao Bubble para criar softwares poderosos com nosso conjunto de ferramentas no code. O editor visual do Bubble simplifica o processo de criação e desenvolvimento de aplicativos de todos os tipos. Os clientes têm usado o Bubble para criar lojas virtuais, diretórios e até redes sociais.

Esta postagem irá percorrer o processo de usar o Bubble para criar uma versão ‘white-label’ do Quora. Quora é uma plataforma de perguntas e respostas renomada onde os usuários podem enviar perguntas ou responder às enviadas pela comunidade.

Se você está procurando criar sua própria comunidade de perguntas e respostas como o Quora no code, ou apenas interessado em utilizar alguns dos principais recursos da plataforma, este guia compartilhará como começar a criar a lógica subjacente para seu site.

Ao longo deste guia, vamos destacar como criar os seguintes recursos principais do Quora:

  • Perfis de usuário – exibindo as informações de um usuário e listando sua atividade recente
  • Uma função para que os usuários enviem perguntas ao site
  • Função de pesquisa – A capacidade dos usuários de pesquisar perguntas específicas com base em uma consulta
  • A capacidade dos membros da comunidade enviarem respostas para cada pergunta

As etapas para criar um site de perguntas e respostas tipo o Quora com nossa ferramenta no code incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Então poderemos começar a criar nosso site tipo Quora sem precisar programar.

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

Podemos 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 site. Se você estiver se baseando na plataforma Quora, algumas das páginas principais que desejará incluir são:

  • Página inicial – Incluindo uma barra de pesquisa, um grupo repetido de perguntas da comunidade, e quaisquer menus de navegação relevantes
  • Perfis de usuário – Uma página onde seus usuários podem acessar e atualizar suas informações
  • Uma página onde os usuários podem enviar perguntas
  • Uma página para hospedar cada pergunta única – Isso incluirá a pergunta em si, 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. 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 de perguntas e respostas no code, você só precisará criar 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 seu banco de dados

Após mapear a exibição do site, podemos nos concentrar na criação dos campos de dados necessários. Contaremos com esses campos para conectar a lógica por trás de seu site.

Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de alto nível, em seguida, adicione os campos necessários em cada categoria.

Ao replicar o Quora como um MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos:

  • Nome
  • Bio
  • Foto
  • Credenciais / título
  • Perguntas enviadas – Nota: Criando uma lista baseada em um tipo de dados geral permitirá que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar valores de campo adicionais.
  • Respostas enviadas
Criar um site tipo quora sem programar

Tipo de dados: Perguntas Enviadas

Campos:

  • Título da pergunta
  • Conteúdo da pergunta
  • Categoria
  • Respostas
Criar um site tipo quora sem programar

Tipo de dados: Respostas

Campos:

  • Pergunta original
  • Conteúdo da resposta

Nota: O Bubble puxará automaticamente os dados sobre o criador de quaisquer novos ‘itens’ criados em seu banco de dados. Isso permitirá que você crie perfeitamente sobre os dados específicos de um criador, como seu nome, foto de perfil, etc.

Criar um site tipo quora sem programar

Criar a lógica por trás de um site tipo Quora

Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo e fazer 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 conta de usuário

Vamos começar fazendo a lógica que permite a um usuário criar primeiro um novo perfil. No Bubble, tornamos esse processo o mais intuitivo possível.

Depois de criar uma página de login dedicada, é possível reutilizar elementos de nossa biblioteca existente. No menu suspenso da página, selecione o elemento de login / sign-up (login / cadastro).

Bubble login signup element

Você pode copiar facilmente o modelo de elemento desta página para a sua própria página de cadastro de conta.

Usando os inputs fornecidos, você pode criar um workflow que é acionado quando um usuário clica no botão cadastrar.

Bubble Signup Edit Workflow

Em seu editor de workflow, você selecionará cadastrar o usuário.

Bubble Signup Action Walkthrough

A partir daqui, você combinará os inputs dos elementos na página com os campos necessários para criar um perfil de usuário.

Bubble sign user up action inputs tutorial

Assim, um novo perfil de usuário é adicionado à sua plataforma. Você pode até optar por lembrar o usuário e enviar a ele um e-mail de confirmação automático.

Atualizando detalhes do perfil do usuário

Depois que um usuário criou uma nova conta, ele também pode precisar atualizar seus detalhes completos, incluindo: seu nome, foto de perfil e biografia.

Ao criar uma página dedicada à configurações de perfil, podemos usar inputs adicionais para adicionar esses dados a um perfil de usuário.

Depois que um usuário adiciona seus detalhes relevantes em cada entrada, ele clica no botão ‘enviar’ para atualizar esses dados.

Criar site de perguntas e respostas Quora Sem Codar

Usando o editor de workflow, você pode selecionar alterar um item dentro do seu banco de dados após esta ação.

Criar site de perguntas e respostas Quora Sem Codar

Neste caso, você desejará fazer alterações nas entradas relevantes em seu banco de dados. Comece a mapear cada campo de dados que você gostaria de alterar em relação a cada um dos inputs relevantes.

Criar site de perguntas e respostas Quora Sem Codar

Agora, quando o botão ‘atualizar perfil’ for pressionado, ele atualizará todos os campos relevantes com quaisquer novos valores.

Além disso, agora você pode exibir esses dados no perfil de um usuário usando elementos que correspondem aos campos de dados fornecidos.

Como criar uma pergunta em um site tipo Quora?

Um dos principais recursos do Quora é a capacidade dos usuários de criar e publicar novas perguntas. O workflow que alimenta as postagens geradas pelo usuário também seguirá uma estrutura familiar à função de edição de perfil, só que desta vez, você desejará criar um novo item em seu banco de dados.

Na página de envio de perguntas, você acionará um workflow quando o ‘enviar’ for pressionado.

Bubble No Code Quora Clone Submit Button Workflow

Em seguida, você vai criar um novo item em seu banco de dados, com o tipo de dados definido como ‘perguntas enviadas’.

Submit Button Bubble Actions

Mais uma vez, você combinará os campos relevantes necessários para estruturar sua postagem.

Bubble Questions Submit Button Values

Exibir conteúdo dinâmico em um feed

Após começar o envios de perguntas, podemos escrever a lógica na página inicial para exibi-las 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 um grupo repetidor, precisaremos vincular o elemento a um tipo de dados no banco de dados. Nesse caso, você classificará o tipo de conteúdo como ‘perguntas enviadas’.

Você também precisará definir a fonte de dados como uma lista de todas as perguntas enviadas do seu banco de dados.

Criar site tipo Quora - conteúdo dinâmico

Mapeie a coluna superior com o conteúdo relevante, e o grupo repetidor preencha as colunas restantes com base nos dados existentes.

Criar site tipo Quora - conteúdo dinâmico

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

Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. A página inicial do Quora exibe apenas um feed de perguntas, incluindo sua descrição e o criador. No entanto, ele não exibe a lista completa de respostas até que um usuário clique para acessar a página completa. Esse conteúdo adicional precisará ser hospedado em sua ‘página de perguntas’ para cada envio único.

Para realizar esse evento, precisaremos criar um workflow que redirecione o usuário para a página da pergunta quando o título da pergunta for clicado.

Criar site tipo Quora sem programar

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, você precisará 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élulas atuais (Current cell’s Questions).

Bubble Quora No Code Question Workflow

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

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

Para criar essa função, primeiro você precisará garantir que o tipo da página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a ‘página de respostas’ como uma propriedade de perguntas (postadas).

Bubble Quora No Code Question Answer Workflow

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

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

Bubble Quora No Code Question Answer Workflow

Enviando e exibindo respostas

Na página que exibe a pergunta completa com as respostas existentes, você também precisará adicionar um campo extra que permite aos usuários publicar novos envios.

Bubble Quora No Code Submit Answer Workflow

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 atual pergunta em questão.

Bubble Quora No Code Create Answer Workflow

Em sua página de resposta, tanto a lista de respostas quanto os inputs para enviar uma resposta serão empilhados uns sobre os outros. Quando um usuário envia sua própria resposta, esse grupo repetidor será atualizado em tempo real para corresponder ao seu banco de dados.

Criar a função de pesquisa em um site tipo Quora

Para permitir que os usuários pesquisem e cliquem em uma questão específica, você pode utilizar um elemento de pesquisa em sua página inicial que indexará todas as questões atuais em seu banco de dados.

Ao selecionar o campo de pesquisa como ‘título da pergunta’, ele indexará todas as entradas e até oferecerá sugestões de pesquisa à medida que forem digitadas.

Bubble Quora No Code Search Answer Workflow

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

Como criar um site tipo Quora Workflow

Após isso você criará um evento de navegação, definindo a página de destino como sua página de resposta, e enviando a fonte de dados do valor atual da caixa de pesquisa.

Como criar um site tipo Quora Workflow

Recursos adicionais para criar um site tipo Quora

Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, podemos adicionar novas funcionalidades ao seu site de perguntas e repostas no code.

Adicionalmente, você pode:

  • Incluir campos de conteúdo adicionais nas perguntas – fotos e vídeos
  • Criar grupos de interesses por tópicos
  • Votar positivamente e votar negativamente para respostas (upvote e downvote)

Links:

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-quora-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