Twilio를 사용하여 React Native에서 비디오 상담 의료 앱을 만드는 방법!

게시 됨: 2022-04-20

mHealth 앱의 도입 이후 의료 기관은 환자가 의사와 관계를 맺는 방식에 큰 변화를 가져왔습니다. 이제 환자는 의학적 결정에 대해 더 많은 통제권을 갖게 되었고 전반적인 시스템은 더 환자 중심적이 되었습니다. 이에 따라 다양한 모바일 헬스 앱이 시장에 등장했고 영상상담 헬스케어 앱이 그 혁신 중 하나다. 이 앱을 사용하면 응급 상황이나 병원 방문이 불가능한 경우 환자와 의사가 즉시 의사 소통할 수 있습니다. 의사는 온라인으로 ePrescription을 보내고 의료 지원을 제공할 수 있습니다. 따라서 화상 통화 시설이 있는 온라인 의료 상담 앱을 보유하는 것은 의료 기관이나 개별 개업의에게 항상 유리한 결정이 될 수 있습니다.

그래서 오늘의 주제는 영상상담 헬스케어 앱을 만드는 것입니다. React Native 개발 서비스는 네이티브와 유사한 크로스 플랫폼 앱을 개발하기 위한 완벽한 선택이기 때문에 이 목적을 위해 React Native 프레임워크를 고려할 것입니다. 또한 화상 통화 앱에서 널리 사용되고 있는 클라우드 커뮤니케이션 플랫폼인 Twilio에 대해서도 이야기하겠습니다. Twilio가 무엇인지 시작한 다음 앱을 만드는 프로세스를 살펴보겠습니다.

트윌리오란?

Twilio는 미국의 클라우드 기반 서비스 또는 CPaaS(Cloud Communications Platform as a Service)입니다. 강력한 통신 도구 역할을 하며 다양한 모바일 장치, 기타 시스템, 서비스 등과 전화 통신 간의 격차를 해소합니다. React Native 개발에서 Twilio에서 제공하는 API를 통해 개발자는 음성/화상 전화 걸기 및 받기, 문자 메시지 보내기 및 받기 등과 같은 여러 통신 서비스를 구현할 수 있습니다. 이러한 서비스에는 AI 봇, 이메일 등이 포함됩니다. 이 프로세스에서 음성/영상 통화 외에도 계정 복구, 전화 인증, 인앱 통화 또는 인앱 채팅 등과 같은 다른 기능도 사용할 수 있습니다.

Twilio를 앱에 통합하려면 React Native 개발자는 Cocoapods, React Native Navigation, React 등에 대한 기존 지식이 필요합니다. Twilio

다음은 Twilio 사용의 몇 가지 주요 이점입니다.

  • Twilio는 배우기 매우 쉽기 때문에 사용할 수 있는 개발자가 너무 많습니다.
  • 표준 통신 방법인 HTTP를 따릅니다.
  • 기술 간 전환도 훨씬 쉽습니다.
  • PaaS(Platform as a Service) 덕분에 자본 비용이 다소 낮습니다. 배포 비용도 더 낮고 회사가 성장함에 따라 점진적으로 증가합니다.

Twilio WebRTC를 사용하여 화상 상담으로 React Native Healthcare 앱을 만들기 위한 주요 단계

의료 영상 통화 앱에 Twilio WebRTC를 사용하는 동안 React Native 앱 개발 회사는 다음과 같은 단계별 절차를 따라야 합니다. 이 절차는 Twilio를 사용하여 토큰을 생성하는 첫 번째 부분과 React Native 스타터 키트를 사용하여 종속성을 설치하는 방법에 대한 두 가지 주요 부분으로 나뉩니다. 또한 지금은 React Native Android 앱을 고려할 것입니다. 그럼 첫 번째 부분부터 시작해 보겠습니다.

1부: Twilio를 사용한 토큰 생성

Twilio는 IOS/Android SDK와 JavaScript를 모두 제공합니다. 그러나 React Native의 경우 Twilio는 직접적인 지원을 제공하지 않습니다. 따라서 React Native 개발자는 몇 가지 서비스에 JavaScript SDK를 사용할 수 있지만 다른 서비스에는 사용할 수 없습니다. 브라우저 API에 크게 의존하기 때문입니다. 네이티브 Android/IOS SDK를 React Native로 이식하는 방법이 하나 더 있습니다. 그래서 여기에서는 React Native용 Twilio Video(WebRTC)라는 조합을 사용했습니다.

먼저 https://www.twilio.com/에서 계정을 만듭니다. 평가판에 등록하고 전화번호, 이메일 등과 같은 자격 증명을 확인하십시오. 이제 대시보드로 이동됩니다.

토큰을 생성하려면 API 키 및 비밀 키와 함께 ACCOUNT SID가 필요합니다. API 키를 생성하려면 설정을 통해 API 키로 이동하십시오. 여기서 API 키를 생성하면 비밀 키와 API 키가 모두 제공됩니다. 이제 npm 패키지를 사용하는 npm install을 사용하여 토큰을 생성할 수 있습니다. 토큰은 또한 여러 언어로 생성될 수도 있습니다. 동일한 토큰을 다른 위치에서 사용할 수 없으므로 모든 토큰에 대해 ID 값을 변경해야 합니다.

Twilio 도구를 사용하여 토큰을 만드는 또 다른 방법이 있습니다. Twilio 도구를 클릭하고 ID와 방 이름을 작성하십시오. 그러면 액세스 토큰이 생성됩니다. 나중을 위해 이 키를 안전하게 저장하십시오.

영상상담 헬스케어 앱의 Twilio 부분은 여기서 끝입니다. 이제 React Native 개발 부분부터 시작하겠습니다.

2부: React Native Starter Kit를 사용하여 종속성 설치하기

여기에서는 GitHub 링크(https://github.com/flatlogic/react-native-starter)에서 복사할 수 있는 React Native 스타터 키트를 사용할 것입니다. 터미널 프로젝트 디렉터리에서 "npm install https://github.com/blackuy/react-native-twilio-video-webrtc –save" 명령을 실행한 다음 App.js 파일에 필요한 코드를 작성해야 합니다.

프로젝트 디렉토리에서 "npm install" 명령을 실행하여 필요한 모든 종속성이 설치되었는지 확인합니다. 또한 Twilio를 활용하기 위한 몇 가지 설정을 해야 하며 오디오, 카메라 등을 사용하기도 합니다.

goto Android 폴더를 만들려면 settings.gradle 파일에 다음 코드 줄을 추가해야 합니다.

':react-native-twilio-video-webrtc' 포함

프로젝트(':react-native-twilio-video-webrtc').projectDir = 새 파일(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

이제 Android > 앱 > build.gradle 파일로 이동하여 종속성을 검색합니다. 그런 다음 블록에 아래 언급된 코드를 추가합니다.

컴파일 프로젝트(':react-native-twilio-video-webrtc')

그리고 안드로이드 > 앱 > SRC > 메인 > JAVA > com > reactnativestarter > MainApplication.java 에 아래 코드를 추가해주세요.

가져오기 com.twiliorn.library.TwilioPackage;

그런 다음 getPackages() 메서드를 필요한 코드로 바꿉니다.

이제 사용자에게 권한을 요청하려면 이 파일에 필요한 코드를 추가하여 AndroidManifest.xml을 수정하는 것이 필수적입니다. 또한 Twilio 계정에서 클라이언트 측 회의실 생성이 활성화되어 있는지 확인합니다.

애플리케이션 실행

마지막으로 모든 단계가 구현되고 코드가 실행되면 터미널 창에서 "react-native run-android" 명령을 실행하여 React Native 의료 앱을 실행합니다.

최종 평결

여기에서 Twilio의 화상 통화 기능을 보여주기 위해 간단한 React Native 앱을 개발했습니다. 그러나 우리는 사용자 연결, 사용자 액세스 토큰 생성, 방 생성 등과 같은 몇 가지 사항을 백엔드에서 매우 부지런히 처리해야 한다는 점을 기억해야 합니다.

위에 설명된 대로 React Native에서 Twilio 구현을 사용하여 비디오 상담 의료 앱을 개발하시겠습니까? 앞서 말한 단계가 React Native 개발자에게 도움이 되기를 바랍니다. 맞춤형 의사 주문형 비디오 상담 의료 앱을 만드는 데 기술 지원이 필요한 경우 이 영역에서 11년 이상의 경험을 가진 고도로 숙련된 의료 앱 개발 회사인 Biz4Solutions에 문의하십시오.