Einführung

Kennen Sie das Gefühl, wenn Sie in Ihren Kleiderschrank schauen und denken: "Ich habe nichts zum Anziehen"? Das passiert den meisten von uns. Am Ende trägt man immer die gleichen Sachen, während andere Kleidungsstücke einfach vergessen werden. Wie wäre es, wenn Sie Ihrem Kleiderschrank eine SMS schicken könnten und er Ihnen zeigen würde, was Sie haben?

In diesem Blogbeitrag werden wir einen digitalen Kleiderschrank-Assistenten bauen. Es ist ein unterhaltsames Projekt, das die Verwendung von Rich Communication Services (RCS) um einen Bot zu simsen. Er zeigt dir Bilder deiner Kleidung. Wir verwenden die Vonage Messages API und die Google Gemini-API um es intelligent zu machen. Es geht darum, ein einfaches Problem in eine coole, technische Lösung zu verwandeln.

Den kompletten Code finden Sie im GitHub-Repository.

RCS Conversation

Voraussetzungen

Um mitzumachen, brauchen Sie:

• A registrierter RCS Business Messaging (RBM) Agent

• Ein Telefon mit RCS-Funktionen zum Testen

• Node.js 18+

• Vonage API-Konto

  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.

  

  Sind Sie bereit, mit dem Bau zu beginnen?

  Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Holen Sie sich den Code

git clone https://github.com/Vonage-Community/blog-messages-nodejs-rcs_wardrobe

cd blog-messages-nodejs-rcs_wardrobe

npm install

Abhängigkeiten

Dieses Projekt verwendet die in der package.json-Datei enthaltenen Abhängigkeiten.

Express. Sie können auf jedes einzelne Element klicken, um seine Definitionen auf npm zu sehen: dotenv, @vonage/server-sdk, @vonage/messages, @vonage/jwt, und @google/genai.

Projektstruktur

Die Projektstruktur finden Sie auf dem zugehörigen GitHub-Repository für den Blogbeitrag.

src/index.js       server, wardrobe endpoint, webhook handlers

src/vonage.js      Vonage client setup with your private key

wardrobe.json      sample items that reference image filenames

Photos/            images used by wardrobe.json

private.key        your Vonage application private key (add this file)

.env               environment variables (create this)

Erstellen einer Vonage-Anwendung

Die folgenden Schritte zeigen Ihnen, wie Sie eine neue Vonage-Anwendung über das Dashboard erstellen können. Alternativ können Sie auch die CLI verwenden, um eine Anwendung zu erstellen.

Eine neue Anwendung erstellen

Gehen Sie zu Ihre Applications im Vonage Dashboard und klicken Sie auf , um eine neue Anwendung zu erstellen.

Berechtigungsnachweise generieren

Erstellen Sie ein öffentliches/privates Schlüsselpaar für die API-Authentifizierung. Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren", um den privaten Schlüssel zu erhalten. Die Datei wird an den Ort heruntergeladen, den Sie in Ihrem Browser für heruntergeladene Dateien festgelegt haben. Fügen Sie diese Datei unbedingt dem Projektordner hinzu.

Messages API-Fähigkeit

Starten einer ngrok-Tunneling-Instanz

Führen Sie den folgenden Befehl aus, um einen ngrok-Tunneling Instanz zu starten.

ngrok http 3000

In der Ausgabe finden Sie eine URL, die mit https:// beginnt und in .ngrok.app/ endet. Notieren Sie sich diese, da Sie sie im nächsten Schritt für die Konfiguration Ihrer Webhooks benötigen.

Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000         

Messages Webhooks

Webhooks konfigurieren

Zurück im Vonage API Dashboard, unter Ihren Apps, schalten Sie die Option Messages unter capabilities um und setzen Sie die öffentliche URL Ihres Servers von ngrok als Endpunkt für eingehende Nachrichten und Ereignisse. Das sollte wie folgt aussehen: https://94cd51b63460.ngrok.app/webhooks/inbound für eingehende Nachrichten und https://94cd51b63460.ngrok.app/webhooks/status für den Status. Wenn Sie mehr über Webhooks erfahren möchten, finden Sie Informationen in unserer Vonage-Dokumentation.

Umgebungsvariablen

Mit Umgebungsvariablen können Sie Anmeldeinformationen und Konfigurationen aus Ihrem Code heraushalten. Erstellen Sie eine .env-Datei im Stammverzeichnis des Repos und fügen Sie die folgenden Umgebungsvariablen hinzu:

VONAGE_APPLICATION_ID=your-app-id

VONAGE_PRIVATE_KEY_PATH=./private.key

RCS_SENDER_ID=your-rcs-sender-id

GEMINI_API_KEY=your-gemini-api-key

VONAGE_API_SIGNATURE_SECRET=your-signature-secret

PUBLIC_BASE_URL=https://your-ngrok-subdomain.ngrok-free.app

PHONE_NUMBER=+<your_e164_number>

PORT=3000

Wie es funktioniert

Der Server bedient /photos von Photos, verifiziert Vonage Webhooks mit Ihrem Signature Secret, liest den RCS-Text des Benutzers, lädt wardrobe.json und fragt Gemini nach { TextResponse, ReferencedImages }. Er gibt den Text zurück und sendet dann Bilder; bei mehreren Bildern wird ein Karussell gesendet. Bild-URLs verwenden PUBLIC_BASE_URL/photos/<filename>.

src/index.js enthält die Routen, die Webhook-Prüfung, den Gemini-Aufruf und die RCS-Sendelogik. src/vonage.js lädt env-Werte, liest private.key, und erstellt den Vonage-Client.

const verifyJWT = (req) => {
  // Verify if the incoming request came from Vonage
  const jwtToken = req.headers.authorization.split(" ")[1];
  if(!verifySignature(jwtToken, process.env.VONAGE_API_SIGNATURE_SECRET)) {
    console.error("Signature does not match");
    throw new Error("Not a Vonage API request");
  }

  console.log("JWT verified");
}

npm install @vonage/jwt

Führen Sie aus. node src/index.jsund besuchen Sie dann einmal http://localhost:3000/wardrobe, um die erste Nachricht an PHONE_NUMBER. Sobald das Thema auf Ihrem Gerät erscheint, antworten Sie mit Ihren Fragen.

Ausführen der JavaScript-Datei

Führen Sie im Stammverzeichnis des Repositorys den folgenden Befehl in Ihrem Terminal aus. Stellen Sie sicher, dass Ihre Ngrok-Instanz noch läuft.

node src/index.js

Beginnen Sie die Konversation

Um die erste Agentennachricht an PHONE_NUMBER zu senden, um einen RCS-Thread auf Ihrem Gerät zu öffnen, navigieren Sie zu dieser URL in Ihrem Browser: http://localhost:3000/wardrobe.

Test auf RCS

Sie können mit Ihrem digitalen Kleiderschrank chatten, der Informationen aus der Datei wardrobe.json liest. Sie können Fragen zu den Kleidungsstücken stellen, z. B. wie viele Skinny-Hosen habe ich? Der Schrank sendet dann eine RCS-Rich-Card-Karussell-Nachricht mit den Kleidungsstücken, die den von Ihnen angegebenen Kriterien entsprechen, und die Bilder stammen von PUBLIC_BASE_URL/photos/<filename>.

Hinweis: Für dieses Projekt habe ich eine ausgefüllte JSON-Datei verwendet; Sie könnten jedoch auch aus einer Datenbank lesen. Gemini verwendet hier keine Computer Vision; stattdessen hilft es, die JSON-Datei auf der Grundlage Ihrer Textabfrage zu filtern, und die RCS-Nachricht verwendet dann die Bildlinks in dieser Datei. Wie die Interaktion aussieht, können Sie auf dem Bild sehen, das ich ganz oben in diesem Blogbeitrag eingefügt habe.

Schlussfolgerung

Heute haben Sie gelernt, wie Sie mit Gemini eine digitale KI-Garderobe erstellen und Rich Card Carousel Messages über RCS versenden können. Probieren Sie auch die anderen Arten von RCS-Nachrichten aus, die über Text hinausgehen, wie z.B.: Rich Cards, Rich-Card-Karusselle, Vorgeschlagene Antworten, vorgeschlagene Aktionen.

Wenn Sie mehr darüber erfahren möchten, wie Sie diese Funktionen nutzen können, sehen Sie sich dieses Tutorial an, wie Sie Erstellen eines Erzähldienstes mit RCS Rich Cards und Gemini. Sie können Rich Cards verwenden, um eine Erzählung zu erstellen, wobei jede Karte ein anderes Kapitel oder eine Wahl in einer interaktiven Geschichte darstellt. Hier ist eine Empfehlung für einen Blogpost: Wie man RCS Rich Card Karussells mit Node.js sendet.