Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 / MagicPodでE2Eテストを実装した話
Search
BluAge Developers
October 08, 2022
Programming
0
890
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 / MagicPodでE2Eテストを実装した話
React Native Matsuri 2022 に登壇した際のスライドです。
BluAge Developers
October 08, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
日付と正規化
megmogmog1965
0
140
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
380
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
CSC307 Lecture 13
javiergs
PRO
0
150
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
유연한 Composable 설계
l2hyunwoo
0
380
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Clear Off the Table
cherdarchuk
89
320k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Automating Front-end Workflow
addyosmani
1362
200k
Statistics for Hackers
jakevdp
792
220k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Designing for Performance
lara
604
67k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Transcript
お部屋探しアプリ「Canary」に Twilio API を使って アプリ内通話機能を実装した話 MagicPodでE2Eテストを実装した話
自己紹介 • 中野 辰典 (Tatsunori Nakano) • 札幌在住 • 2021年12月
株式会社BluAge 入社 • ソフトウェアエンジニア • 最近ゴルフをはじめました
お部屋探しアプリ「Canary」にTwilio APIを使って アプリ内通話機能を実装した話
賃貸物件検索 カナリー(Canary)物件探しアプリ ★4.7とカテゴリ内で 最高評価!
改めてCanaryとは • お部屋探しアプリ • ユーザーはお問い合わせをする
お問い合わせ方法 もっとすぐに確認したい! というユーザーの声があった • 名前やメールアドレスを入力して送信 • 仲介会社からの連絡を待つ
電話問い合わせの機能を作りたい!
こういう機能を作りたい 物件画面の「電話でお問い合わせ」ボタンから不動産会社に直接電話で問い合わせできる
機能要件 • アプリ内から直接電話できるアプリ内通話であること • ユーザーの電話番号は仲介会社に知られないこと ◦ 個人情報の観点から ◦ 安心して問い合わせできるように •
ユーザーに通話料金が発生しないこと
どうやって実現するか
実現できそうなサービス • AdSiP • CallTracker • Twilio • Vonage Twilio
に決定 選定理由: コスト面が断トツによかった
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 でどう実装するか
公式のSDK React Native用のSDKはない🥺
公式以外で検討したライブラリ: React Native Twilio Phone 有志が作っているライブラリ👀 https://www.npmjs.com/package/react-native-twilio-phone
公式が用意しているiOS, Android用のSDKを使ってネイティブモジュールで実装する (そしてまずiOSを先行してリリースすることに📱) 方針決定
voice-quickstart-ios / ObjcVoiceQuickstart Swift用がメインで用意されているが、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で拾い、 「通話中」などのステータスを扱えるようにする
実際に動かしてみる
補足: Podfile Podfile に左の一文を追加する必要があります
補足: 暗号化されたアクセストークンの復号化用のネイティブモジュール Twilioに接続するにはアクセストークンが必要。 バックエンド側で生成し、セキュリティの観点から AES-CTRで暗号化してからアプリ側に返している。 アプリ側での複号化が必要になるが、JSでおこなうのはパ フォーマンス面に影響が出そうだったためネイティブモ ジュールを作成。 ※https://github.com/ywzqhl/imToken/blob/7d9ae8069ebc605f92d87b b81194d67a3772d7bd/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 ◦ Appium https://reactnative.dev/docs/testing-overview#end-to-end-tests
• メンテコストを抑えたい • 今後エンジニア以外でも触れるようにしたい → ノーコード コストの比較 → MagicPod に決定 • ノーコード ◦ Autify ◦ MagicPod
テスト戦略
テスト戦略 ここのテストを頑張っていることが前提 💪 E2Eテストはクリティカルな箇所のみ、必要最低限にしてメンテコストを抑える 「検索」や「問い合わせ」など根幹となる機能のみをテスト
テスト作成
テスト作成手順: EAS Build EAS Build でビルドしたファイルをダウンロードする
テスト作成手順: MagicPodにアップロード MagicPod上で起動する
テスト作成手順: 検出した要素からシナリオを作成 要素をドラッグ&ドロップで簡単にシナリオを作成 要素を検出
テスト作成手順: さまざまな操作 画面操作 条件分岐 待機 変数 要素の確認 画面入力 etc…
テスト作成手順: 共有ステップ 「共有ステップ」を作成することで複数のシナリオで使いまわせる
テスト実行: すべてのシナリオを一括実行 複数のシナリオを一括実行。結果はメールでも届く
テスト実行: AIによる自動修正 予期せぬことで落ちそうになっても、AIによる自動修正が入ってくれる場合がある
実際に動かしてみる
まとめ
まとめ なによりE2Eテストを入れるだけで心理的にかなり楽になりますので、 工数がネックで導入に踏み切れていない場合、 ノーコードでコスパ最強のMagicPodはおすすめです • ブラウザ上でポチポチするだけでテスト作成で きるのは楽 • エンジニア以外でもメンテナンスできそう •
コスパがいい
さいごに
エンジニア積極採用中!! 不動産DX業界で急成長中のスタートアップ BluAgeで一緒に働きませんか?
エンジニア積極採用中!! YAMADA HLDGS.との総額約10億円の資本業務提携を締結 これまでにない新しいお部屋探しを作り上げていく仲間を募集中です! 出資 カナリーPFにおけるシナジー創出 出資 DX支援
エンジニア積極採用中!! Meetyでカジュアルにお話ししませんか?
エンジニア積極採用中!! Meetyでカジュアルにお話ししませんか?
ご清聴ありがとうございました