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

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

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

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

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


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

#使用方法
ビルド方法、動作確認についてご説明します。
##ビルド方法
1.[サンプルソース](https://github.com/AgoraIO/agora-react-native-rtm)をダウンロード
2.ファイルの展開
3.プロジェクトのルートフォルダ(/example)へ移動
4.[agora.config.json]([https://github.com/AgoraIO/agora-react-native-rtm/blob/master/example/agora.config.json])にAPP IDを追記


```agora.config.json
  "appId": ******,
```
※APP_IDはagora.ioにて発行されたIdをご用意ください


5.パッケージの追加

```shell
$ npm install
$ react-native link agora-react-native-rtm
$ react-native link react-navigation
$ react-native link react-native-gesture-handler
$ react-native link react-native-vector-icons
```
6.パッケージサーバの開始

```shell
$ npm run start
```
7.実機(Android)とPCをUSB接続
8.実機ビルド

```shell
$ react-native run-android
```

8.アプリ起動

初期画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b3571cbc-285f-b75c-caf9-3d0f4885e3a9.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デバイスをお持ちでしたら、そのデバイスにReactNativeアプリをインストールして対向拠点としていただくものよろしいかと思います）

1.ReactNativeアプリ起動&join
ReactNativeアプリを起動後、
Channel nameに"demo"を入力し、"Join Channel"をクリックします。
(Join後)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/e5da2140-850a-5901-54c7-306b5b6cd39b.png" width="50%">

2.対向拠点アプリ起動&ログイン
用意しておいた対向拠点となるサンプルアプリを起動します。
(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%">

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

4.(ReactNativeアプリ)メッセージを送信
ReactNativeアプリにて、送信メッセージに"hello"を入力し、"Send"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/83f556f2-0888-af80-0bf1-3010a07840ed.png" width="50%">

対向拠点アプリにてメッセージが受信できていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/826914dc-af56-6d24-5cd2-eb781dfd1ffa.png" width="50%">

5.(ReactNativeアプリ)メッセージを受信
対向拠点アプリにてChannel Message(送信メッセージ)に"bye"を入力し、"SEND"をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/61664c26-8be6-c201-4214-77645a02a647.png" width="50%">

ReactNativeアプリにてメッセージが受信できていることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/396f6283-9c92-ae05-bb16-ac4858ca920b.png" width="50%">

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

#関連リンク
・[Real-Time Messaging SDKのReactNative用パッケージはありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360039489491)


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=4a6146aa3cdaeb773931)
[<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=4a6146aa3cdaeb773931)