JOISIE (Journal Of Information Systems And Informatics Engineerin.
Vol.
No.
Juni 2025.
Hlm 277-292 Received: 8 Mei 2025 Revised: 28 Mei 2025.
Accepted: 26 Juni 2025
p- ISSN: 2503-5304
e- ISSN: 2527-3116
PERANCANGAN DAN PENGEMBANGAN APLIKASI HAJI UMRAH
MENGGUNAKAN REACT NATIVE PADA PDA TRAVEL INHU KUANSING
Yaldri Oktra Prananda.
Muhammad Jazman.
Anofrizen.
Eki Saputra.
Syaifullah.
Arif Marsal.
Program Studi Sistem Informasi.
Fakultas Sains dan Teknologi.
Universitas Islam Negeri Sultan Syarif Kasim Riau.
Indonesia Email: 111850312413@students.
uin-suska.
id,2jazman@uin-suska.
id ,3anofrizen@ uinsuska.
id,4eki.
saputra@uin-suska.
id,5syaifullah@uin-suska.
id,6arif.
marsal@uin-suska.
Abstract PDA Travel Inhu Kuansing is a travel agency for haj and umrah operating in the Indragiri Hulu and Kuantan Singingi regions.
It is a partner of PT.
PDA Tigi Maaya (PDA Trave.
PDA Travel Inhu Kuansing is managed under CV.
Sumatera Elang Perkasa.
In the business process of PDA Travel Inhu Kuansing, there are still issues that pose obstacles in the administration processing which is still done manually, registration that has not yet utilized a digital system, and package promotion that is still limited in scope.
From these obstacles, the topic of seeking solutions has emerged.
Research objective for designing and developing a mobile-based application.
This application is created to assist management in registration, data processing, and providing information on travel packages and tourism to the people of Indragiri Hulu and Kuantan Singingi.
The application development uses the React native framework and Firebase.
The development method uses DevOps lifecycle.
The DevOps method has several stages in the first development in planning, code, building, testing, release, deploy, operating, and monitor.
Many tools to recommended in DevOps such as Jenkins.
GitLab.
Docker, and Firebase deployment, which are used according to needs in the DevOps stages.
The final research is a travel application for Hajj and Umrah built using React native.
For the future, next stage it is hoped that the use of automation tools recommended by DevOps will be applied to application development.
The development of features is expected to be better than those currently available in the application.
Keywords: Aplication.
React native.
DevOps lifecycle.
Firebase Abstrak PDA Travel Inhu Kuansing merupakan biro travel haji dan umrah wilayah Indragiri Hulu dan Kuantan Singingi.
Merupakan partner dari PT.
PDA Tigi Maaya (PDA Trave.
PDA Travel Inhu Kuansing berada dalam naungan manajemen CV.
Sumatera Elang Perkasa.
Didalam proses bisnis PDA Travel Inhu Kuansing masih terdapat masalah menjadi kendala dalam pengolahan administrasi masih secara manual, pendaftaran belum memakai sistem digitalisasi dan promosi paket dalam lingkup yang terbatas.
Dari kendala yang ada muncul topik untuk mencari solusi.
Dilakukanlah penelitian dengan tujuan untuk merancang dan mengembangkan sebuah aplikasi berbasis mobile.
Aplikasi dibuat untuk membantu manajemen dalam pendaftaran, pengolahan data dan memberikan informasi paket perjalanan dan wisata kepada masyarakat indragiri hulu dan kuantan singingi.
Pengembangan aplikasi menggunakan framework react native dan Firebase.
Metode pengembangan menggunakan DevOps lifecycle.
DevOps terdiri dari planning, coding, build, testing, release, deployment, operate, monitor.
Banyak tools yang direkomendasi pada DevOps seperti Jenkins.
GitLab.
Docker.
Firebase deployment yang dipakai sesuai kebutuhan dalam tahapan DevOps.
Hasil akhir penelitian ini berupa aplikasi travel haji dan umrah yang dibangun mengunakan React native.
Pada masa depan diharapkan penggunaan tools automasi yang direkomendasikan DevOps untuk pengembangan aplikasi.
Pembuatan fitur lebih baik dari yang ada pada aplikasi saat ini.
Kata Kunci: Aplikasi.
React native.
DevOps lifecycle.
Firebase PENDAHULUAN Indonesia dengan penduduk 269 juta jiwa ke 4 di dunia, dan muslim mencapai 231.
06 juta jiwa, https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
278 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025 terbanyak di dunia.
(Wakhid, 2.
Muslim memiliki kewajiban melaksanakan 5 rukun islam.
Salah satunya menunaikan ibadah haji.
(Kamaluddin et al.
, n.
Haji adalah perjalanan ritual ke Makkah.
Dilakukan dibulan ke-12 Dzulhijjah.
Haji mencakup banyak ritual yang harus dilakukan sesuai (Pashan, 2.
Haji juga disebut sebagai ibadah puncak dalam agama islam.
Selain berhaji.
Banyak jamaah berziarah bertujuan untuk mengunjungi Madinah sebelum atau sesudah menunaikan ibadah haji.
Umrah, ritual lain yang berhubungan dengan haji, dapat dilakukan kapan saja sepanjang (Khan & Shambour, 2.
Umrah dalam bahasa memiliki makna AoziarahAo.
kegiatan umrah adalah menziarahi atau yang melibatkan fisik.
(Noor, 2.
Ibadah haji merupakan ritual ibadah yang kompleks melibatkan banyak persiapan dan orang yang terlibat.
Melakukan perjalanan Ibadah haji dan ibadah umrah diperlukan travel sebagai pihak bertanggung jawab akan kelancaran berbagai proses ibadah haji dan umrah.
Salah satu Travel Haji dan Umroh yang berada pada Provinsi Riau yaitu PT.
PDA Tigi Maaya (PDA Trave.
PDA adalah singkatan dari AuPerjalanan Dunia AkhiratAy, merupakan perusahaan di bidang travel haji dan umrah, tour muslim, serta jual beli tiket pesawat dengan berbagai maskapai.
PDA Travel Inhu Kuansing biro travel haji dan umrah wilayah Indragiri Hulu dan Kuantan Singingi.
Merupakan partner dari PT.
PDA Tigi Maaya (PDA Trave.
PDA Travel Inhu Kuansing berada dalam naungan manajemen CV.
Sumatera Elang Perkasa yang mana terdapat gentlemens agreement dengan PDA Travel.
Untuk melakukan pendaftaran Haji khusus & umrah PDA Travel Inhu Kuansing di Jl.
Yakub Jabar Kec.
Peranap.
Selama bergabung PDA Travel Inhu Kuansing belum menggunakan teknologi informasi untuk proses bisnis yang mana selama ini dilakukan secara manual.
Dan juga kegiatan promosi yang dilakukan hanya dari spanduk dan media sosial pada umumnya.
PDA Travel Inhu Kuansing terjadi kendala seperti data yang lupa dicatat, kehilangan data transaksi, dan dokumen yang hilang.
Selain itu dengan jangkauan wilayah 2 kabupaten yang hanya berpusat di satu kantor pelayanan dirasa kurang dalam menjangkau calon jamaah.
Penggunaan teknologi informasi menjadi solusi untuk masalah kebutuhan manajemen travel dan jamaah.
Dengan masalah yang terjadi PDA Travel Inhu Kuansing, faktor teknologi informasi dalam bentuk sebuah aplikasi travel yang dapat menangani pendaftaran, pengolahan data, dan menjadi media promosi paket yang disediakan oleh PDA Travel Inhu Kuansing.
Sebab teknologi informasi solusi perekonomian kreatif baru yang berbasis digital.
(Piantari et al.
, 2.
teknologi informasi saat ini mampu mengintegrasikan setiap detail yang dulunya mustahil dilakukan.
(Ariyani et al.
, 2.
Pengembangan aplikasi menggunakan framework react native dan Firebase.
Metode pengembangan menggunakan DevOps lifecycle.
DevOps terdiri dari planning, coding, build, testing, release, deployment, operate, monitor.
Metode ini digunkan karena DevOps tidak terikat waktu dalam pengerjaannya proyek.
LANDASAN TEORI
REACT NATIVE
React native adalah framework mobile yang dikembangkan oleh Facebook.
(Zhou et al.
, 2.
Tujuannya adalah hanya menggunakan satu bahasa pemrograman untuk membangun aplikasi mobile di 2 Operating System.
(Canty et al.
, 2.
React native merupakan framework Javascript dikembangkan dari (Brito et al.
, 2.
React native cocok bagi developer yang telah biasa yang melakukan pengembangan front-end Web.
Memerlukan sedikit penyesuaian untuk belajar bagi yang biasa menggunakan javascript.
(Hu & You, 2.
FIREBASE Firebase adalah layanan yang disediakan oleh Google yang mencakup feedback, penyimpanan cloud, dll.
(Ohyver et al.
, 2.
Tidak berbayar hingga batas tertentu.
Pada pembuatan aplikasi menggunakan firebase memberikan layanan seperti autentikasi untuk login dan pendaftaran pengguna.
Data pengguna terenkripsi sesuai standar google.
(Raji et al.
, 2.
Firebase merupakan realtime database tersimpan di google cloud dan support beberapa OS seperti Android, iOS dan juga Website.
(Priya et al.
, 2.
firebase menyimpan Data dalam struktur JSON (Java Script Object Notatio.
(Sudiartha et al.
, 2.
Firebase meyediakan layanan realtime database, cloud, studio coding, dan banyak layanan lainnya yang disediakan google.
(Firman Maulana et al.
, 2.
https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
METODE PENELITIAN
Metode DevOps digunakan untuk penelitian ini.
DevOps gabungan dua proses berbeda yaitu proses Pengembangan dan Operasi, maka jadilah DevOps.
Gabungan tersebut akan bertanggung jawab atas (Sun et al.
, 2.
Metode pengembangan memiliki tahapan yaitu Plan.
Code.
Build.
Test.
Release.
Deploy.
Operation.
Monitoring membentuk dua lingkaran yang bergabung tidak putus di titik (Gokarna & Singh, 2.
Metode ini merupakan perluasan dari metode Agile dan Waterfall.
Kekurang metode lama ketika bagian developer ingin menambah fitur dan memperbarui produk lalu tim Operation hanya ingin keandalan tanpa banyak perubahan.
DevOps hadir sebagai penghubung antara tim developer dan operation.
Dimana kedua pihak saling bersinergi dalam pengembangan kedepannya.
Devops diharapkan mampu menjadi strategi dalam mengatasi masalah pengembangan produk.
(Battina.
DevOps tidak terikat oleh waktu, sehinga jika ingin pengembangan dengan cepat menggunakan metode DevOps lifecycle ini.
(Yarlagadda, 2.
Gambar berikut adalah alur proses penelitian menggunakan metode Devops.
Gambar 1.
Metode DevOps TOPIK DAN JUDUL Penentuan topik pada penelitian mencari suatu masalah yang menjadi kendala pada proses bisnis Ditemukan sebuah kendala dimana proses bisnis pendaftaran masih secara manual.
kendala file yang hilang dan tidak teratur.
Proses lama ini akan diganti menjadi aplikasi mobile android yang nanti diharapkan menjadi solusi atas kendala yang terjadi dan juga sebagai promosi paket perjalanan pada PDA Travel Inhu Kuansing.
IDENTIFIKASI MASALAH
Pada penelitian ini ditemukan sebuah permasalahan yang menjadi kendala, bahwa proses dan alur bisnis yang ada belum menggunakan teknologi informasi.
Setelah dilakukan observasi dan wawancara secara lebih detail dimana ditemukan kendala dalam proses pendaftan paket haji, umrah dan islamic tour pada PDA Travel Inhu Kuansing dimana masih bersifat manual yang menjadi kendala dalam pengolahan data jamaah dan promosi.
ANALISA KEBUTUHAN
Analisa kebutuhan dilakukan bertujuan mencari persiapan kebutuhan sistem dan juga penunjang pengembangan aplikasi dengan melihat sistem yang berjalan sekarang lalu diusulkan sistem baru dari analisa kekurangan dari kekurangan pada sistem yang sedang berjalan.
PLAN
Plan merupakan level pertama pada DevOps.
Dimana menjelaskan secara detail desain pengembangan aplikasi.
(Yarlagadda, 2.
Desain dibuat dengan diagram UML (Unified Modelling Languag.
UML sebagai salah satu tools yang menjadi acuan standar dalam tahapan pengembangan sistem object oriented.
(Alamsyah et al.
, 2.
UML menjadi bahasa untuk memvisualisasi rancangan sistem perangkat lunak.
Terdapat 8 diagram dalam UML.
(Yusman, 2.
Pada penelitian ini hanya dua diagram yang dipakai usecase dan class dalam pengembangan.
UML membantu pengembang membuat rancangan sistem dalam bentuk yang baku dan mudah dimengerti sehingga komunikasi pada proyek https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
280 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025 menjadi baik.
(Affandi & Syahputra, 2.
Pengembangan aplikasi Dipimpin manajer proyek.
Penentuan SOP, aturan kerjaan dan pendapat dari stakeholder, owner proyek, dan jika memungkinkan masukan user dikumpulkan untuk digunakan untuk menyusun rencana pengembangan yang terjadi pada tahap ini.
(Yarlagadda, 2.
CODE
Di level ini, akan dimulai penulisan kode untuk menyusun aplikasi yang akan dibuat.
Pilihan tools kode editor yang yang ada sangat banyak, terdapat satu yang menjadi pilihan banyak developer adalah VSCode.
Jika penyusunan kode yang dibuat selesai, hasil akan dilakukan push dan dilakukan proses pemeriksaan kode ke repository, repository yang menjadi pilihan adalah Github.
(Riyadi, 2.
BUILD kode yang telah disusun akan dilakukan push ke repository.
Pada tahapan Build dimaksudkan untuk penyusunan kode dari developer menjadi sebuah aplikasi.
Pada saat proses penyusunan, developer biasanya diskusi untuk melakukan review kode lalu menghasilkan feedback.
(Riyadi, 2.
Build pada aplikasi menggunakan berbagai pilihan tools tergantung dari aplikasi seperti apa yang akan dibuat.
(Yarlagadda, 2.
TEST Tahapan proses testing dilakukan untuk mengetahui sistem yang telah dibangun sudah berjalan sesuai rancangan dan tidak ditemukan error dan bisa digunakan sepenuhnya.
(Riyadi, 2.
Testing menggunakan Blackbox meliputi keseluruhan fungsi dan komponen yang ada pada sistem.
(Hidayat & Muttaqin, 2.
RELEASE Aplikasi yang telah disusun dan lolos uji akan diberi nomor versi.
Penentuan jadwal perilisan aplikasi, dilakukan perubahan seperti apa dan perubahan kode terjadi pada tahap ini.
Dilakukan penomoran versi bertujuan untuk mempermudah pekerjaan.
Pada github tersedia fitur Version Control System (VCS).
VCS adalah fitur digunakan untuk penyimpan kode yang disusun.
Kode yang tersusun diberi versi file.
Ini dilakukan agar pengembang melihat kembali file kode ke kondisi sebelumnya, perbandingan perubahan pada kode yang disusun dari waktu ke waktu, juga dapat melihat yang terlibat dalam penyusunan kode.
Memberikan gambaran kondisi kerja, jika timbul sebuah konflik maka bisa dicari letak kesalahan dan hal lainnya.
(Riyadi, 2.
9 DEPLOY Deploy adalah proses aplikasi yang telah dibuat lalu dilakukan hosting pada server.
(Riyadi, 2.
Beberapa pilihan tools rekomendasi DevOps yang digunakan adalah AWS.
Jenkins, dan lain (Gokarna & Singh, 2.
10 OPERATE Pada tahap ini, aplikasi akan dipastikan oleh tim operasi berjalan dengan baik.
Analisa data, error.
Pendapat pengguna juga dapat diambil untuk memberikan feedback jika ada ditemukan error atau Pada proses ini akan menjadi bahan perbaikan untuk pengembangan aplikasi nantinya.
Informasi dari operator maupun pengguna dapat diambil perbaikan aplikasi yang dibangun apakah telah sesuai dengan kebutuhan.
(Riyadi, 2.
11 MONITOR
Monitor adalah tahapan terakhir DevOps.
Dikumpulkan informasi dari tahapan sebelumnya, informasi bisa berbentuk data server, bug atau sebuah pendapat dari tim operasi terhadap aplikasi.
(Riyadi, https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
lalu informasi yang didapat menjadi bahan pertimbangan dari aplikasi yang dibangun.
Pada tahapan ini alur sistem yang ada akan dipantau dan dicari apa saja hambatan produktivitas aplikasi tersebut di masa depan.
(Yarlagadda, 2.
HASIL DAN PEMBAHASAN
Analisa dan perancangan aplikasi dilakukan secara rinci dan detail dengan melihat sistem yang berjalan sekarang lalu diusulkan sistem baru.
Menjelaskan secara terperinci tentang analisa kebutuhan dan hasil dari penerapan metode DevOps dalam pembangunan aplikasi.
1 PLAN
Pada tahap plan dilakukan analisa sistem usulan, pembuatan desain aplikasi secara detail dengan pembuatan diagram UML dan desain halaman antarmuka.
yang akan menjadi patokan dalam pengerjaan proyek aplikasi.
1 ANALISA SISTEM USULAN
Analisa sistem yang berjalan dilakukan untuk identifikasi kendala proses bisnis yang ada lalu dilakukan perbaikan pada sistem usulan yang baru.
Pada sistem yang berjalan, calon jamaah yang ingin mendaftar menghubungi melalui agen dan atau langsung ke kantor.
Pencatatan dokumen belum menggunakan sistem informasi yang mana pendaftaran masih manual dapat menjadi resiko kesalahan pencatatan dan kehilangan.
Hasil dari analisa sistem yang berjalan, maka diusulkan sebuah sistem berbasis aplikasi android yang digunakan untuk pendaftaran dan input persyaratan perjalanan bagi jamaah yang mana usulan ini menjadi pokok utama permasalahan.
Alur yang akan diusulkan pada gambar alur dibawah ini.
Gambar 2.
Alur sistem usulan 2 DIAGRAM UML DAN DESAIN INTERFACE APLIKASI
USE CASE DIAGRAM
Penggunaan Use case diagram pada proyek bertujuan menggambarkan rancangan sistem dengan menunjukkan aktor siapa saja terlibat didalam proses bisnis sistem.
Aktor yang terlibat yaitu jamaah, agen dan admin akan menggunakan aplikasi yang dibuat.
berikut gambar usecase dirancang.
https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
282 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025 Gambar 3.
Rancangan Use Case
CLASS DIAGRAM
Class diagram memberikan gambaran rancangan hubungan kelas satu dan lainnya dan penjelasan terhadap objek yang terdapat pada sistem.
Kelas pada rancangan mempunyai atribut dan operasi, mewakili atribut memiliki fungsi pada tahap pengkodean.
Gambar 4.
Rancangan class diagram PERANCANGAN STRUKTUR MENU Struktur menu dan struktur halaman pada aplikasi PDA Travel.
Mengambarkan menu dan form pendaftaran mulai dari login hingga mengisi form pendaftaran tiket perjalanan.
Gambar 5.
Struktur Halaman Aplikasi
DESAIN INTERFACE APLIKASI
Berikut ini merupakan gambar desain interface pada aplikasi PDA Travel.
Mulai dari form registrasi, login, pendaftaran tiket perjalanan dan pengaturan user.
https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
DESAIN INTERFACE SIGN UP
Desain sign up diperuntukkan untuk pemakai aplikasi melakukan pendaftaran akun.
Syarat berupa memasukan nama, email, password.
Halaman sign up ditunjukkan pada Gambar berikut.
Gambar 6.
Desain sign up DESAIN HALAMAN LOGIN Desain halaman login pengguna aplikasi setelah melakukan registrasi data diri pada gambar 7 dibawah ini.
Gambar 7.
Desain Halaman Login
DESAIN HALAMAN UTAMA
Desain halaman dashboard utama aplikasi berbagai pilihan paket perjalanan, program yang disediakan travel dan juga pengaturan.
Gambar 8.
Desain Halaman Utama https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
284 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025
DESAIN HALAMAN PAKET PERJALANAN
Desain halaman pesan paket perjalanan untuk jamaah pengguna terdapat paket haji dan umrah, serta wisata islami.
Gambar 9.
Desain Halaman Paket Perjalanan DESAIN HALAMAN USER Desain halaman user aplikasi berisi setting user ganti password dan setting profil.
Gambar 10.
Desain Halaman user
2 CODE
Pada fase ini, bahasa pemrograman javascript akan digunakan dalam penyusan kode program dan menggunakan dengan react native sebagai framework aplikasi mobile.
Setelah selesai penyusunan kode program, file program dilakukan push ke repository github.
berikut file kode yang di push ke repository pada gambar 11.
Gambar 11.
Push Repository Github https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
3 BUILD
Fase build dilakukan dengan proses push kode proyek pengembangan sistem ke repository.
Repository yang digunakan yaitu github, salah satu repository yang banyak penggunanya.
Pengunaan github dijadikan repository karena mampu menjadi wadah record pekerjaan programer yang memiliki tim atau lebih dari satu orang.
Pekerjaan programer akan dilakukan record menggunakan git.
Git dapat record pekerjaan tim, mulai dari waktu, perubahan kode, dan orang yang bekerja akan muncul pada repository jika melakukan push kode setelah selesai mengerjakan proyek.
Berikut gambar push proyek pada repository.
Gambar.
12 Push kode di repository 4 TEST Tahapan proses testing dilakukan untuk mengetahui sistem yang telah dibangun sudah berjalan sesuai rancangan dan tidak ditemukan error dan bisa digunakan sepenuhnya.
Testing menggunakan Blackbox meliputi keseluruhan fungsi dan komponen yang ada pada sistem.
Berikut tabel pengujian blackbox testing terhadap sistem yang dibangun.
Dimana pada setiap tabel berisi testing pada aplikasi mulai dari proses pendaftaran, login, paket perjalanan, pelunasan dan pengaturan user.
1 Tabel blackbox sign up Testing pada sign up dilakukan dengan mencoba input benar, salah kombinasi salah benar pada halaman sign up.
Dilakukan untuk mengetahui apakah terjadi error atau keluar pesan kesalahan .
Tabel blackbox testing sign up aplikasi dengan registrasi data user pada tabel berikut.
Tabel 4.
Sign up Skenario Klik menu sign up.
form data dikosongkan.
form data yang diinputkan tidak sesuai.
form data yang diinputkan Harapan sistem Tampil halaman Tampil pesan kesalahan.
Tampil pesan kesalahan sesuai validasi field data.
Tampil pesan berhasil menambahkan data.
Hasil Sukses Gagal https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
286 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025 2 Tabel blackbox login Testing pada login dilakukan dengan mencoba input benar, salah kombinasi salah benar pada halaman Dilakukan untuk mengetahui apakah terjadi error atau keluar pesan kesalahan.
Tabel blackbox testing login pada tabel 5.
Tabel 5.
Sign up Hasil Sukses Gagal Skenario Harapan sistem Tidak memasukkan username, password klik Username salah, dan password benar lalu login.
Username benar, password salah lalu login.
Username salah, password salah klik login.
Username benar, password benar lalu login.
Tampil pesan kesalahan login.
Tampil pesan kesalahan login.
Tampil pesan kesalahan login.
Tampil pesan kesalahan login.
Login sukses dan tampil halaman utama.
3 Tabel blackbox paket perjalanan Testing pada paket perjalanan dilakukan dengan mencoba klik perintah yang ada seperti klik halaman, klik paket perjalanan dan klik form perjalanan.
Testing Dilakukan untuk mengetahui apakah ada error atau keluar pesan kesalahan pada sistem.
Tampilan halaman login paket perjalanan.
Terdapat pada tabel 6.
Tabel 6.
Paket perjalanan Skenario Harapan sistem Klik menu paket perjalanan Klik paket perjalan yang Klik kirim form paket Tampil halaman paket perjalanan.
Tampi halaman form paket perjalanan yang dipilih.
Tampil pesanan berhasil, operasi selanjutnya di pelunasan.
Hasil Sukses Gagal 4 Tabel blackbox doa dan bacaan Testing pada bacaan dan doa dilakukan dengan mencoba klik perintah yang ada seperti klik halaman doa dan bacaan, klik doa-doa yang ada.
Testing Dilakukan untuk mengetahui apakah terjadi error atau keluar pesan kesalahan pada sistem.
Tabel blackbox testing halaman doa dan bacaan pada aplikasi.
Terdapat pada Tabel 7.
Doa dan bacaan Skenario Klik doa dan bacaan Klik menu yang berisi bacaan tuntunan.
Harapan sistem Tampil halaman doa dan Tampil file pdf yang berisi bacaan sesuai pilihan.
Hasil Sukses Gagal https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
287 5 Tabel blackbox pelunasan Testing pada pelunasan dilakukan dengan mencoba klik halaman pelunasan.
Pilih pelunasan perjanan yang dipilih.
Lalu isi form pelunasan.
Lalu kirim form pelunasan perjalanan.
Tabel halaman pelunasan aplikasi terdapat pada tabel 8.
Tabel 8.
Hasil Sukses Gagal Skenario Harapan sistem Klik menu pelunasan Tampil berisi pesanan paket perjalanan yang telah diambil.
Tampil form pelunasan.
Klik pesanan yang telah Klik kirim form Tampil pesanan berhasil terbayar.
6 Tabel blackbox kelola perjalanan Testing pada pada kelola perjalanan ini dengan klik kelola perjalanan.
Lalu muncul jenis perjalanan.
Mengisi form paket perjalanan.
Lalu kirim.
Untuk uji hapus perjalanan ada diperjalanan yang telah di input.
Tabel halaman kelola pelunasan.
Terdapat pada tabel 9 di samping.
Tabel 9.
Kelola perjalanan Skenario Harapan sistem Klik menu kelola perjalanan Klik perjalanan yang akan Klik kirim form perjalanan.
Klik hapus perjalanan Klik edit perjalanan Hasil Sukses Gagal Tampil halaman paket haji, umrah dan wisata Tampil halaman form Tampil berhasil, paket dapat dipilih jamaah.
Tampil berhasil.
Tampil berhasil.
7 Tabel blackbox kelola pelunasan Testing pada pada kelola pelunasan ini dengan klik kelola pelunasan.
Lalu muncul jenis perjalanan.
Mengisi form pelunasan perjalanan Lalu kirim.
Untuk uji hapus pelunasan di menu pelunasan.
Testing Dilakukan untuk mengetahui apakah terjadi error atau keluar pesan kesalahan pada sistem.
Tabel halaman kelola pelunasan aplikasi terdapat pada tebel 10.
Tabel 10.
Kelola pelunasan Skenario Klik menu kelola pelunasan Klik pelunasan perjalanan yang akan dikelola.
Harapan sistem Hasil Sukses Gagal Tampil halaman pelunasan.
Tampil perjalanan yang belum https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
288 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025 Klik edit perjalanan Klik hapus perjalanan Tampil form edit.
Lalu klik kirim.
Sistem menampilkan berhasil.
Tampil berhasil.
8 Tabel blackbox kelola user Testing pada pada kelola user ini dengan klik kelola user.
Lalu muncul level user.
Tambah, hapus dan edit dilakukan oleh admin.
Pada tambah dan edit akan muncul form lalu kirim.
Untuk uji hapus langsung klik user yang akan dihapus.
Tabel halaman kelola user aplikasi terdapat pada tabel 11.
Tabel 11.
Kelola user Skenario Harapan sistem Klik menu kelola user Klik menu kelola user.
Klik tambah user.
Klik hapus user.
Klik edit perjalanan Tampil halaman tabungan haji, umrah dan wisata religi.
Tampil halaman berisi tabel Terdapat akses tambah, edit dan hapus pada tabel.
Tampil form yang akan tambah Lalu tombol kirim.
Tampil berhasil.
Tampil form edit.
Lalu klik Sistem menampilkan Hasil
Sukses Gagal
6 RELEASE
File yang berisi kode telah dilabel nomor versi.
Dilakukan push pada Github menyediakan fitur Version Control System.
Push kode berkaitan dengan tahapan build dimana push kode dilakukan.
Gambar 13.
Push repository github
7 DEPLOY
Tahapan deploy proses penerapan aplikasi yang dibuat lalu dilakukan hosting pada server.
Pada proyek ini aplikasi ini dilakukan hosting pada google firebase.
Gambar 15.
Hosting firebase https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
8 OPERATE
Pada tahap ini, tim operasi akan analisa apakah aplikasi berjalan dengan baik.
Memberikan pendapat pada aplikasi jika terdapat error atau minor lainnya.
Hasil review pengguna juga.
1 INTERFACE REGISTER APLIKASI
Halaman sign up diperuntukkan untuk pemakai aplikasi melakukan registrasi dengan memasukkan data nama, username, email, password yang dijadikan form daftar.
Halaman sign up di gambar berikut.
Gambar 16.
Halaman sign up 2 HALAMAN FORM LOGIN PENGGUNA.
Halaman aplikasi login untuk akses ke menu utama aplikasi Travel.
Gambar 17.
Halaman Login
3 HALAMAN UTAMA
Halaman dashboard aplikasi berisi paket perjalanan, doa-doa dan user setting aplikasi Travel.
Gambar 18.
Halaman Utama https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
290 | Jurnal JOISIE.
Volume 9.
Nomor 1.
Juni 2025
4 HALAMAN PAKET PERJALANAN
Halaman paket perjalanan aplikasi berisi paket perjalanan seperti haji, umrah dan paket wisata religi pada aplikasi Travel.
Gambar 19.
Halaman paket perjalan 5 HALAMAN USER Halaman user aplikasi berisi setting user seperti ganti password dan setting profil.
Tampilan tergantung level user.
Gambar 20.
Halaman pengaturan user
9 MONITOR
Monitoring tahapan terakhir dari DevOps.
Pada firebase terdapat pemantauan server aplikasi yang telah dilakukan hosting.
Firebase tidak sama seperti layanan hosting pada umumnya.
Lebih simple dan keamanan terjaga karena data tersimpan pada server google, salah satu raksasa teknologi digital dunia.
Gambar 21.
Monitoring firebase KESIMPULAN Penelitian yang dilakukan menghasilkan kesimpulan dengan dibuat sebuah aplikasi travel pada PDA travel Inhu Kuansing yang dibangun Menggunakan react native dengan metode pengembangan DevOps.
Aplikasi pda travel yang telah dibangun dan diuji akan membantu jamaah dalam proses pendaftaran paket perjalanan ibadah haji, ibadah umrah dan wisata religi yang sudah digitalisasi.
Membantu https://doi.
org/10.
35145/joisie.
JOISIElicensed under a Creative Commons Attribution-ShareAlike 4.
0 International License (CC BY-SA 4.
Prananda.
Perancangan dan Pengembangan Aplikasi Haji Umrah Menggunakan React native Pada PDA Travel Inhu Kuansing, 277-.
291 manajemen pengurus PDA travel dalam mengurus data jamaah dan memberikan informasi kepada masyarakat khususnya wilayah Inhu dan Kuansing pilihan paket perjalanan haji dan umrah dan juga wisata religi.
Untuk penelitian selanjutnya aplikasi dapat dikembangkan seperti penambahan payment gateway yang terhubung dengan berbagai layanan perbankan, e-wallet dan layanan pembayaran elektronik lainya.
pengembangan aplikasi dari metode DevOps yang memakai fitur otomatis dalam pengembangan seperti penerapan testing otomatis, (CI/CD) Continuous Integration/Continuous Delivery yang mana serangkaian pengembangan dengan tools otomatis.
Penelitian ini jauh dari kata sempurna, diharapkan penelitian selanjutnya dapat Memperbaiki kekurangan yang ada sehingga tercipta aplikasi user friendly bagi semua kalangan umur.
DAFTAR PUSTAKA