Schnellere Erstellung von Messaging-Applikationen

Einführung

Vonage Cloud Runtime ist unsere cloud-native, serverlose Entwicklungsplattform, die Ihren Entwicklungsprozess beschleunigt. 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 Oberfläche von Code Hub ermöglicht es Ihnen, Anwendungsfälle zu durchsuchen, die unsere Vonage Messages APIals auch unsere Voice API, Video API, Number Insight APIund mehr.

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

• Front.com - Vonage SMS-Kanal - In diesem Projekt erstellen Sie unter Verwendung der Vonage Messages API einen SMS-Connector, der Nachrichten über Front.com Inboxes und Front Application Channels sendet und empfängt.

• Bild-ChatGPT-Bot - In diesem Projekt werden Sie mit Hilfe der OpenAI API DALL-E einen SMS-Chatbot erstellen, der Bilder auf der Grundlage von SMS-Textaufforderungen generieren und auch alternative Bilder erzeugen kann, indem Sie Ihr Bild per MMS senden.

• SMS-ChatGPT-Bot - In diesem Projekt werden Sie unter Verwendung der OpenAI API einen SMS-Chatbot erstellen, der mit ChatGPT Nachrichten sendet und empfängt.

• SMS einplanen - In diesem Projekt werden Sie eine statische Website erstellen, die es Ihnen ermöglicht, eine SMS zu planen und an eine bestimmte Nummer zu senden, indem Sie diese API verwenden.

• Automatische SMS-Weiterleitung - Mit diesem Projekt können Sie eingehende Nachrichten über die API an eine Nummer weiterleiten - die Weiterleitungsnummer geben Sie bei der Einrichtung der Anwendung an. Dann werden alle Nachrichten, die an Ihre Vonage-Telefonnummer gesendet werden, an Ihre Nummer weitergeleitet.

• Hubspot-Integration mit Vonage Messages API - In diesem Projekt lernen Sie, wie Sie einen Connector erstellen, den Sie in Hubspot verwenden können, um benutzerdefinierte CRM-Karten in Ihren Kontakten zu definieren und SMS über Automatisierungsworkflows zu versenden.

Der heutige Blogbeitrag konzentriert sich auf einen Anwendungsfall aus dem Bereich Messaging. Wenn Sie sehen möchten, wie Code Hub bei Voice Applications helfen kann, dann klicken Sie hier. Weitere Anwendungsfälle werden in zukünftigen Beiträgen vorgestellt.

Erste Schritte

Besuchen Sie Code Hub 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.

Code Hub Main Menu

Anmeldung

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

Signing In

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

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

• Arbeitsbereiche - Zeigt die Code-Arbeitsbereiche an, die Sie erstellt haben.

• Instanzen - Zeigt die bereitgestellten Instanzen, die Sie erstellt haben.

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

• Dokumentation - Links zu unserer offiziellen Dokumentation für das Projekt.

• Region - Zeigt die aktuelle Region an, in der Sie 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.

"Planen einer SMS" Anwendungsfallbeispiel

Nehmen wir die Zeitplan für eine SMS als erstes Beispiel.

Schedule an SMS

Nachdem Sie die Seite "SMS einplanen" aufrufen, sehen Sie drei Bereiche:

Überblick - Eine kurze Beschreibung der Ziele der Probe.

Code abrufen - Ermöglicht die Verwendung der Visual Studio Code-Browserversion zum Testen des Codes, zum Vornehmen von Änderungen und zum sofortigen Bereitstellen des Codes.

Code bereitstellen - Ermöglicht es Ihnen, die Anwendung bereitzustellen und sie in Aktion zu sehen.

Sie werden auch feststellen, dass Sie sehen können, wann die Probe zuletzt erstellt wurde erstellt wurde oder aktualisiert wurde auf der oberen rechten Seite des Bildschirms. 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.

Instance Name

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

Set up your project deployment

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

Wenn Sie keine Nummer haben, wird Ihnen dieser Bildschirm angezeigt:

Add phone number

Wenn Sie eine Nummer haben, werden Sie gefragt, ob Sie sie verwenden möchten.

Add phone number app

Sobald Sie eine Nummer zugewiesen haben, beginnt die Bereitstellung.

Deployed App

Sie gelangen automatisch zur Instanz-Übersichtdie Informationen über das Projekt enthält und die Möglichkeit bietet Starten der Anwendung. Außerdem gibt es eine Option zum Protokolle anzeigen zur Unterstützung bei der Nachverfolgung und Fehlersuche.

Schedule an SMS

Starten Sie die Anwendung

Klicken Sie auf die Schaltfläche starten.. Es erscheint ein neues Browserfenster, das den folgenden Inhalt anzeigt:

Web App

Füllen Sie das Formular mit einigen Angaben aus, z. B. mit einer gültige Handynummer, a Nachrichtund eine Sendezeit und drücken Sie Senden. Es öffnet sich ein neues Browser-Fenster, und die Nachricht wird in die Warteschlange gestellt, um zum angegebenen Datum gesendet zu werden.

Bereitstellen einer neuen Umgebung und Bearbeiten des Codes

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. Stellen Sie sicher, dass Sie sich wieder auf der Anwendungsfall-Seite und klicken Sie auf Code abrufen und dann Erstellen Sie eine neue Entwicklungsumgebung.

Schedule an SMS

Bereitstellen einer Region und Name des Arbeitsbereichs zusammen mit einer 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:

Set up your workspace

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

Running in the browser

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!

Spielen Sie ruhig ein wenig herum und nehmen Sie einige Änderungen vor. Zum Beispiel könnten Sie in Zeile 53 in index.js die Nachricht hart kodieren, anstatt die Nachricht aus dem Formular zu verwenden.

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!