Passez des appels avec un bouton d'appel personnalisé dans votre application iOS

Dans ce tutoriel, nous allons passer en revue comment passer facilement des appels à l'intérieur de votre application iOS à l'aide d'un composant d'interface utilisateur personnalisé, NXMCallButton.

Comme son nom l'indique, UIButton est une sous-classe de UIButton, NXMCallButton est une sous-classe de UIButton et, lorsqu'on appuie dessus, l'appelant est appelé à l'aide du Client SDK de Numbers. L'appelant peut être un utilisateur de l'application ou un numéro RTC, selon la façon dont le bouton est configuré.

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.

Conditions préalables

• A Application Vonage APIs (anciennement Nexmo)

• Au moins un un utilisateur pour votre application Vonage APIs avec une clé JWT valide

• A webhook pour Voice API

Dans ce tutoriel, le projet s'appellera MyApp et sera situé dans ~/Documents/MyApp. Nous commencerons par un modèle Single View App vide généré par Xcode.

Note pour Xcode 11 : Lorsque vous choisissez des options pour votre nouveau projet, assurez-vous de sélectionner la valeur Storyboard pour le champ User Interface pour le champ

Commençons !

Installation du Client SDK de Nexmo

Initier CocoaPods pour votre projet

Vous devrez lancer CocoaPods pour votre projet en exécutant les commandes suivantes :

cd ~/Documents/MyApp
pod init

Remarquez qu'un fichier nommé Podfile a été créé.

Ajouter le pod Nexmo Client SDK

Pour ajouter le pod Nexmo Client SDK, ouvrez le fichier nouvellement créé Podfile nouvellement créé à l'aide de Xcode et ajoutez NexmoClient à la cible de votre projet :

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

Fermez toutes les instances de Xcode et mettez à jour les dépendances CocoaPods en exécutant ce qui suit dans le terminal :

pod update

À l'avenir, assurez-vous que vous lancez le fichier nouvellement créé MyApp.xcworkspace nouvellement créé plutôt que le fichier MyApp.xcproject et non le fichier

Ajout des autorisations requises

Le bouton d'appel permet d'effectuer un appel, assurez-vous donc d'activer l'autorisation d'utilisation du microphone. Lorsque le bouton d'appel est enfoncé, une demande d'autorisation est présentée à l'utilisateur, lui demandant l'accès à l'enregistrement audio. Cette demande de permission est déjà implémentée par le bouton.

En outre, vous devez indiquer pourquoi l'autorisation du microphone est nécessaire. Ouvrez Xcode, puis ouvrez Info.plist. Cliquez avec le bouton droit de la souris et choisissez l'option Ajouter une ligne puis insérez NSMicrophoneUsageDescription comme clé de la ligne. La valeur de la ligne doit être une chaîne décrivant la raison pour laquelle votre application souhaite accéder au microphone (par exemple, "Appels audio").

Vous pouvez maintenant passer directement aux choses sérieuses ! Ajoutons le bouton à l'interface utilisateur.

Ajout et configuration du composant d'interface utilisateur personnalisé

Ajout du bouton UIButton personnalisé

Créez un nouveau fichier Swift vide nommé NXMCallButton.swift dans votre projet et copiez le contenu de la Gist GitHub suivante : https://raw.githubusercontent.com/nexmo-community/client-sdk-call-button/master/NXMCallButton.swift

Vous pouvez maintenant ajouter le composant NXMCallButton à l'interface utilisateur de deux manières : en utilisant le storyboard ou en ajoutant le bouton par programme.

Méthode 1 : Utilisation du storyboard

1. Ouvrir Main.storyboard.

2. Sélectionnez un objet de la bibliothèque d'objets et ajoutez-le à l'interface. Button dans la bibliothèque d'objets et l'ajouter à l'interface :

   

3. Modifier la classe personnalisée de l'UIButton en NXMCallButton:

   

4. Configurer les paramètres inspectables du bouton :

• Nexmo Token doit être un jeton JWT que vous utilisez pour authentifier votre instance Nexmo Client.

• Callee doit être un numéro de téléphone RTC ou le nom d'utilisateur d'un utilisateur de votre application qui sera appelé lorsque le bouton est enfoncé.

Note : Si vous souhaitez modifier les Nexmo Token et Callee de manière dynamique, vous pouvez suivre les étapes de la section suivante.

Méthode 2 : Ajout programmé du bouton d'appel

L'ajout du bouton d'appel par programme vous permet de modifier ses propriétés, telles que callee et nexmoTokende manière dynamique. Outre l'appel de la destination souhaitée, d'autres actions peuvent être ajoutées lorsque l'on appuie sur le bouton, par exemple le passage à une autre vue.

Pour ajouter le bouton de manière programmatique à un contrôleur de vue, vous devez suivre les étapes suivantes :

1. Créer une nouvelle instance de NXMCallButton.

2. Définir les valeurs de ses title et callee .

3. Authentifiez votre instance Nexmo Client en utilisant la méthode login(withAuthToken:) de NXMClient.shared.

4. Vous pouvez également procéder à d'autres réglages de l'interface utilisateur, tels que la configuration d'une couleur d'arrière-plan et de contraintes. En tant que NXMCallButton hérite de UIButtontoutes les propriétés de UIButtonsont disponibles pour que vous puissiez les utiliser.

5. Si vous le souhaitez, ajoutez des actions supplémentaires au bouton - par exemple, déclenchez une transition vers une autre vue lorsque vous appuyez sur le bouton.

6. Ajoutez le bouton d'appel à votre vue.

Voici à quoi cela ressemble à l'intérieur d'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")
	}
}

Il est également possible d'exécuter un gestionnaire d'achèvement après le lancement d'un appel. Une bonne pratique consiste à présenter à l'utilisateur un message l'informant qu'un appel a commencé ou à afficher un autre écran.

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

Résumé

Dans ce tutoriel, nous avons passé en revue le processus d'intégration des appels à une application en utilisant un composant NXMCallButton personnalisé. Nous avons étudié deux façons d'y parvenir : via le constructeur d'interface, sans une seule ligne de code, et de manière programmatique, en ayant la liberté de le modifier et de le configurer dynamiquement.

Si vous voulez voir la magie opérer sous vos yeux, définissez l'appelant sur votre numéro de téléphone, exécutez l'application et cliquez sur le bouton de numérotation. Nous vous rappelons rapidement qu'un webhook de réponse est nécessaire pour permettre l'appel - voir ce tutoriel à titre d'exemple.

Pour en savoir plus

• SDK et outils Nexmo

• NXMCallButton.swift sur GitHub

• In-App Messaging à l'aide du Client SDK de Nexmo