Wie man mit iOS und React Native telefoniert

Dieses Tutorial zeigt Ihnen, wie Sie das Vonage Client SDK zum Erstellen einer React Native iOS-App mit der Funktionalität, eine Telefonnummer anzurufen.

Voraussetzungen

• Xcode 12, um die App auf einem iOS-Simulator zu erstellen und auszuführen.

• A GitHub Konto.

• Cocoapods um das Vonage Client SDK für iOS zu installieren.

• Unser Command Line Interface, das Sie mit npm install -g @vonage/cli.

• Homebrew um die React Native-Abhängigkeiten zu installieren.

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.

React Native einrichten

Um eine React Native-App zu erstellen und auszuführen, müssen Sie zunächst zwei Abhängigkeiten installieren: Node und Watchman. Sie können dies mit Homebrew tun, indem Sie das Folgende in Ihrem Terminal ausführen:

Wenn Sie bereits Node installiert haben, vergewissern Sie sich, dass es sich um Node 12 oder eine neuere Version handelt. Weitere Informationen über die Einrichtung Ihrer Umgebung finden Sie in der React Native-Dokumentation.

Das Projekt klonen

Sie können das Projekt auf Ihren lokalen Rechner klonen, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

Wechseln Sie dann in Ihrem Terminal mit folgendem Befehl in den neuen Ordner:

Nun, da das Projekt geklont wurde, können Sie die Projektabhängigkeiten installieren. Sie können die React Native spezifischen Abhängigkeiten installieren, indem Sie npm install. Dieser Befehl installiert die Abhängigkeiten, die in der package.json Datei aufgelistet sind. Eine Abhängigkeit, die Sie beachten sollten, ist react-native-permissionsein Open-Source-Projekt, das eine einheitliche Methode zum Anfordern von Berechtigungen für iOS und Android bietet. Sie können die iOS-Abhängigkeiten überprüfen, indem Sie sich die Datei Podfile.

Die Vonage-Anwendung

Zur Erstellung der Anwendung verwenden wir unsere Befehlszeilenschnittstelle. Wenn Sie die Befehlszeilenschnittstelle noch nicht eingerichtet haben, können Sie dies tun, indem Sie den Befehl vonage config:set --apiKey=API_KEY --apiSecret=API_SECRET in Ihrem Terminal ausführen, wobei der API-Schlüssel und das Geheimnis der API-Schlüssel und das Geheimnis sind, die Sie in Ihren Einstellungen Ihres Kontos Seite zu finden sind.

Eine Vonage-Nummer kaufen

Für die Anwendung benötigen wir eine Vonage-Nummer, die Sie über die Vonage-CLI erwerben können. Der folgende Befehl sucht nach einer verfügbaren Nummer in den USA. Geben Sie eine alternativen zweistelligen Ländercode um nach einer Nummer in einem anderen Land zu suchen.

vonage numbers:search US

Wenn Sie eine Nummer gefunden haben, können Sie sie mit diesem Befehl kaufen:

vonage numbers:buy $NUMBER US

Einen Webhook-Server erstellen

Wenn ein eingehender Anruf eingeht, stellt Vonage eine Anfrage an eine öffentlich zugängliche URL Ihrer Wahl - wir nennen dies die answer_url. Sie müssen einen Webhook-Server erstellen, der in der Lage ist, diese Anfrage zu empfangen und eine NCCO mit einer connect Aktion enthält, die den Anruf an die PSTN-Telefonnummer. Sie tun dies, indem Sie die Zielnummer aus dem to Abfrageparameter extrahieren und in Ihrer Antwort zurückgeben.

Erstellen Sie einen neuen Ordner:

mkdir vonageapp

cd vonageapp

Installieren Sie die Abhängigkeiten:

npm init -y

npm install express localtunnel --save

Erstellen Sie eine Datei namens server.js die den folgenden Code enthält:

'use strict';

const subdomain = 'SUBDOMAIN';
const vonageNumber = 'NUMBER';

const express = require('express');
const app = express();
app.use(express.json());

app.get('/voice/answer', (req, res) => {
  console.log('NCCO request:');
  console.log(`  - callee: ${req.query.to}`);
  console.log('---');
  res.json([ 
    { 
      "action": "talk", 
      "text": "Please wait while we connect you."
    },
    { 
      "action": "connect",
      "from": vonageNumber,
      "endpoint": [ 
        { "type": "phone", "number": req.query.to } 
      ]
    }
  ]);
});

app.all('/voice/event', (req, res) => {
  console.log('EVENT:');
  console.dir(req.body);
  console.log('---');
  res.sendStatus(200);
});

if(vonageNumber == "NUMBER") {
  console.log('\n\t🚨🚨🚨 Please change the NUMBER value');
  return false;
}

if(subdomain == "SUBDOMAIN") {
  console.log('\n\t🚨🚨🚨 Please change the SUBDOMAIN value');
  return false;
}
app.listen(3000);

const localtunnel = require('localtunnel');
(async () => {
  const tunnel = await localtunnel({ 
      subdomain: subdomain, 
      port: 3000
    });
  console.log(`App available at: ${tunnel.url}`);
})();

Stellen Sie sicher, dass Sie NUMBER durch Ihre Vonage-Nummer (im E.164-Format) sowie SUBDOMAIN durch einen aktuellen Wert. Der SUBDOMAIN Wert wird Teil der URLs, die Sie im nächsten Schritt als Webhooks festlegen. Starten Sie dann den Server:

node server.js

Das Terminal gibt zum Beispiel die URL Ihres Servers aus:

App available at: https://SUBDOMAIN.loca.lt

Erstellen einer Vonage-Anwendung

Als nächstes erstellen Sie eine Vonage Anwendung indem Sie den unten stehenden Befehl kopieren und in das Terminal einfügen. Vergewissern Sie sich, dass Sie die Werte von --voice_answer_url und --voice_event_url Argumente zu ändern, indem Sie SUBDOMAIN durch den im vorherigen Schritt verwendeten Wert ersetzen:

Eine Datei namens vonage_app.json wird in Ihrem Projektverzeichnis erstellt und enthält die neu erstellte Vonage-Anwendungs-ID und den privaten Schlüssel. Eine private Schlüsseldatei mit dem Namen vonage_tutorial.key wird ebenfalls erstellt.

Verknüpfen Sie schließlich die zuvor erworbene Nummer mit Ihrer Vonage-Anwendung:

vonage apps:link APPLICATION_ID --number=YOUR_VONAGE_NUMBER

Ein JWT erstellen

Das Client SDK verwendet JWTs zur Authentifizierung. Das JWT identifiziert den Benutzernamen, die zugehörige Anwendungs-ID und die dem Benutzer gewährten Berechtigungen. Es wird mit Ihrem privaten Schlüssel signiert, um zu beweisen, dass es ein gültiges Token ist. Erstellen Sie einen Benutzer für Ihre Anwendung, indem Sie in Ihrem Terminal den folgenden Befehl ausführen: vonage apps:users:create Alice um einen Benutzer namens Alice zu erstellen. Erstellen Sie dann ein JWT für den Benutzer Alice, indem Sie den folgenden Befehl ausführen und dabei APP_ID durch Ihre Anwendungs-ID von vorhin:

Das Projekt ausführen

Nachdem Sie alle Abhängigkeiten installiert haben, können Sie das Projekt nun starten. Starten Sie zuerst Metro mit npx react-native start. Öffnen Sie dann ein neues Terminalfenster im gleichen Verzeichnis und führen Sie npx react-native run-ios. Mit diesem Befehl wird das iOS-Projekt in einem iOS-Simulator erstellt und ausgeführt. Wenn die App geladen wird, werden Sie aufgefordert, die Mikrofonberechtigung zuzulassen, und dann wird die App angezeigt. Sie besteht aus einem Label, das den Verbindungsstatus anzeigt, einem Label, das den Anrufstatus anzeigt, und einer Aktionsschaltfläche.

iOS app UI

Wenn Sie den Ordner App.tsx Ordner öffnen, können Sie sich ansehen, wie dies in der render Funktion:

render() {
    return (
      <SafeAreaView>
        <View style={styles.status}>
          <Text>
            {this.state.status}
          </Text>

          <View style={styles.container}>
            <Text style={styles.callState}>
              Call Status: {this.state.callState}
            </Text>
            <Pressable
              style={styles.button}
              onPress={this.state.callAction}>
              <Text style={styles.buttonText}>{this.state.button}</Text>
            </Pressable>
          </View>
        </View>
      </SafeAreaView>
    );
}

Wenn Sie bereits mit React gearbeitet haben, wird Ihnen diese Syntax vertraut sein. A Text Komponente wird für die Beschriftungen verwendet, eine Pressable Komponente für die Schaltfläche, zusammen mit dem Styling-CSS am oberen Rand. Alle drei Komponenten machen Gebrauch von Zustand. Zustandsdaten sind Parameter für Komponenten, die sich im Laufe der Zeit ändern. Der Status wird am Anfang der App Klasse im Konstruktor mit Standardinformationen initialisiert. Sie können die JWT, die Sie im vorherigen Schritt erstellt haben, einfügen und die Datei speichern (CMD + S). Der Simulator wird neu geladen, und wenn Sie nun die Anmeldetaste drücken, stellt das Client SDK eine Verbindung her. Sie können nun einen Anruf tätigen.

iOS app UI logged in

Wie man mit nativem Code kommuniziert

Berechtigungen

Wie bereits erwähnt, verwendet das Projekt die react-native-permissions Bibliothek, um die Arbeit mit Berechtigungen auf verschiedenen Plattformen zu erleichtern. In der componentDidMount Funktion können Sie sehen, wie viel Code in JavaScript erforderlich ist, um Berechtigungen anzufordern:

if (Platform.OS === 'ios') {
  request(PERMISSIONS.IOS.MICROPHONE);
} else if (Platform.OS === 'android') {
  requestMultiple([PERMISSIONS.ANDROID.RECORD_AUDIO, PERMISSIONS.ANDROID.READ_PHONE_STATE]);
}

Neben der Installation des zugehörigen iOS-Codes, der im Podfilebenötigt wird, muss auch die Verwendungsbeschreibung in die info.plist Datei hinzugefügt werden.

Das Client-SDK

Das Client SDK ist eine systemeigene Abhängigkeit, daher muss es eine Möglichkeit geben, zwischen dem JavaScript-Code auf App.tsx und dem nativen iOS-Code zu kommunizieren. Es gibt zwei Möglichkeiten, dies zu tun, abhängig von der Richtung der Informationen. NativeModules Exponieren Sie native Klassen in JavaScript, damit Sie nativen Code ausführen können. Die NativeEventEmitter API ermöglicht es nativem Code, Signale an JavaScript-Code zu senden. Sehen Sie sich die componentDidMount Funktion in der App Klasse. Sie können sehen, dass der JavaScript-Code auf zwei verschiedene Signale wartet, onStatusChange und onCallStateChangedie die Benutzeroberfläche und die Aktion, die die Schaltfläche ausführt, aktualisieren.

eventEmitter.addListener('onStatusChange', (data) => {
...
});

eventEmitter.addListener('onCallStateChange', (data) => {
...
});

diagram showing the flow between javascript code and native code

Wenn Sie das Verzeichnis ios Verzeichnis des Projekts öffnen, sehen Sie eine Klasse namens EventEmitter (ios/RNAppToPhone/EventEmitter.m). Die Klasse EventEmitter Klasse exportiert die unterstützten Ereignisse und hat zwei Funktionen, die Signale an den JavaScript-Code senden.

- (NSArray<NSString *> *)supportedEvents {
  return @[@"onStatusChange", @"onCallStateChange"];
}

- (void)sendStatusEventWith:(nonnull NSString *)status {
  if (_hasListeners) {
    [self sendEventWithName:@"onStatusChange" body:@{ @"status": status }];
  }
}

- (void)sendCallStateEventWith:(nonnull NSString *)state {
  if (_hasListeners) {
    [self sendEventWithName:@"onCallStateChange" body:@{ @"state": state }];
  }
}

Diese Funktionen werden von der ClientManager Klasse (ios/RNAppToPhone/ClientManager.m). Die ClientManager Klasse ist ein Wrapper um das Client SDK. Beide Klassen enthalten das RCT_EXPORT_MODULE Makro, das die nativen Modulklassen exportiert und bei React Native registriert, so dass sie verwendet werden können als NativeModules. ClientManager.m macht Gebrauch von einem zusätzlichen Makro, RCT_EXPORT_METHOD. Mit diesem Makro kann die Methode von JavaScript aus aufgerufen werden. Hier ist zum Beispiel die Login-Funktion, die Sie früher verwendet haben:

RCT_EXPORT_METHOD(login:(NSString *)jwt) {
  [ClientManager.shared.client createSession:jwt
                                    callback:^(NSError * _Nullable error, NSString * _Nullable sessionId) {
    if (error != nil) {
      [ClientManager.shared.eventEmitter sendStatusEventWith:@"Error"];
      return;
    } else {
      [ClientManager.shared.eventEmitter sendStatusEventWith:@"Connected"];
    }
  }];
}

So würde sie in JavaScript aufgerufen werden:

ClientManager.login("ALICE_JWT")

Wie geht es weiter?

In diesem Tutorial haben wir gelernt, wie man eine iOS-App mit dem React Native Framework erstellt. Außerdem haben wir eine Funktion hinzugefügt, um einen Anruf an eine physische Telefonnummer zu tätigen. Das komplette Projekt finden Sie auf GitHubund die Android-Version dieses Blogs auf learn.vonage.com.

Nachfolgend finden Sie einige andere Tutorials oder Dokumentationen, die sich auf das Client SDK beziehen:

• NCCO-Referenz

• Kunden-SDK

Wie immer, wenn Sie Fragen, Ratschläge oder Ideen haben, die Sie mit der Community teilen möchten, können Sie sich gerne in unserem Slack-Arbeitsbereich der Community. Ich würde gerne hören, wie ihr mit diesem Tutorial zurechtgekommen seid und wie euer Projekt funktioniert.