Partilhar via


Usar componentes da interface de utilizador para bate-papo

Introdução à Biblioteca de UI dos Serviços de Comunicação do Azure para integrar rapidamente experiências de comunicação nas suas aplicações. Este artigo descreve como integrar componentes de chat da biblioteca de interface do utilizador numa aplicação e configurar a experiência para os utilizadores da aplicação.

A Biblioteca da Interface do Usuário dos Serviços de Comunicação do Azure renderiza uma experiência de chat completa diretamente em seu aplicativo. Ele cuida da conexão aos serviços de chat dos Serviços de Comunicação do Azure e atualiza a presença de um participante automaticamente. Como desenvolvedor, você precisa decidir onde na experiência do usuário do seu aplicativo deseja que a experiência de bate-papo comece e criar apenas os recursos dos Serviços de Comunicação do Azure, conforme necessário.

Nota

Para obter mais informações sobre a biblioteca da interface do usuário da Web, consulte o livro de histórias da biblioteca da interface do usuário da Web.

Pré-requisitos

Aceda a estes inícios rápidos

Aceda a estes livros de histórias

Importante

Esta funcionalidade dos Serviços de Comunicação do Azure está atualmente em pré-visualização. Os recursos na visualização estão disponíveis publicamente e podem ser usados por todos os clientes novos e existentes da Microsoft.

As APIs e SDKs de visualização são fornecidos sem um contrato de nível de serviço. Recomendamos que você não os use para cargas de trabalho de produção. Determinadas funcionalidades podem não ser suportadas ou recursos podem ser restringidos.

Para obter mais informações, consulte Termos de uso suplementares para visualizações do Microsoft Azure.

Obtenha a aplicação Android de exemplo em Exemplos do Azure SDK para Android para bate-papo na Biblioteca de Interface do Utilizador dos Serviços de Comunicação do Azure de código aberto para Android.

Pré-requisitos

Configurar o projeto

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

Criar um novo projeto Android

No Android Studio, crie um novo projeto.

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

  2. Em Novo Projeto, selecione o modelo de projeto Atividade com Visualizações Vazias.

    Captura de ecrã que mostra a caixa de diálogo Novo Projeto no Android Studio com a opção Atividade de Vistas Vazias selecionada.

  3. Selecione Avançar.

  4. Nomeie o projeto UILibraryQuickStart. Para idioma, 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 novas opções de 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 seus scripts Gradle de projeto, assegure-se de que os seguintes repositórios estejam adicionados. Para Android Studio (2020.*), repositories está em settings.gradle, em dependencyResolutionManagement(Gradle version 6.8 or greater). Para versões anteriores do Android Studio (4.*), repositories está no nível build.gradle do projeto, 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 no thread de bate-papo e você pode começar a digitar e enviar mensagens.
  3. Se o cliente não puder ingressar no thread e você vir chatJoin erros de falha, verifique se o token de acesso do usuário é válido e se o usuário foi adicionado ao thread de chat por chamada à API REST ou usando a interface de linha de az comando.

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

Importante

Esta funcionalidade dos Serviços de Comunicação do Azure está atualmente em pré-visualização. Os recursos na visualização estão disponíveis publicamente e podem ser usados por todos os clientes novos e existentes da Microsoft.

As APIs e SDKs de visualização são fornecidos sem um contrato de nível de serviço. Recomendamos que você não os use para cargas de trabalho de produção. Determinadas funcionalidades podem não ser suportadas ou recursos podem ser restringidos.

Para obter mais informações, consulte Termos de uso suplementares para visualizações do Microsoft Azure.

Obtenha a aplicação de exemplo para iOS em SDK de Exemplos do Azure para bate-papo, na Biblioteca de UI dos Serviços de Comunicação Azure, de código aberto, para iOS.

Pré-requisitos

Configurar o projeto

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

Criar um novo projeto Xcode

No Xcode, crie um novo projeto.

  1. No menu Arquivo , selecione Novo>Projeto.

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

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

  3. Em Escolha opções para seu novo projeto, para o nome do produto, digite UILibraryQuickStart. Para a 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 configuração de novas opções de projeto no Xcode.

Instalar o pacote e as dependências

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

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

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

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

  5. No Xcode, abra o arquivo xcworkspace gerado.

Desativar o User Script Sandboxing

Alguns dos scripts dentro das bibliotecas vinculadas gravam arquivos durante o processo de compilação. Para habilitar a gravação de arquivos, desative o User Script Sandboxing no Xcode.

No projeto Xcode, em Configurações de compilação, defina a opção Área restrita de script de usuário como Não. Para encontrar 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 compilação para desativar o User Script Sandboxing.

Inicializar o composto

Para inicializar o composto:

  1. Aceda a ViewController.

  2. Adicione o seguinte código para inicializar seus componentes compostos para um bate-papo. Substitua <USER_ID> pelo identificador do usuário. Substitua <USER_ACCESS_TOKEN> pelo seu token de acesso. Substitua <ENDPOINT_URL> pelo URL do ponto final. Substitua <THREAD_ID> pelo ID do seu tópico de chat. Substitua <DISPLAY_NAME> pelo seu nome. (O limite de comprimento 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 a visualização de bate-papo em um quadro menor do que o tamanho da tela, recomendamos a largura mínima de 250 e a altura mínima de 300.

Executar o código

Para compilar e executar a sua aplicação no simulador iOS, selecione Produto>Executar. Também pode utilizar o atalho de teclado (⌘-R). Em seguida, experimente a experiência de bate-papo no simulador.

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

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

Limpar recursos

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

A exclusão do grupo de recursos também exclui quaisquer outros recursos associados a ele.

Saiba mais sobre a limpeza de recursos.