Programmable Chat Quickstart: Javascript

このガイドでは、Programmable Chatについて学びながら構築できるサンプル・アプリケーションを通じて、開発に素早く慣れることができるよう作られています。 名案でしょう? それでは、さっそく始めましょう!

アカウント情報の収集

The first thing we need to do is grab all the necessary information from our Twilio account. To set up our back-end for Chat, we will need four values from our account:

構成値 説明
サービスインスタンスSID アプリケーションのすべてのデータが保存され、スコープが設定されているサービスインスタンス。ここをクリックして、コンソールで 1 つ生成します
Account SID プライマリ Twilio アカウント識別子 - 調べるにはコンソールのここにアクセスします。
API Key 認証に使用します。ここで生成します。
API Secret 認証に使用します。上記と同じようにここで生成します。

スターターアプリケーションのダウンロード、構成、および実行

お好みのサーバー側プログラミング言語のダウンロード・パッケージを選択してください。 主にフロントエンド開発者の方で特に強いこだわりがない場合は、Node.jsがもっとも迅速に使い慣れることができるようになるでしょう。

上記で設定した 4 つの値を使用して、各スターターアプリケーションをその README の手順に従って構成し、マシン上で実行します。

スターターアプリケーションの探求

お楽しみはこれからです! スターターアプリケーションのホームページにアクセスすると、設定に問題がないか確認し、それから下部の緑色のチャットボタンをクリックします。

ランダムなユーザーアイデンティティが割り当てられ、general という名前のチャンネルに参加しています。別のブラウザーウィンドウまたはタブでこのページを開くと、あなた自身とカンバセーションを始めることができます!

スターターアプリケーションの HTML と CSS はそれほど面白いものではありませんが、このアプリケーションを 実行する JavaScript コードでは、いくつかの非常に重要な処理が行われています。

  1. Ajax 経由でサーバーから AccessToken をフェッチします。
  2. Chat JavaScript SDKを初期化する
  3. "general" という名前のチャンネルに参加します。
  4. UI イベントを処理して、メッセージを送信するか、新しい着信メッセージを表示します。

ユーザーの管理方法については、ユーザーアイデンティティガイドで探求します。また、チャンネルオブジェクトでできることについては、チャンネルおよびメッセージガイドで説明します。

ヘルプ

もう少しお手伝いが必要ですか? twilio_support@kddi-web.comまでお知らせください。 可能な限り迅速に問題を解決できるよう努めます。 Chatでの開発をお楽しみください。 そしてどんなものを開発されたか是非お知らせください!

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。