Introducción

¿Conoces esa sensación cuando miras tu armario y piensas: "No tengo nada que ponerme"? Nos pasa a casi todos. Acabas poniéndote las mismas pocas cosas, mientras que otras prendas se quedan en el olvido. ¿Y si pudieras enviar un mensaje de texto a tu armario y éste te mostrara lo que tienes?

Así que, en esta entrada del blog, vamos a construir un asistente de vestuario digital. Es un proyecto divertido que te permite utilizar Rich Communication Services (RCS) para enviar un mensaje de texto a un bot. Te mostrará fotos de tu ropa. Utilizaremos la API de Messages de Vonage y la API Gemini de Google para hacerlo inteligente. Se trata de convertir un problema sencillo en una solución tecnológica genial.

Puede encontrar el código completo en el repositorio GitHub.

RCS Conversation

Requisitos previos

Para seguirlo, necesitarás:

• A agente registrado de RCS Business Messaging (RBM)

• Un teléfono con funciones RCS para las pruebas

• Node.js 18+

• Cuenta API de 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.

Obtener el código

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

cd blog-messages-nodejs-rcs_wardrobe

npm install

Dependencias

Este proyecto utiliza las dependencias incluidas en el archivo package.json.

Express. Puede hacer clic en cada uno para ver sus definiciones en npm: dotenv, @vonage/server-sdk, @vonage/messages, @vonage/jwty @google/genai.

Estructura del proyecto

Puede encontrar la estructura del proyecto en el repositorio GitHub de la entrada del 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)

Crear una aplicación de Vonage

Los pasos a continuación te muestran cómo crear una nueva aplicación de Vonage desde el panel. Como alternativa, puedes usar la CLI para crear una aplicación.

Crear una nueva aplicación

Ir a Tus Applications en el panel de Vonage y haz clic para crear una nueva aplicación.

Generar credenciales

Cree un par de claves pública y privada para la autenticación de la API. Haz clic en "Generar clave pública y privada" para obtener la clave privada. El archivo se descargará en la ubicación que hayas establecido en tu navegador para los archivos descargados. Asegúrate de añadir ese archivo a la carpeta del proyecto.

Capacidad de la API de Messages

Iniciar una instancia de túnel ngrok

Ejecute el siguiente comando para iniciar un ngrok tunneling ngrok.

ngrok http 3000

En la salida, encontrarás una URL que empieza por https:// y termina en .ngrok.app/. Anótala, ya que la necesitarás en el siguiente paso para configurar tus webhooks.

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

Messages Webhooks

Configurar Webhooks

De vuelta en el panel de la API de Vonage, en tus aplicaciones, activa la opción Messages en capabilities y establece la URL pública de tu servidor desde ngrok como el punto final para mensajes entrantes y eventos. Debería verse así https://94cd51b63460.ngrok.app/webhooks/inbound para entrada y https://94cd51b63460.ngrok.app/webhooks/status para el estado. Si desea más información sobre webhooks, puedes encontrarla en nuestra documentación de Vonage.

Variables de entorno

Las variables de entorno te permiten mantener las credenciales y la configuración fuera de tu código. Cree un archivo .env en la raíz del repositorio y añada las siguientes variables de entorno:

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

Cómo funciona

El servidor sirve /photos desde Photos, verifica los webhooks de Vonage con su Secreto de Firma, lee el texto RCS del usuario, carga wardrobe.json y pide a Gemini { TextResponse, ReferencedImages }. Devuelve el texto y envía las imágenes; si hay varias, envía un carrusel. Las URL de las imágenes utilizan PUBLIC_BASE_URL/photos/<filename>.

src/index.js contiene las rutas, la comprobación webhook, la llamada Gemini y la lógica de envío RCS. src/vonage.js carga los valores env, lee private.key, y crea el cliente de 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

Ejecute node src/index.jsy, a continuación, visite http://localhost:3000/wardrobe una vez para enviar el primer mensaje a PHONE_NUMBER. Una vez que el hilo aparezca en tu dispositivo, responde con tus consultas.

Ejecutar el archivo JavaScript

Desde la raíz del repositorio, ejecute el siguiente comando desde su terminal. Asegúrese de que su instancia de ngrok sigue funcionando.

node src/index.js

Iniciar la conversación

Para enviar el primer mensaje de agente a PHONE_NUMBER para abrir un hilo RCS en su dispositivo, navegue hasta esta URL en su navegador: http://localhost:3000/wardrobe.

Prueba en RCS

Puedes chatear con tu armario digital, que lee la información del archivo wardrobe.json. Puedes hacer preguntas sobre la ropa, por ejemplo, ¿cuántos pantalones pitillo tengo? A continuación, envía un mensaje RCS Rich Card Carousel que contiene las prendas que se ajustan a los criterios que has especificado, y las imágenes proceden de PUBLIC_BASE_URL/photos/<filename>.

Nota: Para este proyecto, he utilizado un archivo JSON relleno; sin embargo, también se podría leer desde una base de datos. Gemini no utiliza la visión por ordenador aquí, sino que ayuda a filtrar el archivo JSON basado en su consulta de texto, y el mensaje RCS utiliza los enlaces de imagen dentro de ese archivo. Puedes ver el aspecto de la interacción en la imagen que he añadido al principio de esta entrada de blog.

Conclusión

Hoy, has aprendido a construir un armario digital AI usando Gemini y enviar Rich Card Carrusel de mensajes a través de RCS. Siga adelante y pruebe los otros tipos de mensajes RCS, más allá del texto, tales como: tarjetas ricas, rich card carousels, respuestas sugeridas, acciones sugeridas.

Para aprender más acerca de cómo puede utilizar estas características, echa un vistazo a este tutorial sobre cómo Construir un servicio de narración con RCS Rich Cards y Gemini. Puede utilizar Rich Cards para crear una narrativa, con cada tarjeta que representa un capítulo diferente o elección en una historia interactiva, aquí hay una recomendación de blog post: Cómo Enviar RCS Rich Card Carruseles Con Node.js.