agora.io Real-time Messaging SDK for Flutter クイックスタートガイド

#概要
agora.ioにFlutter用のReal-time Messaging SDKが公開されています。

Agora Real-time Messaging SDKは、テキストデータをリアルタイムに送受信できるSDKで、
これはそのFlutter用ラッパーになります。

この記事では以下のサンプルソースに付属しているexampleアプリを用いて、
そのビルドと使い方をご紹介します。

なお、Agora Video SDKのFlutter用ラッパーについても公開されていますので、クイックスタートガイドは[こちら](https://qiita.com/v-cube/items/f2c8d2c5ff8740bd0f3f)をご参照ください。

#サンプルソース
サンプルソースは以下よりダウンロードしてご準備ください。
[Flutter用Real-time Messaging SDKサンプル](https://github.com/AgoraIO/Flutter-RTM)
また、この記事で利用するexampleアプリは、上記サンプルの/exampleフォルダ以下にあります。
[exampleフォルダ](https://github.com/AgoraIO/Flutter-RTM/tree/master/example)

#使用方法
ビルド方法、動作確認についてご説明します。
##ビルド方法

※前準備としてFlutterのインストールと設定までご準備ください。
[Flutter(windowsの場合)](https://flutter.dev/docs/get-started/install/windows)

1.[サンプルプロジェクト](https://github.com/AgoraIO/Flutter-RTM)をダウンロード
2.ファイルの展開
3.settings.dartにAPP IDを追記
[example](https://github.com/AgoraIO/Flutter-RTM/tree/master/example)配下に移動し、settings.dartファイルを開き編集します。
(/example/lib/settings.dart)

```settings.dart
await AgoraRtmClient.createInstance('***');
```
※APP_IDはagora.ioにて発行されたIdをご用意ください

4.プロジェクトのルートフォルダ(/example)へ移動

5.パッケージの追加

```
$ flutter packages get
```

6.実機(Android)とPCをUSB接続
7.実機ビルド

```
$ flutter run
```

8.アプリ起動

初期画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/8017473d-322d-d7ff-16b1-6ee69b8b636f.png" width="50%">

##動作確認
ビルドが完了したので動作確認をします。

※前準備として、対向拠点が必要なため、Real-time-Messaging SDKのダウンロードサイトにて、
WebRTC用Real-time-Messagingサンプルアプリをダウンロードしてご準備ください。
[Real-time-Messaging SDKダウンロードサイト](https://docs.agora.io/en/Real-time-Messaging/downloads)
(Real-time-Messaging SDKの"Web vx.x.x"ボタンをクリック)
（注）利用するにはnode.js、npmが必要となります。

（もう1台Androidデバイスをお持ちでしたら、そのデバイスにFlutterアプリをインストールして対向拠点としていただくものよろしいかと思います）

1.Flutterアプリ起動&ログイン
Flutterアプリを起動後、
User idに”flutter”を入力し、Loginをクリックします。

(Login後)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/a5575abf-e7d4-4f02-3eb6-500121ac5766.png" width="50%">
2.(Flutterアプリ)Channelにjoin
Channelに"demo"と入力し、"Join Channel"をクリックします。
(Join後)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/82894630-b02a-fb3a-df34-a40032338f23.png" width="50%">

3.対向拠点アプリ起動&ログイン
用意しておいた対向拠点となるサンプルアプリを起動します。
(npm install、npm run devにてブラウザ起動(localhost:8080))
AppIdの入力、AccountNameに”web”を入力し、"Login"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/2208b72f-6989-3170-01cc-362d7b2e91c4.png" width="50%">

4.(対向拠点アプリ)Channelにjoin
Channel名に"demo"を入力し、"Join"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/3ad51c56-63d4-ecda-1a2f-85662f06e3e7.png" width="50%">

5.(Flutterアプリ)メッセージを送信
Flutterアプリにて、送信先uidに"web"を入力し、"Query Online"をクリックします。
次に、送信メッセージに"hello"を入力し、"Send to Peer"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/74ed04d7-ff15-747e-b35c-9a0fb2a9da25.png" width="50%">

対向拠点アプリにてメッセージが受信できていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/52e506a3-8297-cd96-fae7-4467c9f85fd3.png" width="50%">

6.(Flutterアプリ)メッセージを受信
対向拠点アプリにて、送信先Peer Idに"flutter"を入力し、
Peer Message(送信メッセージ)に"bye"を入力し、"SEND"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/86eb086e-0d9d-ba0a-fe88-9f7ba9ab769a.png" width="50%">


Flutterアプリにてメッセージが受信できていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/6f91e744-8547-7c2e-b659-3f852d90d9ad.png" width="50%">


flutterアプリのビルドおよびメッセージの送受信ができました。

##関連リンク
・[Real-Time Messaging SDKのFlutter用のプラグインはありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360038823931)
・[VideoSDKのFlutter用のプラグインはありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360036536872)
・[agora.ioサンプルコードのリポジトリはどこにありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360034562711)

#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=0c68f58a700c5ceee20f)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=0c68f58a700c5ceee20f)