8 BAB III
PELAKSANAAN KERJA MAGANG 3.1. Kedudukan dan Koordinasi
Dalam pelaksanaan kerja magang di PT Sumber Inovasi Informatika, penulis memegang posisi Front-End Developer Intern pada Team Groot dengan team leader dari Bapak Hans Permana, selaku Co-Founder serta Software Engineer PT Sumber Inovasi Informatika. Bapak Hans berperan dalam membimbing penggunaan React untuk Front-End dari EMR Cosmed dan memberikan konsultasi mengenai masalah yang terjadi pada saat proyek dikerjakan.
3.2. Tugas yang Dilakukan
Selama pelaksanaan kerja magang, tanggung jawab yang diberikan adalah sebagai berikut:
1. Ikut serta dalam melakukan sprint planning dan demo aplikasi kepada client yang dilakukan selama dua minggu sekali.
2. Mengimplementasikan React pada Front-End EMR klinik cosmed.
3. Membuat mockup dari EMR klinik cosmed.
3.3. Uraian Pelaksanaan Kerja Magang
3.3.1. Aktivitas Kerja Magang
Kerja magang dilakukan selama tiga belas minggu dengan timeline kerja sebagai berikut.
9 Tabel 3. 1 Tabel Timeline Kerja Magang
Nama Kegiatan
Minggu
1 2 3 4 5 6 7 8 9 10 11 12 13
Pengenalan framework ReactJS Design mockup EMR
Pengembangan front-end dari EMR
Pada minggu pertama penulis melakukan instalasi dan setup account beberapa aplikasi yang dibutuhkan dalam melakukan pekerjaan. Aplikasi-aplikasi yang dibutuhkan yaitu Slack, Trello, Miro, Gitlab, Node.JS, OwnCloud, WebStorm serta AdobeXD. Selain itu, dilakukan juga sprint planning dimana penulis bertemu dengan client yang dalam project ini berperan sebagai Product Owner. Setiap dua minggu sekali, sprint planning akan dilakukan untuk mengumpulkan requirement dari client dan melakukan demo aplikasi yang telah dibuat pada sprint sebelumnya.
Pekerjaan yang dilakukan oleh penulis pada minggu pertama dan kedua adalah mempelejari framework react dan juga membuat mockup dari web application Cosmed dikarenakan belum ditemukannya posisi UI/UX Designer di dalam team. Pembelajaran dilakukan dengan diskusi bersama team leader dan juga mencari website pembelajaran yang menyediakan pembelajaran mengenai konsep react.
Pada minggu ketiga dan seterusnya, penulis terlibat secara programming front end web application Cosmed. Team leader yang telah menyiapkan typescript project di gitlab sehingga penulis hanya perlu menggunakan IDE Webstorm untuk melakukan programming. Setiap task akan dibuat branchnya lalu dikerjakan hingga
10 selesai agar dapat di commit dan push ke master. Branch master nantinya akan menjadi hasil dari keseluruhan branch-branch task yang dikerjakan.
UI/UX designer datang pada minggu ketujuh sehingga tanggung jawab penulis untuk membuat mockup dipindahkan ke UI/UX designer. Penulis tetap harus membimbing dan juga secara sebagian mengajarkan kepada UI/UX designer mengenai html dan css agar dapat membantu dalam melakukan styling web application. Mockup yang dibuat oleh penulis sepenuhnya diganti menjadi mockup yang baru, namun konten yang ada di dalam form dan halaman pengecekan dibuat sesuai dengan mockup yang lama.
3.3.2. Framework dan Alur Kerja yang Digunakan
Dalam membangun EMR klinik Cosmed, React digunakan sebagai front-end dari aplikasi tersebut. React yang digunakan biasanya menggunakan bahasa pemrograman javascript, namun pada proyek ini bahasa pemrograman yang digunakan adalah typescript. Untuk HTML/CSS framework yang digunakan untuk mempercantik user interface adalah SemanticUI.
Alur kerja yang digunakan adalah metode agile yang terdiri dari sprint planning, retrospective dan juga standup. Dalam pelaksanaan sprint planning, kelompok developer akan bertemu dengan client untuk melakukan requirement gathering dan juga melakukan demo aplikasi yang telah dibuat berdasarkan hal yang telah disepakati pada sprint sebelumnya. Retrospective merupakan kegiatan untuk melihat kembali hal-hal yang telah dilakukan pada sprint sebelumnya dan melakukan refleksi diri maupun kelompok agar sprint selanjutnya dapat lebih baik lagi. Standup adalah perencanaan yang dilakukan setiap hari dan biasanya
11 dilakukan pada saat sesaat setelah jam kerja dimulai, dimana fungsinya untuk mengetahui kemajuan dari suatu proyek dengan cara menceritakan hal yang akan dikerjakan hari ini, apa yang telah dikerjakan kemarin dan adakah hal yang menghalangi kemajuan proyek secara perorangan.
3.3.3. Perancangan Sistem
Perancangan sistem meliputi diagram entity relationship, data flow diagram, flowchart serta mockup. Diagram entity relationship akan menggambarkan struktur database yang digunakan pada sistem. Data flow diagram akan menjelaskan arah data dan proses secara keseluruhan keterkaitan masing-masing fungsional dari program. Flowchart dibuat secara terpisah untuk masing-masing fungsional dimana akan menjelaskan proses secara mendetail proses yang dilakukan untuk fungsional tersebut. Mockup akan menggambarkan perencanaan tampilan yang nantinya diimplementasikan ke dalam bentuk program.
Diagram Entity Relationship
Diagram entity relationship berguna untuk saling melakukan konfirmasi mengenai struktur database dan field-field yang ditampung. Update selalu dilakukan terhadap diagram ini menggunakan draw.io setiap kali ada penambahan variabel pada program. Berikut adalah diagram entity relationship dari web application cosmed pada gambar 3.1
12 Gambar 3. 1 Diagram Entity EMR Cosmed
Beberapa variabel berbentuk type data object karena pada satu variabel tersebut dapat menampung beberapa variabel lain. Seperti contohnya Patient dapat menampung banyak patientVisit karena satu pasien dapat melakukan konsultasi lebih dari 1 kali.
13 Data Flow Diagram
Pada bagian data flow diagram, aplikasi cosmed akan digambarkan secara garis besarnya dimana user berupa pasien dan dokter. Pasien akan memberikan data diri pada saat registrasi dan data tersebut akan dimasukkan ke dalam sistem EMR Cosmed. Pada saat konsultasi dilakukan, dokter dapat melihat data dari pasien dan juga saat konsultasi berjalan akan dilakukan input data berupa keluhan dan diagnosa oleh dokter. Berikut adalah data flow diagram level 0 dari web application cosmed pada gambar 3.2
Gambar 3. 2 Data Flow Diagram Level 0 EMR Cosmed
Sistem EMR Cosmed sendiri dibagi beberapa proses utama, yaitu registrasi, daftar pasien dan juga kunjungan pasien. Pada bagian kunjungan pasien, ada empat tahap pemeriksaan dimana dibagi menjadi subjective, objective, assessment dan planning. Berikut adalah data flow diagram dari web application cosmed pada gambar 3.3
14 Gambar 3. 3 Data Flow Diagram Level 1 EMR Cosmed
Flowchart
Flowchart akan dipecah-pecah menjadi flowchart yang menjelaskan fungsi masing-masing bagian program. Flowchart yang disajikan adalah flowchart- flowchart program yang penulis secara peran terlibat cukup banyak di dalamnya.
Program-program yang dikerjakan secara besar oleh penulis adalah registrasi pasien, riwayat penyakit hidup, anthropometry, gejala vital dan juga assessment.
Gambar 3.4 merupakan penjelasan mengenai proses melakukan registrasi pasien pada web application Cosmed.
15 Gambar 3. 4 Flowchart halaman registrasi pasien
Pada halaman registrasi pasien, data-data yang diperlukan dari pasien akan diisikan oleh pasien yang nantinya dibantu oleh receptionist. Data-data tesebut berupa informasi umum pasien yang ditambahkan dengan data-data lain seperti etnis, alamat saat ini, detail status nikan dan lainnya. Ketika button cancel ditekan pada posisi form registrasi yang telah diisi sebagian ataupun seluruhnya maka program akan mengeluarkan modal untuk melakukan konfirmasi apakah benar- benar ingin keluar dari proses pendaftaran. Modal ini dibuat dengan tujuan menjadi antisipasi ketika button cancel secara tidak sengaja ditekan oleh pasien saat melakukan registrasi. Registrasi sendiri dilakukan hanya sekali pada kunjungan pertama pasien yang digunakan untuk melakukan record data diri.
16 Gambar 3.5 merupakan penjelasan mengenai proses jalannya bagian riwayat penyakit pada proses subjective.
Gambar 3. 5 Flowchart bagian riwayat penyakit
Pada sub bagian riwayat penyakit, terdapat daftar jenis-jenis penyakit yang mungkin dialami oleh pasien maupun keluarga pasien yang dapat membantu diagnosa dari dokter. Terdapat checkbox diri sendiri dan keluarga dimana dapat dicheck ketika pasien atau keluarga memang mengalami jenis penyakit pada daftar
17 tersebut. Ada juga field untuk mengisi hubungan keluarga dan juga keterangan tambahan jika memang diperlukan.
Gambar 3.6 merupakan penjelasan untuk proses assessment yang berguna untuk merangkum kegiatan konsultasi
Gambar 3. 6 Flowchart langkah assessment
Pada bagian ini, field dan keberadaan dari assessment sendiri hanya sekedar ada saja. Jika dilihat dari fieldnya dibagi menjadi assessment, nutrinitional assessment dan skin dan juga upload skin image. Untuk ketiga field bentuk form, sudah dapat di simpan ke dalam database sedangkan button upload image sendiri hanya sekedar tampilan saja. Hal ini dikarenakan proses assessment ini akan didiskusikan lebih lanjut terlebih dahulu oleh pihak cosmed mengenai hal-hal apa saja yang akan dirangkum dan juga pemisahan pada setiap visit yang berbeda seperti nutrition dan skin visit.
18 Gambar 3.7 merupakan penjelasan untuk bagian anthropometri pada bagian objective.
Gambar 3. 7 Flowchart bagian anthropometri
Data-data yang ada di bagian anthropometri nantinya akan berguna untuk membuat planning diet untuk pasien terutama bagian berat badan dan juga tinggi badan pasien. Data-data pada anthropometri ini nantinya akan dihitung menjadi REE dan juga TEE yang hasilnya ditampilkan pada bagian planning untuk panduan dokter dalam menentukan kalori yang pasien terima setiap harinya. Pada bagian anthropometri, direnacanakan untuk dapat mengambil data dari kunjungan sebelumnya karena data-data yang biasanya ada pada bagian ini tidak berubah sangat banyak.
19 Gambar 3.8 merupakan penjelasan untuk gejala vital pada bagian objective.
Gambar 3. 8 Flowchart gejala vital
Sama halnya seperti anthropometri, gejala vital akan diambil datanya melalui pemeriksaan, namun tidak ada perhitungan yang dilakukan maupun kegunaan yang signifikan untuk menentukan diet. Untuk gejala vital, pengecekan selalu dilakukan setiap kali dilakukan kunjungan.
Mockup
Pembuatan mockup menggunakan Adobe XD dimana pembuatan tidak hanya meliputi wireframe namun juga termasuk desain dari web application. Mockup yang ditampilkan adalah mockup yang dibuat oleh penulis dengan kata lain mockup model lama. Namun mockup terbaru dan juga pengembangan aplikasinya dibuat berdasarkan mockup lama terutama jalannya proses aplikasi.
20 Untuk masuk ke dalam aplikasi cosmed, terdapat halaman login yang berguna untuk melakukan verifikasi terhadap user sehingga hanya dokter dan juga receptionist yang ada di cosmed yang dapat masuk ke dalam aplikasi. Selain untuk masuk ke dalam aplikasi, halaman login juga berguna untuk melakukan verifikasi user, sehingga pada saat menggunakan aplikasi hanya dokter yang dapat membuat kunjugan.
Gambar 3. 9 Mockup Halaman Login
Setelah dilakukan login, muncul halaman pencarian pasien yang akan menampilkan daftar pasien yang telah melakukan pendaftaran sebelumnya di aplikasi ini. Daftar yang ditampilkan nantinya berupa nama pasien, alamat, nomor telepon dan juga jenis kelamin dari pasien. Ketika nama pasien mempunyai kesamaan, pencarian bisa dilakukan juga dengan menggunakan pencarian lanjutan dengan inputan dapat berupa nomor telepon, alamat ataupun tanggal lahir pasien.
21 Gambar 3. 10 Mockup Halaman Pencarian
Pada halaman registrasi pasien, pasien akan melakukan pengisian data diri yang diminta oleh aplikasi. Banyak perubahan yang dilakukan pada halaman registrasi karena bertambahnya requirement yang diminta dari pihak cosmed sehingga perubahan terdapat pada mockup terbaru namun masih menyesuaikan dengan mockup ini.
22 Gambar 3. 11 Mockup Halaman Registrasi Pasien
Ketika registrasi telah dilakukan, maka data pasien yang baru saja melakukan registrasi akan muncul pada halaman pencarian. Ketika daftar pasien dipilih, maka akan menampilkan detail data pasien yang telah diisi pada saat registrasi. Dengan ditampilkannya kembail data lengkap dari pasien, maka dokter yang akan melakukan konsultasi dapat mengingat kembali ataupun melakukan diagnosa awal dari data-data yang ada.
23 Gambar 3. 12 Mockup Informasi Pasien
Selain itu juga terdapat tab bernama patient visit dimana pada tab ini terdapat list dari kunjungan pasien sebelum-sebelumnya. Pada tab patient visit, dokter dapat melihat, menghapus, mengedit maupun membuat kunjugan terhadap pasien yang tabnya sedang aktif sekarang.
Gambar 3. 13 Mockup Kunjungan Pasien
24 Ketika pasien melakukan kunjungan, maka dokter dapat membuat kunjungan baru dengan menekan tombol new visit. Setalah itu halaman patient visit akan muncul dan terdapat 4 langkah yang harus dilakukan yaitu subjective, objective, assessment dan planning. Sama halnya seperti patient registration, banyak perubahan yang terjadi pada halaman kunjungan pasien. Pengambilan data pada kunjungan tidak lagi menggunakan textbox sederhana, namun untuk bagian-bagian dari setiap langkah tetap mengikuti mockup ini.
Gambar 3. 14 Mockup Langkah Subjective
Pada langkah subjective, data-data yang akan dimasukkan berupa keluhan yang berasal dari pasien. Data-data yang diterima mencakup gejala pasien, gaya hidup, riwayat penyakit dan analisis diet.
Pada langkah objective, data-data yang dimasukkan berupa hasil pemeriksaan yang dilakukan oleh dokter kepada pasien. Pada bagian objective, hal-hal yang diterima
25 dibagi menjadi beberapa pemeriksaan yaitu anthropometri, gejala vital, pemeriksaan fisik, IFM, hasil BIA dan juga hasil lab. Masing-masing bagian akan mempunyai input field yang berbeda-beda. Pada bagian objective, bagian diperhatikan lebih kepada anthropometri, gejala vital dan pemeriksaan fisik karena IFM, hasil BIA dan hasil lab sedang didiskusikan pihak cosmed mengenai penggunaannya.
Gambar 3. 15 Mockup Langkah Objective
Pada langkah assessment, data yang dimasukkan merupakan rangkuman dan diagnosa dari dokter terhadap pemeriksaan yang dilakukan saat tahap subjective dan objective. Pada mockup terdapat textbox untuk assessment, nutrition assessment dan skin serta button untuk upload skin. Namun bagian assessment belum terlalu dibahas karena direncanakan untuk visit yang berbeda mempunyai halaman assessment yang berbeda sehingga untuk sementara waktu digabung terlebih dahulu.
26 Gambar 3. 16 Mockup Langkah Assessment
Langkah terakhir yaitu planning dan halaman planning pada mockup ini merujuk ke jenis kunjungan nutrition yang merencanakan jenis makanan dan juga resep yang dianjurkan untuk pasien konsumsi. Pada halaman ini, tabel pada bagian distribusi akan menampilkan banyaknya porsi yang dianjurkan untuk setiap rekomendasi asupan harian yang berbeda.
Gambar 3. 17 Mockup Langkah Planning
27 3.3.4. Implementasi
Pada tahap ini, apa yang telah direncanakan dan didesain pada mockup direalisasikan dalam bentuk web application. Perubahan yang terjadi pada web application menjadi tidak sesuai dengan mockup juga beberapa kali dilakukan karena adanya perbedaan pendapat atas beberapa dokter pada cosmed. Sehingga gambar-gambar yang akan disajikan pada bagian implementasi ini mungkin ada pengembangan dari apa yang telah didesain pada mockup.
Untuk bagian pasien registrasi, terdapat dua jenis pilihan bahasa yaitu bahasa indonesia dan bahasa inggris karena dengan dasar pemikiran pasien ada yang lebih nyaman menggunakan bahasa inggris dalam mengisi data pasien. Bagian alamat mempunyai dua textbox dimana dibuat untuk alamat yang sesuai pada KTP dan juga untuk alamat dimana tempat pasien sekarang. Jika kedua alamat mempunyai lokasi yang sama maka tidak perlu melakukan pengisian pada kedua textbox, namun jika berbeda maka checkbox diklik dan textbox untuk alamat yang lainnya akan dapat diisi. Selain itu dropdown pada etnis dapat digunakan untuk memilih etnis dari ayah maupun ibu. Jika tidak ada pada pilihan maka dapat memilih pilihan other dan mengisi etnisnya pada textbox di kanan. Untuk tanggal lahir, textbox dapat diklik dan akan menampilkan datepicker sehingga pasien dapat dimudahkan dalam melakukan pengisian tanggal lahir.
28 Gambar 3. 18 Implementasi halaman registrasi
Pada langkah subjective, bagian riwayat penyakit terdapat list untuk penyakit- penyakit yang mungkin diderita oleh pasien maupun keluarga dari pasien. List yang ditampilkan ditampung dalam file yang terpisah, sehingga jikalau ada penambahan jenis penyakit baru tidak perlu melakukan perubahan pada file yang menampung logika dari program. Terdapat empat jenis inputan pada masing-masing penyakit yaitu checkbox diri sendiri dan keluarga, textbox hubungan keluarga dan keterangan. Checkbox digunakan untuk memberitahu siapa yang mempunyai riwayat penyakit tersebut dan jika keluarganya maka perlu mengisi jenis hubungannya pada textbox. Keterangan digunakan untuk menjelaskan lebih detail mengenai penyakit yang diderita, misalnya untuk penyakit alergi maka keterangannya berupa hal-hal yang menyebabkan alergi kepada pasien.
29 Gambar 3. 19 Implementasi Riwayat Penyakit pada Langkah Subjective
Langkah selanjutnya adalah objective, pada bagian anthropometri dokter akan melakukan input dari hasil pengukuran yang dilakukan. Hal-hal yang diukur adalah tinggi, berat, lingkar lengan dan juga lingkar perut. Ketika tombol perhitungan BMI ditekan, maka aplikasi akan menampilkan hasil perhitungan BMI dan menampilkan tingkat obesitas dari pasien. Untuk melakukan perhitungan BMI, dibutuhkan data berat badan dan juga tinggi badan terlebih dahulu. Untuk jenis tubuh, inputan berupa pilihan dimana jika salah satu gambarnya ditekan maka akan diberi border untuk jenis tubuh yang ditekan.
30 Gambar 3. 20 Implementasi Anthropometri pada Langkah Objective
Pada langkah objective juga terdapat gejala vital yang menampung data-data berupa kondisi umum, tingkat kesadaran, detak jantung, pernafasan, tekanan darah dan suhu badan. Sama halnya seperti anthropometri, data gejala vital didapatkan dengan cara pengukuran yang dilakukan oleh dokter terhadap pasiennya. Untuk tingkat kesadaran, input berbentuk dropdown karena tingkat kesadaran sudah terdapat jenis-jenisnya yaitu compos mentis, apatis, delirium, somnolen, stupor dan juga coma.
31 Gambar 3. 21 Implementasi Gejala Vital pada Langkah Objective
Langkah assessment adalah langkah yang dilakukan untuk merangkum hasil yang telah didapatkan pada saat melakukan langkah subjective dan objective. Pada langkah ini, dokter juga akan melakukan diagnosa terhadap pasien agar dapat melakukan perencanaan pola makan ataupun resep untuk dianjurkan kepada pasien.
Assessment dibuat dengan menggunakan textbox agar dokter dapat menjabarkan rangkuman walaupun rangkuman yang dijabarkan akan menampung banyak kata.
Tombol upload gambar kulit hanya sebatas tampilan, karena web application ini dibuat untuk dokter gizi dan pemeriksaan kulit masih sebatas diskusi oleh dokter- dokter dan juga sebagai contoh jika suatu saat dibuat fungsi untuk melakukan pendataan pada kunjungan konsultasi kulit.
32 Gambar 3. 22 Implementasi Langkah Assessment
Ketika konsultasi telah selesai, maka dokter akan merencanakan konsultasi yang dilakukan mendatang ataupun tidak perlu ada konsultasi lanjutan. Langkah tersebut akan dilakukan pada akhir konsultasi pada summary ketika menekan tombol selesai. Terdapat checkbox dan textbox dimana ketika memang diperlukan konsultasi pada masa mendatang maka dapat menentukan waktunya dengan menekan checkbox lalu menekan textbox. Datepicker yang akan muncul ketika textbox ditekan akan membuat tanggal-tanggal sebelum tanggal hari ini tidak dapat dipilih untuk menghindari kesalahan input tanggal.
33 Gambar 3. 23 Implementasi Appointment Selanjutnya
Penulis juga menambahkan inisial pada search page dimana pada bagian kiri setiap baris pasien akan menampilkan inisial dari pasien dengan background yang berbeda-beda. Untuk menampilkannya hanya cukup dengan menggunakan library yang ada pada internet lalu memasukkan nama pasien ke dalam bagian name yang diminta dari tag tersebut.
Gambar 3. 24 Implementasi Inisial pada halaman pencarian
34 3.3.5. Kendala yang Ditemukan
Dalam melakukan pelaksanaan kerja magang, penulis menghadapi beberapa kendala sebagai berikut.
• Mempunyai jobdesc tambahan selain menjadi software developer yaitu UI designer.
• Belum mempunyai pengetahuan tentang teknologi React Typescript.
• Adanya penambahan konsep context dalam pengembangan aplikasi
menggunakan React Typescript sehingga penulis tidak dapat melanjutkan pengembangan web application.
• Requirement dari client yang selalu berubah karena adanya lebih dari satu orang dari pihak client.
3.3.6. Solusi Atas Kendala yang Ditemukan
Kendala yang ada tentunya harus mempunyai solusi agar dapat melancarkan jalannya kerja magang dan membuat penulis dapat berkembang, berikut adalah solusi dari kendala-kendala yang dihadapi oleh penulis.
• Pekerjaan dalam melakukan pembuatan mockup dan desain diserahkan pada UI designer pada minggu ke enam.
• Melakukan pembelajaran dari internet dan juga oleh team leader dengan cara diskusi dan menyelesaikan suatu masalah secara bersama-sama.
• Dilakukan diskusi bersama team leader dan juga melakukan uji coba terhadap beberapa file yang belum menggunakan context.
• Mempertanyakan dan mendiskusikan lebih lanjut untuk hasil yang terbaik dan terefisien untuk web application.
