Skip to content

Latest commit

 

History

History
194 lines (114 loc) · 9.56 KB

index.md

File metadata and controls

194 lines (114 loc) · 9.56 KB
Raw
type code title description order
page
false
Flutter
KuzzleとFlutterをはじめよう
0

KuzzleとFlutterをはじめよう

ここでは、Kuzzle v2、Dart SDK v3、Flutteについて説明します。 Kuzzleでドキュメントを作成し、ドキュメントの通知を購読して、リアルタイムチャットを展開します。

必要条件

Kuzzle SDKをflutterアプリで使用する

kuzzleのパッケージはpub.devで公開されています。(https://pub.dev/packages/kuzzle)

pubspec.yaml ファイルは Flutter アプリのアセットと依存関係を管理します。 pubspec.yaml で、kuzzle (3.0.2 以上) を依存関係リストに追加します。

dependencies:
  flutter:
    sdk: flutter
  kuzzle: ^3.0.2

それから flutter pub を実行し、新しい依存関係をインストールします。

$ flutter pub get

アプリのエントリーポイント

まずはメインから

main.dart:

<<< ./snippets/main.dart.snippet[dart]

ユーザー名を設定する

ここでは、ユーザーにユーザー名を入力してもらいます。 シンプルにするために、Kuzzleの認証システムを使用していませんが、より良い使い方をするために自由に実装してください。

login.dart:

<<< ./snippets/login.dart.snippet[dart]

チャット

クライアントがサーバーと対話できるように、サーバーに接続する必要があります（この例では、ホストはアンドロイドエミュレータのAPIであることに注意してください）。

_chat.dart_で、sdkをインポートします。

<<< ./snippets/chat.dart.snippet:1[dart]

次に、kuzzleへの接続を確立し、チャットのインデックスとコレクションを作成します（それらが存在しない場合）。 また、作成日順にメッセージを取得し、同コレクションを購読してリアルタイムに新しいメッセージを受信します。

インデックスとコレクションの作成

そこで、まず、インデックスやコレクションが存在しない場合にそれを作成するメソッドを書いてみましょう。

<<< ./snippets/chat.dart.snippet:2[dart]

既存のメッセージを取得する

fetchMessage() メソッドは、最新の100件のメッセージを検索します。 そして、ウィジェットの状態を更新して、それらのメッセージをmessages変数に格納します。

<<< ./snippets/chat.dart.snippet:3[dart]

新しいメッセージをリアルタイムに受信する

最後に、コレクションを購読するための方法です。 Kuzzleのリアルタイムコントローラを呼び出して、メッセージ作成時のリアルタイム通知を受け取れるようにします。 このようにして受信した新しいメッセージは、以前に取得したメッセージのリストに追加され、状態を更新することでリストに表示されます。

<<< ./snippets/chat.dart.snippet:4[dart]

ここまでに書いたメソッドを呼び出す

そして、StatefulWidgetのStateのinitStateメソッドで、これらのメソッドをすべて呼び出すことになります。

<<< ./snippets/chat.dart.snippet:5[dart]

ご覧のように、JSONレスポンスから各メッセージをDartクラスへ取得するためにモデルを使用しています。

こちら

<<< ./snippets/chat.dart.snippet:6[dart]

そしてこちら

<<< ./snippets/chat.dart.snippet:7[dart]

このモデルに使用するDartクラスを以下に示します。

message.dart:

<<< ./snippets/message.dart.snippet[dart]

すべてを表示する

最後に、すべてを表示するビューを作成し、build()メソッドにメッセージを送信できるようにするための入力を追加しましょう。

chat.dart:

<<< ./snippets/chat.dart.snippet:8[dart]

chat_view.dart:

<<< ./snippets/chat_view.dart.snippet[dart]

メッセージの送信

最後に、Kuzzle sdkを使って新しいメッセージを送信する方法を見てみましょう。

chat.dart:

<<< ./snippets/chat.dart.snippet:9[dart]

そのために、messages コレクションにusernameとvalueを含むドキュメントを作成します。 ドキュメントが作成されると、このコレクションを購読しているすべてのクライアントに通知が送られ、メッセージを受信することになります。

これからどうするのか？

さて、Kuzzleをより深く知っていただいたところで、その機能をフルに活用する方法についてご紹介します。

  • このドキュメントの他のセクションを参照して、このSDKが提供するものを発見してください。
  • リアルタイムエンジンKuzzleの詳細はこちら
  • Kuzzle Admin Console を使ってユーザーやデータを管理する方法を学びます。