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