Como criar um blog tipo Medium (sem programar)

Aprenda como criar um blog tipo Medium, usando o editor visual web do Bubble.

Criar um blog Medium Sem Codar

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:

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
Criar um blog Medium Sem Codar

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.

Criar um blog Medium com o Bubble - Workflows

Em seguida, você irá criar um novo item em seu banco de dados, com o tipo de dados definido como post.

Criar um blog Medium com o Bubble - Workflows

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.

Criar um blog Medium com o Bubble - Workflows

Depois, adicionaremos uma etapa extra neste workflow, criando um novo item no banco de dados – só que desta vez criaremos o post em si.

Criar um blog Medium com o Bubble - Workflows

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.

Workflow for Bubble Medium clone post page

Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página.

Workflow tutorial bubble blog app

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’.

Bubble Dynamic Post in Medium Clone App Tutorial

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.

Bubble Dynamic Post Image in Medium Clone App Tutorial

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.

Bubble No Code Medium Clone Clap Tutorial

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’.

Bubble No Code Medium Clone Clap Workflow Tutorial

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.

Bubble No Code Medium Clone Create Clap Tutorial

De volta à nossa página do post, precisaremos exibir uma contagem de todos os ‘claps’ criados para esta história.

Bubble No Code Medium Clone Clap Count Tutorial

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.

Bubble Comments Section Blog Tutorial

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.

Bubble No Code Medium Clone Comments Section Workflow

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’.

Bubble No Code Medium Clone User Profile Display Walkthrough

Em seguida, adicione os elementos dinâmicos à página que deseja exibir para cada usuário.

Bubble No Code Medium Clone User Profile Image Tutorial

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.

Bubble No Code Medium Clone User Posts Dynamic Display

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.

Bubble how to build a Follow button tutorial

O item que queremos mudar é o usuário atual, adicionando o usuário da página atual a lista de usuários seguindo.

Bubble how to create Follow button workflow tutorial

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).

Bubble Build a Blog Platform Follow Button No Code

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:

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/

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

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

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente