Udostępnij przez


Użyj komponentów interfejsu użytkownika do czatu

Rozpocznij pracę z biblioteką interfejsu użytkownika usług Azure Communication Services, aby szybko zintegrować środowiska komunikacyjne z aplikacjami. W tym artykule opisano, jak integrować kompozyty czatu biblioteki interfejsu użytkownika z aplikacją oraz jak skonfigurować doświadczenie dla użytkowników aplikacji.

Biblioteka interfejsu użytkownika usług Azure Communication Services renderuje pełne środowisko czatu bezpośrednio w aplikacji. Odpowiada za nawiązywanie połączenia z usługami czatu Azure Communication Services oraz automatyczne aktualizowanie obecności uczestnika. Jako deweloper musisz zdecydować, gdzie w doświadczeniu użytkownika aplikacji chcesz rozpocząć obsługę czatu i tworzyć wyłącznie zasoby Azure Communication Services zgodnie z potrzebami.

Uwaga

Aby uzyskać więcej informacji na temat biblioteki interfejsu użytkownika sieci Web, zobacz podręcznik biblioteki interfejsu użytkownika sieci Web.

Wymagania wstępne

Uzyskiwanie dostępu do tych przewodników Szybki start

Uzyskaj dostęp do tych książeczek

Ważne

Ta funkcja usług Azure Communication Services jest obecnie dostępna w wersji zapoznawczej. Funkcje w wersji zapoznawczej są publicznie dostępne i mogą być używane przez wszystkich nowych i istniejących klientów firmy Microsoft.

Interfejsy API i zestawy SDK w wersji zapoznawczej są udostępniane bez umowy dotyczącej poziomu usług. Zalecamy, aby nie używać ich w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą nie być obsługiwane lub mogą być ograniczone.

Aby uzyskać więcej informacji, zobacz Dodatkowe warunki użytkowania dla wersji zapoznawczych platformy Microsoft Azure.

Pobierz przykładową aplikację na Androida z SDK na czat platformy Azure w otwartoźródłowej bibliotece UI Azure Communication Services dla Androida.

Wymagania wstępne

Konfigurowanie projektu

Wykonaj poniższe sekcje, aby skonfigurować projekt.

Tworzenie nowej aplikacji systemu Android

W programie Android Studio utwórz nowy projekt.

  1. W menu Plik wybierz pozycję Nowy>nowy projekt.

  2. Na Nowy projekt, wybierz szablon projektu Działanie Pusty Widok.

    Zrzut ekranu przedstawiający okno dialogowe Nowy projekt w programie Android Studio z wybranym działaniem Puste widoki.

  3. Wybierz pozycję Dalej.

  4. Nadaj projektowi nazwę UILibraryQuickStart. W polu Język wybierz pozycję Java/Kotlin. W przypadku minimalnej wersji zestawu SDK wybierz pozycję API 23: Android 6.0 (Marshmallow) lub nowszą.

  5. Wybierz pozycję Zakończ.

    Zrzut ekranu przedstawiający nowe opcje projektu i wybrany przycisk Zakończ.

Instalowanie pakietów

Wykonaj poniższe sekcje, aby zainstalować wymagane pakiety aplikacji.

Dodawanie zależności

W pliku UILibraryQuickStart/app/build.gradle na poziomie aplikacji dodaj następującą zależność:

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

Dodawanie repozytoriów Maven

Aby zintegrować bibliotekę, wymagane jest repozytorium pakietów platformy Azure.

Aby dodać repozytorium:

  1. W skryptach narzędzia Gradle projektu upewnij się, że zostały dodane następujące repozytoria. W przypadku programu Android Studio (2020.*) repositories znajduje się w settings.gradle, pod dependencyResolutionManagement(Gradle version 6.8 or greater). W przypadku wcześniejszych wersji programu Android Studio (4.*) repositories znajduje się na poziomie build.gradleprojektu w obszarze allprojects{}.
    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

Uruchamianie kodu

W programie Android Studio skompiluj i uruchom aplikację.

  1. Wybierz pozycję Uruchom.
  2. Klient czatu dołącza do wątku czatu i możesz rozpocząć wpisywanie i wysyłanie wiadomości.
  3. Jeśli klient nie może dołączyć do wątku i widzisz błędy niepowodzenia chatJoin, sprawdź, czy token dostępu użytkownika jest prawidłowy oraz czy użytkownik został dodany do wątku czatu przez wywołanie interfejsu API REST lub przy użyciu interfejsu wiersza poleceń az.

Animacja GIF przedstawiająca przykład uruchamiania projektu na urządzeniu z systemem Android.

Ważne

Ta funkcja usług Azure Communication Services jest obecnie dostępna w wersji zapoznawczej. Funkcje w wersji zapoznawczej są publicznie dostępne i mogą być używane przez wszystkich nowych i istniejących klientów firmy Microsoft.

Interfejsy API i zestawy SDK w wersji zapoznawczej są udostępniane bez umowy dotyczącej poziomu usług. Zalecamy, aby nie używać ich w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą nie być obsługiwane lub mogą być ograniczone.

Aby uzyskać więcej informacji, zobacz Dodatkowe warunki użytkowania dla wersji zapoznawczych platformy Microsoft Azure.

Pobierz przykładową aplikację iOS z Próbek Azure SDK dla czatu na iOS w bibliotece UI typu open source dla usług komunikacyjnych Azure UI Library dla iOS.

Wymagania wstępne

  • Konto platformy Azure i aktywna subskrypcja platformy Azure. Utwórz bezpłatne konto.
  • Komputer Mac z programem Xcode 13 lub nowszym i prawidłowym certyfikatem dewelopera zainstalowanym w pęku kluczy. Aby pobierać zależności, należy również zainstalować cocoaPods.
  • Wdrożony zasób usług Azure Communication Services. Zanotuj adres URL punktu końcowego.
  • Token dostępu usług Azure Communication Services i identyfikator użytkownika.
  • Wątek czatu w usłudze Azure Communication Services. Dodaj użytkownika utworzonego w poprzednim kroku do tego wątku czatu.

Konfigurowanie projektu

Wykonaj poniższe sekcje, aby skonfigurować projekt Szybki start.

Tworzenie nowego projektu Xcode

W programie Xcode utwórz nowy projekt.

  1. W menu Plik wybierz pozycję Nowy>projekt.

  2. W obszarze Wybierz szablon dla nowego projektu wybierz platformę systemu iOS i wybierz szablon Aplikacji. Szybki start wykorzystuje scenorysy UIKit.

    Zrzut ekranu przedstawiający okno dialogowe nowego projektu Xcode z wybranym szablonem aplikacji i systemem iOS.

  3. W obszarze Wybierz opcje nowego projektu wprowadź nazwę produktu UILibraryQuickStart. Dla interfejsu wybierz Scenorys. Szybki start nie tworzy testów, więc można odznaczyć pole wyboru Uwzględnij testy.

    Zrzut ekranu przedstawiający ustawianie nowych opcji projektu w programie Xcode.

Instalowanie pakietu i zależności

  1. (Opcjonalnie) W przypadku komputerów MacBook z językiem M1 zainstaluj i włącz aplikację Rosetta w środowisku Xcode.

  2. W katalogu głównym projektu uruchom polecenie pod init , aby utworzyć plik Podfile. Jeśli wystąpi błąd, zaktualizuj aplikację CocoaPods do bieżącej wersji.

  3. Dodaj następujący kod do pliku Podfile. Zastąp UILibraryQuickStart nazwą projektu.

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

  5. W programie Xcode otwórz wygenerowany plik xcworkspace .

Wyłącz piaskownicę skryptów użytkownika

Niektóre skrypty w połączonych bibliotekach zapisują pliki podczas procesu kompilacji. Aby umożliwić zapisywanie plików, wyłącz piaskownicę skryptów użytkownika w Xcode.

W projekcie Xcode w obszarze Ustawienia kompilacji ustaw opcję Piaskownica skryptu użytkownika na Nie. Aby znaleźć to ustawienie, zmień filtr z Podstawowe na Wszystkie lub użyj paska wyszukiwania.

Zrzut ekranu przedstawiający opcję Ustawienia kompilacji do wyłączenia sandboxowania skryptu użytkownika.

Zainicjuj kompozyt

Do zainicjowania kompozytu:

  1. Przejdź do ViewController.

  2. Dodaj następujący kod, aby zainicjować składniki złożone na potrzeby czatu. Zastąp ciąg <USER_ID> identyfikatorem użytkownika. Zastąp <USER_ACCESS_TOKEN> element tokenem dostępu. Zastąp <ENDPOINT_URL> adresem URL swojego punktu końcowego. Zastąp <THREAD_ID> element identyfikatorem wątku czatu. Zastąp <DISPLAY_NAME> swoim imieniem. (Limit długości ciągu dla <DISPLAY_NAME> to 256 znaków).

    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. Jeśli zdecydujesz się umieścić widok czatu w ramce mniejszej niż rozmiar ekranu, zalecamy minimalną szerokość 250 i minimalną wysokość 300.

Uruchamianie kodu

Aby skompilować i uruchomić aplikację w symulatorze systemu iOS, wybierz pozycję Uruchom produkt>. Możesz również użyć skrótu klawiaturowego (⌘-R). Następnie wypróbuj środowisko czatu w symulatorze.

  1. Wybierz pozycję Rozpocznij doświadczenie.
  2. Klient czatu dołącza do wątku czatu i możesz rozpocząć wpisywanie i wysyłanie wiadomości.
  3. Jeśli klient nie może dołączyć do wątku i widzisz chatJoin komunikaty o błędach, sprawdź, czy token dostępu użytkownika jest prawidłowy oraz czy użytkownik został dodany do wątku czatu poprzez wywołanie API REST lub przy użyciu interfejsu wiersza polecenia AZ.

Animacja GIF, która pokazuje ostateczny wygląd i działanie aplikacji szybki start dla systemu iOS.

Czyszczenie zasobów

Jeśli chcesz wyczyścić i usunąć subskrypcję usług Azure Communication Services, możesz usunąć zasób lub grupę zasobów.

Usunięcie grupy zasobów powoduje również usunięcie wszelkich innych skojarzonych z nią zasobów.

Dowiedz się więcej o czyszczeniu zasobów.