57
i SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK MEMBANGUN APLIKASI AL-QURAN BERBASIS ANDROID HANDIKA JULIASNYAH Nomor Mahasiswa : 165410212 PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATKA DAN KOMPUTER AKAKOM YOGYAKARTA 2020

SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

i

SKRIPSI

PENGGUNAAN FRAMEWORK FLUTTER UNTUK MEMBANGUN

APLIKASI AL-QUR’AN BERBASIS ANDROID

HANDIKA JULIASNYAH

Nomor Mahasiswa : 165410212

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATKA DAN KOMPUTER

AKAKOM

YOGYAKARTA

2020

Page 2: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

ii

SKRIPSI

PENGGUNAAN FRAMEWORK FLUTTER UNTUK MEMBANGUN

APLIKASI AL-QUR’AN BERBASIS ANDROID

Diajukan sebagai salah satu syarat untuk menyelesaikan studi jenjang strata satu

(S1) Program Studi Teknik Informatika

Sekolah Tinggi Manajemen Informatika dan Komputer

Akakom

Yogyakarta

Disusun Oleh

Handika Juliansyah

Nomor Mahasiswa : 165410212

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM YOGYAKARTA

2020

Page 3: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

iii

HALAMAN PERSETUJUAN

Judul : Penggunaan Framework Flutter Untuk Membangun

Aplikasi Al-Qur’an Berbasis Android

Nama : Handika Juliansyah

NIM : 165410212

Pogram Studi : Teknik Informatika

Jenjang : Strata Satu (S1)

Tahun : 2020

Telah diperiksa dan disetujui

Yogyakarta, November 2020

Megetahui

Dosen Pembimbing,

Edi Faizal, S.T., M.Cs.

Page 4: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

iv

HALAMAN PENGESAHAN

SKRIPSI

PENGGUNAAN FRAMEWORK FLUTTER UNTUK MEMBANGUN

APLIKASI AL-QUR’AN BERBASIS ANDROID

Telah dipertahankan di depan Dewan Penguji Skripsi dan dinyatakan

diterima untuk memenuhi sebagai syarat guna memperoleh Gelar Sarjana

Komputer Sekolah Tinggi Manajemen Informatika dan Komputer

Yogyakarta

Yogyakarta, November 2020

Mengesahkan

Dewan Penguji Tanda Tangan

1 Edi Faizal, S.T., M.Cs. …………………..

2 Tri Prabawa, Drs., M.Kom. …………………..

Mengetahui

Ketua Program Studi Teknik Informatika

Dini Fakta Sari, S.T., M.T.

Page 5: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

v

HALAMAN PERSEMBAHAN

Puji dan syukur kehadirat Allah SWT atas berkat rahmat dan hidayah - Nya

sehingga penulis dapat menyelesaikan skripsi ini , Demikian pula ṣalawat dan

taslim disampaikan kepada junjungan Baginda Rasulullah Muhammad SAW yang

merupakan uswah al-ḥasanah. Melalui kesempatan ini, penulis mengucapkan

terimakasih dan mempersembahkan karya tulis atau skripsi ini kepada keluarga

besar penulis khususnya Ayahanda tercinta Tifhan Yandika dan Ibunda tersayang

Sri Rahayu yang telah memberikan dukungan baik moril maupun materil serta doa

yang tiada henti-hentinya kepada penulis.

Kepada Saudara-Saudaraku (Dwiky Ahmad Ramadhan, Ananda Tri

Wibowo dan Si bungsu Medina Divanesia Tifhani) terimakasih atas semangat yang

telah diberikan tiada henti.

Untuk Angkatan 2016 Teknik Informatika terutama keluarga besar Don’t

Give Up (Mas Fitra,Mas Doni,Mas Edy, MasYudi,Ali,Mba Rismi dan Mba Endah,)

yang tiada henti memberikan dukungan dan masukan dari awal perkuliahan sampai

akhirnya tugas akhir ini terselesaikan sekali lagi terimakasih banyak DGU.

Untuk teman-teman Abung Perkasa Trust Steel khususnya Agus

Setiawan,S.T. selaku kerabat dan atasan di tempat saya bekerja, terimakasih atas

semua dukungan untuk menyelesaikan penelitian ini.

Page 6: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

vi

MOTTO

• “Apabila di dalam diri seseorang masih ada rasa malu dan takut untuk

berbuat suatu kebaikan, maka jaminan bagi orang tersebut adalah tidak akan

bertemunya ia dengan kemajuan selangkah pun. ― Ir.Soekarno

• “Dreams never hurt anybody if he keeps working right behind the dream to

make as much of it come real as he can.”_ ― F. W. Woolworth

• “Recipe For Greatness – To bear up under loss; To fight the bitterness of

defeat and the weakness of grief; To be victor over anger; To smile when

tears are close; To resist disease and evil men and base instincts; To hate

hate and to love love; To go on when it would seen good to die; To look up

with unquenchable faith in something evermore about to be. That is what

any man can do, and be great.” ―Zane Grey

Page 7: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

vii

INTISARI

Kegiatan membaca Al-Qur'an merupakan salah satu bentuk ibadah yang

agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini

dilakukan untuk merancang dan mengimplementasikan Al-Qur’an berbasis aplikasi

android dengan menggunakan Framework Flutter dengan tujuan agar Al-Qur'an

dapat dibaca dan dipahami dimana saja sesuai dengan fungsi perangkat berbasis

android dalam hal ini telepon seluler, Aplikasi ini menyediakan beberapa fitur yaitu

nama surah, keterangan surah , ayat, terjemahan serta tafsir dari sumber terpercaya

yaitu Kemenag.

Aplikasi ini di bangun dengan menggunakan Framework Flutter dan Bahasa

pemrograman Dart, Flutter sendiri merupakan SDK besutan Google yang ditujukan

untuk mobile apps development yang memiliki kinerja tinggi. Mobile apps yang di

kembangkan dengan Flutter dapat dipublikasi ke platform Android maupun iOS

dari codebase tunggal. Flutter ditulis dengan bahasa pemrograman C, C++, Dart,

menggunakan Skia milik Google sebagai mesin render 2D, dan Blink digunakan

untuk sistem render serta didukung dengan Mojo IPC. Flutter dapat dijalankan

sistem operasi android 4.1 atau system operasi yang lebih tinggi.

Berdasarkan hasil pengujian, aplikasi Al-Qur’an berbasis android ini sukses

berjalan di atas system operasi android versi 9.0 atau android Pie.

Kata kunci : Al-Qur’an, Flutter, Android, Dart,Mobile Apps

Page 8: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

viii

KATA PENGANTAR

Puji dan syukur kehadirat Allah SWT atas berkat rahmat dan hidayah - Nya

sehingga penulis dapat menyelesaikan Skripsi dengan judul “Penggunaan

Framework Flutter Untuk Membangun Aplikasi Al-Qur’an Berbasis Android”.

Skripsi ini disusun untuk memenuhi syarat dalam memperoleh gelar Sarjana Teknik

Informatika pada Sekolah Tinggi Manajemen Informatika Dan Komputer Akakom

Yogyakarta.

Penelitian dan penyusunan Tugas Akhir ini penulis telah mendapatkan

banyak sekali dukungan dan bantuan dari berbagai pihak. Penulis mengucapkan

terima kasih yang sebesar-besarnya kepada:

1. Bapak Edi Faizal, S.T., M.Cs. selaku dosen Pembimbing Skripsi yang telah

memberikan banyak pengarahan dalam penyusunan Skripsi ini.

2. Bapak Tri Prabawa, Drs., M.Kom. selaku dosen Penguji yang telah memberikan

banyak pengarahan dan masukan dalam sidang Skrispsi ini.

3. Bapak Yosef Murya Kusuma Ardhana, ST, M.Kom. selaku dosen Pembimbing

Akademik yang tiada henti memberi masukan dan dukungan selama ini.

4. Ibu Dini Fakta Sari ,S.T., M.T. selaku Ketua Program Studi Teknik Informatika

STMIK Akakom.

5. Bapak Ir. Totok Suprawoto, M.M., M.T. selaku Ketua dari kampus tercinta STMIK

Akakom Yogyakarta.

Yogyakarta, November 2020

Penulis

Page 9: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

ix

DAFTAR ISI

COVER ................................................................................................................... i

HALAMAN JUDUL ............................................................................................... ii

HALAMAN PERSETUJUAN ............................................................................... iii

HALAMAN PENGESAHAN ................................................................................ iv

HALAMAN PERSEMBAHAN ............................................................................. v

MOTTO ................................................................................................................. vi

INTISARI .............................................................................................................. vii

KATA PENGANTAR ......................................................................................... viii

DAFTAR ISI .......................................................................................................... ix

DAFTAR GAMBAR ............................................................................................. xi

DAFTAR TABEL ................................................................................................. xii

BAB I PENDAHULUAN ...................................................................................... 1

1.1. Latar Belakang Masalah .................................................................................... 1

1.2. Rumusan Masalah ............................................................................................. 2

1.3. Ruang Lingkup .................................................................................................. 2

1.4. Tujuan Penelitian ............................................................................................... 3

1.5. Manfaat Penelitian ............................................................................................. 3

1.6. Sistematika Penulisan ........................................................................................ 3

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI ....................................... 5

2.1 .Tinjauan Pustaka .............................................................................................. 5

2.2 Dasar Teori ........................................................................................................ 7

2.2.1 Aplikasi.............................................................................................................. 7

2.2.2 Aplikasi Mobile ................................................................................................. 8

2.2.3 Flutter ................................................................................................................ 8

2.2.4 Dart .................................................................................................................. 10

2.2.5 Al-Qur’an ........................................................................................................ 11

2.2.6 Android ............................................................................................................ 12

2.2.7 JDK (Java Development Kit) .......................................................................... 13

2.2.8 Visual Studio Code (Kode Editor) ................................................................... 13

2.2.9 JSON (JavaScript Object Notation) ................................................................. 13

Page 10: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

x

2.2.10 Black Box Testing ....................................................................................... 14

BAB III METODE PENELITIAN....................................................................... 15

3.1. Metode Pengumpulan Bahan/Data .................................................................. 15

3.1.1. Kebutuhan Proses ........................................................................................ 15

3.1.2. Kebutuhan Output ....................................................................................... 15

3.1.3. Kebutuhan Prangkat Lunak ......................................................................... 15

3.1.4. Kebutuhan Perangkat Keras ........................................................................ 16

3.2. Perancangan Sistem ......................................................................................... 16

3.2.1. Usecase Diagram ......................................................................................... 16

3.2.2. Squence Diagram ........................................................................................ 18

3.2.3. Activity Diagram ......................................................................................... 21

3.2.5. Rancangan Antarmuka Aplikasi .................................................................. 22

BAB IV IMPLEMENTASI DAN PEMBAHASAN ........................................... 27

4.1. Implementasi dan Uji Coba Sistem ....................................................................... 27

4.1.1. Kode Program Untuk Memparse Data dari file JSON ....................................... 27

4.1.2. Kode Program Future di Flutter ......................................................................... 28

4.1.3. Kode Program Future Builder dan List View Builder di Flutter ....................... 28

4.1.4. Kode Program Detail Ayat Al-Qur’an ................................................................ 30

4.1.5. Kode Program Terjemahan dan Tafsir Al-Qur’an .............................................. 30

4.2. Pembahasan ........................................................................................................... 32

4.2.1. Tampilan Tab Al-Qur’an .................................................................................... 32

4.2.2. Tampilan Detail Ayat Al-Qur’an ........................................................................ 33

4.2.3. Tampilan Terjemahan Dan Tafsir ....................................................................... 34

4.2.4. Tampilan Tab Asma’ul Husna ............................................................................ 35

4.2.5. Tampilan Tab Doa Harian .................................................................................. 36

4.2.6. Tampilan Tab About ........................................................................................... 37

4.3. Hasil Pengujian ...................................................................................................... 38

4.3.1 Hasil Pengujian Aplikasi ..................................................................................... 39

BAB V PENUTUP ............................................................................................... 42

5.1. Kesimpulan ............................................................................................................ 42

5.2. Saran ...................................................................................................................... 42

DAFTAR PUSTAKA ........................................................................................... 44

Page 11: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

xi

DAFTAR GAMBAR

Gambar 2. 1. Gambaran Sistem Flutter ................................................................. 10

Gambar 3. 1. Usecase Diagram ............................................................................. 17

Gambar 3. 2. Squance Diagram Melihat Tab Utama ............................................ 18

Gambar 3. 3.Squance Diagram melihat Tab Al-Qur’an ....................................... 19

Gambar 3. 4. Squance Diagram melihat Tab Asma’ul Husna .............................. 19

Gambar 3. 5. Squance Diagram melihat Tab Doa Harian..................................... 20

Gambar 3. 6.Squance Diagram melihat Tab About .............................................. 20

Gambar 3. 7. Activity Diagram ............................................................................. 21

Gambar 3. 8. Class Diagram ................................................................................. 22

Gambar 3. 9. Desain Antar Muka Tab Al-Qur’an ................................................ 23

Gambar 3. 10. Desain Antar Muka Tab Asma’ul Husna ...................................... 24

Gambar 3. 11. Desain Antar Muka Tab Doa Harian............................................. 25

Gambar 3. 12. Desain Antar Muka Tab About ..................................................... 26

Gambar 4. 1. Kode Program Untuk Memparse Data dari file JSON .................... 27

Gambar 4. 2. Kode Program Future di Flutter ...................................................... 28

Gambar 4. 3. Kode Program Future Builder dan List View Builder di Flutter..... 29

Gambar 4. 4. Kode Program Detail Ayat Al-Qur’an ............................................ 30

Gambar 4. 5 Kode Program Terjemahan Al-Qur'an ............................................. 30

Gambar 4. 6. Kode Program Tafsir Al-Qur’an ..................................................... 31

Gambar 4. 7. Tampilan Tab Al-Qur’an ................................................................. 32

Gambar 4. 8. Tampilan Detail Ayat Al-Qur’an .................................................... 33

Gambar 4. 9. Tampilan Terjemahan Dan Tafsir ................................................... 34

Gambar 4. 10. Tampilan Tab Asma’ul Husna ...................................................... 35

Gambar 4. 11. Tampilan Tab Doa Harian ............................................................. 36

Gambar 4. 12. Tampilan Tab About ..................................................................... 37

Page 12: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

xii

DAFTAR TABEL

Tabel 1. 1. Perbandingan Penelitian ........................................................................ 6

Tabel 3. 1. Skenario use-case User ....................................................................... 17

Tabel 4. 1. Tabel pengujian Tab Al-Qur’an .......................................................... 39

Tabel 4. 2. Tabel pengujian Detail Ayat ............................................................... 39

Tabel 4. 3. Tabel pengujian Detail Ayat ............................................................... 40

Tabel 4. 4. Tabel pengujian Tab Doa Harian ........................................................ 40

Tabel 4. 5. Tabel pengujian Tab About................................................................. 41

Page 13: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

1

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Di era Teknologi Android yang semakin hari semakin berkembang dari

tahun ke tahun sangat banyak UMKM maupun Perusahaan besar yang

memanfaatkan teknologi tersebut , baik untuk pemasaran atau sebagai alat untuk

bertransaksi dengan konsumen dari produk yang dihasilkan perusahaan tersebut,

tidak hanya itu , lahirnya teknologi mobile dalam kasus ini Aplikasi Android

menimbulkan dampak positif yang sangat besar , dampak positif nya adalah

pemecahan masalah masalah yang di hadapi manusia di dunia di berbagai bidang

baik dari segi ke-Agama an , Pendidikan dan masih banyak lagi contoh nyata dari

dampak positif teknologi Android di kehidupan .

Kegiatan membaca Al-Qur'an merupakan salah satu bentuk ibadah yang

agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini

dilakukan untuk merancang dan mengimplementasikan Al-Qur’an berbasis aplikasi

Android dengan menggunakan Framework Flutter dengan tujuan agar Al-Qur'an

dapat dibaca dan dipahami dimana saja, sesuai dengan fungsi perangkat berbasis

Android dalam hal ini adalah telepon seluler, Aplikasi ini menyediakan beberapa

fitur yaitu Nama Surah, Keterangan Surah , Ayat, Terjemahan serta Tafsir dari

sumber terpercaya yaitu Kemenag.

Page 14: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

2

1.2. Rumusan Masalah

Berdasarkan latar belakang, maka dapat dirumuskan permasalahan sebagai

berikut:

Bagaimana membuat aplikasi Al-Qur’an berbasis Android dengan

menggunakan Framework Flutter.

1.3. Ruang Lingkup

Adapun ruang lingkup yang menjadi acuan dalam penelitian ini adalah

sebagai berikut:

1. Menggunakan Bahasa Pemrograman Dart.

2. Menggunakan Framework Flutter.

3. Mengunakan beberapa File JSON yang berada di library aplikasi.

4. Sistem aplikasi ini hanya membahas tentang ayat Al-Qur’an dari

Kemenag , aplikasi ini tidak mencakup ruang hadist-hadist ,

maupun asbabul nuzul yang berkaitan.

5. Tidak menggunakan pertukaran data melalui API

6. Aplikasi ini berjalan pada versi android minimal versi kitkat 4.4.2.

Page 15: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

3

1.4. Tujuan Penelitian

Tujuan Penelitian ini adalah menerapkan Framework Flutter sebagai alat

untuk membangun aplikasi Al-Qur’an berbasis Android.

1.5. Manfaat Penelitian

Dengan adanya aplikasi yang di hasilkan dari penelitian ini di harapkan

pengguna mendapatkan kemudahan dalam membaca Al-Qur’an dan Tafsir yang

ada di dalam aplikasi tersebut dimanapun pengguna berada .

1.6. Sistematika Penulisan

Untuk dapat memahami lebih jelas penelitian ini, maka laporan–laporan

yang tertera pada penelitian ini dikelompokkan menjadi beberapa sub bab dengan

sistematika penyampaian sebagai berikut :

BAB I LATAR BELAKANG MASALAH

Berisi tentang latar belakang masalah, rumusan masalah, ruang lingkup,

tujuan penelitian, manfaat penelitian dan sistematika penulisan.

BAB II TINJAUAN PUSTAKA DAN LANDASAN TEORI

Pada bagian ini berisikan teori berupa pengertian dan definisi yang diambil

dari kutipan buku atau dari penelitian serupa yang telah dilakukan sebelumnya

berkaitan dengan penyususan laporan skripsi serta beberapa literatur yang

berhubungan dengan topik penelitian.

Page 16: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

4

BAB III ANALISIS DAN PERANCANGAN SISTEM

Pada bagian ini memuat bahan-bahan dan alat yang digunakan dalam

penelitian, meliputi kebutuhan software dan hardware, prosedur dan teknik

pengumpulan data, analisis dan rancangan system.

BAB IV IMPLEMENTASI DAN PEMBAHASAN

Bagian ini menjelaskan pengujian dengan metode yang telah ditentukan.

Kemudian pembahasan serta analisis hasil pengujian yang telah dilaksanakan.

BAB V PENUTUP

Bagian ini berisi kesimpulan dan saran yang berkaitan dengan analisis dan

penelitian berdasarkan yang telah diuraikan pada bab–bab sebelumnya.

DAFTAR PUSTAKA

Bagian ini berisi mengenai daftar sumber atau rujukan materi yang

digunakan dalam penelitian ini.

LAMPIRAN

Bagian ini berisi lampiran–lampiran yang berguna untuk melengkapi

beberapa hal yang tidak dapat secara lengkap dijelaskan pada bab-bab

sebelumnya.

Page 17: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

5

BAB II

TINJAUAN PUSTAKA DAN DASAR TEORI

2.1 .Tinjauan Pustaka

Dalam penyusunan penelitian ini, penulis mengambil referensi dari

beberapa penelitian sebelumnya untuk menggali informasi tentang teori yang

berkaitan dengan judul yang digunakan sebagai landasan teori. Adapun peneliti-

penelitian sebelumnya yang menjadi tinjauan pustaka dalam penulisan ini adalah

sebagai berikut:

Muludi, dkk. (2015), melakukan penelitian dengan judul Rancang Bangun

Aplikasi Iqro’ Berbasis Android. Penelitian ini membahas mengenai Perancangan

Aplikasi Iqro’ berbasis Android guna mempermudah umat muslim Indonesia

khususnya anak-anak supaya lebih tergerak untuk belajar Iqro dan mempermudah

akses belajar Iqro’ dengan adanya aplikasi tersebut.

Iswanto (2017), melakukan penelitian yang membahas mengenai

perancangan Aplikasi e-commerce yang menggunakan format JSON sebagai

metode Parse data dari web PHP yang di request oleh Android dan di Parse untuk

ditampilkan ke dalam list view di user interface Android.

Rumansara (2018), melakukan penelitian yang membahas mengenai

perancangan Aplikasi Alkitab berbahasa Biak berbasis Android guna

mempertahankan Bahasa Biak melalui pendekatan Agama yaitu melalui Alkitab.

Page 18: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

6

Pratama (2018), melakukan penelitian yang membahas mengenai

Perancangan Aplikasi pemutar lantunan Al-Qur’an menggunakan API dari Google

sebagai sarana untuk menerapkan fitur pencarian melalui suara.

Satria (2018), melakukan penelitian yang membahas mengenai bagaimana

membangun sebuah aplikasi Juz’Amma berbasis android dengan membangun

sebuah web service dan kemudian dapat melakukan pertukaran data dari web

service ke aplikasi client (android) dengan menggunakan javascript object notation

(JSON) sebagai data exchange. Adapun perbandingan penelitian tersebut dapat

dilihat pada Tabel 1.1.

Tabel 2. 1. Perbandingan Penelitian

Nama Peneliti Judul Bahasa -

Pemrograman

Platform

Muludi , dkk.

(2015)

Rancang Bangun Aplikasi

Iqro’ Berbasis Android

Java

Android

Iswanto ,

(2017)

Implementasi Json Sebagai

Metode Parse Pada Aplikasi

Android

Java

Android

Rumansara ,

(2018)

Aplikasi Alkitab Bahasa Biak

Berbasis Android

Java

Android

Pratama ,

(2018)

Rancang Bangun Aplikasi

Pemutar Lantunan Al-Qur’an

Berbasis Android

Menggunakan Google Speech

API

Java

Android

Satria ,

(2018)

Aplikasi Juz’amma

Menggunakan Web Service

Berbasis Android

Java

Android

Juliansyah ,

(Diajukan)

Penggunaan Framework Flutter

Untuk Membangun Aplikasi

Al-Qur’an Berbasis Android

Dart

Android/

iOS

Page 19: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

7

2.2 Dasar Teori

2.2.1 Aplikasi

Aplikasi berasal dari kata application yaitu bentuk benda dari kata kerja to

apply yang dalam Bahasa Indonesia berarti pengolah. Secara istilah, aplikasi

komputer adalah suatu sub kelas perangkat lunak komputer yang menggunakan

komputer langsung untuk melakukan suatu tugas yang diinginkan pemakai.

Menurut Kamus Besar Bahasa Indonesia (http://kbbi.web.id/aplikasi)

Aplikasi adalah penerapan dari rancang sistem untuk mengolah data yang

menggunakan aturan atau ketentuan bahasa pemrograman tertentu. Aplikasi adalah

suatu program komputer yang dibuat untuk mengerjakan dan melaksanakan tugas

khusus dari pengguna. Sementara menurut Hartono (2005) aplikasi adalah

penggunaan dalam suatu komputer, insturksi (instruction) atau pernyataan

(statement) yang disusun sedemikian rupa sehingga komputer dapat memproses

input menjadi output.

Berdasarkan jenisnya aplikasi dapat dibagi menjadi beberapa kategori yaitu,

Enterprise digunakan untuk organisasi yang cukup besar dengan maksud

menghubungkan aliran data kebutuhan informasi antar bagian. Contohnya, IT

Helpdesk, Travel Management, dan lain-lain, Enterprise - Support sebagai aplikasi

pendukung dari enterprise. Contohnya, Database Management, Email Server, dan

Networking Sistem , Individual Worker sebagai aplikasi yang bisa digunakan untuk

mengolah/edit data oleh tiap individu. Contohnya, Microsoft Office, Photoshop,

Acrobat Reader dan lainnya, kemudian Aplikasi Akses Konten adalah aplikasi yang

digunakan oleh individu untuk mengakses konten tanpa kemampuan untuk

Page 20: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

8

mengolah atau mengedit datanya melainkan hanya melakukan kostumisasi terbatas.

Contohnya, Games, Media Player dan Web Browser, Aplikasi Pendidikan biasanya

berbentuk simulasi dan mengandung konten yang spesifik untuk pembelajaran,

Aplikasi Simulasi biasa digunakan untuk melakukan simulasi penelitian,

pengembangan dan lain-lain. Contohnya, Simulasi pengaturan lampu lalu lintas,

Aplikasi Pengembangan Media berfungsi untuk mengolah atau mengembangkan

media biasanya untuk kepentingan komersial, hiburan, dan pendidikan. Contohnya,

Digital Animation Software, Audio Video Converter dan lain-lain.

2.2.2 Aplikasi Mobile

Aplikasi Mobile adalah sebuah aplikasi yang memungkinkan Anda

melakukan mobilitas dengan menggunakan perlengkapan seperti PDA, telepon

seluler atau Handphone. Dengan menggunakan aplikasi mobile, Anda dapat dengan

mudah melakukan berbagai macam aktifitas mulai dari hiburan, berjualan, belajar,

mengerjakan pekerjaan kantor, browsing dan lain sebagainya. Pemanfaatan aplikasi

mobile untuk hiburan paling banyak digemari oleh hampir 70% pengguna telepon

seluler, karena dengan memanfaatkan adanya fitur game, music player, sampai

video player membuat kita menjadi semakin mudah menikmati hiburan kapan saja

dan dimanapun (http://blog.akakom.ac.id/faridayonarisa/2012/09/07/mobile-

apps/).

2.2.3 Flutter

Flutter adalah Mobile App SDK (Software Development Kit) untuk

membuat aplikasi Android dan iOS dari satu codebase dengan performa

tinggi. Tujuannya adalah memungkinkan pengembang untuk menghadirkan

Page 21: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

9

aplikasi berkinerja tinggi yang terasa alami pada platform yang berbeda , Flutter

dibuat menggunakan bahasa C,C++, Skia dan Dart, Flutter terdiri dari dua bagian

penting yaitu SDK (Perangkat Pengembangan Perangkat Lunak): Kumpulan alat

yang akan membantu mengembangkan aplikasi. Ini termasuk alat untuk

mengkompilasi kode ke dalam kode native (kode untuk iOS dan Android) dan

Framework (Perpustakaan antar muka pengguna berdasarkan widget): Kumpulan

elemen antar muka pengguna (tombol, input teks, slider, dan sebagainya) yang

dapat di personalisasi untuk kebutuhan aplikasi.

Widget adalah blok bangunan dasar dari antarmuka pengguna aplikasi

Flutter. Setiap widget adalah deklarasi bagian dari antarmuka pengguna yang tidak

dapat diubah. Tidak seperti kerangka kerja lain yang memisahkan tampilan,

pengontrol tampilan, tata letak, dan properti lainnya, Flutter memiliki model objek

yang konsisten dan terpadu: widget.Widget dapat menentukan beberapa hal

diantaranya elemen struktural (seperti tombol atau menu), elemen gaya (seperti font

atau skema warna), aspek tata letak (seperti bantalan), Widget membentuk hierarki

berdasarkan komposisi. Setiap widget bersarang di dalam, dan mewarisi properti

dari, induknya. Tidak ada objek "aplikasi" yang terpisah sebagai mana dapat dilihat

pada Gambar 2.1 (https://flutter.dev/docs/resources/technical-overview).

Page 22: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

10

Gambar 2. 1. Gambaran Sistem Flutter

2.2.4 Dart

Dart merupakan bahasa pemrograman general-purpose yang dirancang oleh

Lars Bak dan Kasper Lund. Bahasa pemrograman ini dikembangkan sebagai bahasa

pemrograman aplikasi yang dapat dengan mudah untuk dipelajari dan

disebarkan.Bahasa pemrograman besutan Google ini dapat digunakan untuk

mengembangkan berbagai macam platform termasuk di dalamnya adalah web,

aplikasi mobile, server, dan perangkat yang mengusung teknologi Internet of

Things.

Bahasa pemrograman tersebut dapat digunakan untuk mengembangkan

aplikasi untuk dijalankan pada berbagai macam peramban modern. Dart juga dapat

digunakan untuk mengembangkan aplikasi dari codebase tunggal menjadi aplikasi

Android maupun iOS. Dart dapat digunakan secara bebas oleh para developer,

karena bahasa ini dirilis secara open-source oleh Google di bawah lisensi BSD.

Bahasa pemrograman Dart merupakan bahasa pemrograman berbasis class dan

Page 23: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

11

berorientasi terhadap obyek dengan menggunakan sitaks bahasa pemrograman C

(https://teknojurnal.com/kelebihan-bahasa-pemrograman-dart/).

2.2.5 Al-Qur’an

Pengertian Al-Qur’an menurut bahasa adalah bacaan atau sesuatu yang

dibaca secara berulang. Sedangkan menurut terminologi, Al-Qur’an artinya firman

Allah SWT yang diturunkan hanya kepada Nabi Muhammad SAW sebagai sebuah

mukjizat untuk kemudian disampaikan dengan jalan mutawattir dengan perantaraan

malaikat Jibril. Sedangkan menurut syariat Islam, membaca Al-Qur’an dinilai

sebagai salah satu ibadah kepada Allah SWT.

Al-Qur’an menurut seorang ahli bernama Muhammad Ali ash-Shabuni

adalah firman Allah SWT yang tidak ada tandingannya, firman Allah SWT ini

diturunkan kepada Nabi Muhammad yang disampaikan melalui perantara yaitu

malaikat Jibril AS, lalu kemudian ditulis kepada para mushafnya untuk

disampaikan kepada umatnya dengan jalan mutawattir dimana membaca dan

mempelajari isi Al-Qur’an adalah termasuk salah satu ibadah kepada Allah SWT.

Al-Qur’an sendiri diawali dengan bacaan Surah Al-Fatihah dan diakhiri dengan

Surah An-Naas yang termasuk surat makkiyah(https://belajargiat.id/quran/). Dalam

sebuah hadis, Nabi Muhammad SAW berkata, “Bacalah Al-Qur’an karena kelak ia

akan memberikan syafa’at kepada orang yang membacanya,” (HR. Muslim). Ini

adalah satu dari sekian banyak dalil tentang keutamaan membaca Al-Qur’an.

Rasulullah SAW menamsilkan orang Islam yang membaca Al-Qur’an

dengan buah jeruk yang rasanya enak dan harum. Sementara orang Islam yang tidak

Page 24: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

12

membaca Al-Qur’an seperti buah kurma yang rasanya manis tetapi tidak wangi,

(HR. Ibnu Hibban). (https://www.madaninews.id.html).

2.2.6 Android

a. Pengertian Android

Android merupakan sistem operasi berbasis linux yang bersifat terbuka

(open source) dan dirancang untuk perangkat seluler layar sentuh seperti

smartphone dan computer tablet. Android dikembangkan oleh Android, Inc,.

dengan dukungan finansial dari google yang kemudian dibeli pada tahun 2005.

Android dirilis secara resmi pada tahun 2007, bersamaan dengan didirikannya

Open Handset Alliance.

Tampilan android didasarkan pada manipulasi langsung, menggunakan

masukan sentuh yang serupa dengan tindakan di dunia nyata, seperti menggesek,

mengetuk, mencubit dan membalikkan cubitan untuk memanipulasi obyek di

layar. Sifat android yang terbuka telah membuat bermunculannya sejumlah besar

komunitas pengembang aplikasi untuk menggunakan android sebagai dasar

proyek pembuatan aplikasi, dengan menambahkan fitur-fitur baru bagi android

pada perangkat yang secara resmi dirilis dengan menggunakan sistem operasi lain.

(Salbino, 2014).

b. SDK (Software Development Kit)

SDK (Software Development Kit) merupakan sebuah tools yang

diperlukan untuk mengembangkan aplikasi berbasis android menggunakan

bahasa pemrograman java. Pada saat ini SDK telah menjadi alat bantu dan

Aplication Programming Interface (API) untuk mengembangkan aplikasi berbasis

Page 25: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

13

android. SDK dapat diunduh pada situs resminya, yaitu:

http://www.developer.android.com/. SDK bersifat gratis dan bebas di

distribusikan karena android bersifat open

source(https://greenbel.wordpress.com/).

c. AVD (Android Virtual Devices)

Android Virtual Device merupakan emulator yang digunakan untuk

menjalankan program aplikasi Android yang telah dirancang. AVD dapat

dikonfigurasi agar dapat menjalankan berbagai macam versi Android yang telah

diinstal. (Safaat, 2012: 19).

2.2.7 JDK (Java Development Kit)

Java Development Kit (JDK) adalah sebuah produk yang dikembangkan

oleh Oracle yang ditujukan untuk para developer Java. Sejak Java diperkenalkan,

JDK merupakan Java Software Development Kit (SDK) yang paling sering

digunakan. (Wahana Komputer, 2013: 6).

2.2.8 Visual Studio Code (Kode Editor)

Visual Studio Code adalah kode editor yang ringan namun powerful yang

berjalan di desktop dan tersedia untuk Windows, macOS dan Linux. Muncul

dengan dukungan bawaan untuk JavaScript, TypeScript dan Node.js dan memiliki

ekosistem ekstensi yang kaya untuk bahasa lain seperti C ++, C #, Java, Python,

PHP, Go(https://code.visualstudio.com/docs).

2.2.9 JSON (JavaScript Object Notation)

Tentang penggunaan file berformat JSON sebagai metode parse data yang

nantinya di request oleh android dan di parse untuk di tampilkan ke dalam list view

Page 26: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

14

di user interface android. Format pertukaran menggunakan teknologi JSON (Java

Script Obyek Notation) sendiri adalah format pertukaran data yang ringan, mudah

dibaca,mudah di terjemahkan dan di (generate) oleh komputer(Iswanto 2017:6).

2.2.10 Black Box Testing

Black Box Testing atau yang sering dikenal dengan sebutan pengujian

fungsional merupakan metode pengujian Perangkat Lunak yang digunakan untuk

menguji perangkat lunak tanpa mengetahui struktur internal kode atau Program.

Dalam pengujian ini, tester menyadari apa yang harus dilakukan oleh program

tetapi tidak memiliki pengetahuan tentang bagaimana melakukannya.

Page 27: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

15

BAB III

METODE PENELITIAN

3.1. Metode Pengumpulan Bahan/Data

Dalam penelitian ini metode yang digunakan adalah studi kepustakaan, yaitu

mengumpulkan data-data yang mendukung serta mempunyai kaitan dengan

penelitian seperti dari Al-Qur’an, jurnal dan buku-buku atau sumber lainnya.

3.1.1. Kebutuhan Proses

Kebutuhan Proses disini merupakan proses menampilkan data dari file

JSON yang berada di library aplikasi ke layer berdasarkan kebutuhan User yang

nantinya data dari file JSON tersebut diurai berdasarkan nama ayat Al-Qur’an

yang di inginkan dan kemudian di tampilkan ke layar.

3.1.2. Kebutuhan Output

Output yang dihasilkan dari system yaitu tampilan isi dari ayat Al-Qur’an

yang meliputi nama dari ayat , tulisan Arabic dari ayat , nomor ayat , arti dari ayat

, dan yang terakhir tafsir dari ayat tersebut

3.1.3. Kebutuhan Prangkat Lunak

Adapun perangkat lunak yang nantinya akan di gunakan di dalam

penelitian ini adalah sebagai berikut :

a. JDK (Java Development Kit)

b. Android SDK

c. Flutter SDK

d. Dart SDK

e. AVD

Page 28: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

16

f. Visual Studio Code

g. Adobe XD

h. Sistem Operasi Mac Os Catalina

i. Sistem Operasi Android Studio Versi 9 (Pie)

3.1.4. Kebutuhan Perangkat Keras

Adapun perangkat keras yang nantinya akan di gunakan di dalam penelitian

ini adalah sebagai berikut :

a. Laptop dengan spesifikasi sebagai berikut :

a) Prosesor : 1,4 GHz Dual-Core.

b) RAM : 4GB.

c) SSD : 128GB.

b. Smartphone Android dengan spesifikasi sebagai berikut

a) Prosesor : Octa-Core Max 1.80GHz.

b) RAM : 4GB.

c) Storage : 64GB.

3.2.Perancangan Sistem

3.2.1. Usecase Diagram

Adapun Use Case Diagram yang mendeskripsikan sebuah interaksi

antara User dengan System, meliputi alur interaksi dari user saat melihat Tab

Al-Quran , melihat Tab Asma-ul Husna ,melihat Tab Doa Harian dan melihat

Tab Info dari aplikasi dapat dilihat pada gambar 3.1.

Page 29: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

17

Gambar 3. 1. Usecase Diagram

Adapun Skenario use-case dimana User berinteraksi dengan aplikasi dapat

dilihat pada tabel 3.1.

Tabel 3. 1. Skenario use-case User

No Nama Use

Case

Aktor Pre-Kondisi Post-Kondisi Skenario

1 Melihat Tab

Al-Quran

User Belum

Membuka

Aplikasi

Sudah

Membuka Tab

Al-Quran

1. User Membuka Aplikasi

2. User Melihat Tab Al-

Qur’an

2 Memilih

Index Surah

Dan Melihat

Detail Ayat

User Belum

Melihat

Detail Ayat

Sudah Melihat

Detail Ayat

1. User Memilih Tab Al-

Quran

2. User Memilih

Index Surah

3. User Melihat Detail

Ayat

3 Memilih

Dan Melihat

Tab

Asma’ul

Husna

User Belum

Melihat

Detail

Asma’ul

Husna

Sudah Melihat

Detail Asma’ul

Husna

1. User Memilih Tab

Asma’ul Husna

2. User Melihat Daftar

Asma’ul Husna

4 Memilih

Dan Melihat

Daftar Doa

Harian

User Belum

Melihat Doa

Harian

Sudah Melihat

Doa Harian

1. User Memilih Tab Doa

Harian

2. User Melihat Daftar

Doa Harian

5 Melihat Info

Aplikasi

User Belum

Melihat Info

Aplikasi

Sudah Melihat

Info Aplikasi

1. User Memilih Tab

About

2. User Melihat Info

Aplikasi

Page 30: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

18

3.2.2. Squence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan

disekitar sistem berupa message terhadap waktu. Pembuatan sequence diagram

bertujuan agar perancangan aplikasi lebih mudah dan terarah. Interaksi-interaksi

yang terjadi dalam aplikasi sebagaimana terlihat pada Gambar 3.2 dan

seterusnya.

a) Squance Diagram untuk melihat Tab utama

Gambar 3. 2. Squance Diagram Melihat Tab Utama

b) Squance Diagram untuk melihat Tab Al-Qur’an

Page 31: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

19

Gambar 3. 3.Squance Diagram melihat Tab Al-Qur’an

c) Squance Diagram untuk melihat Tab Asma’ul Husna

Gambar 3. 4. Squance Diagram melihat Tab Asma’ul Husna

Page 32: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

20

d) Squance Diagram untuk melihat Tab Doa Harian

Gambar 3. 5. Squance Diagram melihat Tab Doa Harian

e) Squance Diagram untuk melihat Tab About

Gambar 3. 6.Squance Diagram melihat Tab About

Page 33: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

21

3.2.3. Activity Diagram

Activity Diagram adalah representasi grafis dari seluruh tahapan alur kerja

yang mengandung aktivitas, pilihan tindakan, perulangan dan hasil dari aktivitas

tersebut. Diagram ini dapat digunakan untuk menjelaskan proses bisnis dan alur

kerja operasional secara langkah demi langkah dari komponen suatu sistem.

Adapun activity diagram dari sistem ini adalah sebagai mana terlihat pada

Gambae 3.7

Gambar 3. 7. Activity Diagram

Page 34: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

22

3.2.4. Class Diagram

Class Diagram merupakan diagram yang menggambarkan struktur sistem

darisegi pendefinisian kelas-kelas yang dibuat untuk membangun sistem.

Sebagaimana terlihat pada Gambar 3.8.

Gambar 3. 8. Class Diagram

3.2.5. Rancangan Antarmuka Aplikasi

Perancangan antarmuka merupakan aspek penting dalam perancangan

aplikasi, karena berhubungan dengan tampilan dan interaksi yang memudahkan

user dalam menggunakannya. Adapun rancangan antarmuka pada sistem ini

sebagai mana terlihat pada Gambar 3.9 dan seterusnya.

Page 35: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

23

a. Perancangan Antar Muka Tab Al-Qur’an

Gambar 3. 9. Desain Antar Muka Tab Al-Qur’an

Page 36: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

24

b. Perancanngan Antar Muka Tab Asma’ul Husna

Gambar 3. 10. Desain Antar Muka Tab Asma’ul Husna

Page 37: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

25

c. Perancangan Antar Muka Tab Doa Harian

Gambar 3. 11. Desain Antar Muka Tab Doa Harian

Page 38: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

26

d. Perancangan Antar Muka Tab About

Gambar 3. 12. Desain Antar Muka Tab About

Page 39: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

27

BAB IV

IMPLEMENTASI DAN PEMBAHASAN

4.1. Implementasi dan Uji Coba Sistem

Tahap implementasi sistem merupakan proses membangun sistem sesuai

dengan rancangan dan desain sistem yang telah dipersiapkan atau dibuat

sebelumnya. Tahapan ini dapat dibagi menjadi beberapa bagian sesuai dengan

fungsi-fungsi yang dibuat.

4.1.1. Kode Program Untuk Memparse Data dari file JSON

Gambar 4. 1. Kode Program Untuk Memparse Data dari file JSON

Page 40: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

28

Proses parse data dari file JSON merupakan Proses mengurai data di dalam

JSON file dalam penelitian ini adalah Ayat dari Al-Qur’an tersebut , untuk

memparse data dari file JSON ada 3 hal yang harus dilakukan Pertama membuat

class untuk menginisialisasi pengambilan data dari file Json yang dituju, kedua

membuat Konstruktor dari kelas tersebut ,yang mana berguna untuk menerima atau

memasukan value data dari File JSON, dan yang terakhir Class untuk Mengambil

data dari File JSON , di class ini kita ambil struktur data dari File JSON yang

dibutuhkan, sebagai mana terlihat pada Gambar 4.1.

4.1.2. Kode Program Future di Flutter

Gambar 4. 2. Kode Program Future di Flutter

Objek Masa Depan mewakili perhitungan yang nilai kembaliannya

mungkin belum tersedia. Future mengembalikan nilai perhitungan ketika itu selesai

pada suatu waktu di masa depan. Futures sering digunakan untuk perhitungan yang

berpotensi panjang seperti I / O dan interaksi dengan pengguna. . Untuk menangani

masalah ini, Dart menggunakan fungsi Asinkron, sebagai mana terlihat pada

Gambar 4.2.

4.1.3. Kode Program Future Builder dan List View Builder di Flutter

Page 41: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

29

Gambar 4. 3. Kode Program Future Builder dan List View Builder di Flutter

Flutter sangat mendukung pemrogramman asinkron, untuk

memudahkan pengembang dalam menangani proses asinkron ini, maka

pengembang dapat menggunakan FutureBuilder. Dengan menggunakan

FutureBuilder, pengembang bisa dengan mudah mendapatkan status dari

proses yang sedang di jalankan sehingga memudahkan dalam menentukan apa

yang akan ditampilkan ke user saat status tertentu, misalnya seperti

menampilan loading saat memuat data dari server menggunakan API, lalu

menampilkan datanya saat semua sudah siap. Kemudian ListView Builder

Listview Builder digunakan karna dapat menampilkan konten dinamis , yang

artinya pengembang hanya membutuhkan sebuah Widget yang mana isi dari

widget tersebut dapat berubah ubah sesuai permintaan user. sebagai mana

terlihat pada Gambar 4.3.

Page 42: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

30

4.1.4. Kode Program Detail Ayat Al-Qur’an

Gambar 4. 4. Kode Program Detail Ayat Al-Qur’an

Cuplikan kode program diatas adalah cuplikan kode program untuk

menampilkan isi dari Ayat Al-Qur’an yang diminta oleh user .

snapshot.data.text.keys.elementAt(i) adalah baris kode untuk mengambil keys dari

file JSON yang mana angka urut dari Ayat Al-Qur’an , kemudian

snapshot.data.text.values.elementAt(i) adalah baris kode untuk mengambil value

dari file JSON yang mana Isi dari Ayat Al-Qur’an. sebagai mana terlihat pada

Gambar 4.4.

4.1.5. Kode Program Terjemahan dan Tafsir Al-Qur’an

Gambar 4. 5 Kode Program Terjemahan Al-Qur'an

Page 43: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

31

Cuplikan kode program diatas adalah cuplikan kode program untuk

menampilkan Terjemahan Al-Qur’an yang ada di dalam file JSON Kemenag,

snapshot.data.translations.id.text.values.elementAt(i) adalah baris kode untuk

mengambil value translate Al-Qur’an dari file JSON yang mana terjemahan dari

Ayat Al-Qur’an. sebagai mana terlihat pada Gambar 4.5.

Gambar 4. 6. Kode Program Tafsir Al-Qur’an

Cuplikan kode program diatas adalah cuplikan kode program untuk

menampilkan Tafsir Al-Qur’an yang ada di dalam file JSON Kemenag,

snapshot.data.tafsir.id.kemenag.text.values.elementAt(i) adalah baris kode untuk

mengambil value tafsir Al-Qur’an dari file JSON yang mana tafsir dari Ayat Al-

Qur’an. sebagai mana terlihat pada Gambar 4.6.

Page 44: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

32

4.2. Pembahasan

4.2.1. Tampilan Tab Al-Qur’an

Tampilan dari Tab Al-Qur’an sendiri menunjukan list dari ayat Al-Qur’an

berdasarkan nama ayat dan terdapat keterangan dari ayat Al-Qur’an tersebut

sebagai mana terlihat pada Gambar 4.7.

Gambar 4. 7. Tampilan Tab Al-Qur’an

Page 45: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

33

4.2.2. Tampilan Detail Ayat Al-Qur’an

Tampilan dari detail ayat sendiri menunjukan isi dari ayat Al-Qur’an yang

di minta oleh user yang mana menampilkan nama ayat , nomor ayat dan bacaan

ayat sebagai mana terlihat pada Gambar 4.8.

Gambar 4. 8. Tampilan Detail Ayat Al-Qur’an

Page 46: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

34

4.2.3. Tampilan Terjemahan Dan Tafsir

Tampilan dari terjemahan dan tafsir dari ayat sendiri menunjukan

terjemahan Bahasa Indonesia dan tafsir dari ayat Al-Qur’an yang di minta oleh user

, sebagai mana terlihat pada Gambar 4.9.

Gambar 4. 9. Tampilan Terjemahan Dan Tafsir

Page 47: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

35

4.2.4. Tampilan Tab Asma’ul Husna

Tampilan dari Tab Asma’ul Husna sendiri menunjukan list tampilan dari

beberapa Asma’ul Husna termasuk terjemahan nya , sebagai mana terlihat pada

Gambar 4.10.

Gambar 4. 10. Tampilan Tab Asma’ul Husna

Page 48: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

36

4.2.5. Tampilan Tab Doa Harian

Tampilan dari Tab Doa Harian sendiri menunjukan list tampilan dari

beberapa Doa Harian yang sering dibaca, juga terdapat terjemahan dari Doa

tersebut, sebagai mana terlihat pada Gambar 4.11.

Gambar 4. 11. Tampilan Tab Doa Harian

Page 49: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

37

4.2.6. Tampilan Tab About

Tampilan dari Tab About sendiri menunjukan tampilan dari info Aplikasi,

meliputi Framework dan Bahasa pemrograman apa yang digunakan untuk

membangun aplikasi, sebagai mana terlihat pada Gambar 4.12.

Gambar 4. 12. Tampilan Tab About

Page 50: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

38

4.3. Hasil Pengujian

Pengujian system merupakan proses menjalankan aplikasi yang telah dibuat

untuk menentukan apakah aplikasi tersebut cocok dengan spesifikasi aplikasi yang

di rencanakan dan berjalan di lungkungan yang diinginkan. Pengujian aplikasi

sering diasosiasikan dengan pencarian bug, ketidak sempurnaan aplikasi, kesalahan

pada aplikasi yang menyebabkan kegagalan pada eksekusi system perangkat lunak.

Pengujian dilakukan dengan cara menguji setiap proses yang ada di dalam

aplikasi . Adapun pengujian aplikasi yang digunakan adalah Black box. Pengujian

Black box yaitu menguji aplikasi dari segi spesifikasi fungsional tanpa menguji

desain dan kode program. Pengujian dimaksudkan untuk mengetahui apakah fungsi

- fungsi, masukan dan keluaran dari aplikasi sesuai dengan spesifikasi yang

dibutuhkan. Persiapan yang dibutuhkan dalam melakukan pengujian sebagai

berikut:

1. Menyiapkan Sebuah smartphone dengan system operasi Android.

2. Menginstall aplikasi Al-Qur’an pada smartphone tersebut.

3. Melakukan proses pengujian.

4. Mencatat hasil pengujian.

Page 51: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

39

4.3.1 Hasil Pengujian Aplikasi

Pengujian Tab Al-Qur’an , Tabel pengujian Tab Al-Qur’an digunakan

untuk mengetahui apakan user dapat memilih Tab yang di pilih sebagai mana dapat

dilihat pada Tabel 4.1.

Tabel 4. 1. Tabel pengujian Tab Al-Qur’an

Kasus Dan Hasil Uji (Data Benar)

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Memilih Tab

Al-Qur’an

Tampilan List Ayat

Al-Qur’an

List Ayat Al-

Qur’an Berhasil

Di Tampilkan

[ √ ] Diterima

[ ] Ditolak

Pengujian Detail Ayat , Tabel pengujian Detail Ayat digunakan untuk

mengetahui apakan user dapat memilih menu yang di pilih sebagai mana dapat

dilihat pada Tabel 4.2.

Tabel 4. 2. Tabel pengujian Detail Ayat

Kasus Dan Hasil Uji (Data Benar)

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Melihat Detail

Ayat

Tampilan Detail

Dari Ayat

Al-Qur’an

Ayat Al-Qur’an

Berhasil Di

Tampilkan

[ √ ] Diterima

[ ] Ditolak

Page 52: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

40

Pengujian Detail Ayat , Tabel pengujian Detail Ayat digunakan untuk

mengetahui apakan user dapat memilih menu yang di pilih sebagai mana dapat

dilihat pada Tabel 4.3.

Tabel 4. 3. Tabel pengujian Detail Ayat

Kasus Dan Hasil Uji (Data Benar)

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Melihat Tab

Asma’ul Husna

Tampilan List

Asma’ul Husna

List Asma’ul

Husna Berhasil

Di Tampilkan

[ √ ] Diterima

[ ] Ditolak

Pengujian Tab Doa Harian , Tabel pengujian Tab Doa Harian digunakan

untuk mengetahui apakan user dapat memilih Tab yang di pilih sebagai mana dapat

dilihat pada Tabel 4.4

Tabel 4. 4. Tabel pengujian Tab Doa Harian

Kasus Dan Hasil Uji (Data Benar)

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Memilih Tab

Doa Harian

Tampilan List Doa

Harian

List Doa Harian

Berhasil Di

Tampilkan

[ √ ] Diterima

[ ] Ditolak

Page 53: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

41

Pengujian Tab About , Tabel pengujian Tab About digunakan untuk

mengetahui apakan user dapat memilih Tab yang di pilih sebagai mana dapat dilihat

pada Tabel 4.5.

Tabel 4. 5. Tabel pengujian Tab About

Kasus Dan Hasil Uji (Data Benar)

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Memilih Tab

About

Tampilan Info

Aplikasi

Info Aplikasi

Berhasil Di

Tampilkan

[ √ ] Diterima

[ ] Ditolak

Page 54: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

42

BAB V

PENUTUP

5.1. Kesimpulan

Dari hasil penelitian yang telah dilakukan dapat disimpulkan bahwa

Framework Flutter dapat menjadi pilihan untuk membangun aplikasi Android

dengan satu code base atau code base tunggal .

Dengan dibangun nya aplikasi Al-Qur’an berbasis Android ini diharapkan

dapat membantu pengguna dalam memperoleh informasi tentang penjelasan isi dari

kandungan ayat dari sumber Tafsir yang terpercaya di Indonesia, sehingga

pengguna dapat memahami isi dan makna dari ayat Al-Qur’an tanpa salah Tafsir.

Hal ini dibuktikan berdasarkan pengujian Black-box, aplikasi ini dapat

menjalankan fungsinya dengan baik dan efisien.

5.2. Saran

Aplikasi Al-Qur’an yang dibangun dalam penelitian ini berbasis Android,

Flutter adalah Framwork Mobile Apps yang mana hasil code base tunggal tersebut

dapat berupa aplikasi Android atau pun iOS, dengan demikian saran dari penulis

adalah sebagai berikut :

Page 55: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

43

1. Penulis berharap di penelitian selanjutnya dapat dihasilkan Aplikasi dari

system operasi iOS dengan menggunakan Framework Flutter.

2. Aplikasi ini belum memiliki ayat Latin Indonesia yang mana artinya

pengguna yang tidak bisa membaca huruf arab cukup kesulitan untuk

menggunakan Al-Qur’an tersebut.

Demikian saran yang dapat penulis berikan, semoga saran tersebut dapat dijadikan

sebagai bahan masukan yang bermanfaat bagi penelitian selanjutnya.

Page 56: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

44

DAFTAR PUSTAKA

KBBI, 2012. Pengertian Aplikasi. http://kbbi.web.id/aplikasi. Tanggal Akses 16

Maret 2020, Pukul 08:00 WIB.

Farida, 2012. Pengertian Mobile Apps.

http://blog.akakom.ac.id/faridayonarisa/2012/09/07/mobile-apps/

. Tanggal Akses 16 Maret 2020, Pukul 09:20 WIB.

Flutter Dev, 2019. Technical overview. https://flutter.dev/docs/resources/technical-

overview. Tanggal Akses 16 Maret 2020, Pukul 11:20 WIB.

Tekno Jurnal, 2016. Kelebihan Bahasa Pemrograman Dart.

https://teknojurnal.com/kelebihan-bahasa-pemrograman-dart/. Tanggal

Akses 18 Maret 2020, Pukul 09:20 WIB.

Belajar Giat, 2019. Pengertian Al-Qur’an . https://belajargiat.id/quran/. Tanggal

Akses 18 Maret 2020, Pukul 09:20 WIB.

Pratama Widianto, 2011. Turorial Android Programming Part 1: Pengenalan .

https://greenbel.wordpress.com/. Tanggal Akses 19 Maret 2020, Pukul 08:10

WIB.

VisualStudioCode.com, 2020. Getting Started. https://code.visualstudio.com/docs.

Tanggal Akses 19 Maret 2020, Pukul 09:10 WIB.

Hartono J. (2005). Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur

Teori dan Praktek Aplikasi Bisnis. Yogyakarta: Andi.

Salbino S. (2014). Buku Pintar Gadget Android Untuk Pemula. Jakarta : Kunci

Komunikasi.

Safaat N. (2012). Pemrograman Aplikasi Mobile Smartphone dan Tablet Pc

Berbasis Android. Bandung : Informatika,

Wahana Komputer, (2013). Android Programming With Eclipse. Yogyakarta :

Andi.

Iswanto H. (2017). Implementasi Json Sebagai Metode Parse Pada Aplikasi

Android (Studi Kasus : Toko Retrofit). STMIK AKAKOM, Yogyakarta.

Muludi, K., Kurniawan, D. dan Habibullaah, A. (2015). Rancang Bangun Aplikasi

Iqro’ Berbasis Android . Universitas Lampung, Lampung.

Page 57: SKRIPSI PENGGUNAAN FRAMEWORK FLUTTER UNTUK ...agung bagi umat Muslim di seluruh dunia, dengan demikian Penelitian ini dilakukan untuk merancang dan mengimplementasikan Al-Qur’an

Rumansara A.S. (2018). Aplikasi Alkitab Bahasa Biak Berbasis Android. STMIK

AKAKOM, Yogyakarta.

Pratama R. (2018). Rancang Bangun Aplikasi Pemutar Lantunan Al-Qur’an

Berbasis Android Menggunakan Google Speech API. Universitas Islam

Negeri Sumatera Utara, Medan.

Satria S. (2018). Aplikasi Juz’amma Menggunakan Web Service Berbasis Android.

STMIK AKAKOM, Yogyakarta.

Madani News.(2019). Keistimewaan Membaca Al-Qur’an Secara Rutin.

https://www.madaninews.id.html. Tanggal Akses 16 September 2020, Pukul

09:10 WIB.