Cara membuat Aplikasi Konsultasi Kesehatan Video di React Native Menggunakan Twilio!

Diterbitkan: 2022-04-20

Sejak diperkenalkannya aplikasi mHealth, organisasi layanan kesehatan telah menyaksikan perubahan besar dalam cara pasien berhubungan dengan dokter. Sekarang pasien memiliki kendali lebih besar atas keputusan medis mereka dan sistem secara keseluruhan menjadi lebih berpusat pada pasien. Karena ini, berbagai aplikasi mHealth telah muncul di pasar dan aplikasi layanan kesehatan konsultasi video adalah salah satu inovasi tersebut. Aplikasi ini memungkinkan pasien dan dokter untuk berkomunikasi secara instan dalam keadaan darurat atau ketika tidak mungkin untuk mengunjungi rumah sakit. Para dokter dapat mengirimkan ePrescriptions secara online dan memberikan bantuan medis. Jadi, memiliki Aplikasi Konsultasi Medis Online dengan fasilitas panggilan video selalu dapat menjadi keputusan yang menguntungkan bagi badan medis mana pun atau bahkan praktisi individu.

Jadi, topik hari ini adalah tentang membuat aplikasi konsultasi kesehatan video. Kami akan mempertimbangkan kerangka kerja React Native untuk tujuan ini karena layanan pengembangan React Native adalah pilihan yang sempurna untuk mengembangkan aplikasi lintas platform seperti native. Juga, kita akan berbicara tentang Twilio sebagai platform komunikasi cloud yang banyak digunakan dalam aplikasi panggilan video. Mari kita mulai dengan apa itu Twilio dan kemudian proses pembuatan aplikasinya.

Apa itu Twilio?

Twilio adalah layanan berbasis cloud Amerika atau platform komunikasi cloud sebagai layanan (CPaaS). Ini bertindak sebagai alat komunikasi yang kuat dan menjembatani kesenjangan antara berbagai perangkat seluler, sistem lain, layanan, dll., dan telepon. Dalam pengembangan React Native, API yang ditawarkan oleh Twilio memungkinkan pengembang untuk mengimplementasikan beberapa layanan komunikasi seperti membuat dan menerima panggilan telepon audio/video, mengirim dan menerima pesan teks, dll. Layanan ini juga mencakup bot AI, email, dll. Dalam proses ini, selain panggilan audio/video, fitur lain seperti pemulihan akun, verifikasi telepon, panggilan dalam aplikasi atau obrolan dalam aplikasi, dll. juga dapat dikerjakan.

Untuk mengintegrasikan Twilio ke dalam aplikasi, pengembang React Native akan membutuhkan pengetahuan yang ada tentang Cocoapods, React Native Navigation, React, dll. Twilio

Berikut adalah beberapa manfaat utama menggunakan Twilio

  • Twilio cukup mudah dipelajari dan ada banyak pengembang yang tersedia.
  • Ini mengikuti metode komunikasi standar: HTTP.
  • Beralih antar teknologi juga jauh lebih mudah.
  • Karena Platform sebagai Layanan (PaaS), biaya modal agak lebih rendah. Bahkan biaya penerapan lebih rendah dan meningkat secara bertahap seiring pertumbuhan perusahaan.

Langkah-Langkah Utama untuk Membuat Aplikasi Perawatan Kesehatan Asli React dengan Konsultasi Video menggunakan Twilio WebRTC

Saat menggunakan Twilio WebRTC untuk aplikasi panggilan video perawatan kesehatan, perusahaan pengembang aplikasi React Native harus mengikuti prosedur langkah demi langkah seperti yang diberikan di bawah ini. Prosedur ini dibagi menjadi dua bagian utama di mana bagian pertama adalah tentang menghasilkan token menggunakan Twilio dan bagian kedua berbicara tentang menginstal dependensi menggunakan starter kit React Native. Juga, kami akan mempertimbangkan aplikasi React Native Android untuk saat ini. Jadi mari kita mulai dengan bagian pertama.

Bagian 1: Pembuatan Token dengan Twilio

Twilio menyediakan SDK iOS/Android dan JavaScript. Namun untuk React Native, Twilio tidak memberikan dukungan langsung apapun. Jadi, pengembang React Native dapat menggunakan JavaScript SDK untuk beberapa layanan tetapi ini tidak mungkin untuk layanan lain, karena sebagian besar bergantung pada API browser. Ada satu alternatif lagi dan itu adalah dengan mem-porting SDK Android/IOS asli ke React Native. Jadi di sini, kami telah menggunakan kombinasi ini: Twilio Video (WebRTC) untuk React Native.

Pertama, buat akun di https://www.twilio.com/. Daftar untuk uji coba dan verifikasi kredensial Anda seperti nomor telepon, email, dll. Sekarang Anda akan diarahkan ke Dasbor.

Anda akan memerlukan ACCOUNT SID bersama dengan kunci API dan kunci Rahasia untuk membuat token. Untuk membuat kunci API, navigasikan ke kunci API melalui pengaturan. Pembuatan kunci API di sini akan memberikan kunci Rahasia dan kunci API. Sekarang dimungkinkan untuk menghasilkan token dengan menggunakan npm install yang menggunakan paket npm. Token juga dapat dibuat dalam berbagai bahasa. Nilai identitas harus diubah untuk setiap token karena token yang sama tidak dapat digunakan di tempat yang berbeda.

Ada satu cara lagi untuk membuat token dengan menggunakan alat Twilio. Klik alat Twilio dan tulis identitas dan nama ruangan. Ini akan menghasilkan token akses. Simpan kunci ini dengan aman untuk bagian selanjutnya.

Bagian Twilio dari aplikasi layanan kesehatan konsultasi video berakhir di sini. Sekarang mari kita mulai dengan bagian pengembangan React Native.

Bagian 2: Menginstal Dependensi menggunakan React Native Starter Kit

Di sini kita akan menggunakan starter kit React Native yang dapat disalin dari tautan GitHub — https://github.com/flatlogic/react-native-starter. Anda perlu menjalankan perintah- “npm install https://github.com/blackuy/react-native-twilio-video-webrtc –save” di direktori proyek terminal dan kemudian tulis kode yang diperlukan di file App.js.

Pastikan bahwa semua dependensi yang diperlukan telah diinstal dengan menjalankan perintah- “npm install” di direktori proyek. Juga, Anda perlu membuat beberapa konfigurasi untuk menggunakan Twilio dan juga menggunakan audio, kamera, dll.

Untuk membuat folder goto Android, Anda harus menambahkan baris kode berikut di file settings.gradle-

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

project (':react-native-twilio-video-webrtc').projectDir = File baru (rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

Sekarang, buka Android > app > file build.gradle dan cari dependensi. Setelah itu, tambahkan kode yang disebutkan di bawah ini di blok.

kompilasi proyek (':react-native-twilio-video-webrtc')

Juga, tambahkan kode yang disebutkan di bawah ini di Android > app >SRC> main >JAVA> com > reactnativestarter > MainApplication.java

impor com.twiliorn.library.TwilioPackage;

Setelah ini, ganti metode getPackages() dengan kode yang diperlukan.

Sekarang untuk meminta izin dari pengguna, penting untuk memodifikasi AndroidManifest.xml dengan menambahkan kode yang diperlukan dalam file ini. Pastikan juga bahwa di akun Twilio Anda, pembuatan ruang sisi klien diaktifkan.

Menjalankan Aplikasi

Terakhir, ketika semua langkah diimplementasikan dan kode dijalankan, jalankan aplikasi perawatan kesehatan React Native Anda dengan menjalankan perintah- “react-native run-android” dari jendela terminal.

Putusan Akhir

Di sini kami telah mengembangkan aplikasi React Native sederhana untuk mendemonstrasikan kemampuan panggilan video Twilio. Tetapi kita hanya perlu mengingat bahwa beberapa hal seperti koneksi pengguna, pembuatan token akses pengguna, pembuatan ruang, dll. harus ditangani dengan sangat hati-hati di backend.

Apakah Anda ingin mengembangkan aplikasi kesehatan Konsultasi Video dengan implementasi Twilio di React Native seperti yang dijelaskan di atas? Kami berharap langkah-langkah di atas akan membantu pengembang React Native. Untuk bantuan teknis apa pun dalam membuat aplikasi perawatan kesehatan konsultasi video berdasarkan permintaan yang disesuaikan, Hubungi Biz4Solutions, perusahaan pengembangan aplikasi Perawatan Kesehatan yang sangat mahir dengan 11+ tahun pengalaman dalam domain ini.