Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK) Vol.
No.
April 2026, hlm.
p-ISSN: 2355-7699
e-ISSN: 2528-6579
DIGITAL COCKPIT MULTIPLATFORM MODULAR DARI HUMAN DIGITAL TWIN
Herman*1.
Wahid Alfaridsi Achmad Zein2.
Abdul Fadlil3
1,2,3
Universitas Ahmad Dahlan.
Yogyakarta Email: hermankaha@mti.
id, 2walfaridsi@gmail.
com, 3fadlil@mti.
Penulis Korespondensi (Naskah masuk: 13 Desember 2025, diterima untuk diterbitkan: 14 Januari 2.
Abstrak Teknologi Digital Twin (DT) telah diadaptasi menjadi Human Digital Twin (HDT) untuk pemantauan kesehatan secara real-time.
Namun, sistem pemantauan kesehatan berbasis HDT saat ini terkendala masalah skalabilitas, fleksibilitas antarmuka, dan ketergantungan pada koneksi internet.
Arsitektur monolitik konvensional menghambat integrasi fitur dan adaptasi platform, sementara kebutuhan akan layanan berkelanjutan seringkali tidak terpenuhi.
Untuk mengatasi kesenjangan penelitian ini, studi ini mengusulkan solusi dengan merancang dan mengimplementasikan Digital Cockpit (DC) Multiplatform Modular untuk HDT kardiovaskular.
Penelitian ini menerapkan arsitektur modular untuk memisahkan lapisan antarmuka depan dan antarmuka belakang.
Struktur ini mempermudah integrasi layanan masa depan seperti AI dan LLM.
Antarmuka depan diimplementasikan sebagai Progressive Web Application (PWA) untuk memastikan kompatibilitas lintas platform dan memberikan kemampuan offline penting menggunakan Service Worker untuk caching dan pengambilan data.
Kami memvalidasi sistem melalui Blackbox Testing dan Compatibility Testing di lingkungan Laptop, iOS, dan &roid.
Pengujian Blackbox menunjukkan keberhasilan 100% pada seluruh fungsi inti, termasuk sinkronisasi data realtime dan caching offline.
Penggunaan basis kode tunggal pada PWA secara signifikan mengurangi kompleksitas pengembangan antar platform dengan tetap mempertahankan skor kompatibilitas sebesar 89,58% di berbagai Sistem DC berbasis PWA ini memberikan solusi yang terukur dengan menggabungkan fleksibilitas web dan kinerja aplikasi native bagi sistem pemantauan kesehatan digital.
Kata kunci: kardiovaskular, digital cockpit, human digital twin, arsitektur modular, progressive web application.
MODULAR MULTIPLATFORM DIGITAL COCKPIT OF HUMAN DIGITAL TWIN
Abstract Digital Twin (DT) technology has been adapted into Human Digital Twin (HDT) for real-time health monitoring.
However, current HDT-based health monitoring systems are hampered by issues of scalability, interface flexibility, & dependence on internet connection.
Conventional monolithic architecture hinders feature integration & platform adaptation, while the need for continuous service is often unmet.
To address this research gap, this study proposes a solution by designing & implementing a Modular Multiplatform Digital Cockpit (DC) for cardiovascular HDT.
This study applies a modular architecture to separate the front-end & back-end layers.
This structure facilitates the integration of future services such as AI & LLM.
The front-end is implemented as a Progressive Web Application (PWA) to ensure cross-platform compatibility & provides essential offline capabilities using Service Workers for data caching & retrieval.
The system was validated through Blackbox Testing & Compatibility Testing on Laptop, iOS, & &roid environments.
Blackbox testing demonstrated 100% success across all core functions, including real-time data synchronization & offline caching.
The use of a single codebase in PWAs significantly reduces cross-platform development complexity while maintaining a compatibility score of 89.
58% across devices.
This PWA-based DC system provides a scalable solution for digital health monitoring systems, combining the flexibility of the web with the performance of native apps.
Keywords: cardiovascular health, digital cockpit, human digital twin, modular architecture, progressive web
PENDAHULUAN
Latar Belakang Masalah Digital Twin (DT) adalah representasi virtual yang berjalan paralel dengan entitas fisiknya untuk memantau kondisi, memprediksi perilaku, dan mendukung pengambilan keputusan berbasis data (Armel et al.
, 2.
Konsep DT awalnya dikembangkan di bidang industri sebelum diadaptasi ke konteks biologis melalui Human Digital Twin (HDT) yang secara dinamis memodelkan tubuh manusia, organ, atau sistem fisiologis (Iliu, 2.
(Elgammal.
Albrijawi & Alhajj, 2.
(Sprint, 372 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2026, hlm.
Schmitter-edgecombe & Cook, n.
HDT
memungkinkan pemantauan kesehatan pribadi secara real-time dan integrasi data multimodal (Sun et al.
Banyak penelitian telah dilakukan di bidang HDT untuk sistem pemantauan kesehatan.
Penelitian tersebut berfokus pada berbagai sektor, di antaranya adalah sektor user interface untuk sistem tersebut.
Pada kebanyakan user interface yang ada pada saat ini memiliki keterbatasan dalam hal skalabilitas, fleksibilitas, dan dukungan untuk perangkat online maupun offline.
Seiring perkembangan user interface, sistem pemantauan kesehatan digital berbasis HDT semakin menarik perhatian penelitian, namun masih menghadapi keterbatasan yang signifikan terkait skalabilitas, fleksibilitas antarmuka pengguna, dan dukungan untuk operasi offline (Masison et al.
, 2.
sehingga diperlukan antarmuka yang dapat secara efektif menjembatani kompleksitas ini.
Digital Cockpit (DC) berfungsi sebagai user interface yang menghubungkan pengguna dengan sistem DT termasuk HTD, dengan menyediakan visualisasi data real-time, integrasi data multimodal, dan interaksi langsung dengan model digital yang mewakili entitas fisik (Pellegrino et al.
, 2.
Sebagai jendela operasional bagi para tenaga kesehatan dan peneliti, antarmuka ini membutuhkan fleksibilitas, responsifitas, dan kemampuan crossdevice (Wahlstr, 2.
Namun, kebutuhan ini seringkali terhambat oleh pendekatan pengembangan tradisional, di mana arsitektur monolitik menyulitkan integrasi fitur baru dan adaptasi terhadap platform, sementara antarmuka depan berbasis native memerlukan pembuatan versi terpisah untuk setiap sistem operasi, sehingga meningkatkan biaya dan waktu pengembangan (Fauzan et al.
, 2.
Meskipun kebutuhan akan akses data kesehatan secara real-time dan pemantauan pasien secara terusmenerus sangat penting (Adibi.
Rajabifard & Shojaei, 2.
Masih sedikit sistem yang secara optimal mengintegrasikan kemampuan offline-first untuk memastikan keberlanjutan layanan dalam kondisi jaringan yang tidak stabil, hal ini menjadi sebuah masalah yang sering ditemui dalam konteks Oleh karena itu, muncul kesenjangan penelitian untuk menciptakan sistem DC yang mengadopsi arsitektur antarmuka belakang modular dan menggunakan antarmuka depan Progressive Web Application (PWA) untuk memastikan kompatibilitas cross-platform baik dalam kondisi online maupun Penelitian ini bertujuan untuk mendesain PWA, mengimplementasikan prototipe sebagai bukti konsep, dan menguji sistem DC berbasis PWA yang terintegrasi dengan arsitektur antarmuka belakang modular untuk mendukung pemantauan kesehatan kardiovaskular secara real-time.
Lebih spesifiknya, mengimplementasikan arsitektur sistem DC modular untuk memisahkan lapisan antarmuka depan dan antarmuka belakang, sehingga memungkinkan skalabilitas, kemudahan pemeliharaan, dan integrasi yang lebih baik dengan layanan Artificial Intelligence (AI) dan Large Language Model (LLM) (Elgammal.
Albrijawi & Alhajj, 2.
(Masison et al.
, 2.
Penelitian ini juga bertujuan untuk menguji fungsionalitas, kompatibilitas, dan kinerja sistem yang dikembangkan pada berbagai lingkungan operasional seperti Desktop, &roid, dan iOS untuk memvalidasi ke&alan dan kesiapan sistem dalam penggunaan langsung.
Dengan mencapai tujuantujuan ini, diharapkan tantangan yang diidentifikasi dalam kesenjangan penelitian dapat diatasi.
Lebih jauh, penelitian ini diharapkan dapat memberikan solusi yang mudah diakses pengguna untuk pemantauan kesehatan secara digital.
Hal ini sejalan memanfaatkan teknologi digital dalam meningkatkan pelayanan kesehatan pada masyarakat Indonesia secara lebih luas dan berkualitas.
Perb&ingan dengan Penelitian Terdahulu Pengembangan DC dalam ekosistem DT telah banyak dilakukan untuk mendukung pemantauan jarak jauh di berbagai sektor.
Meskipun demikian, penerapan pada HDT masih menghadapi kendala skalabilitas antarmuka dan stabilitas akses data pada kondisi jaringan yang buruk.
Tabel 1 merangkum posisi penelitian ini dib&ingkan dengan beberapa penelitian sejenis untuk mengidentifikasi celah ilmiah yang ada.
Berdasarkan perb&ingan pada Tabel 1, terlihat bahwa gap penelitian yang diisi oleh studi ini adalah ketiadaan antarmuka pemantauan kesehatan yang mampu menyeimbangkan fleksibilitas lintas platform dengan kelebihan aksesibilitas pada jaringan tidak Keunikan implementasi ini dalam konteks kesehatan kardiovaskular sangat penting karena sifat data fisiologis jantung yang dinamis, di mana deteksi anomali real-time seperti detak jantung dan tekanan darah bersifat kritis.
Dengan mengintegrasikan teknologi PWA yang mendukung kemampuan offline-first (Fern&o, 2.
L&asan Teori DT adalah representasi virtual yang hidup dan dinamis dari suatu objek, proses, maupun sistem fisik (Hergesheimer et al.
, 2.
DT diperbarui dengan data real-time dari sensor untuk memantau kinerja, menganalisis perilaku, dan mensimulasikan skenario masa depan untuk mengoptimalkan efisiensi dan membantu pengambilan keputusan (Bae.
Choi & Lee, 2.
(Trivedi, 2.
DT awalnya dikembangkan oleh NASA sekitar tahun 2010 untuk mereplikasi sistem yang kompleks.
NASA mengadopsi arsitektur tiga dimensi DT seperti yang diusulkan oleh Grieves (Tudor et al.
, 2.
Zein, dkk.
Digital Cockpit MultiplatformA 373 Penelitian Developing a digital twin framework for remotely monitoring nuclear reactor Hergesheimer.
N .
Digital twin for Electronic Centralized Aircraft Monitoring by machine learning algorithms Kilic.
U .
A modular computational framework for medical digital Masison.
J .
Building a Human Digital Twin (HDTwi.
Using Large Language Models for Cognitive Diagnosis: Algorithm Development & Validation Sprint.
G .
Tabel 1.
Tabel perb&ingan dengan penelitian sebelumnya Hasil Perbedaan Mengembangkan kerangka kerja DT yang Mengalihkan fokus implementasi dari aset berfungsi untuk memantau performa dan kondisi industri berskala besar ke ranah biologis keamanan fasilitas reaktor nuklir dari jarak jauh dengan membangun DC yang melalui representasi virtual yang dinamis.
memvisualisasikan data tubuh manusia secara personal melalui konsep HDT.
Mengimplementasikan sistem pemantauan Mentransformasi penggunaan sistem parameter mesin pesawat berbasis platform pemantauan dari mesin mekanik pesawat MATLAB yang menggunakan algoritma machine menjadi DC berbasis web untuk memantau learning untuk mendeteksi anomali performa indikator fisiologis jantung pasien secara secara otomatis.
real-time dan berkelanjutan.
Mengusulkan hub-&-spoke sebagai kerangka Mentransformasi arsitektur monolitik menjadi kerja antarmuka belakang untuk mengintegrasikan modular untuk meningkatkan efisiensi dan berbagai model matematika dan biologis yang independensi pengembangan fitur.
Membangun HDT menggunakan Large Language Models (LLM) untuk diagnosis kognitif.
Arsitektur lima dimensi, yang kemudian didefinisikan oleh Tao, terdiri dari Entitas Fisik.
Entitas Virtual.
Transmisi Data.
Koneksi, dan layanan (Annafii & Biddinika, 2.
Konsep ini kemudian diadaptasi menjadi HDT, yang mereplikasi individu manusia, baik seluruh tubuh, satu organ, atau sistem biologis (Tudu.
Sharma & Kumar, 2.
Perbedaan mendasar adalah bahwa DT pada mesin mereplikasi aset yang perubahannya relatif dijelaskan oleh fisika dan matematika, sementara HDT mereplikasi biologi dan kesadaran manusia, yang jauh lebih kompleks dan dipengaruhi oleh ribuan variabel genetik, lingkungan, dan perilaku yang belum sepenuhnya DC didefinisikan sebagai interface perangkat lunak yang berfungsi untuk mengintegrasikan, memvisualisasikan, dan menganalisis semua data multivariat yang dikumpulkan dari HDT, mulai dari data genomik statis hingga aliran data fisiologis realtime (Roopa & Venugopal, 2.
Fungsi utamanya adalah sebagai jendela interaksi bagi pengguna seperti petugas kesehatan, peneliti, atau individu itu sendiri dengan kembaran digital mereka (Mokhtari.
Hubungan antara DC.
DT, dan HDT, adalah hubungan antara interface visual dan inti pemrosesan.
DC adalah User Interface (UI) yang dirancang untuk memungkinkan dan menerjemahkan fungsi inti dari model DT yang kompleks, menjembatani model virtual dengan pengguna.
Desain pusat data yang efektif membutuhkan arsitektur perangkat lunak yang mudah dipelihara data multimodal berkelanjutan yang melekat pada sistem HDT.
Mengingat kebutuhan akan pemantauan real-time dan integrasi yang mudah dengan komponen yang luas seperti layanan AI dan LLM, struktur sistem yang mendasarinya sangat penting.
Pemisahan lapisan antarmuka depan dan antarmuka belakang, yang biasa disebut arsitektur Menggunakan LLM secara modular sebagai layanan pendukung rekomendasi teks pada DC, bukan sebagai inti pemrosesan utama decoupled, secara khusus meningkatkan skalabilitas dan pemeliharaan karena memungkinkan spesialisasi fungsional dan kem&irian pengembangan (Collins et , 2.
, hal ini memungkinkan kedua lapisan untuk menangani berbagai jenis beban kerja dan dapat diskalakan secara terpisah sesuai dengan kebutuhan lalu lintas atau pemrosesannya masing-masing.
Perkembangan teknologi seluler menyebabkan munculnya aplikasi berbasis internet, inovasi infrastruktur jaringan yang massif mengaabatkan meningkatnya aksesibilitas internet dan mengubah model distribusi perangkat lunak (Agrawal, 2.
Meskipun aplikasi native menawarkan kinerja dan akses perangkat keras yang lebih unggul, akan tetapi pengembangannya menghadapi tantangan meliputi kebutuhan akan pembuatan kode g&a, siklus penyebaran yang kompleks melalui app store, biaya dan sumber daya manusia yang tinggi, dan masalah fragmentasi perangkat, khususnya pada &roid (Mahmud et al.
, 2.
Aplikasi native, yang dibangun khusus untuk Operating System (OS) tertentu, seperti iOS atau &roid, memberikan kinerja yang unggul, akses perangkat keras, dan pengalaman pengguna yang Namun, aplikasi native membutuhkan biaya pengembangan dan pemeliharaan yang sangat tinggi karena kebutuhan akan pembuatan kode g&a (Souha et al.
, 2.
Sebaliknya.
Aplikasi Web adalah situs web yang diakses melalui browser, menggunakan basis satu kode web universal, sehingga biayanya lebih rendah, tetapi memiliki keterbatasan dalam akses ke perangkat keras dan sangat bergantung pada koneksi internet (Xie et al.
, 2.
Untuk menjembatani kesenjangan ini.
Aplikasi Hibrida muncul, yang membungkus kode web dalam wadah untuk memungkinkan distribusi melalui App Store dan akses ke fitur native (Wu et al.
, 2.
Meskipun menawarkan basis kode tunggal dan Tabel 2.
Perbedaan utama dalam aplikasi seluler (BrowserStack, 2.
374 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2026, hlm.
Criteria Native App Hybrid App Platform Berjalan pada platform spesifik .
OS, &roi.
Berjalan di banyak Berjalan di web platform dengan satu browser pada berbagai perangkat.
Development Menggunakan bahasa Menggunakan Dibangun dengan dan alat khusus teknologi web dengan HTML.
CSS, dan native container.
JavaScript.
Performance Performa tinggi dan pengalaman mulus.
Bergantung pada Performa baik Performa cukup baik, browser dan koneksi dengan offline dan di bawah native app.
User Experience Desain dan interaksi disesuaikan per Desain seragam lintas Bergantung pada platform dengan browser rendering.
Pengalaman mirip aplikasi, load cepat dan offline.
Offline bergantung Offline access dengan caching dan service Terbatas tanpa Offline Functionality konfigurasi Jenis keempat adalah PWA, yang merupakan aplikasi web yang ditingkatkan menggunakan teknologi Service Worker dan Web App Manifest untuk memberikan pengalaman seperti aplikasi native (Carmen Martyn Gaite, 2.
PWA unggul karena menawarkan kemampuan offline-first, distribusi yang sangat mudah seperti aplikasi web melalui tautan dan tanpa App Store, dan pembaruan otomatis yang cepat (Leshchuk et al.
, 2.
Tabel 2 memberikan perb&ingan rinci tentang perbedaan teknis dan pengalaman utama antara keempat platform aplikasi utama ini.
Tabel 2 memb&ingkan empat platform pengembangan aplikasi antarmuka depan utama:
Aplikasi Native.
Aplikasi Hybrid.
Aplikasi Web, dan PWA, berdasarkan kriteria seperti Kinerja.
Pengembangan, dan Fungsionalitas Offline.
Secara tradisional.
Aplikasi Native menawarkan kinerja yang unggul tetapi memiliki biaya pengembangan yang tinggi karena basis kode g&a, sementara Aplikasi Web memiliki biaya rendah tetapi fungsionalitas offline yang sangat terbatas.
Aplikasi Hybrid mencoba menjembatani kesenjangan ini tetapi seringkali menghasilkan kinerja yang lebih rendah dib&ingkan dengan Aplikasi Native.
PWA muncul sebagai solusi penyeimbang yang ideal karena memanfaatkan teknologi web ditambah Service Worker untuk fitur yang lebih baik.
Kemampuan PWA ini secara langsung mengatasi keterbatasan fungsionalitas offline di Aplikasi Web dan kompleksitas distribusi di Aplikasi Native, memvalidasi PWA sebagai pilihan yang tepat untuk DC HDT.
PWA adalah aplikasi web yang dibangun menggunakan teknologi web modern (HTML.
CSS.
JavaScrip.
dan dilengkapi dengan kemampuan seperti Service Worker dan Web App Manifest untuk meniru pengalaman aplikasi native.
PWA didukung oleh tiga pilar teknologi: Service Worker, yang bertindak sebagai proxy jaringan untuk caching dan kemampuan offline-first (Haryanto & Saputra Elsi, 2.
, tugas Web App Manifest adalah untuk menentukan tampilan pada layar ber&a, dan HTTPS Web App Mayoritas online, offline minimal.
PWA
Berjalan di web browser dengan menyerupai aplikasi.
Teknologi web dengan service untuk memastikan keamanan (Leshchuk et al.
, 2.
PWA merupakan pilihan ideal untuk DC HDT karena menggabungkan aksesibilitas web dengan kinerja seperti aplikasi native.
PWA mengatasi keterbatasan aplikasi native dalam hal distribusi dan pembaruan, memungkinkan distribusi yang mudah pembaruan yang cepat, otomatis.
METODE PENELITIAN
Arsitektur Sistem Digital Cockpit Berfokus pada implementasi PWA untuk antarmuka depan, penelitian ini mengadopsi desain arsitektur modular untuk mendukung persyaratan skalabilitas dalam konteks HDT.
Desain ini secara fundamental memisahkan lapisan antarmuka depan dari lapisan antarmuka belakang, untuk mewujudkan tujuan utama penelitian ini dan memastikan pembaruan, pengembangan, atau penambahan layanan dapat dilakukan secara independen di seluruh sistem tanpa mengganggu seluruh aplikasi,.
Arsitektur modular yang diusulkan memastikan bahwa sistem DC dapat mengakomodasi berbagai antarmuka pengguna, sambil tetap terpusat pada satu sumber data.
Gambar 1.
Arsitektur sistem DC modular untuk HDT Seperti yang diilustrasikan pada Gambar 1, arsitektur sistem DC modular untuk HDT terdiri dari empat komponen utama yang saling terhubung, yaitu:
antarmuka depan, antarmuka belakang.
Services, dan Data Lake.
Pada lapisan interface, pengguna berinteraksi dengan antarmuka depan, yang berfungsi Zein, dkk.
Digital Cockpit MultiplatformA 375 sebagai antarmuka pengguna yang mencakup Mobile Multiplatform dan Dynamic Simulation.
depan ini kemudian berkomunikasi dengan Application Programming Interface (API).
Antarmuka belakang utama bertindak sebagai pusat kendali yang bertanggung jawab untuk menangani logika bisnis, mengelola sesi pengguna, dan mengarahkan permintaan data real-time ke services yang Selanjutnya, terdapat Data Lake, yang berfungsi sebagai repositori data skala besar untuk menampung berbagai jenis data.
Terakhir, sistem ini dilengkapi dengan Layanan, seperti LLM dan Modul AI.
Layanan-layanan ini bersifat modular atau dapat dipasang dan dilepas.
Fokus Implementasi Antarmuka Depan Implementasi DC dapat dilakukan pada berbagai jenis aplikasi seluler, yaitu Mobile Native.
Mobile Web Application.
PWA, dan Hybrid Application, yang masing-masing menawarkan Untuk penelitian ini, fokus akan diarahkan pada pengoptimalan dan pengujian implementasi DC pada satu jenis platform, yaitu PWA.
Gambar 2.
Antarmuka pengguna yang dapat diimplementasikan Seperti yang diilustrasikan pada Gambar 2.
DC berpotensi digunakan pada berbagai perangkat seperti AR Glasses.
Desktop.
Mobile Multiplatform, dan interface potensial lainnya.
Dalam ruang lingkup Mobile Multiplatform, terdapat empat jenis platform aplikasi yang berbeda: Mobile Native.
Mobile Web Application.
PWA, dan Hybrid Application, yang dipilih sebagai fokus penelitian ini.
Pemilihan PWA didasarkan pada keunggulannya dalam menjembatani fungsionalitas native.
Implementasi DC saat ini bertujuan untuk mengeksplorasi bagaimana PWA dapat memanfaatkan arsitektur antarmuka belakang modular yang telah dirancang untuk menyediakan pemantauan kesehatan kardiovaskular secara realtime dengan kinerja optimal.
Prototipe Pembuktian Konsep Kelayakan penelitian ini ditunjukkan melalui pengembangan prototipe bukti konsep DC yang dirancang sebagai PWA.
Implementasi tersebut menggunakan framework Laravel versi 11 yang dikonfigurasi memanfaatkan beberapa API untuk menghubungkan antarmuka depan dengan antarmuka Implementasi ini juga mengadopsi arsitektur modular untuk memastikan skalabilitas dan independensi fungsional.
Arsitektur sistem DC secara keseluruhan dalam konteks HDT terdiri dari empat komponen utama yang saling terhubung: Pengguna, antarmuka depan, antarmuka belakang.
Services, dan Datalake.
Desain terpisah hal ini memungkinkan pembaruan, pengembangan, atau penambahan layanan dilakukan secara independen tanpa mengganggu aplikasi secara keseluruhan.
Desain UI dimulai dengan wireframe yang sepenuhnya mematuhi prinsip desain responsif dan Mobile-First konsistensi data di seluruh perangkat.
Wireframe tersebut menguraikan dasbor utama yang mengelola biodata pasien, analisis kesehatan, dan blok vital sign yang penting untuk visualisasi data secara real-time.
Semua data dan informasi berkaitan pasien yang ditampilkan dalam prototipe ini merupakan data dan informasi tiruan .
untuk menjaga privasi dan memenuhi aspek etika dalam bidang medis.
Antarmuka
PWA
kemampuannya untuk memberikan pengalaman seperti aplikasi native, kemudahan distribusi, dan kemampuan offline.
Fungsionalitas offline yang penting ini diaktifkan oleh Service Worker, yang bertindak sebagai proxy jaringan yang berjalan di latar belakang browser.
Saat pengguna offline.
Service Worker mencegat permintaan dan mengambil aset penting yang di-cache dan data sinkronisasi terbaru dari Cache Offline.
Antarmuka belakang diimplementasikan untuk bertindak sebagai pusat kendali utama untuk semua logika bisnis, sekaligus mengelola akuisisi data dan integrasi layanan.
Antarmuka belakang ini menangani penyerapan berbagai aliran data perawatan kesehatan dari Datalake, termasuk data deret waktu real-time dari sensor biometrik dan rekam medis.
Yang terpenting, antarmuka belakang menyediakan antarmuka untuk mengintegrasikan layanan modular seperti Modul AI untuk prediksi atau pelatihan dan LLM untuk menghasilkan rekomendasi tekstual, serta mengarahkan data yang diproses ke dan dari komponen yang dapat dihubungkan ini.
Struktur ini memastikan tata kelola mengintegrasikan berbagai model, sambil menjaga agar antarmuka depan PWA tetap ringan.
Lingkungan Pengujian Implementasi PWA DC akan diuji untuk memvalidasi fungsionalitas, kompatibilitas, dan responsivitasnya di berbagai lingkungan, khususnya yang terkait dengan aplikasi seluler dan web.
Evaluasi ini akan menggunakan berbagai perangkat, 376 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2026, hlm.
termasuk laptop, perangkat iOS, dan &roid, untuk memastikan kinerja lintas platform yang optimal.
antarmuka belakang utama.
Sebaliknya, jika perangkat offline.
Service Worker segera mengambil aset penting seperti shell dan interface aplikasi, serta data yang paling baru disinkronkan dari Cache RAM Offline atau Penyimpanan Lokal.
Mekanisme caching dan routing ini memastikan respons cepat kepada pengguna di berbagai kondisi jaringan, sekaligus mengoptimalkan komunikasi dengan arsitektur antarmuka belakang modular, memvalidasi efisiensi PWA sebagai jalur antarmuka depan ideal untuk infrastruktur yang dapat diskalakan.
Gambar 3.
Lingkungan Pengujian Lingkungan pengujian yang ditunjukkan pada Gambar 3 mencakup tiga lingkungan utama: Laptop, &roid, dan iOS.
Pengujian di ketiga lingkungan ini PWA mempertahankan konsistensi antarmuka pengguna dan kinerja real-time di seluruh sistem operasi seluler, serta memverifikasi aksesibilitas dan fungsionalitas penuhnya saat diakses melalui browser di perangkat desktop dan seluler.
Detail teknis dan hasil pengujian ini akan dijelaskan lebih lanjut di bagian Hasil dan Diskusi.
HASIL DAN DISKUSI
Hasil Implementasi Sistem Wireframe Desain UI PWA DC dibuat melalui proses wireframing, yang berfokus pada desain responsif untuk Desktop dan Mobile, serta penyajian informasi kesehatan kardiovaskular yang intuitif.
Pada gambar 5 menyajikan kerangka kerja versi Desktop.
Sisi atas menunjukkan halaman utama yang berfungsi sebagai dasbor ringkasan, dilengkapi dengan top bar untuk akses cepat ke fitur-fitur seperti layar penuh dan pengalih tema, serta side bar navigasi yang konsisten.
konten utama terdiri dari sapaan, foto profil, dan analisis kesehatan, yang direncanakan untuk menyajikan ringkasan atau rekomendasi yang dihasilkan oleh LLM.
Arsitektur PWA Penelitian ini berfokus pada implementasi DC pada arsitektur PWA.
Arsitektur PWA DC pada dasarnya dirancang untuk mendukung kemampuan offline-first, memisahkan lapisan antarmuka depan yang ringan dari logika bisnis yang kompleks di antarmuka belakang utama.
Mekanisme inti dari PWA ini bergantung pada Service Worker, sebuah skrip yang berjalan di latar belakang browser dan bertindak sebagai proxy jaringan, seperti yang digambarkan pada Gambar 4.
Gambar 5.
Wireframe PWA versi desktop Gambar 4.
Arsitektur PWA Gambar 4.
Menunjukkan ketika pengguna memulai permintaan dari perangkat mereka.
Service Worker segera mencegat permintaan tersebut.
Jika perangkat online atau terhubung ke jaringan, permintaan diprioritaskan dan diteruskan langsung ke Gambar 6.
Wireframe PWA versi mobile Zein, dkk.
Digital Cockpit MultiplatformA 377 Pada Gambar 5 menunjukkan proses pembuatan wireframe aplikasi versi desktop.
Bagian utama adalah blok vital sign yang menampilkan data sensor real-time dari wearable device, diikuti oleh Examination History Table dan Daily Task Table untuk p&uan aktivitas harian yang dipersonalisasi.
Sisi bawah menunjukkan kerangka kerja halaman detail pasien yang menyediakan informasi pasien yang komprehensif, termasuk biodata sederhana pasien dan detail pasien, t&a vital pasien, garis waktu pasien yang mendokumentasikan riwayat perjalanan pasien, tujuan dan aktivitas, dan tindakan untuk tugas medis harian tertentu.
Selanjutnya.
Gambar 6 menunjukkan versi mobile dari wireframe, yang dirancang responsif untuk mengakomodasi layar vertikal.
Sisi kiri wireframe mobile menampilkan informasi utama:
Top Bar menampilkan tombol navigasi untuk membuka Sidebar dan ikon profil, diikuti oleh presentasi data yang tersusun vertikal, seperti biodata pasien .
, biodata pasien .
, dan patienAos time line.
Saat pengguna menggulir ke bawah, tampilan berubah .
isi kana.
, menampilkan blok vital sign yang tersusun vertikal dan menonjol, seperti tekanan darah, detak jantung.
SpO2, dan durasi tidur, diikuti oleh deskripsi pasien yang merinci kondisi klinis pasien.
Desain wireframe adaptif ini memastikan bahwa semua data HDT, baik untuk konsumsi desktop maupun mobile, tetap dapat diakses dengan cepat dan terorganisir dengan baik, yang merupakan hal mendasar untuk pengalaman pengguna yang sukses.
Hasil Antarmuka Pengguna Setelah fase implementasi.
PWA DC divalidasi melalui pengujian di berbagai lingkungan operasional untuk memastikan kesesuaiannya.
Pengujian ini sangat penting untuk menunjukkan bahwa PWA, sebagai antarmuka depan yang dipilih, mampu berkomunikasi secara optimal dengan antarmuka belakang modular yang dirancang dan memberikan pengalaman pengguna yang konsisten di berbagai Seperti yang dijelaskan di bagian pengujian, implementasi ini secara khusus diuji di tiga lingkungan utama: Desktop, iOS, dan &roid.
Visualisasi hasil pengujian ini menunjukkan PWA konsistensi antarmuka pengguna di berbagai sistem Tampilan pada Gambar 7 menunjukkan bagaimana PWA ditampilkan pada sistem iOS.
Responsivitas PWA terlihat jelas melalui susunan elemen dasbor, yang secara otomatis tersusun dalam satu kolom untuk mengakomodasi layar vertikal yang Meskipun diakses melalui browser Safari pada perangkat seluler, antarmuka dengan jelas menyajikan data pasien untuk "Anna binti Anna," 18 Tahun.
Diagnosis: Flu, diikuti oleh blok data vital sign seperti HEART RATE .
,6 Bp.
Format tampilan ini memvalidasi keberhasilan PWA dalam mempertahankan fungsionalitas dan keterbacaan data medis penting di lingkungan seluler.
Gambar 7.
Tampilan iOS Gambar 8.
Tampilan &roid Gambar 8 menyajikan tampilan layar penuh PWA di lingkungan desktop.
Tampilan ini memanfaatkan lebar layar yang lebih besar dengan mengatur elemen secara horizontal, mencerminkan desain dasbor ikhtisar.
Vital sign data card, seperti HEART RATE .
,6 Bp.
dan BLOOD PRESSURE .
/75 mmH.
, disusun berdampingan, memberikan tata letak yang efisien untuk kebutuhan data para profesional perawatan kesehatan.
Rendering yang sukses ini memvalidasi bahwa antarmuka depan PWA mampu merespons permintaan dan menampilkan data yang diambil dari antarmuka belakang modular secara &al pada layar yang lebih lebar.
Gambar 9.
Tampilan dekstop Gambar 9 menyajikan hasil pengembangan antarmuka aplikasi versi desktop yang mengadopsi elemen kerangka halaman utama secara konsisten.
378 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2026, hlm.
Tabel 3.
Tabel pengujian blackbox Tested Test Scenario Status Component Navigation Click the "Patient" (O.
Pass Menu Click the "Doctor" (O.
Pass Click the "Patient (O.
Pass Detail" menu Click the "Patient List" (O.
Pass Click the "Model" (O.
Pass Organ Model Select the "Utuh" (O.
Pass Filter Select the "urat" option (O.
Pass Select the "dalam" (O.
Pass Select the "setengah" (O.
Pass Patient Profile Verify patient data (O.
Pass ame, age.
Verify diagnosis info & (O.
Pass length of stay Health Status Verify Heart Rate (O.
Pass Bp.
Verify Blood Pressure (O.
Pass /74 mmH.
Verify SpO2 display (O.
Pass Verify Sleep Duration (O.
Pass display .
8 H)
Medical Verify patient condition (O.
Pass Analysis analysis display Verify displayed (O.
Pass Examination Scroll through the (O.
Pass History examination history list Verify columns (Event, (O.
Pass Performed At.
By.
Note.
Verify date & time of (O.
Pass Daily Tasks Verify list of 10 daily (O.
Pass Verify status "10 of 10 (O.
Pass Verify time & (O.
Pass description of each task Simulate checking (O.
Pass completed tasks Layout Test on mobile screen (O.
Pass Responsiveness size Test on tablet screen (O.
Pass Test on desktop screen (O.
Pass Test scrolling in each (O.
Pass Back Click the back/return (O.
Pass Navigation button from each page Click navigation to (O.
Pass another menu Data Refresh Pull-to-refresh on (O.
Pass health data Pull-to-refresh on (O.
Pass examination history Pull-to-refresh on daily (O.
Pass Visualisasi data kesehatan ditampilkan secara real-time melalui dasborard interaktif, yang mencakup parameter krusial seperti HEART RATE .
,6 Bp.
BLOOD PRESSURE .
/75 mmH.
SpO2 .
%), dan Sleep Time .
,8 H).
Informasi tersebut disajikan dalam format kartu berwarna untuk mempermudah keterbacaan, yang kemudian dilengkapi dengan tabel EXAMINATION HISTORY dan DAILY TASK sebagai instrumen pemantauan aktivitas medis serta p&uan tugas harian pengguna.
Pengujian Blackbox Pengujian blackbox pada DC HDT jantung dilakukan untuk memverifikasi fungsionalitas sistem tanpa mengetahui struktur kode internal.
Pendekatan ini berfokus pada perspektif pengguna akhir, dengan berinteraksi secara benar sesuai dengan kebutuhan DT jantung, sebagai representasi virtual dari organ pasien, memerlukan pengujian yang menyeluruh untuk menjamin keakuratan data medis serta kelengkapan fitur pemantauan.
Pengujian mencakup seluruh alur kerja sistem, mulai dari navigasi menu dan visualisasi model jantung, penampilan parameter fisiologis, hingga pengelolaan tugas harian.
Setiap komponen diuji berdasarkan skenario nyata yang digunakan oleh tenaga kesehatan, dengan penekanan khusus pada akurasi data kesehatan kardiovaskular dan konsistensi informasi pada berbagai tampilan model Hasil blackbox testing yang dipapaprkan pada Tabel 3 menunjukkan kinerja optimal dari seluruh komponen DC dengan tingkat keberhasilan seratus Sistem mampu menampilkan data real-time parameter jantung secara akurat, seperti heart rate, blood pressure, dan SpO2, serta menyediakan analisis medis yang komprehensif untuk mendukung pengambilan keputusan klinis.
Navigasi antar berbagai tampilan model jantung .
hole, vein, deep, dan hal.
berjalan mulus tanpa gangguan teknis.
Fitur daily task management dan examination history terbukti &al dalam mendukung alur kerja perawatan pasien.
Responsivitas tata letak pada berbagai ukuran layar memastikan pengalaman pengguna yang konsisten baik pada perangkat mobile maupun desktop.
Hasil ini menegaskan kesiapan sistem untuk diterapkan pada lingkungan klinis yang menuntut tingkat ke&alan tinggi.
Kompatibilitas Pengujian kompatibiltas dilakukan untuk memastikan DC dari HDT jantung dapat beroperasi secara optimal pada berbagai perangkat dan platform yang digunakan oleh tenaga kesehatan.
Parameter yang diukur meliputi stabilitas tata letak, responsivitas antarmuka, kecepatan pemuatan data vital jantung, serta kelancaran navigasi antar tampilan Zein, dkk.
Digital Cockpit MultiplatformA 379 model jantung.
Pendekatan pengujian menggunakan skala Likert empat poin untuk menilai kualitas pengalaman pengguna pada setiap perangkat, dengan mempertimbangkan kebutuhan visualisasi real-time DT.
Perangkat merepresentasikan ekosistem teknologi yang beragam, mulai dari perangkat flagship hingga midrange smartphone yang umum digunakan dalam konteks layanan kesehatan.
Tabel 4.
Tabel pengujian kompatibiltas C2 C3 C4 C5
True
16/16
True 13/16 81.
True 14/16 87.
True 11/16 68.
True
16/16
True
16/16
Pada Tabel 4, digunakan sistem pengkodean untuk menyederhanakan penyajian hasil pengujian Kode merepresentasikan perangkat uji, yaitu D1: iPhone 11 Pro Max.
D2: Infinix Hot 50.
D3: Poco X6.
D4:
Oppo.
D5: Windows Desktop, dan D6: MacBook Pro.
Kode C1 menunjukkan status implementasi, di mana nilai True men&akan aplikasi DC dapat berjalan dengan baik tanpa kendala fungsional pada perangkat Kode C2 merepresentasikan layout stability.
C3 menunjukkan interface responsiveness.
C4 merepresentasikan data loading speed, dan C5 seluruhnya dinilai menggunakan skala Likert empat poin, yaitu nilai 4 (Very Goo.
, 3 (Goo.
, 2 (Fai.
, dan 1 (Poo.
Kode C6 menunjukkan total Likert score yang diperoleh dari akumulasi nilai C2 hingga C5 terhadap skor maksimum 16, sedangkan C7 merepresentasikan tingkat compatibility dalam bentuk persentase.
Hasil pengujian compatibility menunjukkan kinerja yang sangat baik dengan nilai rata-rata sebesar Perangkat flagship seperti iPhone 11 Pro Max.
Windows Desktop, dan MacBook Pro mencapai skor sempurna 100% pada seluruh parameter, yang menjamin pengalaman terbaik untuk visualisasi digital twin jantung secara detail.
Perangkat midrange seperti Poco X6 dan Infinix Hot 50 juga menunjukkan kinerja yang sangat memuaskan dengan nilai di atas 80%, yang mengindikasikan aksesibilitas sistem yang luas.
Meskipun perangkat Oppo menunjukkan performa yang lebih rendah pada aspek navigasi, secara keseluruhan sistem tetap terbukti sangat kompatibel di berbagai platform.
Diskusi Implementasi PWA sebagai DC yang terintegrasi dengan arsitektur modular HDT telah berhasil memvalidasi solusi terhadap keterbatasan yang diidentifikasi dalam penelitian sebelumnya, khususnya mengenai skalabilitas, fleksibilitas antarmuka, dan dukungan operasional offline.
Mengadopsi arsitektur terpisah yang memisahkan antara antarmuka depan dan antarmuka belakang telah terbukti menjadi pilihan yang lebih baik daripada arsitektur monolitik.
Pemisahan ini membuat setiap fungsi sistem bekerja lebih fokus pada tugasnya dan memungkinkan pengembangan fitur dilakukan secara m&iri tanpa saling Secara spesifik, arsitektur modular ini mengurangi beban kerja pengembangan karena hanya menggunakan satu basis kode untuk semua platform.
Hal ini menjawab permasalahan yang ada di penelitian sebelumnya yang menggunakan kode g&a dan membutuhkan biaya yang lebih besar.
Temuan utama dari penelitian ini adalah keberhasilan PWA dalam menjembatani kesenjangan antara fleksibilitas web dan ke&alan native, sekaligus secara langsung menjawab masalah keterlambatan pembaruan konten dan fragmentasi perangkat.
Meskipun penelitian lain mengusulkan hybrid application untuk mengatasi kendala lintas platform, pendekatan tersebut masih memiliki kelemahan pada performa dan ketergantungan pada proses distribusi di app store.
Sebaliknya.
PWA yang dikembangkan Service Worker offline-first keberhasilan 100% pada fitur caching offline, hal ini memastikan bahwa selama fase kritis pemantauan kardiovaskular, kehilangan koneksi internet tidak menyebabkan hilangnya akses data pasien yang sudah tersimpan.
Mekanisme ini memastikan keberlanjutan layanan dalam kondisi jaringan yang tidak stabil.
Selain fungsionalitas, aspek kompatibilitas telah divalidasi secara ekstensif dengan skor rata-rata 89,58%.
Angka ini menunjukkan peningkatan aksesibilitas yang inklusif, berbeda dengan aplikasi hibrid yang sering mengalami penurunan pengalaman pengguna pada perangkat spesifikasi menengah, hasil pengujian ini menunjukkan bahwa perangkat mid-range seperti Poco X6 dan Infinix Hot 50 tetap mampu mencapai kinerja stabil dengan skor masing-masing sebesar 87,50% dan 81,25%.
Hal ini membuktikan bahwa DC yang dirancang tidak eksklusif bagi perangkat flagship seperti iPhone 11 Pro Max dan MacBook Pro yang mencapai 100%, melainkan mampu menjangkau infrastruktur teknologi yang beragam di lingkungan kesehatan.
Dengan validasi ini.
PWA terbukti sebagai pilihan ideal untuk HDT DC yang dapat diadopsi di berbagai tingkatan perangkat keras rumah sakit.
Penelitian selanjutnya dapat mengeksplorasi pengujian skala
penuh di lingkungan klinis nyata dan integrasi data
yang lebih kompleks dengan model simulasi HDT
KESIMPULAN
Penelitian ini berhasil menyajikan dan memvalidasi sistem DC inovatif untuk pemantauan HDT kardiovaskular.
Dengan mengadopsi arsitektur 380 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2026, hlm.
modular yang memisahkan antarmuka depan dan antarmuka belakang, sistem ini secara fundamental telah mencapai skalabilitas dan pemeliharaan yang unggul, membuka jalan bagi integrasi yang lebih fleksibel dengan layanan cerdas seperti AI dan LLM.
Implementasi kunci dari sistem ini adalah penggunaan PWA sebagai antarmuka depan, yang telah terbukti efektif dalam memberikan pengalaman seperti aplikasi native dengan manfaat tambahan berupa fungsionalitas offline-first yang didukung oleh Service Worker.
Ke&alan fungsional dan kompatibilitas yang tinggi di berbagai lingkungan operasional seperti Desktop, &roid, dan iOS menegaskan bahwa DC berbasis PWA ini merupakan solusi yang &al, mudah diakses, dan siap diadopsi untuk mengatasi tantangan kontinuitas layanan dalam sistem pemantauan kesehatan digital.
Namun, penelitian ini memiliki beberapa keterbatasan yang dapat dikembangkan pada masa mendatang, di antaranya adalah penerapan pada sampel data dan use cases yang lebih luas serta deployment pada lingkungan jaringan rumah sakit yang lebih besar agar level generalisasi solusi yang ditawarkan dapat teruji lebih lanjut.
Hasil penelitian ini memiliki implikasi praktis yang signifikan jika diterapkan pada rumah sakit dan fasilitas kesehatan di Indonesia, mengingat beragamnya kapabilitas peralatan mobile yang digunakan masyarakat dan bervariasinya kapasitas jaringan yang tersedia, terutama jaringan seluler.
DAFTAR PUSTAKA