SKRIPSI PROGRESSIVE WEB APPS PADA E-LEARNING (STUDI KASUS : UGM) RISKA AMALIA WIBAWATI Nomor Mahasiswa : 155410074 PROGAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM YOGYAKARTA 2019
SKRIPSI
PROGRESSIVE WEB APPS PADA E-LEARNING
(STUDI KASUS : UGM)
RISKA AMALIA WIBAWATI
Nomor Mahasiswa : 155410074
PROGAM STUDI TEKNIK INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM
YOGYAKARTA
2019
SKRIPSI
PROGRESSIVE WEB APPS PADA E-LEARNING
(STUDI KASUS : UGM)
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
RISKA AMALIA WIBAWATI
Nomor Mahasiswa : 155410074
PROGRAM STUDI TEKNIK INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM
YOGYAKARTA
2019
ii
HALAMAN PERSETUJUAN
Judul : Progressive Web Apps pada E-Learning
(Studi Kasus : UGM)
Nama : Riska Amalia Wibawati
Nomor Mhs : 155410074
Program Studi : Teknik Informatika
Jenjang : Strata Satu (S1)
Tahun : 2019
Telah diperiksa dan disetujui
Yogyakarta, ……Juli 2019
Mengetahui
Dosen Pembimbing
Dison Librado, S.E., M.Kom.
iii
HALAMAN PENGESAHAN
SKRIPSI
PROGRESSIVE WEB APPS PADA E-LEARNING (STUDI KASUS : UGM)
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, Juli 2019
Mengesahkan
Dewan Penguji Tanda Tangan
1. Dison Librado, S.E., M.Kom. ………………….
2. Indra Yatini S.Kom., M.Kom. ………………….
3. Dra. Syamsu Windarti, M.T.Apt. ………………….
Mengetahui
Ketua Program Studi Teknik Informatika
Dini Fakta Sari, S.T., M.T.
iv
INTISARI
eLisa adalah learning management system berbasis aplikasi web yang
dikembangkan UGM untuk memperkaya pembelajaran antara dosen dan
mahasiswa. Laman eLisa akan berjalan lancar dan tanpa masalah bila diakses
melalui desktop. Namun masalah sering terjadi ketika laman tersebut diakses
menggunakan aplikasi web dari mobile device. Progressive Web Apps adalah
teknologi untuk pengalaman membuka website seperti native apps.
Penelitian ini menggunakan konsep Progressive Web Apps yang didukung
dengan service worker dan indexeddb sebagai fungsi utama agara laman dapat
diakses dalam kondisi internet tidak stabil atau offline. Aplikasi ini dibangun
dengan framework Vue.js dan memanfaatkan firebase untuk database,
autentifikasi, penyimpanan dan hosting laman.
Hasil dari penelitian ini adalah aplikasi e-Learning dengan konsep
Progressive Web Apps yang dapat diakses seperti native apps pada mobile device
dan tetap berjalan meskipun dalam kondisi internet tidak stabil atau offline. Dari
pengujian yang telah dilakukan didapatkan hasil bahwa aplikasi dapat berfungsi
sesuai dengan rancangan. Aplikasi ini menampilkan informasi mata kuliah, bahan
ajar, tugas dan anggota mata kuliah.
Kata kunci: e-learning, firebase, indexeddb, pwa, service worker
v
KATA PENGANTAR
Puji syukur kehadirat Allah SWT atas rahmat dan hidayah-Nya, sehingga
penulis dapat menyelesaikan skripsi dengan judul Progressive Web Apps pada
E-Learning (Studi Kasus : UGM) yang digunakan untuk memenuhi salah satu
persyaratan untuk memperoleh gelar sarjana komputer.
Dalam penyusunan skripsi ini penulis telah banyak mendapatkan arahan,
bantuan, serta dukungan dari berbagai pihak, baik secara langsung maupun tidak
langsung. Oleh karena itu pada kesempatan ini penulis ingin mengucapkan terima
kasih kepada:
1. Allah SWT atas pemberian kesehatan, kelancaran dan kenikmatan-kenikmatan
lain yang sangat bermanfaat dalam pengerjaan skripsi ini.
2. Kedua orang tua, kakak dan adik beserta keluarga yang senantiasa memberikan
dukungan dan doa sehingga skripsi ini dapat diselesaikan.
3. Bapak Ir. Totok Suprawoto. M.M., M.T. selaku Ketua Sekolah Tinggi
Manajemen Informatika dan Komputer AKAKOM Yogyakarta.
4. Ibu Dini Fakta Sari, S.T., M.T., selaku Ketua Jurusan Teknik Informatika
Sekolah Tinggi Manajemen Informatika dan Komputer AKAKOM Yogyakarta.
5. Bapak Dison Librado, S.E., M.Kom. selaku dosen pembimbing yang telah
memberikan bimbingan serta pengarahan yang baik dalam penulisan skripsi ini.
6. Ibu Indra Yatini S.Kom., M.Kom. dan Ibu Dra. Syamsu Windarti, M.T.Apt.
selaku narasumber pada skripsi ini.
7. Semua dosen jurusan Teknik Informatika Sekolah Tinggi Manajemen
Informatika dan Kompuer AKAKOM Yogyakarta yang telah membina dan
mengajar dengan dedikasi tinggi dan penuh semangat.
8. Reni Kumalawati dan Irwan Setiawan yang telah membantu kelancaran
pembuatan skripsi.
9. Teman-teman TI9, dan rekan-rekan di UGM yang selalu memberikan motivasi
serta dukungan.
10. Pihak-pihak yang lain yang tidak dapat disebutkan satu persatu.
Akhir kata penulis berharap semoga skripsi ini dapat memberikan manfaat bagi kita.
Yogyakarta, Juli 2019
Penulis
vi
DAFTAR ISI
HALAMAN JUDUL ................................................................................................ i
HALAMAN PERSETUJUAN ................................................................................ ii
HALAMAN PENGESAHAN ................................................................................ iii
INTISARI ............................................................................................................... iv
KATA PENGANTAR .............................................................................................v
DAFTAR ISI .......................................................................................................... vi
DAFTAR GAMBAR ........................................................................................... viii
DAFTAR TABEL .................................................................................................. xi
BAB I PENDAHULUAN ........................................................................................1
1.1 Latar Belakang Masalah .................................................................. 1
1.2 Rumusan Masalah ........................................................................... 3
1.3 Ruang Lingkup ................................................................................ 3
1.4 Tujuan Penelitan .............................................................................. 4
1.5 Manfaat Penelitian ........................................................................... 4
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI .........................................5
2.1 Tinjauan Pustaka ............................................................................. 5
2.2 Dasar Teori ...................................................................................... 6
2.2.1 Progressive Web Apps ......................................................... 6
2.2.2 Firebase ................................................................................ 8
2.2.3 Java ...................................................................................... 9
2.2.4 Vue.js ................................................................................. 10
2.2.5 eLisa ................................................................................... 10
2.2.6 Lighthouse.......................................................................... 11
BAB III METODE PENELITIAN .........................................................................12
3.1 Data ................................................................................................ 12
3.2 Peralatan ........................................................................................ 12
3.3 Perangkat Keras ............................................................................. 12
vii
3.4 Perangkat Lunak ............................................................................ 12
3.5 Prosedur dan Pengumpulan Data ................................................... 13
3.6 Analisis Kebutuhan Sistem ............................................................ 13
3.7 Kebutuhan Fungsional Sistem ....................................................... 13
3.8 Perancangan Sistem ....................................................................... 14
3.8.1 Use Case Diagram.............................................................. 15
3.8.2 Class Diagram .................................................................... 16
3.8.3 Perancangan Database ....................................................... 17
3.8.4 Rancangan Antarmuka ....................................................... 21
BAB IV IMPLEMENTASI DAN PEMBAHASAN .............................................30
4.1 Implementasi dan Uji Coba Sistem ............................................... 30
4.1.1 Implementasi Service Worker............................................ 30
4.1.2 Implementasi IndexedDB Mata Kuliah ............................. 33
4.1.3 Implementasi Tampil Diskusi ............................................ 34
4.1.4 Implementasi Mengirim Tanggapan .................................. 35
4.1.5 Implementasi Mengedit Modul .......................................... 37
4.1.6 Implementasi Hapus dan Unggah Tugas ........................... 38
4.1.7 Implementasi Gabung dan Pengesahan Anggota ............... 41
4.1.8 Implementasi Firebase ....................................................... 43
4.1.9 Uji Coba Sistem ................................................................. 46
4.2 Pembahasan ................................................................................... 49
BAB V PENUTUP .................................................................................................52
5.1 Kesimpulan .................................................................................... 52
5.2 Saran .............................................................................................. 53
DAFTAR PUSTAKA ............................................................................................55
LAMPIRAN
viii
DAFTAR GAMBAR
Gambar 2. 1 Lifecycle Service Worker .................................................................. 7
Gambar 2. 2 Struktur Data pada Firestore ............................................................. 8
Gambar 3. 1 Use Case Diagram Aplikasi ............................................................ 14
Gambar 3. 2 Class Diagram Aplikasi .................................................................. 15
Gambar 3. 3 Contoh Basis Data pada Firestore ................................................... 16
Gambar 3. 4 Rancangan Antarmuka Halaman Dashboard ................................. 20
Gambar 3. 5 Rancangan Antarmuka Daftar Mata Kuliah ................................... 20
Gambar 3. 6 Rancangan Antarmuka Halaman Mata Kuliah ............................... 21
Gambar 3. 7 Rancangan Antarmuka Daftar Materi ............................................. 21
Gambar 3. 8 Rancangan Antarmuka Daftar Tugas .............................................. 22
Gambar 3. 9 Rancangan Antarmuka Unggah Tugas ........................................... 22
Gambar 3. 10 Rancangan Antarmuka Daftar Anggota ........................................ 23
Gambar 3. 11 Rancangan Antarmuka Halaman Profil ........................................ 23
Gambar 3. 12 Rancangan Antarmuka Ubah Profil .............................................. 24
Gambar 3. 13 Rancangan Antarmuka Halaman Profil ........................................ 25
Gambar 3. 14 Rancangan Antarmuka Halaman Membuat Mata Kuliah Baru .... 25
Gambar 3. 15 Rancangan Antarmuka Dashboard Mata Kuliah ......................... 26
Gambar 3. 16 Rancangan Antarmuka Anggota Mata Kuliah .............................. 26
Gambar 3. 17 Rancangan Antarmuka Halaman Materi ...................................... 27
Gambar 3. 18 Rancangan Antarmuka Halaman Detail Tugas ............................. 27
Gambar 4. 1 Kode Program Fungsi Registrasi Service Worker .......................... 30
Gambar 4. 2 Kode Program Fungsi Installasi Service Worker ............................ 31
Gambar 4. 3 Kode Program Fungsi Pengecekan Service Worker ....................... 32
Gambar 4. 4 Penyimpanan Cache Browser ......................................................... 32
ix
Gambar 4. 5 Kode Program Fungsi IndexedDB Koleksi Mata Kuliah ............... 33
Gambar 4. 6 IndexdDb Mata Kuliah pada Chrome DevTools ............................ 34
Gambar 4. 7 Tampilan Dashboard Mata Kuliah .................................................. 34
Gambar 4. 8 Kode Program Manampilkan Daftar Diskusi ................................. 35
Gambar 4. 9 Tampilan Halaman Tanggapan ....................................................... 36
Gambar 4. 10 Kode Program Simpan Tanggapan ............................................... 36
Gambar 4. 11 Tampilan Halaman Modul Ajar .................................................... 37
Gambar 4. 12 Kode Program Mengedit Modul ................................................... 38
Gambar 4. 13 Tampilan Halaman Tugas ............................................................. 39
Gambar 4. 14 Kode Program Hapus Tugas ......................................................... 39
Gambar 4. 15 Tampilan Unggah Tugas untuk Mahasiswa ................................. 40
Gambar 4. 16 Kode Program Unggah Tugas ...................................................... 40
Gambar 4. 17 Tampilan Gabung Mata Kuliah .................................................... 41
Gambar 4. 18 Kode Program Gabung Mata Kuliah ............................................ 41
Gambar 4. 19 Tampilan Halaman Anggota ......................................................... 42
Gambar 4. 20 Kode Program Pengesahan Anggota ............................................ 42
Gambar 4. 21 Firebase Authentication ................................................................ 43
Gambar 4. 22 Kode Program Penggunaan Firebase Authentication ................... 43
Gambar 4. 23 Firebase Firestore .......................................................................... 44
Gambar 4. 24 Kode Program Konfigurasi Firebase Firestore ............................. 44
Gambar 4. 25 Firebase Storage ............................................................................ 44
Gambar 4. 26 Kode Program Konfigurasi Firebase Storage ............................... 45
Gambar 4. 27 Firebase Hosting ........................................................................... 45
Gambar 4. 28 Kode Program Konfigurasi Firebase Hosting ............................... 45
Gambar 4. 29 Hasil Nilai Audit Lighthouse ........................................................ 47
x
Gambar 4. 30 Hasil Audit Performance .............................................................. 47
Gambar 4. 31 Opportunities dan Diagnostics Performance ............................... 48
Gambar 4. 32 Hasil Audit Best Practice ............................................................. 48
Gambar 4. 33 Hasil Audit Progressive Web Apps ............................................... 49
xi
DAFTAR TABEL
Tabel 2. 1 Tabel Perbandingan Penelitian .............................................................. 4
Tabel 2. 2 Tabel Perbandingan eLisa dengan eLisa PWA ..................................... 5
Tabel 3. 1 Struktur Koleksi User .......................................................................... 17
Tabel 3. 2 Struktur Koleksi Mata kuliah .............................................................. 17
Tabel 3. 3 Struktur Koleksi Fakultas .................................................................... 18
Tabel 3. 4 Struktur Koleksi Diskusi ..................................................................... 18
Tabel 3. 5 Struktur Koleksi Modul ....................................................................... 18
Tabel 3. 6 Struktur Koleksi Tugas ........................................................................ 19
Tabel 3. 7 Struktur Koleksi Tanggapan ................................................................ 19
Tabel 4. 1 Hasil Audit pada Beberapa Device ...................................................... 46