Aprenda a criar uma rede social igual o Facebook no code, usando o editor visual web do Bubble.
Você não precisa mais ser um estudante universitário hackeando em seu dormitório para criar uma rede social. Este tutorial fornecerá um guia sobre como criar um site tipo Facebook usando o Bubble sem precisar programar.
Usando o Bubble e este guia, você poderá personalizar o aplicativo como quiser. Portanto, ao contrário de usar um modelo de ‘white-label’ do Facebook, você pode criar qualquer recurso que possa imaginar. Você poderá lançar este site e ajudar a criar uma comunidade rapidamente (o status de unicórnio não é garantido).
Os passos para criar uma rede social como o Facebook no code incluem:
Índice
O que é Bubble?
Bubble é uma ferramenta que capacita usuários a projetar, desenvolver e hospedar aplicativos web totalmente funcionais sem escrever código. Os aplicativos desenvolvidos no Bubble podem variar de protótipos simples a plataformas e lojas virtuais complexas. O Bubble substitui completamente as linguagens de programação e estruturas tradicionalmente usadas para desenvolvimento web. O poderoso editor de apontar e clicar do Bubble oferece aos usuários total poder e capacidade de projetar aplicativos e workflows totalmente personalizáveis, lidando com a infraestrutura, DevOps e escalonando automaticamente.
Iniciando sua rede social tipo Facebook
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Isso é tudo que você precisa para começar. Ao contrário da codificação tradicional, onde você precisa fazer malabarismos com o front-end, back-end, banco de dados, servidor de hospedagem, etc. O Bubble é uma ferramenta que faz tudo.
Faça seu cadastro gratuito no Bubble.
Como as pessoas começam a criar seus aplicativos?
A resposta curta é: tudo se resume à preferência pessoal. Alguns Bubblers gostam de começar projetando suas páginas de forma que possam visualizar como são as interações do usuário e, a seguir, conectam suas páginas ao banco de dados e aos workflows. Outros Bubblers gostam de começar definindo o banco de dados de seus aplicativos, o que influencia a forma como eles pensam sobre o design da página e os workflows. Não existe resposta certa, então experimente diferentes abordagens para ver qual se encaixa melhor com seu estilo de pensamento.
Criar as páginas principais da sua rede social
Começaremos pensando nas páginas principais que um site como o Facebook precisa, no mínimo. Essa será a interface principal que seus usuários verão. Você pode desejar um design com muitos ‘sinos e assobios’ ou algo tão simples como o Craigslist. O Bubble permite que você defina layouts de páginas web com pixels perfeitos.
Um dos principais recursos 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 do banco de dados. Em nosso caso, você só precisa criar uma página de “perfil” para o usuário genérico e configurá-la de forma que a página espere ser informada sobre exatamente quais informações do usuário exibir.
Para fazer um MVP, criaremos estas páginas do aplicativo:
- Uma pagina inicial (você pode usar a página de “índice” que todo aplicativo Bubble tem por padrão) que mostra um feed das atualizações mais recentes de outros usuários, se o usuário está conectado.
- Uma página de login; se o usuário estiver desconectado, a mesma página pode ocultar as seções de login e, em vez disso, mostrar uma mensagem geral “Bem-vindo! Faça login”.
- Uma página de perfil que mostra informações sobre um usuário e todas as postagens de sua autoria.
- Uma página do grupo que mostra os membros do grupo e quaisquer postagens desses membros, com uma configuração para restringi-la de forma que apenas os membros do grupo possam ver as postagens, se desejado.
Como o banco de dados Bubble é diferente dos bancos de dados normais?
O Bubble abstraiu grande parte da dificuldade técnica em interagir com bancos de dados, porém muitos conceitos continuam lá. Em bancos de dados, você tem “tabelas;” no Bubble, você tem uma tabela para cada “tipo de dados“. Os tipos de dados do Bubble têm campos, representados como colunas, exatamente como você esperaria, e você define que tipo de dados um campo possui, como texto, número ou sim / não (binário). Uma diferença é com associações de banco de dados; o Bubble simplifica isso permitindo que você defina um tipo de campo como um tipo de dados no site. Se isso não faz sentido para você agora, não se preocupe – fica mais claro depois que você vê um exemplo.
Observe que alguns usuários acham mais fácil começar com a configuração de seus tipos de dados, que é essencialmente configurar o banco de dados. Cada aplicativo Bubble vem com um banco de dados embutido que você pode configurar como quiser. A escolha de SQL ou NoSQL, Postgres ou MySQL (ou qualquer outro acrônimo de banco de dados) é tão anos 2000; O Bubble simplifica tudo isso para você.
Tipos de dados principais do Facebook no code
Queremos um tipo de dados para cada tipo de entidade que queremos no aplicativo. Cada um desses tipos de dados deve ter campos apropriados para esse tipo de entidade. À medida que continuamos criando as páginas, os elementos na página se basearão em diferentes campos de diferentes tipos de dados.
Em sua essência, nosso site de rede social terá estes tipos de dados:
- Tipo de dados: Usuário – este vem por padrão nos apps do Bubble.
Campos: e mail (incluído por padrão), nome, aniversário, cidade natal, foto de perfil, grupo (ou organização, escola, etc. dependendo que como você nomeia o campo; veja abaixo)
- Tipo de dados : Post – mensagens que os Usuários escrevem, para serem lidas por outros Usuários
Campos: criador (tipo de campo Usuário; incluído por padrão), data de criação (incluída por padrão), mensagem
- Tipo de dados: Grupo – alguma categoria que o Usuário pertence (para o Facebook, isso pode representar uma escola, uma empresa, pode representar um time)
Campos: nome, privado (tipo do campo sim / não)
Estes são os campos mínimos que precisamos para fazer o aplicativo funcionar. Conforme criamos mais recursos, provavelmente adicionaremos mais tipos de dados e campos.
Como você cria recursos no Bubble?
Junto com o design da página e o banco de dados integrado, um recurso central do Bubble igualmente importante são os “workflows“. Os workflows permitem que você defina partes lógicas na forma de “Quando X acontecer, execute as ações A, B, C, etc.” Na realidade, as declarações “se X, então A, B, C” são os blocos de criação básicos para a maioria dos recursos interessantes em sites – elas conectam o que os usuários veem na página com o banco de dados nos bastidores.
Recursos Básicos para um Facebook no Bubble
Com as páginas e o banco de dados configurado, vamos conectá-los no site. No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando um “evento” acontece (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.)
Para criar um clone do Facebook ou site de rede social semelhante, você precisará criar os seguintes recursos; incluímos sugestões sobre ações de workflow relevantes e referências adicionais a serem consultadas:
- Cadastro do usuário (Signup): Após criar um elemento de botão com o texto “Cadastre-se”, clique em “Iniciar / Editar workflow”. Em seguida, selecione uma nova ação: Conta > “Cadastrar o usuário” para usar a inscrição integrada do Bubble.
- Você também pode selecionar Conta > “Cadastro / login com uma rede social” para login do Google ou Facebook (“OAuth”).
- Páginas de perfil para cada Usuário: Navegação > “Ir para a página …” com o campo “Dados a enviar” preenchido.
- Permitindo que os usuários postem mensagens em seus murais: Dados (itens)> “Criar um novo item”
- Um feed de postagens de todos / alguns Usuários: Faremos isso sem um workflow, criando um grupo repetidor na página e definindo seu “Tipo de conteúdo” como “Posts” e preenchendo a “Fonte de dados”
- Mostrando o feed dos usuários conectados e uma mensagem de boas-vindas genérica para usuários desconectados. Faremos isso sem um workflow, criando elementos para ambos os públicos na página e mostrando / ocultando condicionalmente a opção apropriada, dependendo se o visualizador está conectado.
- Grupos aos quais os Usuários podem pertencer, com um feed de todas as mensagens postadas por esse Grupo: Navegação > “Ir para a página…” com o campo “Dados a enviar” preenchido para criar a página do Grupo.
Recursos adicionais para um Facebook Sem Codar
Aqui estão algumas idéias divertidas para próximos recursos. Esses não são apenas recursos que seus usuários irão adorar, mas criá-los proporcionará mais prática no design de páginas, na estruturação do banco de dados e na criação de workflows.
- Capacidade dos usuários seguirem um ao outro,e então possivelmente restringindo quem pode ver o que, baseado nos relacionamentos do seguidor
- Um painel de administração onde o proprietário do site pode gerenciar usuários, moderar mensagens, etc.
- Permitir aos usuários mudar a privacidade de seus posts para “todos” ou ” apenas seguidores”
- Permitir que os usuários criem novos Grupos próprios
Idéias para como usar um tema de rede social
Aqui estão alguns diferentes usos para um modelo de site de mídia social:
- Um aplicativo para uma comunidade geográfica específica se conectar
- Um espaço online para membros de uma determinada indústria fazerem network
- Um hub para usuários com um interesse comum se conhecerem
- Um portal interno para funcionários de uma mesma empresa interagirem sobre o trabalho
Quer sabe mais sobre criar sites e aplicativos sem precisar programar? Veja também:
- Login Social Facebook e Google (TUTORIAL NO CODE)
- [TUTORIAL] Como criar um buscador de INTERESSES SECRETOS do Facebook Ads (de graça e sem codar)
- Buscador Gratuito de Interesses Secretos do Facebook – Como usar
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-facebook-clone-no-code/
