Aprenda a criar o seu próprio aplicativo de compartilhamento de fotos tipo Instagram, usando o editor visual web do Bubble.
Se uma imagem vale mil palavras, então o workflow é a tela onde ela é pintada.
Criar uma aplicativo tipo Instagram tradicionalmente exigiria a perícia de um time ou um engenheiro de software experiente. No entanto, enquanto o cenário sem código tem evoluído continuamente, é mais fácil do que nunca para criadores de todo o mundo criar seu próprio software poderoso.
O conjunto de ferramentas do Bubble é a porta de entrada dos criadores do futuro – capacitando aqueles de qualquer origem para começar a criar algo grande. Podemos usar o Bubble para criar marketplaces, apps mobile, e até mesmo redes sociais.
Ao longo deste post, vamos descobrir o processo de usar o Bubble para criar seu aplicativo tipo Instagram gratuito sem precisar programar.
Se você está procurando criar uma plataforma dedicada ao compartilhamento de fotos, ou apenas tem interesse em utilizar alguns dos recursos principais do Instagram, este guia vai compartilhar como começar a criar os workflows subjacentes para seu MVP.
Os passos para criar um aplicativo tipo Instagram sem precisar programar incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Então você pode acompanhar junto enquanto criamos nossa aplicação.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Como estamos criando uma rede social, também é benéfico ter um entendimento básico de como criar contas de usuário.
Ao iniciar seu projeto, você pode escolher começar criando o protótipo para o design da sua rede social, ou criar os campos necessários dentro do banco de dados.
Nesse caso, vamos começar usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso aplicativo mobile. Se você quer criar um aplicativo tipo Instagram, algumas das páginas principais que precisará incluir são:
- Configurações – Permitindo aos usuários atualizar detalhes da conta.
- Homepage – Mostrando um feed do conteúdo dos seguidores do usuário
- Página de perfil – Exibindo os detalhes do usuário e uma grade dos seus posts
- Página de upload – Onde usuários podem criar novos posts
- Página de comentários – Permitindo que os usuários vejam comentários de um único post
Uma característica importante no Bubble é a habilidade de enviar dados entre as páginas. Isso permite que você crie uma versão genérica da página, e então mostre dinamicamente o conteúdo relevante do seu banco de dados quando requisitado.
No caso da nossa rede social tipo Instagram, você precisará apenas criar uma página para hospedar perfis de usuários individuais. Podemos então criar a lógica necessária para exibir apenas o usuário relevante em cada página quando for necessário.
Configurando seu banco de dados
Depois de mapear a exibição do seu aplicativo, você pode focar em criar os campos de dados necessários para alimentar sua aplicação. Vamos depender desses campos para conectar os workflows por trás da sua rede social.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Quando estiver criando um banco de dados, recomendamos dividir itens maiores em tipos de dados separados, para melhorar a velocidade do seu aplicativo.
Por exemplo, criaremos dois tipos de dados separados para cada post. Um tipo de dados vai incluir os detalhes básicos de um story (incluíndo o criador, número de likes, e os comentários totais), enquanto que o outro tipo vai incluir arquivos com conteúdo maior como a foto e a legenda do post em si.
Ao criar esses dados em tipos separados, podemos carregar apenas as informações necessárias quando requisitadas, reduzindo a quantidade de conteúdo que o editor do Bubble precisará renderizar.
Dentro do nosso app mobile tipo Instagram precisaremos criar os seguintes tipos de dados e campos:
Tipo de dado: Usuário
Campos:
- Nome
- Bio
- Identificador
- Foto de perfil
- Posts – Lista de posts. Nota: A criação de um campo como uma lista, baseado em um tipo de dados separado, permite a integração perfeita de todos os campos de dados relevantes.
- Seguidores – Lista de usuários
- Seguindo – Lista de usuários
Tipo de dado: Post
Campos:
- Likes – Lista de usuários
- Comentários – Lista de comentários
- Conteúdo do post – Conteúdo do post
Tipo de dado: Conteúdo do post
Campos:
- Legenda
- Imagem do post
Tipo de dado: Comentário
Campos:
- Conteúdo
- Post – Post
Criar os workflows para uma rede social tipo Instagram
Agora que você estruturou tanto o design quanto o banco de dados do seu aplicativo, é hora de começar a juntar tudo e deixar seu app funcional.
No Bubble, a principal maneira de fazer isso é com workflows. Cada workflow acontece quando ocorre um evento (ex: o usuário clica em um botão), e então executa uma série de “ações” como resposta (ex: “cadastre o usuário”, “altere um item no banco de dados”, etc.)
Atualizar detalhes do perfil do usuário
Quando um usuário cria um perfil no seu aplicativo, precisaremos criar uma página de configurações, permitindo-os atualizar os detalhes do perfil.
Usando uma combinação de campos de input, podemos facilmente adicionar estes novos dados ao perfil do usuário. Após preencher cada input, o usuário acionará este workflow clicando no botão atualizar.
Dessa ação, você pode usar o editor de workflow para alterar um item dentro do seu banco de dados.
Nesse caso, você vai querer alterar os detalhes do usuário atual, mapeando cada um dos inputs on-page com os campos de dados correspondentes.
Uma vez que esse workflow executou, vai atualizar todos os campos relevantes com os novos valores.
Adicionalmente, você pode exibir esse dado no perfil do usuário usando elementos que combinem com os campos de dados fornecidos
Criar um novo post
Uma vez que o perfil do usuário foi configurado, precisamos criar um recurso que os permite criar um novo post na nossa rede social.
O workflow que alimenta os posts gerados pelos usuários também seguirá uma estrutura parecida com a função de editar perfil, mas dessa vez, você vai querer criar um item dentro do banco de dados.
Na nossa página de upload, vamos adicionar um elemento para upload de imagem, assim como um campo de input multilinhas (multiline input field). Assim que o botão compartilhar é clicado, o novo workflow é acionado.
Então você vai criar um item no seu banco de dados – um novo post.
Ao longo desse workflow, começaremos criando o tipo de dado de conteúdo do post, e então vamos linkar ao post em si.
Em seguida, adicionaremos um passo adicional nesse workflow, criando outro item – mas dessa vez vamos criar o post atual.
Linkando o conteúdo do post inicial a este post, é possível integrar perfeitamente estes dados através da plataforma.
Cada vez que esse workflow é acionado, um novo post é criado.
Exibindo conteúdo dinâmico no feed
Uma vez que o usuário começou a gerar posts pelo rede social, é hora de criar um feed que vai mostrar os posts na sua homepage como uma lista dinâmica. Isso pode ser feito utilizando nosso elemento de grupo repetidor.
Grupos Repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteudo dinamico.
Ao usar um grupo repetidor, primeiro você vai precisar linkar o elemento a um tipo de dados dentro do seu banco de dados. Nesse caso, classifique o tipo de conteúdo como um post.
Você também vai precisar definir a fonte de dados como uma lista de todos os posts em que o criador está na lista de usuários atuais dos usuários seguindo.
Agora que está pronto para começar a estruturar o conteúdo dinâmico que será exibido dentro da grade. SImplesmente mapeie a linha de cima com o conteúdo relevante que gostaria de mostrar, então o grupo repetidor vai preencher as colunas restantes com base nos seus dados existentes.
Dentro de um grupo repetidor, também é possível criar eventos baseados em cada linha individual.
Esse recurso será útil ao criar recursos de navegação pela plataforma. Se um usuário deseja comentar em um post no feed, eles precisarão ser redirecionados para uma página dedicada que exibe uma lista de todos os comentários do post.
Publicando comentários
Criar um workflow para publicar e exibir comentários é tão simples quanto nosso workflow anterior usado para criar posts. Para direcionar um usuário a uma página de comentário, criaremos um workflow de navegação que é acionado quando um usuário clica no ícone de comentário em nosso feed da homepage.
Nesse workflow, precisaremos enviar um usuário para uma página – nossa página de comentários.
Ao enviar um usuário a uma página, você precisará enviar dados adicionais para que o editor do Bubbles saiba quais comentários específicos exibir. Os dados que você precisa enviar são os da postagem das células atuais.
Em nossa página de comentários, precisaremos configurar o tipo de página como post. Isso permitirá que o editor do Bubbles exiba dados exclusivos com base em cada post que é enviado por meio do nosso workflow.
Em seguida, adicionaremos outro grupo repetidor à página, exibindo uma lista de comentários.
Ao configurar este grupo repetidor, o tipo de conteúdo será, obviamente, um comentário. A fonte de dados precisará ser configurada para indexar comentários dos posts da página atual (Current Page Post’s).
Agora, precisaremos novamente mapear o conteúdo relevante para cada comentário na linha superior de nosso grupo repetidor.
Abaixo dessa lista de comentários, também adicionaremos um input adicional, permitindo que os usuários publiquem novos comentários.
Quando o botão post próximo a este input for clicado, criaremos um novo workflow.
Dentro deste workflow, precisaremos criar um item novo no banco de dados – um novo comentário.
Mais uma vez, mapearemos o input do comentário com o campo de dados necessário.
Criando ‘likes’ em um aplicativo tipo Instagram
O próximo recurso que estaremos criando é o suporte para que os usuários deixem likes nas postagens em seus feeds. Usando o editor do Bubble, esse processo é fácil de criar.
De volta à nossa homepage, criaremos um novo workflow quando o ícone de coração for clicado.
O workflow para criar um like será tão simples quanto optar por fazer alterações na postagem das células atuais.
A alteração que precisaremos fazer é no campo de likes do post, adicionando a ele o usuário atual.
Nota: Se desejar exibir uma lista de likes para cada postagem (embora o Instagram esteja se afastando desse recurso), você pode facilmente criar um elemento de texto dinâmico para exibir a contagem de usuários adicionados aos ‘likes’ de um post.
Exibindo perfis de usuários
Exibir páginas de perfil individuais será um recurso essencial para nosso aplicativo tipo Instagram. As páginas de perfil permitem que você veja uma grade das postagens dos usuários, bem como seguir suas contas.
Ao criar uma página de perfil de usuário separada, podemos começar a exibir dinamicamente os dados necessários para cada usuário na comunidade.
Comece configurando este tipo de página como ‘usuário’ (User).
Em seguida, adicione os elementos dinâmicos à página que deseja exibir para cada usuário.
Finalmente, adicionaremos um grupo repetidor a esta página, permitindo-nos mostrar uma lista de todos os posts criados pelo usuário da página atual.
Basta definir o tipo de dados desse grupo repetidor como posts, em seguida, configurar a fonte de dados para pesquisar postagens em que o criador é o usuário da página atual.
Seguindo um usuário na rede social
O recurso central final que criaremos para nosso MVP é a capacidade de seguir outro usuário na plataforma.
Na página de perfil do usuário, adicionaremos um botão para seguir. Quando este botão é clicado, criaremos um novo workflow que faz alterações no banco de dados.
A alteração que queremos fazer é o usuário atual, adicionando o usuário da página atual à sua lista de usuários seguidos.
Depois, também precisaremos atualizar a lista de seguidores do usuário da página atual, adicionando o usuário atual.
Criar recursos adicionais em um aplicativo tipo Instagram
Agora que está familiarizado com criar campos de dados customizados e exibir conteúdo dinâmico, você pode começar a ficar criativo com as experiências criadas com o seu aplicativo.
Adicionalmente você pode:
- Adicionar suporte a posts em vídeo
- Criar comentários aninhados, permitindo que os usuários respondam tópicos
- Exibir notificações sobre o engajamento de um post do usuário
- Criar uma função para mensagens – Já cobrimos isso com mais detalhes no no guia Como criar um aplicativo de mensagem tipo WhatsApp.
Veja também:
Criei um Aplicativo que Publica e Comenta no Instagram (sem codar)
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-instagram-clone-no-code/
