Compartilhar via


Usar componentes de interface do usuário para chat

Comece a usar a Biblioteca de IU para Serviços de Comunicação do Azure a fim de integrar experiências de comunicação rapidamente aos aplicativos. Este artigo descreve como integrar componentes de chat da biblioteca de interface do usuário no aplicativo e configurar a experiência para os usuários.

A biblioteca de interface do usuário para Serviços de Comunicação do Azure renderiza uma experiência de chat completa diretamente no aplicativo. Gere a conexão aos serviços de chat do Azure Communication Services e atualiza automaticamente a presença de um participante. Como desenvolvedor, você precisa decidir onde, na experiência do usuário do aplicativo, deseja que a experiência de chat inicie e crie apenas os recursos dos Serviços de Comunicação do Azure, conforme necessário.

Observação

Para obter mais informações sobre a Biblioteca de Interface do Usuário da Web, consulte o storybook da Biblioteca de Interface do Usuário da Web.

Pré-requisitos

Acessar esses guias de início rápido

Acesse estes livros de histórias

Importante

Este recurso dos Serviços de Comunicação do Azure estão atualmente em versão prévia. Os recursos em versão prévia estão disponíveis publicamente e podem ser usados por todos os clientes novos e existentes da Microsoft.

Versões prévias das APIs e dos SDKs são fornecidas sem um contrato de nível de serviço. É recomendável que você não as use para cargas de trabalho de produção. Alguns recursos podem não ter suporte ou recursos podem ser restritos.

Para obter mais informações, consulte Termos de Uso Complementares de Versões Prévias do Microsoft Azure.

Obtenha o aplicativo do Android de amostra no SDK do Android de Amostras do Azure para chat na biblioteca de interface do usuário dos Serviços de Comunicação do Azure de software livre para Android.

Pré-requisitos

Configurar o projeto

Conclua as seções a seguir para configurar o projeto.

Criar um novo aplicativo Android

No Android Studio, crie um projeto.

  1. No menu Arquivo, selecione Novo>Novo projeto.

  2. Em Novo Projeto, selecione o modelo de projeto Empty Views Activity.

    Captura de tela que mostra o diálogo Novo projeto no Android Studio com a opção Atividade de visualizações vazia selecionada.

  3. Selecione Avançar.

  4. Nomeie o projeto UILibraryQuickStart. Em linguagem, selecione Java/Kotlin. Para o SDK mínimo, selecione API 23: Android 6.0 (Marshmallow) ou posterior.

  5. Selecione Concluir.

    Captura de tela que mostra as opções do novo projeto e o botão Concluir selecionado.

Instalar os pacotes

Conclua as seções a seguir para instalar os pacotes de aplicativos necessários.

Adicionar uma dependência

No arquivo UILibraryQuickStart/app/build.gradle no nível do aplicativo (na pasta do aplicativo), adicione a seguinte dependência:

dependencies {
    ...
    implementation 'com.azure.android:azure-communication-ui-chat:+'
    ...
}

Adicionar repositórios Maven

O repositório de pacotes do Azure é necessário para integrar a biblioteca.

Para adicionar o repositório:

  1. Nos scripts Gradle do projeto, verifique se os repositórios a seguir foram adicionados. Para Android Studio (2020.*), repositories está em settings.gradle, sob dependencyResolutionManagement(Gradle version 6.8 or greater). Para versões anteriores do Android Studio (4.*), repositories está no nível do projeto build.gradle, em allprojects{}.
    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

Executar o código

No Android Studio, crie e inicie o aplicativo.

  1. Selecione Iniciar.
  2. O cliente de chat ingressa na conversa de chat e você pode começar a digitar e enviar mensagens.
  3. Se o cliente não puder ingressar no chat e você obtiver erros de falha chatJoin, verifique se o token de acesso do usuário é válido e se o usuário foi adicionado ao chat por uma chamada à API REST ou usando a interface de linha de comando az.

Animação GIF que mostra um exemplo de como o projeto é executado em um dispositivo Android.

Importante

Este recurso dos Serviços de Comunicação do Azure estão atualmente em versão prévia. Os recursos em versão prévia estão disponíveis publicamente e podem ser usados por todos os clientes novos e existentes da Microsoft.

Versões prévias das APIs e dos SDKs são fornecidas sem um contrato de nível de serviço. É recomendável que você não as use para cargas de trabalho de produção. Alguns recursos podem não ter suporte ou recursos podem ser restritos.

Para obter mais informações, consulte Termos de Uso Complementares de Versões Prévias do Microsoft Azure.

Obtenha o aplicativo iOS de exemplo no SDK do iOS de exemplos do Azure para chat na biblioteca de interface do usuário dos Serviços de Comunicação do Azure de software livre para iOS.

Pré-requisitos

  • Uma conta e uma assinatura do Azure ativas. Crie uma conta gratuitamente.
  • Um Mac executando Xcode 13 ou posterior e um certificado de desenvolvedor válido instalado em seu conjunto de chaves. CocoaPods também precisa ser instalado para buscar dependências.
  • Uma implantação do recurso Serviços de Comunicação do Azure. Anotação da URL do ponto de extremidade.
  • Um token de acesso dos Serviços de Comunicação do Azure e um identificador de usuário.
  • Uma conversa de chat dos Serviços de Comunicação do Azure. Adicione o usuário que você criou na etapa anterior a esta conversa de chat.

Configurar o projeto

Conclua as seções a seguir para configurar o projeto de início rápido.

Criar um projeto do Xcode

No Xcode, crie um novo projeto.

  1. No menu Arquivo, selecione Novo>Projeto.

  2. Em Escolher um modelo para o novo projeto, selecione a plataforma iOS e selecione o modelo de aplicativo App. O início rápido usa os storyboards do UIKit.

    Captura de tela que mostra o diálogo do novo projeto do Xcode, com o iOS e o modelo de aplicativo selecionados.

  3. Em Escolher opções para o novo projeto, insira UILibraryQuickStart em nome do produto. Em interface, selecione Storyboard. O início rápido não cria testes, portanto, você pode desmarcar a caixa de seleção Incluir testes.

    Captura de tela que mostra a definição de novas opções de projeto no Xcode.

Instalar o pacote e as dependências

  1. (Opcional) Para MacBook com M1, instale e habilite Rosetta no Xcode.

  2. Execute pod init no diretório raiz do projeto para criar um Podfile. Se você encontrar um erro, atualize CocoaPods para a versão atual.

  3. Adicione o código a seguir ao Podfile. Substitua UILibraryQuickStart pelo nome do seu projeto.

    platform :ios, '14.0'
    
    target 'UILibraryQuickStart' do
        use_frameworks!
        pod 'AzureCommunicationUIChat', '1.0.0-beta.5'
    end
    
  4. Execute pod install --repo-update.

  5. No Xcode, abra o arquivo xcworkspace gerado.

Desativar a área restrita de script do usuário

Alguns dos scripts nas bibliotecas vinculadas gravam arquivos durante o processo de compilação. Para habilitar a gravação de arquivos, desabilite a área restrita de script do usuário no Xcode.

No projeto Xcode, em Configurações de Build, defina a opção Área Restrita de Script do Usuário como Não. Para localizar a configuração, altere o filtro de Básico para Todos ou use a barra de pesquisa.

Captura de tela que mostra a opção Configurações de Build para desativar a Área Restrita de Script do Usuário.

Inicializar a composição

Para inicializar a composição:

  1. Acesse ViewController.

  2. Adicione o código a seguir para inicializar os componentes da composição de um chat. Substitua <USER_ID> pelo identificador de usuário. Substitua <USER_ACCESS_TOKEN> pelo seu token de acesso. Substitua <ENDPOINT_URL> pela URL do ponto de extremidade. Substitua <THREAD_ID> pela ID da conversa de chat. Substitua <DISPLAY_NAME> pelo seu nome. (O limite de comprimento da cadeia de caracteres para <DISPLAY_NAME> é de 256 caracteres.)

    import UIKit
    import AzureCommunicationCommon
    import AzureCommunicationUIChat
    
    class ViewController: UIViewController {
        var chatAdapter: ChatAdapter?
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            let button = UIButton()
            var configuration = UIButton.Configuration.filled()
            configuration.contentInsets = NSDirectionalEdgeInsets(top: 10.0, leading: 20.0, bottom: 10.0, trailing: 20.0)
            configuration.baseBackgroundColor = .systemBlue
            button.configuration = configuration
            button.layer.cornerRadius = 10
            button.setTitle("Start Experience", for: .normal)
            button.addTarget(self, action: #selector(startChatComposite), for: .touchUpInside)
    
            button.translatesAutoresizingMaskIntoConstraints = false
            self.view.addSubview(button)
            button.widthAnchor.constraint(equalToConstant: 200).isActive = true
            button.heightAnchor.constraint(equalToConstant: 50).isActive = true
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        }
    
        @objc private func startChatComposite() {
            let communicationIdentifier = CommunicationUserIdentifier("<USER_ID>")
            guard let communicationTokenCredential = try? CommunicationTokenCredential(
                token: "<USER_ACCESS_TOKEN>") else {
                return
            }
    
            self.chatAdapter = ChatAdapter(
                endpoint: "<ENDPOINT_URL>", identifier: communicationIdentifier,
                credential: communicationTokenCredential,
                threadId: "<THREAD_ID>",
                displayName: "<DISPLAY_NAME>")
    
            Task { @MainActor in
                guard let chatAdapter = self.chatAdapter else {
                    return
                }
                try await chatAdapter.connect()
                let chatCompositeViewController = ChatCompositeViewController(
                    with: chatAdapter)
    
                let closeItem = UIBarButtonItem(
                    barButtonSystemItem: .close,
                    target: nil,
                    action: #selector(self.onBackBtnPressed))
                chatCompositeViewController.title = "Chat"
                chatCompositeViewController.navigationItem.leftBarButtonItem = closeItem
    
                let navController = UINavigationController(rootViewController: chatCompositeViewController)
                navController.modalPresentationStyle = .fullScreen
    
                self.present(navController, animated: true, completion: nil)
            }
        }
    
        @objc func onBackBtnPressed() {
            self.dismiss(animated: true, completion: nil)
            Task { @MainActor in
                self.chatAdapter?.disconnect(completionHandler: { [weak self] result in
                    switch result {
                    case .success:
                        self?.chatAdapter = nil
                    case .failure(let error):
                        print("disconnect error \(error)")
                    }
                })
            }
        }
    }
    
    
  3. Se você optar por colocar o modo de exibição de chat em um quadro menor que o tamanho da tela, recomendamos a largura mínima de 250 e a altura mínima de 300.

Executar o código

Para criar e executar seu aplicativo no simulador do iOS, selecione Produto>Executar. Você também pode usar o atalho de teclado (⌘-R). Em seguida, teste a experiência de chat no simulador.

  1. Selecione Iniciar experiência.
  2. O cliente de chat ingressa na conversa de chat e você pode começar a digitar e enviar mensagens.
  3. Se o cliente não puder ingressar na conversa e você obter erros de falha de chatJoin, verifique se o token de acesso do usuário é válido e se o usuário foi adicionado à conversa de chat por chamada à API REST ou usando a interface de linha de comando az.

Animação GIF que demonstra a aparência final do início rápido do aplicativo iOS.

Limpar os recursos

Se desejar limpar e remover uma assinatura dos Serviços de Comunicação do Azure, você poderá excluir o recurso ou grupo de recursos.

Excluir o grupo de recursos também exclui todos os recursos associados a ele.

Saiba mais sobre como limpar recursos.