Senden Sie visuelle Wettervorhersagen mit Vonage RCS und Google AI

Einführung

In diesem Tutorial werden Sie eine Node.js-App erstellen, die das Wetter in einer bestimmten Stadt abruft, ein beschreibendes Bild mit Googles Imagen Modell erzeugt, eine kurze Textzusammenfassung mit Geminierstellt, und alles als eine Rich Card über RCS unter Verwendung der Vonage Messages API.

Weather forecast RCS message on phone

Hinweis: Der Code ist verfügbar auf dem Vonage Community GitHub Repository.

Voraussetzungen

• Stellen Sie sicher, dass node.js auf Ihrem Rechner installiert ist.

• Ein registrierter RCS Business Messaging (RBM) Agent.

• Ein Telefon mit RCS-Funktionen.

• API-Tunneling-Dienst. Dieses Tutorial verwendet ngrok. Erfahren Sie mehr über wie man ngrok verwendet zum Testen verwendet.

• API-Schlüssel

  • Wetter-API Schlüssel.

  • Gemini API Schlüssel.

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

Wie Sie RCS auf Ihrem Telefon zum Laufen bringen

Um RCS über die Vonage Messages API zu nutzen, benötigen Sie einen RCS-Agenten, der mit Ihrem Account verknüpft ist. Wenden Sie sich an den Vonage Support oder Ihren Account Manager um den Entwicklermodus zu aktivieren und Telefonnummern auf der Zulassungsliste hinzuzufügen. Nach der Verknüpfung erscheint Ihr RCS-Agent unter "External Accounts" im Vonage Dashboard.

Starten einer ngrok-Tunneling-Instanz

Führen Sie den folgenden Befehl aus, um ngrok zu starten:

ngrok http 3000

Kopieren Sie die HTTPS-URL (z. B., https://94cd51b63460.ngrok.app), um Ihre Webhooks zu konfigurieren.

Webhooks konfigurieren

Legen Sie im Vonage API Dashboard Ihre öffentliche ngrok-URL als Endpunkt für eingehende Nachrichten und Ereignisse fest:

• Eingehend: https://YOUR_NGROK_URL/webhooks/inbound

• Status: https://YOUR_NGROK_URL/webhooks/status

ngrok URL added to Vonage Messages API webhooks

Anfängliche Projekteinrichtung

Klonen Sie das Repository und installieren Sie die Abhängigkeiten. Sie können alle Abhängigkeiten in der Datei package.json finden.

npm install

Erstellen Sie die Umgebungsvariablendatei

Sie können sehen, dass es eine .env.example-Datei im Node-Projekt gibt, machen Sie eine Kopie davon und erstellen Sie eine .env-Datei, die die folgenden Umgebungsvariablen enthält.

VONAGE_APPLICATION_ID= This is your your Vonage Application ID, as you can see in the image provided below. 

VONAGE_PRIVATE_KEY=./private.key, it's the private key you downloaded earlier when creating the application.

RCS_SENDER_ID=YOUR_RCS_SENDER_ID. You will need an RCS Agent linked to your Vonage account to send and receive RCS messages via the Vonage Messages API. To get the agent set up, contact Vonage Support or your account manager to get the ball rolling. Once the agent is added to your account, you should see it listed under “External Accounts” in your dashboard.

PHONE_NUMBER=YOUR_PHONE_NUMBER_E164

PORT=3000

VONAGE_API_SIGNATURE_SECRET=YOUR_SIGNATURE_SECRET. It is the secret used to sign the request that corresponds to the signature secret associated with the api_key included in the JWT claims. You can identify your signature secret on the Dashboard settings

GEMINI_API_KEY=YOUR_GEMINI_API_KEY

WEATHER_API_KEY=YOUR_WEATHER_API_KEY

PUBLIC_URL=https://YOUR_NGROK_URL

Vonage application dashboard with webhook and RCS agent settings

Verstehen Sie den Server-Code

Die Datei server.js-Datei enthält die Kernlogik der Anwendung. Wir beginnen mit dem Import der erforderlichen Pakete. Erstellen Sie einen neuen Ordner namens public/images zum Speichern von Bildern. Jedes Mal, wenn ein neues Bild erzeugt wird, wird es zu diesem Ordner hinzugefügt. Bevor wir fortfahren, prüft die Anwendung, ob alle erforderlichen Umgebungsvariablen gesetzt sind.

Einrichten des Vonage SDK und initialisieren Sie den Client.

const privateKey = fs.readFileSync(process.env.VONAGE_PRIVATE_KEY).toString();

const auth = new Auth({

  apiKey: process.env.VONAGE_API_KEY,

  apiSecret: process.env.VONAGE_API_SECRET,

  applicationId: process.env.VONAGE_APPLICATION_ID,

  privateKey,

});

const vonage = new Vonage(auth);

Die asynchrone Funktion generateWeatherImage nimmt eine Stadt als Argument, die Sie beim Zugriff auf die URL angeben, indem Sie diese Stadt übergeben. Sie ruft die Wetter-API auf, um das aktuelle Wetter in der von Ihnen eingegebenen Stadt abzurufen. Das Imagen-Modell von Google generiert ein Wetterbild, das Bild wird lokal gespeichert und gibt neben einer Bild-URL auch eine Wetterzusammenfassung zurück.

Wir senden eine benutzerdefinierte RCS-Nachricht die die Stadt enthält. Die Funktion sendWeatherImageRCS erstellt und sendet eine Rich Card über RCS.

Sie finden auch eine JWT-Überprüfungsfunktion in der Datei server.js-Datei.

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

Alles in Aktion sehen

Starten Sie Ihren Server, indem Sie "node" gefolgt vom Namen der JavaScript-Datei in einem separaten Tab von ngrok ausführen.

node server.js

Öffnen Sie Ihren Browser und besuchen Sie http://localhost:3000/send-weather-image?city=? gefolgt von dem Namen der Stadt, für die Sie das Wetter abfragen möchten. Sie erhalten eine RCS-Karte mit einem von Gemini generierten Wetterbild und Textinformationen.

Testen wir es mit Paris, das ich auch als Standardstadt eingestellt habe.

http://localhost:3000/send-weather-image?city=Paris

RCS weather message interaction with Paris forecastNehmen wir ein anderes Beispiel, etwa die Stadt Ipatinga.

http://localhost:3000/send-weather-image?city=Ipatinga

Mögliches Spaßprojekt mit Vibe Coding

Um eine visuelle Wettervorhersage über RCS zu senden, greifen wir auf eine URL zu, die die Wetterinformationsrecherche auslöst und Text und Bilder über die gesuchte Stadt anzeigt. Sie könnten ein Tool zur Codegenerierung ausprobieren, z. B. Gemini Code Assist oder Google AI Studio verwenden, um eine Benutzeroberfläche zu erstellen, die es dem Benutzer ermöglicht, auf eine Schaltfläche zu klicken und eine RCS-Rich-Text-Nachricht an sein Telefon zu senden.

Wenn Sie gerne mit Entwickler-Tools und Programmierumgebungen experimentieren, sollten Sie sich Alexandra Williams, Developer Advocate bei Vonage, die zeigt, wie man die Vonage API-Dokumentation in Cursor.

Schlussfolgerung

Sie haben das Ende des Tutorials erreicht! Nachdem Sie nun gesehen haben, wie Sie RCS mit der Messages API verwenden können, schauen Sie sich doch einmal an, wie Sie Ihre Benutzer in der folgenden Anleitung verifizieren können Verify API zu verifizieren?