Introduction

Vous connaissez ce sentiment lorsque vous regardez votre armoire et que vous vous dites : "Je n'ai rien à me mettre" ? Cela arrive à la plupart d'entre nous. Vous finissez par porter les mêmes choses, tandis que d'autres vêtements sont simplement oubliés. Et si vous pouviez envoyer un SMS à votre garde-robe pour qu'elle vous montre ce que vous avez ?

Dans cet article de blog, nous allons donc construire un assistant de garde-robe numérique. C'est un projet amusant qui vous permet d'utiliser les Rich Communication Services (RCS) pour envoyer un message à un robot. Il vous montrera des photos de vos vêtements. Nous utiliserons l Vonage Messages API de Vonage et l Google Gemini API de Google pour le rendre intelligent. Il s'agit de transformer un problème simple en une solution technique cool.

Vous pouvez trouver le code complet dans le dépôt dépôt GitHub.

RCS Conversation

Conditions préalables

Pour suivre, vous aurez besoin de

• A agent RCS Business Messaging (RBM) enregistré

• Un téléphone avec des capacités RCS pour les tests

• Node.js 18+

• Compte API Vonage

  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.

Obtenir le code

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

cd blog-messages-nodejs-rcs_wardrobe

npm install

Dépendances

Ce projet utilise les dépendances incluses dans le fichier package.json.

Express. Vous pouvez cliquer sur chacun d'entre eux pour voir leur définition sur npm : dotenv, @vonage/server-sdk, @vonage/messages, @vonage/jwtet @google/genai.

Structure du projet

Vous pouvez trouver la structure du projet sur le dépôt dépôt GitHub de l'article de blog.

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)

Créer une application Vonage

Les étapes ci-dessous vous montrent comment créer une nouvelle application Vonage à partir du tableau de bord. Vous pouvez également utiliser l'interface de commande pour créer une application.

Créer une nouvelle application

Aller à Vos Applications dans le tableau de bord de Vonage et cliquez pour créer une nouvelle application.

Générer des informations d'identification

Créez une paire de clés publique/privée pour l'authentification de l'API. Cliquez sur "Générer une clé publique et privée" pour obtenir la clé privée. Le fichier sera téléchargé à l'emplacement que vous avez défini dans votre navigateur pour les fichiers téléchargés. Veillez à ajouter ce fichier au dossier du projet.

Capacité de l'API Messages

Démarrer une instance de tunneling ngrok

Exécutez la commande suivante pour lancer un tunneling ngrok tunneling ngrok.

ngrok http 3000

Dans le résultat, vous trouverez une URL qui commence par https:// et se termine par .ngrok.app/. Notez-la car vous en aurez besoin à l'étape suivante pour configurer vos webhooks.

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

Messages Webhooks

Configurer les Webhooks

De retour dans le tableau de bord de l'API de Vonage, sous vos applications, activez l'option Messages sous capacités, et définissez l'URL publique de votre serveur à partir de ngrok comme point de terminaison pour les messages et les événements entrants. Cela devrait ressembler à https://94cd51b63460.ngrok.app/webhooks/inbound pour les messages entrants et https://94cd51b63460.ngrok.app/webhooks/status pour le statut. Si vous souhaitez en savoir plus sur les webhooks, vous pouvez trouver des informations dans notre documentation Vonage.

Variables d'environnement

Les variables d'environnement vous permettent de conserver les informations d'identification et la configuration en dehors de votre code. Créez un fichier .env à la racine du repo et ajoutez les variables d'environnement suivantes :

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

Comment ça marche

Le serveur sert /photos à partir de Photosvérifie les webhooks de Vonage avec votre Signature Secrète, lit le texte RCS de l'utilisateur, charge wardrobe.json, et demande à Gemini de lui fournir { TextResponse, ReferencedImages }. Il renvoie le texte, puis envoie les images ; s'il y en a plusieurs, il envoie un carrousel. Les URL d'images utilisent PUBLIC_BASE_URL/photos/<filename>.

src/index.js contient les routes, la vérification du webhook, l'appel à Gemini, et la logique d'envoi RCS. src/vonage.js charge les valeurs env, lit private.key, et crée le client Vonage.

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

Exécuter node src/index.jspuis visitez http://localhost:3000/wardrobe une fois pour envoyer le premier message à PHONE_NUMBER. Une fois que le fil de discussion apparaît sur votre appareil, répondez aux questions que vous vous posez.

Exécuter le fichier JavaScript

Depuis la racine du référentiel, exécutez la commande suivante dans votre terminal. Assurez-vous que votre instance ngrok est toujours en cours d'exécution.

node src/index.js

Entamer la conversation

Pour envoyer le premier message de l'agent à PHONE_NUMBER pour ouvrir un fil de discussion RCS sur votre appareil, rendez-vous à l'URL suivante dans votre navigateur : http://localhost:3000/wardrobe.

Test sur RCS

Vous pouvez discuter avec votre garde-robe numérique, qui lit les informations du fichier wardrobe.json. Vous pouvez poser des questions sur les vêtements, par exemple : combien de pantalons skinny ai-je ? Elle envoie ensuite un message RCS (Rich Card Carousel Message) contenant les vêtements qui correspondent aux critères que vous avez spécifiés. Les images proviennent de la base de données PUBLIC_BASE_URL/photos/<filename>.

Remarque : pour ce projet, j'ai utilisé un fichier JSON rempli, mais vous pouvez également lire une base de données. Gemini n'utilise pas la vision par ordinateur ici ; au lieu de cela, il aide à filtrer le fichier JSON sur la base de votre requête textuelle, et le message RCS utilise alors les liens d'image dans ce fichier. Vous pouvez voir à quoi ressemble l'interaction à partir de l'image que j'ai ajoutée tout en haut de ce billet de blog.

Conclusion

Aujourd'hui, vous avez appris à construire une garde-robe numérique avec Gemini et à envoyer des messages de type Rich Card Carousel via RCS. Allez-y et essayez les autres types de messages RCS, au-delà du texte, tels que : cartes riches, carrousels de cartes riches, réponses suggérées, actions suggérées.

Pour en savoir plus sur la façon dont vous pouvez utiliser ces fonctionnalités, consultez ce tutoriel sur la façon de Construire un service de narration avec RCS Rich Cards et Gemini. Vous pouvez utiliser les Rich Cards pour créer une narration, chaque carte représentant un chapitre ou un choix différent dans une histoire interactive, voici une recommandation d'un article de blog : Comment envoyer des carrousels de cartes riches RCS avec Node.js.