วิธีสร้างแอป Video Consultation Healthcare App ใน React Native โดยใช้ Twilio!

เผยแพร่แล้ว: 2022-04-20

นับตั้งแต่เปิดตัวแอพ mHealth องค์กรด้านการดูแลสุขภาพได้เห็นการเปลี่ยนแปลงในวิธีที่ผู้ป่วยมีความสัมพันธ์กับแพทย์ ขณะนี้ผู้ป่วยสามารถควบคุมการตัดสินใจทางการแพทย์ของตนเองได้มากขึ้น และระบบโดยรวมได้กลายเป็นที่ยึดผู้ป่วยเป็นศูนย์กลางมากขึ้น ด้วยเหตุนี้ แอป mHealth ที่หลากหลายจึงได้ออกสู่ตลาด และแอปวิดีโอให้คำปรึกษาด้านการดูแลสุขภาพก็เป็นหนึ่งในนวัตกรรมดังกล่าว แอพนี้ช่วยให้ผู้ป่วยและแพทย์สามารถสื่อสารได้ทันทีในกรณีฉุกเฉินหรือเมื่อไม่สามารถไปโรงพยาบาลได้ แพทย์สามารถส่ง ePrescriptions ทางออนไลน์และให้ความช่วยเหลือทางการแพทย์ได้ ดังนั้นการมีแอพให้คำปรึกษาทางการแพทย์ออนไลน์พร้อมสิ่งอำนวยความสะดวกในการโทรผ่านวิดีโออาจเป็นการตัดสินใจที่ร่ำรวยสำหรับหน่วยงานทางการแพทย์หรือแม้แต่ผู้ประกอบวิชาชีพรายบุคคล

หัวข้อของวันนี้คือการสร้างแอปวิดีโอให้คำปรึกษาด้านการดูแลสุขภาพ เราจะพิจารณาเฟรมเวิร์ก React Native เพื่อจุดประสงค์นี้เนื่องจากบริการพัฒนา React Native เป็นตัวเลือกที่สมบูรณ์แบบสำหรับการพัฒนาแอปข้ามแพลตฟอร์มที่เหมือนเนทีฟ นอกจากนี้ เราจะพูดถึง Twilio ในฐานะแพลตฟอร์มการสื่อสารบนคลาวด์ที่ใช้กันอย่างแพร่หลายในแอพวิดีโอคอล มาเริ่มกันเลยดีกว่าว่า Twilio คืออะไร และจากนั้นขั้นตอนการสร้างแอป

Twilio คืออะไร?

Twilio เป็นบริการบนคลาวด์ของอเมริกาหรือแพลตฟอร์มการสื่อสารบนคลาวด์ในฐานะบริการ (CPaaS) มันทำหน้าที่เป็นเครื่องมือสื่อสารที่ทรงพลังและเชื่อมช่องว่างระหว่างอุปกรณ์มือถือต่างๆ ระบบอื่นๆ บริการ ฯลฯ และระบบโทรศัพท์ ในการพัฒนา React Native API ที่นำเสนอโดย Twilio ช่วยให้นักพัฒนาสามารถใช้บริการด้านการสื่อสารหลายอย่าง เช่น การโทรออกและรับสายโทรศัพท์ด้วยเสียง/วิดีโอ การส่งและรับข้อความ ฯลฯ บริการเหล่านี้ยังรวมถึงบอท AI, อีเมล ฯลฯ ในขั้นตอนนี้ นอกจากการโทรด้วยเสียง/วิดีโอแล้ว ฟีเจอร์อื่นๆ เช่น การกู้คืนบัญชี การยืนยันทางโทรศัพท์ การโทรในแอปหรือการแชทในแอป ฯลฯ ก็สามารถทำงานได้เช่นกัน

ในการรวม Twilio เข้ากับแอป นักพัฒนา React Native จะต้องมีความรู้ที่มีอยู่เกี่ยวกับ Cocoapods, React Native Navigation, React เป็นต้น Twilio

นี่คือประโยชน์บางประการของการใช้ Twilio

  • Twilio นั้นค่อนข้างง่ายต่อการเรียนรู้ ดังนั้นจึงมีนักพัฒนามากมายเหลือเฟือ
  • เป็นไปตามวิธีการสื่อสารมาตรฐาน: HTTP
  • การสลับระหว่างเทคโนโลยีก็ง่ายกว่ามากเช่นกัน
  • เนื่องจาก Platforms as a Service (PaaS) ต้นทุนเงินทุนจึงค่อนข้างต่ำกว่า แม้แต่ค่าใช้จ่ายในการปรับใช้ก็ลดลงและค่อยๆ เพิ่มขึ้นเมื่อบริษัทเติบโตขึ้น

ขั้นตอนสำคัญสำหรับการสร้างแอป React Native Healthcare พร้อมให้คำปรึกษาทางวิดีโอโดยใช้ Twilio WebRTC

ในขณะที่ใช้ Twilio WebRTC สำหรับแอปวิดีโอคอลด้านการดูแลสุขภาพ บริษัทพัฒนาแอป React Native ควรทำตามขั้นตอนทีละขั้นตอนตามที่ระบุด้านล่าง ขั้นตอนนี้แบ่งออกเป็นสองส่วนหลัก โดยส่วนแรกเป็นเรื่องเกี่ยวกับการสร้างโทเค็นโดยใช้ Twilio และส่วนที่สองพูดถึงการติดตั้งการพึ่งพาโดยใช้ React Native starter kit นอกจากนี้ เราจะพิจารณาแอป React Native Android ในตอนนี้ มาเริ่มกันที่ส่วนแรกกันเลย

ส่วนที่ 1: การสร้างโทเค็นด้วย Twilio

Twilio มีทั้ง IOS/Android SDK และ JavaScript แต่สำหรับ React Native Twilio ไม่ได้ให้การสนับสนุนโดยตรง ดังนั้น นักพัฒนา React Native สามารถใช้ JavaScript SDK สำหรับบริการบางอย่างได้ แต่สิ่งนี้ไม่สามารถทำได้สำหรับบริการอื่น ๆ เนื่องจากขึ้นอยู่กับขอบเขตที่ดี APIs ของเบราว์เซอร์ มีทางเลือกอื่นอีกทางหนึ่ง ซึ่งก็คือการย้ายพอร์ต Android/IOS SDK ดั้งเดิมไปยัง React Native ดังนั้น เราได้ใช้ชุดค่าผสมนี้: Twilio Video (WebRTC) สำหรับ React Native

ขั้นแรก สร้างบัญชีบน https://www.twilio.com/ ลงทะเบียนเพื่อทดลองใช้งานและยืนยันข้อมูลประจำตัวของคุณ เช่น หมายเลขโทรศัพท์ อีเมล ฯลฯ ตอนนี้คุณจะถูกนำไปที่แดชบอร์ด

คุณจะต้องมีบัญชี SID พร้อมกับคีย์ API และรหัสลับเพื่อสร้างโทเค็น สำหรับการสร้างคีย์ API ให้ไปที่คีย์ API ผ่านการตั้งค่า การสร้างคีย์ API ที่นี่จะให้ทั้งคีย์ลับและคีย์ API ขณะนี้สามารถสร้างโทเค็นได้โดยใช้การติดตั้ง npm ซึ่งใช้แพ็คเกจ npm โทเค็นสามารถสร้างได้ในหลายภาษาเช่นกัน ควรเปลี่ยนค่าเอกลักษณ์สำหรับทุกโทเค็น เนื่องจากไม่สามารถใช้โทเค็นเดียวกันในสถานที่ต่างกันได้

มีอีกวิธีหนึ่งในการสร้างโทเค็นโดยใช้เครื่องมือ Twilio คลิกที่เครื่องมือ Twilio แล้วเขียนข้อมูลระบุตัวตนและชื่อห้อง สิ่งนี้จะสร้างโทเค็นการเข้าถึง บันทึกคีย์เหล่านี้อย่างปลอดภัยสำหรับส่วนหลัง

ส่วน Twilio ของแอปวิดีโอให้คำปรึกษาด้านการดูแลสุขภาพสิ้นสุดที่นี่ มาเริ่มกันที่ส่วนการพัฒนา React Native

ส่วนที่ 2: การติดตั้งการพึ่งพาโดยใช้ React Native Starter Kit

ที่นี่เราจะใช้ React Native starter kit ที่สามารถคัดลอกได้จากลิงค์ GitHub — https://github.com/flatlogic/react-native-starter คุณต้องเรียกใช้คำสั่ง - "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')

เพิ่มโค้ดด้านล่างนี้ใน Android > app >SRC> main >JAVA> com > reactnativestarter > MainApplication.java

นำเข้า com.twiliorn.library.TwilioPackage;

หลังจากนี้ ให้แทนที่เมธอด getPackages() ด้วยโค้ดที่จำเป็น

ตอนนี้สำหรับการขอสิทธิ์จากผู้ใช้ จำเป็นต้องแก้ไข AndroidManifest.xml โดยเพิ่มโค้ดที่จำเป็นในไฟล์นี้ ตรวจสอบให้แน่ใจด้วยว่าในบัญชี Twilio ของคุณ เปิดใช้งานการสร้างห้องฝั่งไคลเอ็นต์แล้ว

เรียกใช้แอปพลิเคชัน

สุดท้าย เมื่อดำเนินการตามขั้นตอนทั้งหมดและรันโค้ดแล้ว ให้รันแอป React Native Health ของคุณโดยใช้คำสั่ง "react-native run-android" จากหน้าต่างเทอร์มินัล

คำตัดสินสุดท้าย

ที่นี่เราได้พัฒนาแอพ React Native อย่างง่ายเพื่อสาธิตความสามารถในการโทรผ่านวิดีโอของ Twilio แต่เราแค่ต้องจำไว้ว่าบางสิ่ง เช่น การเชื่อมต่อผู้ใช้ การสร้างโทเค็นการเข้าถึงของผู้ใช้ การสร้างห้อง ฯลฯ จะต้องได้รับการจัดการอย่างขยันขันแข็งในแบ็กเอนด์

คุณต้องการพัฒนาแอพ Video Consultation ด้านการดูแลสุขภาพด้วยการติดตั้ง Twilio ใน React Native ตามที่อธิบายไว้ข้างต้นหรือไม่? เราหวังว่าขั้นตอนดังกล่าวจะเป็นประโยชน์ต่อนักพัฒนา React Native สำหรับความช่วยเหลือด้านเทคนิคใดๆ ในการสร้างแอปการดูแลสุขภาพแบบวิดีโอตามสั่งสำหรับแพทย์ตามสั่ง ติดต่อ Biz4Solutions บริษัทพัฒนาแอป Healthcare ที่มีความเชี่ยวชาญสูงด้วยประสบการณ์มากกว่า 11 ปีในโดเมนนี้