## APLIKASI MOBILE KONSULTASI DOKTER DENGAN MENGGUNAKAN FRAMEWORK REACT NATIVE DI KLINIK MITRA ANDA TIMIKA

## MOBILE APPLICATION FOR DOCTOR CONSULTATION USING THE REACT NATIVE FRAMEWORK IN MITRA ANDA TIMIKA CLINIC
Bagus Rahmatoko 1 , Ninik Haryani 2 , Moh Rofi 3

## ABSTRACT
Today's society often complains about various ailments that are felt. By consulting directly or face to face, the community can complain about various things that are felt. However, consultations are often carried out face-to-face with doctors or health professionals who often complain about the time and schedule of examinations by doctors. By using a face-to- face  system  it  is  felt  to  be  less  effective  for  the  community.  To  address  these  issues,  the authors created Doctor Consultation apps for Android and iOS, constructed them with the React Native framework, and leveraged services from the Firebase Firestore Database as the  system's  database,  Firebase  Authentication  as  authentication  to  access  the  system. Firebase  Storage for  data storage. Mitra  Anda  App includes  consulting  features,  doctor information  based  on  previous  user  ratings,  news  and  offers from clinics, authentication that checks user authorization to access the system, get clinic directions, etc. Mitra Anda application will make it simpler for the general public to conduct consultations or obtain medical  services  from  doctors,  find  out  the  location  of  clinics,  receive  health  news  and offers from clinics to receive health services directly.
Keywords : Consultation, Framework, React Native, Firebase

## 1. PENDAHULUAN
Seseorang dapat hidup produktif secara ekonomi dan sosial apabila dalam keadaan sehat, yaitu keadaan sejahtera jasmani, rohani, dan sosial. Kesejahteraan dapat dipertahankan dengan mengobati dan mencegah  terjadinya  masalah  medis  yang  memerlukan  penilaian,  perawatan  dan  terapi.  Konsultasi sering  kali  diartikan  sebagai  suatu  proses  dimana  para  ahli  di  bidangnya  dan  orang-orang  yang berpegang pada standar membantu seseorang. Konsultasi memegang peranan penting bagi orang yang mempunyai  keluhan  terhadap  dirinya.  Sesi  konsultasi seringkali  dilakukan  secara  tatap  muka  dengan dokter atau ahli kesehatan [1] .
Dalam jangka panjang, inovasi yang terus berkembang berdampak signifikan pada berbagai aspek kehidupan, termasuk pemanfaatan layanan kesehatan yang terkomputerisasi. Perkembangan teknologi layanan  konsultasi  kesehatan  digital  memungkinkan  partisipasi  aktif  masyarakat  dalam  promosi kesehatan [2] .
Salah  satu  bentuk  kesehatan  digital  yang  mulai  bermunculan  dalam  beberapa  waktu  terakhir adalah  berkembangnya  layanan  kesehatan  online.  Sistem  pelayanan  ini  diluncurkan  untuk menyelesaikan  permasalahan  yang  sering  dihadapi  masyarakat.  Selain  itu,  teknik  ini  didasari  oleh keinginan  untuk  mengatasi  keterbatasan  jarak [2] .  Selain  itu,  kesadaran  akan  masalah  kesehatan  pada masyarakat  yang  tinggal  di  pedesaan  masih  sangat  tinggi  dan  tergolong  cukup  rendah.  Kemunculan layanan Kesehatan digital memberikan dampak positif bagi dokter dan pasien [3] .
Oleh  karena  itu,  dikembangkan  aplikasi  mobile  konsultasi  kesehatan  untuk  sistem  operasi Android  dan  iOS,  untuk  menghindari  keterbatasan  waktu,  konsultasi  dapat  dilakukan  dimanapun,
1 STMIK AKI PATI Jln Kamandowo No. 13, Pati, Jawa Tengah, Indonesia rakhmatoko@gmail.com
2 STMIK AKI PATI Jln Kamandowo No.13, Pati, Jawa Tengah, Indonesia ninik.winong@gmail.com
3 STMIK AKI PATI Jln Kamandowo No.13, Pati, Jawa Tengah, Indonesia mohrofi2017@gmail.com
kapanpun. Aplikasi ini dikembangkan dalam JavaScript dan diimplementasikan dalam kerangka react native , yang dapat digunakan pada perangkat seluler yang menjalankan Android dan iOS.

## 2. KAJIAN PUSTAKA

## Aplikasi Mobile
Aplikasi seluler adalah perangkat lunak yang mengintegrasikan elemen tertentu sedemikian rupa sehingga  dapat  digunakan  oleh  pengguna  dan  dapat  memfasilitasi  kinerja  pengguna  pada  perangkat seluler [4] .

## Konsultasi Dokter
Konsultasi  dapat  diartikan  sebagai  suatu  proses  dimana  seseorang  yang  ahli  dan  memenuhi persyaratan kualifikasi suatu spesialisasi tertentu membantu seseorang untuk memperoleh pengetahuan tentang  dirinya,  mengembangkan  potensi,  memecahkan  masalah,  mengambil  keputusan,  beradaptasi, dan lain - lain [1] .

## Prototyping
Sebuah  sistem  dapat  dibangun  melalui  salah  satu  dari  banyak  siklus  hidup  sistem,  termasuk pembuatan prototipe. Hasil yang diharapkan adalah sistem menjadi sistem terakhir [5] .
Gambar 1. Model Prototype

## API
API (Application Programming Interfaces) adalah bagian besar dari web. Pada tahun 2013, lebih dari  10.000  API  dirilis  untuk  penggunaan  terbuka  oleh  perusahaan.  Jumlah  tersebut  empat  kali  lebih banyak dibandingkan tahun 2010. Server hanyalah sebuah komputer besar. Ia memiliki komponen yang sama dengan laptop kerja atau desktop, hanya saja lebih cepat dan lebih bertenaga.

## Database
Kumpulan  informasi  yang  terorganisir  disebut database ,  dan  disimpan  di  komputer  sehingga dapat diverifikasi oleh perangkat lunak untuk mendapatkan data dari database [6] .

## Framework
Pengembang  dapat  menulis  kode  lebih  cepat  dan  mudah  dengan  menggunakan framework . Dengan kata lain, framework adalah sekumpulan library atau fungsi yang tersedia untuk digunakan oleh pengembang [5] .

## React Native
Javascript digunakan  oleh framework react native .  Karena  kesederhanaannya,  kemudahan penggunaan, dan fungsionalitas live reload tanpa perlu membangun, framework ini populer di kalangan pengembang [5] .

## Firebase
Sebuah  platform  untuk  aplikasi  real-time,  Firebase  adalah  layanan  Google.  Aplikasi  yang terhubung ke Firebase akan otomatis diupdate di setiap platform, termasuk desktop dan seluler, ketika datanya berubah [7] .

## Black Box
Pendekatan black  box testing digunakan  untuk  menguji  perangkat  lunak  tanpa  harus memperhatikan seluk-beluk produk. Tes ini hanya melihat nilai keluaran dalam hubungannya dengan nilai masukan [8] .

## 3. METODE PENELITIAN
Model prototype Software  Development  Life  Cycle (SDLC)  merupakan  pendekatan  penelitian yang digunakan untuk membuat aplikasi konsultasi dokter ini, berikut siklus hidup dari model prototype :

## Pengumpulan Kebutuhan
Fase ini, persyaratan sistem dikumpulkan dengan mendengarkan keluhan pelanggan.

## Membangun Prototyping
Pada langkah ini, klien atau pelanggan memberi tahu perancang sistem tentang keinginan mereka untuk mengembangkan desain sementara dengan fitur menu sederhana seperti panel input dan output.

## Evaluasi Prototyping
Fase  ini  klien  meninjau  prototipe  yang  dibuat  dengan  tujuan  untuk  memastikan  bahwa  sistem  yang direncanakan memenuhi tujuan dan kebutuhan klien.

## Pengkodean Sistem
Prototype yang diterima klien pada langkah sebelumnya dimulai pada langkah ini dengan produksi atau pengkodean kode dengan menerjemahkannya ke dalam bahasa pemrograman yang digunakan.

## Pengujian Sistem
Sistem yang telah diubah menjadi bahasa pemrograman dan diubah menjadi perangkat lunak diperiksa terlebih dahulu untuk mengetahui kesesuaian penggunaannya.

## Evaluasi Sistem
Klien  melakukan  evaluasi  pada  langkah  ini  untuk  melihat  apakah  perangkat  lunak  atau  sistem  yang dikembangkan  memenuhi  kebutuhan  mereka  atau  tidak.  Jika  cocok  berarti  sistem  sudah  beroperasi. Namun jika dirasa tidak tepat, pengembang harus kembali dan menyesuaikan penyimpangan yang ada sesuai dengan permintaan klien.

## Menggunakan Sistem
Ketika suatu sistem dibangun dan berhasil menyelesaikan tahapan proses penilaian sistem, maka sistem tersebut siap untuk digunakan.

## 4. HASIL DAN PEMBAHASAN
Dalam  penelitian  ini  digunakan  teknik prototype ,  beserta  prosedur  pengumpulan  kebutuhan, pembuatan prototyping , evaluasi prototyping , serta pengembangan, pengujian, dan penggunaan sistem.

## Pengumpulan Kebutuhan
Untuk  mengumpulkan  data  dan  informasi  yang  diperlukan,  peneliti  menggunakan  metode wawancara  dan  studi  literatur. Pada  tahap  wawancara  dilakukan  kegiatan  tanya  jawab  antara  peneliti dan  responden  untuk  mengumpulkan  data,  informasi  atau  pendapat.  Peneliti  sendiri  mewawancarai informan  dari  klinik  untuk penelitian ini. Pada  tahap penelitian  literatur  khususnya  mencari  referensi yang terdapat pada buku atau jurnal, artikel dan website yang berhubungan dengan penelitian.
Dalam pengumpulan kebutuhan juga perlu dilakukan analisa sistem, dalam analisa sistem juga perlu  dilakukan  analisa  sistem  kerja  dan  analisa  sistem  yang  akan  diusulkan.  Selama  analisis  sistem berjalan,  sistem  konsultasi  klinik  rekanan  Anda  masih  berjalan  secara  manual,  mulai  dari  registrasi pasien,  konsultasi  tatap  muka,  pembuatan  laporan  rekam  medis  secara  manual.  Analisis  proses  yang dilakukan oleh klinik dengan sistem kerja untuk membantu mengidentifikasi permasalahan yang dialami klinik rekanan Anda, antara lain:
1. Konsultasi dilakukan dengan tatap muka.
2. Konsultasi tidak dapat dilakukan dimanapun.
3. Pasien jarang mengetahui penawaran dari klinik seperti promo checkup.
4. Cara manual masih digunakan untuk menambah rekam medis.
Setelah  melihat  dan  mengevaluasi  sistem  yang  ada  saat  ini,  peneliti  menyarankan  untuk membangun aplikasi mobile untuk membantu konsultasi pasien dengan menggunakan framework React Native ,  yang  memungkinkan  pengembang  untuk  membangun  aplikasi  mobile  satu  kali  dan menggunakannya pada perangkat yang menjalankan sistem operasi Android dan iOS.
Sebelum  membuat/merancang  suatu  sistem,  penting  juga  untuk  menganalisis  dan  menentukan tujuan perancangan sistem tersebut. Persyaratan sistem berikut akan diidentifikasi dalam penelitian ini: 1. Memiliki tampilan yang user friendly.
2. Fitur untuk masuk dan registrasi sistem.
3. Fitur memilih dokter berdasarkan kategori atau berdasarkan rating.
4. Fitur berita dan penawaran menarik dari klinik.
5. Fitur kotak masuk untuk melihat semua konsultasi yang dilakukan oleh pasien dan dokter.
6. Fitur untuk melihat profil dari klinik.
7. Fitur profile untuk merubah profile pasien.
8. Fitur untuk melihat rekam medis.

## Membangun Prototyping
Tahap  selanjutnya  adalah  membuat prototyping .  Pada  penelitian  ini  proses  pembuatan prototyping adalah  dengan  terlebih  dahulu  mengembangkan  sistem  menggunakan  desain  pemodelan dalam bentuk UML (Unified Modeling Language) yang terdiri dari use case diagram, activity diagram, sequence diagram,  dan class diagram.  Selain  itu  juga  dilakukan  perancangan user  interface berupa wireframe dan mockup , kemudian akan dibangun prototyping .
Use case diagram adalah representasi visual tentang bagaimana fitur sistem akan digunakan. aktor dan use case hanyalah dua contoh elemen desain yang berinteraksi satu sama lain. Di bawah ini adalah gambar use case diagram untuk aplikasi sistem ini. Diagram diproduksi menggunakan Draw.io.
Gambar 2. Use Case Diagram Sistem
Diagram use case aplikasi konsultasi dokter di klinik mitra Anda ditunjukkan pada Gambar 2. Tiga aktor yaitu pengguna, dokter, dan administrator dapat dilihat pada gambar di atas. Dari hasil analisis diperoleh 23 fungsi.
Activity diagram adalah diagram yang mewakili alur kerja dengan menggunakan diagram use case sebagai acuan aktivitas suatu proses. Berikut beberapa contoh activity diagram pada sistem ini yang akan dibuat menggunakan draw.io.
Gambar 3. Activity Diagram Login
Activity diagram  aplikasi  konsultasi  dokter  di  klinik  Mitra  Anda  ditunjukkan  pada  gambar  3. Diagram  ini  memodelkan  alur  pengguna  dan  sistem  dari  mulai  pengguna  membuka  aplikasi  sampai aplikasi menampilkan halaman home.
Sequence diagram  merinci  umur  objek dan  pesan  yang  dikirim  dan  diterima  di  antara  mereka, diagram  menggambarkan  perilaku  objek  dalam  skenario  penggunaan. Sequence diagram  sistem  ini dibuat menggunakan Draw.io.
Sequence diagram aplikasi konsultasi dokter pada klinik Mitra Anda ditunjukkan pada gambar 4. Terdapat 6 objek yang terdiri dari aktor, halaman login, firebase authentication, firebase database, local storage, halaman home.
Class diagram  menguraikan  struktur  sistem  dalam  kaitannya  dengan  kelas-kelas  yang  akan digunakan  untuk  membangunnya.  Class  diagram  untuk  program  aplikasi  sistem  yang  dibuat  dengan draw.io ditunjukkan pada gambar di bawah.
Gambar 5. Class Diagram
Gambar  5  menunjukkan class diagram  dari  aplikais  konsultasi dokter  pada  klinik  Mitra  Anda. Diagra diatas memiliki kelas – kelas yang terdiri dari kelas admin, dokter, user, berita dan penawaran, profil, rekam medis, kategori dokter, chatting, dan pesan.
Wireframe adalah skema atau cetak biru yang membantu pengembang dan desainer memikirkan dan  mengkomunikasikan  struktur  perangkat  lunak  yang  mereka  buat.  Skema  ini  dibuat  dengan Whimsical dan berikut beberapa wireframe untuk aplikasi ini.
Mockup adalah hasil akhir design yang sudah berisi informasi (gambar, warna, typography) dan bentuk  elemen  dengan  tingkat  persisi  yang  tinggi  untuk  membuat  hasil  design  seolah  -  olah  terlihat nyata. Berikut mockup halaman home dari sistem yang dibuat berdasarkan wireframe sebelumnya yang dibuat menggunakan Figma.

## Gambar 7 Mockup Aplikasi Konsultasi
Membangun prototyping akan  dilakukan  dengan  menggunakan  Figma  yang  akan menghubungkan  antar  komponen  untuk  melakukan  perpindahan  halaman  atau  mengisi  form  untuk melihat alur pada aplikasi jika form diisi telah memenuhi syarat maka sistem akan navigasi ke halaman berikutnya jika form yang diisi tidak memenuhi syarat maka akan muncul pesan error.

## Pengkodean Sistem
Tahap  pengkodean  sistem  merupakan  fase  implementasi  desain prototyping aplikasi  yang dibangun dengan framework React Native.
1. Persiapan Lingkungan Kerja
Tahapan  ini  yaitu  menyiapkan  seperti  menginstall  Android  Studio  dan  Xcode  untuk  menjalankan simulator,  menyiapkan  syarat  pengembangan framework Expo  seperti  menginstal  homebrew, Node.js, Watchman, dan menginstall kode editor VSCode.
2. Menginisialisasi Proyek
Setelah  semua  proses  pengaturan  lingkungan  pengembangan  selesai,  persiapan  untuk  membuat proyek  aplikasi React  Native dapat  dilakukan.  Menjalankan  proyek Expo dapat  dilakukan menggunakan terminal bawaan sistem operasi.
3. Mengintegrasikan dengan Firebase
Langkah untuk menambahkan Firebase yaitu dengan login dengan akun Google lalu menambahkan proyek dan melakukan setup dan setelah setup berhasil di lengkapi, lalu install firebase menggunakan Node Package Manager lalu buat file konfigurasi Firebase SDK.
4. Pengkodean proyek
Pada tahap ini merupakan langkah untuk menslicing dari design ke kode, dan pengkodean sistem ini menggunakan  teknik atomic  design yang  nantinya  komponen  akan  di  koding  tersendiri  karena komponen  akan  selalu  muncul  di  tiap  halaman  agar  tidak  melakukan  koding  ulang  pada  setiap halaman.

## Pengujian Sistem
Pengujian black  box akan  digunakan  selama  tahap  pengujian  sistem.  Teknik  ini  merupakan pendekan  pengujian  yang  berkonsentrasi  pada  kebutuhan  fungsional  sistem.  Dengan  demikian, pengembang  perangkat  lunak  dapat  menetapkan  serangkaian  batasan  masukan  yang  menguji  semua persyaratan fungsional program menggunakan pengujian kotak hitam.

## Tabel 1. Hasil Pada Pengujian Black Box
Aktifitas Pengujian Realisasi yang diharapkan Hasil Membuka aplikasi Muncul halaman splash screen dan setelah 3 detik navigasi ke halaman get started Sukses Sentuh tombol login Muncul halaman login Sukses Melakukan login user terdaftar Login berhasil dan navigasi ke halaman home Sukses Melakukan login user belum terdaftar atau password salah Pesan error muncul Sukses Sentuh tombol register Muncul halaman register Sukses Melakukan registrasi Registrasi sukses dan data user akan tersimpan di database Sukses Melakukan uploud foto dihalaman complete register dan klik simpan Foto berhasil diuploud ke database dan registrasi berhasil dan navigasi ke halaman home Sukses Sentuh kategori dokter di halaman home Muncul kategori dokter berdasarkan kategori yang disentuh Sukses Sentuh kategori dokter berdasarkan rating Muncul profil dokter yang dipilih Sukses Sentuh tombol mulai konsultasi Muncul halaman chatting Sukses Sentuh input teks mengisi teks dan tekan tombol kirim Teks akan dikirim di database dan muncul di halaman chatting Sukses Sentuh berita dan penawaran Berita atau penawaran akan navigasi ke halaman detail dari berita dan penawaran yang dipilih Sukses Aktifitas Pengujian Realisasi yang diharapkan Hasil Sentuh lihat semua berita dan penawaran Menampilkan semua berita dan penawaran Sukses Sentuh pesan di navigasi bar Menampilkan halaman pesan Sukses Sentuh klinik profil di navigasi bar Menampilkan profil klinik Sukses Sentuh dapatkan arah di halaman klinik profil Navigasi ke aplikasi google maps Sukses Sentuh profil di navigasi bar Menampilkan halaman profil Sukses Sentuh rekam medis Menampilkan riwayat rekam medis Sukses Sentuh keamanan akun Menampilkan halaman keamanan akun Sukses Mengisi form keamanan akun dan password lama dan password baru valid Menampilkan pesan sukses mengganti password dan halaman akan navigasi ke profil Sukses Mengisi form keamanan akun dan password lama dan password baru invalid Menampilkan peringatan bahwa upaya pembaruan kata sandi tidak berhasil Sukses Sentuh edit profil Menampilkan halaman edit profil Sukses Mengganti data profil di halaman edit profil Menampilkan pesan sukses dan navigasi ke halaman profil Sukses Sentuh bantuan Menampilkan halaman bantuan Sukses Sentuh logout Menampilkan pesan logout sukses dan akan navigasi ke halaman get started

## 5. KESIMPULAN
Berikut adalah kesimpulan dari penelitian ini:
1. Sistem  konsultasi  ini  dapat  digitalisasi  dengan  sistem  berbasis  mobile  yang  dihubungkan  dengan internet, sehingga sistem ini dapat digunakan dan dapat menerima informasi lebih cepat dan efisien.
2. Konsultasi  sebelumnya  yang  dilakukan  secara  langsung  sekarang  dapat  dilakukan  dengan  sistem konsultasi  online,  agar  mempermudah  pasien  untuk  melakukan  konsultasi  tanpa  harus  datang  ke klinik dan dapat dilakukan dimanapun atau tidak terbatas lokasi.
3. Pasien dapat menemukan informasi dan penawaran menarik dari klinik, dan informasi sudah difilter oleh admin yang diawasi dokter, sehingga pengguna terhindar dari informasi hoaks.

## UCAPAN TERIMAKASIH
Kami  mengucapkan  terima  kasih  kepada  Direktur  Klinik  Mitra  Anda  Timika,  yang  telah mengizinkan kami melakukan penelitian di sana.

## DAFTAR PUSTAKA
[1]   Haga  Ibnu  Hakam,  A.B.M.J.P.I.G.H.S.  (2021).  Aplikasi  Konsultasi  Kesehatan  Kulit  Online Berbasis Website, 7.
[2]   Prawiroharjo,  P. dkk., (2019).  Tinjauan  Etik  Layanan Konsultasi  Daring  dan  Kunjungan  Rumah Berbasis Aplikasi, Jurnal Etika Kedokteran Indonesia , 3(2), p. 37.
[3]   Makhdansalaf,  K.  and  Prasetio,  R.T.  (2021).  SISTEM  INFORMASI  PELAYANAN KESEHATAN KONSULTASI BERBASIS WEB (TANYASEHAT), eProsiding Sistem Informasi (POTENSI) .
[4]   Suhimarita,  J.  and  Susianto,  D.  (2019).  AMIK  Dian  Cipta  Cendikia  APLIKASI  AKUTANSI PERSEDIAAN  OBAT  PADA  KLINIK  KANTOR  BADAN  PEMERIKSA  KEUANGAN PERWAKILAN LAMPUNG, Jurnal Sistem Informasi Akuntansi (JUSINTA) JUSINTA , 2(1).
[5]   Husein  Malahella,  A.  and  Arwani,  I.  (2020).  Pemanfaatan  Framework  React  Native  dalam Pengembangan Aplikasi Pemesanan Minuman Kopi pada Kedai Bycoffee.
[6]   Andry Andaru (2018). PENGERTIAN DATABASE SECARA UMUM.
[7]   Sanad,  E.A.W.  (2019).  Pemanfaatan  Realtime  Database  di  Platform  Firebase  Pada  Aplikasi  E- Tourism Kabupaten Nabire, Jurnal Penelitian Enjiniring , 22(1), pp. 20–26.
[8]   Ningrum,  F.C. dkk., (2019).  Pengujian  Black  Box  pada  Aplikasi  Sistem  Seleksi  Sales  Terbaik Menggunakan Teknik Equivalence Partitions, 4(4).