Aprenda como criar seu próprio aplicativo de namoro personalizado no code, usando o editor visual web do Bubble.
Não há como negar que existem mais opções de namoro do que nunca disponíveis para atender às suas necessidades românticas específicas, mas encontrar o aplicativo no code perfeito que corresponda às suas necessidades de desenvolvimento deve ser tão fácil quanto deslizar para a direita – e é com o Bubble!
Essa ferramenta de programação visual facilita o design intuitivo e a programação de apps bonitos e dinâmicos. Nunca foi tão fácil começar a criar um software poderoso com o Bubble. Nosso objetivo é tornar o desenvolvimento de software acessível a fabricantes de todas as origens. O Bubble pode ser usado para criar lojas virtuais, diretórios e até fóruns comunitários.
Ao longo deste post, iremos guiá-lo através do processo de usar o Bubble para criar sua própria versão ‘white-label’ do Tinder.
Esteja você procurando ajudar outras pessoas a encontrar ‘matches’, ou até mesmo obter alguns por conta própria, este guia compartilhará como começar a criar o design e a lógica subjacentes para seu MVP de um aplicativo de namoro no code.
As etapas para criar um app tipo Tinder 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.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do seu aplicativo ou criando os campos necessários em seu banco de dados.
Nesse caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário. Se você está fazendo uma versão do Tinder, algumas das páginas principais para incluir são:
- Uma página inicial para deslizar por potenciais ‘matches’
- Uma página dedicada para que o usuário atual visualize seus ‘matches’
- Uma página para hospedar e facilitar as mensagens entre dois usuários (perfeito para deslizar nos DMs)
Um dos principais recursos do 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 do seu banco de dados quando for necessário.
Para criar um app tipo Tinder, você precisará de uma página para hospedar mensagens entre dois usuários. Podemos então criar a lógica necessária para exibir apenas as mensagens relevantes na página, quando forem necessárias (abordaremos isso com mais detalhes em breve).
Índice
Configurando seu banco de dados
Depois de criar um protótipo para essas páginas, você pode se concentrar na criação dos campos de dados necessários para alimentar seu aplicativo. 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 exclusivos. Ao usar o Tinder como um MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados:usuário
Campos:
- Nome
- Foto
- Idade
- Localização
- Sexo / Gênero
- Usuários correspondentes – lista de usuários
- Usuários não correspondentes – lista de usuários
- Mensagens (lista) – Nota : Criar um campo baseado em lista, em um tipo de dados separado, permite que você integre perfeitamente todos os seus campos de dados relevantes, sem ter que criar valores de campo adicionais.
Tipo de dados: Mensagem
Campos:
- Conteúdo da mensagem
- Remetente da mensagem
- Destinatário da mensagem
Workflows para criar um aplicativo de namoro
Agora que você estruturou o design e o banco de dados para seu aplicativo, é hora de começar a juntar tudo e torná-lo 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”, “fazer uma alteração no banco de dados”, etc. )
Deslizando para encontrar ‘matches’
Um dos principais recursos para criar um aplicativo no Bubble é ter acesso à biblioteca de plugins, com integrações úteis para aprimorar as experiências que você pode criar.
Adicionando o plugin Tinder-like Pile ao aplicativo, iremos agilizar o processo de criação do recurso de deslizar para ‘matches’.
Com o plugin instalado poderemos usar o componente Tinder Pile como um elemento regular.
Depois de adicionar esse elemento, precisaremos configurá-lo para exibir todos os usuários na plataforma.
Comece atualizando o tipo do conteúdo para usuário, depois faça uma pesquisa por todos os usuários no banco de dados.
Dica profissional: Você pode incluir restrições de pesquisa adicionais se desejar filtrar os ‘matches’ potenciais de um usuário por gênero ou preferências de namoro.
Terminaremos a configuração deste elemento estruturando a imagem como uma imagem de destaque dos seus usuários e a legenda da imagem como o nome do usuário no cartão atual.
O plugin Tinder Pile também exibe automaticamente animações personalizadas quando um usuário desliza para a direita ou esquerda.
Para alterar o banco de dados com base na passagem de dedo do usuário, precisaremos criar um novo workflow para potencializar cada evento de passagem.
Se um usuário deslizar para a direita, queremos registrar este evento como um ‘match’. No editor de workflow, primeiro selecione o evento deslizar para a direita em suas ações do elemento.
Depois altere um item no banco de dados.
O item que queremos alterar em seu banco de dados é o campo de ‘matches’ do usuário atual. Em seguida, você adicionará o slide atual do Tinder Pile para o campo de dados ‘match’ do usuário.
Depois de concluir este workflow, temos que replicar essa lógica para a ação de deslizar para a esquerda, mas agora faremos alterações no campo de dados de ‘matches’ não correspondidos do usuário atual.
Visualizando uma lista de ‘matches’
Depois que um usuário optou por ter um ‘match’ com outros na plataforma (especialmente se ele tiver o hábito de deslizar para a direita 😉), você precisará exibir sua lista de ‘matches’ em uma página dedicada.
Em sua página de ‘matches’ dedicada , você usará nosso elemento de grupo repetidor para exibir todas as ‘matches’ do usuário atual.
Os grupos repetidores são um elemento poderoso que se integra ao seu banco de dados. Eles exibem e atualizam continuamente 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 como um usuário.
Você também precisará definir a fonte de dados como uma lista de todos os usuários que deram ‘match’ no usuário atual.
Agora você está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapeie a primeira coluna com o conteúdo relevante que você gostaria de mostrar, e o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Dentro de um grupo repetidor, também é possível criar eventos dentro de cada coluna individual.
Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Uma vez que um usuário decida começar a deslizar para alguns DMs, ele clicará no botão de mensagem na coluna de sua escolha.
Para este evento, precisaremos redirecionar os usuários para uma página de mensagens dedicada para hospedar esta conversa específica.
Ao longo deste workflow, também precisaremos enviar os dados relevantes para identificar quem é o usuário final com quem gostaríamos de começar uma conversa.
Como criar uma função de chat em nosso aplicativo de namoro
Quando um usuário abre um chat privado, queremos exibir apenas as mensagens únicas compartilhadas entre esses usuários.
Comece configurando seu tipo da página como uma propriedade do usuário.
Em seguida, adicionaremos um grupo repetidor, configurando-o para exibir o conteúdo da mensagem. Isso nos permitirá exibir as mensagens que são relevantes para o usuário da página atual.
Ao pesquisar todas as mensagens, e depois adicionar restrições extras, é possível exibir apenas as mensagens em que o uso atual é o remetente ou o destinatário. Isso evitará a exibição de tópicos irrelevantes que não estejam relacionados a este usuário.
Criando mensagens
Usando um input multilinha abaixo do grupo repetidor da conversa, você pode criar novas mensagens com o clique de um botão. Comece a criar um workflow quando um usuário clicar no botão enviar.
Em seu workflow, você começará criando um novo item em seu banco de dados.
O item que você precisa criar é uma nova mensagem. Como sempre, você precisará estruturar todos os campos adicionais que deseja incluir com esses novos dados.
Para uma nova mensagem, é importante classificar o usuário atual como o remetente, o usuário da página atual como o destinatário e o conteúdo mensagem como o input multilinha.
Exibindo mensagem
Quando uma nova mensagem é criada, seu grupo repetidor será atualizado dinamicamente em tempo real para facilitar essa conversa.
O recurso final que precisamos adicionar é o conteúdo que será exibido em cada mensagem.
Para nosso MVP, vamos simplesmente estruturar a primeira linha em nosso grupo repetidor para incluir o conteúdo da mensagem da célula atual, bem como a foto de perfil do receptor da mensagem da célula atual.
Criar recursos adicionais no aplicativo de namoro
Agora que você está familiarizado com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, pode começar a ficar criativo com o seu app de namoro no code.
Adicionalmente, você pode:
- Criar perfis de usuários individuais
- Filtrar ‘matches’ por preferências sexuais
- Criar suporte para um recurso parecido como o ‘Super Like’
Material Extra – Gostou deste post e quer saber mais sobre o movimento Sem Codar? Veja também:
- Como criar um aplicativo de namoro igual o Tinder (Tutorial em Vídeo!)
- Como criar um aplicativo igual o Whatsapp.
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-no-code-tinder-clone/
