シェア:
){kind=small}
スタンダップ・コメディーの学位論文を持つ俳優の訓練を受け、ミートアップ・シーンを経てPHP開発に携わるようになった。技術について話したり書いたり、レコード・コレクションから変わったレコードを再生したり買ったりしています。
Laravel Vonageヘルプデスクのご紹介
ウェブ・アプリケーションに見られる最大の変化は、マルチチャネル・コミュニケーションへの要求です。eコマース・サイトは、もはや以下のようなものだけでは十分ではありません。 ただHotjarのようなポップアップ式のセミインスタントメッセージングを使いながら、Eメールを送ることができます。例えば、Eメールでの会話をWhatsAppのライブチャットに切り替えたり、実際の（人間の）エージェントにつながる自動音声通話キューを利用したりすることができます。
さて、そろそろこれらのチャンネルがどのように機能するかをデモンストレーションする時期が来ましたので、（PHP開発者のために）これ以上説明することなく、以下に紹介したいと思います。 Vonageヘルプデスク.この記事では、ローカルで起動する方法を紹介し、アプリのSMS面がどのように機能するのかを掘り下げていきます。
しばらく前、私たちはDeskmoというコンセプトのウェブ・アプリケーションを持っていました。VonageのAPIを使うためのベストプラクティスとモダンなPHPコードのデモンストレーションを含むウェブアプリケーションです。
Vonage Helpdeskは、以下の言語で構築されたPHPウェブアプリケーションです。 Laravel 9.Laravelの セイルを使用しているため、完全にDocker化されたアプリがあります。 データベースとしてMySQLをデータベースとして使用します。
Docker v20+（現行バージョン）を実行できるWindows、Linux、Macマシン
PHP v8.0 以上
npm v8.5+
まず最初に、リポジトリをダウンロードする必要がある。コマンドラインに次のように入力する：
これで、新しいフォルダにアプリケーションができたはずだ。次に、PHPの依存関係をインストールします。フォルダに移動して（例． cd sample-messages_voice-php-helpdesk)に移動し、Composerを実行します：
Laravel Sailが vendorフォルダに追加されているはずなので、Dockerがインストールされていれば、以下のコマンドを実行してアプリケーションを起動できます：
次に、データベースのマイグレーションを実行する必要がある：
我々のアプリケーションは、ログインするためのスーパーユーザーを必要とするので、データベース・シーダーを実行する：
アプリケーションは Laravel Breeze scaffoldingを使うので、認証のために Vite開発サーバーをDockerコンテナの外で実行し、JavaScriptをコンパイルする必要があります（現在、これはLaravelにあらかじめ設定されています）。Viteを実行するには、アプリケーションフォルダで新しいターミナルを開き、以下を実行します：
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.
アプリケーションをVonageのサーバーに接続するには、アプリケーションへのトンネルが必要です。これは ngrokを使って行うことができる。また、PHPで書かれたツールもある。 ビヨンド・コードと呼ばれる ExposeというPHPで書かれたツールがある。
このようにングロク・プロセスを開始する：
アプリケーションにトンネルするための新しいURLが戻ってくるはずです。Vonageのダッシュボードに移動して、新しいアプリケーションを作成し、SMSを有効にします。これが完了したら、Vonageに着信データのルーティング先を伝えることができます。ダッシュボードでアプリケーションを編集し、ローカルアプリケーションのコールバックアドレスを追加します。フォームは以下のようになります：
ここで重要なのは、Ngrok URLを使用することです。 tickets/webhookこれはLaravelアプリケーションで定義されたルートです。また、新しく作成したアプリケーションに接続するために、Vonage番号を購入する必要があります。
よし、準備完了だ。ブラウザーを開いて localhostうまくいけば、スプラッシュ・スクリーンが表示されるはずだ：
では、何ができたのか？Vonage Helpdeskは、顧客全員がアカウントを持っていて、好きな通信媒体を選んでチケットを作成できる発券システムをエミュレートしています。管理者は、チケットを表示し、それらに応答することができます。アプリケーションはユーザが提供した電話番号を取得し、ウェブアプリケーション側の管理者からチケットの応答に使用します。
スーパーユーザーとしてログインできます（シードユーザーは admin@vonage.comパスワードは password- これはコンセプトアプリなので、ぜひ悪くないパスワードに変更してください！）。さて、新しい "customer "ユーザーが必要だ。
スプラッシュ画面で、右上のリンクに移動して登録する。SMSでのやりとりを見ていきますので、通信方法として「SMS」を選択します。使用可能な電話番号を選択してください。
ダッシュボードが表示されます：
オーケー！新しいチケットを作成しましょう。新規チケット」をクリックし、以下のように詳細を記入してください：
参考までに、 In-App Messagingは Conversion APIを使う場合です。を使用するためのものです。この記事では使用しませんので、チェックを外しておいてください。チケットを作成したら、送信をクリックすると新しいチケットに移動します：
成功です！あなたがチケットの作成者であるため、通信チャネル上では何も起こっていません。しかし、チケットに応答するために管理者としてログインすると、マジックが起こります。チケットのエントリーに webがついていることにお気づきでしょう。ここが私たちのマルチチャネルコミュニケーションの出番です。この SMS チャットでは、管理者が応答すると、SMS 経由でユーザーに送信されます。しかし、ユーザーは またウェブアプリケーションを介して返信することもできます。つまり、私たちはすでにマルチチャンネルなのです。
一旦ログアウトして、管理者として再ログインすれば、チケットに対応できます。
ここが面白くなるところです。あなたが応答すると、アプリケーションはこのチケットにどの通知チャネルが選択されているかをチェックし、ユーザに応答を通知します。ユーザーはSMSで応答することができます。ウェブとSMSのマルチチャンネル会話です！
では、このコードは何をしているのでしょうか？データベース的には tickets, usersと ticket_entriesのテーブルがある。それぞれ ticket_entryにはユーザとチケットの参照が含まれます。ローカルで作成された各更新は、まず通知を送信するかどうかを調べます：
$validatedRequestData = $request->validate([
'content' => 'required',
'channel' => 'required'
]);
$ticketEntry = new TicketEntry([
'content' => $validatedRequestData['content'],
'channel' => $validatedRequestData['channel'],
]);
$ticketEntry->user()->associate(Auth::user());
$ticketEntry->ticket()->associate($ticket);
$ticketEntry->save();
$userTicket = $ticket->user()->get()->first();
// If this is not my ticket, I need to notify its creator
if ($userTicket->id !== Auth::id()) {
if ($userTicket->notification_method === 'sms') {
$sms = new SMSText(
$userTicket->phone_number,
config('vonage.sms_from'),
$ticketEntry->content
);
$client = app(Client::class);
$client->messages()->send($sms);
}
ここで重要なのは比較のラインだ：自分のチケットでない場合、通知を出す必要がある。チケットエントリーから通知方法を引き出します。SMSの場合は、次のようになります。 ネイティブのPHP Vonage SDKとLaravelの統合を使用します。を使用して新しいクライアントを起動します。そして、Messages APIを使ってSMS通知を行います。
もう一方では、顧客がテキストに返信すると、Vonageはウェブフックを我々のアプリに送信し、アプリは次のように処理する。 IncomingSmsControllerがそれを処理する：
$ticket = $user->latestTicket();
$entry = new TicketEntry([
'content' => $request->text,
'channel' => 'sms',
]);
$entry->user()->associate($user);
$entry->ticket()->associate($ticket);
$entry->save();
今のところ、着信電話番号と照合してユーザーを引き出し、最新のチケットを取得するという制限がある。しかし、このアプリの楽しみは...
私たちはまだ終わっていません！Deepgramを使ったVoice機能、Laravel Livewireを使ったリアルタイムアップデート、PESTを使ったテストスイートの構築など、アプリに追加していくシリーズの記事にご期待ください。