Como criar um blog tipo Medium (sem programar)

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.

Nota: Ao iniciar seu projeto, você pode escolher entre criar um protótipo de design do blog ou criar os campos necessários no banco de dados. Se você estiver replicando uma versão do Medium, algumas das páginas principais a 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 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.

---

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.

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.

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, defina 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.

---

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.

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.

Enviar dados entre páginas (continuidade)

Daqui, selecione o tipo de página de destino para ser a página do post e envie dados adicionais para indicar qual post exato exibir.

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 obter os dados de evento e exibir o conteúdo relevante da história.

Para criar essa função, primeiro garanta que o tipo de página de destino corresponda à propriedade de dados que você está enviando no workflow. Defina a página do post como uma propriedade ‘post’.

Agora você pode começar a exibir conteúdo dinâmico nos campos da página do post.

Dando ‘claps’ em uma história

Um dos recursos proeminentes do Medium é a capacidade de adicionar claps às histórias favoritas.

Ao criar esse recurso no Bubble, utilize nossos elementos de ícone para criar um botão de ‘claps’ ou até mesmo 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.

Depois de criar um novo ‘clap’, precisaremos atualizar a página do post para exibir a contagem atual de claps dessa história.

Crie uma seção de comentários no Medium

Para engajar os usuários, adicione comentários em cada página de post. Use um grupo repetidor e um input de texto de várias linhas abaixo do post.

Configure o grupo repetidor com o tipo de dados ‘comentários’ e a fonte de dados como os comentários do post da página atual.

Ao postar um comentário, acione um novo workflow — criando um novo item de comentário. O grupo repetidor na página do post será atualizado automaticamente.

Exibir perfis de usuários

Exibir páginas de perfil individuais é essencial para comunidades. Crie uma página de perfil separada para exibir dinamicamente os dados de cada usuário, incluindo a lista de posts que eles publicaram.

Adicione elementos dinâmicos na página de perfil e um grupo repetidor para mostrar os posts do usuário atual.

Seguir um usuário

O recurso final é a capacidade de seguir outros usuários. Na página de perfil, adicione um botão para seguir. Ao clicar, crie um workflow que altera o item do usuário atual, adicionando o usuário da página atual à lista de seguindo.

---

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/