통합 워크플로 필수 조건 라이브러리 설치 AWS 보안 인증 정보 구성 채팅 시작하기 참가자 연결 생성 WebSocket 연결 사용 메시지 보내기 이벤트 처리 채팅 종료하기 소스 코드

Amazon Connect 채팅을 모바일 애플리케이션에 통합

이 섹션의 항목에서는 모바일 애플리케이션에서 사용자 지정 Amazon Connect 채팅 UI를 구축하는 방법을 설명합니다. 이를 위해서는 자체 채팅 백엔드를 사용해야 합니다. 또한 Amazon Connect StartChatContactAPI를 사용하여 연락을 시작하고 참여자 서비스 API를 사용하여 채팅 참여를 관리해야 합니다.

참고

StartChatContactAPI에는 AWS 서명 버전 4 서명이 필요합니다. 따라서 초기 요청은 개인 채팅 백엔드를 통해 라우팅해야 합니다. Amazon Connect 참여자 서비스 (ACPS) 에 대한 후속 API 호출은 모바일 애플리케이션에서 직접 처리할 수 있습니다.

통합 워크플로

다음 다이어그램은 모바일 앱을 사용하는 고객과 상담원 간의 프로그래밍 흐름을 보여줍니다. 다이어그램에서 번호가 매겨진 텍스트는 이미지 아래에 있는 번호가 매겨진 텍스트에 해당합니다.

다이어그램에서

고객이 모바일 앱에서 채팅을 시작하면 앱은 StartChatContactAPI를 사용하여 Amazon Connect에 요청을 보냅니다. 이를 위해서는 채팅을 인증하고 시작하기 위한 인스턴스 및 통화 흐름의 API 엔드포인트 및 ID와 같은 특정 파라미터가 필요합니다.
StartChatContactAPI는 백엔드 시스템과 상호 작용하여 채팅 세션의 고유 식별자 역할을 하는 참가자 토큰 및 연락처 ID를 얻습니다.
앱의 백엔드는 참가자 토큰과 연락처 ID를 사용하여 Amazon Connect와 통신하고 고객의 채팅 세션을 설정합니다.
Amazon Connect 참가자 SDK는 참가자 토큰을 사용하여 활성화되어 채팅에 사용할 앱을 준비합니다.
참가자 SDK는 세션 세부 정보를 사용하여 Amazon Connect와의 안전한 통신 회선을 구축합니다.
Amazon Connect는 참가자 SDK를 통해 WebSocket URL을 제공하여 응답합니다. 앱은 이 URL을 사용하여 실시간 메시징을 위한 WebSocket 연결을 생성합니다.
Amazon Connect는 통화 흐름 및 라우팅 프로필을 기반으로 채팅에 지원 상담원을 배정합니다.
상담원의 메시지는 WebSocket 연결을 통해 전달됩니다. 모바일 앱은 에이전트로부터 메시지를 수신 및 표시하고 고객 메시지를 다시 보내는 메시지를 수신합니다. WebSocket

필수 조건

Amazon Connect 채팅을 모바일 앱과 통합하려면 다음과 같은 사전 요구 사항이 있어야 합니다.

Amazon Connect 인스턴스 생성.

- 또는 -

Connect 인스턴스가 있는 경우 다음 단계에 따라 GitHub 인스턴스에 대한 채팅을 활성화하십시오.
채팅 연락처를 수신할 준비가 된 Amazon Connect 통화 흐름을 생성하십시오.
- 인스턴스 ID를 기록해 둡니다.
- 에 contactFlowId 대한 항목을 찾으십시오샘플 인바운드 흐름(첫 번째 고객 응대 경험).
사용자 지정 Amazon Connect 채팅 백엔드를 배포하십시오. 의 startChatContactAPI 템플릿을 참조하십시오 GitHub.
- startChatContactLambda CloudFront 함수 템플릿을 배포합니다.
- region, API_GATEWAY_IDcontactFlowId, 및 instanceID 를 템플릿의 Config 파일에 추가합니다.

라이브러리 설치

iOS 및 Android용 라이브러리를 설치하여 통합 프로세스를 시작합니다. 두 라이브러리 세트를 모두 설치해야 합니다.

iOS: aws-sdk-ios저장소로 이동하여 다음을 설치합니다. GitHub
```
pod 'AWSCore'
pod 'AWSConnectParticipant'
pod 'Starscream', '~> 4.0'
```

Android: aws-sdk-android저장소로 이동하여 다음을 설치합니다. GitHub


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

AWS 보안 인증 정보 구성

두 라이브러리 세트를 모두 설치한 후에는 Amazon Connect 서비스 및 Amazon Connect 참가자 서비스에 등록합니다. 이렇게 하려면 각 운영 체제의 Config 파일에서 AWS 자격 증명을 사용하고 다음 예와 같이 accessKey 및 secretKey 값을 빈 문자열 (“”) 로 바꿉니다.

중요

테스트할 지역을 지정해야 합니다.

iOS: Amazon Connect 서비스 및 참가자 서비스 AWSStaticCredentialsProvider 등록에 사용합니다.


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: 지역을 AmazonConnectParticipantAsyncClient 초기화하고 설정합니다.


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

참고

에서 Config 파일을 다운로드할 수 있습니다. GitHub 두 Config 파일을 모두 편집해야 합니다.

채팅 시작하기

다음으로, Amazon Connect에서 제공하는 StartChatContactAPI를 통합해야 합니다. API는 상담원과 채팅하려는 고객의 의도를 등록하여 대화를 시작합니다.

참고

StartChatContactLambda 함수를 배포하려면 에서 템플릿을 사용하십시오CloudFront . GitHub

iOS 및 Android의 경우 StartChatContact API 호출에는 다음과 같은 몇 가지 정보가 필요합니다.

InstanceId: 아마존 커넥트 인스턴스의 식별자입니다.
ContactFlowId: 채팅을 처리하기 위한 통화 흐름의 식별자입니다.
ParticipantDetails: 참가자에 대한 정보 (예: 고객의 표시 이름).
Attributes: Amazon Connect 내에서 채팅을 라우팅하거나 처리하는 데 유용할 수 있는 연락처에 대한 추가 정보입니다.

중요

API 호출에 서명하려면 AWS 서명 버전 4 (SigV4) 를 사용해야 합니다. SigV4 프로세스는 HTTP를 통해 전송된 AWS API 요청에 인증 정보를 추가합니다. 모바일 클라이언트의 경우 서버 측에서 서명 프로세스를 수행하는 것이 좋습니다. 모바일 앱이 서버에 요청을 보내면 서버가 요청에 서명하고 Amazon Connect로 전달합니다. 이렇게 하면 AWS 자격 증명을 보호하는 데 도움이 됩니다.

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 
}

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 
}

참가자 연결 생성

StartChatContactAPI 호출에서 받은 세부 정보를 사용하여 참가자 연결을 생성합니다. 그런 다음 AWS Connect 참가자 SDK를 호출하여 연결을 설정하는 데 필요한 WebSocket URL을 반환합니다.

다음 예제는 iOS용 연결을 설정하는 방법을 보여줍니다.


// 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()
    }

다음 예시는 Android용 연결을 설정하는 방법을 보여줍니다.


// 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
        )
    }

WebSocket 연결 사용

참가자 SDK를 사용하여 채팅 연결을 위한 WebSocket URL을 얻으십시오.

WebSocket 관리를 구현하려면 기존 솔루션을 사용하거나 자체 솔루션을 구현하세요.
Websocket 메시지 및 이벤트를 처리하려면 자체 솔루션을 구현하거나 iOS 및 Android용 솔루션을 사용하십시오.
모든 메시지 및 이벤트 유형을 다루는지 확인하세요.
- 사례 typing = "application/vnd.amazonaws.connect.event.typing"
- 케이스 messageDelivered = "application/vnd.amazonaws.connect.event.message.delivered"
- 케이스 messageRead = "application/vnd.amazonaws.connect.event.message.read"
- 케이스 metaData = "application/vnd.amazonaws.connect.event.message.metadata"
- 케이스 joined = "application/vnd.amazonaws.connect.event.participant.joined"
- 케이스 left = "application/vnd.amazonaws.connect.event.participant.left"
- 케이스 ended = "application/vnd.amazonaws.connect.event.chat.ended"
- 케이스 plainText = "text/plain"
- 케이스 richText = "text/markdown"
- 케이스 interactiveText = "application/vnd.amazonaws.connect.message.interactive"

다음 이미지는 Connect 채팅의 기본 인스턴스를 보여줍니다. 이미지의 숫자는 아래 번호가 매겨진 텍스트에 해당합니다.

Amazon Connect 채팅 창의 구성 요소를 보여주는 이미지입니다.

이미지에서 상단 부근부터 시작:

입력 표시기는 메시지를 입력하는 사람을 보여줍니다.
이 예제에서는 일반 텍스트 메시지를 사용합니다. 원하는 경우 마크다운 사용을 활성화할 수 있습니다.
대화형 목록 컨트롤은 사용자에게 고객 서비스 또는 청구와 같은 선택 목록을 제공합니다.
대화형 빠른 회신은 일반적인 질문이나 문구에 대해 사전 프로그래밍된 응답을 제공합니다.

메시지 보내기

이 SendMessage 기능을 사용하여 채팅 메시지를 보낼 수 있습니다.


/// 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
        })
}

이벤트 처리

참가자 SDK의 SendEvent 함수를 사용하여 입력 및 수신 확인과 같은 이벤트에 사용할 수 있습니다.


/// 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
        })
}

채팅 종료하기

채팅을 종료하려면 참가자 SDK의 disconnectParticipant 함수를 사용하세요.


/// 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
}

소스 코드

다음 샘플 프로젝트는 Connect 채팅을 구현하는 방법을 GitHub 보여줍니다.

iOS: iOS 네이티브 채팅 데모.
안드로이드: 안드로이드 네이티브 채팅 데모.

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

커뮤니케이션 위젯 관련 문제 해결

빠른 응답 생성