Aprenda como fazer uma site de perguntas e respostas tipo Quora, usando o editor web no code do Bubble.
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:
Índice
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
Tipo de dados: Perguntas Enviadas
Campos:
- Título da pergunta
- Conteúdo da pergunta
- Categoria
- Respostas
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 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).
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.
Em seu editor de workflow, você selecionará cadastrar o usuário.
A partir daqui, você combinará os inputs dos elementos na página com os campos necessários para criar um perfil de usuário.
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.
Usando o editor de workflow, você pode selecionar alterar um item dentro do seu banco de dados após esta ação.
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.
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.
Em seguida, você vai criar um novo item em seu banco de dados, com o tipo de dados definido como ‘perguntas enviadas’.
Mais uma vez, você combinará os campos relevantes necessários para estruturar sua postagem.
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.
Mapeie a coluna superior com o conteúdo relevante, e o grupo repetidor preencha as colunas restantes com base nos dados existentes.
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.
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).
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).
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.
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.
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.
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.
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.
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.
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:
- Como criar uma comunidade de design do zero tipo Dribbble (sem programar)
- Aprenda a criar um site de anúncios como a Craigslist usando ferramentas no code
- Os 5 tipos de Aplicativos e Sites Web e Mobile
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/