Dialer Mobile App

Introducción

En este tutorial, construiremos una aplicación de marcador (Dialer) simple para Android e iOS en Catalyst integrándola con Twillio. Las aplicaciones para ambas plataformas Android e iOS se construirán en el framework Flutter usando el SDK de Catalyst para Flutter. La aplicación Dialer te permite iniciar una conexión de llamada de audio saliente entre tu equipo de ventas y los clientes.

Flutter es un framework de código abierto de Google construido sobre el lenguaje de programación Dart que se usa para desarrollar aplicaciones compiladas nativamente y multiplataforma. El SDK de Catalyst para Flutter contiene herramientas para varios servicios y componentes de Catalyst, tanto para entornos Android como iOS.

Twillio es una plataforma de comunicaciones en la nube que proporciona un rico conjunto de APIs REST para establecer conexiones significativas y rápidas a través de voz, video, mensajería, transmisión en vivo, correos electrónicos y más. La plataforma Twilio proporciona una variedad de funcionalidades como personalización de mensajes de texto a voz, grabaciones de llamadas, llamadas en conferencia, reenvío de llamadas y seguimiento. Usaremos la API Programmable Voice de Twilio para configurar una llamada saliente entre dos números de teléfono a través de un número de teléfono virtual.

La aplicación móvil se verá de la siguiente manera:

Android

iOS

La aplicación Dialer contiene los siguientes componentes fundamentales de Catalyst y las funcionalidades que proporcionan:

1. Catalyst Serverless:

   • Advanced I/O Function: La función Advanced I/O está codificada en el entorno de programación Node.js. Contiene la lógica del backend que se integra con la API Programmable Voice de Twilio para iniciar llamadas salientes y también llevar un registro de los registros de llamadas.

2. Catalyst Cloud Scale:

   • Data Store: Para almacenar información relacionada con las llamadas que realizas, como los números de teléfono, los países desde los que se inician las llamadas, la marca de tiempo de las llamadas y los estados de las llamadas.
   • ZCQL: Para consultar el Data Store y obtener los registros de llamadas después de que se completa una llamada, para renderizarlos en el cliente web.

Necesitarás configurar tanto las aplicaciones Android como iOS en Catalyst para construirlas con el SDK de Catalyst para Flutter. Esto incluye registrar las apps con Catalyst para obtener archivos de propiedades específicos de Catalyst para ambas, que se incluirán en los módulos de código respectivos.

Usaremos la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst, así como los IDEs móviles requeridos y los simuladores tanto para Android como para iOS, para construir y probar esta aplicación. En este tutorial, hemos proporcionado el código para los archivos a incluir en la función Advanced I/O, y el código Flutter para ambas aplicaciones Android e iOS. Solo necesitarás copiar el código proporcionado y pegarlo en los archivos apropiados según se indica.

Arquitectura de la aplicación

La arquitectura de la aplicación Dialer se describe a continuación:

1. La aplicación acepta la entrada del usuario, como el número de contacto del equipo de ventas y el número de teléfono del cliente.

2. Los números de teléfono ingresados por el usuario se validan. Tras una validación exitosa, los números se almacenarán en la tabla CallLogs del Data Store de Catalyst y se enviará una solicitud a la API de voz de Twilio.

3. Al llamar a la API de Twilio, se inicia una llamada saliente y se enruta desde tu número de Twilio al número de contacto del equipo de ventas.

4. En este punto, la aplicación del marcador envía instrucciones TwiML a la API de voz para dictar las acciones que se presentarán al usuario una vez que la llamada esté en curso. En nuestra aplicación, hemos configurado una URL que devuelve instrucciones de voz a la API REST.

5. La función Voice Response de Twilio tiene verbos preconfigurados que te permiten personalizar las acciones de llamada según tu preferencia. Aquí, usaremos los verbos dial() y say() para marcar el número de ventas desde el número de Twilio de tu cuenta y presentar un mensaje al llamante una vez que la llamada respectiva se esté reenviando.

6. Al completarse exitosamente la llamada, los detalles de la llamada como duración, estado, país llamado y marca de tiempo se actualizan en la tabla. La llamada se terminará cuando cualquiera de las partes cuelgue o si la señal de Twilio está ocupada.

7. El usuario también puede ver los registros de llamadas en la aplicación Dialer. Los registros se obtendrán consultando el Data Store.

La aplicación Dialer sirve como una solución rápida para iniciar comunicaciones de llamadas de audio salientes a tus clientes.