Envía previsiones meteorológicas visuales con Vonage RCS y Google AI

Introducción

En este tutorial, crearás una aplicación Node.js que obtendrá el tiempo en una ciudad determinada, generará una imagen descriptiva utilizando la aplicación Google's Imagen de Google, crea un breve resumen de texto con Geminiy lo envía todo como una tarjeta enriquecida a través de RCS utilizando la API Messages de Vonage.

Weather forecast RCS message on phone

Nota: El código está disponible en el repositorio GitHub de la comunidad de Vonage.

Requisitos previos

• Asegúrese de que node.js está instalado en su máquina.

• Un agente registrado de RCS Business Messaging (RBM).

• Un teléfono con capacidades RCS.

• Servicio de túnel API. Este tutorial utiliza ngrok. Más información sobre cómo usar ngrok para realizar pruebas.

• Claves API

  • API meteorológica clave.

  • Gemini API clave.

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

Cómo hacer que RCS funcione en tu teléfono

Para usar RCS a través de Messages API de Vonage, necesitarás un agente de RCS vinculado a tu Account. Comunícate con el soporte de Vonage o con tu administrador de cuenta para habilitar el modo de desarrollador y agregar números de teléfono permitidos. Una vez vinculado, tu agente RCS aparecerá en "Cuentas externas" en el panel de Vonage.

Iniciar una instancia de túnel ngrok

Ejecute el siguiente comando para iniciar ngrok:

ngrok http 3000

Copie la URL HTTPS (por ejemplo, https://94cd51b63460.ngrok.app) para configurar sus webhooks.

Configurar Webhooks

En el panel de la API de Vonage, establece tu URL pública de ngrok como el punto final para los mensajes entrantes y los eventos:

• Entrada: https://YOUR_NGROK_URL/webhooks/inbound

• Estado: https://YOUR_NGROK_URL/webhooks/status

ngrok URL added to Vonage Messages API webhooks

Configuración inicial del proyecto

Clona el repositorio e instala las dependencias. Puedes encontrar todas las dependencias en el archivo package.json.

npm install

Crear el archivo de variables de entorno

Puedes ver que hay un archivo archivo .env.example en el proyecto node, haz una copia de él y crea un archivo .env que contenga las siguientes variables de entorno.

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

Comprender el código del servidor

El archivo servidor.js contiene la lógica central de la aplicación. Empezaremos importando los paquetes necesarios. Crea una nueva carpeta llamada public/images para almacenar imágenes. Cada vez que se genere una nueva imagen, se añadirá a esta carpeta. Antes de continuar, la aplicación verifica que todas las variables de entorno necesarias están configuradas.

Configurar el SDK de Vonage e inicializa el cliente.

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 función asíncrona generateWeatherImage toma una ciudad como argumento, que proporcionarás al acceder a la URL pasando esta ciudad. Llama a la API meteorológica para obtener el tiempo actual en la ciudad que has introducido, el modelo Imagen de Google genera una imagen meteorológica, la imagen se guarda localmente y devuelve un resumen meteorológico además de una URL de la imagen.

Enviaremos un Mensaje Personalizado RCS que contiene la ciudad. La función sendWeatherImageRCS construye y envía una tarjeta enriquecida vía RCS.

También encontrará una función de verificación JWT en el archivo archivo 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

Véalo todo en acción

Inicie su servidor ejecutando 'node' seguido del nombre del archivo JavaScript en una pestaña separada de ngrok.

node server.js

Abra su navegador y visite http://localhost:3000/send-weather-image?city=seguido del nombre de la ciudad en la que desea consultar el tiempo. Recibirás una tarjeta RCS con una imagen del tiempo e información de texto generada por Gemini.

Vamos a probarlo con París, que también he establecido como ciudad por defecto.

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

RCS weather message interaction with Paris forecastProbemos con otro ejemplo, como la ciudad de Ipatinga.

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

Posible proyecto divertido con Vibe Coding

Para enviar una previsión meteorológica visual a través de RCS, accedemos a una URL que activa la búsqueda de información meteorológica y muestra texto e imágenes sobre la ciudad buscada. Puedes probar con una herramienta de generación de código como Gemini Code Assist o Google AI Studio para crear una interfaz de usuario que permita al usuario pulsar un botón y enviar un mensaje de texto enriquecido RCS a su teléfono.

Si te gusta experimentar con herramientas para desarrolladores y entornos de codificación, echa un vistazo a Alexandra WilliamsDeveloper Advocate de Vonage, que muestra cómo agregar la documentación de la API de Vonage a Cursor.

Conclusión

¡Has llegado al final del tutorial! Ahora que has visto cómo utilizar RCS con la Messages API, ¿por qué no sigues adelante y compruebas cómo verificar tus usuarios en la función Verify API ¿también?