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

by BluAge Developers

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

賃貸物件検索カナリー（Canary）物件探しアプリ ★4.7とカテゴリ内で最高評価！

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

電話問い合わせの機能を作りたい！

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

どうやって実現するか

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

実装

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

React Native でどう実装するか

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

実際に動かしてみる

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

補足: 暗号化されたアクセストークンの復号化用のネイティブモジュール Twilioに接続するにはアクセストークンが必要。バックエンド側で生成し、セキュリティの観点から AES-CTRで暗号化してからアプリ側に返している。アプリ側での複号化が必要になるが、JSでおこなうのはパフォーマンス面に影響が出そうだったためネイティブモジュールを作成。 ※https://github.com/ywzqhl/imToken/blob/7d9ae8069ebc605f92d87b b81194d67a3772d7bd/imToken/ETHAES128.m を参考に作成 ※https://github.com/tectiv3/react-native-aes というOSSがあったがCTR モードに非対応だったためお見送り

Slide 34

Slide 34 text

まとめ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

テスト戦略

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

テスト作成

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

実際に動かしてみる

Slide 50

Slide 50 text

まとめ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

さいごに

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

エンジニア積極採用中！！ Meetyでカジュアルにお話ししませんか？

Slide 56

Slide 56 text

エンジニア積極採用中！！ Meetyでカジュアルにお話ししませんか？

Slide 57

Slide 57 text

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