Aprenda como criar sua rede social no code grátis, usando o editor visual web do Bubble.
Após o lançamento em 2006, o Twitter se tornou a plataforma de referência para notícias e atualizações em tempo real. Os usuários podem ver tweets sobre ‘trending topics’ ou eventos internacionais, escritos por pessoas que têm algo a compartilhar, em qualquer lugar do mundo. No Bubble podemos criar uma versão ‘white-label’ do Twitter ou a estrutura básica de um serviço de microblog. Depois podemos personalizar o aplicativo com quaisquer recursos que você possa imaginar.
Índice
O que é Bubble?
O Bubble é uma ferramenta no code que capacita nossos usuários a projetar, desenvolver e hospedar aplicativos web totalmente funcionais sem escrever uma linha de código. Os aplicativos desenvolvidos no Bubble podem variar de protótipos simples a plataformas e marketplaces complexos, substituindo 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 o poder completo e a capacidade de projetar aplicativos e workflows totalmente personalizáveis; a partir daí, o Bubble lida com a infraestrutura, DevOps e dimensionamento automaticamente.
Neste guia para criar sua rede social tipo Twitter sem codar, abordaremos os seguintes tópicos:
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Clique no botão abaixo para começar, então você pode acompanhar enquanto criamos nosso aplicativo juntos.
💻
Isso te ajudará a começar a criar seu Twitter no code.
Como as pessoas começam a criar seus aplicativos?
A resposta curta é que isso se resume à preferência pessoal. Alguns Bubblers gostam de começar projetando suas páginas de modo que possam visualizar como são as interações do usuário, em seguida, conectando 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 abordagem correta, então experimente as diferentes abordagens para ver qual se encaixa melhor com seu estilo de pensamento.
Páginas principais do seu aplicativo
Começaremos pensando nas páginas principais que um site como o Twitter precisa para fornecer os recursos que seus usuários esperam de uma rede social dinâmica. Essas páginas funcionarão como a interface principal que seus usuários usarão para postar atualizações e disponibilizá-las para a comunidade da sua plataforma. Podemos criar painéis e páginas impressionantes que farão seus usuários se sentirem em casa, independentemente do background do seu design.
Um dos 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, com um design simples; a partir daí, o Bubble preencherá automaticamente os elementos da página usando esses dados. Essas informações são armazenadas no banco de dados, que não requer configuração externa. O Bubble propaga automaticamente itens como imagens, título e descrição do usuário para os grupos e elementos de texto corretos usando os dados armazenados na página. Isso significa que você não precisará criar milhares de páginas diferentes para cada perfil ou postagem.
Para criar um Twitter MVP, teremos estas páginas do aplicativo:
- Uma página 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. Dependendo das regras de privacidade usadas, podemos modificá-la com base no fato de o usuário estar conectado ou desconectado.
- Uma mensagem de login: Se o usuário estiver desconectado, a mesma página pode ocultar as seções conectadas e, em vez disso, mostrar uma mensagem geral de “Bem-vindo! Por favor, faça login” para encorajar os visitantes a aderir à sua rede social e contribuir com o conteúdo
- Uma página de perfil que mostra informações sobre um usuário e quaisquer Tweets que ele postou.
Como o banco de dados Bubble difere dos bancos de dados normais?
O Bubble reduz muitas das complicações técnicas na interação com bancos de dados, mas muitos conceitos básicos ainda estão presentes. Em bancos de dados você tem tabelas; no Bubble, você tem uma tabela para cada “tipo de dados”. Os tipos de dados de Bubble têm campos, representados como colunas, 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 do banco de dados, onde o Bubble permite definir um tipo de campo como um tipo de dados existente no aplicativo. Se isso não faz sentido para você agora, não se preocupe – fica mais claro depois que você vê um exemplo.
Alguns usuários preferem começar com a configuração dos seus tipos de dados, que é essencialmente configurar o banco de dados. Cada aplicativo Bubble vem com um banco de dados integrado que você pode configurar para atender às suas necessidades, o que significa que não há problemas de configuração para você.
Queremos um tipo de dados por tipo de ‘item’ que queremos no aplicativo. Pense em um ‘item’ exatamente como isso – algo que você mostrará, armazenará dados ou utilizará no aplicativo.
Cada um desses tipos de dados deve ter campos que contenham as propriedades daquele item. À medida que continuamos criando páginas, os elementos na página se basearão em diferentes campos de diferentes tipos de dados.
Tipos de dados necessários para criar um Twitter sem codar
Em sua essência, para criar nosso app tipo Twitter teremos os seguintes tipos de dados:
- Tipo de dados: Usuário – vem por padrão com aplicativos do Bubble
- Campos: e mail (incluído por padrão); primeiro nome; último nome; foto do perfil; alça / ‘handle’ (como no Twitter); e a lista de tweets que eles fizeram. Nota: o tipo de dados é definido para que nós (e o Bubble) saibamos qual tipo vai em cada campo. Por exemplo, o primeiro nome é um pedaço de texto, portanto, selecionamos ‘texto’ como o tipo de dados. Da mesma forma, ‘Tweets Feitos’ são uma lista de Tweets.
- Tipo de dados: Tweet – o conteúdo que um usuário postará em seu feed
- Campos: Conteúdo (o conteúdo do Tweet); Imagem (a imagem no Tweet, o que é opcional); e o Local, que é um endereço geográfico. A vantagem do Bubble e do banco de dados é que os campos que criamos podem ser opcionais. Isso significa que não há erros ou problemas se criarmos um registro de Tweet que não tem uma imagem.
Esses são os campos mínimos necessários para fazer o aplicativo funcionar. Conforme criamos mais recursos, provavelmente vamos adicionar mais tipos de dados e campos. Por exemplo, podemos adicionar coisas como enquetes, gifs e muito mais para tornar nossa rede social realmente interativa! Podemos até criar um sistema de agendamento que apenas defina um Tweet para público (precisaríamos de um campo de dados público no tipo de Tweet que tenha um valor sim / não) quando uma determinada data e hora for atingida.
Você pode ter quantos campos / tipos de dados desejar. Podemos ocultar ou mostrar diferentes elementos de design ou alterar o comportamento do app com base nesses bits de dados.
Como criar os recursos principais para um Twitter sem codar?
Como você cria recursos no Bubble?
Junto com o designer de página e o banco de dados integrado, um importante recurso do Bubble são os “workflows“. Os workflows permitem definir partes da lógica 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 em sites – elas conectam o que os usuários veem na página com o banco de dados nos bastidores.
Agora que temos algumas páginas em branco e o banco de dados configurado, daremos ao aplicativo web algumas funcionalidades reais, conectando-os e executando algumas ações básicas. No Bubble, a principal maneira de fazer isso é com uma lista de “ações” agrupadas em um “workflow”.
Cada workflow acontece quando um “evento” acontece (ex: um usuário clica em um botão ou a página está totalmente carregada) e, em seguida, executa uma série de “ações” em resposta (por exemplo, “cadastrar o usuário”, “faça uma alteração no banco de dados ”ou“ ocultar / mostrar um elemento ”etc.).
Para começar com os fundamentos dos workflows, você precisará criar os seguintes recursos:
Cadastro do usuário (Sign-up)
- Revise a referência sobre a ação de workflow “Cadastrar o usuário”
- Faça nossa lição interativa sobre “Criando um sistema de cadastro” após se inscrever no Bubble.
- Em seu aplicativo: Crie um elemento Botão com o texto “Cadastre-se”. Clique no elemento e escolha “Iniciar / Editar workflow”.
- Em Workflows, clique para criar uma nova ação quando o botão ‘cadastrar’ for pressionado.
- Selecione Conta> “Cadastrar o usuário” para usar o cadastro integrado no Bubble
- Use Conta > “Cadastrar-se / fazer login com uma rede social” para login do Google ou Facebook (“OAuth”).
Criar um perfil no Twitter no code
Aqui, vamos projetar um formulário e permitiremos que o usuário clique em um botão para salvar sua imagem de perfil, alça / ‘handle’ e nome completo. Um workflow vinculará o lado do design (o formulário) aos tipos de dados que criamos anteriormente; este processo torna o Bubble realmente poderoso para criar aplicativos orientados a dados – que armazenam e recuperam dados do usuário.
Um exemplo de formulário que você poderia criar:
Este formulário inclui alguns elementos:
- um input para o nome
- um input para o sobrenome
- um ‘input multilinha’ para a bio do usuário
- um elemento de upload para a imagem de perfil do usuário
- um ‘botão’ Salvar Perfil
Como queremos que essas informações sejam públicas, não precisamos nos preocupar com as regras de privacidade de dados por enquanto.
Nota: Os inputs precisam corresponder ao tipo de dados que o banco de dados do Bubble está esperando. Por exemplo, os campos de nome devem ter o formato de conteúdo de “texto” e o campo de dados da foto do perfil deve ser uma “imagem”, o que significa que precisamos de um elemento de upload de imagem para obter o tipo certo de dados. Para ter campos adicionais como Idade, eles devem ter o formato de conteúdo “número”, assim escrever letras não será permitido.
Salvando as informações de perfil do usuário usando um workflow.
Clique duas vezes em ‘Salvar perfil’ no seu formulário e clique em ‘Iniciar / Editar Workflow’ no menu de propriedades. Isso informa ao Bubble que você deseja vincular alguma lógica ao botão quando ele for clicado.
Em seguida, selecione a etapa ‘alterar um item no banco de dados’ (Make changes to a thing). Nesse caso, estamos fazendo alterações no usuário que está atualmente logado em nosso aplicativo.
Crie a ação ‘Fazer alterações no usuário atual’ usando os dados de input conforme mostrado acima:
- Item a alterar = ‘Usuário atual’
- Nome = ‘Input Insira o valor do seu nome’
- Sobrenome = ‘Input Insira o valor do seu sobrenome’
- Foto de Perfil = ‘Uploader de imagem – Faça o upload do valor da imagem’
- Handle = ‘Input Multilinha – Insira o valor da sua bio’
Publicando um ‘Tweet’ no feed público
Vamos criar uma nova página para exibir seus tweets ou feed em seu Twitter no code (ou faça tudo em uma página se desejar). Crie:
1) um elemento de input multilinha
2) um elemento de botão ‘Publicar’ no qual o usuário pode clicar.
Em seguida, configuraremos um workflow para criar um novo Tweet no banco de dados usando o conteúdo desse elemento de input multilinha. Posteriormente, podemos exibir uma lista ou feed de todos os Tweets criados do banco de dados em uma página para que os usuários possam ver as postagens de todos.
Esta é a aparência do formulário:
Crie o workflow: clique no botão ‘Postar’ > ação ‘Criar um novo item’ > Tipo = Tweet. (Isso diz ao Bubble que quando o botão ‘Publicar’ é clicado, queremos criar um novo Tweet).
No menu de propriedades cinza, podemos definir os campos nos quais queremos salvar os dados para compor o Tweet. Defina “Content = MultilineInput’s What you want to post…’s value” / (Conteúdo = Input Multilinha valor O que você quer postar) para que os Tweets contenham o texto de sua caixa de input multilinha. Você pode pular os campos Local ou Imagem por enquanto (você sempre pode fazer isso mais tarde).
Em seguida, adicione a ação ‘Resetar inputs relevantes’ após sua ação ‘Criar um novo Tweet’: isso remove o texto do input uma vez que o Tweet foi criado, para que o usuário possa postar qualquer outra coisa sem precisar remover o texto antigo que digitou.
É isso aí! Agora, o Tweet será salvo no banco de dados, junto com alguns dados padrões que o Bubble adiciona automaticamente, como a conta do usuário que criou o Tweet, a hora em que foi criado e uma ID exclusiva para o Tweet.
Criar Um Feed do Twitter
Nossa próxima etapa é criar o feed do Tweet para visualizar todos os tweets armazenados no banco de dados. Para fazer isso, podemos adicionar elemento de ‘Grupo Repetidor’‘ dos ‘tipos de elemento’ na barra lateral do editor do Bubble de qualquer tamanho (aqui existem 4 linhas e 1 coluna).
Defina ‘Data Source’ = ‘Search for Tweets (‘Fonte de Dados’ = ‘Buscar por Tweets) – isso mostrará todos os Tweets armazenados no banco de dados (que foram criados por usuários usando nosso formulário anterior).
Adicione um elemento de texto dentro da célula # 1 para mostrar o ‘Conteúdo do Tweet da célula atual’. (Da mesma forma, você pode ir em frente e adicionar um elemento de imagem para exibir a ‘Imagem de Tweet’ da célula atual.) Isso preencherá cada célula no grupo repetidor.
Seus usuários podem então rolar o grupo repetidor como fariam normalmente no Twitter e as células percorrerão todos os diferentes Tweets armazenados no banco de dados. Grupos repetidores são muito poderosos e você pode adicionar filtros ou restrições para operações, como mostrar apenas tweets criados pelo usuário atual ou tweets com uma determinada hashtag.
A grande vantagem do Bubble é que, depois de aprender o básico sobre a criação de dados, você pode fazer muito mais e usar a mesma técnica para criar outros tipos de dados no banco de dados!
Mostrando os Tweets aos usuários logados e um feed genérico aos usuários desconectados
Para mostrar diferentes tweets para usuários conectados e usuários desconectados, crie uma Condicional em seu grupo repetidor do feed de tweet.
Usando a aba Condicional no Bubble para o elemento de grupo repetidor, crie uma declaração condicional: ‘Quando o usuário atual está conectado’ > Fonte de dados = “Pesquisar tweets” > Tipo = Tweet, Criado por = Usuário Atual.
Quando esta condição for atendida, o grupo repetidor mostrará apenas Tweets que foram ‘Criados por’ o ‘Usuário Atual’, ou seja, a pessoa que fez o login. Esta é uma ótima maneira de mostrar dados diferentes para usuários diferentes. Lembre-se: Grupos Repetidores podem ter apenas um tipo de dados cada, você não pode alterar o tipo de dados que eles mostram para nada além do ‘Tweet’ criado pelo Usuário Atual – se você quiser mostrar a outros usuários, você precisará de um Grupo Repetidor separado.
Criar recursos adicionais em seu Twitter
Aqui estão algumas idéias para recursos que podem criar novas funcionalidades ao seu Twitter no code. 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.
- Adicionar um elemento de upload de imagem e um elemento de localização de mapas ao formulário ‘Postar Tweet’ para armazenar mais informações no Tweet.
- Adicionar um limite de caracteres no input, como o Twitter real.
- Criação de um feed de imagens, ou apenas imagens tiradas de todos os Tweets, sem conteúdo de texto como o recurso de mídia do Twitter.
Veja mais na série CLONANDO SEM CODAR!
Como clonei o Twitter em 1h (sem código)
Os 5 tipos de aplicativos e sites Web e Mobile
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/no-code-twitter-clone-tutorial/
