Implementasi Teknologi Progressif Web Application (Pwa) Menggunakan Framework Angular Pada Sistem Monitoring Energi Listrik Berbasis Web

IMPLEMENTASI TEKNOLOGI PROGRESSIF WEB APPLICATION
(PWA) MENGGUNAKAN FRAMEWORK ANGULAR PADA SISTEM

MONITORING ENERGI LISTRIK BERBASIS WEB
TUGAS AKHIR
Disusun dalam rangka memenuhi salah satu persyaratan
Untuk menyelesaikan program Strata-1 Departemen Teknik Informatika
Fakultas Teknik Universitas Hasanuddin
Makassar
Disusun Oleh :
ABDILLAH SATARI RAHIM

D42114516
DEPARTEMEN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS HASANUDDIN
MAKASSAR
2019
ii
ABSTRAK
Penggunaan energi listrik pada gedung Center Of Technology (COT)

Fakultas Teknik Universitas Hasanuddin menjadi salah satu permasalahan yang
perlu diantisipasi oleh civitas akademik Universitas Hasanuddin. Untuk itu perlu
dilakukan pemantauan serta pengontrolan terhadap penggunaan energi listrik yang
tidak sesuai pada gedung COT Fakultas Teknik Universitas Hasanuddin. Dalam
pelaksanaannya pemantauan serta pengontrolan tersebut dilakukan dengan
menggunakan alat ukur sederhana dan pencatatan yang masih manual sehingga data
yang didapat tidak bisa diperoleh setiap saat dan hasilnya terlalu lama untuk
didapatkan. Dengan demikian diperlukan kesadaran serta usaha untuk melakukan
upaya penghematan energi listrik. Pada penelitian ini dirancang suatu sistem yang
dapat mengontrol dan memonitoring pemakaian energi listrik pada gedung COT
Fakultas Teknik Universitas Hasanuddin. Dengan menggunakan framework
Angular dan teknologi service worker guna membangun sistem yang berbasis
Progresssive Web App. Service worker digunakan untuk mengatasi masalah
koneksi jaringan yang lemah sehingga mampu meningkatkan performa sistem
mengingat banyaknya data yang perlu diproses oleh sistem. Dengan memadukan
framework Angular sebagai pembuatan tampilan, dan teknologi service worker,
sebuah sistem dapat dibuat dengan lebih mudah dan menghasilkan website yang
berjalan pada koneksi yang tidak stabil sekalipun. Proses analisis dilakuakan
dengan membandingkan sistem website yang terintegrasi service worker dan sistem
website yang tidak terintegrasi service worker. Analisis yang dilakukan
menggunakan indikator waktu rata – rata akses (respon time), serta throughput yang
dihasilkan serta pengujian fungsional sistem yang dibuat. Hasil penelitian
menunjukkan bahwa sistem website yang terintegrasi service worker memberikan
nilai waktu respon time yang lebih cepat dibandingkan dengan sistem website yang
tidak terintegrasi service worker. Untuk hasil pengujian throughput sistem website
dengan service worker memberikan nilai hasil yang lebih besar dibandingkan
dengan sistem web tanpa service worker. Adapun hasil kuisioner menunjukkan
86,7% Setuju bahwa sistem website yang dibuat dapat diakses dengan mudah dan
cepat serta 93,3% Setuju bahwa sistem website yang dibuat memberikan efisiensi
dalam melakukan monitoring dan kontroling penggunaan energi listrik pada
gedung COT Fakultas Teknik Universitas Hasanuddin.
Kata Kunci: Energy management system, website, Angular, service worker,
jaringan, performansi;
iii
KATA PENGANTAR
Assalamu’alaikum Warahmatullahi Wabarakatuh.
Segala puji dan syukur kami panjatkan ke hadirat Allah S.W.T Tuhan Yang Maha
Esa yang dengan limpahan rahmat dan hidayah-Nya sehingga tugas akhir dengan
judul “Implementasi Teknologi Progressif Web Application (Pwa) Dalam
Membangun Sistem Menejemen Energi Listrik Menggunakan Framework
Angular” ini dapat diselesaikan sebagai salah satu syarat dalam menyelesaikan
jenjang Strata-1 pada Departemen Teknik Informatika Fakultas Teknik Universitas
Hasanuddin.
Dalam penyusunan penelitian ini disajikan hasil penelitian terkait judul
yang telah diangkat dan telah melalui proses pencarian dari berbagai sumber baik
jurnal penelitian, prosiding pada seminar-seminar nasional/internasional, buku
maupun dari situs-situs di internet.
Penulis menyadari bahwa tanpa bantuan dan bimbingan dari berbagai pihak,
mulai dari masa perkuliahan sampai dengan masa penyusunan tugas akhir,
sangatlah sulit untuk menyelesaikan tugas akhir ini. Oleh karena itu, pada
kesempatan ini penulis menyampaikan ucapan terima kasih sedalam-dalamnya
kepada:
1) Tuhan Yang Maha Esa atas semua berkat, karunia serta pertolongan-Nya yang
tiada batas, yang telah diberikan kepada penulis disetiap langkah dalam
pembuatan program hingga penulisan laporan skripsi ini.
iv
2) Kedua orang tua penulis serta saudara-saudara penulis, serta keluarga yang
senantiasa memberikan kekuatan, motivasi, bimbingan moral, materi,
kepercayaan dan kasih sayang yang tidak terbatas kepada penulis.
3) Bapak Dr. Amil Ahmad Ilham, S.T., M.IT., selaku pembimbing I yang telah
banyak memberikan bimbingan, motivasi dan masukan yang bermanfaat
kepada penulis.
4) Bapak Dr. Eng. Zulkifli Tahir, S.T., M.Sc., selaku pembimbing II yang telah
banyak memberikan bimbingan, motivasi dan masukan yang bermanfaat
kepada penulis.
5) Bapak Prof. Dr. Ir. H. Andani Achmad, M.T., Bapak Adnan, S.T., M.T.,
Ph.D., dan Bapak Dr.Eng. Wardi, S.T., M.Eng., selaku dosen penguji yang
telah memberikan saran sehingga laporan skripsi ini menjadi lebih baik
6) Bapak Dr. Amil Ahmad Ilham, S.T., M.IT., selaku Ketua Departemen Teknik
Informatika Fakultas Teknik Universitas Hasanuddin atas bantuan dan
bimbingannya selama masa perkuliahan penulis.
7) Bapak A. Ais Prayogi Alimuddin, S.T., M.Eng., selaku dosen pembimbing
akademik yang telah memberikan bimbingan selama masa perkuliahan
penulis.
8) Bapak Robert, Bapak Zainuddin dan Ibu Santi serta segenap staf Departemen
Teknik Informatika Fakultas Teknik Universitas Hasanuddin yang telah
membantu kelancaran penyelesaian tugas akhir penulis.
9) Para sahabat dekat penulis terutama Andi Muhammad Dayri Satriawan dan
Rahmat Firman, Zulfadli A.S, Alamsyah Ibrahim, dan Muhammad Fajri Kahfi
v
Kuddus yang telah memberikan doa, bantuan dan dukungan serta bimbingan
sejak masa perkuliahan sampai dengan penyelesaian tugas akhir ini.
10) Para sahabat penulis terutama Al Riefqy Dasmito, Gian Aron Angelo R., Andi
Muhammad Fauzy, Muh. Aryandi, Muh. Rizky Eka Arlin, Muh. Arkan
Musyabbir, Tiwi Nur Safitri, Muh. Fachrial Yuni Yunizar, Alwi, Fitriani Idrus,
Winda Astiyanti A, Aura Evadne K, Syahdan Edy Murad, Muh. Rahmatullah,
yang telah memberikan doa, nasihat, bantuan dan semangat selama proses
penyelesaian tugas akhir ini.
11) Para responden yang bersedia meluangkan waktunya untuk berpartisipasi
sebagai bagian penting dalam kesuksesan penelitian ini.
12) Serta seluruh pihak yang tidak sempat disebutkan satu persatu yang telah
banyak meluangkan tenaga, waktu dan pikiran selama penyusunan laporan
tugas akhir ini.
Akhir kata, penulis berharap semoga Tuhan Yang Maha Esa berkenan
membalas segala kebaikan dari semua pihak yang telah banyak membantu. Semoga
tugas akhir ini dapat memberikan manfaat bagi pengembangan ilmu selanjutnya.
Amin.
Wassalamualaikum
Gowa, 6 Agustus 2019
Penulis
vi
DAFTAR ISI
HALAMAN JUDUL ................................................................................................i
LEMBAR PENGESAHAN SKRIPSI ................... Error! Bookmark not defined.
ABSTRAK ............................................................................................................. iii
KATA PENGANTAR ............................................................................................iv
DAFTAR ISI ......................................................................................................... vii
DAFTAR GAMBAR .............................................................................................. x
DAFTAR TABEL ...................................................................................................xi
BAB I ....................................................................................................................... 1
PENDAHULUAN ................................................................................................... 1
1.1 Latar Belakang ................................................................................................. 1
1.2 Rumusan Masalah ............................................................................................ 4
1.3 Tujuan Penelitian ............................................................................................. 4
1.4 Manfaat Penelitian ........................................................................................... 5
1.5 Batasan Masalah Penelitian .............................................................................. 5
1.6 Sistematika Penulisan....................................................................................... 6
BAB II ...................................................................................................................... 8
TINJAUAN PUSTAKA .......................................................................................... 8
2.1 Progressive Web Apps (PWA) ......................................................................... 8
2.1.1 Service Worker API ............................................................................................. 9
vii
2.1.2 Web App Manifest ............................................................................................. 10
2.2 MEAN Stack Aplication ................................................................................ 11
2.2.1 MongoDb........................................................................................................... 12
2.2.2 Express .............................................................................................................. 13
2.4.3 Angular .............................................................................................................. 13
2.2.4 Node JS ............................................................................................................. 15
2.3 JSON .............................................................................................................. 16
2.4 Aplikasi Web Offline ..................................................................................... 16
2.4.1 Teknologi Aplikasi Web Offline ........................................................................ 16

2.5 Apache Jmeter ................................................................................................ 18
BAB III .................................................................................................................. 19
METODOLOGI PENELITIAN ............................................................................. 19
3.1 Lokasi Dan Waktu Penelitian ......................................................................... 19
3.2 Instrumen Penelitian....................................................................................... 19
3.3 Prosedur Penelitian......................................................................................... 20
3.4 Framework Dan Gambaran Umum Sistem ..................................................... 22
3.4.1 Use Case Diagram.............................................................................................. 25

3.4.2 Database Diagram Sistem .................................................................................. 27
3.5 Hasil Pembuatan Sistem ................................................................................. 28
3.6 Activity Diagram ............................................................................................ 30
3.7 Skenario Pengujian......................................................................................... 38
3.7.1 Pengujian Respon Time ..................................................................................... 39

3.7.2 Pengujian Trhroughput ...................................................................................... 39
3.7.2 Pengujian Black-Box .......................................................................................... 40
3.7.3 Pengujian Beta ................................................................................................... 41
BAB IV .................................................................................................................. 43
HASIL DAN PEMBAHASAN .............................................................................. 43
viii
4.1 Pengujian Respon Time .................................................................................. 43
4.1.1 Pada Akses Url/Index Website ........................................................................... 43

4.1.2 Pada Akses Halaman Create User ...................................................................... 45
4.2 Pengujian Trhoughput .................................................................................... 48
4.2.1 Pada Akses Url/Index Website ........................................................................... 48

4.2.2 Pada Akses Halaman Config (create user) ......................................................... 50
4.3 Pengujian Load Time Pada Web Browser ....................................................... 53
4.4 Pengujian Black-Box ...................................................................................... 56
4.5 Pengujian Beta-Testing .................................................................................. 63
BAB V ................................................................................................................... 68
PENUTUP.............................................................................................................. 68
5.1 KESIMPULAN .............................................................................................. 68
5.2 SARAN .......................................................................................................... 69
DAFTAR PUSTAKA ............................................................................................ 70
LAMPIRAN ........................................................................................................... 73
ix
DAFTAR GAMBAR
Gambar 2.1. Arsitektur Arsitektur Mean Stack .............................................................. 12
Gambar 2.2. Konsep Database MongoDb ...................................................................... 12
Gambar 2.3. Arsitektur Aplikasi Angular ....................................................................... 15
Gambar 3.1. Diagram Tahapan Penelitian ...................................................................... 20
Gambar 3.2. Gambaran Umum Proses Kerja Sistem ...................................................... 23
Gambar 3.3. Blok Diagram Sistem ................................................................................. 24
Gambar 3.4. Use case diagram Sistem ........................................................................... 26
Gambar 3.5. Database Diagram Sistem .......................................................................... 27
Gambar 3.6 Halaman Utama Sistem............................................................................... 28
Gambar 3.7 Halaman Charts .......................................................................................... 28
Gambar 3.8 Halaman Login ........................................................................................... 29
Gambar 3.9 Halaman User ............................................................................................. 29
Gambar 3.10 Halaman Profile ........................................................................................ 29
Gambar 3.11 Halaman Config ........................................................................................ 30
Gambar 3.12 Activity Diagram Akses Halaman Index Website ..................................... 30
Gambar 3.13 Activity Diagram Halaman Charts ............................................................ 31
Gambar 3.14 Activity DiagramProses Kontrol Halaman Rooms.................................... 33
Gambar 3.15 Activity DiagramProses Kontrol Halaman Profile .................................... 35
Gambar 3.16 Activity DiagramProses Kontrol Halaman Config .................................... 37
Gambar 4.1 Grafik Waktu Respon Time Pada Akses Halaman Index Website ............... 44
Gambar 4.2 Grafik Waktu Respon Time Pada Akses Halaman Create User .................. 47
Gambar 4.3 Throughput Dengan dan Tanpa Service Worker Halaman Index ................ 50
Gambar 4.4 Throughput Dengan dan Tanpa Service Worker Halaman Create............... 52
Gambar 4.5 Grafik Proses Browser Load Event Time…………………………….………..54
x
DAFTAR TABEL
Tabel 3.1. Tabel Pengujian Black-Box akses halaman dashboard .......................31
Tabel 3.2. Tabel Pengujian Black-Box halaman charts ........................................32
Tabel 3.3. Tabel Pengujian Black-Box halaman rooms ........................................34
Tabel 3.4. Tabel Pengujian Black-Box halaman update profile ...........................36
Tabel 3.5. Tabel Pengujian Black-Box halaman update config ............................38
Tabel 4.1. Hasil Pengujian rata-rata Respon Time Halaman Index ......................43
Tabel 4.2. Hasil Pengujian rata-rata Respon Time Halaman Create User ...........46
Tabel 4.3. Hasil Pengujian rata-rata Trhoughput Halaman Index ........................49
Tabel 4.4. Hasil Pengujian rata-rata Respon Time Halaman Create User ............51
Tabel 4.5. Tabel Hasil Pengujian load time tanpa cache……………...…………53

Tabel 4.6. Tabel Hasil Pengujian load time dengan cache……………...……….54
Tabel 4.7. Tabel Hasil Perhitungan File Cache Web Bworser…………...……...55
Tabel 4.8. Hasil Pengujian Black-Box Akses Halaman Dashboard .....................57
Tabel 4.9. Hasil Pengujian Black-Box Akses Halaman Charts ............................58
Tabel 4.10. Hasil Pengujian Black-Box Akses Halaman Rooms ..........................59
Tabel 4.11. Hasil Pengujian Black-Box Akses Halaman Update Profile .............61
Tabel 4.12. Hasil Pengujian Black-Box Akses Halaman Config ..........................62
Tabel 4.13. Hasil Pengujian kuisioner nomor 1 ....................................................63
xi
xii
BAB I
PENDAHULUAN
1.1 Latar Belakang
Universitas Hasanuddin sebagai salah satu perguruan tinggi negeri terbesar
di Indonesia khususnya Indonesia bagian timur telah menjadi Perguruan Tinggi
percontohan bagi Perguruan Tinggi lainnya. Hal ini tentunya tidak diperoleh
dengan mudah karena segudang prestasi harus diukir agar dapat mencapai hal itu.
Berdasarkan info dari situs resmi Lembaga Kajian dan Pengembangan Pendidikan
(LKPP) Universitas Hasanuddin tercatat sebanyak 31 program studi yang memiliki
akreditasi A, 27 program studi dengan akreditasi B, dan 2 program studi dengan
akreditasi C dari total 60 program studi jenjang S1 yang ada di Univesitas
Hasanuddin.
Segudang prestasi yang dicapai Universitas Hasanuddin dilandasi oleh
kualitas mahasiswa dan tenaga pengajar yang profesional. Sejalan dengan hal itu
pembangunan infrastruktur juga berperan penting dalam mewujudkan pendidikan
yang berkualitas. Pembangunan infrastruktur yang dilakukan Universitas
Hasanuddin masih terus berjalan sampai saat ini. Pembangunan infrastruktur
terbesar yang pernah dilakukan oleh Universitas Hasanuddin ialah pembangunan
gedung Fakultas Teknik Universitas Hasanuddin yang berlokasi di Kabupaten
Gowa Sulawesi Selatan.
Sejalan dengan pesatnya pembangunan infrastruktur tersebut terdapat
beberapa permasalahan yang perlu dijadikan perhatian khusus Universitas
1
Hasanuddin. Salah satunya ialah besarnya jumlah tagihan penggunaan energi listrik
yang harus dikeluarkan setiap bulannya. Untuk itu perlu dilakukan monitoring
secara rutin agar dapat mengetahui besaran penggunaan listrik yang terpakai. Tidak
sebatas itu saja kontroling penggunaan energi listrik juga dibutuhkan. Hal ini
bertujuan agar penggunaan energi listrik yang tidak sesuai dapat dihentikan
sehingga beban penggunaan energi listrik dapat dikurangi.
Dalam proses kontroling seperti di atas biasa dilakukan oleh operator
dengan cara mengecek setiap ruangan yang menggunakan energi listrik lalu
mematikan atau menyalakannya secara manual. Sedangkan untuk monitoring
besaran penggunaan energi listrik dilakukan dengan menggunakan alat ukur
sederhana dan perhitungan yang masih manual sehingga proses pemantauan data
penggunaan energi listrik tidak dapat diperoleh setiap saat karena perhitungan
penggunaan listrik dilakukan pada rentang waktu tertentu sehingga membutuhkan
waktu yang lebih lama untuk mengetahuinya. Oleh sebab itu dibutuhkan sebuah
teknologi yang dapat melakukan kontrol dan monitoring penggunaan energi listrik
secara realtime agar operator dapat memperoleh data terbaru dan mengolahnya
sebagai peluang adanya efesiensi energi listrik.
Website merupakan salah satu bentuk teknologi online yang dapat
digunakan oleh civitas Universitas Hasanuddin dalam melakuan monitoring serta
kontroling penggunaan energi listrik secara realtime. Website dibangun
menggunakan Bahasa pemrograman web yang umumnya dibangun menggunakan
bahasa pemrograman client side dan server side. Namun dengan perkembangan
teknologi web berbagai bahasa pemrograman di kemas menjadi sebuah framework
2
dengan tujuan memberikan kemudahan bagi para pengembang. Angular adalah
framework yang menggunakan bahasa pemrograman java script digunakan untuk
membangun sebuah website. Selain itu angular memungkinkan pengembang dalam
membuat sebuah website yang memiliki performa lebih baik dan mampu membuat
sebuah website yang tidak bergantung pada koneksi jaringan yang handal.
Progresive web app (PWA) merupakan teknologi berbasis website terbaru
yang saat ini sedang berkembang dengan sangat pesat. Progresive web app
memungkinkan teknologi/aplikasi website dapat berjalan layaknya sebuah aplikasi
native pada smartphone. Sehingga memungkinkan aplikasi dapat berjalan secara
offline.
Progresive web app (PWA) bekerja dengan menggunakan service worker
yang merupakan salah satu APIs Java script yang memungkinkan pengembang
dalam melakukan pemrograman cache dan melakukan load asset data, melakukan
managemen push notification, dan yang lainnya. Service worker memiliki
kelebihan dalam hal koneksi internet yang tidak stabil ataupun lambat sehingga
membuat sistem yang dibangun tidak terlalu bergantung pada koneksi internet yang
cepat. Selain itu disatu sisi service worker disebut sebagai performance booster
karena menghemat jaringan dan menyediakan user experience yang lebih baik. (D.
Sheppard, 2017)
Service worker diimplementasikan pada Java Script yang berjalan pada
background website utama dan berjalan secara paralel dengan website utama
sehingga kerja dari service worker tidak terlalu terlihat secara langsung. Service
3
worker pada dasarnya adalah sebuah script atau java script file yang berjalan di
belakang website utama dan membantu dalam pengembangan aplikasi web offline.
(W. T. Tamire, 2016)
Dengan kemampuan service worker yang dimplementasikan ke dalam
teknologi Progresive web app (PWA) menjadikan website dapat difungsikan
walaupun koneksi jaringan yang lemah ataupun tidak ada koneksi internet
sekalipun. Oleh sebab itu penulis mengangkat sebuah tugas akhir dengan judul
“implementasi teknologi progressif web application (pwa) dalam membangun
sistem management energi listrik menggunakan framework angular”.
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah diuraikan, maka rumusan masalah
dalam penelitian tugas akhir ini adalah:
1. Bagaimana membuat sistem website yang dapat mengontrol dan
memonitoring penggunaan energi listrik secara realtime?
2. Bagaimana mengintegrasikan service worker dengan teknologi MEAN
stack aplication?
3. Bagaimana kinerja performa sistem website dengan memanfaatkan
teknologi service worker?
1.3 Tujuan Penelitian
Merujuk pada rumusan masalah yang ada, maka tujuan yang ingin dicapai
dalam penelitian ini adalah:
4
1. Membuat sebuah sistem berbasis web yang dapat melakukan kontrol
dan monitoring penggunaan energi listrik secara realtime.
2. Mengintegrasikan service worker pada teknologi MEAN stack
application dalam meningkatkan performa sistem berbasis web.
3. Menganalisis kinerja performa sistem website yang dibangun dengan
menggunakan service worker.
1.4 Manfaat Penelitian
Ada pun manfaat dalam penilitan ini adalah:

1. Memberikan efesiensi terhadap proses kontrol dan monitoring
penggunaan energi listrik pada gedung Center Of Technology (COT)
Fakultas Teknik Universitas Hasanuddin.
2. Memberikan performa yang lebih baik pada sistem web yang dibangun.
3. Memberikan penjabaran kinerja performa sistem web yang dibangun
dengan menggunakan teknologi service worker.
1.5 Batasan Masalah Penelitian
Mengingat banyaknya perkembangan yang bisa ditemukan dalam
permasalahan ini, maka perlu adanya batasan-batasan masalah yang jelas mengenai
apa yang dibuat dan diselesaikan dalam program ini. Adapun batasan-batasan
masalah pada penelitian ini sebagai berikut:
1. Studi kasus perancangan sistem adalah ruang Co-1f-4 lantai 1 gedung
Center Of Technology (COT) Fakultas Teknik Universitas Hasanuddin
Gowa.
2. Perancangan sistem hanya pada sistem antarmuka.
5
3. Pembuatan Website menggunakan Framework website javascript yaitu
Angular 6.
4. Database yang digunakan adalah local storage sebagai database lokal
dan MongoDb sebagai Backend Service online.
5. Yang digunakan untuk menguji performa dan penggunaan resource
sistem web adalah Apache Jmeter.
6. Pembuatan sistem dibangun dengan menggunakan komponen MEAN
stack application.
7. Parameter analisis performa website yaitu Respon time dan Trhoughput,
serta analisis fungsionalitas sistem.
1.6 Sistematika Penulisan
Untuk memberikan gambaran singkat mengenai isi tulisan secara
keseluruhan, maka akan diuraikan beberapa tahapan dari penulisan secara
sistematis, yaitu:
BAB I PENDAHULUAN
Pada bab ini membahas latar belakang penelitian yang menjelaskan
bagaimana latar belakang pembuatan aplikasi ini akan dibuat, ruang lingkup
yang menjelaskan batasan-batasan penelitian dalam pembuatan Aplikasi
Web PWA dengan memadukan teknonolgi MongoDB, ExpressJs, Angular,
dan NodeJs (MEAN stack) sebagai komponen perancangan sistem, serta
tujuan dan manfaat dari pembuatan aplikasi ini bagi para pengguna,
metodologi penelitian, tinjauan pustaka dan sistematika penulisan.
6
BAB II TINJAUAN PUSTAKA
Pada bab ini akan dijelaskan teori-teori yang menunjang percobaan
penelitian seperti Mean Stack, service worker, apache jmeter, dan
sebagainya.
BAB III METODOLOGI PENELITIAN
Pada bab ini berisi tentang perancangan sistem, pembuatan sistem,
skenario pengujian yang akan dilakukan dan skenario pengujian untuk
melihat performa dari sistem yang dibuat.
BAB IV HASIL DAN PEMBAHASAN
Dalam bab ini menjelaskan tentang penyajian data hasil performa
sistem, proses-proses yang dilakukan terhadap data-data yang telah
diperoleh, dan pembahasan atau evaluasi hasil implementasi sistem secara
keseluruhan.
BAB V PENUTUP
Bab ini berisi kesimpulan dan penelitian yang telah dibuat, serta
saran-saran untuk dapat meningkatkan dan mengembangkan sistem pada
masa yang akan datang.
7
BAB II
TINJAUAN PUSTAKA
2.1 Progressive Web Apps (PWA)
Progressive Web App (PWA) adalah mobile web yang diubah dengan fitur
dan fungsionalitas tambahan yang memberikan nuansa tampilan 'app-like' (seperti
aplikasi smartphone). Ini ditampilkan menggunakan sebuah instance dari Google
Chrome dan menggunakan fungsi ‘Service worker’ untuk memastikan kelancaran
dan meningkatkan kecepatan load website bahkan situs bisa diakses tanpa koneksi
internet sekalipun. API service worker ini yang bertugas untuk melakukan caching
terhadap semua data yang terdapat pada website agar jika dikunjungi kembali data
tersebut tidak di load ulang sehingga penggunaan data internet berkurang
(Progressive Web Apps, Google). Dengan kata lain PWA layaknya aplikasi
smartphone namun pada dasarnya adalah sebuah website. Salah satu prinsip utama
PWA adalah aksesibilitas yang bisa diakses dimana saja dan kapan saja. (M. Gaunt,
2018)
Menurut pengertian dari situs resmi google developers, Progressive Web
Apps adalah:
 Progresif - Bekerja untuk setiap pengguna, apapun pilihan browser
mereka karena dibangun dengan peningkatan progresif sebagai konsep
intinya.
 Responsif - Cocok dengan setiap faktor bentuk: perangkat desktop,
seluler, tablet, atau apa saja yang muncul berikutnya.
8
 Konektivitas independen - Disempurnakan dengan service worker
agar bisa bekerja offline atau pada jaringan berkualitas-rendah.
 Seperti-Aplikasi - Terasa seperti sebuah aplikasi untuk pengguna
dengan interaksi dan navigasi bergaya-aplikasi karena mereka dibangun
di atas model shell aplikasi.
 Segar - Selalu terkini berkat proses pembaruan service worker.
 Aman - Disediakan melalui HTTPS untuk mencegah snooping dan
memastikan materi belum dirusak.
 Dapat ditemukan - Dapat diidentifikasi sebagai "aplikasi" berkat
manifest W3C dan cakupan registrasi service worker, yang
memungkinkan mesin telusur untuk menemukannya.
 Bisa dilibatkan-kembali - Kemudahan untuk dilibatkan-kembali
dengan fitur seperti pemberitahuan push.
 Dapat dipasang - Memungkinkan pengguna untuk "menyimpan"
aplikasi yang mereka anggap paling berguna di layar beranda tanpa
kerumitan toko aplikasi.
 Bisa ditautkan - Dapat dengan mudah dibagikan melalui URL, tidak
memerlukan pemasangan yang rumit.
2.1.1 Service Worker API
Menurut situs resmi google developers, Service worker adalah skrip
yang dijalankan browser di background, terpisah dari laman web, yang
membuka pintu ke berbagai fitur yang tidak memerlukan laman web atau
interaksi pengguna. Service worker inilah yang membuat website berbasis
9
PWA dapat berjalan secara offline, menerima notifikasi layaknya native
application dan sebagainya. Untuk lebih lengkapnya, fitur dari Service
Worker PWA sebagai berikut:
 Offline first – Aplikasi Web dapat terbuka secara offline tanpa adanya
koneksi jaringan internet, meskipun website tersebut harus dibuka secara
online terlebih dahulu.
 Application Manifest – Dengan menggunakan manifest, aplikasi web
dapat diinstall tanpa harus membuka di play store
 Background Sync – memungkinkan pengguna menunda pengiriman
sebuah aksi yang dilakukan di website jika tidak ada koneksi internet, dan
aksi tersebut akan dilakukan ketika koneksi internet tersedia. Misalnya jika
membeli barang di website took online. Ketika ingin membeli barang, anda
masukkan ke keranjang tetapi jaringan tidak ada. Background sync dari
service worker akan bekerja untuk menunda aksi sampai koneksi internet
muncul kembali.
 Self-update – aplikasi web yang berbasis PWA tidak perlu lagi diupdate di
play store seperti native application. Update terbaru akan terus ada untuk
pengguna selama developer memperbarui aplikasinya
2.1.2 Web App Manifest
Web app Manifest adalah file JSON sederhana yang memberi tahu
browser tentang aplikasi web apa yang harus dilakukan ketika akan 'diinstal'
pada perangkat seluler atau desktop pengguna. File manifest inilah yang
10
diperlukan oleh web browser dapat melakukan perintah ‘instal’ pada
perangkat.
2.2 MEAN Stack Aplication
MEAN stack pada dasarnya adalah sekumpulan komponen atau tools yang
digunakan dalam mengembangkan atau membuat sebuah website. Istilah MEAN
stack diangkat dari singkatan beberapa teknologi yang digunakan di dalamnya yang
digabungkan menjadi satu. Teknologi tersebut atara lain MongoDB, ExpressJS,
Angular, dan NodeJS. Kombinasi dari kumpulan teknologi ini dapat berjalan
dengan baik dan stabil secara bersamaan sehingga dapat diterapkan untuk
mengembangkan sebuah website yang sederhana hingga teknologi website yang
dikembangkan dengan Internet Of Things. (S. Kavya, 2015)
Istilah MEAN mulai diperkenalkan pada tahun 2013 dan merupakan
kombinasi dari beberapa framework yang open source untuk membangun aplikasi
web secara dinamis menggunakan javascript. MEAN dapat mencakup seluruh
teknologi yang dibutuhkan dalam mengembangkan aplikasi web mulai dari
pengembangan backend sampai dengan pengembangan frontend. Dimana lingkup
frontend menggunakan framework angular, sedangkan lingkup backend
menggunakan mongodb, express, dan node js.
11
Gambar 2.1 Arsitektur Mean Stack
2.2.1 MongoDb
MongoDb merupakan tipe database NoSQL yang berorientasi pada
dokumen. Berbeda dengan database relational pada umumnya, mongodb
menyimpan data dalam format binary encoded json (BSON). Mongodb
digunakan pada lingkungan javascript pada sisi server untuk menampung
data melalui fungsionalitas yang disediakan oleh node js. MongoDb bekerja
dengan menerapkan konsep collection dan document dimana collection
merupakan sebuah tabel sedangkan document merupakan attribute / rows
dalam sebuah tabel database bila disandingkan dengan relational database
management system (RDBMS) pada umumnya. (R. Novik, 2015)
Gambar 2.2 Konsep database MongoDb
12
Sebuah document pada MongoDb merupakan seperangkat pasangan
key-value. Document pada MongoDb memiliki skema yang dinamis. Itu
artinya, document dalam collection yang sama tidak perlu memiliki struktur
yang sama dan komponen isi yang sama. Dengan kata lain bila kita
membutuhkan struktur data yang berbeda dalam satu collection maka kita
tidak perlu mengubah struktur data document lainya yang terdapat dalam
collection yang sama. MongoDb juga mendukung berbagai tipe data yang
berbeda seperti String, Integer, Boolean, Double, Min/Max keys, Arrays,
TimeStamp, Object Null, Symbol, Date. (R. Novik, 2015)
2.2.2 Express
Express merupakan framework yang bersifat open source yang
bekerja di sisi server yang dibangun dalam lingkup node js seperti yang
telah digambarkan sebelumnya pada 2.1. Framework ini digunakan untuk
mengelola request dari klien ke server termasuk untuk pengelolaan routing
dan operasi HTTP (PUT, GET, POST dan sebagainya). Express dapat
dikatakan sebagai suatu middleware yang bertanggungjawab dalam
mengelola siklus request-response dan menjamin tidak ada suatu request
yang tertinggal (dibiarkan menggantung). (S. Kavya, 2015)
2.4.3 Angular
Angular merupakan framework javascript yang dikembangkan oleh
Google dan digunakan dalam menangani seluruh aplikasi client side dan
interaksinya. Secara spesifik framework ini mengembangkan single page
13
application (SPA) yang memuat seluruh halaman website kedalam satu
halaman (page) saja. SPA memiliki beberapa keunggulan, diantaranya:
• Tidak ada page refresh
• User experience yang lebih baik
• Kemampuan untuk bekerja secara offline
Angular memiliki kemampuan untuk melakukan routing protocol
dari sisi klien. Hal ini membantu meringankan beban di sisi server dengan
beban margin proses yang cukup besar. Keistimewaan lain dari Angular
adalah konsep arsitekturnya bersifat Model-View-Whatever (MVW) yaitu
pengembang bebas memilih metode apa yang mereka inginkan dalam
mengimplementasikan Angular dalam proyek yang dikembangkan. (S.
Kavya, 2015)
Menurut situs resmi Angular, Angular adalah sebuah platform untuk
mengembangkan front–end dari sebuah aplikasi web yang berbasis open
source. Platform ini menggunakan bahasa Typescript. Aplikasi yang dibuat
dengan Angular dipisahkan ke dalam template HTML, kelas komponen
yang ditulis untuk mengelola template dan service yang berisi logika bisnis
dari aplikasi. Pendekatan modular ini, juga diilustrasikan pada gambar 2.3,
memungkinkan pengembangan aplikasi yang cepat dan logis dan
memudahkan pengujian mereka. (N. Ninaad, Singh. Pooja, 2017)
Dalam aplikasi Angular yang dirancang dengan baik, bagian
aplikasi yang berbeda tidak boleh mengetahui detail implementasi bagian
14
lain. Jika pedoman pengembangan framework dipatuhi, akan terasa lebih
mudah untuk mengikuti paradigma ini.
Gambar 2.3 Arsitektur Aplikasi Angular
2.2.4 Node JS
Node js merupakan komponen yang paling penting dalam MEAN
stack. Node js menyediakan lingkungan webserver dengan performa tinggi
dan ringan, serta ideal untuk membangun webservice API (D. Sheppard,
2017). Node memungkinkan pengembang untuk membuat web server dan
networking tools menggunakan javascript dan sekumpulan modul yang
mengelola berbagai fungsi utama. Modul tersebut menyediakan file system
I/O, networking, binary data, kriptografi, data stream, dll. Saat ini node telah
digunakan oleh beberapa perusahaan besar seperti: IBM, LinkedIn, Paypal,
Yahoo, Walmart, dll. (S. Kavya, 2015)
15
2.3 JSON
JavaScript Object Notation (JSON) merupakan pertukaran data ringan yang
berbasis Bahasa Pemrograman JavaScript. JSON berbasis teks / tulisan dengan
format yang dapat dibaca dan dikenali oleh manusia untuk merepresentasikan
struktur data sederhana dan array asosiatif. JSON merupakan bahasa independen
yang lengkap dan menggunakan konvensi yang akrab bagi para programmer bahasa
C, antara lain bahasa pemrograman C, C ++, C #, Java, JavaScript, Perl, Python,
dan lainnya
2.4 Aplikasi Web Offline
Aplikasi Offline menurut Workneh Tefera Tamire, adalah bahwa ia terus
bekerja dalam situasi di mana tidak ada koneksi internet, tidak seperti aplikasi web
standar. Aplikasi web semacam ini menyimpan sumber daya aplikasi web dan data
pengguna yang penting pada mesin klien secara terus-menerus alih-alih membawa
informasi dari server saat diminta. Sebagai hasilnya, ini memungkinkan
programmer membangun aplikasi web berkecepatan tinggi karena aplikasi tersebut
menggunakan sumber daya yang tersimpan di perangkat lokal. Selain itu, ini
membantu untuk meningkatkan tingkat aplikasi ketika mengambil data karena
informasi tersebut disimpan secara lokal mengurangi perjalanan bolak-balik
standar. (A. S. Wardani, 2018).
2.4.1 Teknologi Aplikasi Web Offline
Untuk membuat Aplikasi web bekerja secara offline, terdapat
beberapa komponen teknologi yang digunakan dalam mencapai tujuan
tersebut, diantaranya:
16
 Service Worker – Service worker adalah salah satu jenis dari web
worker, yaitu script yang berjalan di belakang browser pengguna.
Service worker pada dasarnya adalah berkas Java script yang berjalan
pada thread yang berbeda dengan main thread browser, menangani
network request, caching, mengembalikan resource dari cache, dan bisa
mengirimkan push message. Aset web dapat disimpan sebagai cache
lokal, sehingga dengan jaringan internet yang kurang memadai pun,
pengguna tetap mendapat pengalaman yang baik.
 Local Storage – Local Storage juga disebut penyimpanan Web
menyimpan data pasangan key-value dan aplikasi web mengakses data
ini menggunakan JavaScript. Selain itu, tidak seperti cookie yang
kurang aman, API ini memberikan keamanan yang lebih baik dan
memiliki fitur privasi yang lebih besar. Selain itu, lebih mudah dan
menggunakan lebih sedikit sintaksis JavaScript untuk mengatur dan
mendapatkan data dibandingkan dengan cookie.
 Cache Storage - Sebagian besar browser web langsung cache halaman
web begitu dikunjungi oleh pengguna untuk menawarkan pengalaman
pengguna yang berkualitas tinggi. Namun, caching halaman web secara
otomatis memiliki beberapa batasan. Pembatasan pertama adalah bahwa
pengembang web tidak memiliki akses untuk membuat keputusan
tentang halaman web mana yang akan di-cache dalam situasi di mana
tidak ada koneksi jaringan. Masalah kedua adalah bahwa caching situs
web secara otomatis bukan jaminan untuk membangun dan mengakses
17
halaman yang di-cache ketika tidak ada koneksi internet. Untuk
menyelesaikan masalah yang disebutkan di atas dan menanganinya, kita
menggunakan Cache API. Dengan menggunakan teknologi ini,
developer web dapat dengan mudah memutuskan file yang akan di-
cache dan tersedia ketika aplikasi bekerja secara offline. Karenanya,
Application cache memungkinkan developer untuk membuat keputusan
di muka untuk memilih seperti apa situs web yang direncanakan saat
offline.
2.5 Apache Jmeter
Aplikasi Apache JMeter ™ adalah perangkat lunak open source, aplikasi
Java 100% murni yang dirancang untuk memuat perilaku fungsional uji dan
mengukur kinerja. Awalnya dirancang untuk menguji Aplikasi Web tetapi sejak itu
diperluas ke fungsi pengujian lainnya.
Apache JMeter dapat digunakan untuk menguji kinerja baik pada sumber
daya statis dan dinamis, aplikasi dinamis Web. Ini dapat digunakan untuk
mensimulasikan beban berat pada server, kelompok server, jaringan atau objek
untuk menguji kekuatannya atau untuk menganalisis kinerja keseluruhan di bawah
jenis beban yang berbeda.
18
BAB III
METODOLOGI PENELITIAN
3.1 Lokasi Dan Waktu Penelitian
Proses penelitian dilakukan sejak bulan September 2018. Dan lokasi
penelitian dilakukan di Laboratorium Sistem Informasi Dan Komputasi Awan
Departemen Informatika Fakultas Teknik Universitas Hasanuddin Gowa.
3.2 Instrumen Penelitian
Instrumen yang digunakan pada penelitian ini terdiri dari Hardware dan Software.
1) Hardware
Hardware atau perangkat keras yang dibutuhkan untuk mengimplementasikan
rancangan sistem adalah:
a) Komputer Klien, digunakan untuk melakukan pengaksesan program yang
berada pada server melalui jaringan dengan Spesifikasi:
 Komputer: Hp-Pavilion dv6
 Processor: 2,3 GHz Intel Core i7
 RAM: 8GB DDR3 798.7MHz
 GPU:
o Intel HD Graphic 4000 1792 MB
o NVIDIA GeForce GT 650M 6050 MB
b) Modem / Router dengan spesifikasi:
 Bandwidth: 10 Mbps
 Transfer Data Speed: 1,86 MB/s
2) Software
Software atau perangkat lunak yang dibutuhkan untuk mengimplementasikan
19
rancangan sistem adalah:
a) Sistem Operasi Windows 10 64-bit operating System
b) Web Browser Google Chrome
c) IDE Sublime text editor
d) Angular 6
e) Material Angular
f) Apache Jmeter
g) Library Mongoose
h) NodeJS
i) ExpressJS
j) Angular CLI
k) Socket.io
l) NPM Package
m) Local Storage
n) MongoDB Compass
3.3 Prosedur Penelitian
Tahapan pada penelitian ditunjukkan pada gambar 3.1
Gambar 3.1. Diagram Tahapan Penelitian
20
Tahapan secara garis dijelaskan sebagai berikut:
1. Pada studi literatur dilakukan pencarian penelitian terkait dengan
service worker menggunakan konsep teknologi aplikasi MEAN stack,
dan implementasi website berbasis progressive web app (PWA), serta
penelitian sebelumnya yang berkaitan dengan topik penelitian yang
dapat menunjang kegiatan penelitian.
2. Pada tahap ini dilakukan perancangan desain sistem yang akan dibuat
dan nantinya yang akan dilakukan untuk menguji performansi website
serta menganalisa fungsionalitas sistem web yang dibangun.
3. Pada tahap ini dilakukan persiapan berbagai jenis instrumen yang
dibutuhkan dalam penelitian, berupa software maupun hardware.
Segala macam software yang dibutuhkan disiapkan dengan cara
memasang atau meng-install di perangkat komputer yang akan
digunakan untuk membangun sistem.
4. Pada tahap ini, desain sistem yang telah dirancang kemudian di
implementasikan dan dibangun menggunakan instrumen yang sudah
disiapkan berupa perangkat komputer, MonogoDb, Express, Angular,
dan Nod JS sebagai komponen utama dalam pembuatan sistem.
5. Pada tahap ini dilakukan pengimpelemtasian service worker pada sistem
sehingga sistem yang dibuat dapat di akses pada kondisi jaringan yang
lemah serta pegimplementasian teknologi local storage pada web
browser sebagai penyimpanan data local sementara pada saat sistem
diakses dalam kondisi offline.
21
6. Pada tahap ini, kemudian sistem dibuat agar mampu melakukan
sinkronisasi data secara berkala antara basis data server MongoDB
dengan basis data Local Storage. Sehingga manajemen basis data tetap
dapat dilakukan dalam kondisi offline.
7. Pada tahap ini, setelah sistem telah dibangun maka dilakukan
pengambilan data performansi sistem yang dibuat dengan parameter
berupa Respon Time, dan Trhoughput, pengujian Black-box, serta
pengujian Beta Testing dalam menguji fungsionalitas sistem yang ada.
8. Setelah dilakukan pengambilan data, maka data yang diperoleh dari
berbagai skema kemudian dilakukan analisis. Analisis dilakukan untuk
menguji kemampuan sistem dalam menyajikan data serta komponen-
komponen website yang ada kepada client dengan jumlah yang besar
pada rentang waktu yang singkat.
3.4 Framework Dan Gambaran Umum Sistem
Sistem yang dibangun adalah aplikasi website berbasis progressive web
application yang berfungsi untuk mengontrol dan memonitoring penggunaan
energi listrik secara realtime dengan mengedepankan User Interface dan User
Experience (UI/UX) yang dinamis dan sesuai dengan kebutuhan user serta dapat
diakses dalam keadaan offline layaknya aplikasi native pada smartphone.
22
Gambar 3.2. Gambaran Umum Proses Kerja Sistem
Gambar 3.2 merupakan penggambaran umum proses monitoring dan
kontroling penggunaan energy listrik yang dapat dilakukan pada sistem yang
dibangun. Proses dilakukan oleh admin ruangan dengan melakukan login terlebih
dahulu agar admin dapat terverifikasi sebagai admin ruangan lalu kemudian
aplikasi akan memberikan hak akses kepada admin agar dapat memantau kondisi
lampu dan melakukan kontrol baik itu on ataupun off pada ruangannya.
Pada saat admin melakukan aksi untuk mengaktifkan atau mematikan
lampu maka sistem akan mengirimkan data berupa binary digit 0 atau 1 ke dalam
database yang sesuai dengan id dan node yang dimiliki oleh lampu yang telah
berikan aksi. Data yang telah dikirim akan dibaca oleh lora dan akan di eksekusi
oleh switch yang terdapat didalam rangkaian Arduino untuk melakukan aksi on atau
off saklar lampu ruangan admin.
23
Sistem dibangun dengan memanfaatkan teknologi web agar sistem dapat
dengan mudah diakses oleh user tanpa harus mempertimbangkan perangkat /
platform apa yang dimiliki user. Sehingga user tetap dapat melakukan kontroling
dan monitoring penggunaan energi listrik pada ruangannya. Teknologi web
memiliki satu persoalan yang umum yaitu tidak dapat dijalankan jika tidak
terambung ke server atau jaringan internet. Sehingga digunakan teknologi web
yang dapat berfungsi secara offline dengan memanfaatkan teknologi service
worker. Sistem web dibuat menggunakan framework JavaScript Angular 6,
MongoDb, dan Local Storage.
Sistem ini akan dibuat untuk mampu bekerja secara offline maupun online.
Dengan menggunakan basis data lokal berupa Local Storage untuk menangani data
secara lokal atau offline dan MongoDb sebagai backend service untuk menangani
manajemen basis data secara online. Kedua basis data ini akan melakukan
sinkronisasi secara berkala selama koneksi internet ada.
Gambar 3.3. Blok Diagram Sistem
Sistem yang dibuat sesuai dengan alur pada gambar 3.3. Aplikasi akan
mengirimkan request data dan ditangkap oleh service worker. Kemudian service
worker akan mengecek apakah website online atau offline. Jika offline, service
24
worker akan mengambil data yang berada pada local system dan cache storage lalu
memberikan response balik ke website untuk ditampilkan di browser. Jika online,
service worker akan mengambil data di MongoDb dan dari sini, akan dikirim
response ke website untuk ditampilkan di browser serta melakukan sinkronisasi
data terbaru yang ada di MongoDb dan dimasukkan ke Local System untuk
pembaruan data didalamnya yang berfungsi jika website diakses secara offline
kembali, maka data terbaru bisa diambil dari local system.
Untuk local system sendiri, terdapat Local Storage sebagai media
penyimpanan data lokal disisi klien. Data yang disimpan di Local Storage berupa
data-data produk yang dibeli oleh pembeli dan data-data produk yang ada pada
website e-commerce sistem ini.
3.4.1 Use Case Diagram
Sistem web yang digunakan memiliki beberapa fitur yang masing-
masing tingkatan entity atau penggunanya. Skenario dari sistem yang dibuat
ditunjukkan dengan use case diagram pada gambar 3.4 skenario yang ada
menjelaskan bagaimana sistem dapat digunakan oleh masing-masing
tingkatan user.
25
Gambar 3.4 Use Case Diagram Sistem
Use case dari sistem mulai dari super admin, memiliki interaksi
dengan halaman login dan logout, serta memiliki fungsi untuk menambah,
mengedit dan menghapus admin, melakukan kontrol menyalakan /
mematikan lampu pada seluruh ruangan, memonitoring penggunaan energi
listrik pada seluruh ruangan serta melihat perhitungan Kwh dalam bentuk
live charts. Pada level admin memiliki interaksi dengan halaman login dan
logout, lalu halaman edit profile admin, dan kemampuan untuk mengontrol
serta memonitoring ruangan admin. Sedangkan pada level user hanya diberi
batasan yaitu memiliki interaksi dengan halaman monitoring untuk melihat
penggunaan energi listrik.
26
3.4.2 Database Diagram Sistem
Database diagram sistem yang menjelaskan alur dari sistem dan
penyimpanan data yang telah dibuat dengan hubungammya antara satu
entity dengan entity yang lain ditunjukkan pada gambar 3.5.
Gambar 3.5 Database Diagram Sistem
Database diagram yang digunakan adalah database NoSQL. Tidak
seperti SQL pada umumnya yang memiliki Class di dalam diagramnya
untuk menghubungkan entity satu dengan yang lainnya. Diagram dalam
sistem yang dibuat menjelaskan, entity rooms memiliki hubungan dengan
entity users karena setiap user dalam hal ini dikategorikan sebagai admin
memiliki satu ruangan tersendiri yang dapat mereka kontrol penggunaan
listriknya. Adapun entity rooms juga memiliki hubungan dengan entity
nodeStatus dimana dalama satu entity rooms memiliki beberapa node /
lampu di dalamnya yang akan dibaca statusnya. Selanjutnya entity
27
energyConsumption terhubung dengan entity nodeStatus karena dalam satu
nodeStatus bisa memiliki banyak energyConsumption di dalamnya.
3.5 Hasil Pembuatan Sistem
Setelah semua perancangan sistem telah dilakukan maka selanjutnya adalah
membangun sistem yang akan dianalisis. Sistem dibangun dengan menggunakan
framework JavaScript Angular 6 sebagai sisi client dan NodeJS + MongoDb
sebagai Backend Service yang melakukan pemrosesan data di sisi server. Sistem ini
menerapkan teknologi Single Page Application (SPA). Sistem yang dibuat telah
dihosting dan bisa dibuka di eng.unhas.ac.id:8000.
Gambar 3.6 Halaman Utama Sistem
Gambar 3.7 Halaman Charts
28
Gambar 3.8 Halaman Login
Gambar 3.9 Halaman User
Gambar 3.10 Halaman Profile
29
Gambar 3.11 Halaman Config (admin)
3.6 Activity Diagram
Activity diagram mengandung diagram use case entities seperti halaman
dashboard, halaman carts, halaman rooms, halaman profile, halaman config. Selain
itu sistem yang dibangun akan dilakukan pengujian dan di bandingkan dengan
activity diagram yang dibuat.
Proses akses halaman dashboard / index ditunjukkan melalui activity
diagram pada gambar 3.11.
Gambar 3.12 Activity Diagram Akses Halaman Index Website
30
Penjabaran rancangan fungsional akses halaman dashboard / index
dijelaskan dalam tabel 3.1.
Tabel 3.1 TabelPengujian Black-Box akses halaman dashboard / index
No Aksi Masukan Keluaran
1 User masuk ke halaman index Masukan berupa Memunculkan
system dengan menuliskan text halaman url halaman daahsboard
halaman url website website / index website
Proses akses halaman charts ditunjukkan melalui activity diagram pada
gambar 3.12.
Gambar 3.13 Activity Diagram Halaman Charts
Pada proses akses halaman charts sistem melakukan request untuk
mengambil data arus yang tersimpan di dalam database server mongoDB.
31
Selanjutnya data arus yang telah diterima akan diolah untuk mendapatkan nilai
Kwh untuk setiap ruangan. Perhitungan nilai Kwh ini dilakukan pada sisi client
(web browser). Selanjutnya client akan menampilkan data perhitungan Kwh dalam
bentuk chart. Setelah semua proses berhasil dilakukan service worker akan
menyimpan data tersebut ke dalam database lokal sehingga ketika website dalam
keadaan offline pengguna akan tetap dapat memonitoring penggunaan energi listrik
terakhir yang diterima oleh web browser. Proses request data dilakukan pada
background service dalam interval waktu 10 detik sehingga meskipun user tidak
sedang mengakses halaman charts sistem akan tetap menerima data terbaru
penggunaan arus / energi listrik pada setiap ruangan. Hal ini dilakukan agar
pengguna tetap memperoleh data realtime penggunaan energi listrik.
Penjabaran rancangan fungsional akses halaman charts dijelaskan dalam
tabel 3.2.
Tabel 3.2 Tabel Pengujian Black-Box akses halaman charts
1 User memilih halaman charts yang Masukan Memunculkan
akan melakukan proses request ke berupa klik data Kwh pada
database server kemudian server tombol charts halaman charts
akan mengirim response menuju pada dalam bentuk data
client. navigation bar chart
32
Proses akses kontrol pada halaman rooms ditunjukkan melalui activity
Gambar 3.14 Activity Diagram Proses kontrol Halaman rooms
33
Pada proses kontrol halaman rooms user perlu melakukan login terlebih
dahulu sebagai proses autentikasi untuk memperoleh hak akses dari sistem untuk
masuk ke halaman rooms yang telah ditentukan untuk setiap user. Sehingga user
memiliki hak akses untuk melakukan pengontrolan penggunaan energi listrik
melalui sistem website yang dibangun. Setelah user berhasil melakukan login
system akan mengirim informasi user sebagai response bagi client dalam bentuk
token dengan format json web token (JWT). Token tersebut akan tersimpan ke
dalam local storage sebagai parameter session aktivitas user. Setelah itu website
secara otomatis akan mengarahkan user pada halaman rooms yang telah ditentukan
untuk user.
Penjabaran rancangan fungsional akses kontrol halaman rooms dijelaskan
dalam tabel 3.3.
Tabel 3.3 Tabel Pengujian Black-Box akses kontrol halaman rooms

1 User memilih Masukan berupa Memunculkan form login
halaman login klik tombol login
yang terdapat pada navigation
pada navigation bar
bar
2 User melakukan Masukan berupa Memunculkan halaman rooms
autentikasi text atau karakter yang sesuai dengan ruangan user
untuk pada form login dengan visualisasi status lampu
34
memperoleh kemudian berwarna kuning bila lampu
hak akses dari menekan tombol keadaan On dan visualisasi abu-
sitem submit abu bila lampu keadaan Off
3 User memilih Masukan berupa Memunculkan visualisasi lampu
lampu yang klik pada tombol yang berbeda setelah dilakukan
ingin diaktifkan lampu yang aksi apabila system berhasil
atau dimatikan tersedia mengirim perintah ke server atau
pada ruangan memunculkan notifikasi apabila
sistem gagal mengirimkan perintah
Proses akses kontrol pada halaman profile ditunjukkan melalui activity
Gambar 3.15 Activity Diagram Proses Update Pada Halaman profile
35
Halaman profile berisi informasi user yang diperoleh dari token yang
dikirim oleh server sebagai response aktifitas entities halaman login yang dilakukan
oleh user.
Penjabaran rancangan fungsional akses update halaman profile dijelaskan
dalam tabel 3.4
Tabel 3.4 Tabel Pengujian Black-Box akses halaman update profile

1 User memilih Masukan berupa klik Menampilkan informasi
halaman profile pada tombol profile pada akun user pada halaman
navigation bar navigation bar profile
2 User memilih Masukan berupa klik Menampilkan halmaan
halaman update tombol update profile update profile
profile yang terdapat pada halaman profile
dalam tabel profile
3 User melakukan Masukan berupa text Menampilkan pesan
perubahan data pada atau karakter pada form berhasil atau gagal
form update profile update profile apabila sistem berhasil
kemudian menekan atau gagal mengupdate
tombol submit data ke server
Proses akses kontrol pada halaman config ditunjukkan melalui activity
36
Gambar 3.16 Activity Diagram Proses Kontrol Pada Halaman config
Pada akses halaman config terdapat beberapa fitur yang hanya bisa diakses
oleh user dengan role admin pada use case entities ini pengguna diberi otoritas
untuk menambah, merubah, atau pun menghapus user yang akan diberi otoritas
untuk dapat melakukan kontroling terhadap halaman rooms yang ada.
Penjabaran rancangan fungsional akses halaman config dijelaskan dalam
tabel 3.5
37
Tabel 3.5 Tabel Pengujian Black-Box Akses Halaman config
1 User memilih Masukan berupa klik Menampilkan halaman
halaman config pada tombol config pada informasi daftar user
navigation bar navigation bar pada halaman config
2 User memilih aksi Masukan berupa klik Menampilkan
insert, update, atau tombol insert, update, perubahan informasi
delete pada daftar atau delete kemudian daftar user pada
user pada halaman mengisi informasi pada halaman config
config form yang tersedia, lalu
klik submit
3.7 Skenario Pengujian
Skenario pegujian dilakukan dengan beberapa metode pengujian
yang bertujuan untuk menganilisa performa sistem serta mengukur kualitas
sistem yang dibangun dari sisi pengguna berdasarkan fungsionalitasnya.
Pengujian performa sistem dilakukan dengan menggunakan
software apache jmeter pada sistem yang telah dibuat. Paramater pengujian
yaitu pengujian Respon Time dan pengujian throughput.
Pengujian fungsionalitas sistem dilakukan dengan metode pengujian
Black-box dan pengujian Beta Testing.
38
3.7.1 Pengujian Respon Time
Aplikasi apache jmeter akan digunakan dalam melakukan pengujian
Respon Time. Jmeter akan memberikan nilai interval waktu pada saat
request dilakukan dan pada saat respon diterima.
Pengujian Respon time akan dilakukan dengan memberikan banyak
request sekaligus dari client menuju server masing-masing thread,
kemudian dilakukan perhitungan nilai rata – rata Respon time atau Average
time.
Average time adalah nilai jumlah dari serangkaian waktu antara
request dibagi jumlah request dari client ke server.
𝑛 : Jumlah request dari client ke server.
𝑖 : counter number (𝑖 = 1,2, …., 𝑛 )
𝑎 : interval waktu tempuh anatara client ke server
setiap request
1 1
𝑎𝑣𝑒𝑟𝑎𝑔𝑒 = ∑𝑛𝑖=1 𝑎𝑖 = (𝑎1 + 𝑎2 + ⋯ + 𝑎𝑛 ) (3. 1)
𝑛 𝑛
3.7.2 Pengujian Trhroughput
Throughput adalah salah satu indikator yang dapat digunakan untuk
melakukan analisa performansi. Throughput merupakan jumlah total
transaksi yang dapat dilakukan dalam waktu tertentu atau TPS (transaction
per second).
39
Dalam melakukan pengujian throughput sistem diuji dengan
memberikan banyak request sekaligus dari client menuju server. Setiap
thread akan mengambil nilai throughput pada masing – masing percobaan.
Kemudian dilakukan perhitungan terhadap nilai rata – rata dari hasil
throughput setiap percobaan untuk setiap thread.
Adapun cara perhitungan throughput dilakukan dengan
menggunakan persamaan berikut.
𝑗𝑢𝑚𝑙𝑎ℎ 𝑟𝑒𝑞𝑢𝑒𝑠𝑡
Throughput = ( 3. 2)
𝑡𝑜𝑡𝑎𝑙 𝑤𝑎𝑘𝑡𝑢
Persamaan 3.3 merupakan persamaan yang digunakan untuk
menghitung throughput untuk satu request saja. Untuk request yang
berulang atau lebih dari satu maka digunakan persamaan berikut.
𝑗𝑢𝑚𝑙𝑎ℎ 𝑟𝑒𝑞𝑢𝑒𝑠𝑡
Throughput = 𝑟𝑎𝑡𝑎−𝑟𝑎𝑡𝑎 𝑤𝑎𝑘𝑡𝑢 𝑥 𝑗𝑢𝑚𝑙𝑎ℎ 𝑟𝑒𝑞𝑢𝑒𝑠𝑡 (3. 3)
3.7.2 Pengujian Black-Box
Black-box testing atau yang sering dikenal dengan sebutan
pengujian fungsional, yaitu sebuah metode pengujian perangkat lunak yang
berfokus pada spesifikasi fungsional dari perangkat lunak. Black-box testing
digunakan untuk menguji perangkat lunak tanpa mengetahui struktur
internal kode atau Program. (J. Tri Snadhika, 2018)
Dalam metode ini sistem akan diuji fungsionalitasnya pada setiap
use case entities yang telah ditunjukkan pada penjabaran fungsionalitas
40
dalam activity diagram untuk menganalisa kemampuan sistem dalam
menghadirkan fungsionalitas yang diharapkan.
3.7.3 Pengujian Beta
Pengujian beta atau biasa disebut beta testing dilakukan dengan
tujuan untuk mengetahui sejauh mana kualitas dari sistem yang dibangun,
apakah sudah sesuai dengan harapan atau belum.
Kuisioner diberikan kepada beberapa sample calon pengguna sistem
yang dibangun. Kuisioner terdiri dari 6 pertanyaan dan menggunakan skala
likert 1 sampai 6. Ketentuan skala untuk setiap pertanyaan dalam setiap
kuisioner adalah sebagai berikut:
 Sangat Setuju = 1
 Setuju = 2
 Cukup Setuju = 3
 Biasa saja = 4
 Kurang Setuju = 5
 Tidak setuju = 6
Adapun beberapa poin yang ingin diteliti:
 Tampilan antar muka yang user friendly
 Informasi pemakaian energi listrik dalam sistem yang mudah
dipahami
 Sistem dapat diakses dengan mudah dan cepat
41
Berdasarkan data hasil kuisioner tersebut, dapat dicari persentase
masing-masing jawaban dengan menggunakan rumus:
𝑃
𝑌 = 𝑄 × 100% (3.4)
Keterangan:
P = Banyaknya jawaban responden tiap soal
Q = Jumlah Responden
Y = Nilai persentase
42
BAB IV
HASIL DAN PEMBAHASAN
4.1 Pengujian Respon Time
4.1.1 Pada Akses Url/Index Website
Hasil pengujian respon time pada saat akses halaman url/index
sistem website dengan percobaan pada dua kondisi yang berbeda yaitu pada
saat sistem tidak menggunakan service worker dan pada saat sistem
menggunakan service worker. Dengan menggunakan software apache
Jmeter diperoleh hasil pada masing-masing percobaan dengan waktu rata-
rata yang ditunjukkan pada tabel 4.1
Tabel 4.1 Hasil Pengujian rata-rata Resppon Time Akses Halaman

url/Index
Jumlah Tidak Menggunakan Menggunakan Service
Pengujian Thread Service Worker (ms) Worker (ms)
1 1 565 312.2
2 50 565.264 474.91
3 100 577.721 469.68
4 200 585.26 592.24
5 300 820.36 679.27
6 400 819.61 661.26
7 500 1158.4 663.29
8 600 1326.04 727.94
9 700 1596.36 760.7536
43
10 800 1740.8 1026.48
11 900 2046 1160.5
12 1000 2002.87 1040.37
13 1100 2177 1103.72
14 1200 2569.56 1204.28
15 1300 2680.87 1378.63
16 1400 3405.41 1467.505
17 1500 3501.46 1617.688
Gambar 4.1 menunjukkan grafik hasil pengujian rata-rata akses halaman
url/index website berdasarkan data tabel 4.1.
Respon Time Akses Halaman url/Index

4000
Respon Time rata-rata (ms)
3500
3000
2500
2000
1500
1000
500
0
Jumlah Thread
Tanpa service worker Menggunakan service worker
Gambar 4.1 Grafik waktu rata-rata Respon Time pada akses halaman
url/index website
Berdasarkan grafik yang diperoleh dari masing-masing web pada
setiap kondisi yang diterapkan dalam proses pengujian sistem menunjukkan
44
bahwa waktu akses rata-rata (respon time) yang dibutuhkan untuk website
yang tidak menggunakan service worker dalam mengakses halaman url /
index sistem web mulai dari thread 1 sampai dengan thread 1500
menghasilkan angka yang lebih besar dibandingkan dengan website yang
menggunakan service worker.
Pada grafik pengujian rata-rata respon time akses halaman url /
index yang ditunjukkan gambar 4.1 menunjukkan bahwa sistem yang dibuat
dengan menggunakan teknologi service worker menghasilkan perbedaan
kecepatan akses yang lebih rendah (cepat) dibanding dengan sistem yang
tidak menggunakan service worker. Perbedaan waktu akses yang signifikan
terjadi ketika sistem diakses pada jumlah thread 500 hingga 1500.
Pada thread 1400 sistem yang tidak mengimplementasikan
teknologi service worker menunjukkan waktu rata-rata (respon time) yang
dibutuhkan lebih dari 3 detik dimana berdasarkan penelitian dari google
tentang Performance Website, jika website ter-load lebih dari 3 detik maka
lebih dari 50% user akan menutup atau mengabaikan website tersebut. Atau
dengan kata lain peroforma website kurang optimal. Sedangkan pada sistem
yang mengimplementasikan teknologi service worker, menunjukkan waktu
rata-rata akses dari thread 1 sampai dengan 1500 adalah kurang dari 3 detik.
4.1.2 Pada Akses Halaman Create User
Hasil pengujian respon time pada saat akses halaman create user
45
rata yang ditunjukkan pada tabel 4.2.
Tabel 4.2 Hasil Pengujian rata-rata Resppon Time Akses Halaman create
user.
Jumlah Tidak Menggunakan Menggunakan
Pengujian Thread Service Worker (ms) Service Worker (ms)
1 1 521.3 674.7
2 50 680.15 679.42
3 100 1034.5 683.77
4 200 1116 688.515
5 300 1155 657.802
6 400 1230 684.05
7 500 1412.18 741.86
8 600 1500.27 761.19
9 700 2021.48 834.98
10 800 2396.51 1044.13
11 900 2263.38 1077.42
12 1000 2396.06 1053.37
13 1100 2602.03 1357.69
14 1200 2892.78 1397.72
15 1300 3086.28 1729.78
46
16 1400 3226.87 1787.2
17 1500 3349.71 1976.34
Gambar 4.2 menunjukkan grafik hasil pengujian rata-rata akses halaman
create user berdasarkan data tabel 4.2.
Respon Time Akses Halaman create

4000
Respon Time rata-rata (ms)
3500
3000
2500
2000
1500
1000
500
0
Jumlah Thread
Gambar 4.2 Grafik waktu rata-rata Respon Time pada akses halaman
create user.
Berdasarkan grafik yang diperoleh dari masing-masing web pada
setiap kondisi yang diterapkan dalam proses pengujian sistem menunjukkan
bahwa waktu akses rata-rata (respon time) yang dibutuhkan untuk website
yang tidak menggunakan service worker dalam mengakses halaman create
user mulai dari thread 1 sampai dengan thread 1500 menghasilkan angka
yang lebih besar dibandingkan dengan website yang menggunakan service
worker.
47
Pada grafik pengujian rata-rata respon time akses halaman create
user yang ditunjukkan gambar 4.2 menunjukkan bahwa sistem yang dibuat
dengan menggunakan teknologi service worker menghasilkan perbedaan
kecepatan akses yang lebih rendah (cepat) dibanding dengan sistem yang
tidak menggunakan service worker. Perbedaan waktu yang signifikan
terjadi ketika sistem diakses pada jumlah thread 500 hingga 1500.
Pada thread 1300 sistem yang tidak mengimplementasikan
teknologi service worker menunjukkan waktu rata-rata (respon time) yang
dibutuhkan lebih dari 3 detik dimana berdasarkan penelitian dari google
tentang Performance Website, jika website ter-load lebih dari 3 detik maka
lebih dari 50% user akan menutup atau mengabaikan website tersebut. Atau
dengan kata lain peroforma website kurang optimal. Sedangkan pada sistem
yang mengimplementasikan teknologi service worker, menunjukkan waktu
rata-rata akses dari thread 1 sampai dengan 1500 adalah kurang dari 3 detik.
4.2 Pengujian Trhoughput
4.2.1 Pada Akses Url/Index Website
Hasil pengujian throughput pada saat akses halaman url/index
48
Tabel 4.3 Hasil Pengujian rata-rata Throughput Akses Halaman
url/index.
Tidak
Jumlah Menggunakan Menggunakan
Pengujian Thread Service Worker Service Worker
1 1 1.76 3.9
2 50 73.47 86.44
3 100 144.34 173.7
4 200 209 278.86
5 300 205.33 250.35
6 400 242.58 267.23
7 500 213.47 275.86
8 600 181.56 210.78
9 700 201.42 247.75
10 800 215.42 221.76
11 900 221.63 258.19
12 1000 209.92 272.73
13 1100 244 221.16
14 1200 230.92 292.26
15 1300 248 232.87
16 1400 217.6 315.43
17 1500 159.27 279.96
49
Gambar 4.3 menunjukkan grafik throughput pengujian akses halaman
url/index website berdasarkan data tabel 4.3.
Throughput Akses Halaman url / index

350
Trhoughput rata-rata (tps)
300
250
200
150
100
50
0
Jumlah Thread
Gambar 4.3 Throughput dengan dan tanpa service worker saat akses
halaman url/index.
Berdasarkan grafik yang ditunjukkan pada gambar 4.3 percobaan
pada akses url website, throughput yang dihasilkan dari website tanpa
service worker lebih kecil daripada website dengan service worker.
Meskipun perbedaannya tidak signifikan, Hal ini menunjukkan bahwa
website dengan menggunakan service worker mampu menghasilkan
throughput yang lebih tinggi, sehingga mampu melakukan proses request
yang lebih besar dalam satuan waktu.
4.2.2 Pada Akses Halaman Config (create user)
Hasil pengujian throughput pada saat akses halaman url/index
50
Tabel 4.4 Hasil Pengujian rata-rata Throughput Akses Halaman

create user.
Jumlah Tidak Menggunakan Menggunakan
Pengujian Thread Service Worker Service Worker
1 1 1.91 1.47
2 50 50.3 70.43
3 100 29.6 128.205
4 200 109 135.67
5 300 99.6 109.37
6 400 133 143.24
7 500 140.36 173.14
8 600 122.35 205.5
9 700 159.82 141.42
10 800 137.61 290.84
11 900 170 273.78
12 1000 163 209.56
13 1100 194.18 319.28
14 1200 218.66 306.43
15 1300 215.72 295.93
51
16 1400 221.16 202.04
17 1500 210.62 309
Gambar 4.4 menunjukkan grafik throughput pengujian akses halaman
create userwebsite berdasarkan data tabel 4.4.
Throughput Akses Halaman create

350
Throughput rata-rata (ts)
300
250
200
150
100
50
0
Axis Title
Tanpa Service Worker Menggunakan service worker
Gambar 4.4 Throughput dengan dan tanpa service worker saat akses
halaman create user.
Berdasarkan grafik yang ditunjukkan pada gambar 4.4 percobaan pada
akses halaman create, throughput yang dihasilkan dari website tanpa service
worker lebih kecil daripada website dengan service worker. Meskipun
perbedaannya tidak signifikan, Hal ini menunjukkan bahwa website dengan
menggunakan service worker mampu menghasilkan throughput yang lebih tinggi,
sehingga mampu melakukan proses request yang lebih besar dalam satuan waktu.
52
4.3 Pengujian Load Time Pada Web Browser
Hasil pengujian load time pada sistem yang menerapkan teknologi
service worer dan yang tidak menggunakan teknologi service worker
ditunjukkan dengan tabel dan grafik. Pengujian dilakukan dengan
mengakses halaman web dengan skenario mengakses halaman web saat
pertama kali dimana web browser belum melakukan cache terhadap
halaman web yang dibuat. Pengujian dilakukan sebanyak sepuluh kali
kemudian mengambil nilai rata-rata load time browser untuk masing-
masing web.
Tabel 4.5 Tabel Hasil Pengujian load time tanpa cache

Percobaan Menggunakan Service Tidak Menggunakan
Worker Service Worker
1 24.83 16.79
2 21.88 14.06
3 21.47 14.42
4 19.32 14.43
5 18.08 15
6 29.43 12.37
7 22.76 18.39
8 19.59 16.51
9 22.5 13.59
10 23.34 14.28
Rata-rata 22.32 14.983
Setelah dilakukan percobaan untuk akses web pertama kali sebanyak
sepuluh percobaan, kemudian dilakukan akses web dengan membiarkan
cache yang ada pada setiap browser sebanyak sepuluh kali.
53
Tabel 4.6 Tabel Hasil Pengujian load time dengan cache
Percobaan Menggunakan Service Tidak Menggunakan
Worker Service Worker
1 2.698 2.768
2 2.716 2.879
3 2.644 2.758
4 2.546 2.663
5 2.57 2.782
6 2.732 2.845
7 2.749 2.96
8 2.669 2.922
9 2.569 2.656
10 2.686 2.754
Rata-rata 2.6579 2.8005
Gambar 4.5 menunjukkan grafik pengujian load time akses halaman
index website berdasarkan nilai rata-rata tabel 4.5 dan data tabel 4.6.
Grafik Proses Browser

25
Waktu Akses Load Event (detik)
20
15
10
0
1 2 3 4 5 6 7 8 9 10 11
tanpa service worker Menggunakan service worker
Gambar 4.5 Grafik Proses Browser Load Event Time.
Untuk menegetahui pengaruh service worker terhadap performansi
sistem yang dibuat dilakukan pengambilan data untuk menganilisis
perubahan yang terjadi pada performa sistem web yang dibangun.
54
Pengambilan data dilakukan dengan menghitung jumlah resource yang
diterima oleh web browser dari server. Kemudian dilakukan perhitungan
terhadap file yang tersimpan di dalam cache pada web browser untuk
masing-masing sistem yang dibuat.
Tabel 4.7 Tabel Hasil Perhitungan File Cache Web Browser

Menggunakan Tidak Menggunakan
Parameter
Service Worker Service Worker
Resource (Mb) 3.7 2.6
Jumlah Item cahce 31 18
Kapasitas Item cache (Mb) 4 2.6
Berdasarkan data yang diperoleh untuk waktu proses web browser
yang menunjukkan rata – rata load event pada saat website pertama kali di
akses akan menghasilkan waktu yang tinggi untuk masig – masing web.
Namun untuk akses berikutnya akan memberikan nilai yang signifikan
sangat rendah dibandingkan dengan waktu akses pertama kali. Ini
disebabkan karena browser telah melakukan cache pada saat akses pertama
kali pada masing-masing sistem yang dibuat baik yang menggunakan
service worker dan yang tidak menggunakan service worker, sehingga
untuk akses berikutnya data akan di ambil melalui penyimpanan cache.
Dari data tabel 4.5 menunjukkan nilai load event time yang lebih
besar pada sistem yang menggunakan service worker saat pertama kali
diakses dibandingkan dengan sistem yang tidak menggunakan service
55
worker. Hal ini disebabkan karena web yang menggunakan service worker
melakukan cache yang lebih banyak terhadap resource yang diterima dari
server dibandingkan dengan web yang tidak menggunakan service worker
sehingga menghasilkan waktu yang lebih besar. Namun untuk akses web
yang ke dua load event time yang dibutuhkan jauh lebih cepat dibandingkan
waktu akses pertama hal ini disebabkan karena web browser akan
mengakses resource yang tersimpan di alam cache yang dilakukan oleh web
browser saat akses pertama.
Berdasarkan tabel 4.7 menunjukkan jumlah resource yang diterima
web browser lebih besar pada web yang menggunakan service worker
dibanding jumlah resource yang diterima web browser pada web yang tidak
menggunakan service worker. Hal ini disebabkan karena web yang
menggunakan service worker melakukan request yang lebih banyak
dibanding web yang tidak menggunakan service worker. Sehingga
menghasilkan jumlah item yang lebih banyak serta kapasitas item cache
yang lebih besar. Hal ini yang mempengaruhi load event time pada web
browser untuk akses pertama pada web yang menggunakan service worker
jauh lebih besar dibanding web yang tidak menggunakan service worker.
4.4 Pengujian Black-Box
1) Pengujian halaman dashboard / index
Pengujian black box pada proses halaman dashboard / index
dilakukan untuk melihat kesesuaian sistem yang dibangun dengan hasil
56
yang diharapkan pada penjabaran tabel 3.1. Hasil pengujian ditunjukkan
pada tabel 4.5.
Tabel 4.8 Tabel Hasil Pengujian Black-Box Akses Halaman index

Hasil Pengujian
Black-box
1 User masuk ke Masukan Memunculkan Pengujian
halaman index system berupa text halaman berhasil sistem
dengan menuliskan halaman url daahsboard / menampilkan
halaman url website website index website halaman index
Berdasarkan pengujian black-box akses halaman dashboard / index url,
sistem yang dibuat berhasil menampilkan seluruh informasi yang ada yaitu
menampilkan denah gedung Center Of Technlogy (COT) Fakultas Teknik
Universitas Hasanuddin dan menampilkan data penggunaan energi listrik
(KwH) dalam bentuk bar charts. Hal ini telah sesuai dengan rancangan
sistem yang diharapkan.
2) Pengujian halaman charts
Pengujian black box pada proses halaman charts dilakukan untuk
melihat kesesuaian sistem yang dibangun dengan hasil yang diharapkan
pada penjabaran tabel 3.2. Hasil pengujian ditunjukkan pada tabel 4.6.
57
Tabel 4.9 Tabel Hasil Pengujian Black-Box Akses Halaman charts
Hasil Pengujian
Black-box
1 User memilih halaman Masukan Memunculkan Pengujian
charts yang akan berupa klik data KwH Berhasil system
melakukan proses tombol pada halaman menampilkan
request ke database charts pada charts dalam data KwH pada
server kemudian server navigation bentuk data halaman charts
akan mengirim response bar chart dalam bentuk
menuju client. data chart
Berdasarkan pengujian black-box akses halaman charts, sistem yang
dibuat berhasil menampilkan informasi data penggunaan energi listrik
(Kwh) dalam bentuk bar charts untuk masing-masing lantai yang ada pada
gedung Center Of Technology (COT) Fakultas Teknik Universitas
Hasanuddin. Hal ini telah sesuai dengan rancangan sistem yang diharapkan.
3) Pengujian halaman rooms
Pengujian black box pada proses halaman rooms dilakukan untuk
58
Tabel 4.10 Tabel Hasil Pengujian Black-Box Akses Halaman rooms
Hasil Pengujian
Black-box
1 User Masukan Memunculkan form Pengujian berhasil
memilih berupa klik login system menampilkan
halaman tombol login form login
login yang pada
terdapat navigation
pada bar
navigation
bar
2 User Masukan Memunculkan Memunculkan
melakukan berupa text halaman rooms halaman rooms yang
autentikasi atau karakter yang sesuai dengan sesuai dengan ruangan
untuk pada form ruangan user user dengan
memperoleh login dengan visualisasi visualisasi status
hak akses kemudian status lampu lampu berwarna
dari sitem menekan berwarna kuning kuning bila lampu
tombol bila lampu keadaan keadaan On dan
submit On dan visualisasi visualisasi abu-abu
abu-abu bila lampu bila lampu keadaan
keadaan Off Off
59
3 User Masukan Memunculkan Pengujian berhasil
memilih berupa klik visualisasi lampu system menampilkan
lampu yang pada tombol yang berbeda visualisasi lampu yang
ingin lampu yang setelah dilakukan berbeda setelah
diaktifkan tersedia aksi apabila system dilakukan aksi apabila
atau berhasil mengirim system berhasil
dimatikan perintah ke server mengirim perintah ke
pada atau memunculkan server atau
ruangan notifikasi apabila memunculkan
sistem gagal notifikasi apabila
mengirimkan sistem gagal
perintah mengirimkan perintah
Berdasarkan pengujian black-box akses halaman rooms, sistem yang
dibuat berhasil menampilkan halaman rooms user dan mampu melakukan
aksi On / Off pada lampu ruangan yang terhubung ke sistem setelah user
berhasil melakukan login terlebih dahulu. Hal ini telah sesuai dengan
rancangan sistem yang diharapkan.
4) Pengujian halama profile
Pengujian black box pada proses halaman profile dilakukan untuk
60
Tabel 4.11 Tabel Hasil Pengujian Black-Box Akses Halaman profile
Hasil Pengujian
Black-box
1 User memilih Masukan berupa Munculkan Pengujian berhasil
halaman klik tombol informasi sistem menampilkan
profile pada profile pada akun user informasi akun user
navigation navigation bar pada halaman pada halaman profile
bar profile
2 User memilih Masukan berupa Menampilkan Pengujian berhasil
halaman klik tombol halmaan sistem menampilkan
update profile update profile update halmaan update
yang terdapat pada halaman profile profile
dalam tabel profile
profile
3 User Masukan berupa Munculkan Pengujian berhasil
melakukan text atau karakter pesan sistem menampilkan
perubahan pada form berhasil atau pesan berhasil atau
data pada update profile gagal apabila gagal apabila sistem
form update kemudian sistem berhasil atau gagal
profile menekan tombol berhasil atau mengupdate data ke
submit gagal server
mengupdate
data ke server
61
Berdasarkan pengujian black-box akses halaman profile, sistem
yang dibuat berhasil menampilkan informasi akun user dan memberikan
akses kepada user untuk melakukan perubahan data pada akun pribadi user.
Hal ini telah sesuai dengan rancangan sistem yang diharapkan.
5) Pengujian halaman config
Pengujian black box pada proses halaman config dilakukan untuk
Tabel 4.12 Tabel Hasil Pengujian Black-Box Akses Halaman config

Hasil Pengujian
Black-box
1 User memilih Masukan berupa Munculkan Pengujian berhasil
halaman config klik tombol config halaman sistem
pada pada navigation informasi menampilkan
navigation bar bar daftar user informasi daftar
pada halaman user pada halaman
config config
2 User memilih Masukan berupa Menampilkan Pengujian berhasil
aksi insert, klik tombol insert, perubahan sistem
update, atau update, atau delete informasi menampilkan
delete pada kemudian mengisi daftar user perubahan
daftar user informasi pada informasi daftar
62
pada halaman form yang tersedia, pada halaman user pada halaman
config lalu klik submit config config
Berdasarkan pengujian black-box akses halaman config, sistem yang
dibuat berhasil menampilkan informasi list akun pengguna system (user)
serta kemampuan untuk menambah, mengedit, dan menghapus user yang
dapat dioperasikan oleh admin untuk melakukan menejemen akses terhadap
user yang akan menggunakan sistem yang dibuat. Hal ini telah sesuai
dengan rancangan sistem yang diharapkan.
4.5 Pengujian Beta-Testing
Berikut ini adalah hasil persentase masing-masing jawaban yang sudah
dihitung nilainya yang terdiri dari 6 pertanyaan yang diajukan kepada dosen-dosen
dan mahasiswa fakultas teknik Univeraitas Hasanuddin.
1. Jika anda adalah seorang dosen atau pegawai civitas akademik
Universitas Hasanuddin yang memiliki ruang kerja di dalam gedung
COT Fakultas Teknik Universitas Hasanuddin, apakah anda setuju
tampilan antar muka Halaman admin yang disediakan menarik dan
mudah dipahami (user friendly)?
Tabel 4.13. Hasil pengujian kuisioner nomor 1
Pertanyaan No. Keterangan Responden Persentase (%)
1 Sangat Setuju 3 20
1 2 Setuju 7 46,7
63
3 Cukup Setuju 5 33,3
4 Biasa Saja 0 0
5 Kurang Setuju 0 0
6 Tidak Setuju 0 0
JUMLAH 15 100
Berdasarkan hasil persentase diatas maka dapat disimpulkan
sebanyak 15 responden yang mengisi kuisioner 3 atau 20% memilih Sangat
Setuju, 7 atau 46,7% memilih Setuju, dan 5 atau 33,3% memilih Cukup
Setuju, bahwa tampilan antar muka halaman admin yang disediakan
menarik dan mudah dipahami.
2. Jika anda seorang dosen atau pegawai civitas akademik Universitas
Hasanuddin yang memiliki ruang kerja di dalam gedung COT Fakultas
Teknik Universitas Hasanuddin, apakah anda setuju fitur yang
disediakan halaman admin memenuhi kebutuhan untuk melakukan
kontrol dan monitoring terhadap penggunaan energi listrik pada ruangan
anda?
1 Sangat Setuju 5 33,3
2 Setuju 8 53,4
2 3 Cukup Setuju 2 13.3
4 Biasa Saja 0 0
64
5 Kurang Setuju 0 0
6 Tidak Setuju 0 0
JUMLAH 15 100
Berdasarkan hasil presentase diatas maka dapat disimpulkan
sebanyak 15 pemilik toko yang mengisi kuisioner, 8 atau 53,4% memilih
Setuju, 2 atau 13,3% memilih Cukup Setuju, dan 5 atau 33,3% memilih
Sangat Setuju bahwa fitur yang disediakan sistem memenuhi kebutuhan
untuk melakukan kontrol dan monitoring terhadap penggunaan energi
listrik.
3. Apakah anda setuju penyajian informasi penggunaan energi listrik
dalam melakukan monitoring penggunaan listrik pada sistem yang ada
cukup mudah dipahami?
1 Sangat Setuju 5 33,3
2 Setuju 7 46,7
3 Cukup Setuju 3 20
3 4 Biasa Saja 0 0
5 Kurang Setuju 0 0
6 Tidak Setuju 0 0
JUMLAH 15 100
65
sebanyak 5 atau 33,3% memilih Sangat Setuju, 7 atau 46,7% memilih
Cukup Setuju, dan 3 atau 20% memilih Setuju bahwa informasi yang
tersedia cukup mudah dipahami.
4. Apakah anda setuju fitur yang disediakan oleh sistem dalam
memberikan kemudahan untuk melakukan pengontrolan penggunaan
energi listrik pada ruangan sudah efisien?
1 Sangat Setuju 0 0
2 Setuju 14 93,3
3 Cukup Setuju 1 6,7
4 4 Biasa Saja 0 0
5 Kurang Setuju 0 0
6 Tidak Setuju 0 0
JUMLAH 15 100
sebanyak 14 atau 93,3% Setuju, dan 1 atau 6,7% Cukup Setuju, bahwa
sistem dapat memberikan kemudahan (efisiensi) untuk melakukan
pengontrolan penggunaan energi listrik.
5. Apakah anda setuju website ini dapat digunakan dengan mudah dan
cepat (loading dari website hampir tidak ada)?
66
Tabel 4.17. Hasil Pengujian kuisioner nomor 5
1 Sangat Setuju 0 0
2 Setuju 13 86,7
3 Cukup Setuju 0 0
5 4 Biasa Saja 2 13,3
5 Kurang Setuju 0 0
6 Tidak Setuju 0 0
JUMLAH 15 100
sebanyak 13 atau 86,7% Setuju, dan 2 atau 13,3% Biasa Saja bahwa website
dapat digunakan dengan mudah dan cepat (loading dari website hampir
tidak ada).
67
BAB V
PENUTUP
5.1 KESIMPULAN
Berdasarkan hasil yang telah dilakukan dalam penelitian tugas akhir yang
berjudul implementasi teknologi progressif web application (PWA) menggunakan
framework angular pada sistem monitoring energi listrik berbasis web. Maka dapat
disimpulkan :
1. Sistem web yang dibangun memiliki fitur untuk melakukan monitoring
serta kontrolling terhadap penggunaan energi listrik secara realtime.
2. Sistem web yang dibangun berhasil diintegrasikan dengan teknologi
service worker pada MEAN stack application dalam meningkatkan
performa sistem berbasis web.
3. Berdasarkan analisa performa sistem yang dilakukan dengan
menggunakan dan tanpa menggunakan teknologi service worker
menunjukkan perbedaan yang signifikan dari data respon time, dan data
throughput. Sistem yang diintegrasikan dengan teknologi service
worker, menghasilkan respon time rata-rata yang lebih kecil, dan
throughput yang lebih besar daripada website yang tidak
mengintegrasikan teknologi service worker.
68
5.2 SARAN
Adapun saran untuk penelitian selanjutnya:
- Perlu dilakukan penelitian lebih lanjut terhadap perangkat dan software
yang berberda.
- Penelitian berikutnya mampu melakukan analisis performansi dengan
indikator yang berbeda seperti penggunaan resource pada CPU dan RAM,
dan yang lainnya.n
- Penelitian berikutnya mampu membangun sistem yang sempurna dengan
menggunakan metode yang lebih baik dalam mengintegrasikan teknologi
service worker.
69
DAFTAR PUSTAKA
A. S. Wardani. 2018. “Dukung Gaya Hidup Digital, Bagaimana Nasib Pengguna
2G Telkomsel?”. Diakses pada tanggal 27 Januari 2019, dari
https://www.liputan6.com/tekno/read/3636381/dukung-gaya-hidup-
digital-bagaimana-nasib-pengguna-2g-telkomsel.
Dinata, Irwan, dan Wahri Sunanda, 2015. "Implementasi Wireless Monitoring
Energi Listrik Berbasis Web Database".
D. Sheppard, 2017. “Beginning Progressive Web App Development Beginning
Progressive Creating a Native App Experience”.
I. Malavolta, G. Procaccianti, P. Noorland, and P. Vukmirovi, 2015 “Assessing the
Impact of Service workers on the Energy Efficiency of Progressive Web
Apps.”
J. Korva. 2016. “Developing a web application with Angular 2: Graphical editor
for Happywise’s Cove Trainer,”
J. Tri Snadhika, 2018. ”Pengujian Aplikasi dengan Metode Blackbox Testing
Boundary Value Analysis”.
Lembaga Kajian Dan Pengembangan Pendidikan, 2019. “Akreditasi Program S1
Universitas Hasanuddin”. Diakses pada 30 Juni 2019, dari
http://lkpp.unhas.ac.id/pages-id-7-akreditasi-program-s1.xhtml.
70
M. Gaunt. 2018, “Service Workers: An Introduction”. Diakses pada 15 Juni 2019,
dari https://developers.google.com/web/fundamentals/primers/service-
workers/.
N. Ninaad, Singh. Pooja, 2017. “The Mean Stack”.
P. Dariye. 2018. “A Case for Progressive Web Applications” Diakses pada tanggal
15 Juni 2019, dari https://medium.com/the-andela-way/a-case-for-
progressive-web-applications-in-2017-dafb5957e783.
Pranata, Reindy Gerian, dan Arif Gunawan, dan Muhammad Diono, 2015. "Sistem
Kontroling dan Monitoring Beban Listrik Berbasis Mikrokontroller Via
LAN".
R. Novik. 2015. “The Analysis of Offline-capable Web Application Solution and
its Implementation Based on Whiteboard Application,” TALLINN
UNIVERSITY OF TECHNOLOGY, Estonia
S. Kavya, 2015. “A Study On MongoDb Database”.
V. Karpagam, 2017. “PERFORMANCE ENHANCEMENT OF WEBPAGE
USING PROGRESSIVE WEB APP FEATURES,” vol. 4, no. 3, pp. 97–
103.
W. T. Tamire, 2016. “HTML5 and Its Capability to Develop Offline Web
Applications”.
Z. Tahir, 2016. “The Study on Automated HTML5 Offline Services to Overcome
Low Reliability of Network Connectivity for Web-based The Study on
71
Automated HTML5 Offline Services to Overcome Low Reliability of
Network Connectivity for Web-based Decision Support System Applica,”
no. September.
Z. Tahir, 2015 . “The Analysis of Automated HTML5 Offline Services ( AHOS ),”
pp. 62–66.
72
LAMPIRAN
LAMPIRAN 1
Konfigurasi Service worker
{
"index": "/index.html",
"assetGroups": [
{
"name": "app-components",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "asset",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
],
73
"dataGroups": [{
"name": "base-api",
"urls": [
"/"
],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 100,
"maxAge": "10s",
"timeout": "5s"
}
}
]
}
74
LAMPIRAN 2
Routing SPA Angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
// Import Containers
import { DefaultLayoutComponent } from './containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { _logOutComponent } from './_logOut.component';
export const routes: Routes = [

{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: '404',
component: P404Component,
data: {
title: 'Page 404'
}
},
{
path: '500',
component: P500Component,
data: {
75
title: 'Page 500'
}
},
{
path: 'logout',
component: _logOutComponent,
data: {
title: 'Page 500'
}
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'charts',
loadChildren: './views/chartjs/chartjs.module#ChartJSModule',
},
{
path: 'dashboard',
loadChildren: './views/dashboard/dashboard.module#DashboardModule',
},
{
path:'floor1',
loadChildren:'./views/floor/floor1/floor1.module#Floor1Module',
},
76
{
path:'floor2',
},
{
path:'floor3',
},
{
path: 'user',
loadChildren: './views/user/user.module#UserModule',
canActivate: [AuthGuard]
},
{
path: 'config',
loadChildren: './views/config/config.module#ConfigModule',
canActivate: [AuthGuard]
},
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
77
LAMPIRAN 3
Angular Service untuk mengatur business logic pada halaman rooms
import { Injectable } from '@angular/core';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Data } from '../models/data.model';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root' })
export class DataService {
private _dataUri = "http://localhost:3600/datahandler";
constructor(private http: HttpClient) { }
getRoomById(room){
return this.http.get(`${this._dataUri}/fetchroom/${room}`)
}
updateData(id, status):Observable<any>{
const updateData = {
status : status
}
return this.http.post<any>(`${this._dataUri}/update/${id}`, updateData)
}
addCurrentState(node, pin, status):Observable<any>{
const newData = {
node : node,
pin : pin,
status : status
};
return this.http.post<any>(`${this._dataUri}/thingspeakPost`, newData)
}
}
78
LAMPIRAN 4
Angular Service untuk mengatur business logic session, authentication, dan
CRUD user, pada halaman profile dan config.
import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Injectable({
providedIn: 'root' })
export class AuthService {
private _uri = "https://eng.unhas.ac.id:3600/auth"
constructor(private http: HttpClient) { }
form: FormGroup = new FormGroup({

$key: new FormControl(null),
username: new FormControl('', Validators.required),
password: new FormControl('', [Validators.required, Validators.minLength(8)]),
email: new FormControl('', Validators.email),
nama_lengkap: new FormControl(''),
gender: new FormControl('male'),
room_id: new FormControl(''),
level: new FormControl('', Validators.required),
});
editForm: FormGroup = new FormGroup({

79
nama_lengkap: new FormControl(''),
room_id: new FormControl(''),
level: new FormControl('', Validators.required),
/*5cd121ef39bbb37c33e1faec*/
});
userForm: FormGroup = new FormGroup({

nama_lengkap: new FormControl('', Validators.required),
})
initializeUserForm(){
this.userForm.setValue({
$key: null,
username: '',
password: '',
email: '',
nama_lengkap: '',
gender: 'male'
})
}
initializeFormGroup() {
this.form.setValue({
80
$key: null,
username: '',
password: '',
email: '',
nama_lengkap: '',
gender: 'male',
room_id: '',
level: ''
});
}
/* | router Business Section */

registerUser(username, password, email, nama_lengkap, gender, room_id, level){
const addDataUser = {
username : username,
password : password,
email : email,
nama_lengkap : nama_lengkap,
gender : gender,
room_id: room_id,
level : level
};
return this.http.post(`${this._uri}/addUser`, addDataUser);
}
loginUser(userData){
return this.http.post<any>(`${this._uri}/login`, userData)
}
81
logoutUser(id){
return this.http.get(`${this._uri}/logout/${id}`);
}
updateUser(userData){
return this.http.post<any>(`${this._uri}/updateUser`, userData)
}
getAllUser(){
return this.http.get(`${this._uri}/getAllUser`);
}
getAllRooms(){
return this.http.get(`${this._uri}/getAllRooms`);
}
getEditUser(id){
return this.http.get(`${this._uri}/getEditUser/${id}`);
}
updateData(id, username, password, nama_lengkap, email, gender, room_id, level
){
const updateData = {
username : username,
password : password,
nama_lengkap : nama_lengkap,
email : email,
gender : gender,
room_id: room_id,
level : level
};
return this.http.post(`${this._uri}/updateUser/${id}`, updateData);
}
82
deleteData(id){
return this.http.get(`${this._uri}/deleteUser/${id}`);
}
/* | check User Role Section */

loggedIn(){
return !!localStorage.getItem('token')
}
adminLoggedIn(){
return !!localStorage.getItem('tokenSa')
}
}
83
LAMPIRAN 5
Halaman Container
import { Component, Input, OnInit } from '@angular/core';

import { navItems } from './../../_nav';
import { navItems2 } from './../../_nav2';
import { navItems3 } from './../../_nav3';
import { AuthService } from '../../services/auth.service';
import { Router} from '@angular/router';
import * as jwt_decode from 'jwt-decode';
@Component({
selector: 'app-dashboard',
templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent implements OnInit {
public navItems = navItems;
public navItems2 = navItems2;
public navItems3 = navItems3;
public sidebarMinimized = true;
private changes: MutationObserver;
public element: HTMLElement = document.body;
loginUserData = {};
dataObjek$;
tokenObjek$;
constructor(public _authService: AuthService, private _router: Router) {\

this.changes = new MutationObserver((mutations) => {
84
this.sidebarMinimized=document.body.classList.contains('sidebar-
minimized')
});
this.changes.observe(<Element>this.element, {
attributes: true
});
}
ngOnInit(){
if(this._authService.loggedIn()){
let token = localStorage.getItem("token");
this.tokenString(token);
}
}
loginUser(){
this._authService.loginUser(this.loginUserData)
.subscribe(
res => {
let tokenResult = res.token; //mengambil token dari .send({token})
this.tokenString(tokenResult);
},
err => console.log(err),
)
}
logout(id){
this._authService.logoutUser(id).subscribe(()=>{
})
localStorage.clear();
this._router.navigate(['/dashboard'])
85
}
tokenString(tokenResult){
let decoded = jwt_decode(tokenResult);

this.tokenObjek$ = decoded;
let tokenStringify = JSON.stringify(this.tokenObjek$.result);
let tokenParser = JSON.parse(tokenStringify);
this.dataObjek$ = tokenParser;
if(this._authService.loggedIn() != true){
let floor = tokenParser[0].room_id.lantai;
let room = tokenParser[0].room_id.ruangan;
let level = tokenParser[0].level;
this.dataObjek$ = tokenParser;
if (level == 'sa') {
localStorage.setItem('tokenSa', tokenResult);
this._router.navigate([`/config`]);
}else{
localStorage.setItem('token', tokenResult)
this._router.navigate([`/floor${floor}/${room}/${room}`]);
}
}
};
}
86
LAMPIRAN 6
Halaman Charts untuk menampilkan data penggunaan energy listrik secara
realtime.
import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';
import { DataService } from '../../services/data.service';
import { Observable } from 'rxjs/observable';
import { ChartOptions, ChartType, ChartDataSets, Chart } from 'chart.js';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import io from 'socket.io-client';

const socket = io('/');
@Component({
templateUrl: 'chartjs.component.html'
})
export class ChartJSComponent implements OnInit{
chart;
chart1;
constructor(){}
ngOnInit(){
socket.on('data1', (res) => {
this.updateChartData(this.chart, res, 0);
})
87
})

})
this.chart = new Chart('ground', {

type: 'bar',
options: {
responsive: true,
title: {
display: true,
text: 'Total Energy Consumption / Kwh'
},
},
data: {
labels: [],
datasets: [
{
/*[dataSetIndex]=0*/
type: 'bar',
label: 'Lampu 1',
data: [],
backgroundColor: 'rgba(255,0,255,0.4)',
borderColor: 'rgba(255,0,255,0.4)',
fill: true,
},
{
88
type: 'bar',
label:'AC',
data: [],
backgroundColor: 'rgba(86,235,160,1)',
fill: false,
},
{
type: 'bar',
label:'Lampu 2',
data: [],
fill: false,
}
]
}
});
this.chart1 = new Chart('floor1', {

type: 'bar',
options: {
responsive: true,
title: {
display: true,
text: 'Total Energy Consumption / Kwh'
},
89
},
data: {
labels: [],
datasets: [
{
type: 'bar',
label: 'Lampu 1',
data: [],
fill: true,
},
{
type: 'bar',
label:'AC',
data: [],
backgroundColor: 'rgba(86,235,160,1)',
fill: false,
},
{
type: 'bar',
label:'Lampu 2',
data: [],
90
fill: false,
}
]
}
});
let options = {
// aspectRatio: 1,
// legend: false,
tooltips: false,
elements: {
point: {
borderWidth: function (context) {
return Math.min(Math.max(1, context.datasetIndex + 1), 8);
},
hoverBackgroundColor: 'transparent',
hoverBorderColor: function (context) {
return "red";
},
hoverBorderWidth: function (context) {
var value = context.dataset.data[context.dataIndex];
return Math.round(8 * value.v / 1000);
},
radius: function (context) {
var value = context.dataset.data[context.dataIndex];
var size = context.chart.width;
var base = Math.abs(value.v) / 1000;
return (size / 24) * base;
91
}
}
}
};
}
updateChartData(chart, result, dataSetIndex){

let dataArus = [];
let dataLabel = [];
result.forEach(function(key){
let getTime = key._id;
let getArus = key.data;
let label = getTime.substring(11,20);
let countKwh = (getArus*360)/1000; //arus x tegangan(dalam hitungan 1
jam) bagi 1000(kwh)
let arus = countKwh.toFixed(2);
dataArus.push(arus);
dataLabel.push(label);
})
chart.data.datasets[dataSetIndex].data = dataArus;
chart.data.labels = dataLabel;
chart.update();
}
}
92
LAMPIRAN 7
Halaman rooms untuk melakukan controlling penggunaan energi listrik pada
ruangan.
import { Component, OnInit, OnDestroy } from '@angular/core';

import { Router, ActivatedRoute } from '@angular/router';
import { MatSnackBar } from '@angular/material';
import { AuthService } from '../../../services/auth.service';

import { DataService } from '../../../services/data.service';
import { Data } from '../../../models/data.model';
@Component({
templateUrl: 'co_1f_4.component.html'
})
export class Co_1f_4Component implements OnInit, OnDestroy {
storeToLocal: any = {};

datastatus : any = {};
statusParams : any = {};
storeCommandLocal: any = {};
interval : any ;
constructor(private _authService : AuthService, private _dataService:

DataService,
private _router: Router, private _activeRoute: ActivatedRoute, private
snackBar: MatSnackBar) {
}
ngOnInit(){
93
this.fetchDataItem();
// interval length in miliseconds
this.interval = setInterval(() => {
this.sendOfflineData();
}, 10000);
}
sendOfflineData(){
let state = JSON.parse(localStorage.getItem("offline"));
let command = JSON.parse(localStorage.getItem("offlineCommand"));
console.log("state offline: ", state);
console.log("command offline: ", command);
if (state || command) {
// console.log("ada state offline");
let id = state[0]._id;
let statusId = state[0].status;
let node_id = command[0].node_id;
let pin_id = command[0].pin_id;
let status_id = command[0].status;
this._dataService.updateData(id, statusId).subscribe((res) =>{

res = console.log(res);
localStorage.removeItem('offline');
}, (error)=>{
error = console.log("ada state offline");
})
this._dataService.addCurrentState(node_id, pin_id, status_id).subscribe((res)

=>{
94
// content.setAttribute('class',"");
console.log("item_Off");
localStorage.removeItem('offlineCommand');
}, (error)=>{
error = console.log("ada command offline");
})
}else{
console.log("tidak ada state & command offline");
}
}
fetchDataItem(){
this._activeRoute.params.subscribe(params => {
this._dataService.getRoomById(params.room).subscribe((res) => {
localStorage.setItem("info", JSON.stringify(res));
this.nodeStatus(res)
}, (bad) => {
let local = localStorage.getItem('info');
let getInfo = JSON.parse(local);
this.nodeStatus(getInfo);
})
});
}
nodeStatus(params){
// get data using parameters binding
95
let content1 = document.getElementById("lampOne");
let content2 = document.getElementById("lampTwo");
let content3 = document.getElementById("ac");
if (params[0].status == "0"){
content1.setAttribute('class','active');
// console.log("lamp_1_On");
}else{
content1.setAttribute('class',"");
// console.log("lamp_1_Off")
};
// console.log("lamp_2_On");
}else{
// console.log("lamp_2_Off")
};
// console.log("Ac_On");
}else{
// console.log("Ac_Off")
};
}
96
activateItem(array, attr){
if(this._authService.loggedIn() || this._authService.adminLoggedIn()){
let local = localStorage.getItem('info');
let getInfo = JSON.parse(local);
let id = getInfo[`${array}`]._id;
let node_id = getInfo[`${array}`].node_id;
let pin_id = getInfo[`${array}`].pin_id;
/*change the state*/

var content = document.getElementById(attr);
if (content.getAttribute('class')==('active')) {
this.statusParams = getInfo[`${array}`].status = "1";
}else{
this.statusParams = getInfo[`${array}`].status = "0";
}
/*send changes data to the server*/

this._dataService.updateData(id, this.statusParams).subscribe((res) =>{
}, (bad)=>{
this.storeToLocal = [{_id: id, status: this.statusParams, attr: content }];
console.log(this.storeToLocal);
localStorage.setItem('offline', JSON.stringify(this.storeToLocal));
})
this._dataService.addCurrentState(node_id, pin_id,
this.statusParams).subscribe((res) =>{
content.setAttribute('class',"");
97
console.log("item_Off")
}, (bad)=>{
this.storeCommandLocal = [{node_id: node_id, pin_id: pin_id, status:
this.statusParams }];
console.log(this.storeCommandLocal);
localStorage.setItem('offlineCommand',
JSON.stringify(this.storeCommandLocal));
this.snackBar.open('Action failed, check your internet connection', 'OK', {
duration: 3000
});
})
};
}
ngOnDestroy(){
if (this.interval) {
clearInterval(this.interval);
}
}
98
LAMPIRAN 8
Halaman profile untuk menampilkan informasi user dan mengupdate data
user saat user telah login.
import { Component, OnInit, ViewChild } from '@angular/core';

import { ModalDirective } from 'ngx-bootstrap/modal';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as jwt_decode from 'jwt-decode';
@Component({
templateUrl: 'user.component.html' })
export class UserComponent implements OnInit {
tokenObjek$;
dataObjek$;
constructor(public _authService: AuthService, private _router: Router, private
fb:FormBuilder, private snackBar: MatSnackBar,) { }
ngOnInit(){
if (this._authService.adminLoggedIn()) {
let token = localStorage.getItem("tokenSa")
this.getToken(token);
}else{
let token = localStorage.getItem("token")
this.getToken(token);
}
}
getToken(token){
let decoded = jwt_decode(token)
99
this.tokenObjek$ = decoded
let tokenStringify = JSON.stringify(this.tokenObjek$.result)
let tokenParser = JSON.parse(tokenStringify)
this.dataObjek$ = tokenParser
this._authService.userForm.get('username').setValue(this.dataObjek$[0].username
);
this._authService.userForm.get('password').setValue(this.dataObjek$[0].password
);
this._authService.userForm.get('nama_lengkap').setValue(this.dataObjek$[0].nam
a_lengkap);
this._authService.userForm.get('email').setValue(this.dataObjek$[0].email);
this._authService.userForm.get('gender').setValue(this.dataObjek$[0].gender);
}
onUpdateUser(username, password, nama_lengkap, email, gender){
this._authService.updateData(this.dataObjek$[0]._id, username, password,
nama_lengkap, email, gender, this.dataObjek$[0].room_id,
this.dataObjek$[0].level, ).subscribe(() => {
this.snackBar.open('User Updated Succesfully', 'OK', {
duration: 3000
});
this._router.navigate([`/user`]);
});
}
onClear(){
this._authService.userForm.reset();
this._authService.initializeUserForm();
}
}
100
LAMPIRAN 9
Halaman create user level admin
@Component({
templateUrl: './create.component.html' })
export class CreateComponent implements OnInit {
rooms: any =[];
constructor(public _authService : AuthService, private _router: Router, private
route: ActivatedRoute, private snackBar: MatSnackBar, private fb:FormBuilder) {
}
ngOnInit() {
this._authService.getAllRooms().subscribe((res =>{
this.rooms = res;
console.log(this.rooms);
}))
}
addDataUser(username, password, email, nama_lengkap, gender, room_id,
level){
localStorage.removeItem('userData');
this._authService.registerUser(username, password, email, nama_lengkap,
gender, room_id, level).subscribe(() =>{
this.snackBar.open('User Created', 'OK', {
duration: 3000
});
this._router.navigate(['/config']); })
}
}
101
LAMPIRAN 10
Halaman config untuk menampilkan daftar user
import { User } from './../../models/user.model';
@Component({
templateUrl: 'config.component.html'
})
export class ConfigComponent implements OnInit {
user : User[];
dataUser$
displayedColumns = ['nama_lengkap', 'username', 'ruangan', 'last_login',
'level', 'actions' ];
constructor(public _authService: AuthService, private _router: Router, private

snackBar: MatSnackBar) { }
ngOnInit(){
this.fetchDataUser();
}
fetchDataUser(){
let getUserData = localStorage.getItem('userData');
if (getUserData) {
let userData = JSON.parse(getUserData);
102
this.user = userData;
console.log('data dari local');
console.log(userData);
}else{
this._authService.getAllUser().subscribe((data: User[]) => {
this.user = data;
let userStringify = JSON.stringify(this.user);
localStorage.setItem("userData", userStringify );
console.log('data dari server')
console.log(this.user)
});
}
}
editDataUser(id){
this._router.navigate([`/config/edit/${id}`]);
}
deleteDataUser(id){
this._authService.deleteData(id).subscribe(() =>{
this.snackBar.open('Selected User Deleted', 'OK', {
duration: 3000
});
localStorage.removeItem('userData');
this.fetchDataUser();
});
}
}
103
LAMPIRAN 11
Halaman Update User

import { User } from './../../models/user.model';
@Component({
templateUrl: 'edit.component.html'
})
export class EditComponent implements OnInit {
id: String;
userData : User[];
user: any = {};
rooms: any =[];
constructor(public _authService : AuthService, private _router: Router,
private route: ActivatedRoute, private snackBar: MatSnackBar, private
fb:FormBuilder){ }
ngOnInit(){
this.route.params.subscribe(params => {
this.id=params.id;
this._authService.getEditUser(this.id).subscribe(res => {
this.user = res;
this._authService.editForm.get('username').setValue(this.user.username);
this._authService.editForm.get('password').setValue(this.user.password);
this._authService.editForm.get('nama_lengkap').setValue(this.user.nama_l
engkap);
this._authService.editForm.get('email').setValue(this.user.email);
104
this._authService.editForm.get('gender').setValue(this.user.gender);
this._authService.editForm.get('room_id').setValue(this.user.room_id);
this._authService.editForm.get('level').setValue(this.user.level);
});
});
this._authService.getAllRooms().subscribe((res =>{
this.rooms = res;
console.log(this.rooms);
})
);
}
updateDataUser(username, password, nama_lengkap, email, gender,
room_id, level){
localStorage.removeItem("userData");
this._authService.updateData(this.id, username, password, nama_lengkap,
email, gender, room_id, level).subscribe(() => {
this.snackBar.open('User Updated Succesfully', 'OK', {
duration: 3000
});
this._router.navigate([`/config`]);
});
}
onClear(){
this._authService.editForm.reset();
this._authService.initializeFormGroup();
}
}
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

Implementasi Teknologi Progressif Web Application (Pwa) Menggunakan Framework Angular Pada Sistem Monitoring Energi Listrik Berbasis Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Implementasi Teknologi Progressif Web Application (Pwa) Menggunakan Framework Angular Pada Sistem Monitoring Energi Listrik Berbasis Web

Diunggah oleh

Hak Cipta:

Format Tersedia

IMPLEMENTASI TEKNOLOGI PROGRESSIF WEB APPLICATION

(PWA) MENGGUNAKAN FRAMEWORK ANGULAR PADA SISTEM

Disusun dalam rangka memenuhi salah satu persyaratan

Untuk menyelesaikan program Strata-1 Departemen Teknik Informatika

Fakultas Teknik Universitas Hasanuddin

ABDILLAH SATARI RAHIM

DEPARTEMEN TEKNIK INFORMATIKA

Penggunaan energi listrik pada gedung Center Of Technology (COT)

Assalamu’alaikum Warahmatullahi Wabarakatuh.

judul “Implementasi Teknologi Progressif Web Application (Pwa) Dalam

Membangun Sistem Menejemen Energi Listrik Menggunakan Framework

jenjang Strata-1 pada Departemen Teknik Informatika Fakultas Teknik Universitas

Dalam penyusunan penelitian ini disajikan hasil penelitian terkait judul

jurnal penelitian, prosiding pada seminar-seminar nasional/internasional, buku

maupun dari situs-situs di internet.

kesempatan ini penulis menyampaikan ucapan terima kasih sedalam-dalamnya

pembuatan program hingga penulisan laporan skripsi ini.

senantiasa memberikan kekuatan, motivasi, bimbingan moral, materi,

kepercayaan dan kasih sayang yang tidak terbatas kepada penulis.

banyak memberikan bimbingan, motivasi dan masukan yang bermanfaat

banyak memberikan bimbingan, motivasi dan masukan yang bermanfaat

Informatika Fakultas Teknik Universitas Hasanuddin atas bantuan dan

bimbingannya selama masa perkuliahan penulis.

7) Bapak A. Ais Prayogi Alimuddin, S.T., M.Eng., selaku dosen pembimbing

akademik yang telah memberikan bimbingan selama masa perkuliahan

Teknik Informatika Fakultas Teknik Universitas Hasanuddin yang telah

membantu kelancaran penyelesaian tugas akhir penulis.

sejak masa perkuliahan sampai dengan penyelesaian tugas akhir ini.

Winda Astiyanti A, Aura Evadne K, Syahdan Edy Murad, Muh. Rahmatullah,

penyelesaian tugas akhir ini.

11) Para responden yang bersedia meluangkan waktunya untuk berpartisipasi

sebagai bagian penting dalam kesuksesan penelitian ini.

banyak meluangkan tenaga, waktu dan pikiran selama penyusunan laporan

tugas akhir ini.

Gowa, 6 Agustus 2019

HALAMAN JUDUL ................................................................................................i

LEMBAR PENGESAHAN SKRIPSI ................... Error! Bookmark not defined.

ABSTRAK ............................................................................................................. iii

KATA PENGANTAR ............................................................................................iv

DAFTAR ISI ......................................................................................................... vii

DAFTAR GAMBAR .............................................................................................. x

DAFTAR TABEL ...................................................................................................xi

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

1.2 Rumusan Masalah ............................................................................................ 4

1.3 Tujuan Penelitian ............................................................................................. 4

1.4 Manfaat Penelitian ........................................................................................... 5

1.5 Batasan Masalah Penelitian .............................................................................. 5

1.6 Sistematika Penulisan....................................................................................... 6

TINJAUAN PUSTAKA .......................................................................................... 8

2.1 Progressive Web Apps (PWA) ......................................................................... 8

2.1.1 Service Worker API ............................................................................................. 9

2.4 Aplikasi Web Offline ..................................................................................... 16

2.4.1 Teknologi Aplikasi Web Offline ........................................................................ 16

BAB III .................................................................................................................. 19

METODOLOGI PENELITIAN ............................................................................. 19

3.1 Lokasi Dan Waktu Penelitian ......................................................................... 19

3.2 Instrumen Penelitian....................................................................................... 19

3.3 Prosedur Penelitian......................................................................................... 20

3.4 Framework Dan Gambaran Umum Sistem ..................................................... 22

3.4.1 Use Case Diagram.............................................................................................. 25

3.6 Activity Diagram ............................................................................................ 30

3.7 Skenario Pengujian......................................................................................... 38

3.7.1 Pengujian Respon Time ..................................................................................... 39