Twilioを使用してReactNativeでビデオコンサルティングヘルスケアアプリを作成する方法！

公開: 2022-04-20

mHealthアプリの導入以来、医療機関は患者と医師との関わり方に大きな変化を目の当たりにしてきました。 現在、患者は自分の医学的決定をより細かく制御でき、システム全体がより患者中心になっています。 このため、さまざまなmHealthアプリが市場に登場しており、ビデオ相談ヘルスケアアプリはそのような革新の1つです。 このアプリは、緊急時や病院に行くことができない場合に、患者と医師が即座にコミュニケーションをとることを可能にします。 医師はePrescriptionsをオンラインで送信し、医療支援を提供できます。 したがって、ビデオ通話機能を備えたオンライン医療相談アプリを用意することは、あらゆる医療機関や個人開業医にとっても常に有利な決定となる可能性があります。

したがって、今日のトピックは、ビデオ相談ヘルスケアアプリの作成についてです。 React Native開発サービスは、ネイティブのようなクロスプラットフォームアプリを開発するのに最適な選択肢であるため、この目的のためにReactNativeフレームワークを検討します。 また、ビデオ通話アプリで広く使用されているクラウド通信プラットフォームとしてのTwilioについても説明します。 Twilioとは何か、そしてアプリを作成するプロセスから始めましょう。

Twilioとは何ですか？

Twilioは、アメリカのクラウドベースのサービスまたはサービスとしてのクラウド通信プラットフォーム（CPaaS）です。 強力なコミュニケーションツールとして機能し、さまざまなモバイルデバイス、他のシステム、サービスなどとテレフォニーの間のギャップを埋めます。 React Native開発では、Twilioが提供するAPIにより、開発者は音声/ビデオ電話の発着信、テキストメッセージの送受信など、いくつかの通信サービスを実装できます。これらのサービスには、AIボット、電子メールなども含まれます。このプロセスでは、オーディオ/ビデオ通話に加えて、アカウントの回復、電話の確認、アプリ内通話、アプリ内チャットなどの他の機能も利用できます。

Twilioをアプリに統合するには、React Native開発者は、Cocoapods、React Native Navigation、Reactなどに関する既存の知識が必要になります。Twilio

Twilioを使用する主なメリットは次のとおりです。

  • Twilioは非常に簡単に習得できるため、多数の開発者が利用できます。
  • これは、標準の通信方法であるHTTPに従います。
  • テクノロジー間の切り替えもはるかに簡単です。
  • Platforms as a Service（PaaS）のおかげで、資本コストはやや低くなります。 導入コストも低く、会社の成長とともに徐々に増加します。

TwilioWebRTCを使用してビデオコンサルティングでReactNativeHealthcareアプリを作成するための重要な手順

ヘルスケアビデオ通話アプリにTwilioWebRTCを使用している間、Re​​act Nativeアプリ開発会社は、以下に示す手順に従う必要があります。 この手順は2つの主要な部分に分かれており、最初の部分ではTwilioを使用してトークンを生成し、2番目の部分ではReactNativeスターターキットを使用して依存関係をインストールします。 また、今のところReactNativeAndroidアプリを検討します。 それでは、最初の部分から始めましょう。

パート1：Twilioを使用したトークン生成

Twilioは、IOS /AndroidSDKとJavaScriptの両方を提供します。 ただし、React Nativeの場合、Twilioは直接サポートを提供しません。 そのため、ReactNativeの開発者はJavaScriptSDKをいくつかのサービスに使用できますが、他のサービスでは使用できません。これは、ブラウザーAPIに大きく依存しているためです。 もう1つの選択肢があります。それは、ネイティブのAndroid /IOSSDKをReactNativeに移植することです。 そこで、ここでは、この組み合わせを使用しました：ReactNative用のTwilioVideo（WebRTC）。

まず、https：//www.twilio.com/でアカウントを作成します。 試用版にサインアップして、電話番号、電子メールなどの資格情報を確認します。これで、ダッシュボードに移動します。

トークンを生成するには、APIキーとシークレットキーとともにアカウントSIDが必要になります。 APIキーを生成するには、設定からAPIキーに移動します。 ここでAPIキーを作成すると、シークレットキーとAPIキーの両方が提供されます。 npmパッケージを使用するnpminstallを使用してトークンを生成できるようになりました。 トークンは、複数の言語で生成することもできます。 同じトークンを異なる場所で使用することはできないため、ID値はトークンごとに変更する必要があります。

Twilioツールを使用してトークンを作成するもう1つの方法があります。 Twilioツールをクリックして、IDと部屋の名前を入力します。 これにより、アクセストークンが生成されます。 これらのキーは、後の部分のために安全に保存してください。

ビデオコンサルテーションヘルスケアアプリのTwilio部分はここで終了します。 それでは、ReactNative開発の部分から始めましょう。

パート2：React NativeStarterKitを使用した依存関係のインストール

ここでは、GitHubリンク（https://github.com/flatlogic/react-native-starter）からコピーできるReactNativeスターターキットを使用します。 ターミナルプロジェクトディレクトリでコマンド「npminstallhttps：//github.com/blackuy/react-native-twilio-video-webrtc –save」を実行してから、必要なコードをApp.jsファイルに書き込む必要があります。

プロジェクトディレクトリでコマンド「npminstall」を実行して、必要なすべての依存関係がインストールされていることを確認してください。 また、Twilioを利用するためのいくつかの構成を作成し、オーディオ、カメラなども使用する必要があります。

goto Androidフォルダーを作成するには、settings.gradleファイルに次のコード行を追加する必要があります-

'：react-native-twilio-video-webrtc'を含める

プロジェクト（'：react-native-twilio-video-webrtc'）。projectDir = new File（rootProject.projectDir、'../node_modules/react-native-twilio-video-webrtc/android'）

次に、Android> app> build.gradleファイルに移動し、依存関係を検索します。 その後、以下のコードをブロックに追加します。

プロジェクトをコンパイルします（'：react-native-twilio-video-webrtc'）

また、Android> app> SRC> main> JAVA> com>reactnativestarter>MainApplication.javaに以下のコードを追加します

インポートcom.twiliorn.library.TwilioPackage;

この後、getPackages（）メソッドを必要なコードに置き換えます。

ここで、ユーザーに権限を要求するには、このファイルに必要なコードを追加してAndroidManifest.xmlを変更することが不可欠です。 また、Twilioアカウントで、クライアント側の部屋の作成が有効になっていることを確認してください。

アプリケーションの実行

最後に、すべてのステップが実装され、コードが実行されたら、ターミナルウィンドウからコマンド「react-nativerun-android」を実行して、ReactNativeヘルスケアアプリを実行します。

最終評決

ここでは、Twilioのビデオ通話機能を示すためのシンプルなReactNativeアプリを開発しました。 ただし、ユーザー接続、ユーザーアクセストークンの生成、ルームの作成など、いくつかのことをバックエンドで非常に注意深く処理する必要があることを覚えておく必要があります。

上記のように、React NativeでTwilioを実装したビデオコンサルティングヘルスケアアプリを開発しますか？ 前述の手順がReactNative開発者に役立つことを願っています。 カスタマイズされたドクターオンデマンドビデオコンサルテーションヘルスケアアプリの作成に関する技術支援については、このドメインで11年以上の経験を持つ非常に熟練したヘルスケアアプリ開発会社であるBiz4Solutionsにお問い合わせください。