Como criar um aplicativo de videoconsulta de saúde em React Native usando o Twilio!

Publicados: 2022-04-20

Desde a introdução dos aplicativos mHealth, as organizações de saúde testemunharam uma mudança radical na maneira como os pacientes se relacionam com os médicos. Agora, os pacientes têm mais controle sobre suas decisões médicas e o sistema geral se tornou mais centrado no paciente. Devido a isso, uma variedade de aplicativos mHealth surgiram no mercado e um aplicativo de saúde de consulta por vídeo é uma dessas inovações. Este aplicativo permite que pacientes e médicos se comuniquem instantaneamente em caso de emergência ou quando não for possível visitar o hospital. Os médicos podem enviar prescrições eletrônicas on-line e fornecer assistência médica. Assim, ter um App de Consulta Médica Online com recurso de videochamada pode ser sempre uma decisão lucrativa para qualquer corpo médico ou mesmo para um profissional individual.

Então, o tópico de hoje é sobre como criar um aplicativo de saúde de consulta por vídeo. Consideraremos a estrutura React Native para essa finalidade, pois os serviços de desenvolvimento React Native são uma escolha perfeita para desenvolver aplicativos multiplataforma semelhantes a nativos. Além disso, falaremos sobre o Twilio como uma plataforma de comunicações em nuvem que está sendo amplamente utilizada em aplicativos de videochamadas. Vamos começar com o que é o Twilio e, em seguida, o processo de criação do aplicativo.

O que é Twilio?

Twilio é um serviço americano baseado em nuvem ou plataforma de comunicações em nuvem como serviço (CPaaS). Ele atua como uma poderosa ferramenta de comunicação e preenche a lacuna entre vários dispositivos móveis, outros sistemas, serviços, etc., e telefonia. No desenvolvimento React Native, as APIs oferecidas pelo Twilio permitem que os desenvolvedores implementem vários serviços de comunicação como fazer e receber chamadas telefônicas de áudio/vídeo, enviar e receber mensagens de texto, etc. Esses serviços também incluem bots de IA, e-mails, etc. Nesse processo, além de chamadas de áudio/vídeo, outros recursos como recuperação de conta, verificação de telefone, chamadas no aplicativo ou bate-papos no aplicativo, etc., também podem ser trabalhados.

Para integrar o Twilio ao aplicativo, os desenvolvedores do React Native precisarão do conhecimento existente sobre Cocoapods, React Native Navigation, React, etc. Twilio

Aqui estão alguns dos principais benefícios de usar o Twilio

  • O Twilio é bastante fácil de aprender e, portanto, há uma infinidade de desenvolvedores disponíveis.
  • Segue um método padrão de comunicação: HTTP.
  • Alternar entre tecnologias também é muito mais fácil.
  • Devido às Plataformas como Serviço (PaaS), os custos de capital são um pouco menores. Até os custos de implantação são menores e aumentam gradativamente à medida que a empresa cresce.

Principais etapas para criar um aplicativo React Native Healthcare com consulta de vídeo usando o Twilio WebRTC

Ao usar o Twilio WebRTC para o aplicativo de videochamada de saúde, uma empresa de desenvolvimento de aplicativos React Native deve seguir o procedimento passo a passo conforme indicado abaixo. Este procedimento é dividido em duas partes principais, onde a primeira parte é sobre como gerar um token usando o Twilio e a segunda parte fala sobre a instalação de dependências usando um kit inicial React Native. Além disso, consideraremos um aplicativo Android React Native por enquanto. Então vamos começar com a primeira parte.

Parte 1: Geração de Tokens com Twilio

Twilio fornece SDKs para IOS/Android e JavaScript. Mas para o React Native, o Twilio não fornece nenhum suporte direto. Assim, os desenvolvedores do React Native podem usar o SDK do JavaScript para alguns serviços, mas isso não é possível para outros serviços, porque em grande parte depende das APIs do navegador. Existe mais uma alternativa e seria portar o SDK nativo do Android/IOS para o React Native. Então aqui, usamos esta combinação: Twilio Video (WebRTC) para React Native.

Em primeiro lugar, crie uma conta em https://www.twilio.com/. Inscreva-se para uma avaliação e verifique suas credenciais, como número de telefone, e-mail, etc. Agora você será direcionado para o Dashboard.

Você precisará de um SID da conta junto com uma chave de API e uma chave secreta para gerar um token. Para gerar uma chave de API, navegue até as chaves de API por meio das configurações. A criação da chave de API aqui fornecerá a chave secreta e a chave de API. Agora é possível gerar um token usando npm install que usa o pacote npm. Os tokens também podem ser gerados em vários idiomas. O valor de identidade deve ser alterado para cada token, pois o mesmo token não pode ser usado em locais diferentes.

Existe mais uma maneira de criar um token usando as ferramentas Twilio. Clique nas ferramentas Twilio e escreva uma identidade e um nome de sala. Isso gerará o token de acesso. Salve essas chaves com segurança para a parte posterior.

A parte Twilio do aplicativo de saúde de consulta por vídeo termina aqui. Agora vamos começar com a parte de desenvolvimento do React Native.

Parte 2: Instalando dependências usando um Starter Kit React Native

Aqui estaremos usando o kit inicial do React Native que pode ser copiado do link do GitHub — https://github.com/flatlogic/react-native-starter. Você precisa executar o comando- “npm install https://github.com/blackuy/react-native-twilio-video-webrtc –save” no diretório do projeto do terminal e, em seguida, escrever o código necessário no arquivo App.js.

Certifique-se de que todas as dependências necessárias estejam instaladas pela execução do comando- “npm install” no diretório do projeto. Além disso, você precisa fazer algumas configurações para utilizar o Twilio e também usar áudio, câmera, etc.

Para criar a pasta goto Android, você deve adicionar as seguintes linhas de código no arquivo settings.gradle-

inclua ':react-native-twilio-video-webrtc'

projeto (':react-native-twilio-video-webrtc').projectDir = novo arquivo (rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

Agora, vá para Android > app > arquivo build.gradle e procure por dependências. Depois disso, adicione o código abaixo mencionado no bloco.

compilar projeto (':react-native-twilio-video-webrtc')

Além disso, adicione o código abaixo mencionado em Android> app>SRC> main>JAVA> com> reactnativestarter> MainApplication.java

import com.twiliorn.library.TwilioPackage;

Depois disso, substitua o método getPackages() pelo código necessário.

Agora para solicitar as permissões do usuário, é essencial modificar o AndroidManifest.xml adicionando o código necessário neste arquivo. Certifique-se também de que em sua conta Twilio, a criação de salas do lado do cliente esteja habilitada.

Executando o Aplicativo

Finalmente, quando todas as etapas forem implementadas e o código for executado, execute seu aplicativo de saúde React Native executando o comando "react-native run-android" na janela do terminal.

Veredicto Final

Aqui desenvolvemos um aplicativo React Native simples para demonstrar a capacidade de videochamada do Twilio. Mas só precisamos lembrar que algumas coisas como conexões de usuários, geração de tokens de acesso de usuários, criação de salas, etc. devem ser tratadas com muito cuidado no backend.

Você gostaria de desenvolver um aplicativo de saúde de consulta por vídeo com implementação do Twilio em React Native, conforme descrito acima? Esperamos que as etapas mencionadas sejam úteis para os desenvolvedores React Native. Para qualquer assistência técnica na criação de um aplicativo de saúde de consulta de vídeo personalizado sob demanda, entre em contato com a Biz4Solutions, uma empresa de desenvolvimento de aplicativos de saúde altamente proficiente com mais de 11 anos de experiência neste domínio.