Gambar 3.

1 Activity Diagram Aplikasi

Aplikasi xxx dimulai dengan pengguna membuka aplikasi dan melihat halaman Home, di
halaman ini terdapat beberapa menu diantaranya untuk membuka halaman Tutorial, halaman
Dalil, halaman Quis dan halaman Tentang.
Jika pengguna membuka halaman Tutorial maka akan ditampilkan halaman untuk memilih
jenis kelamin, lalu menampilkan halaman pemilihan rentang umur. Setelah itu ditampilkan
halaman pemilihan tutorial, pengguna juga dapat melakukan pencarian tutorial, jika tutorial
dipilih maka aplikasi akan menampilkan halaman untuk mengikuti tutorial.
Jika pengguna membuka halaman Quis akan di tampilkan pilihan untuk mengikuti quis atau
melihat score. Ketika pengguna memilih mengikuti quis maka ditampilkan halaman pemilihan
quis dan pengguna di minta untuk memilih quis yang lalu akan diikuti, setelah mengikuti quis
maka pengguna dapat melihat halaman score.
Jika pengguna memilih melihat halaman Dalil maka ditampilkan halaman pemilihan dalil
dimana dapat dilakukan pencarian dalil. Dengan menekan salah satu dalil maka akan ditapilkan
halaman baca dalil.
Pengguna dapat melihat halaman Tentang yang berisi informasi mengenai aplikasi ini.
 Gambar 3.2 Diagram Sequence Quis

Gambar 3.2 menggambarkan bagaimana alur kerja aplikasi jika pengguna membuka Quis
dari awal hingga akhir. Pada halaman Home pengguna menekan menu untuk membuka halaman
Quis yang lalu akan menampilkan pilihan untuk mengikuti quis atau melihat score. Jika pengguna
memilih untuk membuka halaman Score maka akan ditampilkan score quis yang telah di ikuti
pengguna sebelumnya. Jika pengguna memilih untuk mengikuti quis maka akan ditampilkan
halaman IkutQuis dimana pengguna dapat memilih quis lalu mengikuti tiap quis, setelah
mengikuti quis maka pengguna diarahkan ke halaman EndQuis dimana pengguna mengisi nama
yang lalu disimpan ditampilkan di halaman Score.
 Gambar 3.3 Diagram Sequence Dalil

Gambar 3.3 menggambarkan bagaimana alur kerja aplikasi jika pengguna membuka menu
Dalil. Pada halaman Home pengguna menekan menu Dalil untuk membuka halaman Dalil yang
lalu akan menampilkan halaman Dalil. Pada halaman dalil ditampilkan daftar dalil dan menu
pencarian, jika pengguna melakukan pencarian akan ditampilkan daftar dalil yang dicari.
Pengguna dapat memilih dalil yang lalu akan diarahkan ke halaman BacaDalil untuk menampilkan
dalil yang dipilih.
 Gambar 3.4 Diagram Sequence Tutorial

Gambar 3.4 menggambarkan bagaimana alur kerja aplikasi jika pengguna membuka
halaman Tutorial. Pada halaman Home pengguna menekan menu untuk membuka halaman
Tutorial yang lalu akan menampilkan halaman KategoriTutorial untuk memilih jenis kelamin,
setelah dipilih akan ditampilkan halaman RentangUmurTutorial dimana pengguna memilih
rentang umur tutorial yang akan diikuti. Setelah memilih rentang umur akan di tampilkan
halaman Tutoria berisi daftar tutorial yang sesuai dengan jenis kelamin dan rentang umur yang
dipilih sebelumnya. Pada halaman Tutorial juga ditampilkan menu pencarian yang jika dilakukan
pencarian akan menampilkan daftar tutorial sesuai dengan yang dicari. Jika pengguna memilih
salah satu tutorial maka akan ditampilkan halaman BacaTutorial dimana pengguna mengikuti
pencarian.
 Gambar 3.5 Diagram Sequence About

Gambar 3.5 menggambarkan bagaimana alur kerja aplikasi jika pengguna membuka menu
About. Pada halaman Home jika pengguna menekan menu About maka akan ditampilkan
halaman berisi informasi mengenai aplikasi ini.
 Gambar 3.6 Diagram Use Case

Gambar 3.6 menggambarkan bagaimana proses bisnis yang ada pada aplikasi yaitu terdapat
satu aktor yaitu pengguna dimana pengguna dapat melihat melihat tutorial jika pengguna telah
memilih kategori tutorial dan memilih rentang umur tutorial, pada saat melihat tutorial pengguna
dapat mencari tutorial berdasarkan judul tutorial yang ada.
Selain melihat tutorial pengguna juga dapat melihat dalil, saat melihat dalil pengguna dapat
mencari dalil yang dia inginkan,
Selain itu Pengguna dapat juga melihat quis apa saja yang ada pada aplikasi, dimana
pengguna dapat mengikuti quis atau melihat score board yang ada pada aplikasi
dan juga pengguna dapat melihat about dimana merupakan deskripsi pembuat aplikasi
pada halaman tersebut
Gambar 3.7 Class Diagram Aplikasi Dengan Framework React Native
 Gambar 3.7 menggambarkan bagaimana class Diagram pada aplikasi dengan menggunakan
framework react native, dimulai dengan Class App yang merupkan entry point saat aplikasi
dijalankan.
Class app memiliki satu method render yang akan memproses bagaimana aplikasi akan
dijalankan dan dibangun, method render ini membutuhkan Class RootContainer yang memiliki
method componentDidMount yang merupakan method yang akan mengecek apakah aplikasi
sudah terhubung dengan redux atau belum.
Jika belum maka menghubungkan aplikasi dengan redux (redux merupakan libarary
pengelola database dalam aplikasi react native) saat sebelum method render dipanggil, saat
render dipanggil Class RootContainer akan merender Activity Bar dan Class Redux Navigation
yang berguna menghandle Screen Mana yang pertama kali muncul saat aplikasi dijalankan, dan
Bagaimana melakukan Navigasi diantara screen.
Tentunya Class Redux Navigation Membutuhkan Class App Navigation yang merupakan class
yang mengatur screeen mana yang akan digunakan dan screen mana yang akan tampil di awal
dan menghubungakn setiap – Class Screen yang ada seperti pada diagram.
Saat class HomeScreen dipanggil ia memiliki satu method render yang akan menampilkan 4
button setiap button menghubungkan 4 class screen yaitu KategoriTutorialScreen, AboutScreen,
DalilScreen dan QuisScreen.
Jika pengguna mengklik salah satu Button tersebut maka screen akan berganti sesuai
dengan button yang diklik.
KategoriTutorialScreen memiliki attribut loading berupa boolean dimana default value dari
loading ini true karena sebelum Class ini dapat mengakses data tutorial maka class ini akan
merender tampilan loading, class ini juga memiliki attribut dataTutorial berupa array yang akan
digunakan untuk menampung data yang didapat dari Database, agar mudah di tampilkan saat di
render.
Method class ini yaitu render yang akan menampilkan kategori tutorial yang ada sesuai data
yang didapat, method ComponentDidMount merupakan method yang akan dijalankan apabila
render telah berhasil dipanggil, method ini akan menggunakan method _getKategoriTutorial()
yang akan memproses data Tutorial untuk diambil kategori tutorial berdasarkan data yang
didapat, dan menset loading menjadi false, apabila telah mengambil data tutorial.
Data tutorial ini beruapa list tombol yang akan menyambungkan screen ke class
RentangUmurScreen, karena apabila pengguna telah memilih kategori tutorial maka akan
dialihkan ke screen Class RentangUmurTutorialScreen.
Mekanisme class RentangUmurTutorialScreen hampir sama dengan class
KategoriTutorialScreen dimana disini yang membedakan adalah method pada class
RentangUmurTutorialScreen adalah _getRentangUmur() sedangkan pada method class
KategoriTutorialScreen adalah _getKategoriTutorial() namun konsepnya sama tapi yang
membedakan disini ialah data yang diambil di screen ini adalah rentang umur tutorial yang ada
pada database.
Class ini akan mernder rentang umur yang ada pada data tutorial, dan apabila pengguna
mengklik salah satu rentang umur yang ada maka akan di linkan ke Class TutorialScreen , class ini
akan merender list tuorial yang ada berdasrakan kategori dan rentang umur yang telah di pilih di
screen sebelumnya. beberapa method fungsinya sama dengan class sebelumnya namun yang
membedakan disini ada method _keyExtractor() yang berguna mengambil key saat list tutorial di
render.
Dan ada method _renderIcon() yang akan berguna membedakan jenis icon yang dipakai
berdasarakan jenis tutorial yang akan di render, class ini hanya akan merender judul tutorial saja,
karena apabila pengguna ingin membaca tutorial maka akan di alihkan ke screen dengan class
BacaTutorialScreen, yang memiliki satu method render() yang akan merender data tutorial yang
telah dipilih di screen sebelumnya, sedangkan apabila pengguna memilih tutorial berjenis video
maka pengguna akan diarahkan ke class LiatVideoScreen, untuk Melihat tutorial berjenis photo
maka pengguna akan dialihkan ke class TontonVideoScreen.
Apabila pengguna berada di home screen dan memilih untuk melihat dalil maka class
DalilScreen yang akan dipanggil , class DalilScreen fungsinya hampir sama dengan class
TutorialScreen yang membedakan disini ialah data yang diambilnya yakni berupa data dalil, kelas
ini juga hanya akan merender list judul dalil yang ada, jika pengguna tertarik ingin membaca dalil
tersebut maka pengguna mengklik judul dalil tersebut dan diarahkan ke screen dengan class
BacaDalilScreen yang memiliki satu method yaitu render(), dimana akan mernder data dalil yang
telah dipilih di class sebelumnya.
Jika Pengguna berada di home screen dan ingin melihat about maka pengguna yang
mengklik tombol about akan di arahkan ke screen class AboutScreen, dimana class ini hanya
memiliki satu method saja yaitu render() yang akan merender tampilan halaman about.
Class QuisScreen memiliki satu method render yaitu akan menampilkan 2 buttton yang
dilinkan ke screen class PilihQuisScreen, jika pengguna ingin memilih quis, dan class
ScoreQuisScreen jika pengguna ingin melihat score board pada aplikasi
Pada class ScoreQuisScreen memiliki satu property berupa score dengan tipe data object
yang akan menampung score yang didapat, method componentDidMount akan berjalan setelah
komponent dirender dimana method ini akan menghandle tombol back yang akan ditekan oleh
pengguna jika pengguna ingin kembali ke home screen, method componentWillUnMount akan
dijalankan apabila render aplikasi telah selesai dikerjakan dia akan menghapus handle tombol
back yang ditekan, karena pengguna tidak ada di screen tersebut, sedangkan method
componentWillMount akan dipanggil sebelum komponent di render, dimana
componentWillMount berfungsi salah satunya untuk mengurutkan data score pada aplikasi.
Class PilihQuisScreen akan menampilkan halaman list quis yang bisa diambil oleh pengguna
sedangkan untuk attribut dan methodnya sama dengan classs DalilScreen dan TutorialScreen
yang membedakan disini ialah method _getQuis sehingga data yang dia miliki adalah data list
quis .
Saat pengguna memimilih salah satu quis maka pengguna akan di alihkan ke scene dengan
class IkutiQuisScreen dimana class ini akan merender setiap pertanyaan yang telah di pilih, dan
juga class ini akan mengoreksi jawaban ketika pengguna memimilih jawaban yang ada.
Saat Semua pertanyaan telah selesai maka pengguna akan dialihkan ke scene dengan class
EndQuisScreen, dimana score pengguna akan ditampilkan dan pengguna harus menginput nama
pengguna yang telah mengikuti quis untuk dimasukan ke dalam board score.
 Gambar 3.8 Entitas Diagram Struktur Data Aplikasi

Gambar 3.8 menggambarkan bagaimana Struktur Data Aplikasi dalam bentuk Class Diagram,
disini penulis memilih struktur data berbentuk objek yang memiliki 11 Entitas untuk struktur
data aplikasi yang dipakai.
Aplikasi Membutuhkan Data Kumpulan Dalil Sehingga Entitas ListDalil dibuat, entitas ListDalil
Memiliki Properti atau attribut data dengan nama listDalil yang bertipe data Object dimana
nilainya akan disi dengan Entitas Dalil karena Kumpulan Dalil Terdiri dari Bebarapa Dalil sehingga
Entitas Dalil dibuat. Entitas Dalil memiliki property id dengan tipe data string, id disini akan
membedakan tiap Entitas dalil yang ada, property judul yang bertipe data string yang akan
menyimpan data judul dalil, dan ada property isi dengan tipe data komponent, tipe data
komponent merupakan tipe data yang ada pada react native dimana komponent ini akan
merender isi dalil yang dibuat. dan ada property screen dengan tipe data string, property screen
berguna untuk menamai screen mana yang akan dipilih jika entitas dalil di render.
Aplikasi Membutuhkan Data Score Board sehingga Entitas ListScore dibuat, Score Board
Menampung score quis yang telah di buat oleh user setelah menyelesaikan quis, sehingga entitas
ListScore memiliki property listscore dengan tipe data array, dimana nilainya akan diisi dengan
entitas score. Entitas Score hanya terdiri dari dua property yaitu, nama yang beripe data string,
untuk diisi dengan nama pengguna yang telah mendapatkan score, dan property score dengan
tipe data int, yang diisi dengan score yang berhasil dibuat oleh pengguna.
Aplikasi Membutuhkan Data Tutorial, namun data tutorial ini dibedakan menjadi kategori
tutorial berupa tutorial untuk laki – laki dan tutorial untuk perempuan, sehingga entitas kategori
tutorial dibuat, entitas kategori tutorial memiliki property laki dengan tipe data object laki, dan
property perempuan dengan tipe data object, sehinga dibuat entitas laki dan entitas perempuan
property yang dimiliki oleh dua entitas tersebut sama yaitu memiliki property label yang bertipe
data string yang digunakan untuk mengasih label nama kategori, dan property icon yang bertipe
data string, yang akan diisi dengan nama icon yang dipakai oleh tiap kategori yang ada pada
tutorial, dan yang terakhir property rentangUmur yang bertipe data object dimana propety ini
akan membedakan tiap kategori dengan rentang umur yang ada pada tutorial sehingga entitas
rentangUmur dibuat. Entias rentangUmur memiliki property bebas, balita, remaja, dewasa, dan
lansia dengan tipe object, setelah dipisahkan kategori tutorial berdasarkan jenis kelamin dan
rentang umur barulah disini entitas bebas, balita, remaja, dewasa, dan lansia yang bakal memilki
property listutorial dengan tipe data object yang akan diisi dengan beberapa entitas tutorial,
entitas tutorial merupakan Kumpulan Data Tutorial Sehingga dibuat Entitas ListTutorial, property
yang ada yaitu listTutorial yang bertipe data Object dimana nilainya akan diisi dengan entitas
tutorial, karena kumpulan tutorial memilki banyak tutorial, pada entitas tutorial property yang
dimiliki yaitu id dengan tipe data string untuk membedakan tiap tutorial, judul dengan tipe data
string nilainya akan diisi dengan judul tutorial, dan isi dengan tipe data komponent, tipe data
komponent merupakan tipe data yang ada pada react native dimana komponent ini akan
merender isi tutorial yang dibuat. dan ada property screen dengan tipe data string, property
screen berguna untuk menamai screen mana yang akan dipilih jika entitas tutorial di render.
Aplikasi membuthkan data quis untuk itu terdapat entitas yang merupakan kumpulan
entitas Quis, entitas listQuis memiliki property quis yang bertipe data object, nilai dari property
quis merupakan entitas quis yang merupakan quis yang ada pada aplikasi, property yang dimiliki
yaitu tanya bertipe data string yang berisi pertanyaan soal, tipe yang bertipe data string
merupakan tipe jenis pertanyaan sperti mulitple choice atau benar salah, listjawab memiliki tipe
data object, dimana listjawab merupkan opsi jawaban pada soal, entitas listjawab memiliki
property isjawab yang merupakan tipe data string berupa string jawaban, dan property benar
yang memiliki tipe data boolean, apabila jawaban itu benar maka benar berniali true.