AI を活用した WhatsApp チャットボットの構築: ステップバイステップ ガイド

公開: 2024-03-22
AI/ML 9 分4
2024 年 3 月 22 日

まとめ：

Node.js と OpenAI の機能を活用して、AI を活用した WhatsApp チャットボットを構築する方法を段階的に学びます。 メタ ビジネス アカウントの設定から WhatsApp API と OpenAI の統合まで、このガイドは企業が顧客とのやり取りを合理化し、自動化されたコミュニケーションの新たな可能性を解き放つことを可能にします。

今日のデジタル時代において、人工知能 (AI) の力を活用して顧客とのインタラクションを強化することは、市場で優位に立つことを目指す企業にとって最も重要です。 WhatsApp は、世界中で最も広く使用されているメッセージング プラットフォームの 1 つであり、企業が視聴者と効果的に関わるための絶好の機会を提供します。 AI を活用した WhatsApp チャットボットの領域に入りましょう。 これらの仮想アシスタントは顧客サービスに革命をもたらし、24 時間体制のサポートを提供し、コミュニケーション プロセスを合理化します。

急成長中の新興企業であっても、確立された企業であっても、適切なアプローチを使用すれば、開発の各ステップをより簡単に進めることができます。 この包括的なガイドでは、基本原則、段階的な手順、WhatsApp Business API を Node.js アプリケーションと統合するために必要な重要な考慮事項について説明します。 OpenAI の自然言語処理機能を活用して、視聴者の共感を呼ぶシームレスなユーザー エクスペリエンスを作り上げます。

WhatsApp Business アカウントの設定から OpenAI の API と Node.js コードの統合まで、プロセスをわかりやすく説明し、独自の AI 主導のソリューションを構築できるように支援します。 AI 主導の会話型エージェントの領域へのこの変革の旅は、一人で取り組まなければならないものではありません。 AI チャットボット開発会社は、信頼できるパートナーとして機能し、貴重な洞察と専門知識を提供します。 このエキサイティングな遠征に一緒に乗り出しましょう。

ステップ 1: メタ (Facebook) ビジネス アカウントとアプリのセットアップ

  1. まず、メタ ビジネス アカウントを作成します (ここをクリック)。

詳細を入力し、「送信」をクリックします。

2. 新しいメタ (Facebook) アプリを作成します (ここをクリック)。

  • メタ (Facebook) 開発者アカウントに (ログイン) します。

ログイン後、「マイアプリ」をクリックします

私のアプリをクリックしてください

3.「アプリの作成」をクリックします。

4. 「その他」を選択し、「次へ」をクリックします。

5. アプリの種類: 「ビジネス」を選択し、「次へ」をクリックします。

6. アプリの詳細を入力し、「アプリの作成」をクリックします。

ステップ 2: WhatsApp 統合用のメタ (Facebook) アプリをセットアップする

1. WhatsApp をメタ (Facebook) アプリに追加します。

  • 「開発者ダッシュボード」でアプリを選択します。
  • アプリのダッシュボード タブで [アプリに製品を追加] を見つけます。
  • セットアップには「WhatsApp」を選択します。
  • メタ (Facebook) ビジネス アカウントを選択してください
  • サイドバーから「アプリ設定」 > 「基本」に移動します。
  • 変更内容を保存。
  • アプリモードをライブに設定する

ステップ 3: WhatsApp トークンを生成する

永続的な WhatsApp アクセス トークンを取得するには、1 ～ 3 の手順に従います。

1. 「システム ユーザー」を作成します。

  • メタ ビジネス スイートにアクセスしてください。
  • 左上のドロップダウン メニューでビジネス アカウントを見つけ、その設定 (歯車) アイコンをクリックします。
  • 「ビジネス設定」をクリックします。
  • [ユーザー] > [システム ユーザー] に移動します。
  • 管理システム ユーザーを追加します。

2. アセットを追加します。

  • システムユーザーを作成したら、「Add Assets」をクリックします。
  • [アプリ] > [アプリ名] に移動します。
  • アプリを選択し、アプリを管理するためのフル コントロールを付与します。

3. システム ユーザー アクセス トークンを生成します。

  • システム ユーザーの [新しいトークンの生成] ボタンをクリックします。

トークンを使用するアプリを選択し、トークンの有効期限を「なし」に設定します。

  • 「whatsapp_business_messaging」および「whatsapp_business_management」権限を選択します。
  • トークンを生成します。
  • アクセス トークンをコピーし、安全に保管します。

4. WhatsApp に新しいビジネス番号を追加する

  • 独自のビジネス番号を使用することも、WhatsApp チャットボットに提供されたテスト番号を利用することもできます。
  • WhatsApp 開発者ダッシュボードで、サイドバーから [WhatsApp] > [API セットアップ] に移動します。
  • 「ステップ 5: 電話番号を追加する」に進み、「電話番号を追加」をクリックします。
  • 以下のフォームに必要な詳細を入力してください。
  • 受信したコードを使用して番号を確認します。
  • 正常に追加されたら、API セットアップのステップ 1 で電話番号を選択します。

5. 支払い方法を追加する

  • WhatsApp 経由でメッセージを送信するには、有効な支払い方法が必要です。 詳細については、こちらをご覧ください。
  • 会社の電話番号を追加した後、「支払い方法を追加」をクリックして、「有効な支払い方法がありません」というアラートに対処します。
  • WhatsApp アカウント設定に移動します。 [支払い方法] > [ビジネス用支払い方法を追加] をクリックし、画面の指示に従ってカード情報を追加します。

6. WhatsApp の新しいビジネス番号をテストする

  • WhatsApp 開発者ダッシュボードに戻り、API セットアップに移動します
  • テスト用の「宛先」番号を入力します。
  • 「メッセージを送信」をクリックして、メッセージが正常に配信されたことを確認します。

ステップ 4: WhatsApp API Webhook 設定を構成する

1. WhatsApp Webhook コールバックを確認します。

  • WhatsApp 開発者ダッシュボードで、[構成] に移動します。
  • Webhook の下で、「編集」をクリックします
  • 次に、ライブ Webhook URL とトークンを WhatsApp に提供する必要があります。 ライブ URL はアプリケーションの URL であり、トークンもユーザー側で生成されます。 下の画像では、Node.js アプリケーションが Ngrok 上で実行されており、トークンとして UUID を使用しているため、Ngrok URL を追加しました。
  • 検証プロセスでは、WhatsApp はコールバック URL に GET リクエストを送信し、ハブ トークンを検証します。 Next.js (Node.js フレームワーク) で記述された次のコードは、この検証プロセスを処理します。 以下に示すように、コードが応答として 200 ステータス コードを送信した場合にのみ、検証は成功します。
エクスポート非同期関数 GET(req: NextRequest) {

let HubMode = req.nextUrl.searchParams.get("hub.mode");

let HubChallenge = req.nextUrl.searchParams.get("hub.challenge");

let HubToken = req.nextUrl.searchParams.get("hub.verify_token");

//データベース内のトークンを検索します

もし （

HubMode === "購読" &&

HubToken === "<.env またはデータベースからの値>"

) {

console.log("正常に検証されました");

新しい応答(ハブチャレンジ)を返します。

}

return new Response("無効な認証情報", { ステータス: 400 });

}

  • 「メッセージ」フィールドを見つけて、ボックスにチェックを入れて購読します。
  • 次に、同じ WhatsApp ビジネス アカウントから取得した WhatsApp アクセス トークンと Facebook アプリ シークレットが必要になります。
  • 下の画像には Facebook アプリの秘密が表示されています

また、次の強調表示されたデータを保持する必要があります

コードでは、アクセス トークン、アプリ シークレット、テスト番号、電話番号 ID、ビジネス アカウント ID などのさまざまな識別子が必要です。 これらの識別子は、誰からメッセージを受信して​​いるのか、誰にメッセージを送信する必要があるのか​​を判断するのに役立ちます。

ステップ 5: API を介したメッセージの送受信

  • 提供された TypeScript コードでは、メッセージを送受信するための WhatsApp API が正常に統合されました。 さらに、目標に向けて、受信メッセージに応答するために OpenAI とカスタム トレーニングされた AI モデルを組み込みました。
  • WhatsApp に提供されるコールバック URL は、GET リクエストと POST リクエストの両方に使用されます。 メッセージがビジネス番号に送信されると、WhatsApp はこのコールバック URL をトリガーし、ユーザーの詳細とともにメッセージを送信します。 次のコードはそのメッセージを読み取り、実装されたロジックに基づいて応答します。
  • POST 関数は、受信した POST リクエストを処理する非同期関数です。 まず、受信リクエストを JSON に解析し、ユーザーが WhatsApp から送信したメッセージを抽出します。 メッセージが未定義または空の場合、ステータス 200 の応答が返され、それ以上続行されません。
  • 次に、関数はリクエストから会社の電話番号と送信者の電話番号を取得します。
  • 次に、関数は WhatsApp 経由でユーザーにメッセージを送信するための POST リクエストを準備します。 リクエストの URL を構築し、送信するメッセージを定義し、メソッド、ヘッダー、本文などのリクエスト オプションを設定します。
  • 次に、関数はフェッチ関数を使用してリクエストを送信します。 リクエストが成功すると、ステータス 200 の応答が返されます。いずれかの時点でエラーが発生した場合は、コンソールに記録されます。
  • getResponseNumber 関数は、受信リクエストから送信者の電話番号を抽出するヘルパー関数です。
  • このコードは、Node.js アプリケーションを WhatsApp Business API と統合して、メッセージの自動送受信を可能にする方法の基本的な例を提供します。

// ユーザーがボットに質問し、ユーザーに応答すると、WhatsApp はこの投稿リクエストをトリガーします

非同期関数のエクスポート POST(req: NextRequest) {

let res: any = await req.json();

Whatsappから質問させてください =

res?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body; // whatsappから受け取った質問

もし （

questionFromWhatsapp == 未定義 ||

questionFromWhatsapp.trim().length <= 0

) {

//リクエストがステータスのみに関するものである場合は、これ以上先に進まないでください

// return NextResponse.json({ メッセージ: "受信" });

return new Response("受信", { ステータス: 200 });

}

// 応答から電話番号 ID を取得します。 この電話番号は会社の番号です

constphoneNumberId =

res?.entry?.[0]?.changes?.[0]?.value?.metadata["phone_number_id"];

//このメソッドはメッセージの受信元の電話番号を返します

const 応答番号 = getResponseNumber(res);

// データベースから userId を取得します

試す {

const バージョン = "v18.0";

// 制限に達しているかどうかを確認する

const 電話番号;

const 受信者電話番号 = "+" + 応答番号;

// const accessToken = process.env.WHATSAPPTOKEN

const accessToken = "Facebookから取得したトークン";

試す {

//--------------- このコードは電報にメッセージを送信するためのものです

const url = `https://graph.facebook.com/${version}/${phoneNumberId}/messages`;

// リクエストボディで送信するデータを定義する

定数データ = {

message_product: "whatsapp",

受信者の種類: "個人",

宛先: `${recipientPhoneNumber}`、

タイプ:「テキスト」、

文章： {

プレビュー URL: false、

body: "やあ、私はチャットボットです。現在忙しいので、すぐにご連絡します。",

}、

};

// フェッチリクエストのオプションを定義します

const オプション = {

メソッド: "POST"、

ヘッダー: {

"コンテンツタイプ": "アプリケーション/json",

認可: `ベアラー ${accessToken}`、

}、

本体: JSON.stringify(データ)、

};

// fetch を使用して POST リクエストを作成します

試す {

const 応答 = await fetch(url, options);

if (!response.ok) {

throw new Error(`HTTP エラー! ステータス: ${response.status}`);

}

const data = 応答を待ちます.json();

// 必要に応じてデータを処理します

} キャッチ (エラー) {

// 必要に応じてエラーを処理します

コンソール.ログ(エラー);

}

return new Response("受信", { ステータス: 200 });

} キャッチ (エラー) {

console.log("エラー", エラー);

}

} catch (エラー: 任意) {

コンソール.ログ(エラー);

//未処理エラーが発生した場合に備えて、データベースにエラー ログを保存します

}

}

const getResponseNumber = (res: 任意) => {

res?.entry?.[0]?.changes?.[0]?.value?.contacts[0]?.wa_id; を返します。

};

結論

この包括的なガイドでは、WhatsApp Business API と Node.js アプリケーションの統合の複雑な手順を説明しました。 Webhook の設定から、受信メッセージの処理、カスタマイズされた応答の送信まで、アクセス トークン、アプリ シークレット、テスト番号、電話番号 ID、ビジネス アカウント ID の処理などの重要な手順について説明しました。

このシームレスな統合により、企業は WhatsApp でのコミュニケーションを自動化できるだけでなく、カスタマー サポート ボットの作成、マーケティング活動の自動化、個人プロジェクトの推進など、無数の可能性が解き放たれます。 この旅に乗り出すとき、これは単なる基礎であることを忘れないでください。 WhatsApp Business API は、探索され、アプリケーションに統合されるのを待っている多数の追加機能を提供します。

AI チャットボット開発の取り組みを継続的に改善する際には、専門知識を活用することを検討してください。 AIチャットボット開発会社。 彼らの洞察とサポートはあなたの進歩を促進し、チャットボットの取り組みがその可能性を最大限に発揮できるようにします。 開発を進める際には、包括的で正確な情報については、常にWhatsApp Business API の公式ドキュメントを参照してください。