Como criar um aplicativo de mensagens tipo Whatsapp

Aprenda como criar um aplicativo de mensagens tipo Whatsapp no code, usando o editor visual web do Bubble.

Como criar um aplicativo tipo whatsapp - Sem Codar

Procurando uma ferramenta existente para enviar mensagens? Recomendamos usar o WhatsApp. Mas se você é um criador que está ansioso para começar a fazer seu próprio aplicativo de mensagens, não vá além do Bubble.

Ferramentas no code, como o Bubble, estão revolucionando a forma como os criadores comuns podem criam software. A poderosa plataforma do Bubble tornou mais fácil do que nunca começar a criar software sem ter que escrever uma única linha de código. Podemos usá-lo para criar sites, diretórios e até redes sociais.

Ainda está interessado em criar seu próprio aplicativo de mensagens tipo o WhatsApp? Ótimo, porque este guia é para você! Ao longo deste artigo, vamos guiá-lo pelo processo passo a passo da criação do seu aplicativo do início ao fim. Esteja você procurando criar um aplicativo de mensagens dedicado ou apenas interessado em utilizar alguns dos principais recursos do WhatsApp, este guia compartilhará como começar a criar os workflows subjacentes para o seu MVP.

As etapas para criar um aplicativo de mensagens tipo o WhatsApp no code incluem:

Fazer cadastro gratuito no Bubble

Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito. Com a conta Bubble podemos começar nosso Whatsapp sem codar juntos.

💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar

Também será benéfico se você entender como criar e editar contas de usuário. Já cobrimos isso com mais detalhes em nosso artigo Como criar um site tipo Quora.

Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do app ou criando os campos necessários em seu banco de dados.

Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso aplicativo. Se você está criando uma versão no code do WhatsApp, algumas das páginas principais que desejará incluir são:

  • Página de registro – Incluindo inputs relevantes para inscrever um usuário
  • Página inicial – Exibindo uma lista de mensagens existentes de um usuário
  • Página do chat – Exibindo uma lista de contatos do usuários, e também um campo para criar novos contatos
  • Portal do chat: Exibindo as mensagens em um chat, bem como função para enviar novas mensagens

Um recurso importante no Bubble é a capacidade de enviar dados entre páginas. Isso permite que você crie uma versão genérica de uma página e, em seguida, exiba dinamicamente o conteúdo relevante de seu banco de dados quando for necessário.

Para criar um aplicativo de mensagens tipo whatsapp, você só precisará criar uma página para hospedar cada chat. Então poderemos criar a lógica precisa para exibir apenas as mensagens relevantes em cada chat quando forem necessárias.

Configurando seu aplicativo

Depois de mapear a exibição do seu aplicativo, você pode se concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar os workflows por trás de seu app.

O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos únicos. Ao criar o WhatsApp como um MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dados: Usuário

Campos de dados:

  • Nome
  • Foto
  • Número do contato
  • Contatos – Lista de usuários. Nota: Criando um campo baseado em lista, em um tipo de dados em separado, permite integrar todos os seus campos de dados relevantes sem ter que criar campos adicionais
  • Chats participados – Lista de chats
Tipos de dados e campos para criar um app de mensagens tipo whatsapp

Tipo de dados: Mensagem

Campos de dados:

  • Conteúdo da mensagem
  • Chat de mensagens – Chat
Tipos de dados e campos para criar um app de mensagens tipo whatsapp

Tipo de dados: Chat

Campos de dados:

  • Mensagens – Lista de mensagens
  • Usuários – Lista de usuários
Tipos de dados e campos para criar um app de mensagens tipo whatsapp

Criando workflows para um aplicativo tipo Whatsapp

Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo – tornando seu app funcional.

No Bubble, a principal maneira de fazer isso é com “workflows”. Cada workflow acontece quando ocorre um “evento” (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. )

Criando contas de usuário

Vamos começar criando o workflow que permite a um usuário primeiro criar uma nova conta. No Bubble, tornamos esse processo o mais intuitivo possível.

Depois de criar uma página dedicada ao registro, é possível reutilizar elementos de nossa biblioteca existente. No menu suspenso da página, selecione o elemento de login / cadastro (login / sign-up).

Login do usuário - Clone app tipo whatsapp Bubble - Sem Codar

Você pode facilmente copiar o modelo do elemento desta página para sua própria página de registro da conta.

Usando os inputs fornecidos, você pode criar um workflow que é acionado quando o usuário clica no botão de cadastro.

Workflow - app tipo whatsapp Bubble - Sem Codar

Em seu editor de workflow, você selecionará cadastrar / registrar o usuário.

Workflow - app tipo whatsapp Bubble - Sem Codar

A partir daqui, você combinará os inputs dos elementos na página com os campos necessários em seu banco de dados para criar um novo perfil de usuário.

Ao criar nosso WhatsApp MVP, também incluiremos alguns campos de conta adicionais, como o número de contato do usuário, nome e foto de perfil.

Workflow - app tipo whatsapp Bubble - Sem Codar

Assim, um novo perfil de usuário é adicionado à sua plataforma. Você pode até optar por lembrar o usuário e enviar a ele um e-mail de confirmação automático.

Criando uma página inicial para exibir uma lista de chats

O próximo recurso principal que criaremos é a página inicial do nosso aplicativo. O objetivo desta página é exibir uma lista de todos os chats existentes para um usuário individual.

Começaremos usando um elemento de grupo repetidor para exibir uma lista de chats do usuário. Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Neste caso, você classificará o tipo de conteúdo como chats.

Definindo e restringindo a fonte de dados:

Você também precisará definir a fonte de dados como uma lista de chats em seu banco de dados. Por fim, adicionaremos uma restrição à nossa fonte de dados, optando por buscar apenas os chats que incluem o usuário atual. Isso garantirá que o usuário atual veja apenas os chats que são relevantes para ele.

Bubble Whatsapp Clone Tutorial Chat Example

Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido na grade. Simplesmente mapeie a coluna superior com o conteúdo relevante que gostaria de mostrar, então o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.

No caso do nosso grupo repetidor, queremos incluir os nomes de ambos os usuários em cada chat.

Bubble Whatsapp Clone Tutorial Chat App Walkthrough

Também exibiremos a última mensagem enviada no chat.

Display Last Message in Chat App Bubble Whatsapp Tutorial

Dentro de um grupo repetidor, também é possível criar workflows com base nos elementos individuais de cada linha.

Isso será usado quando um usuário clicar no texto de um chat, abrindo todo o tópico da mensagem em nossa página do portal do chat.

Bubble No Code Whatsapp Chat App Template Workflow Tutorial

Dentro do seu workflow, você criará um evento de navegação, direcionando o usuário à página do portal do chat.

Bubble Whatsapp Chat Clone Tutorial Workflow Walkthrough

Dentro deste workflow, também precisaremos enviar os dados do chat da célula atual. Isso vai permitir que nossa página de portal do chat registre quais mensagens exibir quando o usuário acessar a página.

Bubble Whatsapp Clone Chat Portal Workflow Tutorial

Finalmente, o último recurso do nosso aplicativo tipo Whatsapp, que adicionaremos à nossa página inicial, é um ícone simples que direcionará os usuários à nossa página de criar chat .

How to begin workflow for Bubble Whatsapp clone
Inicie um workflow quando o ícone “Criar chat” for clicado.
Bubble Whatsapp Clone Create Chat Workflow Walkthrough
Selecione Navegação > Ir para a página na aba workflows
Bubble Whatsapp Clone Create Chat Tutorial Step by Step.
Escolha o novo destino para quando o usuário clicar no ícone.

Criando novos contatos em nosso app de mensagens

Em nossa página de criação de chat, usaremos outro grupo repetidor para exibir uma lista da lista de contatos do usuário atual.

Create new contacts in Bubble Whatsapp clone tutorial

Nesta página, também precisaremos criar uma função para que os usuários adicionem novos contatos à sua lista. Faremos isso usando um  elemento pop-up. Pop-ups são uma maneira útil de exibir informações ou criar eventos sem direcionar o usuário para fora da página atual.

Create new contact popup element Bubble Whatsapp tutorial

Dentro do nosso MVP, nosso pop-up incluirá um elemento de barra de pesquisa básico e um botão. A barra de pesquisa será usada para pesquisar números de contato em nosso banco de dados.

Ao configurar este elemento, comece definindo o estilo de escolhas para escolhas dinâmicas. Em seguida, você precisará selecionar a lista de itens como usuários, e o campo para pesquisa como os números de contato do usuário.

Create new contact tutorial for chat app in Bubble.

Agora, isso indexará todos os números de contato em seu banco de dados e até oferecerá sugestões de pesquisa conforme eles forem digitados.

Depois que um usuário tiver selecionado o número de contato que deseja adicionar, criaremos um workflow do nosso botão adicionar usuário que adicionará o número do contato à lista de contatos do usuário.

Criando um novo contato no aplicativo tipo whatsapp

Este workflow será usado para alterar um item no banco de dados.

Workflow for adding users and contacts to Bubble chat app clone.

O item que queremos mudar é o contato do usuário atual, adicionando o valor da caixa de pesquisa.

Make changes to user in Bubble Whatsapp chat clone tutorial.

Além disso, também queremos fazer alterações no usuário receptor – adicionando o usuário atual em sua lista de contatos.

Create contacts in Bubble chat app how to tutorial.

Depois que esse workflow for executado, o novo contato será adicionado automaticamente ao grupo repetidor na página de contato para ambos os usuários.

Iniciando um chat

Depois que um usuário adicionar um novo contato, começaremos a criar um workflow separado para criar um novo chat quando um perfil for clicado na página do contato.

Semelhante à nossa página inicial, iniciaremos este workflow disparando um evento quando um elemento na grade superior for clicado.

How to create new contacts in bubble whatsapp clone

Dentro deste workflow, queremos criar um novo item.

Workflow tutorial for creating new contacts in chat app on Bubble

O item que queremos criar, é claro, um novo chat. Nesse evento, também adicionaremos o usuário atual e os usuários das células atuais como participantes do chat.

Create New Chat with Bubble Whatsapp Clone Workflow Walkthrough

Por fim, redirecionaremos o usuário para a página de portal do chat, enviando também os dados do novo chat que acabamos de criar.

Bubble Workflow Walkthrough Whatsapp Chat Portal

Exibindo e enviando mensagens

O recurso final que precisaremos criar em nosso MVP é a função de não apenas exibir mensagens em um chat, mas também enviar novas mensagens entre usuários.

Na página de portal do chat, comece configurando o tipo da página como chat. Isso permitirá que o editor do Bubble registre o tipo de conteúdo na página.

Criar um app tipo whatsapp - exibindo e enviando mensagens

A partir daqui, adicionaremos outro grupo repetidor para exibir a lista de mensagens no chat das páginas atuais.

Criar um app tipo whatsapp - grupo repetidor

Depois de mapear o conteúdo a ser exibido em cada grade, criaremos o workflow para enviar mensagens neste chat.

Comece criando um workflow quando o botão enviar é clicado.

Criar um app tipo whatsapp - workflow Bubble

Comece este workflow criando um novo item – uma mensagem. Ao criar uma mensagem, combine o elemento de input multilinha com o campo de conteúdo da mensagem em seu banco de dados.

Criar um app tipo whatsapp - tutorial mensagem no chat - Sem Codar

Assim que uma nova mensagem for criada, precisaremos criar uma etapa adicional que adiciona essa mensagem ao chat atual. Isso pode ser feito alterando um item no banco de dados – o chat das páginas atuais. Nesta etapa, adicionaremos a mensagem criada na etapa 1 do workflow ao chat das páginas atuais.

Criar um app tipo whatsapp - tutorial mensagem no chat - Sem Codar

Agora, o grupo repetidor em sua página de chat será atualizado em tempo real sempre que uma nova mensagem for enviada.

Criar recursos adicionais em nosso app tipo Whatsapp

Depois de criar os recursos principais do seu MVP, você vai se familiarizar com o processo de criação de campos de dados personalizados e exibição de conteúdo dinâmico.

Se desejar continuar adicionando recursos ao seu aplicativo de mensagens, você pode considerar:

  • Adicionar suporte para chats em grupo
  • Criando reações de mensagens
  • Usando nosso plugin rich text editor para enviar conteúdo rico em mensagens

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-whatsapp-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