Está no ar o primeiro vídeo da série CLONANDO SEM CODAR!
E a vítima escolhida foi ninguém menos que o Twitter.
O objetivo dessa série é mostrar como podemos utilizar ferramentas No Code (Sem Código) para copiar todo tipo de aplicativos, e decidi começar por uma rede social.
O resultado final do aplicativo está aqui: https://semcodar.bubbleapps.io/twitter
E o editor onde você pode ver exatamente como construí o clone do twitter está aqui: https://bubble.is/page?type=page&name=twitter&id=semcodar
Comecei assim: abri 2 telas, uma com o Twitter no computador, e outra com o Bubble.is – na minha opinião, a melhor ferramenta de desenvolvimento de aplicativos No Code / Sem Código. Mas, vamos entrar mais a fundo nesse tema em outro post.
Importante: não reproduzimos o Twitter inteiro, ou seja, todas as telas, edição de perfil, fluxo de login e cadastro, mensagens diretas, algoritmos de busca, etc etc etc.
Embora tudo isso seja plenamente possível (mesmo sem programação), demandaria mais tempo, e o objetivo aqui não foi copiar exatamente o twitter, mas sim mostrar como podemos reproduzir a funcionalidade básica do Twitter (criação e visualização de Tweets) sem conhecer nenhuma linguagem de programação e sem digitar uma linha de código.
O primeiro passo é sempre reproduzir o front-end. Já ouviu falar desse termo? É a “capa” ou a “cara” do site, são os componentes visuais que você enxerga no navegador, é o layout do aplicativo.
O segundo passo é criar o que você vai precisar lançar no banco de dados. Quais são os campos que você vai precisar registrar, modificar e visualizar no aplicativo?
E o terceiro passo é o workflow, ou o back-end. Aqui configuramos os gatilhos e ações do aplicativo. Por exemplo:
– O que vai acontecer quando a página abrir?
– E quando o usuário estiver logado?
– E se o usuário não estiver logado?
– E quando clicar neste botão?
– Etc.
Agora, vamos à prática. Você pode assistir o vídeo a seguir, e/ou acompanhar o roteiro passo-a-passo (resumido) logo abaixo do vídeo.
Índice
Layout Geral
O layout do twitter no desktop é composto de 3 partes:
– Menu Esquerdo
– Cabeçalho
– Timeline principal
Para reproduzir o layout, simplesmente posicionamos 3 elementos “Group”/Grupo do Bubble na página, num formato visualmente parecido com o do Twitter.
Elementos: - Floating Group do menu esquerdo, 95px x 1080px. Transparente. Todas as bordas Solid com largura 1 e cor #E6ECF0. - Group do cabeçalho, 865px x 61px. Transparente. Bordas em cima, do lado direito, e embaixo (só não tem borda no lado esquerdo), largura 1 e cores #E6ECF0. - Group principal, 865px x 1019px. Transparente. Bordas somente na direita e embaixo, largura 1, cor #E6ECF0.
Cabeçalho
Inserimos no grupo de cima (cabeçalho) um texto “Página inicial”, com a mesma fonte e tamanho da que utilizamos no Twitter.
Elemento: - Text "Página inicial" (fonte Roboto, peso 900, tamanho 19, cor #14171A)
Menu Esquerdo
No Menu esquerdo do Twitter temos uma série de botões, mas para o intuito deste tutorial, reproduzimos somente 2: o botão que volta pra home (o pássaro azul) e o botão que abre o popup para inserirmos um novo Tweet (a pena com um símbolo de “+”). Como não encontramos o ícone da pena na internet – é um ícone próprio do Twitter – recriamos a imagem nos URL’s abaixo.
Elementos: - Grupo (47px x 47px), transparente, roundness 100. · Formatação Condicional: Quando This Group is hovered, background style Flat Color, background color #E8F5FE. - Icon (29px x 34px), dentro do grupo acima, ícone "twitter", cor #1DA1F2. - Imagem (40px x 40px), mostrando imagem URL https://s3.amazonaws.com/appforest_uf/f1564519556620x756238829257382300/add-normal.png. · Formatação Condicional: Quando This Image is hovered, image source alterar para dynamic image de URL https://s3.amazonaws.com/appforest_uf/f1564519578870x695829631498291500/add-hover.png.
OBSERVAÇÃO: Como saber tamanhos, fontes e cores usadas
Na tela acima você enxerga, ao lado direito, o DevTools, também conhecido como “Ferramentas de Desenvolvedor” do Google Chrome. É uma ferramenta gratuita que já acompanha o seu Chrome. Para abrí-la, basta apertar F12, ou clicar com o botão direito do mouse e “Inspecionar”.
Não se deixe intimidar pela quantidade de elementos no DevTools. É uma ferramenta bastante prática e simples para fazer o que precisamos:
1. Clique com o botão direito exatamente onde você deseja extrair as características, neste caso, no texto “Página inicial” direto do Twitter.
2. Clique em “Inspecionar”.
3. Ao abrir o DevTools, note que já estará selecionado o texto Página inicial do lado esquerdo. Você só precisa clicar agora em “Computed” (ao lado de “Styles”, do lado direito do Devtools), e ali você já consegue ver todas as características. No caso deste texto, verá que a fonte é tamanho 19, peso 800, e similar à Roboto.
Criar o Banco de Dados
No banco de dados, ao lado esquerdo, crie um Custom Data Type (Tipo Personalizado de Dados) de nome “Tweet”, ou qualquer outro nome que quiser.
Banco de Dados - Criar Custom Data Type: "Tweet", com os campos: · Campo "img", tipo image · Campo "msg", tipo text · Campo "username", tipo text · Campo "favoritos", tipo number
Preencher os dados do Tweet
Agora que já temos o banco de dados e os campos criados, podemos inserir todos os elementos dentro do Grupo Repetidor (“Repeating Group”) na timeline principal:
1. Texto com o nome do usuário que postou
2. Texto com o tempo atrás que foi postado (Hora Atual – Hora em que o Tweet foi Criado:formatado em minutos)
3. Texto com a mensagem do Tweet
4. Texto com a imagem do Tweet
5. Grupo com os botões de Comentário, Retweet, Like e Share.
Elementos:
- Repeating Group (grupo repetidor) na timeline principal
· Text: Parent group's Tweet's username · Current date/time - Parent group's Tweet's Creation Date:format as minutes min (ou seja, primeiro o username da pessoa que postou, e depois uma fórmula da hora/data atual menos a data de criação do tweet, expressa em minutos);
· Text: Parent group's Tweet's msg (ou seja, a mensagem do tweet)
· Image: Parent group's Tweet's img (a imagem do tweet). Sugiro colocar essa image dentro de um Group, para que você possa ocultar o grupo se o tweet não tiver imagem.
· Grupos onde vão os botões
- Grupo (45px x 45px), com formatação condicional: quando Group is hovered, alterar background style para Flat Color e background color para #DFEEF9.
· Ícone (23px x 23px), cor #647686, ícone "comment", com formatação condicional: quando Group is hovered, alterar icon color para #1DA1F2.
- Grupo (45px x 45px), com formatação condicional: quando Group is hovered, alterar background style para Flat Color e background color para #DEF2EA.
· Ícone (23px x 23px), cor #647686, ícone "retweet", com formatação condicional: quando Group is hovered, alterar icon color para #23C26A.
- Grupo (45px x 45px), com formatação condicional: quando Group is hovered, alterar background style para Flat Color e background color para #F3E1E9.
· Ícone (23px x 23px), cor #647686, ícone "heart", com formatação condicional: quando Group is hovered, alterar icon color para #E0245E.
- Grupo (45px x 45px), com formatação condicional: quando Group is hovered, alterar background style para Flat Color e background color para #DFEEF9.
· Ícone (23px x 23px), cor #647686, ícone "upload", com formatação condicional: quando Group is hovered, alterar icon color para #1DA1F2.
Workflow / Ações: - Ao clicar no group que fica acima do ícone "heart", de coração: · Make changes to Tweet (fazer alterações no Tweet) · Thing to change: Parent group's Tweet · favoritos = This Tweet's favoritos + 1 · Isso fará com que, toda vez que clicar no grupo do ícone de coração, o número de favoritos do tweet vai aumentar em 1.
Popup para inserir Novo Tweet
Insira um novo Popup, com os elementos abaixo:
– Multiline Input, para preencher o texto do tweet.
– Input, para preencher o nome de usuário.
– Picture Uploader, para clicar e inserir uma nova imagem.
– Imagem, dentro de um grupo, ligada ao conteúdo do Picture Uploader;
– Botão, escrito Tweet.
Elementos:
- Popup (600px x 400px) com roundness 15, fundo branco (#FFFFFF), grayout color #000000 opacidade 30, e Shadow Style = None.
· Grupo cabeçalho com 600px x 54px, transparente, borda embaixo solid largura 1 cor #E6ECF0.
- Grupo 45px x 45px, transparente. Formatação condicional quando This group is hovered, alterar background style para Flat Color e background color para #DFEEF9.
· Ícone "times", 23px x 23px, cor #1DA1F2.
· Multiline Input, 558px x 121px, fonte Roboto (regular), tamanho 19, cor #14171A, com placeholder "O que está acontecendo?".
· Input 558px x 42px, fonte Roboto (regular) tamanho 19, cor #14171A, com placeholder "@Nome do Usuário".
· Grupo onde vai a imagem, 558px x 42px, transparente. Formatação condicional quando PictureUploader's value is empty, alterar this element is visible para não.
- Imagem, 558px x 27px, com imagem dinâmica = PictureUploader's value, e Run-mode rendering = Adjust element height.
· Grupo onde vai o botão pra inserir a imagem, 45px x 45px. Formatação condicional quando This group is hovered, alterar background style para Flat Color e background color para #DFEEF9.
- Ícone "image", 23px x 20px, cor #1DA1F2. centralizado no grupo.
- PictureUploader, 45px x 45px, transparente, sem texto.
· Botão/Button, 75px x 40px, cor de fundo #1DA1F2, texto "Tweet" na cor branca, fonte Roboto (700), tamanho 15. Formatação condicional quando This Button is hovered, alterar background color para #1B96E3.
Workflow / Ações:
- Ao clicar no grupo que tem o ícone de fechar ("times"):
· Reset Popup A (para resetar os dados e campos)
· Hide Popup A (para esconder o popup)
- Ao clicar no botão Tweet:
· Create a new Tweet
- msg = Multiline Input O que está acontecen's value
- username = Input @Nome do Usuário's value
- img = PictureUploader's value
· Hide Popup A
· Reset relevant inputs
Teste Final e tudo pronto!
Agora com tudo pronto, clique em “Preview” para visualizar como ficou o aplicativo pronto.
Insira um novo tweet, coloque o texto, nome de usuário, imagem, e Voilá! Temos um Twitter funcionando!
LINKS:
Veja como ficou nosso Clone do Twitter
Bubble.io – a Plataforma de Programação Visual que utilizei neste tutorial
