Vonage RCSとGoogle AIでビジュアル天気予報を送信

はじめに

このチュートリアルでは、指定した都市の天気を取得し、Googleの Imagenモデルを使用して説明画像を生成し Geminiで短いテキスト要約を作成し、すべてを リッチカードとして送信する。Vonage Messages APIを使ってリッチカードとして送信します。

Weather forecast RCS message on phone

注：コードは Vonage Community GitHub リポジトリ.

前提条件

• 確認する node.jsがインストールされていることを確認してください。

• 登録されたRCSビジネスメッセージング（RBM）エージェント。

• RCS機能を備えた携帯電話。

• APIトンネリングサービスです。このチュートリアルでは ngrok.詳しくは ngrok の使い方をテストに使用する方法の詳細をご覧ください。

• APIキー

  • 天気APIキーを使用する。

  • ジェミニAPIキーを使用します。

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

あなたの携帯電話でRCSを動作させる方法

Vonage Messages API経由でRCSを使用するには、アカウントにリンクされたRCSエージェントが必要です。 Vonageサポートまたはアカウントマネージャにお問い合わせください。に連絡して、開発者モードを有効にし、許可リストに電話番号を追加してください。リンクされると、RCSエージェントはVonageダッシュボードの「外部アカウント」に表示されます。

ngrokトンネリングインスタンスを開始する

以下のコマンドを実行してngrokを起動する：

ngrok http 3000

HTTPS URLをコピーする、 https://94cd51b63460.ngrok.appをコピーして ウェブフックを設定する.

ウェブフックの設定

Vonage API Dashboard で、受信メッセージとイベントのエンドポイントとして ngrok 公開 URL を設定します：

• インバウンド https://YOUR_NGROK_URL/webhooks/inbound

• ステータス https://YOUR_NGROK_URL/webhooks/status

ngrok URL added to Vonage Messages API webhooks

プロジェクトの初期設定

リポジトリをクローンし、依存関係をインストールします。すべての依存関係はpackage.jsonファイルにあります。

npm install

環境変数ファイルの作成

.env.exampleファイルがあるのがわかるだろう。 .env.exampleファイルがあるので、それをコピーして、以下の環境変数を含む.envファイルを作成してください。

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

サーバーコードを理解する

その server.jsファイルファイルにはアプリケーションのコア・ロジックが含まれています。必要なパッケージをインポートすることから始めます。画像を保存するためにpublic/imagesという新しいフォルダを作成します。新しい画像が生成されるたびに、このフォルダに追加されます。処理を進める前に、必要な環境変数がすべて設定されていることを確認します。

セットアップ Vonage SDKをセットアップし、クライアントを初期化します。

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);

非同期関数 generateWeatherImageは都市を引数にとります。この都市をURLにアクセスする際に渡します。この関数はweather APIを呼び出して入力した都市の現在の天気を取得し、GoogleのImagenモデルが天気画像を生成し、画像がローカルに保存され、画像のURLに加えて天気の概要が返されます。

私たちは RCSカスタムメッセージを送信する。sendWeatherImageRCS関数は、RCS経由でリッチカードをビルドして送信します。

また、JWT検証関数も ファイル.

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

すべてを見る

node'の後にJavaScriptファイル名をngrokとは別のタブで実行してサーバーを起動する。

node server.js

ブラウザを開き、次のサイトにアクセスしてください。 http://localhost:3000/send-weather-image?city=の後に、天気を確認したい都市名を入力してください。ジェミニが生成した天気画像とテキスト情報が入ったRCSカードが届きます。

デフォルトの都市として設定したパリでテストしてみよう。

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

RCS weather message interaction with Paris forecastイパチンガ市のような別の例を見てみよう。

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

バイブ・コーディングを使った楽しいプロジェクトの可能性

RCSで視覚的な天気予報を送信するには、天気情報調査のトリガーとなるURLにアクセスし、検索された都市に関するテキストと画像を表示する。次のようなコード生成ツールを試してみるのもいいだろう。 ジェミニ・コードアシストまたは Google AI Studioなどのコード生成ツールを使って、ユーザーがボタンをクリックし、携帯電話にRCSリッチテキストメッセージを送信できるようなUIを作成することができます。

開発者向けツールやコーディング環境を試すのが好きなら、以下をチェックしよう。 アレクサンドラ・ウィリアムズに Vonage API ドキュメントを追加する方法を実演しています。 カーソル.

結論

チュートリアルはここまでです！さて、Messages APIを使ったRCSの使い方はおわかりいただけたと思う。 Verify APIでユーザーを確認する方法を確認してみましょう。でユーザーを確認する方法を確認してみてください。