Aprenda como criar um aplicativo de mensagens tipo Whatsapp no code, usando o editor visual web do Bubble.
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:
Índice
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
Tipo de dados: Mensagem
Campos de dados:
- Conteúdo da mensagem
- Chat de mensagens – Chat
Tipo de dados: Chat
Campos de dados:
- Mensagens – Lista de mensagens
- Usuários – Lista de usuários
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).
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.
Em seu editor de workflow, você selecionará cadastrar / registrar o usuário.
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.
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.
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.
Também exibiremos a última mensagem enviada no chat.
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.
Dentro do seu workflow, você criará um evento de navegação, direcionando o usuário à página do portal do chat.
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.
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 .
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.
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.
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.
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.
Este workflow será usado para alterar um item no banco de dados.
O item que queremos mudar é o contato do usuário atual, adicionando o valor da caixa de pesquisa.
Além disso, também queremos fazer alterações no usuário receptor – adicionando o usuário atual em sua lista de contatos.
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.
Dentro deste workflow, queremos criar um novo item.
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.
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.
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.
A partir daqui, adicionaremos outro grupo repetidor para exibir a lista de mensagens no chat das páginas atuais.
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.
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.
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.
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
- 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/
