Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

BluAge Developers

October 08, 2022
Tweet

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    ● 中野 辰典 (Tatsunori Nakano)
    ● 札幌在住
    ● 2021年12月 株式会社BluAge 入社
    ● ソフトウェアエンジニア
    ● 最近ゴルフをはじめました

    View Slide

  3. お部屋探しアプリ「Canary」にTwilio APIを使って
    アプリ内通話機能を実装した話

    View Slide

  4. 賃貸物件検索 カナリー(Canary)物件探しアプリ
    ★4.7とカテゴリ内で
    最高評価!

    View Slide

  5. 改めてCanaryとは
    ● お部屋探しアプリ
    ● ユーザーはお問い合わせをする

    View Slide

  6. お問い合わせ方法
    もっとすぐに確認したい!
    というユーザーの声があった
    ● 名前やメールアドレスを入力して送信
    ● 仲介会社からの連絡を待つ

    View Slide

  7. 電話問い合わせの機能を作りたい!

    View Slide

  8. こういう機能を作りたい
    物件画面の「電話でお問い合わせ」ボタンから不動産会社に直接電話で問い合わせできる

    View Slide

  9. 機能要件
    ● アプリ内から直接電話できるアプリ内通話であること
    ● ユーザーの電話番号は仲介会社に知られないこと
    ○ 個人情報の観点から
    ○ 安心して問い合わせできるように
    ● ユーザーに通話料金が発生しないこと

    View Slide

  10. どうやって実現するか

    View Slide

  11. 実現できそうなサービス
    ● AdSiP
    ● CallTracker
    ● Twilio
    ● Vonage
    Twilio に決定
    選定理由: コスト面が断トツによかった

    View Slide

  12. Twilio 詳細
    ● 電話・SMS・ビデオ通信・チャットなどのさま
    ざまなコミュニケーションチャネルを APIとし
    て提供する CPaaS
    ● Twilioのコード(≒API)を組み合わせてシス
    テムに組み込むことで、最小限のコードで開
    発可能
    ● iOS, Android, Web それぞれ対応
    ● 初期費用なし
    ● 従量課金制

    View Slide

  13. Programmable Voice
    ● 音声通話を行うためのサービス
    ● 電話の発着信、自動音声応答など電話に関
    するあらゆる機能をプログラムでコントロー
    ルできる
    ● 通話料は従量課金

    View Slide

  14. Programmable Voice の利用料金
    ● 電話番号の維持費は1ヶ月110円
    ● 固定電話への発信: 5.5円/1分

    View Slide

  15. 実装

    View Slide

  16. 全体像
    ユーザー 仲介会社
    Canary サーバー
    電話問い合わせ
    ※BluAge側で購入した電話番号に発信される
    指示をリクエスト TwiML: 指定の番号に発信するよう命令
    仲介会社に発信
    ※BluAge側で購入した電話番号から発信される

    View Slide

  17. TwiML とは
    リクエスト先の URLを指定
    ● TwiML ( Twilio Markup Language ) は電話(またはSMS)を受信したときに何をすべきかを Twilio に指示するために使用
    できる命令のセットです。
    ● Twilio によって定義された特別なタグを含むXMLドキュメントです。
    ● 誰かが Twilio 番号の 1 つに電話をかけると、Twilio はその電話番号に関連付けられた URL にリクエストします。そして返
    されたTwiML 命令を読み取り、指定の番号に発信、録音、メッセージを再生、などを判断します。
    ※レスポンス例
    XMLで命令が返される

    View Slide

  18. アプリ側で必要な実装
    ユーザー
    電話問い合わせ
    ※BluAge側で購入した電話番号に発信される
    ● 発信する
    ● 電話を切る
    ● ミュートにする
    ● スピーカーに切り替える
    ● 「プルル・・」という発信音を出す
    ● 「お繋ぎします」というアナウンスを出す
    ● 相手が通話中の場合にアナウンスを流す
    etc…

    View Slide

  19. React Native でどう実装するか

    View Slide

  20. 公式のSDK
    React Native用のSDKはない🥺

    View Slide

  21. 公式以外で検討したライブラリ: React Native Twilio Phone
    有志が作っているライブラリ👀
    https://www.npmjs.com/package/react-native-twilio-phone

    View Slide

  22. 公式が用意しているiOS, Android用のSDKを使ってネイティブモジュールで実装する
    (そしてまずiOSを先行してリリースすることに📱)
    方針決定

    View Slide

  23. voice-quickstart-ios / ObjcVoiceQuickstart
    Swift用がメインで用意されているが、Obj-Cの方が書き慣れているので
    ObjcVoiceQuickstart を参考に進めることに󰞵

    View Slide

  24. ViewController をベースにネイティブモジュールの作成
    ViewController に電話操作に関するメソッドが詰まっている
    ViewController を RCTTwilioModule としてネイティブモジュールにする

    View Slide

  25. ViewController.m RCTTwilioModule.m
    発信用の
    メソッド
    builder.params でリクエスト時に含めるパラメータを設定できる
    ここに仲介業者を特定できる情報を渡すことで、サーバー側で電話番号を指定した TwiMLを返せる
    ほぼそのまま使える

    View Slide

  26. ユーザー 仲介会社
    Canary サーバー
    builder.params で仲介会社情報を渡す
    params が渡される
    発信用のTwiMLが返される
    仲介会社に発信
    ※BluAge側で購入した電話番号から発信される
    A不動産だな
    番号は03-xxxx-yyyyだ
    A不動産に電話しよ
    発信の流れ

    View Slide

  27. ViewController.m RCTTwilioModule.m
    ミュート
    電話を切る
    スピーカー

    View Slide

  28. 作成したネイティブモジュールを使う
    完成したネイティブモジュールを発信、通話中のコンポーネント内で使う

    View Slide

  29. ViewController.m RCTTwilioModule.m
    通話中を取得
    通話中の場合に返される “Busy Here” をキャッチしたら ”sendEventWithName” でイベントを送る
    ※参考: https://www.twilio.com/docs/api/errors/31486

    View Slide

  30. NativeEventEmitter でイベントを拾う
    sendEventWithNameで送られたイベントはNativeEventEmitterで拾い、
    「通話中」などのステータスを扱えるようにする

    View Slide

  31. 実際に動かしてみる

    View Slide

  32. 補足: Podfile
    Podfile に左の一文を追加する必要があります

    View Slide

  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
    モードに非対応だったためお見送り

    View Slide

  34. まとめ

    View Slide

  35. まとめ
    ● Twilioを使えばアプリ内通話機能を簡単に実装できる
    ● 数ある電話サービスの中でもTwilioはコスパがいい
    ● TwilioにはReact Native用のSDKは無いが、
    iOS, Android用のSDKをネイティブモジュールとして扱う
    ことで実装できる

    View Slide

  36. MagicPodでE2Eテストを実装した話

    View Slide

  37. MagicPod とは
    ● ノーコードE2Eテスト自動化サービス
    ● モバイルアプリテスト、ブラウザ(ウェブア
    プリ)テストの両方に対応
    ● 低コスト(¥39,800円/月〜)
    ● テスト実行回数 無制限

    View Slide

  38. React NativeにおけるE2Eテストの選択肢と選定理由
    ● React Native公式ドキュメント
    ○ Detox
    ○ Appium
    https://reactnative.dev/docs/testing-overview#end-to-end-tests
    ● メンテコストを抑えたい
    ● 今後エンジニア以外でも触れるようにしたい
    → ノーコード
       コストの比較 → MagicPod に決定
    ● ノーコード
    ○ Autify
    ○ MagicPod

    View Slide

  39. テスト戦略

    View Slide

  40. テスト戦略
    ここのテストを頑張っていることが前提 💪
    E2Eテストはクリティカルな箇所のみ、必要最低限にしてメンテコストを抑える
    「検索」や「問い合わせ」など根幹となる機能のみをテスト

    View Slide

  41. テスト作成

    View Slide

  42. テスト作成手順: EAS Build
    EAS Build でビルドしたファイルをダウンロードする

    View Slide

  43. テスト作成手順: MagicPodにアップロード
    MagicPod上で起動する

    View Slide

  44. テスト作成手順: 検出した要素からシナリオを作成
    要素をドラッグ&ドロップで簡単にシナリオを作成
    要素を検出

    View Slide

  45. テスト作成手順: さまざまな操作
    画面操作
    条件分岐 待機
    変数
    要素の確認
    画面入力
    etc…

    View Slide

  46. テスト作成手順: 共有ステップ
    「共有ステップ」を作成することで複数のシナリオで使いまわせる

    View Slide

  47. テスト実行: すべてのシナリオを一括実行
    複数のシナリオを一括実行。結果はメールでも届く

    View Slide

  48. テスト実行: AIによる自動修正
    予期せぬことで落ちそうになっても、AIによる自動修正が入ってくれる場合がある

    View Slide

  49. 実際に動かしてみる

    View Slide

  50. まとめ

    View Slide

  51. まとめ
    なによりE2Eテストを入れるだけで心理的にかなり楽になりますので、
    工数がネックで導入に踏み切れていない場合、
    ノーコードでコスパ最強のMagicPodはおすすめです
    ● ブラウザ上でポチポチするだけでテスト作成で
    きるのは楽
    ● エンジニア以外でもメンテナンスできそう
    ● コスパがいい

    View Slide

  52. さいごに

    View Slide

  53. エンジニア積極採用中!!
    不動産DX業界で急成長中のスタートアップ
    BluAgeで一緒に働きませんか?

    View Slide

  54. エンジニア積極採用中!!
    YAMADA HLDGS.との総額約10億円の資本業務提携を締結
    これまでにない新しいお部屋探しを作り上げていく仲間を募集中です!
    出資
    カナリーPFにおけるシナジー創出
    出資
    DX支援

    View Slide

  55. エンジニア積極採用中!!
    Meetyでカジュアルにお話ししませんか?

    View Slide

  56. エンジニア積極採用中!!
    Meetyでカジュアルにお話ししませんか?

    View Slide

  57. ご清聴ありがとうございました

    View Slide