Envoyez des prévisions météorologiques visuelles avec Vonage RCS et Google AI

Introduction

Dans ce tutoriel, vous construirez une application Node.js qui récupère la météo d'une ville donnée, génère une image descriptive à l'aide de la fonction Imagen de Google, crée un court résumé textuel avec Geminiet envoie le tout sous forme de carte riche via RCS à l'aide de l'API Messages de Vonage.

Weather forecast RCS message on phone

Note : Le code est disponible sur le dépôt GitHub de la dépôt GitHub de la communauté Vonage.

Conditions préalables

• Assurez-vous que node.js est installé sur votre machine.

• Un agent RCS Business Messaging (RBM) enregistré.

• Un téléphone avec des fonctionnalités RCS.

• API tunneling service. Ce tutoriel utilise ngrok. En savoir plus sur comment utiliser ngrok pour les tests.

• Clés API

  • Clé API météo clé.

  • Clé API Gemini clé.

  • Vonage API Account

    To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

    

    Ready to start building?

    Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Comment faire fonctionner RCS sur votre téléphone

Pour utiliser RCS via l'API Messages de Vonage, vous aurez besoin d'un agent RCS lié à votre Account. Contactez le service d'assistance de Vonage ou votre Account Manager pour activer le mode développeur et ajouter des numéros de téléphone autorisés. Une fois lié, votre agent RCS apparaîtra sous "Comptes externes" dans le tableau de bord de Vonage.

Démarrer une instance de tunneling ngrok

Exécutez la commande suivante pour lancer ngrok :

ngrok http 3000

Copiez l'URL HTTPS (par ex, https://94cd51b63460.ngrok.app) pour configurer vos webhooks.

Configurer les Webhooks

Dans le tableau de bord de l'API de Vonage, définissez votre URL publique ngrok comme point de terminaison pour les messages et les événements entrants :

• Inbound : https://YOUR_NGROK_URL/webhooks/inbound

• Statut : https://YOUR_NGROK_URL/webhooks/status

ngrok URL added to Vonage Messages API webhooks

Configuration initiale du projet

Clonez le dépôt et installez les dépendances. Vous pouvez trouver toutes les dépendances dans le fichier package.json.

npm install

Créer le fichier des variables d'environnement

Vous pouvez voir qu'il y a un fichier .env.example dans le projet node, faites-en une copie et créez un fichier .env qui contient les variables d'environnement ci-dessous.

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

Comprendre le code du serveur

Le fichier fichier server.js contient la logique de base de l'application. Nous commençons par importer les paquets nécessaires. Créez un nouveau dossier appelé public/images pour stocker les images. Chaque fois qu'une nouvelle image est générée, elle est ajoutée à ce dossier. Avant de poursuivre, l'application vérifie que toutes les variables d'environnement nécessaires sont définies.

Configurer le SDK Vonage et initialiser le 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);

La fonction asynchrone generateWeatherImage prend une ville comme argument, que vous fournirez lors de l'accès à l'URL en passant cette ville. Elle appelle l'API météo pour obtenir le temps qu'il fait dans la ville que vous avez indiquée, le modèle Imagen de Google génère une image météo, l'image est enregistrée localement et elle renvoie un résumé météorologique en plus de l'URL de l'image.

Nous enverrons un message personnalisé RCS contenant la ville. La fonction sendWeatherImageRCS construit et envoie une carte riche via RCS.

Vous trouverez également une fonction de vérification JWT dans le fichier server.js.

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

Tout voir en action

Démarrez votre serveur en lançant 'node' suivi du nom du fichier JavaScript dans un onglet séparé de ngrok.

node server.js

Ouvrez votre navigateur et visitez http://localhost:3000/send-weather-image?city=? suivi du nom de la ville pour laquelle vous souhaitez consulter la météo. Vous recevrez une carte RCS avec une image météorologique et des informations textuelles générées par Gemini.

Testons-le avec Paris, que j'ai également défini comme ville par défaut.

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

RCS weather message interaction with Paris forecastPrenons un autre exemple, celui de la ville d'Ipatinga.

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

Projet amusant possible avec Vibe Coding

Pour envoyer des prévisions météorologiques visuelles via RCS, nous accédons à une URL qui déclenche la recherche d'informations météorologiques et affiche du texte et des images sur la ville recherchée. Vous pouvez essayer un outil de génération de code tel que Gemini Code Assist ou Google AI Studio pour créer une interface utilisateur permettant à l'utilisateur de cliquer sur un bouton et d'envoyer un message RCS en texte enrichi sur son téléphone.

Si vous souhaitez expérimenter des outils de développement et des environnements de codage, consultez le site suivant Alexandra WilliamsDeveloper Advocate chez Vonage, qui montre comment ajouter la documentation de l'API de Vonage à Cursor.

Conclusion

Vous avez atteint la fin du tutoriel ! Maintenant que vous avez vu comment utiliser RCS avec l'API Messages, pourquoi ne pas aller voir comment vérifier vos utilisateurs dans l'API Verify ? Verify API Verify ?