Schnellere Erstellung von Voice-Applikationen

Einführung

Vonage Cloud Runtime ist unsere cloud-native, serverlose Entwicklungsplattform, die Ihren Entwicklungsprozess beschleunigt. Und Code Hub ist die Heimat für vorgefertigte Lösungen für gängige Kommunikations-Workflows und browserbasierte Codierungsumgebungen. Durch die Nutzung dieser vorgefertigten Lösungen können Sie Ihre Entwicklungszeit erheblich verkürzen. Vorbei sind die Zeiten des Herunterladens eines Beispiels, der Konfiguration von Abhängigkeiten und der manuellen Konfiguration von API-Schlüsseln.

Die intuitive Benutzeroberfläche von Code Hub ermöglicht es Ihnen, Anwendungsfälle zu durchsuchen, die unsere Vonage Voice API als auch unsere Video API, Number Insight API, Messages APIund mehr.

Für unsere Voice API stehen heute mehrere Anwendungsfälle zur Verfügung, unter anderem:

• Anklicken und anrufen - Erstellen Sie eine Schaltfläche, mit der Besucher Ihrer Website über die Vonage Voice API schnell Kontakt aufnehmen können.

• Interaktive Voice-Antwort (IVR) - Erstellen Sie ein automatisiertes Telefonsystem mit der Voice API von Vonage, bei dem die Benutzer Informationen über die Tastatur eingeben und eine gesprochene Antwort hören.

• Voice-Benachrichtigungen - Kontaktieren Sie eine Liste von Personen per Telefon und übermitteln Sie eine bestimmte Nachricht.

• Voice WebSocket Echo - Erstellen Sie einen Sprach-Echo-Server mit WebSockets und der Vonage Voice API.

Im heutigen Blogbeitrag werden wir uns auf einen Voice-Anwendungsfall konzentrieren. Weitere Anwendungsfälle werden in zukünftigen Beiträgen vorgestellt.

Erste Schritte

Besuchen Sie https://developer.vonage.com/cloud-runtime und blättern Sie durch die Liste der verfügbaren Lösungen, um sich mit der Benutzeroberfläche vertraut zu machen. Sie können auch die Suchleiste verwenden, wenn Sie etwas Bestimmtes suchen.

cloud-runtime-marketplace-lp.png

Anmeldung

Bevor wir mit dem Anwendungsfall Voice arbeiten, müssen Sie Anmelden bei Ihrem Vonage Account anmelden. Wenn Sie noch kein Konto haben, klicken Sie auf Anmelden. Sobald Sie ein Konto haben und sich angemeldet haben, sehen Sie einige zusätzliche Optionen, wie unten dargestellt.

signing-in.png

Schauen wir uns die Optionen an, beginnend mit der Option "Home", von links nach rechts.

• Startseite - Bringt Sie immer zum Hauptmenü zurück.

• Arbeitsbereiche - Hier werden die Code-Arbeitsbereiche angezeigt, die Sie erstellt haben.

• Instanzen- Hier werden die bereitgestellten Instanzen angezeigt, die Sie erstellt haben.

• Eingesetzte Produkte - Ermöglicht Ihnen die Verwaltung, den Start oder die Anzeige von Protokollen der installierten Produktinstanzen.

• Region - Hier wird die Region angezeigt, in der Sie gerade arbeiten.

• Angemeldetes Benutzerkonto - Der Ihnen zugewiesene API-Schlüssel, der für zukünftige Bereitstellungen verwendet wird. Wenn Sie mehrere API-Schlüssel haben, wählen Sie aus der Dropdown-Liste den gewünschten aus.

Voice Click to Call Anwendungsfallbeispiel

Nehmen wir die Klick zum Aufruf als unser erstes Beispiel.

click-to-call-overview.png

Nachdem Sie die Seite mit den Anwendungsfällen besucht haben, sehen Sie drei Abschnitte:

Übersicht - Eine kurze Beschreibung, worum es sich bei der Probe handelt. Code abrufen - Ermöglicht die Verwendung der Visual Studio Code-Browserversion, um den Code zu testen, Änderungen vorzunehmen und ihn sofort bereitzustellen. Code bereitstellen - Ermöglicht es Ihnen, die Anwendung bereitzustellen und sie in Aktion zu sehen.

Sie werden auch feststellen, dass Sie oben rechts auf dem Bildschirm sehen können, wann die Probe zuletzt erstellt oder aktualisiert wurde. Wenn es mehrere Versionen gibt, können Sie auf Veröffentlichungen klicken, um sie zu sehen.

Um zu beginnen, wählen Sie Code bereitstellen. Geben Sie der Instanz einen Instanznamenund stellen Sie sicher, dass die Region ausgewählt ist, die Ihnen am nächsten liegt, und klicken Sie auf Code bereitstellen.

Es erscheint ein Popup-Fenster, das darauf hinweist, dass für diese Probe eine Nummer erforderlich ist.

setup-project-deployment.png

Innerhalb der Verteilungsoption können Sie eine Nummer zuweisen die Sie bereits haben oder eine neue Nummer kaufen.

add-phone-number.png

Sobald Sie eine Nummer ausgewählt haben, beginnt die Bereitstellung.

deployed-app.png

Wenn Sie auf Instanzen im oberen Menü klicken, können Sie das Projekt "Click To Call" finden, wie unten gezeigt.

instances-overview.png

Wenn Sie darauf klicken, gelangen Sie zur Instanzübersicht, die Informationen über das Projekt und mehrere Instanz-URLs enthält, unter denen Sie die Anwendung ausführen können.

instances-overview-expanded.png

Unterhalb der Instanzinformationen sehen Sie, dass auch Protokolle, Ereignisse, Konfiguration und Verlauf verfügbar sind, um die Nachverfolgung und Fehlerbehebung zu erleichtern.

logging-sample.png

Klicken Sie auf die Instanz-URL 1 in der Instanz-Übersicht Abschnitt.

Sie sehen eine Schaltfläche mit der Bezeichnung "Support anrufen." Sobald Sie darauf klicken, wird die Vonage Voice API einen eingehenden Anruf tätigen.

call-support-button.png

Eine neue Umgebung bereitstellen und Code bearbeiten

Nachdem wir nun ein Beispiel erfolgreich bereitgestellt haben, wollen wir versuchen, den Code zu ändern und ihn sofort bereitzustellen, um die Änderungen live zu sehen. Klicken Sie auf Code abrufen und dann Erstellen Sie eine neue Entwicklungsumgebung.

create-dev-env.png

Bereitstellen einer Region, Name des Arbeitsbereichsund eine Vonage-Nummer. Wenn Sie nicht wissen, was das ist, können Sie auf Assign a numberklicken, und die verfügbaren Numbers in Ihrem Vonage Account werden aufgelistet. Meine sieht wie folgt aus:

setup-workspace.png

Presse Weiter und Sie erhalten das Projekt in Visual Studio Code in Ihrem Browser angezeigt.

vscode-project-loaded.png

Beginnen Sie mit einem Blick in die Readme.mddurch, die wichtige Informationen zur Ausführung des Beispiels enthält.

Wenn Sie zu einer der Quelldateien navigieren (z. B. index.js), können Sie den Code im Browser ändern!

Nehmen Sie einige Änderungen an der Datei vor. Zum Beispiel könnten Sie in Zeile 69 eine andere mp3-Audiodatei anstelle unserer Beispieldatei abspielen.

Nachbereitung

Wir sind gespannt auf die vielen neuen und spannenden Möglichkeiten, wie Kunden dieses Tool nutzen. Weitere Informationen finden Sie in unserer Dokumentation. Wenn Sie Fragen oder Feedback haben, können Sie uns auch auf dem Vonage Entwickler-Slack oder senden Sie mir einen Tweet auf Twitterund ich werde auf Sie zurückkommen. Nochmals vielen Dank fürs Lesen, und wir sehen uns beim nächsten Mal!