お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 / MagicPodでE2Eテストを実装した話

React Native Matsuri 2022 に登壇した際のスライドです。

Transcript

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