Aprenda a criar um site tipo enciclopédia virtual como a Wikipédia, usando o editor visual web do Bubble.
Com uma abundância de artigos de colaboração coletiva sobre todos os tópicos que você pode imaginar, a Wikipedia é um dos repositórios de informações mais populares da Internet. Neste artigo, criaremos uma alternativa à Wikipédia sem escrever uma única linha de código. Usando a plataforma de programação visual do Bubble, podemos criar um software poderoso para alcançar usuários em todo o mundo.
Este guia ajudará a entender as estruturas de dados básicas, workflows e recursos para criar sua própria Wikipédia.
As etapas para criar um site tipo Wikipédia sem programar incluem:
Índice
Fazendo seu cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Siga o link para começar, então podemos criar nosso site juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Iniciando seu projeto
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 do Bubble para moldar a interface de usuário do nosso site. Se você está replicando uma versão da Wikipedia, algumas das páginas principais que vai querer incluir são:
- Página de registro: Onde os usuários podem se cadastrar para se tornarem contribuidores
- Página inicial: Permitindo que os usuários comecem a pesquisar um tópico
- Página de contribuição: Um portal onde os usuários podem criar novas contribuições para o repositório de conhecimento
- Página do artigo: Exibindo o conteúdo completo de cada tópico exclusivo
- Página de edição: onde os usuários podem fazer alterações nos artigos existentes
Um recurso importante no Bubble é a capacidade de enviar dados entre as páginas. Permitindo criar uma versão genérica da página e depois exibir dinamicamente o conteúdo relevante do banco de dados quando necessário.
No caso do seu site tipo Wikipédia, você só precisará criar uma página para hospedar seus artigos. Podemos então criar a lógica necessária para exibir apenas o conteúdo relevante em cada página quando for necessário.
Configure seu banco de dados
Após mapear a exibição do site, podemos nos concentrar na criação dos campos de dados necessários para alimentar sua Wikipédia. Contaremos com esses campos para conectar os workflows por trás de seu site.
Ao criar um banco de dados, você tem uma tabela para cada “tipo de dados”. Dentro desses tipos de dados, você pode listar campos de dados únicos que são representados como colunas e podem ser definidos como propriedades diferentes, por exemplo, imagem, texto, números, etc.
Nota: Ao criar um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para melhorar a velocidade do aplicativo.
Por exemplo, criaremos dois tipos de dados separados para cada artigo em nosso site. Um tipo de dados incluirá os detalhes básicos de um artigo (incluindo o título, a imagem de destaque e o editor), enquanto o outro tipo de dados incluirá arquivos de conteúdo maiores, como o texto do próprio artigo completo.
Criando-os como tipos de dados separados nos permite carregar apenas as informações necessárias quando são precisas, reduzindo a quantidade de conteúdo que o editor do Bubble precisará renderizar.
Tipos de dados e campos – Criando um site como a Wikipédia
Ao criar a Wikipédia como um MVP, precisaremos criar os seguintes tipos e campos de dados:
Tipo de dados:
Campos:
- Nome de usuário
- Fotos
- Artigos publicados – Lista de artigos. Nota: Criar um campo baseado em lista em um tipo de dados separado permite a integração perfeitamenta todos os campos de dados relevantes.
Tipo de dados: Artigo
Campos:
- Título do tópico
- Foto
- Conteúdo – Conteúdo do artigo
Tipo de dados: Conteúdo do artigo
Campos:
- Conteúdo principal
- Histórico
- Referências
Criando workflows para uma enciclopédia online
Com o design e o banco de dados estruturados, podemos começar a juntar tudo e tornar sua Wikipédia 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: “inscrever o usuário”, “fazer uma alteração no banco de dados”, etc.)
Criar contas de usuário
Vamos começar criando a lógica que permite a um usuário criar primeiro um novo perfil de contribuidor. No Bubble, tornamos esse processo o mais intuitivo possível.
Depois de criar uma página de cadastro dedicada, é possível reutilizar elementos de nossa biblioteca existente. No menu suspenso da página, selecione o elemento de login / registro (Signup / Login Popup).
Você pode copiar facilmente o modelo de elemento desta página para sua própria página de registro da conta.
Usando os inputs fornecidos, criaremos um workflow que é acionado quando um usuário clica no botão crie sua conta.
Em seu editor de workflow, você selecionará cadastrar o usuário.
Daqui, você combinará os inputs dos elementos na página com os campos necessários exigidos para criar um perfil de usuário.
Após o registro da conta, adicionaremos mais uma etapa ao workflow: o campo de nome de usuário ao usuário atual.
Nesta etapa adicional, selecione para fazer alterações em um item no banco de dados.
Vamos alterar o usuário atual, adicionando ao seu perfil o input do campo de ‘nome de usuário’ na página.
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.
Como criar artigos em um site tipo Wikipédia
Um dos principais recursos da Wikipédia é a capacidade dos usuários de contribuir e publicar artigos em suas áreas de especialização. O workflow que alimenta as postagens geradas pelo usuário também seguirá uma estrutura semelhante à criação de uma conta de usuário.
Na página de criação, começaremos adicionando uma variedade de elementos de entrada que serão usados para adicionar dados em nosso banco de dados. Esses campos podem incluir inputs de texto, um uploader de imagem e um editor de rich text.
Nota: Ao criar um site que requer que o texto seja marcado ou formatado, recomendamos o uso do plugin rich text editor. Este elemento de input permitirá que os usuários personalizem o estilo do conteúdo que adicionam a este campo.
Depois que um colaborador adiciona os detalhes relevantes em cada input da página, ele clica no botão publicar para criar um novo artigo.
Este workflow vai criar um novo item em seu banco de dados, com o tipo de dados definido como artigo.
Precisamos então começar a adicionar os campos relevantes em nosso banco de dados. Mapeie cada um dos elementos de inputs na página com seus campos correspondentes em seu banco de dados.
Começaremos criando tipo conteúdo do artigo, em seguida, vincularemos isso ao próprio artigo.
Depois, adicionaremos uma etapa adicional a este workflow, criando outro item – só que desta vez criaremos o artigo completo.
Ao vincular o conteúdo do artigo inicial ao artigo completo, é possível integrar esses dados em toda a sua plataforma.
Exibir conteúdo dinâmico na página do artigo
Depois que os usuários começarem a contribuir com conteúdo para sua plataforma, precisaremos criar uma página de artigo dedicada para exibir esse conteúdo.
Nesta página, começaremos configurando o tipo de conteúdo como um artigo. Ao classificar o tipo de 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 um artigo único.
Atualizando as contribuições em um artigo
Depois que um artigo for publicado na plataforma, precisaremos criar um recurso que permita que outros membros da comunidade contribuam à peça.
Em nossa página de artigo, adicionaremos uma opção de editar menu no cabeçalho. Como queremos que apenas membros registrados da comunidade façam alterações nos artigos, criaremos uma condição para este texto.
As condições são uma forma poderosa de definir regras para os elementos. Nesse caso, nossa condição reconhecerá quando o usuário atual não estiver conectado. Neste ponto, configuraremos o elemento para não ser visível.
A seguir, queremos criar uma nova página onde os usuários possam revisar e fazer alterações no conteúdo do artigo existente.
Para agilizar o processo, podemos duplicar página de criação existente, pois estaremos redirecionando todos os elementos usados anteriormente.
Uma vez que esta página tenha sido criada, criaremos um evento de navegação, enviando os usuários para esta página de edição quando a opção ‘editar texto’ for clicada.
Nesse workflow, também enviaremos os dados do artigo da página atual.
Em nossa página de edição, atualizaremos o tipo de página para ser um artigo, permitindo que o editor do Bubble reconheça os dados enviados por meio de nosso workflow.
Agora, podemos adicionar conteúdo inicial em nossos elementos de input, permitindo que eles exibam automaticamente a versão atual de nosso artigo dentro dos campos relevantes.
Finalmente, depois que um colaborador fizer alguma edição no conteúdo existente, criaremos um workflow que atualiza essas mudanças quando o botão de atualizar é clicado.
Este workflow irá replicar o processo inicial de criação de um artigo, só que, desta vez, faremos alterações no conteúdo do artigo da página atual.
Mais uma vez, começaremos atualizando o conteúdo do artigo e, em seguida, refletiremos essas alterações no próprio artigo.
Criar uma função para pesquisa de artigos
O recurso final que criaremos é uma página inicial com uma função de pesquisa, permitindo aos usuários descobrir artigos por seus tópicos.
Ao adicionar uma caixa de pesquisa à nossa página inicial, podemos indexar uma lista de todos os tópicos de artigos atuais em nosso banco de dados.
Simplesmente configure o campo de pesquisa como títulos de tópicos e a barra de pesquisa irá indexar todas as entradas disponíveis, até mesmo oferecendo sugestões de pesquisa à medida que são digitadas.
Para enviar um usuário à página do artigo relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de uma entrada é alterado.
Em seguida, criaremos um evento de navegação, definindo a página de destino como sua página de artigo, e enviando a fonte de dados do valor atual da caixa de pesquisa.
Criando recursos adicionais em uma enciclopédia virtual
Enfim, agora que você já está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a usar a criatividade em seu site tipo Wikipédia sem codar. Posteriormente você pode:
- Adicionar campos de conteúdo adicionais para cada artigo
- Adicionar uma lista de artigos relacionados na parte inferior da página de cada artigo
A plataforma do Bubble torna fácil o processo de criar sites e aplicativos sem saber programar. Você pode aprofundar seus conhecumentos sobre a plataforma aprendendo Como integrá-la a bancos de dados externos e sobre a Política de 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/build-wikipedia-clone-no-code/
