Anrufe mit einer benutzerdefinierten Anruftaste in Ihrer iOS-App tätigen

In diesem Tutorial erfahren Sie, wie Sie innerhalb Ihrer iOS-Anwendung mithilfe einer benutzerdefinierten UI-Komponente ganz einfach Anrufe tätigen können, NXMCallButton.

Wie der Name schon sagt, NXMCallButton ist eine Unterklasse von UIButton, und wenn sie gedrückt wird, wird der Angerufene über das Nexmo Client SDK angerufen - der Angerufene kann entweder ein In-App-Benutzer oder eine PSTN-Nummer sein, je nachdem, wie die Schaltfläche konfiguriert ist.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Voraussetzungen

• A Vonage APIs (ehemals Nexmo) Anwendung

• Mindestens einen Benutzer für Ihre Vonage APIs-Anwendung mit einer gültigen JWT

• A Webhook für Voice API

In diesem Lernprogramm wird das Projekt MyApp und befindet sich in ~/Documents/MyApp. Wir beginnen mit einer leeren Single View App Vorlage, die von Xcode generiert wurde.

Hinweis für Xcode 11: Wenn Sie Optionen für Ihr neues Projekt auswählen, stellen Sie sicher, dass Sie den Storyboard Wert für das User Interface Feld:

Fangen wir an!

Installation des Nexmo Client SDK

Initiieren von CocoaPods für Ihr Projekt

Sie müssen CocoaPods für Ihr Projekt initiieren, indem Sie die folgenden Befehle ausführen:

cd ~/Documents/MyApp
pod init

Beachten Sie, dass eine Datei namens Podfile erstellt wurde.

Hinzufügen des Nexmo Client SDK Pods

Um den Nexmo Client SDK-Pod hinzuzufügen, öffnen Sie das neu erstellte Podfile mit Xcode und fügen Sie NexmoClient zu Ihrem Projektziel hinzu:

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

Schließen Sie alle Xcode-Instanzen und aktualisieren Sie die CocoaPods-Abhängigkeiten, indem Sie Folgendes im Terminal ausführen:

pod update

Stellen Sie in Zukunft sicher, dass Sie die neu erstellte MyApp.xcworkspace und nicht die MyApp.xcproject Datei.

Hinzufügen der erforderlichen Berechtigungen

Mit der Anruftaste wird ein Anruf getätigt. Stellen Sie daher sicher, dass die Mikrofonbenutzungserlaubnis aktiviert ist. Wenn die Anruftaste gedrückt wird, wird dem Benutzer eine Berechtigungsanfrage für die Audioaufnahme vorgelegt. Diese Berechtigungsanfrage ist bereits in der Schaltfläche implementiert.

Darüber hinaus müssen Sie angeben, warum die Mikrofonerlaubnis erforderlich ist. Öffnen Sie Xcode, dann öffnen Sie Info.plist. Klicken Sie mit der rechten Maustaste und wählen Sie die Option Zeile hinzufügen und fügen Sie dann NSMicrophoneUsageDescription als Schlüssel für die Zeile ein. Der Zeilenwert sollte eine Zeichenfolge sein, die den Grund beschreibt, warum Ihre Anwendung auf das Mikrofon zugreifen möchte (z. B. "Audioanrufe").

Jetzt können Sie direkt mit dem Spaß beginnen! Fügen wir die Schaltfläche zur Benutzeroberfläche hinzu.

Hinzufügen und Konfigurieren der benutzerdefinierten UI-Komponente

Hinzufügen der benutzerdefinierten UIButton

Erstellen Sie eine neue leere Swift-Datei namens NXMCallButton.swift in Ihrem Projekt und kopieren Sie den Inhalt der folgenden GitHub Gist: https://raw.githubusercontent.com/nexmo-community/client-sdk-call-button/master/NXMCallButton.swift

Sie können nun die NXMCallButton Komponente auf zwei Arten zur Benutzeroberfläche hinzufügen: über das Storyboard oder durch programmatisches Hinzufügen der Schaltfläche.

Methode 1: Verwendung des Storyboards

1. Öffnen Sie Main.storyboard.

2. Wählen Sie ein Button Objekt aus der Objektbibliothek und fügen Sie es der Schnittstelle hinzu:

   

3. Ändern Sie die benutzerdefinierte Klasse der UIButton in NXMCallButton:

   

4. Konfigurieren Sie die inspizierbaren Parameter der Schaltfläche:

• Nexmo Token sollte ein gültiges JWT-Token sein, das Sie zur Authentifizierung Ihrer Nexmo Client-Instanz verwenden.

• Callee sollte eine PSTN-Telefonnummer oder ein Benutzername eines Benutzers in Ihrer Anwendung sein, der angerufen wird, wenn die Taste gedrückt wird.

Hinweis: Wenn Sie die Nexmo Token und Callee Parameter dynamisch ändern wollen, können Sie die Schritte im nächsten Abschnitt befolgen.

Methode 2: Programmgesteuertes Hinzufügen der Schaltfläche "Anrufen

Wenn Sie die Aufruftaste programmatisch hinzufügen, können Sie ihre Eigenschaften ändern, z. B. callee und nexmoTokendynamisch ändern. Neben dem Aufruf des gewünschten Ziels können weitere Aktionen hinzugefügt werden, wenn die Schaltfläche gedrückt wird, z. B. der Wechsel zu einer anderen Ansicht.

Um die Schaltfläche programmatisch zu einem View-Controller hinzuzufügen, müssen Sie die folgenden Schritte ausführen:

1. Erstellen Sie eine neue Instanz von NXMCallButton.

2. Setzen Sie Werte für seine title und callee Eigenschaften.

3. Authentifizieren Sie Ihre Nexmo-Client-Instanz mit der login(withAuthToken:) Methode von NXMClient.shared.

4. Optional können Sie weitere UI-Einstellungen vornehmen, wie z. B. die Konfiguration einer Hintergrundfarbe und von Einschränkungen. Da NXMCallButton erbt von UIButtonerbt, sind alle UIButtonEigenschaften zur Verfügung, die Sie verwenden können.

5. Fügen Sie der Schaltfläche bei Bedarf zusätzliche Aktionen hinzu, z. B. einen Übergang zu einer anderen Ansicht, wenn die Schaltfläche gedrückt wird.

6. Fügen Sie die Anrufschaltfläche zu Ihrer Ansicht hinzu.

So sieht es innerhalb einer 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")
	}
}

Es ist auch möglich, einen Beendigungshandler auszuführen, nachdem ein Anruf gestartet wurde. Es ist eine gute Praxis, dem Benutzer eine Meldung zu geben, dass ein Anruf begonnen hat, oder einen anderen Bildschirm anzuzeigen.

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

Zusammenfassung

In diesem Tutorial haben wir den Prozess der Integration von Aufrufen in eine App mit Hilfe einer benutzerdefinierten NXMCallButton Komponente. Wir haben uns zwei Möglichkeiten angeschaut: über den Interface Builder ohne eine einzige Zeile Code und programmatisch, mit der Freiheit, sie dynamisch zu ändern und zu konfigurieren.

Wenn Sie sehen möchten, wie die Magie vor Ihren Augen geschieht, stellen Sie den Anrufer auf Ihre Telefonnummer ein, starten Sie die App und klicken Sie auf die Wähltaste. Eine kurze Erinnerung daran, dass ein Antwort-Webhook erforderlich ist, um Anrufe zu ermöglichen - siehe dieses Lernprogramm als Beispiel.

Weitere Lektüre

• Nexmo SDKs und Werkzeuge

• NXMCallButton.swift auf GitHub

• In-App Messaging mit dem Nexmo Client SDK