Como criar um aplicativo tipo Instagram (sem programar)

Aprenda a criar o seu próprio aplicativo de compartilhamento de fotos tipo Instagram, usando o editor visual web do Bubble.

Como criar um aplicativo tipo Instagram sem programar

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:

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
Como criar um aplicativo tipo Instagram sem programar

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.

Criar um aplicativo tipo Instagram - Workflows

Dessa ação, você pode usar o editor de workflow para alterar um item dentro do seu banco de dados.

Criar um aplicativo tipo Instagram - Workflows

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.

Criar um aplicativo tipo Instagram - Workflows

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.

Criar um aplicativo tipo Instagram - Conteúdo Dinâmico

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.

Criar um aplicativo tipo Instagram - Conteúdo Dinâmico

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.

Creating a comment in an Instagram clone app build entirely with no code

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.

Creating a workflow in Bubble to like an Instagram post

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.

Bubble’s no-code editor Instagram likes

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.

Displaying the number of likes from a post on an Instagram clone built with no-code

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).

Criar um aplicativo tipo Instagram - Exibindo perfis de usuários

Em seguida, adicione os elementos dinâmicos à página que deseja exibir para cada usuário.

Criar um aplicativo tipo Instagram - Exibindo perfis de usuários

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.

Criar um aplicativo tipo Instagram - Exibindo perfis de usuários

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.

Criar um aplicativo tipo Instagram - Seguindo um usuário

A alteração que queremos fazer é o usuário atual, adicionando o usuário da página atual à sua lista de usuários seguidos.

Criar um aplicativo tipo Instagram - Seguindo um usuário

Depois, também precisaremos atualizar a lista de seguidores do usuário da página atual, adicionando o usuário atual.

Criar um aplicativo tipo Instagram - Seguindo um usuário

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)

Quanto vale minha ideia?

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/

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