Cómo hacer llamadas telefónicas en web, iOS y Android con Ionic

Esta entrada de blog te lleva a través de un proyecto que muestra cómo construir una aplicación Ionic que te permite hacer una llamada a través de tres plataformas usando el Vonage Client SDK. El proyecto para esta entrada de blog utiliza React.

Requisitos previos

• A GitHub Account.

• Xcode 12para crear y ejecutar la aplicación en un simulador de iOS.

• Android Studiocon JDK 8 o posterior para crear y ejecutar la aplicación en un emulador.

• Nuestra interfaz de línea de comandos, que puede instalar con npm install @vonage/cli -g.

Configurar Ionic

Ionic se puede instalar con npm pero requiere Node.js. Asegúrese de que tiene Node.js instalado antes de continuar. Instala Ionic con el siguiente comando:

npm install -g @ionic/cli

Clonar el proyecto

Puedes clonar el proyecto en tu máquina local ejecutando el siguiente comando en tu terminal:

git clone git@github.com:nexmo-community/ionic-app-to-phone.git

A continuación, cambie el directorio a la nueva carpeta cd ionic-app-to-phone.

Ahora que ha clonado el proyecto, puede instalar las dependencias del proyecto ejecutando npm install. Este comando instalará las dependencias listadas en el archivo package.json del proyecto. Tenga en cuenta que nexmo-client en la lista; se trata del Client SDK.

Ionic también necesita que se configuren algunas variables de entorno para el desarrollo en Android. Edita tu PATH con

Una vez hecho esto, cargue la configuración en el shell actual utilizando el comando source . Puedes encontrar instrucciones más detalladas en la documentación de Ionic.

La aplicación de Vonage

Para crear la aplicación, utilizaremos nuestra interfaz de línea de comandos. Si aún no ha configurado la CLI, hágalo ejecutando el comando vonage config:set --apiKey=api_key --apiSecret=api_secret en su terminal, donde la clave de la API y el secreto son la clave de la API y el secreto que se encuentra en su Account de tu cuenta.

Crear una OCN

A Objeto de Control de Llamada Nexmo (NCCO) es una matriz JSON que se utiliza para controlar el flujo de una llamada Voice API. El NCCO debe ser público y accesible por internet. Para lograrlo, se utilizará un Gist de GitHub que proporciona una forma conveniente de alojar la configuración.

Vaya a https://gist.github.com/ e introduzca call.json en la casilla "Filename including extension". El contenido del gist será el siguiente JSON:

[
    {
        "action": "talk",
        "text": "Please wait while we connect you."
    },
    {
        "action": "connect",
        "endpoint": [
            {
                "type": "phone",
                "user": "447000000000"
            }
        ]
    }
]

Crea el gist y, a continuación, haz clic en el botón "Raw" para obtener una URL para tu OCN. Anótala para el siguiente paso.

Crear una aplicación de Vonage

Ahora debes crear una aplicación de Vonage. Una aplicación contiene la información de seguridad y configuración que necesitas para conectarte a Vonage. En tu terminal, crea una aplicación de Vonage utilizando el siguiente comando y reemplazando GIST_URL por la URL del paso anterior:

llamado vonage_app.json en el directorio de tu proyecto y contiene el nuevo ID de aplicación de Vonage y la clave privada. También se crea un archivo de clave privada llamado app_to_phone_tutorial.key también se crea.

Crear un JWT

El Client SDK utiliza JWT para la autenticación. El JWT identifica el nombre de usuario, el ID de la aplicación asociada y los permisos concedidos al usuario. Se firma utilizando su clave privada para demostrar que se trata de un token válido. Cree un usuario para su aplicación, puede hacerlo ejecutando vonage apps:users:create Alice para crear un usuario llamado Alice. Luego crea un JWT para el usuario Alice ejecutando el siguiente comando reemplazando APP_ID con el ID de tu aplicación:

Ejecutar el proyecto

Ahora que has configurado la aplicación de Vonage, puedes realizar algunas llamadas.

Web

La primera plataforma en la que ejecutarás el proyecto es la Web. Para ello, edite el archivo Home.tsx archivo (/ionic-app-to-phone/src/pages/Home.tsx) sustituyendo ALICE_JWT por el JWT que generaste anteriormente.

Una vez hecho esto, ejecute el proyecto desde su terminal utilizando ionic serve. Este comando iniciará un servidor local en tu máquina en el puerto 8100 y abrirá la aplicación en tu navegador web. Haga clic en el botón de inicio de sesión, que utiliza el JWT para autenticar el Client SDK. Una vez iniciada la sesión, ya puede realizar una llamada al número de teléfono especificado en la OCN.

iOS

Usos iónicos Capacitor para construir la aplicación web que acabas de utilizar para plataformas nativas. Mantén el servidor de desarrollo de Ionic ejecutándose en tu terminal y abre una nueva ventana de terminal en el mismo directorio. Las aplicaciones iOS y Android requieren que el servidor de desarrollo esté disponible a través de HTTPS, por lo que puedes utilizar localtunnel para crear una URL HTTPS. Introduzca el siguiente comando en su terminal, sustituyendo SUBDOMAIN por una cadena única:

npx localtunnel --port 8100 --subdomain=SUBDOMAIN

Este comando abrirá un túnel al puerto 8100 de su máquina.

La construcción de un proyecto nativo con Capacitor ocurre en 3 etapas. En primer lugar, se crea el código web. A continuación, el código se copia a cada plataforma y luego se utilizan herramientas específicas de la plataforma para construir la aplicación.
Abre una nueva ventana de terminal en el mismo directorio. Puedes hacer la primera etapa y la segunda etapa con ionic capacitor sync ios. A continuación, ejecuta el proyecto iOS utilizando Capacitor, sustituyendo SUBDOMAIN por tu cadena única:

ionic capacitor run ios -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Este comando te abre Xcode y permite recargar el código en vivo. Build and Run (CMD + R) en Xcode, y cuando la app se esté ejecutando en el simulador/dispositivo que elijas, podrás iniciar sesión y hacer una llamada, igual que en la web.

Dado que Ionic está basado en web, la app para iOS puede utilizar la misma dependencia JavaScript del Client SDK y funciona sin cambios de código específicos de la plataforma.

Android

El proceso para android es muy similar al de iOS. En su ventana de terminal ejecutando el proyecto iOS, salga del proceso con Ctrl+C, luego ejecute ionic capacitor sync android. A continuación, ejecute el proyecto Android utilizando Capacitor, sustituyendo SUBDOMAIN por tu cadena única:

ionic capacitor run android -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Este comando abrirá Android Studio para ti, donde puedes Construir y Ejecutar la aplicación en un emulador o dispositivo. Cuando la aplicación se ejecute en el emulador/dispositivo que elijas, podrás iniciar sesión y realizar una llamada, igual que en la web y en iOS, sin necesidad de cambiar el código.

¿Y ahora qué?

Puede encontrar el proyecto completo en GitHub. Puedes hacer mucho más con el Client SDK, aprende más en developer.vonage.com.