Tutorial de chat React: Como construir uma interface de usuário para um aplicativo de chat
Começando: Construindo uma interface de usuário de aplicativo de chat React
Com um número cada vez maior de pessoas que dependem do bate-papo no aplicativo para realizar transações comerciais, ter um aplicativo de bate-papo está se tornando essencial para muitas empresas. Se você deseja construir uma interface de usuário de aplicativo de bate-papo simplificada e intuitiva usando React, o UIKit for React do Sendbird é uma solução comprovada. O UIKit é um conjunto de componentes de UI avançados, modularizados e pré-construídos que você pode usar para criar uma experiência moderna de mensagens em seu aplicativo. Este kit de IU de bate-papo permite que você crie rapidamente uma IU de aplicativo de bate-papo poderosa e personalizável sem reinventar a roda.
Ao final deste tutorial, você terá criado uma interface de usuário do aplicativo de bate-papo como abaixo:
Usando o React Sendbird UIKit, você pode criar uma interface de aplicativo de bate-papo bonita e funcional em apenas alguns minutos e em três etapas fáceis:< /span>
Configure um novo aplicativo React com TypeScript
Adicione a UI do chat React ao seu aplicativo
Isso é tudo o que você precisa para criar uma interface de mensagens amigável! Depois de criarmos a interface básica do aplicativo de bate-papo, também abordaremos a personalização do aplicativo de bate-papo.
Uma nota sobre a construção de uma interface de usuário de aplicativo de chat com componentes de interface modularizados
Hoje, as pessoas esperam interfaces de usuário integradas e atraentes. Para construir uma UI personalizada, os componentes modularizados da UI são essenciais. O que é um componente de IU? Um componente de UI é uma parte pequena, padronizada e intercambiável (ou módulo) da UI do seu aplicativo. Os componentes da IU são semelhantes aos blocos de Lego, que podem ser montados de praticamente qualquer maneira que você desejar para construir a IU escolhida.
Com os componentes de interface de chat pré-construídos do Sendbird, você pode criar uma interface de usuário de aplicativo de bate-papo incrível em minutos. Você pode fazer isso com o Sendbird UIKit versão 3, que é mais personalizável do que a versão monolítica anterior.
Aqui está uma ilustração da mudança da arquitetura monolítica da versão 2 para a arquitetura modular da UI de chat da versão 3:
Como a IU do aplicativo de bate-papo é dividida em módulos menores, como lista de canais, cabeçalho, barra de pesquisa e seções de informações individuais do canal, a arquitetura modularizada da IU de bate-papo (Figura 2) permite maior personalização e flexibilidade.
Em dispositivos móveis, uma arquitetura modular seria semelhante a esta:
Se você quiser saber mais sobre como é uma implementação de IU de aplicativo de bate-papo moderna e bem-sucedida, bem como os benefícios de criar componentes de IU modularizados, consulte isto blog. Tem todos os detalhes que você precisa!
Pré-requisitos para construir uma interface de chat em React
Para este tutorial, você precisará de:
Node.js instalado em sua máquina
Familiaridade básica com JavaScript
Observe que este tutorial mostra apenas como construir uma UI de aplicativo de bate-papo no React. Se você quiser implementar a funcionalidade de bate-papo em seu aplicativo React, consulte este tutorial.
Vamos começar! 💻
Passo 1: Criar uma conta Sendbird
Se você não tem uma conta Sendbird, comece criando sua conta gratuita.
A partir daí, o Sendbird solicitará que você crie um novo aplicativo. Escolha os padrões, especifique um nome de aplicativo e selecione uma região.
Em seguida, você será direcionado ao painel da sua conta. No painel, copie o ID do aplicativo. Você precisará disso mais tarde.
No menu de usuários, crie um usuário e salve o ID do usuário. Neste exemplo, o ID do usuário que precisamos é Test1. Se você quiser criar mais usuários para teste, faça isso agora.
Agora temos o ID do aplicativo e o ID do usuário. Nossa configuração está concluída!
Passo 2: Configurar seu aplicativo de chat React
A seguir, criaremos um aplicativo de exemplo com React 18 e TypeScript. Usaremos Create React App, uma forma com suporte do Meta para criar aplicativos React de página única. Sinta-se à vontade para substituir o ambiente de desenvolvimento React de sua preferência.
Usaremos Create React App para nos fornecer um modelo inicial, criando um projeto chamado sendbird-chat-app. Você pode especificar qualquer nome de sua escolha. Digite o seguinte comando em seu terminal:
Depois que o projeto for criado, navegue até o diretório do projeto e instale o Sendbird UIKit for React.
Como estamos usando TypeScript, devemos incluir as definições de tipo do UIKit para que nosso servidor TypeScript as detecte. Para fazer isso, precisaremos modificar nosso arquivo tsconfig.json, adicionando node_modules/@sendbird/uikit-react/index.d.ts sob a propriedade include. O arquivo tsconfig.json resultante deverá ficar assim:
A partir daqui, estamos prontos para implementar nosso aplicativo de chat. Abra src/App.tsx e substitua seu conteúdo pelo seguinte:
Certifique-se de inserir o ID do aplicativo e o ID do usuário que você salvou anteriormente. O ID do usuário deve ser o ID de um dos usuários que você criou no painel do Sendbird.
A seguir, vamos substituir o conteúdo de src/App.css. Faremos com que o tamanho do aplicativo corresponda à janela do nosso navegador.
Agora, em seu terminal, execute o seguinte comando:
A partir daí, navegue até seu ambiente de desenvolvimento local (por padrão, é http://localhost:3000). Supondo que tudo correu bem, você deverá ver a interface de bate-papo do React!
Passo 3: Personalizar sua interface de chat React
Agora vamos ver alguns exemplos de personalização da interface do usuário do bate-papo.
Por exemplo, vamos mover a lista de usuários para o lado direito da tela e colocar a interface principal de bate-papo à esquerda.
Para fazer isso, vamos primeiro mudar nossa janela principal App para usar o flexbox CSS:
A seguir, vamos substituir o código em App.tsx pelo seguinte. Novamente, lembre-se de inserir seus IDs de aplicativo e de usuário.
Neste exemplo, pegamos o componente App e o substituímos por três componentes e um estado React. O SendBirdProvider é um provedor de contexto que passa o SDK do chat para os componentes filhos. O Channel e o ChannelList são componentes de UI do UIKit. O estado que gerenciamos é o URL do canal atual, que monitora qual canal de bate-papo você está visualizando no momento.
Indo para o seu ambiente de desenvolvimento local, você verá que a lista de canais agora foi movida para o lado direito:
Este código pode servir de base para muitas customizações. Observe que uma abordagem para personalização é modificar os adereços. Por exemplo, se quiséssemos substituir o cabeçalho de ChannelList pela nossa própria versão personalizada, faríamos isso usando a propriedade renderHeader:
Isso resultaria em um cabeçalho parecido com este:
Talvez você queira implementar um tema sombrio. Você pode fazer isso através da propriedade theme em SendBirdProvider.
E pronto! Temos um bate-papo com tema sombrio.
Lembre-se que o UIKit é modular, o que permite maior flexibilidade na customização. Se quisermos apenas personalizar o lado do chat, podemos fazer isso. Se quisermos adicionar módulos adicionais, como pesquisa de mensagens e encadeamento de mensagens, também podemos fazer isso. Para obter mais informações, consulte a documentação.
Crie uma interface de usuário de aplicativo de chat e envie sua primeira mensagem de chat em React
Este tutorial demonstrou como é simples e eficiente criar uma UI de aplicativo de bate-papo usando o Sendbird Chat e o UIKit do React. Construímos e personalizamos rapidamente uma IU funcional em questão de minutos. Também exploramos algumas opções de personalização do UIKit, demonstrando como modificar o layout, substituir o cabeçalho por uma versão personalizada e aplicar um tema escuro. Com a modularidade e flexibilidade do UIKit, você pode personalizar facilmente sua interface de bate-papo do React para atender às suas necessidades e preferências específicas.
Agora que você tem sua interface de bate-papo, envie suas primeiras mensagens seguindo este tutorial passo a passo. Você aprenderá como usar o painel do Sendbird para gerenciar seu aplicativo de bate-papo, criar novos usuários e monitorar o desempenho do seu aplicativo. Se tiver dúvidas, você pode obter ajuda da Comunidade Sendbird para interagir com desenvolvedores e especialistas da Sendbird. Para obter informações adicionais, consulte a documentação ou entre em contato conosco diretamente - nosso especialistas estão sempre prontos para ajudar!
Feliz construção de aplicativo de bate-papo! 💬