Aprenda como criar um blog tipo Medium, usando o editor visual web do Bubble.
Se você adora ler conteúdo escrito, provavelmente está familiarizado com o Medium. A comunidade de blogs da plataforma hospeda um dos maiores repositórios do mundo de artigos escritos. Embora o Medium ofereça uma maneira perfeita de criar e distribuir conteúdo, você pode estar interessado em criar seu próprio site de textos à medida que desenvolve sua própria comunidade.
No passado, criar software exigia experiência em desenvolvimento ou acesso a uma equipe de engenharia. Felizmente, nunca foi tão fácil começar com a ferramenta de desenvolvimento sem código do Bubble. Usamos o Bubble para criar lojas virtuais, aplicativos móveis e até redes sociais.
Ao longo deste post, descreveremos o processo de uso do Bubble para criar um site como o Medium para sua própria plataforma de blog, tudo sem precisar programar.
Esteja você procurando criar site de blogs tipo Medium ou apenas interessado em utilizar alguns dos principais recursos, este guia compartilhará uma visão interna da criação da lógica subjacente para seu MVP.
As etapas para criar blog tipo Medium sem código incluem:
Índice
Iniciando a criação de um Medium sem programar
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Com a conta Bubble você pode acompanhar enquanto criamos nosso site juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Também será benéfico se você entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso guia sobre como Criar um site tipo Quora usado o Bubble.
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do blog 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ê estiver replicando uma versão do Medium, algumas das páginas principais que você deseja incluir são:
- Página de upload – Um portal onde os usuários podem criar e publicar posts
- Página inicial – Exibindo uma lista de todas as histórias que foram publicadas
- Página do post – Uma página para hospedar cada história individual
- Perfil do usuário – Uma página para hospedar o perfil de cada usuário
Um dos principais recursos do Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.
No caso de seu blog tipo Medium, você só precisará criar uma página para hospedar seus posts individuais. Podemos, então, criar a lógica necessária para exibir apenas a história relevante em cada página quando for necessário (abordaremos isso com mais detalhes em breve).
Configure seu banco de dados
Depois de mapear a exibição de seu blog, você pode se concentrar na criação dos campos de dados necessários para alimentar seu site. Contaremos com esses campos para conectar os workflows por trás de seu blog.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao criar um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para aumentar a velocidade de seu site.
Por exemplo, vamos criar dois tipos de dados separados para cada nova post. Um tipo de dados incluirá os detalhes básicos de uma post (incluindo o nome, a imagem e o trecho da post), enquanto o outro tipo de dados incluirá arquivos de conteúdo maiores, como o próprio post completo.
Ao criá-los como tipos de dados separados, podemos carregar apenas as informações necessárias quando preciso, reduzindo a quantidade de conteúdo que o editor do Bubble precisará renderizar.
Ao criar usando o Medium como MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Nome
- Bio
- Foto do perfil
- Posts Publicados – Nota: Criar um campo baseado em lista em um tipo de dados separado permite que você integre perfeitamente todos os seus campos de dados relevantes sem ter que criar campos adicionais
- Seguidores – Lista de usuários
- Seguindo – Lista de usuários
Tipo de dados: Post
Campos:
- Título
- Imagem destacada
- Trecho
- Categoria
- Conteúdo – Conteúdo do post
- Comentários – Lista de comentários
- Claps – Lista de claps (sistema de ‘likes’)
Tipo de dados: Conteúdo do post
Campos:
- Conteúdo
Tipo de dados: Comentário
Campos:
- Conteúdo
- Post – post
Tipo de dados: Clap
Campos:
- Post
Workflow necessários para um blog tipo Medium no code
Agora que você estruturou o design e o banco de dados de seu site, é hora de começar a juntar tudo e tornando seu blog de textos tipo Medium 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”, “fazer uma alteração no banco de dados”, etc.)
Criar um post
O primeiro recurso que criaremos é uma função para os usuários criarem e enviarem histórias para seu blog.
Na página de upload, começaremos adicionando uma variedade de elementos de input que serão usados para adicionar dados em nosso banco de dados. Esses campos podem incluir entradas de texto, um uploader de imagem e uma seleção suspensa.
Nota: Ao criar um blog que requer que o texto seja marcado ou formatado, recomendamos o uso do plugin rich text editor. Este elemento de entrada permitirá que os usuários personalizem o estilo do conteúdo que adicionam a este campo.
Uma vez que um usuário adiciona os detalhes relevantes em cada input, ele clica no botão publicar para criar uma nova história.
Este clique de botão será a ação necessária para acionar seu workflow.
Em seguida, você irá criar um novo item em seu banco de dados, com o tipo de dados definido como post.
Precisamos então começar a adicionar os campos relevantes em nosso banco de dados. Mapeie cada um dos elementos de input na página com seus campos correspondentes em seu banco de dados.
Começaremos criando o tipo conteúdo do post, em seguida, vincularemos isso ao próprio post.
Depois, adicionaremos uma etapa extra neste workflow, criando um novo item no banco de dados – só que desta vez criaremos o post em si.
Ao vincular o conteúdo do post inicial que criamos dentro deste post, é possível integrar perfeitamente esses dados em sua plataforma.
Cada vez que este workflow é acionado, um novo post será criado.
Exibir conteúdo dinâmico em um feed
Assim que os usuários começarem a publicar conteúdo na plataforma, precisaremos começar a criar a lógica em sua página inicial que exibe cada história 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, você precisará primeiro vincular o grupo a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo de conteúdo como posts.
Você também precisará definir a fonte de dados como uma lista de todos os posts de seu banco de dados.
Nota: Se desejar segmentar histórias por categorias únicas, é possível adicionar restrições adicionais à fonte de dados de um grupo repetidor.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido na grade. Simplesmente mapeie a linha superior com o conteúdo relevante que você gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Enviar dados entre páginas
Dentro de um grupo repetidor, também é 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 Medium exibe apenas uma prévia de cada post, incluindo um trecho e o criador. No entanto, ele não exibe o conteúdo completo de uma post até que um usuário clique para ir dentro da página do post.
Para exibir este conteúdo, usaremos nosso editor de workflow para enviar dados entre as páginas.
Você precisará começar criando um workflow que redirecione um usuário para a página do post quando a imagem do post for clicada.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página.
Daqui, selecione o tipo de página de destino para ser a página do post.
Então você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual o post único será exibido. Os dados que você precisa exibir são os do post da célula atual.
Crie uma função de pesquisa para posts
Outra maneira eficaz de navegar entre os posts é criando uma função de pesquisa em nossa página inicial. Isso permitirá que os usuários descubram novas posts por seus títulos.
Ao adicionar um elemento de pesquisa em sua página inicial, ele irá indexar todos os posts atuais em seu banco de dados.
Ao configurar o campo de pesquisa como ‘título do post’‘ na barra de pesquisa, ele vai indexar todas as entradas e até oferecerá sugestões de pesquisa à medida que forem digitadas.
Para enviar um usuário à página do post relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de um input é alterado.
Em seguida, você criará um evento de navegação, definindo a página de destino como sua página do post, enviando com ela a fonte de dados do valor atual da barra de pesquisa.
Exibir conteúdo dinâmico em uma página do post
Quando um usuário é direcionado para uma página de post específica, você pode facilmente obter os dados de evento e exibir o conteúdo relevante da história.
Para criar essa função, primeiro você precisará garantir que o tipo de página de destino corresponda à propriedade de dados que você está enviando no workflow. Nesse caso, você precisará definir a página do post como uma propriedade ‘post’.
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 post único.
Dando ‘claps’ em uma história
Uma das características mais proeminentes do Medium é a capacidade de adicionar ‘claps’ às suas histórias favoritas.
Ao criar esse recurso no Bubble, você pode utilizar nossos elementos de ícone para criar um botão de ‘claps’ ou até mesmo fazer o upload de uma imagem de sua preferência.
Quando o ícone de ‘clap’ é clicado, você cria um novo workflow que cria um item no banco de dados.
O que queremos criar é uma novo ‘clap’.
Depois de criar uma novo ‘clap’, precisaremos fazer alterações na post da página atual, adicionando a ela o novo elemento ‘clap’ que criamos.
De volta à nossa página do post, precisaremos exibir uma contagem de todos os ‘claps’ criados para esta história.
Crie uma seção de comentários no Medium
Para ajudar a impulsionar o engajamento do usuário em todo o blog, adicionaremos uma função para oferecer suporte a comentários em cada página do post.
Os comentários podem ser facilmente criados adicionando um grupo repetidor e um input de texto de várias linhas abaixo do próprio post.
Ao configurar este grupo repetidor, comece definindo o tipo de dados como comentários. Em seguida, nossa fonte de dados exibirá os comentários do post da página atual.
Ao criar um novo comentário, usaremos um input de texto simples e um botão. Quando o botão postar é clicado, isso aciona um novo workflow – criando um novo item.
O item que queremos criar é um novo comentário. Mais uma vez, você precisará combinar o elemento na página com o campo de dados do comentário necessário.
Sempre que um novo comentário é criado, o grupo repetidor nesta página será atualizado automaticamente com o novo conteúdo.
Exibir perfis de usuários
Exibir páginas de perfil individuais é um recurso essencial para qualquer plataforma baseada em comunidade. No Medium, os perfis de usuário permitem que você aprenda mais sobre os criadores individuais. Os perfis são usados para exibir uma lista de todas as histórias que um indivíduo publicou.
Ao criar uma página de perfil separada do usuário, podemos começar a exibir dinamicamente os dados necessários para cada usuário na plataforma.
Comece configurando este tipo de página como ‘usuário’.
Em seguida, adicione os elementos dinâmicos à página que deseja exibir para cada usuário.
Finalmente, adicionaremos um grupo repetidor a esta página, permitindo-nos mostrar uma lista dos posts que um usuário publicou.
A fonte de dados deste grupo repetidor precisará pesquisar pelos post publicados, do usuário da página atual.
Seguir um usuário
O recurso central final que criaremos para nosso MVP é a capacidade de seguir outro usuário na plataforma.
Na página de perfil do usuário, adicionaremos um botão para seguir. Quando este botão é clicado, criaremos um novo workflow que faz alterações em um item no banco de dados.
O item que queremos mudar é o usuário atual, adicionando o usuário da página atual a lista de usuários seguindo.
Em seguida, também precisaremos atualizar a lista de seguidores do usuário da página atual (Current Page User), adicionando o usuário atual (Current User).
Recursos adicionais para um Medium no code
Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a ficar criativo com as experiências criadas com seu blog tipo Medium.
Adicionalmente, você pode:
- Criar uma função para marcar posts
- Criar assinaturas pagas para posts
- Criar notificações, alertando os usuários quando um criador que eles seguem publicar um novo post
- Uma função para programar posts a serem publicados
Saiba mais sobre o Movimento Sem Codar com nossos tutoriais gratuitos:
- Buscador Gratuito de Interesses Secretos do Facebook – Como usar
- Por dentro do aplicativo de um GIGANTE do MARKETING DIGITAL
- Tutorial Bubble.io para Iniciantes – Como criar um Aplicativo de Agendamento
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-medium-blog-no-code/
