Wie man mit Ionic im Web, auf iOS und Android telefoniert

Dieser Blogbeitrag führt Sie durch ein Projekt, das zeigt, wie man eine Ionic App zu erstellen, mit der Sie über drei Plattformen hinweg telefonieren können, indem Sie das Vonage Client SDK. Das Projekt für diesen Blog-Beitrag verwendet React.

Voraussetzungen

• A GitHub Account.

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

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

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

Ionic einrichten

Ionic kann mit npm installiert werden, erfordert aber Node.js. Stellen Sie sicher, dass Sie Node.js installiert haben, bevor Sie fortfahren. Installieren Sie Ionic mit dem folgenden Befehl:

npm install -g @ionic/cli

Das Projekt klonen

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

git clone git@github.com:nexmo-community/ionic-app-to-phone.git

Wechseln Sie dann das Verzeichnis in den neuen Ordner cd ionic-app-to-phone.

Nachdem Sie das Projekt geklont haben, können Sie die Projektabhängigkeiten installieren, indem Sie npm install. Dieser Befehl installiert die Abhängigkeiten, die in der Datei package.json Datei aufgelistet sind. Beachten Sie die nexmo-client aufgeführt; dies ist das Client SDK.

Ionic benötigt auch einige Umgebungsvariablen, die für die Android-Entwicklung eingerichtet werden müssen. Bearbeiten Sie Ihre PATH mit:

Danach laden Sie die Konfiguration in die aktuelle Shell mit dem source Befehl. Ausführlichere Anweisungen finden Sie in der Ionic-Dokumentation.

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 den Einstellungen Ihres Einstellungen Ihres Accounts Seite zu finden sind.

Ein NCCO erstellen

A Nexmo Anrufsteuerungsobjekt (NCCO) ist ein JSON-Array, mit dem Sie den Ablauf eines Voice API-Anrufs steuern können. Das NCCO muss öffentlich und über das Internet zugänglich sein. Um dies zu erreichen, werden Sie ein GitHub Gist verwenden, das eine bequeme Möglichkeit bietet, die Konfiguration zu hosten.

Gehen Sie zu https://gist.github.com/ und geben Sie call.json in das Feld "Dateiname mit Erweiterung" ein. Der Inhalt der Gist wird das folgende JSON sein:

[
    {
        "action": "talk",
        "text": "Please wait while we connect you."
    },
    {
        "action": "connect",
        "endpoint": [
            {
                "type": "phone",
                "user": "447000000000"
            }
        ]
    }
]

Erstellen Sie den Gist und klicken Sie dann auf die Schaltfläche "Raw", um eine URL für Ihr NCCO zu erhalten. Notieren Sie sich diese für den nächsten Schritt.

Erstellen einer Vonage-Anwendung

Sie müssen nun eine Vonage-Anwendung erstellen. Eine Anwendung enthält die Sicherheits- und Konfigurationsinformationen, die Sie für die Verbindung mit Vonage benötigen. Erstellen Sie in Ihrem Terminal eine Vonage-Anwendung mit folgendem Befehl und ersetzen Sie GIST_URL durch die URL aus dem vorherigen Schritt:

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 app_to_phone_tutorial.key wird ebenfalls erstellt.

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 vonage apps:users:create Alice ausführen, 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 nun die Vonage-Anwendung eingerichtet haben, können Sie einige Anrufe tätigen.

Web

Die erste Plattform, auf der Sie das Projekt ausführen werden, ist das Web. Dazu bearbeiten Sie die Home.tsx Datei (/ionic-app-to-phone/src/pages/Home.tsx) und ersetzen Sie ALICE_JWT durch das JWT, das Sie zuvor erzeugt haben.

Führen Sie das Projekt anschließend von Ihrem Terminal aus mit ionic serve. Dieser Befehl startet einen lokalen Server auf Ihrem Rechner an Port 8100 und öffnet die Anwendung in Ihrem Webbrowser. Klicken Sie auf die Schaltfläche Login, die das JWT zur Authentifizierung des Client SDK verwendet. Nach der Anmeldung können Sie nun einen Anruf an die im NCCO angegebene Telefonnummer tätigen.

iOS

Ionen-Verwendung Kondensator um die Webanwendung zu erstellen, die Sie gerade für native Plattformen verwendet haben. Lassen Sie den Ionic-Entwicklungsserver in Ihrem Terminal laufen und öffnen Sie ein neues Terminalfenster im selben Verzeichnis. Die iOS- und Android-Apps erfordern, dass der Entwicklungsserver über HTTPS verfügbar ist, also können Sie localtunnel verwenden, um eine HTTPS-URL zu erstellen. Geben Sie den folgenden Befehl in Ihr Terminal ein und ersetzen Sie SUBDOMAIN durch eine eindeutige Zeichenfolge:

npx localtunnel --port 8100 --subdomain=SUBDOMAIN

Mit diesem Befehl wird ein Tunnel zum Port 8100 Ihres Rechners geöffnet.

Die Erstellung eines nativen Projekts mit Capacitor erfolgt in 3 Schritten. Zunächst wird der Webcode erstellt. Als nächstes wird der Code auf jede Plattform kopiert und dann werden plattformspezifische Tools verwendet, um die Anwendung zu erstellen.
Öffnen Sie ein neues Terminalfenster im selben Verzeichnis. Sie können die erste und zweite Stufe mit ionic capacitor sync ios. Starten Sie dann das iOS-Projekt mit Capacitor und ersetzen Sie SUBDOMAIN durch Ihre eindeutige Zeichenfolge:

ionic capacitor run ios -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Dieser Befehl öffnet Xcode für Sie und ermöglicht das Live-Nachladen des Codes. Erstellen und Ausführen (CMD + R) in Xcode, und wenn die App auf dem von Ihnen gewählten Simulator/Gerät läuft, können Sie sich anmelden und einen Anruf tätigen, genau wie im Web.

Da Ionic webbasiert ist, kann die iOS-App die gleiche Client SDK-JavaScript-Abhängigkeit verwenden und funktioniert ohne plattformspezifische Codeänderungen.

Android

Der Prozess für Android ist dem für iOS sehr ähnlich. Beenden Sie in Ihrem Terminalfenster, in dem das iOS-Projekt läuft, den Prozess mit Strg+C und führen Sie dann Folgendes aus ionic capacitor sync android. Starten Sie dann das Android-Projekt mit Capacitor und ersetzen Sie SUBDOMAIN durch Ihre eindeutige Zeichenfolge:

ionic capacitor run android -l --external --livereload-url=https://SUBDOMAIN.loca.lt

Dieser Befehl öffnet Android Studio für Sie, wo Sie die App auf einem Emulator oder Gerät erstellen und ausführen können. Wenn die App auf dem von Ihnen gewählten Emulator/Gerät läuft, können Sie sich anmelden und einen Anruf tätigen, genau wie im Web und bei iOS, ohne Codeänderungen.

Wie geht es weiter?

Das komplette Projekt finden Sie auf GitHub. Sie können noch viel mehr mit dem Client SDK machen, erfahren Sie mehr auf developer.vonage.com.