https://a.storyblok.com/f/270183/1368x665/084e3140d0/code-hub_chatgpt.png

Verwenden Sie CodeHub + ChatGPT, um Kommunikationsanwendungen schneller zu machen

Zuletzt aktualisiert am May 28, 2024

Lesedauer: 3 Minuten

Einführung

Code Hub ist die Heimat für vorgefertigte Lösungen für gängige Kommunikations-Workflows und browserbasierte Codierungsumgebungen. Diese vorgefertigten Lösungen können Ihre Entwicklungszeit, die Konfiguration von Abhängigkeiten und die manuelle Konfiguration von API-Schlüsseln erheblich reduzieren.

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

Da ChatGPT ein Tool ist, das heute von vielen Unternehmen eingesetzt wird, haben wir mehrere Vorlagen, die diesen Prozess noch einfacher machen.

Dazu gehören:

  • WhatsApp-ChatGPT-Bot - Erstellen Sie einen WhatsApp ChatGPT Bot mit Hilfe der Vonage Messages API.

  • Voice ChatGPT Bot - Erstellen Sie einen WhatsApp ChatGPT Bot mit der Vonage Voice API.

  • Voice ChatGPT Bot (Java) - Erstellen Sie einen WhatsApp ChatGPT Bot unter Verwendung der Vonage Voice API und Java.

  • Bild ChatGPT BotIn diesem Projekt erstellen Sie einen SMS-Chatbot, der Bilder auf der Grundlage von SMS-Texteingaben mit Hilfe der OpenAI-API DALL-E erzeugt.

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

Im heutigen Blogbeitrag besprechen wir einen Anwendungsfall für Messaging. Fangen wir an!

Erste Schritte

Besuchen Sie Code Hub und blättern Sie durch die Lösungsliste, um sich mit der Benutzeroberfläche vertraut zu machen. Sie können die Suchfunktion in der Mitte der Seite nutzen, wenn Sie etwas Bestimmtes suchen. Jetzt ist auch ein guter Zeitpunkt, sich anzumelden oder zu registrieren, falls Sie dies noch nicht getan haben.

Code Hub Main MenuCode Hub Main Menu

"SMS-ChatGPT-Bot" Anwendungsfall-Walkthrough

Richten Sie Ihren Browser auf den SMS-ChatGPT-Bot Vorlage. Dieser häufige Anwendungsfall wird als erstes Beispiel dienen.

SMS ChatGPT BotSMS ChatGPT Bot

Schauen wir uns an, welche Funktion die einzelnen Registerkarten haben:

  • Überblick - Eine kurze Beschreibung, was mit der Probe erreicht werden soll und wie man damit anfängt.

  • 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.

Um zu beginnen, wählen Sie nach der Anmeldung Code bereitstellen, dann Bereitstellen neu** **Instanz.

Sie werden um folgende Angaben gebeten:

  • Region - Wählen Sie die Region, die Ihnen am nächsten liegt

  • Name der Instanz - Geben Sie ihr einen Spitznamen

  • Vonage-Nummer - Weisen Sie dem Projekt eine Nummer zu

  • OpenAI-API-Schlüssel - Dies ist der Schlüssel, den Sie von der OpenAI-API erhalten.

Project DeploymentProject Deployment

Klicken Sie abschließend auf Fortfahren, und die Bereitstellung wird beginnen. Sie können dann prüfen, ob der Status auf läuft, und wenn ja, drücken Sie die Taste starten. Taste.

Chatbot RunningChatbot Running

Außerdem gibt es eine Option zum Protokolle anzeigendie bei der Nachverfolgung und Fehlersuche hilfreich sein kann.

Starten Sie die Anwendung

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

Launch AppLaunch App

Vorausgesetzt, Sie haben eine gültige OpenID-API eingegeben. Wenn Sie Ihre Nummer mit einer Frage per SMS eingeben, wird die Antwort zurückgegeben. Versuchen Sie etwas wie "Wo ist die Vonage-Zentrale?".

Bearbeiten Sie das Muster (in IHREM Browser!)

Nachdem wir nun ein Beispiel erfolgreich bereitgestellt haben, können wir versuchen, den Code zu ändern und ihn sofort bereitzustellen, um die Änderungen live zu sehen. Klicken Sie auf Code abrufenund dann Erstellen Sie eine neue Entwicklungsumgebung. Sie müssen Ihren Arbeitsbereich festlegen, also geben Sie die erforderlichen Informationen ein und klicken Sie auf Weiter.

Jetzt wird das Projekt in Visual Studio Code INNERHALB Ihres Browsers angezeigt.

Edit in your BrowserEdit in your Browser

Beginnen Sie mit einem Blick in die README.md, die wichtige Informationen darüber enthält, wie das Beispiel ausgeführt wird.

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

Sie können gerne herumspielen und einige Änderungen vornehmen. Zum Beispiel könnten Sie in Zeile 98 in index.js die hartkodierte Zeichenkette "ChatGPT:" entfernen und nur mit dem antworten, was ChatGPT zurücksendet.

Nachbereitung

Wir sind gespannt auf die vielen neuen und interessanten Möglichkeiten, wie unsere Kunden dieses Tool nutzen. Konsultieren Sie einfach unsere Dokumentation für weitere Informationen. 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!

Teilen Sie:

https://a.storyblok.com/f/270183/400x400/7cdff37c0e/michael-crump.png
Michael CrumpManager, Entwicklererfahrungen

Michael Crump arbeitet bei Vonage im Developer Experiences Team und ist Programmierer, YouTuber und häufiger Sprecher zu verschiedenen Themen der .NET- und Cloud-/Kommunikationsentwicklung. Seine Leidenschaft ist es, Entwicklern die Vorteile der jeweiligen Technologien auf einfache Art und Weise näher zu bringen.