BAB 4 IMPLEMENTASI DAN EVALUASI
4.1 Spesifikasi Aplikasi Untuk pengimplementasian aplikasi mobile yang berbasis sistem operasi Android dan didukung oleh web, dibutuhkan perangkat lunak dan perangkat keras dengan spesifikasi sebagai berikut:
4.1.1 Spesifikasi Perangkat Lunak Berikut ini adalah spesifikasi perangkat lunak yang diperlukan untuk implementasi aplikasi mobile:
4.1.1.1 Aplikasi Client Spesifikasi perangkat lunak minimum untuk aplikasi client meliputi penggunaan sistem operasi Android 2.2.1 (Froyo) karena berdasarkan hasil kuisioner, sistem operasi ini masih cukup banyak penggunanya. Adapun perangkat lunak yang direkomendasikan untuk customer adalah sistem operasi Android 4.0.1 (Ice Cream Sandwich) karena berdasarkan hasil kuisioner, sistem operasi ini memiliki pengguna paling banyak. Oleh karena itu, aplikasi ini dibangun dan dikembangkan di Android 4.0.1 (Ice Cream Sandwich).
151
152 4.1.1.2 Aplikasi Server Berikut ini adalah kebutuhan perangkat lunak yang disarankan untuk aplikasi Server: •
Operating System : Microsoft Windows XP Mac OS Linux.
•
Development Tools: Xampp 1.6.8
•
Browser
: Firefox 3.5+ Internet Explorer 7.0+ Safari 3.0+ Opera 10.5+ Chrome 4.1+
4.1.1.3 Aplikasi Admin, Instansi, dan Customer Web Berikut ini adalah kebutuhan perangkat lunak yang disarankan untuk aplikasi admin, instansi, dan customer web: 1. Operating System : 1. Microsoft Windows XP 2. Mac OS 3.
Linux
153 •
Browser
: Firefox 3.5+ Internet Explorer 7.0+ Safari 3.0+ Opera 10.5+ Chrome 4.1+
4.1.2 Spesifikasi Perangkat Keras Berikut ini adalah spesifikasi perangkat keras yang dibutuhkan dalam implementasi:
4.1.2.1 Aplikasi Client Spesifikasi perangkat keras yang disarankan untuk aplikasi client meliputi spesifikasi mobile device sebagai berikut: 1. Processor Qualcomm MSM7227 800MHz ARM 11. 2. Layar touch screen dengan dimensi sebesar 320 x 480 pixel. 3. Random Access Memory (RAM) sebesar 278 MB. 4. Memori penyimpanan sebesar 158 MB. 5. Mendukung koneksi Quad-band (EDGE/GPRS).
4.1.2.2 Aplikasi Server Spesifikasi perangkat keras yang disarankan untuk aplikasi Server adalah sebagai berikut: 1. Harddisk dengan kapasitas 10 GB.
154 2. RAM dengan ukuran 512 MB. 3. Video Graphics Card 128 MB. 4. Processor 1.8 GHz.
4.1.2.3 Aplikasi Admin, Instansi, dan Customer Web Spesifikasi perangkat keras yang disarankan untuk aplikasi admin, instansi, dan customer web adalah sebagai berikut: 1. Harddisk dengan kapasitas 10 GB. 2. RAM dengan ukuran 512 GB. 3. Video Graphics Card 128 MB. 4. Processor 1.8 GHz.
4.2
Prosedur Operasional Sistem pengambilan nomor antrian terdiri dari beberapa aplikasi yang dapat
digunakan oleh customer, head officer, customer service dan admin. Untuk menjalankan aplikasi customer mobile dibutuhkan sebuah smartphone yang menjalankan sistem operasi Android dengan versi 2.2 keatas, sedangkan untuk menjalankan aplikasi head officer, customer service, admin, dan customer web dibutuhkan aplikasi browser untuk menjalankan website.
4.3 Petunjuk Instalasi Berikut ini adalah petunjuk untuk instalasi aplikasi pada Android dan Server:
155 4.3.1
Instalasi Aplikasi Customer Android Langkah-langkah instalasi aplikasi mobile pada Android adalah
sebagai berikut: 1. Copy file “CSMS.apk” ke dalam memory card. 2. Buka file manager, kemudian tap file “CSMS.apk” 3. Akan muncul request permission pada layar. Lalu pilih “install” untuk instalasi. 4.
Gambar 4.1. Request Permission
5. Tunggu hingga instalasi selesai.
156
Gambar 4.2 Proses Instalasi
Gambar 4.3 Instalasi Selesai
157 4.3.2
Instalasi Aplikasi Server Langkah-langkah untuk instalasi XAMPP pada server adalah sebagai
berikut: 1. Klik dua kali instaler XAMPP. 2. Pilih “Ok” untuk pilihan bahasa Inggris.
Gambar 4.4 Langkah Pertama Instalasi Pada Server
3. Klik “Next” pada jendela Setup Wizard yang muncul
Gambar 4.5 Langkah Kedua Instalasi Pada Server
158 4. Pilih lokasi folder XAMPP.
Gambar 4.6 Langkah Ketiga Instalasi Pada Server
5. Klik “Install” untuk memulai proses instalasi XAMPP
Gambar 4.7 Langkah Keempat Instalasi Pada Server
159 6. Tunggu beberapa menit sampai proses instalasi XAMPP selesai.
Gambar 4.8 Langkah Kelima Instalasi Pada Server
7. Klik “Finish” setelah XAMPP selesai di instal.
Gambar 4.9 Langkah Keenam Instalasi Pada Server
160 8. Jalankan XAMPP Control Panel dengan menekan tombol “Yes”.
Gambar 4.10 Langkah Ketujuh Instalasi Pada Server
9. Klik “Start” pada masing-masing Apache dan MySQL sehingga muncul tanda running untuk keduanya. Kini PC telah menjadi Local Web Server.
Gambar 4.11 Langkah Kedelapan Instalasi Pada Server
161 10. Jalankan browser dan
ketik URL “localhost” untuk melakukan
berbagai administrasi untuk server.
Gambar 4.12 Langkah Kesembilan Instalasi Pada Server
11. Buat database dengan nama “ csms_db” lalu klik “create”.
Gambar 4.13 Langkah Kesepuluh Instalasi Pada Server
162 12. Pada tab import database, browse database yang ingin di import ke csms_db, lalu klik “Go”.
Gambar 4.14 Langkah Kesebelas Instalasi Pada Server
13. Jika berhasil, akan muncul pesan import has been successfully finished, 24 queries executed.
Gambar 4.15 Langkah Kedua Belas Instalasi Pada Server
163 4.4
Prosedur Penggunaan Berikut ini adalah prosedur yang dapat dilakukan oleh admin, head officer,
customer service, dan customer, yaitu:
4.4.1
Aplikasi Web Aplikasi web merupakan aplikasi yang terdapat pada web dan dapat
diakses oleh admin, head officer, customer service, dan customer web. Berikut ini adalah tampilan layar aplikasi web:
4.4.1.1 Tampilan Layar Web Login Aplikasi web akan menampilkan layar Login yang dapat diakses oleh admin, head officer, dan customer service. TextBox UserID berguna untuk memasukkan ID user, dan password untuk mengisi kata sandi. Jika keduanya telah diisi, maka klik “Submit” untuk masuk ke dalam sistem.
Gambar 4.16 Tampilan Layar Web Login
164 4.4.1.2 Tampilan Layar Home Admin Tampilan ini hanya dapat diakses oleh admin. Setelah admin melakukan proses login, maka akan muncul layar Home Admin. Dalam layar ini terdapat button “register the instance and the head officer” sehingga admin bisa meregistrasi instansi dan head officer. Serta terdapat tombol “Log Out” untuk keluar dari sistem.
Gambar 4.17 Tampilan Layar Home Admin
4.4.1.3 Tampilan Layar Register The Instance Setelah admin menekan button “register the instance and the head officer”, maka akan muncul tampilan layar Register The Instance yang hanya dapat diakses oleh admin. Admin dapat mengisi data sesuai dengan data instansi yang akan didaftarkan dan juga meregistrasi head officer ke dalam sistem. Jika semua keterangan telah diisi, maka admin dapat menekan button “Submit” untuk memastikan semua data telah diisi
165 dan menyimpan data. Pada layar ini terdapat pula button “Back to Home” untuk kembali ke layar Home Admin dan button “Log Out” untuk keluar dari sistem.
Gambar 4.18 Tampilan Layar Register The Instance
4.4.1.4
Tampilan Layar Registration Instance Successful Setelah admin menekan button “Submit” maka sistem akan
mengecek apabila registrasi sukses atau tidak, apabila proses registrasi sukses maka admin akan menerima notifikasi yang berisi nama instansi, ID instansi, nama Head Officer, ID Head Officer, dan password Head Officer. Admin harus meng-copy dan menyimpan data tersebut untuk digunakan oleh Head Officer pada saat melakukan proses login. Pada saat admin mengklik button “Ok” maka akan kembali ke layar Admin Home.
166
Gambar 4.19 Tampilan Layar Registration Instance Success
4.4.1.5
Tampilan Layar Registration Instance Already Exist Apabila pada saat admin melakukan proses registrasi pada sebuah
instansi yang telah terdaftar sebelumnya, maka pada saat admin menekan button “Submit” maka akan terdapat notifikasi bahwa nama instansi yang ingin didaftarkan telah terdaftar.
Gambar 4.20 Tampilan Layar Registration Instance Already Exist
167 4.4.1.6
Tampilan Layar Head Officer Home Tampilan ini hanya dapat diakses oleh head officer. Setelah head
officer melakukan proses log in, maka akan muncul layar Head Officer Home. Dalam layar ini terdapat button “register the customer service” sehingga head officer bisa meregistrasi customer service. Serta terdapat tombol “Log Out” untuk keluar dari sistem.
Gambar 4.21 Tampilan Layar Head Officer Home
4.4.1.7
Tampilan Layar Register The Customer Service Setelah head officer menekan button “register the customer
service”, maka akan muncul tampilan layar Register The customer Service yang hanya dapat diakses oleh head officer. Head officer dapat mengisi data sesuai dengan data customer service yang akan didaftarkan. Jika semua keterangan telah diisi, maka head officer dapat menekan button “Submit” untuk memastikan semua data telah diisi dan
168 menyimpan data. Pada layar ini terdapat pula button “Back to Home” untuk kembali ke layar Home Head Officer , button “Study Case Problem” untuk menampilkan permasalahan yang dimiliki oleh customer yang diinput oleh customer service dan button “Log Out” untuk keluar dari sistem.
Gambar 4.22 Tampilan Layar Register The Customer Service
4.4.1.8
Tampilan
Layar
Registration
Customer
Service
Successful Setelah Head Officer menekan button “Submit” maka sistem akan mengecek apabila registrasi sukses atau tidak, apabila proses registrasi sukses maka head officer akan menerima notifikasi yang berisi nama customer service, ID customer service, dan password customer service. Head Officer harus meng-copy dan menyimpan data tersebut untuk digunakan oleh customer service pada saat melakukan proses login. Pada
169 saat admin mengklik button “Ok” maka akan kembali ke layar Head Officer Home.
Gambar 4.23 Tampilan Layar Registration Customer Service Successful
4.4.1.9
Tampilan Layar Study Case Problem Ketika head officer menekan button “Study Case Problem” , maka
akan
muncul tampilan layar Study Case Problem yang hanya dapat
dilihat oleh head officer. Di dalam layar Study Case Problem, head officer dapat melihat subject permasalahan yang banyak dihadapi oleh customer beserta deskripsi masalah dan solusi yang diberikan oleh customer service.
170
Gambar 4.24 Tampilan Layar Study Case Problem
4.4.1.10
Tampilan Layar Customer Service Home
Setelah customer service melakukan proses log in, maka akan muncul layar customer service Home. Dalam layar ini terdapat button “open queue” sehingga customer service bisa membuka antrian.
Gambar 4.25 Tampilan Layar Customer Service Home
171 4.4.1.11
Tampilan Layar Queue Manager
Tampilan ini hanya dapat diakses oleh customer service setelah customer service menekan button “open queue”. Pada layar ini akan tampil Textbox dimana customer service dapat meng-input subject permasalahan, deskripsi permasalahan, dan solusi atas permasalahan yang dihadapi oleh customer. Pada layar ini, customer service juga dapat menghapus, meng-update, menutup antrian serta melihat banyak antrian yang sedang menunggu untuk dilayani.
Gambar 4.26 Tampilan Layar Queue Manager
172 4.4.1.12
Tampilan Layar Alert Case Problem Pada tampilan ini, customer service yang melakukan kesalahan
pada saat pengisian Queue Manager akan mendapatkan notifikasi bahwa case problem belum terisi sepenuhnya, oleh karena itu customer service harus melengkapi semua data yang dibutuhkan agar data dapat tersimpan dengan sukses. Apabila customer service menekan button “ok” maka akan kembali ke layar Queue Manager.
Gambar 4.27 Tampilan Layar Alert Case Problem
4.4.1.13
Tampilan Layar Alert Submit Case Problem Success Apabila customer service sukses melakukan proses submit case
problem, maka akan muncul tampilan alert untuk memberitahu customer service bahwa case problem yang diinput telah tersimpan.
173
Gambar 4.28 Tampilan Layar Alert Submit Case Problem Success
4.4.1.14
Tampilan Layar Choose Instance Customer Web Pada saat sebelum customer dapat mengambil nomor antrian,
pihak instansi harus memilih sesuai nama instansinya. Apabila nama instansi telah dipilih, maka customer melalui web dapat melakukan proses pengambilan nomor antrian di instansi.
Gambar 4.29 Tampilan Layar Choose Instance Customer Web
174 4.4.1.15
Tampilan Layar Form Pick Queue Customer yang berada di dalam instansi dapat mengambil nomor
antrian menggunakan web. Apabila customer belum terdaftar maka harus melakukan proses registrasi dengan mengklik button ”Don’t have an account? Sign Up here” yang akan terhubung ke layar Registration Form For Customer Web. Namun apabila customer sudah terdaftar, maka akan terhubung ke layar Notification Pick Queue Success.
Gambar 4.30 Tampilan Layar Form Pick Queue
4.4.1.16
Tampilan Layar Notification Pick Queue Success Pada saat customer sukses melakukan pengambilan nomor
antrian menggunakan web pada instansi, maka akan muncul notifikasi yang memberitahu nomor antrian yang didapatkan oleh customer. Apabila customer telah melihat nomor antrian, maka dapat menekan button “ok” sehingga menampilkan kembali layar Form Pick Queue.
175
Gambar 4.31 Tampilan Layar Notification Pick Queue Success
4.4.1.17
Tampilan Layar Register Form For Customer Web Apabila customer yang mengakses pengambilan nomor antrian
melalui web belum melakukan proses registrasi, maka pada saat customer menekan button ” Don’t have an account? Sign Up here “ pada Form Pick Queue, maka akan muncul tampilan ini.
Gambar 4.32 Tampilan Layar Register Form For Customer Web
176 4.4.1.18
Tampilan Layar Alert Registration Customer Web Success Apabila customer yang mendaftarkan diri melalui web telah
selesai melakukan registrasi dan terdaftar dengan sukses, maka akan muncul tampilan ini agar customer mengetahui bahwa data dirinya telah tersimpan.
Gambar 4.33 Tampilan Layar Alert Registration Customer Web Success
4.4.2 Aplikasi Mobile Aplikasi mobile Android dapat digunakan oleh Customer. Berikut ini adalah tampilan aplikasi mobile bagi Customer:
4.4.2.1 Tampilan Layar Log In Aplikasi mobile akan menampilkan layar Log In yang dapat diakses oleh customer. Pada tampilan ini, customer yang telah terdaftar dapat melakukan proses Log In dengan cara mengisi TextBox username dan
177 password lalu menekan button “Log in”. Bagi customer yang belum terdaftar, dapat menekan Button “Don’t have account? Sign Up here” untuk melakukan proses registrasi.
Gambar 4.34 Tampilan Layar Log In
4.4.2.2 Tampilan Layar Sign Up Jika customer menekan Button “Don’t have account? Signup here” pada layar Log in , maka akan muncul layar Sign Up yang memungkinkan customer untuk melakukan proses registrasi. Pada layar ini, customer dapat me-scroll aplikasi untuk mengisi seluruh data diri customer yang ingin melakukan pendaftaran. Jika semua data diri telah diisi, maka customer dapat menekan tombol submit untuk memastikan semua data telah terisi dan melanjutkan proses pendaftaran ke layar berikutnya.
178
Gambar 4.35 Tampilan Layar Sign Up
Gambar 4.36 Tampilan Layar Sign Up 2
4.4.2.3 Tampilan Layar Sign Up Confirmation Setelah customer mengisi data diri pada layar Sign Up, maka akan muncul layar Sign Up Confirmation. Pada layar ini, akan muncul alert dialogue yang menanyakan apakah customer ingin menyimpan profile yang telah diisi sebelumnya.
179 Berikut ini adalah penjelasan terhadap button alert dialogue pada layar Sign Up Confirmation: 1. “Yes”, menyatakan bahwa data diri customer telah benar dan customer setuju untuk melakukan registrasi di dalam aplikasi. 2.
“Cancel”, memungkinkan customer untuk membatalkan data diri yang telah diisi sebelumnya kemudian kembali ke layar Sign Up untuk melakukan perubahan sebelum diregistrasi.
3. “No” menyatakan bahwa customer ingin membatalkan pengisian data diri yang telah diisi sebelumnya dan tidak ingin meregistrasi.
Gambar 4.37 Tampilan Layar Sign Up Confirmation
180 4.4.2.4
Tampilan Layar Sign Up Success Setelah customer menekan button “Yes”, maka customer akan
mendapat pemberitahuan bahwa proses registrasi sukses dilakukan.
Gambar 4.38 Tampilan Layar Sign Up Success
4.4.2.5 Tampilan Layar Home Setelah customer teregistrasi ataupun selesai melakukan proses Log In, maka akan muncul layar Home. Pada layar ini, customer dapat memilih menu apa yang ingin dilakukan. Berikut ini adalah penjelasan menu yang tersedia pada layar Home: 1. Select The Instance, untuk memilih instansi yang akan dituju. 2. Pick Queue number, untuk mengambil nomor antrian di dalam instansi yang telah dipilih. 3. My Profile, untuk melihat dan mengedit profile.
181 4. Call the customer service, untuk menelepon customer service dari instansi yang telah dipilih. 5. About us, untuk memberitahukan informasi mengenai aplikasi.
Gambar 4.39 Tampilan Layar Home
4.4.2.6 Tampilan Layar Select The Instance Setelah customer memilih “Select the Instance” pada layar Home, maka akan muncul nama-nama instansi yang telah terdaftar di dalam aplikasi. Customer bisa me-scroll layar untuk melihat seluruh nama instansi yang tersedia.
182
Gambar 4.40 Gambar Tampilan Layar Select the Instance
4.4.2.7
Tampilan Layar Pick Queue Number Setelah customer memilih nama instansi, maka customer dapat
mengambil nomor antrian pada menu Pick Queue Number. Layar Pick Queue Number akan menampilkan nomor antrian dan nama instansi yang telah dipilih sebelumnya. Jika customer telah selesai melihat nomor antrian, maka tekan button “Ok” untuk melanjutkan ke layar berikutnya.
183
Gambar 4.41 Tampilan Layar Pick Queue Number
4.4.2.8
Tampilan Layar Pick Queue Number and Time Estimation Setelah customer menekan button “Ok” pada layar Pick Queue
Number, maka akan tampil nama instansi yang telah dipilih, nomor antrian, dan estimasi waktu mengenai berapa lama nomor antrian customer akan dipanggil oleh customer service.
184
Gambar 4.42 Tampilan Layar Pick Queue Number and Time Estimation 4.4.2.9
Tampilan Layar Pick Queue Number Validate Customer dapat mengambil nomor antrian di lebih dari 1 instansi
namun apabila customer melakukan pemesanan nomor antrian kurang dari 1 menit setelah nomor antrian sebelumnya telah diambil, maka akan muncul peringatan bahwa customer harus menunggu antrian setelah 1 menit.
Gambar 4.43 Tampilan Layar Pick Queue Number Validate
4.4.2.10
Tampilan Layar My Profile Pada layar ini, customer dapat melihat data diri dan terdapat
button “Edit Profile” untuk mengubah data diri customer serta button “Change Password” untuk mengubah kata sandi.
185
Gambar 4.44 Tampilan Layar My Profile
4.4.2.11
Tampilan Layar Edit Profile Jika customer menekan button “Edit Profile” maka akan muncul
tampilan layar Edit Profile. Pada layar ini, customer dapat me-scroll aplikasi untuk mengisi seluruh data diri customer yang ingin melakukan pengubahan. Jika semua data diri telah diisi, maka customer dapat menekan button “Submit” untuk memastikan semua data telah terisi dan melanjutkan proses pengubahan data diri ke layar berikutnya.
186
Gambar 4.45 Tampilan Layar Edit Profile
Gambar 4.46 Tampilan Layar Edit Profile 2
187
4.4.2.12
Tampilan Layar Edit Profile Confirmation Setelah customer mengubah data diri pada layar Edit Profile,
maka akan muncul layar Edit Profile Confirmation. Pada layar ini, akan muncul alert dialogue yang menanyakan apakah customer ingin menyimpan profile yang telah diisi sebelumnya. Berikut ini adalah penjelasan terhadap button alert dialogue pada layar Edit Profile Confirmation: 1. “Yes”, menyatakan bahwa data diri customer telah benar dan customer setuju untuk melakukan perubahan data diri di dalam aplikasi. 2.
“Cancel”, memungkinkan customer untuk membatalkan data diri yang telah diisi sebelumnya kemudian kembali ke layar Edit Profile untuk melakukan perubahan sebelum data diri disimpan.
3. “No” menyatakan bahwa customer ingin membatalkan pengisian data diri yang telah diisi sebelumnya dan tidak ingin mengganti data diri.
188
Gambar 4.47 Tampilan Layar Edit Profile Confirmation
4.4.2.13
Tampilan Layar Edit Profile Success Setelah customer menekan button “Yes”, maka customer akan
mendapat pemberitahuan bahwa proses pengubahan data diri sukses dilakukan.
Gambar 4.48 Tampilan Layar Edit Profile Success
189 4.4.2.14
Tampilan Layar Change Password Apabila customer memilih untuk mengubah password dengan
cara menekan button “Change Password” pada layar My Profile, maka customer akan melihat layar Change Password untuk mengubah password.
Gambar 4.49 Tampilan Layar Change Password
4.4.2.15
Tampilan Layar Change Password Confirmation Setelah customer mengubah password pada layar Change
Password, maka akan muncul layar Change Password Confirmation. Pada layar ini, akan muncul alert dialogue yang menanyakan apakah customer ingin menyimpan password yang telah diisi sebelumnya. Berikut ini adalah penjelasan terhadap button alert dialogue pada layar Change Password Confirmation:
190 1. “Yes”, menyatakan bahwa password customer telah benar dan customer setuju untuk melakukan perubahan password di dalam aplikasi. 2. “Cancel”, memungkinkan customer untuk membatalkan password yang telah diisi sebelumnya kemudian kembali ke layar Change Password untuk melakukan perubahan sebelum data diri disimpan. 3. “No” menyatakan bahwa customer ingin membatalkan pengubahan password yang telah diisi sebelumnya dan tidak ingin mengubah password.
Gambar 4.50 Tampilan Layar Change Password Confirmation
4.4.2.16
Tampilan Layar Change Password Success Setelah customer menekan button “Yes”, maka customer akan
mendapat pemberitahuan bahwa proses pengubahan password sukses dilakukan.
191
Gambar 4.51 Tampilan Layar Change Password Success
4.4.2.17
Tampilan Layar My Queue Pada tampilan layar My Queue, customer dapat melihat nomor
antrian yang sedang dilayani oleh instansi, nomor yang telah diambil dari
192 instansi, nama instansi, dan status layanan.
Gambar 4.52 Tampilan Layar My Queue 4.4.2.18
Tampilan Layar Set Notification and Time Estimation Apabila customer menekan daftar antrian pada My Queue, maka
layar Set Notification and Time Estimation akan tampil. Pada layar ini, akan tampil nama instansi, nomor antrian yang diambil, dan estimasi waktu nomor antrian akan dipanggil. Jika customer menginginkan adanya notifikasi, maka customer dapat menekan button “Set Notification”.
Gambar 4.53 Tampilan Layar Set Notification
4.4.2.19
Tampilan Layar Set Notification Success Setelah customer menekan button “Set Notification”, maka akan
muncul tampilan layar Set Notification Success, pada layar ini, customer akan mendapat pemberitahuan bahwa notifikasi telah berhasil diaktifkan.
193
Gambar 4.54 Tampilan Layar Set Notification Success
4.4.2.20 Tampilan Layar Show Notification Customer dapat melihat notifikasi telah aktif dengan cara keluar dari aplikasi namun aplikasi antrian masih berjalan. Maka akan terlihat notifikasi pada layar customer.
194
Gambar 4.55 Tampilan Layar Show Notification
4.4.2.21 Tampilan Layar Call To The Customer Service Pada layar Home, terdapat menu Call To The Customer Service. Menu ini berguna untuk mempermudah customer untuk menghubungi call service dengan cara customer memilih nama instansi kemudian menekan menu Call To The customer service. Maka secara otomatis nomor telepon customer service akan terlihat pada layar.
195
Gambar 4.56 Tampilan Layar Call To The Customer Service
4.4.2.22 Tampilan Layar About Pada layar Home, terdapat menu About. Menu ini berguna agar customer mengetahui informasi mengenai aplikasi dan menjelaskan fitur yang terdapat pada aplikasi untuk membantu customer dalam melakukan antrian.
196
Gambar 4.57 Tampilan Layar About
4.4.2.23 Tampilan Layar Log Out Apabila customer telah selesai melakukan proses antrian, maka customer dapat keluar dari aplikasi dengan cara menekan tombol menu pada smartphone , maka akan muncul button “Log Out” untuk keluar dari aplikasi.
Gambar 4.58 Tampilan Layar Log Out
197 4.5
Evaluasi Evaluasi bagi aplikasi smartphone Android dilakukan dengan cara pengetesan kodingan menggunakan pluggin pada Eclipse Galileo yaitu CodePro Analytix dan questionnaire. Aplikasi web bagi customer dilakukan evaluasi menggunakan questionnaire. Aplikasi web bagi admin, head officer, dan customer service dilakukan pengetesan performa web menggunakan yslow dan prinsip Eight Golden Rules. Evaluasi yang dilakukan adalah sebagai berikut:
4.5.1
Code Testing Android Testing yang dilakukan dengan mengukur metric yang terdiri dari
beberapa kategori termasuk basics, complexity, dependency, dan inheritance. Setiap metric yang nilainya sudah melebihi batas yang ditentukan akan diberi warna yang berbeda. Hasil yang ditampilkan berikut merupakan ukuran metric secara keseluruhan dalam satu program.
1. Abstractness Rasio dari nomer tipe abstract (kelas abstract dan interface) di dalam target elemen ke tipe nomor total di elemen target. Matriks ini termasuk breakdown berdasarkan tipenya yang abstrak konkrit. CodePro memberikan nilai 1,5% terhadap abstractness.
198
Gambar 4.59 Abstractness
2. Average Block Depth Average Block Depth adalah rata-rata panjang baris kode pada suatu fungsi yang didefinisikan dalam elemen target.
Gambar 4.60 Average Block Depth CodePro
199 Pada penilaian Average Block Depth CodePro memberi nilai ratarata 0.68 dengan nilai minimum 0 dan nilai maksimum 4 dari setiap class yang ada. Nilai matrik pada bagian ini terdapat highlight karena terdapat 2 fungsi Thread yang memiliki panjang baris kode sama dengan nilai maksimum yaitu 4 .
3. Average Cyclomatic Complexity Average Cyclomatic Complexity adalah rata-rata kompleksitas siklomatik dari masing-masing fungsi yang didefinisikan dalam elemen target. Kompleksitas cyclomatic dari fungsi tunggal adalah sebuah ukuran angka dari jalur yang berbeda pada saat fungsi dipanggil. Hal ini diukur dengan menambahkan satu jalur untuk fungsi dengan masing-masing jalur yang dibuat oleh pernyataan bersyarat (seperti "if" dan "for") dan operator.
Gambar 4.61 Average Cyclomatic Complexity
200 Pada penilaian Average Cyclomatic Complexity, CodePro memberikan nilai rata - rata 1.54 dengan nilai minimum 1 dan maksimum 5 pada setiap classnya. Terdapat highlight pada penilaian ini karena dalam class sign up activity dan update my profile activity terdapat 1 fungsi yang memiliki nilai 7 dan 10 yaitu fungsi validate data yang memiliki tingkat kompleksitas yang cukup tinggi.
4. Average Lines Of Code Per Method Average Lines Of Code Per Method adalah rata-rata jumlah baris kode dalam setiap fungsi yang didefinisikan dalam elemen target. Matrik ini mencakup rincian tentang jumlah minimum dan maksimum dari baris kode dalam salah satu fungsi.
Gambar 4.62 Average Lines Of Code Per Method
201 Pada penilaian Average Lines Of Code Per Method, CodePro memberikan nilai rata – rata 13.66, dimana nilai minimum adalah 1 dan nilai maksimum adalah 75. Jadi setiap fungsi yang berada pada masing– masing class memiliki banyak baris minimal 1 dan maksimal 75. Matrik ini memberikan highlight karena pada home activity memiliki nilai 75.
5. Average Number of Constructors Per Type Average Number of Constructors Per Type adalah rata-rata jumlah konstruktor yang ditetapkan untuk setiap tipe yang didefinisikan dalam elemen target. Matrik ini mencakup rincian tentang jumlah minimum dan maksimum konstruktor didefinisikan oleh tipe.
Gambar 4.63 Average Number of Constructors Per Type
Pada metric Average Number of Constructors per Type, nilai rata - rata yang diberikan CodePro adalah 0.17 dengan nilai minimum 0 dan
202 maksimum 1. Jadi di setiap class maksimal mempunyai 1 constructor per type,hasil ini menunjukan bahwa nilai metric masih dalam batas yang normal.
6. Average Number of Fields Per Type Average Number of Fields Per Type adalah rata-rata jumlah field yang yang didefinisikan untuk setiap jenis tipe didalam elemen target. Matrik ini mencakup rincian tentang jumlah minimum dan maximum dari field yang didefinisikan oleh tipe.
Gambar 4.64 Average Number of Fields Per Type
Pada penilaian metric Average Number of Fields Per Type, CodePro memberikan nilai rata – rata 2.42 dengan nilai minimum 0 dan nilai maksimum 18. Angka ini menurut CodePro sudah melewati batas normal dari metric Average Number of Fields Per Type. Class yang dianggap nilainya sudah melebihi batas terdapat pada sign up activity dan
203 set notification. Pada dua class tersebut
terdapat 16 tipe data yang
dideklarasikan dan CodePro menganggap bahwa jumlah tersebut sudah melebihi batas normal matrik.
7. Average Number of Methods Per Type Average Number of Methods Per Type adalah rata-rata jumlah metode yang didefinisikan untuk setiap jenis tipe dalam elemen target. Matrik ini mencakup rincian tentang jumlah minimum dan maksimum dari fungsi yang didefinisikan oleh tipe.
Gambar 4.65 Average Number of Methods Per Type
Pada matrik ini CodePro memberikan nilai rata – rata 2.42 dengan nilai minimum 0 dan maksimum 9 dari setiap classnya. Dari nilai ini CodePro menilai bahwa untuk matrik ini masih dalam batas yang normal.
204 8. Average Number of Parameters Average Number of Parameters adalah rata-rata jumlah parameter yang ditetapkan untuk fungsi (tetapi bukan konstruktor) didefinisikan dalam elemen target. Matrik ini mencakup rincian tentang jumlah minimum dan maksimum dari parameter yang didefinisikan oleh fungsi. Hal ini juga memberikan rincian tentang jumlah fungsi dari masing-masing ukuran tertentu.
Gambar 4.66 Average Number of Parameters
Pada matrik ini CodePro memberikan nilai rata – rata 1.00 dengan jumlah parameter pada fungsi minimal 0 dan maksimal 5. Nilai pada matrik ini juga masih dalam batas normal.
205 9. Comments Ratio Comments Ratio adalah rasio dari jumlah baris kode. Secara khusus, itu dihitung sebagai berikut:
Gambar 4.67 Comments Ratio
Dari penghitungan Comments Ratio CodePro memberikan nilai 07,9% dari setiap class.
206 10.Efferent Couplings Efferent Couplings adalah jumlah jenis dalam elemen target yang tergantung pada tipe luar elemen target. CodePro memberikan nilai 12.
Gambar 4.68 Efferent Couplings
11. Lines of Code Lines of Code adalah jumlah baris dalam elemen target yang berisi karakter selain spasi dan komentar.
207
Gambar 4.69 Lines of Code
Pada Metric ini CodePro memberikan nilai 1.973. Nilai ini diambil dari menjumlahkan kode baris dari setiap class.
12.Number of Characters Number of Characters adalah hitungan sederhana jumlah karakter dari
sumber kode yang terkait dengan unsur-unsur target.
Sumber kode yang berhubungan dengan elemen meliputi setiap comment Javadoc yang mungkin mendahului elemen.
208
Gambar 4.70 Number of Characters
Pada matrik ini CodePro memberikan nilai 78.237 karakter pada keseluruhan class.
13.Number of Comments Number of Comments adalah jumlah komentar. Ini bukan hitungan jumlah baris yang berisi komentar, multi-baris komentar dihitung sebagai satu baris tidak penting seberapa banyak baris yang mereka tempati. Matrik ini mencakup rincian berdasarkan jenis komentar: end-of-line, multi-line, dan Javadoc. CodePro memberikan nilai 157.
209
Gambar 4.71 Number of Comments
14.Number of Constructors Number of Constructors adalah jumlah konstruktor didefinisikan dalam elemen target. Metrik ini termasuk gangguan berdasarkan visibilitas konstruktor (public, package, protected or private). CodePro memberikan nilai 11.
Gambar 4.72 Number of Constructors
210 15.Number of Fields Number of Fields adalah jumlah bidang yang didefinisikan dalam elemen target. Matrik ini termasuk gangguan didasarkan pada kedua lingkup dari lapangan (static or instance) dan visibilitas dari lapangan (public, package, protected or private).
Gambar 4.73 Number of Fields Percentage by scope
Gambar 4.74 Number Of Fields Percentage by visibility
211 16.Number of Lines Number of Lines adalah hitungan sederhana jumlah baris dalam elemen target, termasuk baris kosong.
17.Number of Methods Number of Methods adalah jumlah fungsi yang didefinisikan dalam elemen target. Metrik ini termasuk gangguan didasarkan pada kedua lingkup fungsi (static or instance) dan visibilitas dari fungsi (public, package, protected or private).
Gambar 4.75 Number of Methods by scope
212
Gambar 4.76 Number of Methods by visibility
Pada matrik ini total jumlah fungsi yang ada berjumlah 153.
18.Number of Packages Number of Packages adalah jumlah paket yang didefinisikan dalam elemen target.
Gambar 4.77 Number of Packages
213 Matrik ini menunjukan jumlah packages yang berjumlah 6.
19.Number of Semicolons Number of Semicolons adalah hitungan sederhana jumlah titik koma dalam sumber kode yang terkait dengan unsur-unsur target. Titik koma yang terjadi di dalam comment tidak dihitung, tetapi titik koma yang berada pada akhir deklarasi paket dan impor dihitung. Pada matrik ini CodePro menjumlahkan banyaknya titik koma yang ada sejumlah 1.171 buah.
20. Number of Types Number of Types adalah jumlah jenis tipe didefinisikan dalam elemen target. Metrik ini mencakup rincian berdasarkan apakah jenisnya adalah kelas atau interface.
Gambar 4.78 Number of Types Percentages by and and visibility
214
Gambar 4.79 Number of Types Percentages by visibility
Pada metric ini CodePro membandingkan antara jumlah class dan interface yang ada. Dari perbandingan tersebut mendapatkan hasil jumlah class sebanyak 24 dan interface 1.
21. Weighted Methods Weighted Methods adalah jumlah kompleksitas siklomatik dari masing-masing
fungsi
yang didefinisikan
dalam
elemen
target.
Kompleksitas cyclomatic dari fungsi tunggal adalah sebuah ukuran angka dari jalur yang berbeda pada saat fungsi dipanggil. Hal ini diukur dengan menambahkan satu jalur untuk fungsi dengan masing-masing jalur yang dibuat oleh pernyataan bersyarat (seperti "if" dan "for") dan operator. Pada metric ini, CodePro memberikan nilai sejumlah 254.
215 4.5.2 Kesimpulan Code Testing Android Kesimpulannya,
dari
hasil
perhitungan
metrik
diatas
dapat
disimpulkan bahwa program ini sudah cukup baik, karena dari 21 kriteria terdapat 4 yang masih belum memenuhi standard CodePro Analytix.
4.5.3 Website Testing Performance Evaluasi dilakukan dengan metode uji performa
pada aplikasi
website dengan menggunakan pluggin pada browser Mozilla firefox yaitu yslow. Testing yang dilakukan dengan mengukur performa website yang dipecah menjadi beberapa komponen. Berikut merupakan hasil dari evaluasi aplikasi website dengan menggunakan yslow:
Tabel 4.1 Code Testing Website Regsiter Study
Register the Commponent
Login
Home
Queue Case
the customer
Manager Problem
Instance service Make fewer HTTP A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
requests Use a Content Delivery Network (CDN) Avoid empty src or
216 href Add Expires F
F
F
E
E
E
D
C
D
C
C
D
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
n/a
n/a
n/a
n/a
n/a
n/a
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
F
D
F
D
D
D
headers Compress components with gzip Put CSS at top Put JavaScript at bottom Avoid CSS expressions Make JavaScript and CSS external Reduce DNS lookups Minify JavaScript and CSS Avoid URL redirects Remove duplicate JavaScript and CSS Configure entity
217 tags (ETags) Make AJAX A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
cacheable Use GET for AJAX requests Reduce the number of DOM elements Avoid HTTP 404 (Not Found) error Reduce cookie size Use cookie-free domains Avoid AlphaImageLoader filter Do not scale images in HTML Make favicon small and cacheable
218 Ada beberapa aturan yang terbagi menjadi 6 aspek (Content, Cookies, CSS, Javascript, Image, dan Server) yang digunakan yslow untuk mengukur optimasi halaman website, aturan-aturan itu adalah:
1. Make fewer HTTP requests Sebagian besar response time website dihabiskan pada download komponen website seperti gambar, CSS, javascript, dan lain-lain. Mengurangi komponen-komponen ini juga akan memperkecil jumlah HTTP Request yang dibutuhkan untuk me-load sebuah halaman website. Mengurangi belum tentu menghapus komponen, ada beberapa trik yang dapat kita lakukan untuk memperkecil jumlah HTTP Request dengan mengurangi jumlah komponen website, diantaranya: a. Menggabungkan komponen website b. Menggunakan CSS Sprite c. Menggabungkan dua atau lebih image menjadi single image(Image map). Contoh seperti image navigation bar. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
2. Use a Content Delivery Network (CDN) CDN adalah jaringan server-server diseluruh belahan dunia yang berfungsi untuk menyampaikan konten kepada user yang mengakses website dari klien CDN. Memakai layanan ini, membuat konten web seperti akan di mirror pada server cadangan
219 yang terletak di berbagai negara. CDN akan secara otomatis merespon server yang terdekat dengan visitor konten tersebut. Hal ini tentu saja akan mempercepat loading website ketika dibuka oleh user. Ada banyak penyedia layanan ini, berbayar maupun gratis. Untuk yang berbayar contohnya adalah CDN Amazon, sedangkan yang gratis dapat menggunakan layanan cloudflare. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
3. Avoid empty src or href Kebanyakan browser tidak mengabaikan tag yang memiliki attributsrc dan href kosong. Browser akan tetap melakukan request ke server. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
4. Add Expires headers Pada prinsipnya, browser akan men-chace beberapa HTTP Request untuk mempercepat loading web. Sedangkan web server akan menggunakan Expires headers dalam HTTP Response untuk memberitahukan browser berapa lama komponen dapat disimpan di cache browser. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, didapatkan nilai yang buruk dan masih perlu
220 diperbaiki. Ini dikarenakan pada setiap halaman aplikasi website tidak mengandung expires headers.
5. Compress components with gzip Mengkompresi dapat juga mengurangi ukuran paket HTTP Request atau HTTP Response. Sejak HTTP/1.1, web client sudah mendukung kompresi HTTP Request.
Web client
mendefinisikan jenis kompresi apa saja yang dapat diterima pada header request-nya. Web server mengkompresi HTTP Response yang dapat diterima oleh client dengan melihat Accept-Encoding pada header request. Tapi pada umumnya GZIP merupakan jenis kompresi yang populer dan efektif untuk urusan ini. Hampir 90% internet browser mendukung kompresi ini. web server apache dapat mengaktifkan module mod_gzip untuk hal ini. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, didapatkan nilai yang kurang baik dan masih perlu diperbaiki. Ini dikarenakan butuh adanya file gzip untuk melakukan kompresi.
6. Put CSS at top Letakkan file-file style CSS pada bagian atas dokumen html. Ini bertujuan agar browser lebih cepat untuk me-render halaman website. Hal ini akan sangat bermanfaat sekali ketika
221 user memiliki akses koneksi lambat karena halaman website akan tampak secara progresif. Tapi ketika file CSS diletakkan dibagian bawah dokumen, beberapa browser seperti IE akan memblok proses rendering untuk mencegah gambar ulang halaman web jika terjadi perubahan. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
7. Put JavaScript at bottom File-file script seperti javascript akan lebih baik diletakkan di bagian bawah dokumen HTML. Ini untuk mencegah terganggunya proses rendering halaman web karena download file script. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website telah didapatkan nilai yang sangat baik yaitu A.
8. Avoid CSS expressions Menghindari expressions CSS bukan karena satu atau dua kali ekspresi ini dievaluasi ulang oleh engine css, tetapi setiap scroll atau setiap kali cursor mouse berubah maka ekspresi ini dievaluasi ulang dan ini akan mengganggu performa dari halaman web. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
222 9. Make JavaScript and CSS external Hindari meletakkan script atau style dalam dokumen html. Jadikan script dan style dalam file sendiri-sendiri. Hal ini akan bisa di-cache oleh browser daripada diletakkan inline dalam dokumen html. Pada penilaian ini tidak didapatkan nilai apapun dikarenakan yslow masih mendeteksi adanya javascript internal yang diletakkan di atas pada masing-masing halaman website walaupun sudah memiliki css external.
10. Reduce DNS lookups Frekuensi lookups DNS ternyata juga dijadikan faktor tersendiri. Ini berarti file-file komponen tidak disarankan tersebar di sembarang tempat atau hostname lain. Sekali me-load halaman website, frekuensi tidak lebih dari 4 lookups. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
11. Minify JavaScript and CSS Minify javascript atau CSS dapat dilakukan dengan menghilangkan karakter yang tidak perlu seperti menghilangkan karakter spasi dan karakter newline. Ada banyak tool yang bisa digunakan untuk urusan ini diantaranya. Untuk javascript bisa menggunakan:
223 a. Packer b. JSMin c. Closure compiler d. YUICompressor (bisa juga digunakan untuk CSS) e. AjaxMin(bisa juga digunakan untuk CSS) Sedangkan untuk CSS dapat menggunakan: a. CSSTidy b. Minify c. YUICompressor(bisa juga digunakan untuk javascript) d. AjaxMin(bisa juga digunakan untuk javascript) e. CSSCompressor Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
12. Avoid URL redirects Browser tidak akan me-render apapun ketika dia mendapati kode status 301 atau 302 pada header response. Browser kemudian me-redirect halaman ke “Location” yang juga ada pada header. Yslow
menyarankan
agar
menghindari
penggunaan
redirect halaman. Hal ini hanya masalah pada user experience, user akan mendapat halaman kosong sampai browser me-request kembali ke “Location” pada header tersebut.
224 Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
13. Remove duplicate JavaScript and CSS Cek semua komponen-komponen web agar tidak terjadi duplikasi. Ini sering kali terjadi pada file script javascript seperti jquery. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
14. Configure entity tags (Etags) Etag adalah salah satu mekanisme pada HTTP untuk validasi web cache. Etag ini dibuat oleh server dan diletakkan di header. Saat browser melakukan permintaan selanjutnya, ETag dikirim kembali ke server melalui field If-none-match pada header. Di server informasi ini akan dicocokan dengan ETag yang ada di server. Jika informasi di server tidak ada perubahan data, maka server hanya akan mengirimkan respon singkat pada header berupa 304 Not modified. Jika terdapat perubahan informasi, server akan mengirimkan respon secara lengkap beserta ETag yang baru. Dengan pemanfaatan Etag, respon akan lebih cepat pada halaman yang sering diakses oleh user karena tidak perlu mengunduh ulang seluruh respon.
225 Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, didapatkan nilai yang kurang baik dan masih perlu diperbaiki. Ini dikarenakan tidak adanya Etag di bagian atas masing-masing halaman website.
15. Make AJAX cacheable Tujuan dari aturan ini adalah mengurangi request ke server. Data bisa pertama kali didapatkan dari server, tapi kemudian disimpan di cache browser untuk keperluan request selanjutnya. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
16. Use GET for AJAX requests Penggunaan POST pada AJAX request memiliki dua langkah proses, pertama mengirimkan header, kemudian baru mengirimkan data. Sedangkan untuk GET hanya mengirimkan satu paket data, melalui URL. Itulah mengapa penggunaan GET lebih disarankan daripada POST, tapi data yang dikirim lewat GET ini, tidak bisa lebih dari 2k karena panjang maksimal URL yang diperbolehkan hanya 2k. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website telah didapatkan nilai yang sangat baik yaitu A.
226 17. Reduce the number of DOM elements Ini bertujuan agar struktur DOM yang anda buat pada dokumen html tidak terlalu kompleks dan rumit. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A,
18. Avoid HTTP 404(Not Found) error Cek semua komponen agar tidak mengembalikan kode status 404. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
19. Reduce cookie size Hapus beberapa data cookie yang sudah tidak digunakan lagi. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
20. Avoid AlphaImageLoader filter Filter AplhaImageLoader akan memblok proses rendering dan menghentikan
browser
ketika
sedang
mendownload
image.
Berdasarkan rata-rata hasil penelitian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
227 21. Do not scale images in HTML Hal ini bertujuan agar gambar yang di download browser tidak melebihi apa yang dibutuhkan. Akan lebih baik me-resize gambar di server. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didaatkan nilai yang sangat baik yaitu A.
22. Make favicon small and cacheable Setiap halaman web diminta, satu komponen yang selalu ada adalah favicon. Pilih atau buat gambar favicon sekecil mungkin dan pastikan bahwa favicon dapat disimpan di cache browser. Berdasarkan dari rata-rata hasil penilaian ini terhadap aplikasi website, telah didapatkan nilai yang sangat baik yaitu A.
4.5.4 Kesimpulan Website Testing Performance Dari evaluasi di atas dapat diketahui bahwa performa dari aplikasi website sangat baik. Karena dari hasil evaluasi grade dari keseluruhan aturanaturan yang ada pada yslow mendapatkan grade A untuk tiap halaman pada aplikasi website. namun masih ada beberapa komponen yang masih perlu di perbaiki agar performa aplikasi website ini dapat menjadi lebih baik lagi.
228 4.5.5
Evaluasi Application Mobile bagi Customer Penulis melakukan evaluasi pemakaian aplikasi terhadap 40 orang
responden yang berprofesi sebagai mahasiswa. Berikut ini adalah hasil evaluasi dengan para responden:
Pertanyaan 1: Apakah aplikasi ini dapat dimengerti & digunakan dengan mudah?
Responden Mengerti Cara Pemakaian Aplikasi Mudah Dimengerti 33
Sangat Mudah Dimengerti 67
Gambar 4.80 Pie Diagram Responden Mengerti Cara Pemakaian Aplikasi
Tabel 4.2 Responden Mengerti Cara Pemakaian Aplikasi Responden Mengerti
Jumlah Responden
Persentase Responden
Sangat Mudah
27
67%
Mudah
13
33 %
Cukup Mudah
0
0%
Sulit
0
0%
229 Total
40
100 %
Pertanyaan 1 dimaksudkan untuk mengetahui apakah customer mengerti cara pemakaian aplikasi. Dan hasilnya 67% responden sebanyak 27 orang merasa cara pemakaian aplikasi sangatlah mudah. Gambar 4.80 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.2 menunjukkan jumlah dan persentase responden.
Pertanyaan 2: Apakah aplikasi ini mempermudah anda dalam pengambilan nomor antrian?
Aplikasi Ini Mempermudah Pengambilan Nomor Antrian Membantu 40
Sangat Membantu 60%
Gambar 4.81 Pie Diagram Aplikasi Mempermudah Pengambilan Nomor Antrian
230 Tabel 4.3 Aplikasi Ini Mempermudah Pengambilan Nomor Antrian Responden Merasa Aplikasi Mempermudah Jumlah Responden
Persentase Responden
Sangat Membantu
24
60 %
Membantu
16
40%
Cukup Membantu
0
0%
Tidak Membantu
0
0%
Total
40
100 %
Dalam Pengambilan Nomor Antrian
Pertanyaan 2 dimaksudkan untuk mengetahui apakah customer merasakan kemudahan dalam mengambil nomor antrian menggunakan aplikasi mobile. Dan hasilnya 60% responden sebanyak 24 orang merasa terbantu dalam mengambil nomor antrian. Gambar 4.81 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.3 menunjukkan jumlah dan persentase responden.
231 Pertanyaan 3: Apakah aplikasi ini memberikan efisiensi waktu anda dalam mengantri di customer service suatu instansi?
Responden Merasakan Efisiensi Waktu Biasa Saj a Cukup 55
Sangat 40
Gambar 4.82 Pie Diagram Responden Merasakan Efisiensi Waktu
Tabel 4.4 Responden Merasakan Efisiensi Waktu Responden Merasakan Jumlah Responden
Persentase Responden
Sangat
16
40 %
Cukup
22
55 %
Biasa Saja
2
5%
Kurang
0
0%
Total
40
100 %
Efisiensi Waktu
Pertanyaan 3 dimaksudkan untuk mengetahui apakah customer merasakan kemudahan dalam mengambil nomor antrian menggunakan
232 aplikasi mobile. Dan hasilnya 55% responden sebanyak 22 orang merasa aplikasi telah cukup membuat waktu responden menjadi lebih efisien. Gambar 4.82 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.4 menunjukkan jumlah dan persentase responden.
Pertanyaan 4: Apakah aplikasi ini mempermudah anda dalam menghubungi customer service / instansi?
Gambar 4.83 Pie Diagram Aplikasi Ini Mempermudah Responden Menghubungi Customer Service
233 Tabel 4.5 Aplikasi Ini Mempermudah Responden Menghubungi Customer Service Aplikasi Ini Mempermudah Responden Jumlah Responden
Persentase Responden
Sangat Membantu
26
67 %
Membantu
14
33%
Cukup Membantu
0
0%
Tidak Membantu
0
0%
Total
40
100 %
Menghubungi customer service
Pertanyaan 4 dimaksudkan untuk mengetahui apakah customer merasakan kemudahan dalam mengambil nomor antrian menggunakan aplikasi mobile. Dan hasilnya 67% responden sebanyak 26 orang merasa mudah lebih mudah untuk menghubungi customer service. Gambar 4.83 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.5 menunjukkan jumlah dan persentase responden.
234 Pertanyaan 5: Apakah aplikasi ini dapat membantu anda untuk
Aplikasi Ini Dapat Membantu Responden Untuk Mengetahui Informasi Antrian Yang Sedang Berjalan Membantu 30 Sangat Membantu 70
mengetahui informasi antrian yang sedang berjalan?
Gambar 4.84 Pie Diagram Aplikasi Ini Dapat Membantu Untuk Mengetahui Informasi Antrian Yang Sedang Berjalan
Tabel 4.6 Aplikasi Ini Mempermudah Responden Untuk Mengetahui Informasi Antrian Yang Sedang Berjalan Aplikasi Ini Dapat Membantu Untuk Mengetahui Informasi
Jumlah Responden
Persentase Responden
Sangat Membantu
28
70%
Membantu
12
30 %
Antrian Yang Sedang Berjalan
235 Cukup Membantu
0
0%
Tidak Membantu
0
0%
Total
40
100 %
Pertanyaan 5 dimaksudkan untuk mengetahui apakah customer merasakan kemudahan untuk mengetahui nomor antrian yang sedang berjalan dengan menggunakan aplikasi mobile. Dan hasilnya 70% responden sebanyak 28 orang merasa aplikasi ini mudah untuk mengetahui antrian yang sedang berjalan. Gambar 4.84 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.6 menunjukkan jumlah dan persentase responden.
Pertanyaan 6: Apakah aplikasi ini dapat mengurangi resiko nomor
Aplikasi Dapat Mengurangi Resiko Nomor Antrian Responden Akan Biasa Saja Terlewat 5
Sangat 33
Cukup 63
antrian anda akan terlewat?
Gambar 4.85 Pie Diagram Aplikasi Ini Dapat Mengurangi Resiko Nomor Antrian Responden Akan Terlewat
236
Tabel 4.7 Aplikasi Dapat Mengurangi Resiko Nomor Antrian Akan Terlewat Aplikasi Dapat Mengurangi Resiko Jumlah Responden
Persentase Responden
Sangat
13
33 %
Cukup
25
63%
Biasa Saja
2
5%
Tidak
0
0%
Total
40
100 %
Nomor Antrian Responden Akan Terlewat
Pertanyaan 6 dimaksudkan untuk mengetahui apakah aplikasi ini dapat mengurangi resiko nomor antrian responden akan terlewat. Dan hasilnya 63% responden sebanyak 25 orang merasa aplikasi ini cukup mengurangi resiko nomor antrian responden terlewat. Gambar 4.85 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.7 menunjukkan jumlah dan persentase responden.
237
Pertanyaan 7: Apakah anda berminat untuk menggunakan aplikasi ini?
Responden Berminat Untuk Menggunakan Aplikasi Ini
100% Ya
Gambar 4.86 Pie Diagram Responden Berminat Untuk Menggunakan Aplikasi Ini
Tabel 4.8 Responden Berminat Untuk Menggunakan Aplikasi Ini Responden Berminat Untuk Menggunakan
Jumlah Responden
Persentase Responden
Ya
40
100 %
Tidak
0
0%
Total
40
100 %
Aplikasi Ini
238 Pertanyaan 7 dimaksudkan untuk mengetahui apakah responden tertarik untuk menggunakan aplikasi ini. Dan hasilnya 100% responden sebanyak 40 orang tertarik untuk menggunakan aplikasi ini. Gambar 4.86 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.8 menunjukkan jumlah dan persentase responden.
4.5.6
Kesimpulan Evaluasi Application Mobile Bagi Customer Dari hasil evaluasi application mobile bagi customer yang
melibatkan 40 orang responden, dapat diketahui bahwa seluruh responden tertarik untuk menggunakan aplikasi yang cara kerjanya mudah dimengerti ini karena responden merasa bahwa aplikasi ini sangat membantu mereka untuk mengambil nomor antrian, mereka cukup merasakan efisiensi waktu, mempermudah menghubungi nomor customer service, serta responden dapat mengetahui informasi antrian yang sedang berjalan sehingga mengurangi resiko nomor antrian terlewat.
4.5.7
Evaluasi Application Web Bagi Customer Penulis melakukan evaluasi pemakaian aplikasi terhadap 30 orang
responden yang berprofesi sebagai mahasiswa, berikut ini adalah hasil evaluasi dengan para responden:
239 Pertanyaan 1: Apakah aplikasi ini mudah digunakan?
Aplikasi Ini Mudah Digunakan Sangat Mudah Mudah
40
60
Gambar 4.87 Pie Diagram Aplikasi Ini Mudah Digunakan
Tabel 4.9 Aplikasi Mudah Digunakan Oleh Responden Aplikasi Ini Mudah Jumlah Responden
Persentase Responden
Sangat Mudah
12
40%
Mudah
18
60%
Sangat Sulit
0
0%
Sulit
0
0%
Total
30
100%
Digunakan Oleh Responden
Pertanyaan 1 dimaksudkan untuk mengetahui apakah customer merasa pemakaian aplikasi tersebut mudah digunakan. Dan hasilnya 60% responden sebanyak 18 orang merasa pemakaian aplikasi ini mudah untuk digunakan.
240 Gambar 4.87 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.9 menunjukkan jumlah dan persentase responden.
Pertanyaan 2: Apakah aplikasi ini mempermudah anda untuk
Aplikasi Ini Mempermudah Mengambil Nomor Antrian Di Instansi Sangat Mudah
Mudah
47
53
mengambil nomor antrian di instansi?
Gambar 4.88 Pie Diagram Aplikasi Ini Mempermudah Responden Mengambil Nomor Antrian
Tabel 4.10 Aplikasi Mempermudah Responden Mengambil Nomor Antrian Mempermudah Responden Mengambil Nomor Antrian
Jumlah Responden
Persentase Responden
Sangat Mudah
14
47%
Mudah
16
53%
Di Instansi
241 Sulit
0
0%
Sangat Sulit
0
0%
Total
30
100%
Pertanyaan 2 dimaksudkan untuk mengetahui apakah customer merasakan kemudahan dalam pengambilan nomor antrian menggunakan aplikasi web yang berada di instansi. Dan hasilnya 53% responden sebanyak 16 orang merasa terbantu dalam mengambil nomor antrian. Gambar 4.87 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.9 menunjukkan jumlah dan persentase responden.
Pertanyaan 3: Apakah aplikasi ini memberikan umpan balik yang jelas?
Aplikasi Memberikan Umpan Balik Yang Jelas Ya 100
Gambar 4.89 Pie Diagram Aplikasi Memberikan Umpan Balik Yang Jelas
242 Tabel 4.11 Aplikasi Memberikan Umpan Balik Yang Jelas Aplikasi Memberikan Jumlah Responden
Persentase Responden
Ya
30
100%
Tidak
0
0%
Total
30
100%
Umpan Balik Yang Jelas
Pertanyaan 3 dimaksudkan untuk mengetahui apakah customer merasakan bahwa aplikasi memberikan umpan balik yang jelas sebagai pemberitahuan bahwa tindakan yang dilakukan oleh customer pada saat mengambil nomor antrian telah berhasil. Dan hasilnya 100% dari 30 orang merasa aplikasi ini memberikan umpan balik yang jelas. Gambar 4.87 menunjukkan persentase responden dalam bentuk diagram. Tabel 4.9 menunjukkan jumlah dan persentase responden.
4.5.8
Kesimpulan Evaluasi Application Web Bagi Customer Dari hasil evaluasi application web bagi customer yang melibatkan 30 orang responden, dapat diketahui bahwa seluruh responden merasa aplikasi ini mudah digunakan serta memberikan umpan balik yang jelas sebagai pemberitahuan dari tindakan yang dilakukan oleh customer pada saat mengambil nomor antrian telah berhasil dan mempermudah customer melakukan pengambilan nomor antrian di instansi.
243 4.5.9
Evaluasi Application Web Bagi Instansi Dengan Menggunakan Prinsip Eight Golden Rules Dengan mengikuti prinsip yang dikenal dengan Eight Golden Rules, maka interface akan mudah dimengerti, berikut ini adalah evaluasi application web bagi instansi dengan menggunakan prinsip tersebut:
1. Berusaha untuk konsisten Tampilan interface aplikasi web ini dapat dilihat bahwa sudah ada konsistensi antara halaman satu dengan yang lainnya dimana letak menu dan tampilan pada layar secara keseluruhan telah sama.
Gambar 4.90 Eight Golden Rules Perbandingan Halaman Yang Konsisten
2. Memungkinkan user menggunakan shortcuts. Pada halaman Home terdapat link yang dapat digunakan sebagai shortcuts untuk membuka antrian.
244
Gambar 4.91 Eight Golden Rules Memungkinkan User Menggunakan Shortcuts
3. Memberikan umpan balik yang informative Berikut ini merupakan umpan balik yang terjadi pada saat proses registrasi bagi Head Officer dan Customer service berhasil dilakukan. Umpan balik ini menampilkan informasi mengenai hasil data terhadap Customer Service dan Head Officer serta instansi yang sukses teregistrasi.
Gambar 4.92 Eight Golden Rules Memberikan Umpan Balik Yang Informative
245 4. Merancang dialogue yang memberikan penutupan Pada saat customer service selesai melakukan proses submit case problem, maka akan terdapat dialogue box yang memberitahukan bahwa proses tersebut merupakan kondisi akhir dari jalannya program.
Gambar 4.93 Eight Golden Rules Merancang Dialogue Yang Memberikan Penutupan
5. Memberikan
pencegahan
kesalahan
dan
penanganan
kesalahan sederhana Apabila customer service tidak sengaja menekan button submit sebelum seluruh data di-input, maka akan muncul tampilan yang mencegah data ter-input sebelum diisi dengan lengkap. Setelah muncul tampilan pencegahan, customer service dapat mengklik button”ok” untuk kembali ke layar submit case problem dan melengkapi data yang dibutuhkan.
246
Gambar 4.94 Eight Golden Rules Memberikan Pencegahan Kesalahan Dan Penanganan Kesalahan Sederhana
6. Memungkinkan pengembalian aksi yang mudah Terdapat button “Back to home” untuk kembali ke layar Home atau dengan menekan button “Back” pada browser.
Gambar 4.95 Eight Golden Rules Memungkinkan Pengembalian Aksi Yang Mudah
247 7. Mendukung locus of control Terdapat navigasi dimana user dapat bebas bernavigasi sesuka hati.
8. Mengurangi beban ingatan jangka pendek Menu yang terdapat pada aplikasi ini tidak banyak, maka customer service dapat mengingat menu yang terdapat di aplikasi ini dengan mudah
4.5.10 Evaluasi Kelebihan Dan Kekurangan Aplikasi Berdasarkan hasil yang telah kami dapat, didapat beberapa kekurangan dan kelebihan aplikasi yang kami buat. Berikut ini adalah kelebihan dan kekurangan:
Kelebihan: -
Aplikasi ini mudah digunakan.
-
Aplikasi ini dapat mempermudah proses pemesanan nomor antrian.
-
Lebih fleksibel tanpa harus datang ke instansi untuk mengambil nomor antrian.
-
Memberikan efisiensi waktu dalam mengantri di customer service suatu instansi
-
Memudahkan customer yang tidak mengetahui nomor untuk menghubungi customer service.
-
Mengurangi resiko nomor antrian customer terlewat.
248 Kekurangan: -
Terdapat kemungkinan low battery yang memungkinkan customer tidak dapat memantau nomor antrian menggunakan smartphone Android.
-
Smartphone harus terus terkoneksi dengan internet agar dapat mengakses aplikasi.
