Como criar um aplicativo de mensagens tipo Whatsapp

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.

💻

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: cadastrar 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

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.

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

Bubble Whatsapp Clone Create Chat Workflow Walkthrough

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.

Criar um item no banco de dados — o contato do usuário atua

Este workflow será usado para alterar um item no banco de dados — o contato do usuário atua, 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.

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.

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 Whatsapp Clone Chat Portal Workflow Walk

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 um app tipo whatsapp - grupo repetidor

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

• Como Criar um Aplicativo igual o WhatsApp

• [TUTORIAL] Como criar um software que envia ORÇAMENTOS direto por WHATSAPP no Bubble

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/