建物
おしゃべり
は、複雑な取り組みです。 のために構築しているかどうか。
ヘルスケア
,
ゲーミング
,
オンデマンドサービス
他の業界でも、機能豊富なチャットを作るには努力が必要です。 また、適切な技術スタックを選択することも重要です。このチュートリアルでは、以下の技術スタックを使用してチャットを構築する方法を探ります。 Vue.jsユーザーインターフェースや小規模なアプリケーションを構築するための、人気のあるフロントエンドJavaScriptウェブフレームワークです。 また、Sendbirdの使い方を学びます。
UIKit
の機能豊富なセットです。
チャットUI
コンポーネントのセットであるUIKitを、Vueチャットアプリの中で使用できます。
例えば、フロントエンドフレームワーク間でプロジェクトを移行する場合や、選択したフレームワークに移植されていないサードパーティライブラリ（例：vuetify）を使用する場合など、異なるフロントエンドフレームワークで書かれたコンポーネントをアプリにレンダリングしたい場合があります。 このような場合、いくつかのブリッジングライブラリを利用することができます。 例えば、以下のようなレンダリングが可能です。 アンギュラー の成分が含まれています。 リアクト アプリ アンギュラー2リアクト または ビュー のコンポーネントを使用します。 スベルテ タッグを組む スベルテアダプター. このチュートリアルでは
Veuary
を使用して、ReactとVueの世界の橋渡しをします。
前提条件
Vueチャットアプリの構築を開始するには、以下のものが必要です。
node.js
をインストールし、SendbirdアプリケーションIDを取得します。 まだの方は
Sendbirdのアカウントを設定する
でアプリケーションを作成し
ダッシュボード
.
アプリケーションIDはSendbirdのダッシュボードで確認することができます。
これから作るものVueチャットアプリのあるべき姿
このチュートリアルでは、デスクトップ向けWhatsAppと同様のUXを持つVueチャットアプリを構築します。 があります。
最終プロジェクトコード
はGitHubで公開されていますので、ぜひご覧ください。
ライブデモ
.
私たちのプロジェクトはVue 3を使用して構築され、アプリはSendbirdの完全に動作するバージョンをレンダリングします。
React UIKit
Vueのメインチャットアプリの中にあります。 VueアプリはUIKitに設定を渡し、UIKitはVueにユーザー情報を戻すこともします。 この双方向通信により、Sendbirdユーザーの名前と未読メッセージ数をVueアプリのトップヘッダに表示することができるようになります。 結果はこのようになります。
Vueのチャットアプリを設定する
Vueには、アプリケーションを素早く足場固めするための便利なコマンドラインツールがあります。 プロジェクトが存在する場所で、以下を実行するだけです。
このコマンドは、新しいプロジェクトを作成する際のオプションについて説明します。 このチュートリアルで使用した設定は、以下の通りです。
dev モードでアプリを起動するには、以下のコマンドを実行します。
を実行すると、ピカピカの新しいランディングページが表示されるはずです。
http://localhost:5173
. こんな感じでいいんじゃないでしょうか。
Veauryのインストールと設定
ボーリー は、Vueアプリの中でReactコンポーネントのレンダリングを可能にするライブラリです。 ReactアプリのVueコンポーネントもサポートされていますが、このチュートリアルの対象外であることは、特筆すべきことです。 VeauryはVue 3とVue 2の両方で動作し、ライブラリは以下のコマンドでnpmからインストールできます。
新しく作成した Vue チャットアプリで React コンポーネントをインポートしてレンダリングできるようにするために、ビルドの設定を少し変更する必要があります。 そのため、Veaury プラグインを使用するために、プロジェクト内の vite.config.js ファイルを更新する必要があります。
この設定変更の後、react_appというディレクトリに好きなReactコンポーネントを追加することができます。そして、それらのReactコンポーネントは、.vueファイルにインポートして、標準的なVueコンポーネント内でレンダリングすることができます。
VueプロジェクトでReactコンポーネントを作成する
まず、react_appに新しいReactコンポーネントを作成する必要があります。 UIKitのインポート、設定、レンダリングを担当するコンポーネントです。
このReactコンポーネントは、Vueとうまく動作させるために、特別なことをする必要はありません。 ここでのコードは、次のようなものです。
- Sendbird UIKitの依存関係をインポートする
- アプリIDとユーザーIDでUIKitを初期化する
- Sendbird SDKにアクセスするためにwithSendbird HOCを使用します。 これにより、Vueアプリに戻すために必要なユーザー情報にアクセスできるようになります。
注目すべきは、ChatReactComponentに渡されるpropsは、親Vueコンポーネントから渡されることです。 ここでpropsを渡すことで、React側とVueの通信ができるようになります。 これらのプロパティをどのように定義し、渡すかについては、次のセクションで説明します。
UIKitをページに追加する
次に、VueのチャットアプリにChatReactComponentを追加します。 更新が必要なページは、views/HomeView.vueです。 views/HomeView.vueにあるコードをすべて削除し、以下のコードを追加してください。
このコードは次のような働きをします。
- Veaury と私たちの新しい React チャットコンポーネントをインポートします。
- VeauryのapplyPureReactInVue関数を使って、ReactコンポーネントをVueコンポーネントに変換しています。
- setup関数で、Reactコンポーネントにpropとして渡すデータとコールバックを設定します。
- トップヘッダーをレンダリングするためのHTMLを定義します。 ヘッダーには、ユーザー名と未読メッセージ数が含まれます。 このデータは、このチュートリアルの後のステップで、UIKitから渡されます。
- HTMLにReact Chatコンポーネントをレンダリングし、Chat要素の属性として先ほど定義したデータとコールバックを渡します。
- 最後に、スタイリングを追加して、全体を美しく仕上げます。
にアクセスすると、ブラウザ上でUIKitのレンダリングが表示されるようになりました。
http://localhost:5173
. こんな感じでいいんじゃないでしょうか。
Vueにユーザ情報を渡す
最後に、ユーザー情報と未読メッセージ数がVueチャットアプリに渡され、アプリケーションのトップヘッダーバーにその情報を表示できるようになります。 この情報には、Sendbird SDKを介してアクセスします。 UIKitからSDKにアクセスするには、getSdkという便利な関数を使用します。 以下のようにその関数を呼び出すと、基盤となるSDKが得られます。 そして、関連するメソッドにアクセスして必要な情報（未読メッセージ数およびユーザ情報）を取得し、プロップとして渡されたコールバック（setUnreadMessageCount & setSbUserInfo）を使用してその情報をVueに渡します。
アプリのトップバーにユーザー名とメッセージ数が表示されるようになりました。 下のスクリーンショットでは、ユーザー名が「Bob」、未読メッセージ数が「1」となっていることに注目してください。
結論
おめでとうございます。 これで、Vueアプリの中でSendbird UIKitが動作するようになりました。 このチュートリアルでは、Sendbird UIKitが提供する機能豊富なプレメイドデザインコンポーネントを使用して、Vueチャットアプリを作成する方法についてお話しました。 これで、楽しくグループを作ってチャットを始められますね。
VueとReactのコード間でデータが双方向に流れることを忘れないでください。賢明な次のステップは、Chat reactコンポーネントに異なるタイプのプロパティを渡して、それらのプロパティを使ってUIKitを別の方法で設定することです（例：UIKitテーマの色を設定する）。
でお困りの方は
センドバードチャット
または
UIKit
のヘルプが必要な場合は、私たちの
チャットに関するドキュメント
と
UIKitのドキュメントをご覧ください。
!豊富なプリビルドUIコンポーネントを使用して、アプリケーションでチャットを起動する方法についてのガイダンスが記載されています。 で答えを見つけることもできます。
センドバードコミュニティ
Sendbirdコミュニティは、Sendbirdに関するあらゆることを質問したり、答えたりできるフォーラムです。
Sendbird
. ご遠慮なく 連絡先 お困りのことがあれば、私たち専門家がお手伝いします。 Happy chat building! 💻
