React Native Matsuri 2022 に登壇した際のスライドです。
お部屋探しアプリ「Canary」に Twilio API を使ってアプリ内通話機能を実装した話MagicPodでE2Eテストを実装した話
View Slide
自己紹介● 中野 辰典 (Tatsunori Nakano)● 札幌在住● 2021年12月 株式会社BluAge 入社● ソフトウェアエンジニア● 最近ゴルフをはじめました
お部屋探しアプリ「Canary」にTwilio APIを使ってアプリ内通話機能を実装した話
賃貸物件検索 カナリー（Canary）物件探しアプリ★4.7とカテゴリ内で最高評価！
改めてCanaryとは● お部屋探しアプリ● ユーザーはお問い合わせをする
お問い合わせ方法もっとすぐに確認したい！というユーザーの声があった● 名前やメールアドレスを入力して送信● 仲介会社からの連絡を待つ
電話問い合わせの機能を作りたい！
こういう機能を作りたい物件画面の「電話でお問い合わせ」ボタンから不動産会社に直接電話で問い合わせできる
機能要件● アプリ内から直接電話できるアプリ内通話であること● ユーザーの電話番号は仲介会社に知られないこと○ 個人情報の観点から○ 安心して問い合わせできるように● ユーザーに通話料金が発生しないこと
どうやって実現するか
実現できそうなサービス● AdSiP● CallTracker● Twilio● VonageTwilio に決定選定理由: コスト面が断トツによかった
Twilio 詳細● 電話・SMS・ビデオ通信・チャットなどのさまざまなコミュニケーションチャネルを APIとして提供する CPaaS● Twilioのコード（≒API）を組み合わせてシステムに組み込むことで、最小限のコードで開発可能● iOS, Android, Web それぞれ対応● 初期費用なし● 従量課金制
Programmable Voice● 音声通話を行うためのサービス● 電話の発着信、自動音声応答など電話に関するあらゆる機能をプログラムでコントロールできる● 通話料は従量課金
Programmable Voice の利用料金● 電話番号の維持費は1ヶ月110円● 固定電話への発信: 5.5円/1分
実装
全体像ユーザー 仲介会社Canary サーバー電話問い合わせ※BluAge側で購入した電話番号に発信される指示をリクエスト TwiML: 指定の番号に発信するよう命令仲介会社に発信※BluAge側で購入した電話番号から発信される
TwiML とはリクエスト先の URLを指定● TwiML ( Twilio Markup Language ) は電話（またはSMS）を受信したときに何をすべきかを Twilio に指示するために使用できる命令のセットです。● Twilio によって定義された特別なタグを含むXMLドキュメントです。● 誰かが Twilio 番号の 1 つに電話をかけると、Twilio はその電話番号に関連付けられた URL にリクエストします。そして返されたTwiML 命令を読み取り、指定の番号に発信、録音、メッセージを再生、などを判断します。※レスポンス例XMLで命令が返される
アプリ側で必要な実装ユーザー電話問い合わせ※BluAge側で購入した電話番号に発信される● 発信する● 電話を切る● ミュートにする● スピーカーに切り替える● 「プルル・・」という発信音を出す● 「お繋ぎします」というアナウンスを出す● 相手が通話中の場合にアナウンスを流すetc…
React Native でどう実装するか
公式のSDKReact Native用のSDKはない🥺
公式以外で検討したライブラリ: React Native Twilio Phone有志が作っているライブラリ👀https://www.npmjs.com/package/react-native-twilio-phone
公式が用意しているiOS, Android用のSDKを使ってネイティブモジュールで実装する（そしてまずiOSを先行してリリースすることに📱）方針決定
voice-quickstart-ios / ObjcVoiceQuickstartSwift用がメインで用意されているが、Obj-Cの方が書き慣れているのでObjcVoiceQuickstart を参考に進めることに
ViewController をベースにネイティブモジュールの作成ViewController に電話操作に関するメソッドが詰まっているViewController を RCTTwilioModule としてネイティブモジュールにする
ViewController.m RCTTwilioModule.m発信用のメソッドbuilder.params でリクエスト時に含めるパラメータを設定できるここに仲介業者を特定できる情報を渡すことで、サーバー側で電話番号を指定した TwiMLを返せるほぼそのまま使える
ユーザー 仲介会社Canary サーバーbuilder.params で仲介会社情報を渡すparams が渡される発信用のTwiMLが返される仲介会社に発信※BluAge側で購入した電話番号から発信されるA不動産だな番号は03-xxxx-yyyyだA不動産に電話しよ発信の流れ
ViewController.m RCTTwilioModule.mミュート電話を切るスピーカー
作成したネイティブモジュールを使う完成したネイティブモジュールを発信、通話中のコンポーネント内で使う
ViewController.m RCTTwilioModule.m通話中を取得通話中の場合に返される “Busy Here” をキャッチしたら ”sendEventWithName” でイベントを送る※参考: https://www.twilio.com/docs/api/errors/31486
NativeEventEmitter でイベントを拾うsendEventWithNameで送られたイベントはNativeEventEmitterで拾い、「通話中」などのステータスを扱えるようにする
実際に動かしてみる
補足: PodfilePodfile に左の一文を追加する必要があります
補足: 暗号化されたアクセストークンの復号化用のネイティブモジュールTwilioに接続するにはアクセストークンが必要。バックエンド側で生成し、セキュリティの観点からAES-CTRで暗号化してからアプリ側に返している。アプリ側での複号化が必要になるが、JSでおこなうのはパフォーマンス面に影響が出そうだったためネイティブモジュールを作成。※https://github.com/ywzqhl/imToken/blob/7d9ae8069ebc605f92d87bb81194d67a3772d7bd/imToken/ETHAES128.m を参考に作成※https://github.com/tectiv3/react-native-aes というOSSがあったがCTRモードに非対応だったためお見送り
まとめ
まとめ● Twilioを使えばアプリ内通話機能を簡単に実装できる● 数ある電話サービスの中でもTwilioはコスパがいい● TwilioにはReact Native用のSDKは無いが、iOS, Android用のSDKをネイティブモジュールとして扱うことで実装できる
MagicPodでE2Eテストを実装した話
MagicPod とは● ノーコードE2Eテスト自動化サービス● モバイルアプリテスト、ブラウザ(ウェブアプリ)テストの両方に対応● 低コスト（¥39,800円/月〜）● テスト実行回数 無制限
React NativeにおけるE2Eテストの選択肢と選定理由● React Native公式ドキュメント○ Detox○ Appiumhttps://reactnative.dev/docs/testing-overview#end-to-end-tests● メンテコストを抑えたい● 今後エンジニア以外でも触れるようにしたい→ ノーコード コストの比較 → MagicPod に決定● ノーコード○ Autify○ MagicPod
テスト戦略
テスト戦略ここのテストを頑張っていることが前提 💪E2Eテストはクリティカルな箇所のみ、必要最低限にしてメンテコストを抑える「検索」や「問い合わせ」など根幹となる機能のみをテスト
テスト作成
テスト作成手順: EAS BuildEAS Build でビルドしたファイルをダウンロードする
テスト作成手順: MagicPodにアップロードMagicPod上で起動する
テスト作成手順: 検出した要素からシナリオを作成要素をドラッグ&ドロップで簡単にシナリオを作成要素を検出
テスト作成手順: さまざまな操作画面操作条件分岐 待機変数要素の確認画面入力etc…
テスト作成手順: 共有ステップ「共有ステップ」を作成することで複数のシナリオで使いまわせる
テスト実行: すべてのシナリオを一括実行複数のシナリオを一括実行。結果はメールでも届く
テスト実行: AIによる自動修正予期せぬことで落ちそうになっても、AIによる自動修正が入ってくれる場合がある
まとめなによりE2Eテストを入れるだけで心理的にかなり楽になりますので、工数がネックで導入に踏み切れていない場合、ノーコードでコスパ最強のMagicPodはおすすめです● ブラウザ上でポチポチするだけでテスト作成できるのは楽● エンジニア以外でもメンテナンスできそう● コスパがいい
さいごに
エンジニア積極採用中！！不動産DX業界で急成長中のスタートアップBluAgeで一緒に働きませんか？
エンジニア積極採用中！！YAMADA HLDGS.との総額約10億円の資本業務提携を締結これまでにない新しいお部屋探しを作り上げていく仲間を募集中です！出資カナリーPFにおけるシナジー創出出資DX支援
エンジニア積極採用中！！Meetyでカジュアルにお話ししませんか？
ご清聴ありがとうございました
hschwentner
kumamotone
ivargrimstad
mitchan
ogiwarat
tosite
psj59129
k9i
murabayashi
eihigh
gmvalentino8
kizuku_miyagi
hatefulcrawdad
jponch
swwweet
addyosmani
shlominoach
ddemaree
quramy
mclloyd
wjessup
maggiecrowley
hursman
eitanlees