Perangkat Lunak Edukasi Berbahasa Jepang dengan Pendekatan UI Framework Menggunakan React Native
Apriyo Fadli Alfian 1) , Rahayu Amalia 2) 1 Program Studi Teknik Informatika, Fakultas Ilmu Komputer, Universitas Bina Darma Palembang
2 Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Bina Darma Palembang 1,2 Jalan Jenderal A.Yani No. 3 Palembang Sumatera Selatan, Indonesia e-mail: apriyofadli@gmail.com , rahayu_amalia@binadarma.ac.id

## Abstrak
Perkembangan teknologi yang pesat telah memberikan perubahan di bidang pendidikan, salah satu perubahan tersebut adalah kemudahan dalam mengakses informasi. Berkat kemudahan tersebut, kebudayaan luar bahkan bahasa mereka juga masuk ke dalam negeri. Bahasa yang masuk akan terdengar dan terlihat asing bagi kita. Untuk memahaminya, tentu saja kita harus mempelajari bahasa tersebut. Survei yang dilakukan The Japan Foundation membuktikan bahwa minat untuk belajar bahasa Jepang di Indonesia masih tinggi. Namun, tidak mudah untuk mempelajari bahasa Jepang karena adanya perbedaan dalam huruf yang digunakan. Perbedaan huruf ini terkadang menjadi hambatan terbesar seseorang dalam mempelajari bahasa Jepang. Untuk mengatasi masalah tersebut, penulis ingin membuat aplikasi untuk mengenalkan huruf-huruf Jepang sesuai dengan konsep user interface. Aplikasi ini juga akan akan dibuat menggunakan framework react native dan metode waterfall, yang tahapannya terdiri dari desain tampilan, prototype, coding, testing, dan maintenance. Hasil dari penelitian ini berupa aplikasi pengenalan huruf-huruf Jepang yang menyediakan materi tentang huruf Jepang dan soal kuis.
Kata kunci —Edukasi, Bahasa Jepang, React Native, UI

## Abstract
The rapid development of technology has brought about changes in the field of education, one of which is the ease of accessing information. Thanks to this convenience, foreign cultures and even their languages also enter the country. The incoming language will sound and look foreign to us. To understand it, of course, we have to learn the language. A survey conducted by The Japan Foundation proves that interest in learning Japanese in Indonesia is still high. However, it is not easy to learn Japanese because of the differences in the alphabets used. This difference in letters is sometimes the biggest obstacle for someone in learning Japanese. To overcome this problem, the author wants to create an application to introduce Japanese letters according to the concept of user interface. This application will also be created using the react native framework and the waterfall method, whose stages consist of display design, prototype, coding, testing, and maintenance. The result of this research is an application to introduce Japanese letters that provides material about Japanese letters and quiz questions.
Keywords— Edukasi, Bahasa Jepang, React Native, UI

## 1. PENDAHULUAN
ahasa pada dasarnya merupakan ungkapan yang memiliki maksud tertentu, yang disampaikan oleh pembicara dan dapat dimengerti oleh lawan bicaranya [1]. Bahasa juga merupakan alat yang digunakan manusia untuk berkomunikasi satu sama lain. Komunikasi yang baik akan terjalin jika peserta percakapan saling memahami apa yang dikatakan oleh lawan bicaranya [2]. Namun, ada kalanya kedua pihak tidak memahami satu sama lain. Hal tersebut dapat terjadi disebabkan oleh beberapa faktor, seperti situasi, kondisi pembicara, perkataan yang sulit dipahami, dan bahasa yang tidak sama. Jika kedua pihak menggunakan bahasa yang berbeda, bahasa tersebut akan terdengar atau terlihat asing bagi mereka, sehingga terjadi kegagalan komunikasi. Bahasa asing pada dasarnya adalah bahasa yang tidak digunakan oleh negara asal seseorang.
Di era globalisasi saat ini, sangat penting untuk mempelajari bahasa asing. Seseorang yang menguasai bahasa asing dapat dengan mudah berkomunikasi lebih jauh, sehingga wawasan dan pandangan mereka terhadap dunia akan lebih luas. Dalam survei yang dilakukan oleh The Japan Foundation pada tahun 2018 [3], Indonesia tetap konsisten menduduki peringkat kedua sejak tahun 2012, dengan jumlah orang yang mempelajari bahasa Jepang sebanyak 709,479 orang. Ini membuktikan bahwa minat penduduk Indonesia dalam mempelajari bahasa Jepang masih tinggi. Namun, tidak jarang seseorang mengalami kesulitan atau hambatan saat mempelajari bahasa Jepang. Hal ini dikarenakan adanya perbedaan dalam elemen bahasa [4], yaitu pronunciation (pelafalan), vocabulary (kosa kata), dan grammar (struktur bahasa). Selain itu, perbedaan pada huruf atau aksara yang digunakan juga menjadi hambatan terbesar bagi seseorang dalam mempelajari bahasa Jepang.
Bahasa Jepang adalah salah satu bahasa yang memiliki aksara tersendiri. Jepang menggunakan 3 jenis aksara dalam bahasanya, yaitu hiragana , katakana , dan kanji . Hiragana dan katakana memiliki masing-masing 46 huruf, dan untuk kanji diperkirakan lebih dari 2000 huruf. Dengan banyaknya huruf-huruf tersebut, wajar saja jika hal ini menjadi hambatan paling besar dalam mempelajari bahasa.
Melihat masalah tersebut, penulis ingin membuat membuat sebuah aplikasi yang dapat mengenalkan huruf-huruf Jepang dan juga mengenalkan beberapa kosa kata yang nantinya sekaligus melatih pengguna agar terbiasa membaca menggunakan huruf-huruf tersebut. Aplikasi ini akan dibuat sesuai dengan konsep user interface [5] karena berdasarkan penelitian yang dilakukan oleh Bigelow dan Poremba, manusia dapat mengingat lebih baik ketika melihat dan merasakan. Sedangkan saat mendengar, manusia cenderung mengingat sebagian atau malah lebih sedikit dari apa yang dia dengar [6]. Aplikasi ini juga akan dibuat menggunakan salah satu UI framework buatan Facebook, yaitu React Native . Penulis memilih framework ini karena kemampuannya untuk berkomunikasi dengan komponen native suatu platform . Berdasarkan uraian-uraian di atas, maka penulis akan membuat penelitian ini dengan judul “Perangkat Lunak Edukasi Berbahasa Jepang dengan Pendekatan UI Framework
Menggunakan React Native ”.

## 2. METODE PENELITIAN
Penelitian ini akan menggunakan metode Research and Developmen t. Menurut Sugiyono, Research and Development adalah metode yang digunakan untuk menghasilkan produk tertentu dan menguji keefektifan produk tersebut [7]. Metode ini juga dijelaskan oleh Borg dan Gall, Research and Development merupakan proses untuk mengembangkan dan memvalidasi produk edukasi [8]. Berdasarkan beberapa pendapat di atas, maka dapat disimpulkan bahwa Research and Development adalah metode yang digunakan untuk mengembangkan produk baru melalui pengujian, sehingga produk tersebut dapat dipertanggungjawabkan. Sedangkan metode pengembangan aplikasi yang akan digunakan pada

## B
Apriyo Fadli Alfian, Peramgkat Lunak Edukasi Berbahasa Jepang dengan………….… 561 penelitian ini adalah waterfall . Metode ini adalah model pengembangan yang berurutan dan sistematis, karena setiap tahap akan dikerjakan sampai selesai sebelum masuk ke tahap berikutnya . Dalam penelitian ini, penulis telah menyesuaikan metode tersebut dengan rencana pengembangan aplikasi yang dibagi dalam lima tahapan. Tahapan tersebut sebagai berikut :
a. User Interface Design (Desain Tampilan)
Pengembangan akan diawali dengan desain tampilan, agar penulis memiliki gambaran pada aplikasi yang sedang dikembangkan. Pada tahap ini juga, desain akan disesuaikan dengan konsep user interface .
b. Prototype (Model Awal)
Walaupun termasuk metode pengembangan sistem, namun menurut penulis, prototype dapat digunakan sebagai salah satu tahapan agar aplikasi memiliki fitur dan fungsi yang jelas. c. Coding (Pengkodean)
Tahap ini merupakan implementasi dari tahap sebelumnya ke bahasa program yang sudah direncanakan. Penulis akan menggunakan bahasa program Javascript dan React .
d. Testing (Uji Coba) Setelah pengkodean selesai, penulis akan melakukan uji coba pada setiap fungsi. Jika semua fungsi dapat berjalan seperti yang diharapkan, maka akan masuk ke tahap selanjutnya.
e. Maintenance (Pemeliharaan) Setelah aplikasi berjalan semestinya, selanjutnya penulis akan melakukan perawatan rutin seperti penyesuaian materi atau perbaikan bug .
2.2 Perancangan Sistem
Setelah melakukan analisis, penulis akan melakukan perancangan sistem dalam bentuk empat model rancangan. Pertama, sequence diagram yang membahas navigasi aplikasi dari halaman utama sampai ke halaman kuis. Kedua, activity diagram yang membahas navigasi aplikasi lebih detail. Ketiga, class diagram yang membahas method dan fungsi yang digunakan. Dan keempat, desain tampilan sistem yang membahas antarmuka tiap halaman serta penempatan tiap elemen.

## 2.2.1 Sequence Diagram
Sequence diagram adalah diagram yang digunakan untuk menjelaskan interaksi antar objek dalam sistem secara rinci [9]. Diagram ini juga digunakan untuk mengetahui urutan kejadian serta output yang akan dihasilkan. Berikut adalah sequence diagram untuk aplikasi edukasi berbahasa Jepang yang penulis kembangkan :
a. Sequence diagram mempelajari hiragana Dalam gambar 2.1 di bawah, proses dimulai saat pengguna membuka aplikasi, aplikasi kemudian akan menampilkan menu utama yang berupa daftar hiragana line , ketika pengguna memilih salah satu line , halaman baru akan terbuka dan menampilkan seluruh bagian hiragana line yang dipilih. Pengguna dapat menekan tombol kuis untuk memulai kuis, dan pengguna dapat keluar dari kuis kapan saja dengan menekan tombol batalkan kuis.
Gambar 2.1 Sequence Diagram Hiragana
b. Sequence diagram mempelajari katakana Sequence diagram katakana memiliki urutan dan interaksi yang hampir sama dengan sequence diagram hiragana , yang membedakannya hanya interaksi pada listview katakana line .
Gambar 2.2 Sequence Diagram Katakana

## 2.2.2 Activity Diagram
Activity diagram adalah diagram yang digunakan untuk menjelaskan proses-proses yang terjadi dalam sistem, serta interaksi dan alur kerja sistem. Activity diagram untuk aplikasi edukasi berbahasa Jepang adalah sebagai berikut :
a. Activity diagram mempelajari hiragana atau katakana
Activity diagram untuk mempelajari kedua huruf tersebut dapat dilihat pada gambar 2.3 di bawah. Proses dimulai saat pengguna membuka aplikasi, aplikasi kemudian akan menampilkan menu utama yang berupa daftar hiragana / katakana line , ketika pengguna memilih salah satu line , halaman baru akan terbuka dan menampilkan seluruh bagian hiragana/katakana line yang dipilih. Pengguna dapat menekan tombol kuis untuk memulai kuis, dan pengguna dapat keluar dari kuis kapan saja dengan menekan tombol batalkan kuis. Saat tombol kuis ditekan, aplikasi akan mengambil soal yang sudah disiapkan sebelumnya dari database , dan menampilkannya pada pengguna. Saat pengguna menjawab soal tersebut, aplikasi akan memeriksa jawaban pengguna dan menyimpannya dalam data sementara. Jika semua soal sudah dijawab oleh pengguna, soal yang disimpan sementara tadi akan ditampilkan dalam bentuk skor.
Gambar 2.3 Activity Diagram Hiragana dan Katakana
2.2.3 Class Diagram Class diagram adalah diagram yang digunakan untuk menggambarkan struktur dan deskripsi dari class , attribute , method , dan hubungan antar objek secara rinci. Gambar 2.5 di bawah adalah class diagram dari aplikasi edukasi berbahasa Jepang yang penulis kembangkan.
Gambar 2.5 Class Diagram aplikasi edukasi berbahasa Jepang

## 2.2.4 Desain Antarmuka Sistem
Agar pengguna dan sistem dapat berinteraksi, antarmuka dibutuhkan untuk menerjemahkan data yang diolah oleh sistem dan menampilkannya dalam bentuk yang dapat dimengerti oleh pengguna [10]. Rancangan antarmuka yang penulis buat mencakup halaman utama, halaman belajar, halaman kuis, dan popup hasil.
a. Halaman Utama Gambar 2.6 adalah rancangan halaman utama, halaman ini akan muncul ketika aplikasi dibuka. Terdapat tab untuk mengganti jenis huruf yang akan dipelajari,
serta pilihan hiragana line yang dapat di scroll ke bawah. Jika salah satu pilihan tersebut dipilih, maka akan muncul halaman belajar.
Gambar 2.6 Halaman Utama
b. Halaman Belajar
Selanjutnya adalah halaman belajar, di halaman ini terdapat seluruh bagian dari line yang dipilih pengguna sebelumnya, dengan cara baca dan penggunaannya pada kata benda, serta arti dari kata benda tersebut.
Gambar 2.7 Halaman Belajar
c. Halaman Kuis
Halaman ini akan muncul saat pengguna menekan tombol mulai kuis di halaman belajar. Di halaman ini terdapat soal dan pilihan jawaban yang dapat pengguna pilih, serta tombol selanjutnya untuk melanjutkan soal. Terdapat juga tombol akhiri kuis jika pengguna ingin keluar dari kuis.
Gambar 2.8 Halaman Kuis
d. Popup Hasil
Popup ini akan muncul setelah pengguna menyelesaikan kuis. Terdapat jumlah soal yang telah dijawab dengan benar oleh pengguna, serta tombol untuk kembali ke halaman utama.
Gambar 2.9 Popup Hasil

## 3. HASIL DAN PEMBAHASAN

## 3.1 Hasil Implementasi
Implementasi adalah bentuk realisasi dari rancangan, model, ide, atau algoritma. Berdasarkan analisis sistem dan desain antarmuka yang sebelumnya dilakukan, penulis berhasil melakukan implementasi aplikasi edukasi berbahasa Jepang ini dalam bentuk aplikasi mobile menggunakan React Native . Di bawah ini adalah tampilan dari aplikasi beserta penjelasannya :
a. Halaman Utama Tampilan inilah yang akan muncul saat pengguna membuka aplikasi. Pada halaman ini terdapat kata selamat datang beserta fungsi aplikasi ini, dihiasi dengan gambar pohon sakura di belakangnya. Terdapat tab untuk mengganti jenis huruf dan di bawahnya adalah list dari jenis line yang dapat di scroll ke bawah. Jika salah satu jenis line di klik, maka akan membuka halaman belajar. b. Halaman Belajar
Pada halaman ini, seluruh bagian dari line yang dipilih sebelumnya akan ditampilkan dalam bentuk list yang dapat di scroll ke bawah. List ini di bungkus dalam bentuk card yang menampilkan gambar huruf, cara baca huruf, penggunaannya pada kata benda, arti dan cara baca kata benda tersebut. Jika tombol mulai kuis di klik, maka akan menuju ke halaman kuis.
Gambar 3.1 Halaman Utama Tab Hiragana
Gambar 3.2 Halaman Utama Tab Katakana
Gambar 3.3 Halaman Belajar
c. Halaman Kuis Di halaman ini pengguna akan menguji ingatannya terhadap huruf yang dipelajari. Di bagian atas terdapat tombol akhiri kuis jika pengguna ingin keluar dari kuis. Terdapat soal dan sebuah teks yang menampilkan jumlah soal di atasnya. Di bawah soal, terdapat pilihan yang dapat pengguna pilih, dan tombol selanjutnya untuk melanjutkan soal. Jika semua soal sudah dijawab, maka akan muncul Popup hasil.
Gambar 3.4 Halaman Kuis
d. Popup Hasil Popup ini akan muncul setelah pengguna menyelesaikan seluruh soal di halaman kuis. Popup ini menampilkan jumlah jawaban yang berhasil dijawab dengan benar oleh pengguna, serta tombol kembali ke halaman utama.

## Gambar 3.5 Popup Hasil

## 4. KESIMPULAN
Setelah melakukan perancangan, implementasi, dan pengujian aplikasi edukasi berbahasa Jepang, penulis mengambil beberapa kesimpulan sebagai berikut : a. Penulis berhasil melakukan implementasi aplikasi edukasi berbahasa Jepang menggunakan framework React Native .
b. Aplikasi dapat memberikan materi berupa nama huruf, cara baca, penggunaannya dalam kata benda, dan arti dari kata benda tersebut.
c. Aplikasi ini dapat digunakan sebagai bahan pengenalan atau untuk menguji pemahaman terhadap huruf Jepang, dan dapat digunakan di mana saja dan kapan saja.
5. SARAN
Penulis ingin memberikan beberapa saran untuk peneliti yang ingin melanjutkan pengembangan aplikasi yang telah dibuat :
a. Menambahkan materi huruf kanji yang disusun sesuai dengan kategorinya.
b. Menambahkan gambar benda sesuai dengan kata benda yang sedang dibahas pada halaman belajar.

## UCAPAN TERIMA KASIH
Penulis mengucapkan terima kasih kepada para anggota komunitas React Native yang telah membantu penulis saat kesulitan dalam tahap pengkodean aplikasi ini, dan banyak terima kasih kepada ibu Rahayu Amalia, M.Kom. yang telah membimbing penulis dalam penelitian ini.

## DAFTAR PUSTAKA
[1] G. Keraf, Komposisi . 1997.
[2] A. S. Rustan, “MENJALIN HUBUNGAN (RELATION) DALAM PERSPEKTIF KOMUNIKASI EFEKTIF Ahmad,” KOMUNIDA Media Komun. dan Dakwah , vol. 5, no. 1, pp. 78–90, 2019. [3] The Japan Foundation, “SURVEY REPORT ON JAPANESE-LANGUAGE EDUCATION ABROAD 2018,” Japan, 2020. Accessed: Feb. 05, 2022. [Online].
Available: https://www.jpf.go.jp/e/project/japanese/survey/result/survey18.html
Apriyo Fadli Alfian, Peramgkat Lunak Edukasi Berbahasa Jepang dengan………….… 569 [4] I. G. A. A. D. Susanthi, “Kendala dalam Belajar Bahasa Inggris dan Cara Mengatasinya,” Linguist. Community Serv. J. , vol. 1, no. 2, pp. 64–70, 2020, doi: 10.55637/licosjournal.1.2.2658.64-70.
[5] F. Fazeena Jamaldeen, K. P. Hewagamage, and Y. Ekanayaka, “Design guidelines for creating mobile language learning applications,” Int. J. Interact. Mob. Technol. , vol. 12, no. 3, pp. 52–74, 2018, doi: 10.3991/ijim.v12i3.8153. [6] J. Bigelow and A. Poremba, “Achilles’ Ear? Inferior Human Short-Term and Recognition Memory in the Auditory Modality,” PLoS One , vol. 9, no. 2, p. e89914, Feb. 2014, doi: 10.1371/journal.pone.0089914.
[7] D. Sugiyono, Metode Penelitian Pendidikan Pendekatan Kuantitatif, Kualitatif dan R&D . Bandung: Alfabeta, 2013. [8] B. W.R. and G. M.D., Educational Research: An Introduction, Fifth Edition. Instructor’s manual , 5th ed. New York: Longman, 1996. [9] D. Bell, “UML basics: The sequence diagram,” Http://Www.Ibm.Com/Developerworks/Rational/Library/3101.Html , vol. 1, p. 10, 2013. [10] B. A. Myers, “User Interface Software Tools,” ACM Trans. Comput. Interact. , vol. 2, no. 1, pp. 64–103, 1995, doi: 10.1145/200968.200971.