Aprenda como criar sua plataforma de comunicação comercial no code baseada no Slack, usando o editor visual web do Bubble.
Quando o Slack começou a funcionar em 2009, ele foi criado para interromper a forma como as equipes se comunicavam, eliminando a necessidade de processos legais que tinham deficiência de tempo.
Quando o Bubble foi fundada em 2012, o objetivo era também revolucionar o cenário atual, eliminando a necessidade de entender linguagens de desenvolvimento complexas para criar poderosos softwares.
Nos últimos anos, temos um produto que capacita fabricantes com ferramentas de desenvolvimento no code de ponta.
Você não precisa mais ser um engenheiro de software experiente para criar um produto valioso. Na verdade, nossos clientes têm usado o Bubble para criar lojas virtuais, diretórios e até redes sociais.
Nesta postagem, descobriremos o processo de usar o Bubble para criar sua própria versão ‘white-label’ do Slack. Se você está procurando criar uma réplica exata ou apenas interessado em utilizar alguns dos principais recursos da plataforma, este guia compartilhará como começar a criar a lógica subjacente de uma plataforma baseada em canais de chat em equipe.
Ao longo deste guia, vamos destacar como criar os seguintes recursos-chave do Slack:
- A capacidade de criar um novo canal
- Suporte para atualizar detalhes da conta do usuário
- Uma função para enviar e exibir mensagens dinâmicas dentro de um canal individual
- Funções para navegar intuitivamente entre diferentes canais de equipes
As etapas para criar um Slack 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. Clique no link para começar, então você pode acompanhar enquanto criamos nosso aplicativo juntos.
💻 Crie já sua conta gratuita no Bubble, a plataforma que uso para criar Aplicações Web sem programar
Isso o ajudará a começar o trabalho ao criar sua plataforma de comunicação comercial no code.
Ao iniciar seu projeto, você pode começar criando um protótipo para o design do produto ou criando os campos necessários em seu banco de dados.
Nesse caso, começaremos usando a ferramenta de design visual para moldar a interface de usuário do nosso produto. Se você estiver se baseando no Slack, algumas das páginas principais que vai querer incluir serão:
- Uma página inicial: Que incluirá 2 grupos repetidores – um exibindo uma lista de seus canais e outro exibindo uma lista de suas mensagens
- Uma página de configurações: Aqui é onde você criará novos canais e atualizará as configurações do perfil.
Um recurso importante do Bubble é a capacidade de enviar dados para uma página. Isso significa que você só precisa criar uma versão genérica de uma página que possa refletir informações sobre usuários específicos ou itens do seu banco de dados.
No caso do seu Slack no code, você só precisará criar uma página inicial para hospedar suas mensagens em cada canal. Podemos então criar a lógica necessária para exibir apenas o conteúdo relevante para cada canal quando for necessário (abordaremos isso com mais detalhes em breve).
Configurando seu banco de dados
Após mapear a exibição do site, podemos nos concentrar na criação dos campos de dados necessários para alimentar o aplicativo. Contaremos com esses campos para conectar a lógica por trás da plataforma.
Criar um banco de dados no Bubble é um processo contínuo. Comece listando seus tipos de dados de nível superior e, em seguida, adicione os campos necessários em cada categoria.
Ao usar o Slack como um MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Usuário
Campos:
- Nome
- Foto do perfil
- Título
- Canais participados – Nota: Criando uma lista baseada em um tipo geral de dados permitirá que você integre perfeitamente todos os campos de dados relevantes sem ter que criar valores de campo adicionais.
- Mensagens enviadas – Lista de mensagens
Tipo de dados: Mensagens
Campos:
- Conteúdo
- Canal de mensagens
Tipo de dados: Canal
Campos:
- Nome do canal
- Mensagens do canal – lista de mensagens
- Usuários do canal – lista de usuários
Criar os Workflows necessários para uma plataforma de comunicação comercial
Agora que você estruturou o design e o banco de dados para o seu aplicação, é hora de começar a juntar tudo para tornar seu site 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. )
Atualizando detalhes da conta
Se você revisou nossas lições iniciais de treinamento do Bubble, você entenderá como criar contas de usuário para você e para usuários adicionais do seu aplicativo.
Como uma manutenção geral, também podemos atualizar ou adicionar detalhes adicionais para cada usuário, tornando mais fácil determinar a função de um usuário em seus canais do Slack.
Ao criar uma página de configurações, você pode utilizar nossos elementos de input para fazer alterações nos dados de perfil do usuário. Isso pode incluir seu nome, cargo e foto do perfil.
Depois de adicionar elementos de input à página, criaremos um workflow para fazer alterações nos detalhes do usuário atual, uma vez que os campos foram preenchidos.
Comece criando um workflow quando o botão atualizar for clicado.
Daqui, selecione alterar um item em seu banco de dados.
Você vai querer fazer alterações nos inputs relevantes em seu banco de dados. Comece a mapear cada campo de dados que você gostaria de alterar em relação a cada um dos inputs relevantes em sua página.
Criar um canal em sua plataforma de comunicação comercial
Seguindo em frente, o primeiro recurso adequado que precisaremos criar é uma função para apoiar a criação de novos canais. Vamos criar isso em nossa página de configurações usando 2 elementos básicos de input – um input de texto e uma barra de pesquisa.
Ao criar um canal, teremos a liberdade de chamá-lo como quisermos (geral, aleatório, bate-papo no code) no input. A barra de pesquisa, entretanto, será usada para adicionar um usuário existente a este canal.
Para pesquisar automaticamente os usuários existentes em seu banco de dados, precisaremos primeiro configurar os dados que esse input pode obter.
Ao selecionar o campo de pesquisa como ‘usuário’, ele indexará todas as entradas e até oferecerá sugestões de pesquisa à medida que forem digitadas.
Agora, ao criar um novo canal, você pode adicionar usuários simultaneamente a ele. Ao criar esta função, precisaremos iniciar um workflow baseado no clique do botão criar.
Em seu editor de workflow, você selecionará criar um novo item no banco de dados. O item que você deseja criar é, obviamente, um canal.
Comece mapeando cada campo de dados que gostaria de criar em relação a cada um dos inputs relevantes em sua página. Ao criar um canal, queremos adicionar um nome do canal, o usuário atual (você) no canal e o usuário da caixa de pesquisa.
Exibindo canais
Com a estrutura do seu produto criada, é hora de fazer os principais recursos para facilitar canais e bate-papos.
Na página inicial, usaremos uma combinação de elementos de grupo repetidor para exibir uma lista de todos os canais e mensagens dentro desses canais.
Grupos repetidores são elementos que se integra ao banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.
Começaremos configurando o grupo repetidor que exibe sua lista de canais do Slack.
É necessário atualizar o tipo do conteúdo deste elemento, depois vinculá-lo a um tipo de dados no banco de dados. Isso permitirá que o grupo repetidor exiba todos os dados relevantes que atendam a esses parâmetros. Então classificaremos o tipo do conteúdo como um canal, e vamos pesquisar todos os canais em seu banco de dados.
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 e o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Antes de prosseguir com a configuração do grupo repetidor que exibe nossas mensagens, precisaremos criar um workflow que atualize nossa página inicial cada vez que clicarmos em um novo canal.
No Slack, sempre que você clicar em um canal, esperasse que as mensagens na coluna certa sejam atualizadas de acordo.
Usando o Bubble, podemos realizar este evento enviando dados entre páginas.
Cada vez que clicamos em um novo canal Slack da nossa lista, reenviaremos um usuário para a página inicial novamente. E toda vez, ele carregará o conteúdo relevante para o canal atual.
Nota: Ao enviar um usuário para a mesma página em que ele já está, a página não será atualizada completamente.
Criando workflow e atualizando conteúdos na página inicial
Vamos começar criando um workflow quando um canal é selecionado em nosso grupo repetidor.
A partir daqui, queremos selecionar a função de navegação e enviar um usuário para uma página.
A página para a qual queremos enviar os usuários é nossa página inicial, e os dados que enviaremos são do canal da célula atual.
Agora que enviamos esses dados para a página inicial, precisaremos buscá-los e exibi-los em nosso grupo repetidor de mensagens.
Nota: Para que os dados do canal sejam enviados corretamente entre um carregamento de página, você precisará atualizar o tipo de conteúdo da página de destino para ser o mesmo tipo de dados que estará enviando. Nesse caso, precisaremos definir o tipo do conteúdo da página inicial como uma propriedade de canal.
Agora estamos prontos para começar a exibir as mensagens dinâmicas em cada canal selecionado.
Começaremos configurando a fonte de dados para seu grupo repetidor novamente. Como estamos enviamos os dados do canal para a página atual, faremos uma busca por mensagens que são atribuídas do canal da página atual.
Depois que a fonte de dados do grupo repetidor for configurada, mapearemos a coluna superior do elemento mais uma vez. Isso pode incluir o conteúdo da mensagem, o nome do criador da mensagem e a foto de perfil do criador da mensagem.
Criando mensagens
O recurso final que precisaremos criar é uma função para oferecer suporte a chats dentro de um canal.
Adicionando um input multilinha abaixo de nosso grupo repetidor de mensagens, criaremos uma nova mensagem cada vez que um usuário clicar no botão enviar.
Dentro deste workflow, queremos criar um novo item e, em seguida, selecionar para criar uma nova mensagem.
Mais uma vez, você mapeará cada um dos inputs na página com os campos relevantes no banco de dados.
Nota: O Bubble registrará automaticamente o usuário que cria cada mensagem, o que significa que você não precisará adicionar campos de dados extras para identificar esses dados.
Depois de criar uma nova mensagem, seu grupo repetidor será atualizado em tempo real com o novo conteúdo criado.
Criar recursos para sua plataforma de comunicação comercial tipo Slack
Após familiarizar-se com a criação de campos de dados personalizados e exibição de conteúdo dinâmico, você pode começar a ficar criativo com as experiências da sua plataforma. Adicionalmente, você pode:
- Criar canais privados entre 2 usuários
- Usar nosso plugin rich text editor para oferecer suporte a formas únicas de mensagens
- Criar workspaces adicionais
Os 5 tipos de Aplicativos e Sites Web e Mobile
Login Social Facebook e Google (TUTORIAL NO CODE)
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-slack-clone/
