Realiza llamadas con un botón de llamada personalizado en tu aplicación para iOS

En este tutorial, vamos a revisar cómo hacer fácilmente llamadas dentro de su aplicación iOS utilizando un componente de interfaz de usuario personalizada, NXMCallButton.

Como su nombre indica, NXMCallButton es una subclase de UIButton y, cuando se pulsa, se llama al destinatario de la llamada utilizando el Client SDK de Nexmo. El destinatario de la llamada puede ser un usuario de la aplicación o un número PSTN, dependiendo de cómo esté configurado el botón.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Requisitos previos

• A Aplicación API de Vonage (antes Nexmo)

• Al menos un usuario para su aplicación de API de Vonage con un JWT válido

• A webhook para Voice API

En este tutorial, el proyecto se llamará MyApp y estará ubicado en ~/Documents/MyApp. Comenzaremos con una plantilla Single View App vacío generado por Xcode.

Nota para Xcode 11: Al elegir las opciones para su nuevo proyecto, asegúrese de seleccionar el Storyboard para el campo User Interface campo

¡Comencemos!

Instalación del Client SDK de Nexmo

Iniciar CocoaPods para su proyecto

Usted tendrá que iniciar CocoaPods para su proyecto mediante la ejecución de los siguientes comandos:

cd ~/Documents/MyApp
pod init

Observe que se ha creado un archivo llamado Podfile .

Añadir el Pod Nexmo Client SDK

Para añadir el pod Nexmo Client SDK, abra el pod recién creado Podfile con Xcode y añada NexmoClient al objetivo de su proyecto:

target 'MyApp' do
  use_frameworks!
  pod 'NexmoClient'
end

Cierre todas las instancias de Xcode y actualice las dependencias de CocoaPods ejecutando lo siguiente en el terminal:

pod update

En el futuro, asegúrese de que está lanzando el recién creado MyApp.xcworkspace y no el archivo MyApp.xcproject recién creado.

Añadir permisos necesarios

El botón de llamada realizará una llamada, por lo tanto asegúrese de habilitar el permiso de uso del micrófono. Cuando se pulsa el botón de llamada, se presentará una solicitud de permiso al usuario solicitando acceso para grabar audio. Esta solicitud de permiso ya está implementada por el botón.

Además, debes indicar por qué es necesario el permiso para el micrófono. Abra Xcode y, a continuación Info.plist. Haga clic con el botón derecho y elija la opción Añadir fila e inserte NSMicrophoneUsageDescription como clave de la fila. El valor de la fila debe ser una cadena que describa la razón por la que tu aplicación quiere acceder al micrófono (por ejemplo, "Llamadas de audio").

¡Ahora puedes pasar directamente a lo divertido! Vamos a añadir el botón a la interfaz de usuario.

Añadir y configurar el componente de interfaz de usuario personalizada

Añadir el UIButton personalizado

Crea un nuevo archivo Swift vacío llamado NXMCallButton.swift en tu proyecto y copia el contenido de la siguiente Gist de GitHub: https://raw.githubusercontent.com/nexmo-community/client-sdk-call-button/master/NXMCallButton.swift

Ahora puede añadir el componente NXMCallButton a la interfaz de usuario de dos maneras: utilizando el guión gráfico o añadiendo el botón mediante programación.

Método 1: Utilizar el guión gráfico

1. Abrir Main.storyboard.

2. Selecciona un Button objeto de la biblioteca de objetos y añádelo a la interfaz:

   

3. Cambiar la clase personalizada del UIButton a NXMCallButton:

   

4. Configure los parámetros inspeccionables del botón:

• Nexmo Token debe ser un Token JWT que utilizas para autenticar tu instancia de Cliente Nexmo.

• Callee debe ser un número de teléfono RTC o un nombre de usuario de un usuario de su aplicación al que se llamará cuando se pulse el botón.

Nota: Si desea cambiar los Nexmo Token y Callee dinámicamente, puede seguir los pasos de la siguiente sección.

Método 2: Añadir el botón de llamada mediante programación

Añadir el botón de llamada mediante programación le permite cambiar sus propiedades, tales como callee y nexmoTokende forma dinámica. Además de llamar al destino deseado, se pueden añadir más acciones para cuando se pulse el botón; por ejemplo, cambiar a una vista diferente.

Para añadir el botón mediante programación a un controlador de vista, debe realizar los siguientes pasos:

1. Crear una nueva instancia de NXMCallButton.

2. Establecer valores para sus title y callee propiedades.

3. Autentique su instancia de Cliente Nexmo utilizando el método login(withAuthToken:) de NXMClient.shared.

4. Opcionalmente, realice cualquier configuración adicional de la interfaz de usuario que desee, como configurar un color de fondo y restricciones. Como NXMCallButton hereda de UIButtontodas las propiedades de UIButtonestán disponibles para su uso.

5. Si lo desea, añada acciones adicionales al botón; por ejemplo, active una transición a una vista diferente cuando se pulse el botón.

6. Añade el botón de llamada a tu vista.

Así es como se ve dentro de un UIViewController:

import UIKit
import NexmoClient
class ViewController: UIViewController {
	override func viewDidLoad() {
	  super.viewDidLoad()
		
	  // new instance of NXMCallButton
	  let callButton = NXMCallButton()
	  
	  // set values for the button's title and callee
	  callButton.setTitle("Call", for: .normal)
	  callButton.callee = "15555551234" // Phone Number or username
	  
	  // Authentication
	  NexmoClient.shared.login(withAuthToken: "YOUR_JWT_TOKEN")
	  
	  // Optional UI Setup
	  callButton.backgroundColor = .lightGray
	  
	  // A target which performs a call when the button is pressed is already added
	  // callButton.addTarget(self, action: #selector(callButtonAction), for: .touchUpInside)
	  // Add button to UI
	  callButton.translatesAutoresizingMaskIntoConstraints = false
	  self.view.addSubview(callButton)
		
	  // Add your desired layout constrains, for example:
	  NSLayoutConstraint.activate([
	            callButton.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
	            callButton.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
	            callButton.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,constant: -30),
	            callButton.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
	            ])
	}
	@objc func callButtonAction(sender: UIButton!) {
	  print("Button tapped")
	}
}

También es posible ejecutar un controlador de finalización después de que se haya iniciado una llamada. Es una buena práctica presentar un mensaje al usuario de que se ha iniciado una llamada o mostrar una pantalla diferente.

let myCallCompletionHandler = { (error: Error?, call: NXMCall?) in
	if (error != nil) {
		// Handle error
	} else {
		// Handle success
		// For example: switch to a different view presenting a call session
	}
}
callButton.callCompletionHandler = myCallCompletionHandler

Resumen

En este tutorial, hemos revisado el proceso de integración de llamadas a una aplicación mediante el uso de un componente personalizado NXMCallButton personalizado. Hemos recorrido dos formas de hacerlo: a través del constructor de interfaces sin una sola línea de código, y de forma programática, teniendo la libertad de modificarlo y configurarlo dinámicamente.

Si quieres ver cómo se produce la magia ante tus ojos, establece como destinatario de la llamada tu número de teléfono, ejecuta la aplicación y pulsa el botón de marcación. Un recordatorio rápido de que se requiere un webhook de respuesta para habilitar la llamada-ver este tutorial como ejemplo.

Lecturas complementarias

• SDK y herramientas de Nexmo

• NXMCallButton.swift en GitHub

• In-app Messaging utilizando el Client SDK de Nexmo