Engenharia

Construir uma aplicação de “Vue chat”: Usando o Sendbird’s UIKit numa aplicação Vue.js

Construir uma aplicação de “Vue chat”: Usando o Sendbird’s UIKit numa aplicação Vue.js

Edifício
chat
é um esforço complexo. Quer esteja a construir para
cuidados de saúde
,
jogos
,
serviços on-demand
ou qualquer outra indústria, construir uma conversa rica em características requer esforço. É também essencial escolher a pilha de tecnologia certa; neste tutorial, vamos explorar como construir um chat com Vue.js, uma popular estrutura web JavaScript de front-end para a construção de interfaces de utilizador e pequenas aplicações. Aprenderá também a utilizar o Sendbird’s
UIKit
um conjunto rico em características de
chat UI
componentes, dentro da sua aplicação Vue chat.

Há alturas em que poderá querer renderizar componentes escritos numa estrutura de frontend diferente da sua aplicação; por exemplo, ao migrar um projecto entre estruturas de frontend ou usando uma biblioteca de terceiros (por exemplo, vuetify) que não tenha sido portada para a sua estrutura de escolha. Nestes casos, estão disponíveis várias bibliotecas de ligação. Por exemplo, é possível renderizar Angular componentes em Reagir aplicações com angular2react ou Vue componentes de um Svelte projecto com svelte-adapter. Para este tutorial, iremos utilizar
Veuary
para fazer a ponte entre o mundo da Reacção e o mundo da Vue.

Pré-requisitos

Para começar a construir a sua aplicação Vue chat, precisará
node.js
instalado e um Sendbird Application ID. Se ainda não o fez, pode
criar uma conta Sendbird
e criar uma aplicação no
painel de bordo
.

Pode encontrar o seu ID de Aplicação no painel de bordo do Sendbird.

O que vamos construir: Como deve ser a sua aplicação Vue chat

Neste tutorial, vamos construir uma aplicação Vue chat com uma UX semelhante à WhatsApp para o ambiente de trabalho. O
código final do projecto
está disponível no GitHub, e também recomendamos que consulte o
demonstração ao vivo
.

O nosso projecto será construído utilizando a Vue 3 e o aplicativo irá tornar uma versão totalmente funcional do Sendbird’s
Reagir UIKit
dentro da aplicação principal do Vue chat. A aplicação Vue passará configurações para o UIKit e o UIKit também passará informação do utilizador de volta para a Vue. Esta comunicação bidireccional permitir-nos-á mostrar o nome de um utilizador Sendbird e a contagem de mensagens não lidas no cabeçalho superior da nossa aplicação Vue. O resultado será o seguinte.

Configurar a sua aplicação Vue chat

A Vue tem uma ferramenta prática de linha de comando para aplicações rápidas de andaimes. Basta executar o seguinte, onde quer que queira que o seu projecto viva.

Este comando irá guiá-lo através das opções ao criar um novo projecto. As definições utilizadas para este tutorial estão listadas abaixo.

Para iniciar a aplicação no modo dev, executar os comandos abaixo.

Deverá agora ver uma nova página de aterragem brilhante quando correr e visitar
http://localhost:5173
. Este é o aspecto que deve ter:

Instalar e configurar o Veaury

Veaury é uma biblioteca que permite a renderização de componentes React dentro das aplicações Vue. Vale a pena notar que os componentes Vue em aplicações React também são suportados, mas estão fora do âmbito deste tutorial. O Veaury trabalha tanto com Vue 3 como com Vue 2, e a biblioteca pode ser instalada a partir de npm com o seguinte comando:

Para permitir que a nossa aplicação Vue chat recentemente criada importe e renderize componentes React, é necessário fazer uma pequena alteração na configuração de construção. Por conseguinte, precisamos de actualizar o ficheiro vite.config.js no nosso projecto para utilizar o plugin Veaury.

Após esta alteração de configuração, pode adicionar quaisquer componentes React que deseje a um directório chamado react_app. Esses componentes React podem então ser importados para ficheiros .vue e renderizados dentro de componentes Vue padrão.

Criação de uma componente de Reacção no nosso projecto Vue

Primeiro, é necessário criar uma nova componente React em react_app. Este componente é responsável pela importação, configuração, e renderização do UIKit.

Não é necessário fazer nada de especial a esta componente Reagir para a fazer jogar bem com a Vue. O código aqui faz o seguinte:

  1. Importação Dependências do Sendbird UIKit
  2. Inicializa o UIKit com um app id e user id
  3. Utiliza o HOC da Sendbird para o acesso ao SDK da Sendbird. Isto dar-nos-á acesso à informação do utilizador necessária para ser passada de novo para a aplicação Vue

Vale a pena notar que os adereços que são passados para o ChatReactComponent são passados de uma componente de Vue de pais. Passar aqui em adereços é a forma de conseguir que o lado Reactivo das coisas comunique com a Vue. Como definir e passar nestas propriedades é abordado na secção seguinte.

Adicionar o UIKit à página

A seguir, adicione o ChatReactComponent à sua aplicação de chat Vue. A página que precisa de ser actualizada é Views/HomeView.vue. Remover todo o código actualmente em views/HomeView.vue e adicionar o código abaixo.

Este código faz o seguinte:

  1. Importação de Veaury e a nossa nova componente de chat React
  2. Converte a nossa componente React para uma componente Vue usando a função applyPureReactInVue da Veaury
  3. Na função de configuração, definir os dados e as chamadas de retorno para passar como adereços à nossa componente Reagir
  4. Defina o nosso HTML para renderizar um cabeçalho superior. O cabeçalho inclui o nome de utilizador e a contagem das mensagens não lidas. Estes dados serão passados de volta do UIKit numa etapa posterior deste tutorial
  5. Renderizar a componente React Chat no HTML, passando nos dados e callbacks definidos anteriormente como atributos no elemento Chat
  6. Finalmente, adicionar algum estilo para que tudo fique bonito

Verá agora a renderização do UIKit no browser quando visitar
http://localhost:5173
. Este é o aspecto que deve ter:

Passar informação do utilizador à Vue

Finalmente, a informação do utilizador e a contagem de mensagens não lidas serão passadas de volta para a sua aplicação de chat Vue, para que possa exibir essa informação na barra de cabeçalho superior da aplicação. Esta informação é acedida através do Sendbird SDK. Para aceder ao SDK a partir do UIKit, pode usar uma função útil chamada getSdk. Chamando essa função, como se mostra abaixo, dar-lhe-á o SDK subjacente. Pode então aceder aos métodos relevantes para obter o que é necessário (contagem de mensagens não lidas & informação do utilizador) e passar essa informação de volta para a Vue utilizando as chamadas de retorno passadas como adereços (setUnreadMessageCount & setSbUserInfo).

A barra superior da aplicação torna agora visível um nome de utilizador e uma contagem de mensagens. Repare no nome do utilizador “Bob” e na contagem de mensagens não lidas de 1 na imagem de ecrã abaixo.

Conclusão

Parabéns! Agora tem o Sendbird UIKit a funcionar na sua aplicação Vue. Neste tutorial, falámos sobre como se pode criar uma aplicação Vue chat utilizando os componentes de design pré-fabricados e ricos em características fornecidos pela Sendbird UIKit. Agora pode criar grupos e começar a conversar de bom grado!

Lembre-se que os dados fluem em ambos os sentidos entre o código Vue e React; um passo seguinte sensato seria tentar passar em diferentes tipos de propriedades para o componente React do Chat e utilizar essas propriedades para configurar o UIKit de uma forma alternativa, por exemplo, definir as cores do tema UIKit.

Se precisar de ajuda com
Sendbird Chat
ou o
UIKit
por favor, consulte o nosso
documentos para conversar
e
documentos para o UIKit
! Encontrará orientação sobre como pôr a conversa a funcionar na sua aplicação com componentes ricos de IU pré-construídos. Também pode encontrar respostas no
Comunidade Sendbird
um fórum onde pode fazer e responder a perguntas relacionadas com todas as coisas
Sendbird
. Por favor não hesite em contacte-nos se precisar de ajuda – os nossos especialistas têm todo o prazer em ajudar. Feliz edifício de chat! 💻

Categories: Engenharia