Envie previsões meteorológicas visuais com o RCS da Vonage e a IA do Google

Introdução

Neste tutorial, você criará um aplicativo em Node.js que busca as informações meteorológicas de uma determinada cidade e gera uma imagem descritiva usando o Imagen , cria um breve resumo em texto com o Geminie envia tudo como um cartão enriquecido via RCS usando a Messages API do Vonage.

Weather forecast RCS message on phone

Observação: O código está disponível no repositório GitHub da Comunidade Vonage.

Pré-requisitos

• Certifique-se de que de que o node.js esteja instalado no seu computador.

• Um agente registrado do RCS Business Messaging (RBM).

• Um celular com recursos RCS.

• Serviço de tunelamento de API. Este tutorial utiliza ngrok. Saiba mais sobre como usar o ngrok para testes.

• Chaves de API

  • API de previsão do tempo chave.

  • API do Gemini chave.

Como fazer o RCS funcionar no seu celular

Para usar o RCS por meio da Messages API do Vonage, você precisará de um agente RCS vinculado à sua Account. Entre em contato com o Suporte da Vonage ou com seu gerente de Account para ativar o Modo de Desenvolvedor e adicionar números de telefone à lista de permissões. Depois de vinculado, seu agente RCS aparecerá em “Contas Externas” no Painel da Vonage.

Iniciar uma instância de tunelamento do ngrok

Execute o seguinte comando para iniciar o ngrok:

ngrok http 3000

Copie a URL HTTPS (por exemplo, https://94cd51b63460.ngrok.app) para configurar seus webhooks.

Configurar Webhooks

No Painel da API da Vonage, defina sua URL pública do ngrok como o ponto de extremidade para mensagens e eventos recebidos:

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

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

ngrok URL added to Vonage Messages API webhooks

Configuração inicial do projeto

Clone o repositório e instale as dependências. Você pode encontrar todas as dependências no arquivo package.json.

npm install

Criar o arquivo de variáveis de ambiente

Você pode ver que há um arquivo .env.example no projeto Node.js; faça uma cópia dele e crie um arquivo .env que contenha as variáveis de ambiente abaixo.

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

Entenda o código do servidor

O arquivo server.js contém a lógica central do aplicativo. Começamos importando os pacotes necessários. Crie uma nova pasta chamada public/images para armazenar imagens. Sempre que uma nova imagem é gerada, ela é adicionada a essa pasta. Antes de prosseguir, o aplicativo verifica se todas as variáveis de ambiente necessárias estão definidas.

Configure o SDK da Vonage e inicialize o 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);

A função assíncrona generateWeatherImage recebe uma cidade como argumento, que você fornecerá ao acessar a URL, passando o nome dessa cidade. Ela chama a API de previsão do tempo para obter as condições meteorológicas atuais na cidade que você inseriu; o modelo Imagen do Google gera uma imagem meteorológica; a imagem é salva localmente; e ela retorna um resumo meteorológico, além da URL da imagem.

Enviaremos uma mensagem personalizada RCS contendo o nome da cidade. A função sendWeatherImageRCS cria e envia um rich card via RCS.

Você também encontrará uma função de verificação de JWT no arquivo arquivo 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

Veja tudo em ação

Inicie seu servidor executando o comando “node” seguido do nome do arquivo JavaScript em uma aba separada do ngrok.

node server.js

Abra seu navegador e acesse http://localhost:3000/send-weather-image?city=? seguido do nome da cidade cuja previsão do tempo você deseja verificar. Você receberá um cartão RCS com uma imagem do tempo e informações em texto geradas pelo Gemini.

Vamos testar com Paris, que também configurei como cidade padrão.

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

RCS weather message interaction with Paris forecastVamos tentar outro exemplo, como a cidade de Ipatinga.

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

Um projeto divertido que pode ser feito com o Vibe Coding

Para enviar uma previsão do tempo visual via RCS, acessamos uma URL que aciona a pesquisa das informações meteorológicas e exibe texto e imagens sobre a cidade pesquisada. Você pode experimentar uma ferramenta de geração de código, como Gemini Code Assist ou Google AI Studio para criar uma interface de usuário que permita ao usuário clicar em um botão e enviar uma mensagem de texto rico (RCS) para o próprio celular.

Se você gosta de experimentar ferramentas de desenvolvimento e ambientes de programação, dê uma olhada em Alexandra Williams, defensora de desenvolvedores da Vonage, demonstrando como adicionar a documentação da API da Vonage ao Cursor.

Conclusão

Você chegou ao fim do tutorial! Agora que já viu como usar o RCS com a Messages API, por que não dá uma olhada em como verificar seus usuários na Verify API também?