Integrieren von Amazon Connect Chat in eine mobile Anwendung

In den Themen in diesem Abschnitt wird erläutert, wie Sie eine benutzerdefinierte Amazon Connect-Chat-Benutzeroberfläche in Ihrer mobilen Anwendung erstellen. Dazu müssen Sie Ihr eigenes Chat-Backend verwenden. Sie müssen auch die Amazon Connect StartChatContact API verwenden, um den Kontakt zu initiieren, und die Participant Service APIs für die Verwaltung der Chat-Teilnahme.

Anmerkung

Die StartChatContact API erfordert Signature AWS Version 4. Daher sollten erste Anfragen über Ihr persönliches Chat-Backend weitergeleitet werden. Nachfolgende API-Aufrufe an den Amazon Connect Participant Service (ACPS) können direkt von der mobilen Anwendung aus bearbeitet werden.

Integrations-Workflow

Das folgende Diagramm zeigt den Programmierablauf zwischen einem Kunden, der eine mobile App verwendet, und einem Kundendienstmitarbeiter. Nummerierter Text im Diagramm entspricht nummeriertem Text unter dem Bild.

Im Diagramm:

1. Wenn ein Kunde einen Chat in der mobilen App startet, sendet die App mithilfe der StartChatContact API eine Anfrage an Amazon Connect. Dazu sind bestimmte Parameter erforderlich, z. B. der API-Endpunkt und die IDs für die Instance und den Gesprächsablauf, um den Chat zu authentifizieren und zu initiieren.

2. Die StartChatContact API interagiert mit Ihrem Back-End-System, um ein Teilnehmer-Token und eine Kontakt-ID zu erhalten, die als eindeutige Kennungen für die Chat-Sitzung dienen.

3. Das Backend der App verwendet das Teilnehmer-Token und die Kontakt-ID, um mit Amazon Connect zu kommunizieren und die Chat-Sitzung des Kunden einzurichten.

4. Das Amazon Connect Participant SDK wird mit dem Teilnehmer-Token aktiviert und bereitet die App auf den Chat vor.

5. Das Teilnehmer-SDK verwendet die Sitzungsdetails, um eine sichere Kommunikationslinie mit Amazon Connect einzurichten.

6. Amazon Connect antwortet, indem es eine WebSocket URL über das Teilnehmer-SDK bereitstellt. Die App verwendet diese URL, um eine WebSocket Verbindung für Echtzeit-Messaging herzustellen.

7. Amazon Connect weist dem Chat basierend auf dem Gesprächsablauf und dem Weiterleitungsprofil einen Support-Kundendienstmitarbeiter zu.

8. Nachrichten vom Kundendienstmitarbeiter werden über die WebSocket Verbindung gesendet. Die mobile App hört auf , WebSocket um Nachrichten vom Kundendienstmitarbeiter zu empfangen und anzuzeigen und Kundennachrichten zurückzusenden.

Voraussetzungen

Sie müssen über die folgenden Voraussetzungen verfügen, um Amazon Connect Chat in eine mobile App zu integrieren:

• Erstellen einer Amazon Connect-Instance.

  –oder–

  Wenn Sie über eine Connect-Instance verfügen, führen Sie diese Schritte unter aus, GitHub um den Chat für die Instance zu aktivieren.

• Erstellen Sie einen Amazon Connect Contact Flow, bereit für den Empfang von Chat-Kontakten.

  • Notieren Sie sich die Instance-ID .

  • Suchen Sie die contactFlowId für die Beispiel für den Flow bei eingehenden Anrufen (Erstkontakterfahrung).

• Stellen Sie ein benutzerdefiniertes Amazon Connect-Chat-Backend bereit. Weitere Informationen finden Sie in der API startChatContact-Vorlage auf GitHub.

  • Stellen Sie eine startChatContact Lambda- CloudFront Funktionsvorlage bereit.

  • Fügen Sie die region, API_GATEWAY_IDcontactFlowId, und instanceID zur Config-Datei der Vorlage hinzu.

Installieren von Bibliotheken

Sie starten den Integrationsprozess, indem Sie die Bibliotheken für iOS und Android installieren. Sie müssen beide Bibliothekssätze installieren.

• iOS : Gehen Sie zum aws-sdk-iosRepository auf GitHub und installieren Sie Folgendes:

  pod 'AWSCore'
  pod 'AWSConnectParticipant'
  pod 'Starscream', '~> 4.0'

• Android : Gehen Sie zum aws-sdk-androidRepository auf GitHub und installieren Sie Folgendes:

  implementation("com.amazonaws:aws-android-sdk-core:2.73.0")
  implementation("com.amazonaws:aws-android-sdk-connectparticipant:2.73.0")

Konfigurieren von AWS-Anmeldeinformationen

Nachdem Sie beide Bibliothekssätze installiert haben, registrieren Sie sich beim Amazon Connect Service und dem Amazon Connect Participant Service. Verwenden Sie dazu in den Config-Dateien für jedes Betriebssystem Ihre AWS Anmeldeinformationen und ersetzen Sie die secretKey Werte accessKey und durch leere Zeichenfolgen (“”), wie in den folgenden Beispielen gezeigt.

Wichtig

Sie müssen die Region angeben, in der Sie testen.

• iOS : Wird AWSStaticCredentialsProvider für die Registrierung von Amazon Connect Service und Participant Service verwendet.

  private let config = Config()
   let credentials = AWSStaticCredentialsProvider(accessKey: "", secretKey: "")
   let participantService = AWSServiceConfiguration(region: config.region, credentialsProvider: credentials)!
   AWSConnectParticipant.register(with: participantService, forKey: "")
   connectParticipantClient = AWSConnectParticipant.init(forKey: "")

• Android : Initialisieren AmazonConnectParticipantAsyncClient und legen Sie die Region fest.

  private var connectParticipantClient: AmazonConnectParticipantAsyncClient = AmazonConnectParticipantAsyncClient()
  private val chatConfiguration = Config
  init {
        connectParticipantClient.setRegion(Region.getRegion(chatConfiguration.region))
       }

Anmerkung

Sie können die Config-Dateien von herunterladen GitHub. Sie müssen beide Config-Dateien bearbeiten.

• Config-Datei für iOS

• Konfigurationsdatei für Android

Starten eines Chats

Als Nächstes müssen Sie die von Amazon Connect StartChatContact bereitgestellteAPI integrieren. Die API startet das Gespräch, indem sie die Absicht des Kunden zum Chatten mit einem Kundendienstmitarbeiter registriert.

Anmerkung

Um eine StartChatContact Lambda-Funktion bereitzustellen, verwenden Sie die CloudFront Vorlage auf GitHub.

Für iOS und Android erfordert der StartChatContact API-Aufruf mehrere Informationen:

• InstanceId: Die Kennung der Amazon Connect-Instance.

• ContactFlowId: Die Kennung des Gesprächsablaufs für den Chat.

• ParticipantDetails: Informationen über den Teilnehmer, z. B. der Anzeigename des Kunden.

• Attributes: Zusätzliche Informationen über den Kontakt, die für das Routing oder die Verarbeitung des Chats in Amazon Connect nützlich sein können.

Wichtig

Sie müssen AWS Signature Version 4 (SigV4) verwenden, um den API-Aufruf zu signieren. Der SigV4-Prozess fügt Authentifizierungsinformationen zu AWS API-Anforderungen hinzu, die über HTTP gesendet werden. Für mobile Clients empfehlen wir, den Signaturprozess serverseitig durchzuführen. Ihre mobile App sendet eine Anfrage an Ihren Server, der die Anfrage dann signiert und an Amazon Connect weiterleitet. Dies trägt dazu bei, Ihre -AWSAnmeldeinformationen zu sichern.

Für iOS:

func startChatSession(displayName: String, completion: 
    @escaping (Result<StartChatResponse, Error>) -> Void) {
    // Your back end server will handle SigV4 signing and make the API call to Amazon Connect 
    // Use the completion handler to process the response or error 
}

Für Android:

// Make a network call to your back end server 
suspend fun startChatSession(displayName: String): StartChatResponse {
    // Your back end server will handle SigV4 signing if needed and make the 
    // API call to Amazon Connect 
    // Handle the response or error accordingly 
}

Erstellen einer Teilnehmerverbindung

Sie verwenden die Details, die Sie von einem StartChatContact API-Aufruf erhalten haben, um eine Teilnehmerverbindung zu erstellen. Anschließend rufen Sie das AWS Connect Teilnehmer SDK auf, das die WebSocket URL zurückgibt, die zum Herstellen der Verbindung erforderlich ist.

Das folgende Beispiel zeigt, wie Sie eine Verbindung für iOS herstellen:

// Swift code snippet for iOS participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
func createParticipantConnection() {
    let createParticipantConnectionRequest = AWSConnectParticipantCreateParticipantConnectionRequest()
    createParticipantConnectionRequest?.participantToken = self.participantToken
    createParticipantConnectionRequest?.types = ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
    connectParticipantClient?
        .createParticipantConnection (createParticipantConnectionRequest!)
        .continueWith(block: {
            (task) -> Any? in
            self.connectionToken = task.result!.connectionCredentials!.connectionToken
            self.websocketUrl = task.result!.websocket!.url
            return nil
        }
        ).waitUntilFinished()
    }

Das folgende Beispiel zeigt, wie Sie eine Verbindung für Android herstellen:

// Kotlin code snippet for Android participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
fun createParticipantConnection(
    _participantToken: String,
      handler: AsyncHandler<CreateParticipantConnectionRequest, CreateParticipantConnectionResult>
    ) {
          val createParticipantConnectionRequest = CreateParticipantConnectionRequest().apply {
              setType(listOf("WEBSOCKET", "CONNECTION_CREDENTIALS"))
              participantToken = _participantToken
       }
          connectParticipantClient.createParticipantConnectionAsync(
              createParticipantConnectionRequest,
              handler
        )
    }

Verwenden von WebSocket Verbindungen

Verwenden Sie das Teilnehmer-SDK, um eine WebSocket URL für die Chat-Verbindung zu erhalten.

• Um die WebSocket Verwaltung zu implementieren, verwenden Sie vorhandene Lösungen oder implementieren Sie Ihre eigenen.

• Um Websocket-Nachrichten und -Ereignisse zu verarbeiten, implementieren Sie Ihre eigene Lösung oder verwenden Sie unsere Lösungen für iOS und Android .

• Stellen Sie sicher, dass Sie alle Nachrichten- und Ereignistypen abdecken:

  • Fall typing = "application/vnd.amazonaws.connect.event.typing"

  • Fall messageDelivered = "application/vnd.amazonaws.connect.event.message.delivered"

  • Fall messageRead = "application/vnd.amazonaws.connect.event.message.read"

  • Fall metaData = "application/vnd.amazonaws.connect.event.message.metadata"

  • Fall joined = "application/vnd.amazonaws.connect.event.participant.joined"

  • Fall left = "application/vnd.amazonaws.connect.event.participant.left"

  • Fall ended = "application/vnd.amazonaws.connect.event.chat.ended"

  • Fall plainText = "text/plain"

  • Fall richText = "text/markdown"

  • Fall interactiveText = "application/vnd.amazonaws.connect.message.interactive"

Die folgende Abbildung zeigt eine Standard-Instance von Connect Chat. Zahlen im Bild entsprechen dem folgenden nummerierten Text.

Beginnen Sie im Bild oben:

1. Der Tippindikator zeigt an, wer eine Nachricht eingibt.

2. In diesem Beispiel werden Klartextnachrichten verwendet. Sie können bei Bedarf die Verwendung von Markdown aktivieren.

3. Die interaktive Listensteuerung bietet Benutzern Listen mit Auswahlmöglichkeiten, z. B. Kundendienst oder Abrechnung.

4. Interaktive Schnellantworten bieten vorprogrammierte Antworten auf häufig gestellte Fragen oder Wortgruppen.

Senden von Nachrichten

Sie verwenden die SendMessage Funktion , um Chat-Nachrichten zu senden.

/// To send a message using the Participant SDK.
/// - Parameters:
///   - messageContent: The content of the message.
///   - connectionToken: The authentication token associated with the connection - Received from Participant Connection
///   - contentType: text/plain, text/markdown, application/json, and application/vnd.amazonaws.connect.message.interactive.response
func sendChatMessage(messageContent: String) {
    let sendMessageRequest = AWSConnectParticipantSendMessageRequest()
    sendMessageRequest?.connectionToken = self.connectionToken
    sendMessageRequest?.content = messageContent
    sendMessageRequest?.contentType = "text/plain"
    connectParticipantClient?
        .sendMessage(sendMessageRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Ereignisse verarbeiten

Verwenden Sie die -SendEventFunktion im Teilnehmer-SDK für Ereignisse wie die Eingabe und das Lesen von Belegen.

/// Sends an event such as typing, joined, left etc.
/// - Parameters:
///   - contentType: The content type of the request
///   - content: The content of the event to be sent (for example, message text). For content related to message receipts, this is supported in the form of a JSON string.
func sendEvent(contentType: ContentType, content: String = "") {
    let sendEventRequest = AWSConnectParticipantSendEventRequest()
    sendEventRequest?.connectionToken = self.connectionToken
    sendEventRequest?.contentType = contentType.rawValue
    sendEventRequest?.content = content // Set the content here
    connectParticipantClient?
        .sendEvent(sendEventRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Beenden eines Chats

Um einen Chat zu beenden, verwenden Sie die disconnectParticipant Funktion im Teilnehmer-SDK.

/// Disconnects a participant.
/// - Parameter: connectionToken: The authentication token associated with the connection - Received from Participant Connection
func endChat() {
    let disconnectParticipantRequest = AWSConnectParticipantDisconnectParticipantRequest()
    disconnectParticipantRequest?.connectionToken = self.connectionToken
    connectParticipantClient?.disconnectParticipant(disconnectParticipantRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        }).waitUntilFinished()
    self.websocketUrl = nil
}

Quellcode

Die folgenden Beispielprojekte auf GitHub zeigen, wie Sie den Connect-Chat implementieren.

• iOS : iOS Native Chat Demo .

• Android : Android Native Chat Demo .