Como criar uma rede social tipo LinkedIn

Aprenda a criar sua rede social profissional sem precisar programar, usando o editor visual web do Bubble.

Como criar uma rede social LinkedIn sem programar

Nunca foi tão fácil começar a criar um software poderoso com o Bubble. Nossa ferramenta de programação visual torna mais fácil projetar e programar intuitivamente softwares bonitos e dinâmicos sem precisar programar. Nosso objetivo é tornar o desenvolvimento de software algo acessível a criadores de todas as origens. O Bubble pode ser usado para criar lojas virtuais, diretórios e até mesmo fóruns comunitários.

Esse post vai mostrar passo-a-passo como criar um site tipo LinkedIn, sem programar, usando o Bubble. Se você está procurando construir uma rede social profissional própria ou apenas interessado em utilizar alguns dos principais recursos do site, este guia compartilhará como começar a criar a lógica subjacente para sua rede social.

Ao longo deste guia, vamos destacar como criar os seguintes recursos principais do LinkedIn:

  • A capacidade dos usuários de criar e editar seus próprios perfis
  • Perfis de usuário – exibindo conteúdo dinâmico
  • Uma página inicial – que exibe posts dinâmicos dos usuários
  • Uma função de pesquisa para encontrar usuários pela plataforma
  • A capacidade dos usuários de publicar conteúdo na plataforma
  • A capacidade dos usuários curtirem e comentarem em posts
  • Uma função para enviar solicitações de conexão aos usuários

As etapas para criar uma rede social profissional tipo LinkedIn sem programar incluem:

Fazer cadastro gratuito no Bubble

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 app juntos.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Ao começar a criar no Bubble, você pode escolher começar a projetar a interface do usuário de seu site, ou pode se concentrar na criação dos campos necessários em seu banco de dados.

Para este passo a passo, vamos nos concentrar inicialmente nos principais recursos de design que você pode querer incluir em sua rede social. Isso pode incluir:

  • Página inicial – Incluindo uma barra de pesquisa, um grupo repetidor de posts gerados pelo usuário, e quaisquer menus de navegação relevantes
  • Perfis de usuário – Uma página onde seus usuários podem visualizar perfis e enviar solicitações de conexão
  • Página de configurações – Um portal onde os usuários acessam e atualizar suas informações de perfil pessoal

Um recurso importante do 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 no seu banco de dados.

No caso da sua rede social, você só precisará criar uma página de perfil de usuário. Então poderemos criar  a lógica necessária para exibir dados específicos de um único usuário

Configurando seu banco de dados

Depois de mapear o design de seu site, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. Contaremos com esses campos para conectar a lógica por trás de seu produto.

Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de nível superior e, em seguida, adicione os campos necessários em cada categoria.

Ao usar o LinkedIn como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados:Usuário

Campos:

  • Nome
  • Cargo
  • Foto de perfil
  • Foto de capa
  • Empresa
  • Localização
  • Bio
  • Habilidades- Nota: Se desejar que um campo exiba vários itens, opte por configurar um campo de dados como uma lista de vários itens.
  • Conexões – Nota: A criação de uma lista com base 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.
Como criar uma rede social LinkedIn sem programar

Tipo de Dado: Post

Campos:

  • Conteúdo do post
  • Comentários do post – Lista de comentários
  • Curtidas do post – Lista de usuários
Como criar uma rede social LinkedIn sem programar

Tipo de dado: Comentários

Campos:

  • Conteúdo do comentário
  • Post de comentário
Como criar uma rede social LinkedIn sem programar

Workflows necessários para um LinkedIn sem programar

Agora que você estruturou o design e o banco de dados de seu site, é hora de começar a integrar tudo junto e tornar seu app 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. )

Atualizando os detalhes de perfil do usuário

Vamos começar criando a lógica que permite ao usuário atualizar as informações exibidas em seu perfil.

No Bubble, simplificamos o processo de criação de uma conta de usuário. Para obter mais informações sobre como criar um processo de cadastro, recomendamos a leitura de nossos guias de instruções anteriores. *link Quora

Ao longo deste post, vamos nos concentrar na construção de uma função que permite aos usuários atualizar seus dados de perfil relevantes, por exemplo, nome, cargo, empresa, localização, foto de perfil, habilidades, etc.

Usando inputs, você pode mapear textos livres, estruturados, ou arquivar múltiplos campos de input  que podem ser usados ​​para atualizar seu banco de dados.

Uma vez que o usuário adicionou seus detalhes relevantes em cada input, ele clica no botão enviar para atualizar esses dados.

Este clique de botão será a ação necessária para acionar seu workflow.

Usando o editor de workflow, você pode selecionar fazer alterações em algo dentro de seu banco de dados após esta ação.

Nesse caso, você vai querer fazer alterações nos campos relevantes dentro do seu banco de dados. Comece mapeando cada campo de dados que você gostaria de alterar em relação a cada um dos inputs relevantes.

Quando o botão ‘atualizar perfil’ for pressionado, ele atualizará todos os campos relevantes com qualquer dos novos valores.

Adicionalmente, agora você pode exibir esses dados em um perfil de usuário, selecionando os campos de dados relevantes que eles forneceram.

Criar um post na rede social no code

Um dos principais recursos de qualquer rede social é a capacidade dos usuários de criar e publicar conteúdo. O workflow que alimenta os posts gerados pelo usuário também seguirá uma estrutura familiar a função de edição de perfil, só que desta vez, você desejará criar um novo item  no seu banco de dados.

Na página inicial, você acionará um workflow quando o ‘botão postar for pressionado’.

Como criar uma rede social LinkedIn sem programar

Após você criará um novo item no seu banco de dados, com o tipo de dados definido como ‘post’. Mais uma vez, você combinará os campos relevantes necessários para estruturar sua postagem.

Nota: O Bubble criará automaticamente um valor com base no criador do post. Isso vai puxar todos os dados necessários, como o nome do criador e a foto do perfil.

Exibir conteúdo dinâmico em um feed

Quando estiver pronto para começar a exibir posts gerados pelo usuário em um feed na sua página inicial, é hora de descobrir o poder dos grupos repetidores.

Grupo Repetidores são um elemento que se integra ao seu banco de dados para exibir uma lista de conteúdo dinâmico.

Ao usar um grupo repetidor, basta estruturar a coluna superior com o conteúdo relevante que você gostaria de exibir. O grupo repetidor preencherá uma grade com base no conteúdo de seu banco de dados.

Comece classificando o tipo de conteúdo para seu grupo repetidor, e depois a fonte da qual ele vai extrair os dados.

Como criar uma rede social LinkedIn sem programar

Nesse caso, o tipo de conteúdo será posts, e a fonte de dados será todas as postagens dentro do banco de dados.

Com a formatação atual, este grupo repetidor exibirá uma lista de todos os posts existentes. Se desejar configurar isso para exibir apenas os posts publicadas pelas conexões de um usuário, você pode adicionar outras restrições à fonte de dados.

Como criar uma rede social LinkedIn sem programar

Essa restrição exibirá agora apenas o conteúdo daqueles que estão conectados com o usuário atual.

Depois de criar a fonte de dados para seu grupo repetidor, você pode construir o framework para o conteúdo que será exibido. Comece adicionando conteúdo dinâmico aos campos relacionados aos campos de dados de cada post.

Como criar uma rede social LinkedIn sem programar

Criando eventos no grupo repetidor do LinkedIn

Dentro de um grupo repetidor, também é possível construir eventos quando ações são tomadas dentro de cada linha individual.

Para cada post, você pode querer criar uma função que permita a alguém clicar na foto de um usuário, redirecionando-o para o perfil deste usuário.

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 como a página de perfil do usuário. Em seguida, você precisará enviar dados adicionais a esta página para que o editor saiba qual perfil de usuário exibir.

Os dados que você precisará exibir são os do post e criador das células atuais.

Como criar uma rede social LinkedIn sem programar

Exibir conteúdo dinâmico no perfil do usuário

Uma vez que começou a popular seu banco de dados com usuários, você pode agregar facilmente os dados dinâmicos de cada indivíduo e exibi-los em seu perfil único.

Ao criar uma página de perfil do usuário, comece alterando o tipo de página para a propriedade usuário.

Classificando 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 sobre um determinado usuário.

Criando curtidas e comentários

Como em todas as redes sociais, curtidas e comentários são essenciais para facilitar uma comunidade engajada. O Bubble permite que você crie facilmente a lógica para promover essas interações.

Você pode utilizar nossos elementos de ícone para criar botões de curtir ou comentar. Começar com o workflow para curtidas é um processo direto.

Quando o ícone de curtir é clicado, você vai querer alterar o campo de curtidas do post atual.

Dentro do nosso banco de dados, as curtidas em cada post são medidas por uma lista de usuários. Isso nos permite adicionar o usuário a este campo de dados, aumentando o total de usuários que curtiram o post.

Se desejar exibir o número de curtidas de um post, você pode usar condicionais para atualizar o texto curtido.

Esta condição é definida para exibir o número total de usuários que curtiram um post, apenas quando a contagem estiver acima de 0.

O processo de gerar um comentário segue um workflow semelhante, só que irá criar um novo item como os comentários são entidades de dados próprias em nosso banco de dados.

Quando o botão postar é clicado em um comentário, ele cria um novo comentário. Isso incluirá o input de comentários, e também a postagem atual no grupo repetidor.

Criar a função de pesquisa em sua rede social profissional

Para permitir que os usuários pesquisem e acessem o perfil de um usuário específico, você pode utilizar um elemento de pesquisa que exibe uma lista de todos os usuários atuais em seu banco de dados.

Ao selecionar o tipo de conteúdo como ‘usuário’ e sua fonte de dados como uma lista de usuários de seu banco de dados, todas as entradas serão exibidas.

Como criar uma rede social LinkedIn sem programar

Para enviar um usuário ao perfil relevante, navegue até o editor de workflow e crie um novo evento que é acionado quando o valor de um elemento é alterado.

Como criar uma rede social LinkedIn sem programar

Em seguida, você criará um evento de navegação, definindo a página de destino como um perfil de usuário, e enviando a fonte de dados do valor atual da caixa de pesquisa.

Como criar uma rede social LinkedIn sem programar

Isso agora o redirecionará para o perfil de usuário relevante quando o valor de pesquisa for clicado.

Enviando solicitações de conexão

Um recurso central do LinkedIn é a capacidade de enviar solicitações de conexão aos usuários e aumentar sua rede. No Bubble, você pode facilmente criar um workflow para facilitar esse envolvimento.

Seu workflow começará quando o botão ‘conectar’ for clicado no perfil de um usuário. Em seguida, você desejará alterar um item em seu banco de dados. Neste caso, você fará uma alteração no tipo de dados usuário.

Você selecionará as conexões de usuários atuais e, em seguida, adicionará o usuário da página atual a esta lista.

Você também vai precisar replicar este evento para o usuário de recebimento – adicionando o usuário atual dentro da lista de conexões de usuários recebidas.

Criar recursos adicionais para uma rede social no code

Depois de familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ficar criativo com as experiências do seu LinkedIn Sem Codar.

Adicionalmente, você pode:

  • Usar um grupo repetidor para criar um quadro de tarefas
  • Incluir formatos de conteúdo adicionais nas postagens – fotos e vídeo
  • Criar um recurso que ofereça suporte a grupos privados

Veja também:

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-linkedin-clone-no-code/

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

Inscreva-se na Comunidade Sem Codar, um curso online com mais de 300 aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble e desenvolvimento No-Code:

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