Flujo de trabajo de integración Requisitos previos Instala las bibliotecas Configurar credenciales de AWS Iniciar un chat Cree una conexión con los participantes Usa WebSocket conexiones Envía mensajes Gestiona los eventos Finaliza un chat Código fuente

Integre el chat de Amazon Connect en una aplicación móvil

En los temas de esta sección se explica cómo crear una interfaz de usuario de chat de Amazon Connect personalizada en su aplicación móvil. Para ello, es necesario utilizar tu propio back-end de chat. También debes usar la StartChatContactAPI de Amazon Connect para iniciar el contacto y las API del servicio de participantes para gestionar la participación en el chat.

nota

La StartChatContact API requiere la AWS firma de la versión 4 de Signature. Por lo tanto, las solicitudes iniciales deben enviarse a través del back-end de tu chat personal. Las llamadas posteriores a la API al Amazon Connect Participant Service (ACPS) se pueden gestionar directamente desde la aplicación móvil.

Flujo de trabajo de integración

El siguiente diagrama muestra el flujo de programación entre un cliente que usa una aplicación móvil y un agente. El texto numerado del diagrama corresponde al texto numerado situado debajo de la imagen.

Diagrama que muestra el flujo del programa de chat Amazon Connect.

En el diagrama:

Cuando un cliente inicia un chat en la aplicación móvil, la aplicación envía una solicitud a Amazon Connect mediante la StartChatContactAPI. Esto requiere parámetros específicos, como el punto final de la API y los ID de la instancia y el flujo de contactos, para autenticarse e iniciar el chat.
La StartChatContact API interactúa con tu sistema de back-end para obtener un token de participante y un ID de contacto que actúan como identificadores únicos de la sesión de chat.
El back-end de la aplicación utiliza el token del participante y el ID de contacto para comunicarse con Amazon Connect y configurar la sesión de chat del cliente.
El SDK para participantes de Amazon Connect se activa con el token de participante, lo que prepara la aplicación para el chat.
El SDK del participante utiliza los detalles de la sesión para establecer una línea de comunicación segura con Amazon Connect.
Amazon Connect responde proporcionando una WebSocket URL a través del SDK del participante. La aplicación utiliza esta URL para crear una WebSocket conexión para la mensajería en tiempo real.
Amazon Connect asigna un agente de soporte al chat en función del flujo de contactos y el perfil de enrutamiento.
Los mensajes del agente llegan a través de la WebSocket conexión. La aplicación móvil los escucha WebSocket para recibir y mostrar los mensajes del agente y para devolver los mensajes de los clientes.

Requisitos previos

Debe cumplir los siguientes requisitos previos para poder integrar el chat de Amazon Connect con una aplicación móvil:

Crear una instancia de Amazon Connect.

—o—

Si tienes una instancia de Connect, sigue estos pasos GitHub para habilitar el chat en la instancia.
Cree un flujo de contactos de Amazon Connect preparado para recibir contactos de chat.
- Anote el ID de la instancia.
- Busque el contactFlowId paraFlujo de entrada de ejemplo (experiencia de primer contacto).
Implemente un back-end de chat personalizado de Amazon Connect. Consulte la plantilla startChatContact de API en GitHub.
- Implemente una startChatContactplantilla de funciones Lambda. CloudFront
- Añada los region valoresAPI_GATEWAY_ID,contactFlowId, y instanceID al archivo Config de la plantilla.

Instala las bibliotecas

El proceso de integración se inicia instalando las bibliotecas para iOS y Android. Debe instalar ambos conjuntos de bibliotecas.

iOS: Ve al aws-sdk-iosrepositorio GitHub e instala lo siguiente:


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

Android: Ve al aws-sdk-androidrepositorio GitHub e instala lo siguiente:


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

Configurar credenciales de AWS

Tras instalar ambos conjuntos de bibliotecas, se registra en el Amazon Connect Service y en el Amazon Connect Participant Service. Para ello, en los archivos de Config de cada sistema operativo, utilice sus AWS credenciales y sustituya los secretKey valores accessKey y por cadenas vacías (“”), como se muestra en los siguientes ejemplos.

importante

Debes especificar la región en la que vas a realizar la prueba.

iOS: utilícelo AWSStaticCredentialsProvider para registrarse en el Servicio Amazon Connect y en el Servicio de participantes.


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: inicialice AmazonConnectParticipantAsyncClient y configure la región.


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

nota

Puede descargar los archivos de Config desde GitHub. Debe editar ambos archivos de Config.

Iniciar un chat

A continuación, debe integrar la StartChatContactAPI proporcionada por Amazon Connect. La API inicia la conversación registrando la intención del cliente de chatear con un agente.

nota

Para implementar una función StartChatContact Lambda, utilice la CloudFront plantilla en. GitHub

Para iOS y Android, la llamada a la StartChatContact API requiere varios datos:

InstanceId: el identificador de la instancia de Amazon Connect.
ContactFlowId: El identificador del flujo de contactos que gestiona el chat.
ParticipantDetails: información sobre el participante, como el nombre visible del cliente.
Attributes: información adicional sobre el contacto que puede resultar útil para enrutar o gestionar el chat en Amazon Connect.

importante

Debe usar la versión 4 de AWS Signature (SiGv4) para firmar la llamada a la API. El proceso SigV4 agrega información de autenticación a las solicitudes de AWS API enviadas a través de HTTP. Para los clientes móviles, recomendamos realizar el proceso de firma en el servidor. La aplicación móvil envía una solicitud a tu servidor, que, a continuación, la firma y la reenvía a Amazon Connect. Esto ayuda a proteger sus AWS credenciales.

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

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

Cree una conexión con los participantes

Los detalles recibidos de una llamada a la StartChatContactAPI se utilizan para crear una conexión de participantes. A continuación, se llama al SDK para participantes de AWS Connect, que devuelve la WebSocket URL necesaria para establecer la conexión.

El siguiente ejemplo muestra cómo establecer una conexión para 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()
    }

El siguiente ejemplo muestra cómo establecer una conexión para 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
        )
    }

Usa WebSocket conexiones

Utilice el SDK del participante para obtener una WebSocket URL para la conexión de chat.

Para implementar WebSocket la administración, utilice las soluciones existentes o implemente las suyas propias.
Para gestionar los mensajes y eventos de Websocket, implementa tu propia solución o utiliza nuestras soluciones para iOS y Android.
Asegúrese de cubrir todos los tipos de mensajes y eventos:
- caso typing = "application/vnd.amazonaws.connect.event.typing"
- caso messageDelivered = "application/vnd.amazonaws.connect.event.message.delivered"
- caso messageRead = "application/vnd.amazonaws.connect.event.message.read"
- caso metaData = "application/vnd.amazonaws.connect.event.message.metadata"
- caso joined = "application/vnd.amazonaws.connect.event.participant.joined"
- caso left = "application/vnd.amazonaws.connect.event.participant.left"
- caso ended = "application/vnd.amazonaws.connect.event.chat.ended"
- caso plainText = "text/plain"
- caso richText = "text/markdown"
- caso interactiveText = "application/vnd.amazonaws.connect.message.interactive"

La siguiente imagen muestra una instancia predeterminada del chat de Connect. Los números de la imagen corresponden al texto numerado que aparece a continuación.

Imagen que muestra los componentes de una ventana de chat de Amazon Connect.

En la imagen, empezando por la parte superior:

El indicador de escritura muestra quién está escribiendo un mensaje.
En este ejemplo, se utilizan mensajes de texto sin formato. Si lo desea, puede habilitar el uso de Markdown.
El control de listas interactivo proporciona a los usuarios listas de opciones, como el servicio de atención al cliente o la facturación.
Las respuestas rápidas interactivas proporcionan respuestas preprogramadas a preguntas o frases comunes.

Envía mensajes

Utiliza la SendMessage función para enviar mensajes de chat.


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

Gestiona los eventos

Utilice la SendEvent función del SDK para participantes para eventos como escribir y leer recibos.


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

Finaliza un chat

Para finalizar un chat, usa la disconnectParticipant función del SDK para participantes.


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

Código fuente

Los siguientes proyectos de ejemplo GitHub muestran cómo implementar Connect chat.

iOS: demostración de chat nativo de iOS.
Android: demostración de chat nativo de Android.

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Solución de problemas del widget de comunicaciones

Creación de respuestas rápidas