Wie man mit Android und React Native telefoniert

Dieser Blogbeitrag führt Sie durch ein Projekt, das Ihnen zeigt, wie Sie das Vonage Client SDK zum Erstellen einer React Native Android-App zu erstellen, die eine Telefonnummer anruft. Wenn Sie die Verwendung des Client SDK mit iOS erkunden möchten, lesen Sie diesen Blog-Beitrag.

Voraussetzungen

• Android Studiomit JDK 8 oder neuer, um die Anwendung auf einem Emulator zu erstellen und auszuführen.

• A GitHub Account.

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

• 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-Anwendung zu erstellen und auszuführen, müssen Sie zunächst die Abhängigkeiten, Node und Watchman, installieren. Sie können dies mit Homebrew tun. Führen Sie in Ihrem Terminal aus:

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 Accounts 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

Zunächst müssen Sie ein Android-Gerät vorbereiten, auf dem das Projekt laufen soll. Öffnen Sie das Verzeichnis des Projekts android Verzeichnis in Android Studio. Das Projekt beginnt mit dem Laden und Herunterladen der Abhängigkeiten, einschließlich des Client SDK, über den Gradle Sync. Sie können die Abhängigkeiten in der Android-App in der build.gradle Datei (android/app/build.gradle). Suchen Sie in der oberen Symbolleiste nach der Schaltfläche AVD Manager:

Wenn Sie bereits einen Emulator eingerichtet haben, starten Sie ihn. Wenn nicht, klicken Sie auf die Schaltfläche Virtuelles Gerät erstellen und durchlaufen Sie den Assistenten. Stellen Sie sicher, dass Sie ein Gerät mit API-Level 29 oder höher erstellen, wie von React Native gefordert.

Wenn alle Abhängigkeiten installiert sind und der Emulator läuft, können Sie das Projekt jetzt starten. starten. Metro mit npx react-native start. Öffnen Sie ein neues Terminalfenster im selben Verzeichnis und führen Sie npx react-native run-android. Mit diesem Befehl wird das Android-Projekt für den von Ihnen vorbereiteten Emulator erstellt und ausgeführt. Die App besteht aus einem Etikett, das den Verbindungsstatus anzeigt, einem Etikett, das den Anrufstatus anzeigt, und einer Aktionsschaltfläche.

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 werden. Der Zustand 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.

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 sehen Sie den Umfang des Codes, der in JavaScript erforderlich ist, um Berechtigungen anzufordern, sowie das Hinzufügen der Berechtigung zur AndroidManifest.xml Datei:

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

Das Client SDK

Das Client SDK ist eine systemeigene Abhängigkeit, so dass es eine Möglichkeit geben muss, zwischen dem JavaScript-Code auf App.tsx und dem nativen Android-Code zu kommunizieren. Es gibt zwei Möglichkeiten, dies zu tun, je nach der Richtung der Informationen. NativeModules Native Klassen in JavaScript aussetzen, um die Ausführung von nativem Code zu ermöglichen. 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) => {
...
});

Wenn Sie das Verzeichnis android Verzeichnis des Projekts öffnen, werden Sie eine Klasse namens EventEmitter (android/app/src/main/java/com/rnapptophone/EventEmitter.java). Die EventEmitter Klasse hat eine Funktion, die die Signale an den JavaScript-Code sendet.

public void sendEvent(String eventName, @Nullable WritableMap params) {
    this.context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}

Diese Funktionen werden von der ClientManager Klasse (android/app/src/main/java/com/rnapptophone/ClientManager.java). Die ClientManager Klasse ist ein Wrapper um das Client SDK. Beide Klassen erweitern die ReactContextBaseJavaModule Klasse, die von beiden Unterklassen verlangt, dass sie einen Namen als String zurückgeben, der als NativeModules Name. ClientManager.java macht Gebrauch von einer Annotation, ReactMethod. Diese Annotation kennzeichnet die Methode, die für JavaScript zugänglich sein soll. Hier ist zum Beispiel die Login-Funktion, die Sie zuvor verwendet haben:

@ReactMethod
public void login(String jwt) {
    client.createSession(jwt, null, (error, sessionId) -> {
        if (error != null) {
            this.sendEvent("onStatusChange", "status", "Error");
        }
        if (sessionId != null) {
            this.sendEvent("onStatusChange", "status", "Connected");
        }
        return null;
    });
}

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 Android-App mit dem React Native Framework erstellt. Wir haben auch eine Funktion hinzugefügt, um einen Anruf an eine physische Telefonnummer zu tätigen. Das komplette Projekt finden Sie auf GitHubund die iOS-Version dieses Blogs auf learn.vonage.com.

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

• NCCO-Referenz

• Client SDK

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