Dela via


Använda gränssnittskomponenter för chatt

Kom igång med Azure Communication Services UI Library för att snabbt integrera kommunikationsupplevelser i dina program. Den här artikeln beskriver hur du integrerar chatten för användargränssnittsbiblioteket i ett program och konfigurerar upplevelsen för dina appanvändare.

Azure Communication Services UI Library återger en fullständig chattupplevelse direkt i ditt program. Den tar hand om att ansluta till Azure Communication Services chatttjänster och uppdaterar en deltagares närvaro automatiskt. Som utvecklare måste du bestämma var i appens användarupplevelse du vill att chattupplevelsen ska starta och endast skapa Azure Communication Services-resurserna efter behov.

Anmärkning

Mer information om webbgränssnittsbiblioteket finns i webbgränssnittsbibliotekets sagobok.

Förutsättningar

Få åtkomst till de här snabbstarterna

Få åtkomst till dessa sagoböcker

Viktigt!

Den här funktionen i Azure Communication Services är för närvarande i förhandsversion. Funktioner i förhandsversionen är offentligt tillgängliga och kan användas av alla nya och befintliga Microsoft-kunder.

Förhandsversions-API:er och SDK:er tillhandahålls utan ett serviceavtal. Vi rekommenderar att du inte använder dem för produktionsarbetsbelastningar. Vissa funktioner kanske inte stöds eller så kan funktionerna vara begränsade.

Mer information finns i Kompletterande villkor för användning av Microsoft Azure-förhandsversioner.

Hämta Android-exempelprogrammet på Azure Samples Android SDK för chatt i Azure Communication Services UI-biblioteket med öppen källkod för Android.

Förutsättningar

Konfigurera projektet

Slutför följande avsnitt för att konfigurera projektet.

Skapa ett nytt Android-projekt

Skapa ett nytt projekt i Android Studio.

  1. På menyn Arkiv väljer du Nytt>nytt projekt.

  2. Välj projektmallen Aktivitet med tomma vyerNytt projekt.

    Skärmbild som visar dialogrutan Nytt projekt i Android Studio med aktiviteten Tomma vyer markerad.

  3. Välj Nästa.

  4. Ge projektet namnet UILibraryQuickStart. För språk väljer du Java/Kotlin. Som minsta SDK väljer du API 23: Android 6.0 (Marshmallow) eller senare.

  5. Välj Slutför.

    Skärmbild som visar nya projektalternativ och knappen Slutför markerad.

Installera paketen

Slutför följande avsnitt för att installera nödvändiga programpaket.

Lägga till ett beroende

I filen UILibraryQuickStart/app/build.gradle på appnivå (i appmappen) lägger du till följande beroende:

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

Lägga till Maven-lagringsplatser

Azure-paketlagringsplatsen krävs för att integrera biblioteket.

Så här lägger du till lagringsplatsen:

  1. Kontrollera att följande lagringsplatser läggs till i projektets Gradle-skript. För Android Studio (2020.*) repositories finns i settings.gradle, under dependencyResolutionManagement(Gradle version 6.8 or greater). För tidigare versioner av Android Studio (4.*) repositories finns på projektnivå build.gradle, under allprojects{}.
    // dependencyResolutionManagement
    repositories {
        ...
        maven {
            url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1"
        }
        ...
    }

Kör koden

Skapa och starta programmet i Android Studio.

  1. Välj Starta.
  2. Chattklienten ansluter till chatttråden och du kan börja skriva och skicka meddelanden.
  3. Om klienten inte kan ansluta till tråden och du ser chatJoin misslyckade fel kontrollerar du att användarens åtkomsttoken är giltig och att användaren har lagts till i chatttråden av REST API-anropet eller med hjälp av kommandoradsgränssnittet az .

GIF-animering som visar ett exempel på hur projektet körs på en Android-enhet.

Viktigt!

Den här funktionen i Azure Communication Services är för närvarande i förhandsversion. Funktioner i förhandsversionen är offentligt tillgängliga och kan användas av alla nya och befintliga Microsoft-kunder.

Förhandsversions-API:er och SDK:er tillhandahålls utan ett serviceavtal. Vi rekommenderar att du inte använder dem för produktionsarbetsbelastningar. Vissa funktioner kanske inte stöds eller så kan funktionerna vara begränsade.

Mer information finns i Kompletterande villkor för användning av Microsoft Azure-förhandsversioner.

Hämta exempelprogrammet för iOS på Azure Samples iOS SDK för chatt i Azure Communication Services UI-biblioteket med öppen källkod för iOS.

Förutsättningar

Konfigurera projektet

Slutför följande avsnitt för att konfigurera snabbstartsprojektet.

Skapa ett nytt Xcode-projekt

Skapa ett nytt projekt i Xcode.

  1. Gå till Arkiv-menyn och välj Nytt>Projekt.

  2. I Välj en mall för ditt nya projekt väljer du iOS-plattformen och väljer programmallen App . Snabbstarten använder UIKit-storyboards.

    Skärmbild som visar dialogrutan Xcode nytt projekt med iOS och appmallen markerad.

  3. I Välj alternativ för det nya projektet anger du UILibraryQuickStart som produktnamn. För gränssnittet väljer du Storyboard. Snabbstarten skapar inte tester, så du kan avmarkera kryssrutan Inkludera tester .

    Skärmbild som visar hur du ställer in nya projektalternativ i Xcode.

Installera paketet och beroenden

  1. (Valfritt) För MacBook med M1 installerar och aktiverar du Rosetta i Xcode.

  2. I projektrotkatalogen kör du pod init för att skapa en Podfile. Om du får ett fel uppdaterar du CocoaPods till den aktuella versionen.

  3. Lägg till följande kod i poddfilen. Ersätt UILibraryQuickStart med projektnamnet.

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

  5. Öppna den genererade xcworkspace-filen i Xcode.

Inaktivera sandbox-miljö för användarskript

Några av skripten i de länkade biblioteken skriver filer under byggprocessen. Om du vill aktivera filskrivning inaktiverar du sandbox-miljön för användarskript i Xcode.

I Xcode-projektet, under Bygginställningar, anger du alternativet Sandboxing för användarskript till Nej. Om du vill hitta inställningen ändrar du filtret från Basic till Alla eller använder sökfältet.

Skärmbild som visar alternativet Skapa inställningar för att inaktivera sandbox-miljö för användarskript.

Initiera kompositen

För att initiera kompositen:

  1. Gå till ViewController.

  2. Lägg till följande kod för att initiera dina sammansatta komponenter för en chatt. Ersätt <USER_ID> med användaridentifierare. Ersätt <USER_ACCESS_TOKEN> med din åtkomsttoken. Ersätt <ENDPOINT_URL> med slutpunkts-URL:en. Ersätt <THREAD_ID> med ditt chatttråds-ID. Ersätt <DISPLAY_NAME> med ditt namn. (Stränglängdsgränsen för <DISPLAY_NAME> är 256 tecken).

    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. Om du väljer att placera chattvyn i en ram som är mindre än skärmstorleken rekommenderar vi den minsta bredden på 250 och den minsta höjden på 300.

Kör koden

Om du vill skapa och köra din app i iOS-simulatorn väljer du Produktkörning>. Du kan också använda kortkommandot (⌘-R). Prova sedan chattupplevelsen i simulatorn.

  1. Välj Startupplevelse.
  2. Chattklienten ansluter till chatttråden och du kan börja skriva och skicka meddelanden.
  3. Om klienten inte kan ansluta till tråden och du ser chatJoin felmeddelanden, kontrollerar du att användarens åtkomsttoken är giltig och att användaren har lagts till i chatttråden genom REST API-anrop eller genom att använda az-kommandoradsgränssnittet.

GIF-animering som visar det sista utseendet och känslan i snabbstartsappen iOS.

Rensa resurser

Om du vill rensa och ta bort en Azure Communication Services-prenumeration kan du ta bort resursen eller resursgruppen.

Om du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort.

Läs mer om att rensa resurser.