## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351

## Implementasi Model Convolutional Neural Network (CNN) pada Aplikasi Deteksi Kanker Kulit Menggunakan Expo React Native
Arvie Arvearie Yonismara * , Abu Salam *
1 Fakultas Ilmu Komputer, Teknik Informatika, Universitas Dian Nuswantoro, Semarang, Indonesia Email: 1 111202012792@mhs.dinus.ac.id, 2,* abu.salam@dsn.dinus.ac.id Email Penulis Korespondensi: abu.salam@dsn.dinus.ac.id Submitted: 15/06/2024 ; Accepted: 26/06/2024 ; Published : 26/06/2024
Abstrak− Kulit merupakan organ terluar manusia yang berfungsi untuk melindungi bagian dalam manusia dari ancaman seperti pancaran  sinar  matahari  dan  jika terlalu sering terkena  sinar  matahari  maka  berpotensi  menyebabkan kanker kulit.Selama  satu dekade  terakhir,  jumlah  penderita  kanker  kulit  di  Indonesia  telah  meningkat.  Metode  deteksi  kanker  kulit  yang  paling  umum dialkukan adalah metode biopsi. Namun metode tersebut memerlukan biaya yang cukup besar dan memakan waktu yang cukup lama. Melihat masalah tersebut maka diperlukan sebuah aplikasi deteksi kanker kulit yang menggunakan teknologi Deep Learning untuk mengidentifikasi kanker kulit sejak dini. Maka dari itu penelitian ini dilakukan untuk membuat sebuah aplikasi deteksi kanker kulit dengan menggunakan Expo React Native dan mengimplementasiakn model deep learning CNN yang dapat mengklasifikasi tujuh kelas lesi kulit berdasarkan dataset HAM10000. Berdasarkan hasil uji evaluasi performa dari model CNN yang digunakan, model CNN tersebut mendapatkan skor performa yang cukup baik yaitu dengan rata-rata skor keseluruhan berada di angka 0.98. Melihat performa tersebut maka model layak dan siap diimplementasikan kedalam aplikasi mobile. Pada penelitian ini menunjukan bahwa aplikasi deteksi kanker kulit menggunakan Expo React Native mampu untuk mengimplementasikan model deep learning dan dapat digunakan untuk mendeteksi kanker kulit. Berdasarkan dari hasil pengujian aplikasi menggunakan metode black box testing, didapatkan hasil yang baik dengan persentase 100%. Dari empat bagian aplikasi yaitu select image, open camera, predict image,  dan  delete  image  yang  diuji,  keempat  bagian  tersebut  menunjukan  bahwa  fungsionalitas  dan  fitur-fitur  dalam  aplikasi deteksi kanker kulit dapat berjalan dengan baik.
Kata Kunci: Kanker kulit; Deteksi; Expo React Native; Aplikasi; CNN
Abstract− Skin  is  the  outermost  organ  of  the  human  body,  serving  to  protect  the  internal  parts  from  threats  such  as  sunlight exposure. Excessive exposure to sunlight can potentially cause skin cancer. Over the past decade, the number of skin cancer cases in Indonesia has increased. The most common method for detecting skin cancer is biopsy, which is quite expensive and time- consuming. Considering this issue, a skin cancer detection application using Deep Learning technology is needed to identify skin cancer at an early stage. Therefore, this research aims to develop a skin cancer detection application using Expo React Native and implement a CNN deep learning model to classify seven classes of skin lesions based on the HAM10000 dataset. The performance evaluation of the CNN model used shows a high performance score, with an average overall score of 0.98. Given this performance, the model is feasible and ready to be implemented in a mobile application. This study demonstrates that the skin cancer detection application using Expo React Native is capable of implementing the deep learning model and can be used to detect skin cancer. Based on the results of the application testing using the black box testing method, perfect results were obtained with 100% success precentage. From the four parts of the application, namely select image, open camera, predict image, and delete image that were tested, all four parts demonstrated that the functionality and features of the skin cancer detection application work well.
Keywords : Skin Cancer; Detection; Expo React Native; Application; CNN

## 1. PENDAHULUAN
Kulit  adalah  organ  tubuh  manusia  yang  merupakan  organ  terbesar  yeng  menyelimuti  seluruh  permukaan  tubuh manusia. Kulit terletak di bagian paling luar tubuh manusia yang berguna sebagai pelindung dari ancaman-ancaman dari luar seperti pancaran sinar matahari, debu, bakteri, virus, dan masih banyak lagi[1]. Kulit merupakan organ yang sering  terpapar  sinar  matahari  yang  jika  terpapar  secara  berlebihan  dapat  menyebabkan  penyakit  kanker  kulit[2]. Kanker kulit merupakan penyakit kulit yang berupa benjolan dan atau pertumbuhan jaringan kulit yang berlebihan di sebagian kulit maupun seleuruh lapisan kulit. Kanker kulit memiliki struktur yang tidak beraturan dengan diferensiasi sel  dalam  berbagai  tingkatan  pada  kromatin,  nucleus,  dan  sitoplasma.  Kanker  kulit  bersifat  ekspansif  atau  dapat meluas,  infiltratif  yang  berarti  dapat  mempengaruhi  jaringan  non-kanker  di  sekitarnya,  dan  dapat  bermestastasis melalui pembuluh darah maupun pembuluh getah bening[3]. Melanoma atau kanker kulit biasanya muncul di  area kulit  yang  sering  terpapar  sinar  matahari  secara  langsung  seperti  tangan,  wajah,  bibir,  leher,  dan  area  terbuka lainnya[4].
Dalam  sepuluh  tahun  terakhir,  kasus  penderita  kanker  kulit  telah  mengalami  peningkatan  di  Indonesia. Terdapat sekitar 132 ribu kasus kanker kulit ganas terjadi setiap tahunnya di Indonesia. Jika dilihat dari jumlah kasus, kanker  kulit  di  Indonesia  menempati  posisi  ketiga  dimana  posisi  pertama  dan  posisi  kedua  ditempati  oleh  kanker payudara dan kanker serviks [5] . Dari kasus kanker kulit di Indonesia, jenis kanker kulit terbanyak yang diderita adalah karsinoma  sel  basah(65.5%),  karsinoma  sel  skuamosa(23%)  dan  melanoma  maligna(7.9%),  dan  jenis  kanker  kulit lainnya.  Dari  ketiga  jenis  kanker  kulit,  melanoma  maligna  menjadi  jenis  kanker  kulit  yang  paling  mematikan [5] . Melihat hal tersebut, akan sangat berbahaya jika kanker kulit terutama jenis melanoma tidak terdeteksi sejak dini.
Metode skrining kanker kulit umumnya dilakukan dengan metode biopsi. Metode biopsi adalah metode dimana jaringan kulit diambil yang kemudian dicek untuk mengetahui apakah jaringan tersebut merupakan kanker atau tidak. Namun proses tersebut memerlukan waktu yang lama dan biaya yang cukup besar[6]. Di Indonesia sendiri, kesadaran

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
masyarakat akan deteksi dini kanker masih tergolong rendah. 60-70 persen pasien yang datang ke rumah sakit adalah pasien kanker stadium akhir atau lanjut. Menurut dokter spesialis onkologi dan radiologi Gregorius Ben Prajogi yang dikutip  dari  berita  harian  Kompas.id  hal  tersebut  dikarenakan  masyarakat  takut  terdiagnosis  kanker  dan  enggan menghadapi proses penaganan kanker yang Panjang[7]. Berdasarkan pernyataan dari artikel Kemenkes,faktor lainnya yaitu  masyarakat  yang  khawatir  untuk  periksa  karena  keterbatasan  dana,  adanya  keterbatasan  fasilitas  peralatan Kesehatan sehingga banyak fasilitas kesehatan terutama di daerah yang belum mampu untuk melakukan skrining, dan kurangnya tenaga kesehatan yang berkompeten di Indonesia[8]. Melihat permasalahan tersebut, dibutuhkan sebuah aplikasi skrining kanker kulit yang mengadaptasi teknologi Deep Learning dalam upaya identifikasi kanker kulit sejak dini dan sekaligus memfasilitasi para ahli dermatologi untuk penelitian lebih lanjut[9].
Penelitian tentang aplikasi mobile untuk mendeteksi kanker kulit sudah pernah dilakukan sebelumnya. Pada penelitian  yang  dilakukan,  berhasil  mengimplementasikan  model  CNN  arsitektur  InceptionV3  dan  mengkonversi menjadi bentuk TfLite kedalam aplikasi mobile deteksi kanker kulit [10]. Aplikasi tersebut berhasil mendeteksi kanker kulit  dengan  akurasi  Top-1  sampai  Top-3  yaitu  87.5%,  95.5%,  dan  97.4%.  Penelitian  lain  yang  dilakukan  oleh Chaturvedi  dkk  pada  tahun  2021,  berhasil  membuat  sistem  klasifikasi  kanker  kulit  pada  dataset  HAM10000 menggunakan  arsitektur  MobileNet.  Sistem  tersebut  menggunakan  arsitektur  MobileNet  berhasil  mendapatkan akurasi total sebesar 83.1%[11]. Pada tahun 2021, penelitian yang dilakukan oleh Krohling, et al., berhasil membuat aplikasi berbasis smartphone untuk mendiagnosa kanker kulit menggunkan CNN dengan arsitektur ResNet50. Sistem tersebut berhasil mendapatkan akurasi rata-rata 85% dan recall sebesar 96%[12].
Pada penelitian-penelitian diatas, terbukti bahwa CNN mampu untuk melakukan deteksi kanker kulit. Beberapa arsitektur CNN seperti InceptionV3 terbukti mampu untuk diimplementasikan kedalam aplikasi mobile deteksi kanker kulit. Deep learning khususnya Convolutional Neural Network (CNN) sudah menjadi salah satu pendekatan Machine Learning dalam klasifikasi dan image detection yang sangat populer digunakan dan sudah pernah digunakan untuk mengkategorikan  lesi  pada  kulit[13].  CNN  di  desain  secara  otomatis  untuk  bisa  beradaptasi  dalam  mempelajari hierarki  fitur spasial dari  input data seperti gambar, dengan memberlakukan pola konektivitas local antara neuron- neuron pada lapisan yang berdekatan[14].
Meskipun  berbagai  arsitektur  CNN  telah  digunakan  dalam  aplikasi  deteksi  kanker  kulit,  masih  terdapat beberapa  kekurangan  yang  perlu  diatasi.  Misalnya,  penelitian  sebelumnya  cenderung  fokus  pada  akurasi  model, namun kurang memperhatikan efisiensi waktu pemrosesan dan user experience pada aplikasi mobile[15]. Berdasarkan latar  belakang  permasalahan  diatas,  peneliti  memutuskan  untuk  melakukan  deployment  model  deep  learning  pada aplikasi  mobile deteksi  kanker kulit  menggunakan expo react  native dan model Tensorflow Js. Deployment  model menggunakan expo react native karena expo react native mempermudah pengembang untuk membuat satu aplikasi pada platform Android, Ios, dan web dalam satu basis kode[16]. Kemudian model  dalam bentuk Tensorflow Js dipilih karena Tensorflow Js mendukung deployment pada platform yang luas dan menyediakan Pustaka untuk deployment dengan cepat, mudah, dan telah memiliki dukungan pada framework expo react native[16].

## 2. METODOLOGI PENELITIAN

## 2.1 Tahapan Penelitian
Dalam melakukan penelitian ini, ada beberapa tahapan penelitian yang dilakukan perlu untuk mendapatkan hasil yang sesuai dengan tujuan penelitian. Tahapan penelitian tersebut dapat dilihat pada gambar 1 .

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
Terdapat beberapa tahapan penelitian yang digambarkan pada Gambar 1 diantaranya yaitu dataset HAM10000 melalui preprocessing  data. Kemudian data tersebut  di inputkan dalam pretrained model yang berformat Keras h5. Dari  model  tersebut  kemudian  dikonverskian  menjadi  model  TensorFlow  JS.  Model  tersebut  kemudian  dimuat kedalam  aplikasi  mobile  android.  Dari  aplikasi  tersebut  kemudian  digunakan  untuk  mendeteksi  lesi  pada  kulit menggunakan  kamera  handphone.  Dari  hasil  kamera  tersebut  akan  melalui  image  preprocessing  untuk  kemudian diproses oleh model. Setelah melalui proses tersebut hasil diagnose akan ditampilkan di layar.

## 2.2 Training Data dan Model

## 2.2.1 Dataset
Dataset yang digunakan dalam penelitian ini adalah dataset ISIC HAM10000. Dataset HAM10000 mengandung citra dermatoskopis berjumlah 10015 dan terdiri dari tujuh kelas  lesi kulit. Untuk lebih detail dari kelas lesi kulit dapat dilihat pada Tabel 1.

## Tabel 1. Tujuh kelas lesi kulit
Pada Tabel  1 disajikan data lesi  kulit  yang berjumlah tujuh jenis kelas lesi  kulit  yang terdapat  pada dataset HAM10000.  Diantaranya  yaitu  Actinic  keratoses(akiec),  basal  cell  carcinoma(bcc),  benign  keratoses(bkl), dermatofibroma(df), Melanoma(mel), Melanocytic nevi(nv), vascular lesions(vasc)[17].

## 2.2.2 Preprocesing Data
Prerpocessing  data  merupakan  proses  dimana  data  asli  di  modifikasi  agar  data  tersebut  sesuai  dan  siap  untuk digunakan  pada  model.  Tahap  preprocesing  data  merupakan  tahap  yang  sangat  penting  karena  data  yang  sudah diproses  dengan  baik  dapat  membuat  model  memberikan  hasil  yang  akurat.  Tahap  preprocessing  data  meliputi beberapa tahap beberapa diantaranya yaitu augmentasi data dan oversampling[18].

## 2.2.3 CNN Model
Pada  penelitian  ini  mengadaptasi  model  deep  learning  yaitu  Convolutional  Neural  Network  (CNN)  untuk mengklasifikasi  tujuh  jenis lesi  kulit.    Model  CNN  dasar  memiliki  beberapa  lapisan  diantaranya  yaitu  input  layer, convolution layer, pooling layer, flattening layer, dan dense/output layer[19]. Adapun arsitektur model cnn yang akan digunakan pada penelitian ini ditunjukan pada gambar 2.
Gambar 2. Arsitektur model CNN[18]
Pada arsitektur CNN yang ditunjukkan pada gambar 2, arsitektur ini adalah arsitektur custom CNN yang terdiri dari beberapa layer. Layer-layer tersebut meliputi convolutional layer untuk mengekstraksi fitur-fitur yang relevan, max pooling layer untuk mengurangi ukuran data, batch normalization untuk menormalkan data input antar layer, dan flatten layer untuk mengubah array menjadi vektor satu dimensi.

## 2.3 Konversi Model
Pada tahap ini, model akan dipersiapkan agar siap untuk digunakan di perangkat mobile. Model yang digunakan perlu melalui proses konversi sebelum di implementasikan kedalam aplikasi android. Model yang awalnya berformat Keras H5 dirubah menjadi format TensorFlow Js yang berupa file json dan bin. Proses konversi model dari Keras menjadi
No Jenis Kode 1 Actinic keratoses akiec 2 Basal cell carcinoma bcc 3 Benign keratosis bkl 4 Dermatofibroma df 5 Melanoma mel 6 Melanocytic nevi nv 7 Vascular lesions vasc

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
Tensorflow js dilakukan dengan menggunakan package Tensorflowjs_converter. TensorFlow.js menyediakan sebuah package konverter model yang dapat memuat dan menjalankan model TensorFlow SavedModels dan model Keras yang  sudah  dilatih  sebelumnya,  sehingga  model-model  ini  bisa  digunakan  dalam  JavaScript[20].  Proses  konversi penting dilakukan agar model dapat didukung dalam pengaplikasian pada aplikasi mobile terutama dalam lingkungan android. Hasilnya model menjadi lebih ringan untuk digunakan pada aplikasi mobile maupun basis sistem lainnya[21].

## 2.4 Deployment
Tahapan  deployment  merupakan  tahapan  yang  paling  penting  dalam  penelitian  ini  karena  tahapan  ini  merupakan gabungan dari tahapan-tahapan sebelumnya. Tahap deployment meliputi pengkodean aplikasi, pemuatan model deep learning, image preprocessing, hingga prediction.

## 2.4.1 Expo React Native
Pada penelitian ini, aplikasi deteksi kanker kulit dibangun menggunakan pustaka React Native dan dibantu dengan framework Expo. Expo merupakan sebuah alat bantu  yang dibangun di lingkungan React  Native untuk  membantu developer memulai projek mobile dengan mudah[22]. Expo meyediakan serangkaian alat yang bisa digunakan untuk membangun, menguji dan meluncurkan aplikasi  pada beberapa platform hanya dengan satu  basis kode yang sama. Beberapa komponen-komponen Expo yang siap digunakan diantaranya seperti kamera, notifikasi, geolocation, dan lain sebagainya. Penggunaan Expo React Native dipilih pada penelitian kali ini karena kemampuan dan kompatibilitas Expo React Native dalam mengimplementasikan model deep learning TensorFlow Js pada aplikasi mobile.

## 2.4.2 Image Preprocesing
Image preprocesing adalah tahap yang wajib dilakukan sebelum sebuah gambar atau inputan diproses oleh model pada aplikasi[23]. Image preprocesing terdiri dari beberapa tahap yang disesuaikan dengan kebutuhan inputan dari model. Dalam penelitian ini beberapa tahapan dari image preprocesing yaitu: a. Membaca inputan gambar ke string base64,
b. Men-decode gambar menjadi image tensor menggunakan bilinear intepolation,
c. Merubah ukuran gambar menjadi ukuran input model,
d. Menormalisasi gambar ke rentang [0,1] dengan membagi dengan 255.0,
e. Mengubah gambar yang telah dinormalisasi menjadi tensor4d

## 2.4.3 Prediction
Setelah  sebuah  inputan  melalui  proses  preprocesing  gambar,  gambar  yang  sudah  melalui  proses  tersebut  akan  di prediksi oleh model yang sudah dimuat dalam aplikasi. Hasil dari prediksi inilah yang nantinya akan ditampilkan pada layar pengguna.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Evaluasi Model CNN
Pengujian performa dari model CNN yang digunakan pada penelitian ini dilihat berdasarkan confusion matrix yang telah  di  buat.  Dengan  confusion  matrix  tersebut  peneliti  dapat  mengevaluasi  performa  dan  akurasi  model  yang digunakan pada penelitian ini. Pada penelitian ini, confusion matrix digunakan sebagai acuan untuk mendapatkan nilai accuracy, recall, specificity, f1-score, dan gmean. Hasil confusion matrix dapat dilihat pada gambar 4. Untuk model yang digunakan dalam aplikasi mobile yang dibangun menggunakan arsitektur yang dijelaskan pada gambar 2. Dari model tersebut didapatkan nilai uji performa sebagai berikut.

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
Dapat  dilihat  pada  gambar  3,  model  dengan  augmentasi  dan  oversampling  mendapatkan  hasil  yang  cukup stabil.  Selanjutnya  peneliti  melakukan  evaluasi  model  untuk  mencari  nilai  accuracy,  recall,  precision,  f1-score, specificity, sensitivity, dan gmean. Hasil dari nilai evaluasi dapat dilihat pada table 2.
Tabel 2. Hasil pengujian model Model accuracy recall precision F1-score specificity  sensitivity gmean Custom CNN  0.980824  0.980698  0.981622  0.980474 0.996820 0.980698 0.988717
Hasil yang disajikan pada tabel 2 menunjukan bahwa nilai akurasi di setiap penilaian memiliki nilai yang tinggi dengan rata-rata diatas 0.98. Dengan hasil evaluasi performa yang cukup baik, maka model siap untuk digunakan pada perangkat mobile untuk aplikasi deteksi kanker kulit.

## 3.2 Deployment Model
Dalam  penelitian  ini,  proses  deployment  model  CNN  dilakukan  pada  framework  expo  react  native  seperti  yang dijelaskan sebelumnya. Untuk proses ini memerlukan sebuah model yang sudah dikonversikan menjadi format yang support dengan mobile seperti Tensorflow Js. Model CNN berbentuk Tensorflow Js memiliki dua buah file yang perlu dipanggil  yaitu  file  model.json  dan  file  weights.bin.  Setelah  persiapan  model,  untuk  memulai  deployment  perlu mengimpor library yang digunakan untuk memuat model tersebut. Library yang digunakan adalah "@tensorflow/tfjs" dan  "@tensorflow/tfjs-react-native".  File  model  dan  weights  kemudian  di  muat  dengan  method  loadLayersModel karena model yang digunakan berasal dari format keras H5. Setelah model berhasil dimuat, maka proses selanjutnya adalah melakukan image preprocesing pada inputan foto dari user. Image procesing dalam penelitian ini terdiri dari beberapa  proses  diantaranya  yaitu  konversi  image  menjadi  base64,  decode  gambar  menjadi  image  tensor,  resize gambar  berdasarkan  ukuran  input  model,  normalisasi  gambar  dan  merubahnya  menjadi  tensor4d.  Inputan  gambar yang telah melalui proses image preprocesing kemudian dijadikan argumen dalam fungsi predict agar inputan tersebut diprediksi  didalam  model  yang  sudah  dimuat.  Hasil  dari  prediksi  model  akan  berupa  array  dengan  tujuh  elemen sebagai  representasi  dari  tujuh  kelas  lesi  kulit  HAM10000.  Dari  ketujuh  elemen  tersebut  dicari  index  dengan probabilitas tertinggi untuk kemudian diberi label berdasarkan kelas lesi kulit.

## 3.3 Use Case Diagram
Use  Case  diagram  adalah  sebuah  pemodelan  yang  digunakan  untuk  menjelaskan  perilaku  interaksi  antara pengguna/user dengan sistem yang akan dibangun. Pada penelitian ini, interaksi antara user dan aplikasi deteksi kanker kulit dijelaskan pada gambar 4.

## Gambar 4. Use Case Diagram
Dapat dilihat pada gambar 4 bahwa aplikasi deteksi kanker kulit hanya memiliki satu actor yaitu user. User dapat  memilih  gambar  melalui  galeri  maupun  mengambil  gambar  melalui  kamera  handphone.  User  juga  bisa menghapus foto dan melakukan prediksi gambar jika ingin mendeteksi gambar yang diinputkan. Setelah itu user akan mendapatkan hasil yang ditampilkan di layer handphone milik user.

## 3.4 Hasil
Setelah memahami peranan user dalam aplikasi deteksi kanker kulit, berikut merupakan hasil tampilan aplikasi deteksi kanker kulit. Berikut ini adalah tampilan dari aplikasi deteksi kanker kulit.

## 3.4.1 Splash Screen
Ketika user membuka aplikasi deteksi kanker kulit, halaman yang akan muncul pertama kali adalah tampilan splash screen seperti yang ditunjukan pada gambar 5.

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
Gambar 5. Halaman loading
Halaman loading atau splash screen seperti yang ditunjukan pada gambar 5 adalah halaman yang akan pertama kali tampil ketika user membuka aplikasi deteksi kanker kulit. Pada halaman ini model akan di muat dalam aplikasi, dan menunggu sampai model tersebut selesai dimuat. Durasi loading model ini bisa berbeda-beda tergantung model yang  dimuat  dalam  aplikasi.  Semakin  besar  model  yang  digunakan  maka  loading  akan  membutuhkan  waktu  yang lebih lama. Setelah model selesai dimuat, maka halaman akan beralih ke halaman utama.

## 3.4.2 Halaman Utama
Setelah model berhasil dimuat pada halaman splash screen maka aplikasi akan beralih ke halaman utama. Jika model gagal dimuat, aplikasi akan stuck di splash screen dan tidak beralih ke halaman utama.
(a) (b)                                        (c)                                          (d)
Gambar 6. (a)Halaman Utama, (b) Halaman galeri (c) Halaman kamera, (d) Halaman edit
Halaman utama yang ditunjukan pada gambar 6(a) adalah halaman dimana user bisa menekan tombol untuk mengambil gambar yang sudah ada pada galeri handphone, atau mengambil gambar langsung melalui kamera. User diberi kebebasan untuk memilih atau mengambil gambar apapun. Dapat dilihat pada gambar 6(b), user dialihkan ke halaman galeri setelah menekan tombol select image. Di halaman galeri, user dapat memilih foto yang dia miliki untuk dilakukan  prediksi  objek  kanker  kulit.  Sama  halnya  seperti  halaman  galeri,  halaman  kamera  muncul  setelah  user menkan  tombol  open  camera  seperti  yang  dicontohkan  pada  gambar  6(b),  halaman  kamera  akan  otomatis  terbuka

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
ketika user menekan tombol tersebut. Setelah menemukan objek yang tepat dan menekan tombol kamera, user akan dialihkan  ke  halaman  edit  seperti  yang  ditunjukan  pada  gambar  6(c).  Pada  halaman  tersebut,  setelah  user  sudah memilih foto dari galeri atau mengambil foto dari kamera, user diberi kesempatan untuk mengedit foto sebelum foto tersebut  nantinya  digunakan  ke  halaman  prediksi.  Pada  halaman  edit  user  bisa  memotong  foto  dan  merotasi  foto, maupun tidak merubah sama sekali tergantung  dengan keinginan user. Setelah user selesai   melakukan pengeditan maka user menkan tombol  cut/potong untuk  mengkonfirmasi  gambar. Perlu diingat  bahwa tampilan pada halaman kamera  bisa  berbeda-beda  tergantung  dengan  perangkat  handphone  yang  digunakan  oleh  user.  Hal  ini  bisa  terjadi karena Expo react Native mengakses fitur kamera dengan menggunakan fitur native atau fitur bawaan yang ada pada perangkat handphone masing-masing. Sehingga perbedaan tampilan akan sangat mungkin terjadi.

## 3.4.3 Halaman Hasil
Halaman hasil adalah halaman yang muncul setelah user menginputkan gambar dari galeri maupun kamera seperti yang ditunjukan pada gambar 6(b) dan 6(c). Seperti gambar 6(a), halaman hasil akan menampilkan foto sesuai apa yang diinputkan oleh user.
(a) (b)                                              (c)
Gambar 7. (a) Halaman hasil, (b) Halaman hasil, (c) Tampilan hasil
Dibawah foto tersebut, terdapat dua buah tombol yaitu tombol “Predict Image” dan tombol “Delete Image”. Tombol  delete  sesuai  namanya  akan  menghapus  inputan  user  ketika  user  menekan  tombol  tersebut  dan  user  akan dilempar  kembali  ke  halaman  utama  seperti  pada  gambar  6(a).  Sedangkan  tombol  “Predict  Image”  adalah  tombol yang akan memproses foto inputan user untuk diprediksi didalam model yang sudah dimuat pada aplikasi. Terdapat dua hal yang akan ditampilkan pada hasil. Berdasarkan gambar 6(b) aplikasi akan menampilkan diagnosa dari kulit yang cocok dengan salah satu dari tujuh kelas lesi kulit pada dataset HAM10000 atau mengeluarkan teks keterangan bahwa objek dalam foto bukanlah objek lesi kulit seperti pada gambar 6(c). Yang kedua adalah waktu yang diperlukan oleh aplikasi untuk menyelesaikan prediksi dari inputan foto user. Perlu diingat bahwa lama waktu yang dibutuhkan aplikasi bisa berbeda-beda. Hal tersebut dipengaruhi tergantung model yang digunakan pada aplikasi dan foto yang diinputkan oleh user.

## 3.5 Pengujian Aplikasi
Tahap  pengujian  aplikasi  adalah  salah  satu  tahapan  yang  penting  dalam  sebuah  proses  pengembangan  aplikasi. Pengujian aplikasi dilakukan untuk mengetahui apakah aplikasi yang sudah dibuat sudah berjalan dan berfungsi sesuai dengan  apa  yang  diharapkan  oleh  user.  Pada  penelitian  ini,,  pengujian  aplikasi  dilakukan  dengan  menggunakan metode black box testing.

## 3.5.1 Black box Testing
Dikarenakan hasil dari aplikasi ini berupa aplikasi, maka diperlukan sebuah metode pengujian sistem yang berfokus pada penilaian fungsionalitas dari aplikasi tersebut. Maka dari itu metode pengujian yang tepat untuk menguji aplikasi

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
deteksi kanker kulit adalah metode Black box testing. Metode pengujian black box testing adalah metode pengujian yang bertujuan untuk menilai sebuah sistem dari segi fungsionalitas, perilaku sistem, dan keluaran dari sebuah inputan yang spesifik tanpa harus mengetahui kode program maupun desain internal dari sistem yang diuji. Berikut merupakan hasil pengujian aplikasi deteksi kanker kulit menggunakan metode pengujian Black box testing yang ditampilkan pada tabel 3.
Tabel 3. Hasil pengujian black box No Bagian yang Diuji Fungsi Input Output Hasil Uji 1 Select Image Buka galeri Klik tombol Select Image Muncul modal galeri Sesuai Galeri Pilih foto dari galeri Klik salah satu foto dari galeri Halaman berpindah ke halaman edit Sesuai Edit foto galeri Mengedit foto dari galeri Crop, rotasi foto(opsional), klik potong Halaman berpindah ke halaman hasil Sesuai 2 Open Camera Buka kamera Klik tombol Open camera Membuka kamera handphone Sesuai Kamera Ambil Foto Klik tombol jepret Halaman berpindah ke halaman edit Sesuai Edit foto kamera Mengedit foto hasil kamera Crop, rotasi foto(opsional), klik potong Halaman berpindah ke halaman hasil Sesuai 3 Predict Image Prediksi foto Klik tombol predict image Muncul tulisan Loading, kemudian memunculkan hasil prediksi Sesuai 4 Delete image Menghapus foto Klik tombol Delete image Foto terhapus halaman berpindah ke halaman utama Sesuai
Berdasarkan tabel 3, terdapat delapan bagian yang diuji. Bagian pertama yaitu select image yaitu ketika user ingin mengambil foto yang ada pada galeri handphone seperti yang ditunjukan pada gambar. Bagian kedua yaitu open camera  yaitu  ketika  user  menekan  tombol  untuk  membuka  kamera  handphone  dan  melakukan  pengambilan  foto. Bagian  ketiga  yaitu  pada  halaman  hasil  yaitu  predict  image.  Dan  yang  keempat  yaitu  bagian  delete  image.  Dari keempat bagian yang sudah diuji, keempat bagian tersebut mendapatkan hasil yang sesuai dengan apa yang diharapkan di awal dan aplikasi dapat berjalan dengan baik sesuai dengan fungsionalitas masing-masing fitur.

## 3.5.2 Pengujian Performa Aplikasi
Pengujian  performa  aplikasi  dilakukan  dengan  melakukan  percobaan  dengan  melakukan  input  foto  dari  galeri  dan menggunakan kamera handphone. Kemudian dilihat dari waktu yang dibutuhkan aplikasi untuk memunculkan hasil prediksi. Berikut hasil dari pengujian performa aplikasi berdasarkan waktu yang prediksi objek.
Tabel 4. Hasil uji performa aplikasi No Sumber foto Lokasi objek Hasil Prediksi Waktu 1 Galeri Kulit polos Non Kanker 25097ms 2 Galeri Image HAM10000 Melanoma 994 3 Galeri Image HAM10000 Melanoma 1046 4 Galeri Kulit polos Non Kanker 24892 5 Galeri Image HAM10000 Melanoma 1015 6 Kamera Layar laptop Melanoma 28259 7 Kamera Kulit polos Non kanker 29575 8 Kamera Layar laptop Melanoma 28729 9 Kamera Kulit Melanoma 26288 10 Kamera Kulit polos Non Kanker 22147
Berdasarkan tabel 4, pengujian performa aplikasi dilakukan dengan cara menguji prediksi menggunakan lima foto yang berasal dari galeri dan lima foto yang berasal dari kamera langsung. Setelah dilakukan pengujian, hasil yang didapatkan adalah prediksi yang diambil dari galeri memiliki kecepatan yang hampir sama dengan foto yang diambil dari kamera langsung. Pengecualian untuk gambar dari dataset HAM10000. Diketahui bahwa gambar yang diambil dari  dataset  HAM10000  yang  diinputkan  dari  galeri  memiliki  waktu  prediksi  yang  jauh  lebih  cepat  dibandingkan dengan foto yang diambil dari kamera handphone, walaupun foto tersebut diambil dari galeri. Kesimpulan dari tabel diatas adalah durasi prediksi foto dapat menghasilkan waktu yang berbeda-beda dan dapat dipengaruhi oleh beberapa faktor diantaranya yaitu sumber foto, ukuran foto, bahkan objek yang terdapat pada foto.

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351

## 4. KESIMPULAN
Berdasarkan  hasil  dari  pengembangan  aplikasi  deteksi  kanker  kulit  menggunakan  expo  react  native  ini  dapat disimpulkan bahwa implementasi  model deep learning  pada aplikasi  deteksi  kanker kulit  menggunakan expo react native dapat  dilakukan dan berjalan dengan sangat  baik. Dengan aplikasi deteksi  kanker kulit ini diharapkan dapat membantu masyarakat untuk melakukan deteksi dini terhadap penyakit kanker kulit, terutama bagi masyarakat yang memiliki  tempat  tinggal  yang  jauh  dari  fasilitas  diagnosa  kanker  kulit  yang  memadai.  Selain  itu,  aplikasi  deteksi kanker kulit diharapkan dapat membantu para tenaga medis untuk melakukan penelitian lebih lanjut terhadap deteksi kanker  kulit.  Berdasarkan  hasil  evaluasi  performa  model  yang  digunakan  pada  aplikasi  deteksi  kanker  kulit  ini didapatkan hasil skor akurasi yang sudah cukup baik yaitu dengan rata-rata diangka 0.98. Dilain hal, hasil pengujian aplikasi  deteksi  kanker  kulit  yang  diuji  dengan  menggunakan  metode  Black  box testing  mendapat hasil  yang  baik dengan persentase keberhasilan 100%. Dari empat bagian aplikasi yang diuji, keempat bagian tersebut sesuai dengan rancangan  dan  dapat  berjalan  dengan  baik.  Selain  itu  hasil  pengujian  performa  aplikasi  yang  dilakukan  dengan mengukur  waktu  prediksi  berdsarkan  sumber  inputan  foto  menunjukan  bahwa  waktu  yang  dibutuhkan  untuk memprediksi  foto  bisa  bervariasi  tergantung  dari  suber  foto  maupun  ukuran  foto  tersebut.  Dengan  semua  hasil penelitian diatas, tentu masih banyak sekali hal yang bisa ditingkatkan seperti akurasi dari model H5 dan fitur pada aplikasi mobile seperti login user dan lain-lain. Tentunya peneliti sangatlah terbuka akan kritik dan saran karena hal tersebut  sangatlah  pengting  sebagai  bahan  evaluasi  peneliti  untuk  bisa  melakukan  penelitian  yang  lebih  baik  dari sebelumnya.  Dari  kesimpulan  ini  diharapkan  dapat  dijadikan  landasan  bagi  penelitian-penelitian  lain  terutama penelitian terkait deteksi kanker kulit.

## REFERENCES
[1] K.  K.  Rekayasa,  R.  R.  Saputro,  A.  Junaidi,  and  W.  A.  Saputra,  “Journal  of  Dinda  Klasifikasi  Penyakit  Kanker  Kulit Menggunakan  Metode  Convolutional  Neural  Network  (Studi  Kasus:  Melanoma),”  Data  Institut  Teknologi  Telkom Purwokerto, vol. 2, no. 1, pp. 52–57, 2022.
[2] R. Yohannes, “Klasifikasi Jenis Kanker Kulit Menggunakan CNN-SVM,” jurnal Algoritme, vol. 2, no. 2, pp. 133–134, 2022.
[3] S. Wilvestra, S. Lestari, and E. Asri, “Studi Retrospektif Kanker Kulit di Poliklinik Ilmu Kesehatan Kulit dan Kelamin RS Dr. M. Djamil Padang Periode Tahun 2015-2017,” 2018. [Online]. Available: http://jurnal.
[4] M. Dildar et al., “Skin cancer detection: A review using deep learning techniques,” International Journal of Environmental Research and Public Health, vol. 18, no. 10. MDPI AG, May 02, 2021. doi: 10.3390/ijerph18105479.
[5] N. Alyyu and R. Y. N. Fuaddah, “Klasifikasi Kanker Kulit Ganas Dan Jinak Menggunakan Metode Convolutional Neural Network,” 2022. [Online]. Available: https://www.kaggle.com/fanconic/skin-cancer-
[6] R. AGUSTINA, R. MAGDALENA, and N. K. C. PRATIWI, “Klasifikasi Kanker Kulit menggunakan Metode Convolutional Neural  Network  dengan  Arsitektur  VGG-16,”  ELKOMIKA:  Jurnal  Teknik  Energi  Elektrik,  Teknik  Telekomunikasi,  & Teknik Elektronika, vol. 10, no. 2, p. 446, Apr. 2022, doi: 10.26760/elkomika.v10i2.446.
[7] Ayu Octavi Anjani, “Meski Telah Terdeteksi di Awal, Masyarakat Masih Takut Terdiagnosis Kanker,” Kompas. Accessed: Nov.  15,  2023.  [Online].  Available:  https://www.kompas.id/baca/humaniora/2023/05/07/meski-telah-terdeteksi-di-awal- masyarakat-masih-takut-terdiagnosis- kanker?status=sukses_login%3Fstatus_login%3Dlogin&loc=hard_paywall&status_login=login
[8] Rokom, “Kanker Dapat Dikendalikan, Menkes : Kuncinya Deteksi Dini,” Sehat Negeriku. Nov. 2023. [Online]. Available: https://sehatnegeriku.kemkes.go.id/baca/umum/20230219/1742435/kanker-dapat-dikendalikan-menkes-kuncinya-deteksi- dini/https://sehatnegeriku.kemkes.go.id/baca/umum/20230219/1742435/kanker-dapat-dikendalikan-menkes-kuncinya- deteksi-dini/
[9] E.  Rezk,  M.  Haggag,  M.  Eltorki,  and W.  El-Dakhakhni,  “A  comprehensive  review  of  artificial intelligence  methods  and applications in skin cancer diagnosis and treatment: Emerging trends and challenges,” Healthcare Analytics, p. 100259, Dec. 2023, doi: 10.1016/j.health.2023.100259.
[10]  F.  Royana,  P.  Yuniar  Maulida,  R.  Nurul  Hasanah,  and  S.  Setia  Rahayu,  “Aplikasi  Mobile  Deteksi  Dini  Kanker  Kulit Berdasarkan Image Processing | 100,” 2021. [Online]. Available: http://journal.pwmjateng.com/index.php/jle
[11]  S.  S.  Chaturvedi,  K.  Gupta,  and  P.  S.  Prasad,  “Skin  lesion  analyser:  an  efficient  seven-way  multi-class  skin  cancer classification  using  mobilenet,”  in  Advances  in  Intelligent  Systems  and  Computing,  Springer,  2021,  pp.  165–176.  doi: 10.1007/978-981-15-3383-9_15.
[12]  B. Krohling, P. B. C. Castro, A. G. C. Pacheco, and R. A. Krohling, “A Smartphone based Application for Skin Cancer Classification  Using  Deep  Learning  with  Clinical  Images  and  Lesion  Information.”  Feb  2024  [Online].  Available: https://facebook.github.io/react-native/docs/getting-started
[13]  J. Rashid et al., “Skin Cancer Disease Detection using Transfer Learning Technique,” Applied Sciences (Switzerland), vol. 12, no. 11, Jun. 2022, doi: 10.3390/app12115714.
[14]  W. Shi et al., “Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel Convolutional Neural Network,” Sep. 2016, [Online]. Available: http://arxiv.org/abs/1609.05158
[15]  A. M. Taqi, F. Al Azzo, F. Al-Azzo, A. Awad, and M. Milanova, “Skin Lesion Detection by Android Camera based on SSD- Mo-bilenet and TensorFlow Object Detection API,” Article in Journal of Advanced Research, vol. 2019, pp. 6–12, 2019, doi: 10.5281/zenodo.3264023.

## Building of Informatics, Technology and Science (BITS)
Volume 6, No 1, Juni 2024 Page: 226 − 235 ISSN 2684-8910 (media cetak) ISSN 2685-3310 (media online) DOI 10.47065/bits.v6i1.5351
[16]  S. Singh, R. Shyam, and S. Khanna, “Development and Analysis of Android/iOS based Developers’ Platform Using Artificial intelligence and Machine Learning,” Journal of Android and IOS Applications and Testing, vol. 7, no. 1, pp. 16–21, Apr. 2022, doi: 10.46610/joaat.2022.v07i01.003.
[17]  K. Ali, Z. A. Shaikh, A. A. Khan, and A. A. Laghari, “Multiclass skin cancer classification using EfficientNets – a first step towards  preventing  skin  cancer,”  Neuroscience  Informatics,  vol.  2,  no.  4,  p.  100034,  Dec.  2022,  doi: 10.1016/j.neuri.2021.100034.
[18]  D. Andrianto Iskandar and A. Salam, “JURNAL MEDIA INFORMATIKA BUDIDARMA Evaluasi Performa Oversampling dan  Augmentasi  pada  Klasifikasi  Penyakit  Kulit  Menerapkan  Convolutional  Neural  Network,”  2024,  doi: 10.30865/mib.v8i1.7119.
[19]  R. Saifan and F. Jubair, “Six skin diseases classification using deep convolutional neural network,” International Journal of Electrical and Computer Engineering, vol. 12, no. 3, pp. 3072–3082, 2022, doi: 10.11591/ijece.v12i3.pp3072-3082.
[20]  D. Smilkov et al., “TENSORFLOW.JS: MACHINE LEARNING FOR THE WEB AND BEYOND,” 2019.
[21]  P.  Agrahari,  A.  Agrawal,  and  N.  Subhashini,  “Skin  Cancer  Detection  Using  Deep  Learning,”  2022,  pp.  179–190.  doi: 10.1007/978-981-16-4625-6_18.
[22]  H. Van, “Building a universal application with React and React Na-tive,” 2020. Accessed: Jun. 12, 2024. [Online]. Available: https://urn.fi/URN:NBN:fi:amk-2020052613741
[23]  M.  S.  Junayed,  N.  Anjum,  A.  N.  M.  Sakib,  and  M.  B.  Islam,  “A  Deep  CNN  Model  for  Skin  Cancer  Detection  and Classification,”  in  Computer  Science  Research  Notes,  Vaclav  Skala  Union  Agency,  2021,  pp.  71–80.  doi: 10.24132/CSRN.2021.3101.8.