--- title: "Introducción" url: https://docs.catalyst.zoho.com/es/tutorials/dialer-mobile-app/flutter/introduction/ description: "Construye una aplicación de marcador en Flutter con Catalyst Advanced I/O Functions, Data Store y la API de voz de Twilio para llamar a tus clientes." last_updated: 2026-11-04T10:10:44Z service: All Services type: tutorial related_links: - name: "Project Directory Structure" url: /es/cli/v1/project-directory-structure/introduction/ - name: "Android SDK" url: /es/sdk/android/v2/overview/ - name: "iOS SDK" url: /es/sdk/ios/v2/overview/ - name: "Flutter SDK" url: /es/sdk/flutter/v2/overview/ - name: "Twilio" url: https://www.twilio.com/ --- # 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](https://www.twilio.com/en-us). Las aplicaciones para ambas plataformas Android e iOS se construirán en el [framework Flutter](https://flutter.dev/) usando el [SDK de Catalyst para Flutter](https://docs.catalyst.zoho.com/es/sdk/flutter/v2/overview/). 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](https://docs.catalyst.zoho.com/es/sdk/flutter/v2/overview/) contiene herramientas para varios servicios y componentes de Catalyst, tanto para entornos Android como iOS. [Twillio](https://www.twilio.com/en-us) 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](https://www.twilio.com/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. > **Nota**: Necesitarás una cuenta de Twilio de pago para esta aplicación, porque la integración con las APIs de Twilio no está disponible en su versión gratuita. Un número de teléfono de Twilio (número virtual) puede comprarse desde la consola de Twilio según tu preferencia de país cuando te registres para una cuenta de Twilio. La aplicación móvil se verá de la siguiente manera: **Android** ![android-working-app](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/android-working-app.webp) **iOS** ![ios-working-app](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/flutter/ios-working-app.webp) La aplicación Dialer contiene los siguientes componentes fundamentales de Catalyst y las funcionalidades que proporcionan: 1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/es/serverless/getting-started/introduction/): - **[Advanced I/O Function](https://docs.catalyst.zoho.com/es/serverless/help/functions/advanced-io)**: 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 CloudScale**](https://docs.catalyst.zoho.com/es/cloud-scale/getting-started/introduction/): - **[Data Store](https://docs.catalyst.zoho.com/es/cloud-scale/help/data-store/introduction)**: 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](https://docs.catalyst.zoho.com/es/cloud-scale/help/zcql/introduction)**: 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()](https://www.twilio.com/docs/voice/twiml/dial) y [say()](https://www.twilio.com/docs/voice/twiml/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. ![dialer-arch-dia](https://catalyst-docs-development.zohostratus.in/images/tutorials/dialer-app/dialer-arch-dia.webp) La aplicación Dialer sirve como una solución rápida para iniciar comunicaciones de llamadas de audio salientes a tus clientes.