BAB 3 ANALISIS DAN PERANCANGAN APLIKASI. misalnya EyeSpyFx. Aplikasi ini memiliki fitur untuk melakukan pemantauan keamanan

(1)

35

3.1 Analisis Sistem yang Sedang Berjalan

Sudah banyak aplikasi webcam monitoring yang telah beredar dipasaran saat ini, misalnya EyeSpyFx. Aplikasi ini memiliki fitur untuk melakukan pemantauan keamanan rumah melalui webcam, mendukung lebih dari satu webcam, serta mampu untuk pemantauan secara berkala. Fitur yang dimiliki oleh aplikasi ini terbilang cukup memuaskan user karena dapat diakses oleh sebuah komputer yang memiliki koneksi internet karena user dapat mengakses hasil pemantauan melalui sebuah komputer. Tetapi aplikasi ini akan sulit diakses oleh user saat user berada dalam perjalanan, terbilang cukup sulit dan merepotkan bila harus menggunakan komputer untuk mengakses hasil pemantauan saat user berada dalam kendaraan.

Banyak aplikasi sejenis yang memiliki masalah yang sama, sehingga user hanya dapat untuk memantau keamanan rumah mereka saat mereka berada di tempat kerja.

Bila website untuk pemantauan diakses oleh smartphone yang mereka miliki, maka hasilnya akan kurang memuaskan karena user interface yang dirancang untuk komputer akan sangat berbeda dengan user interface yang dirancang untuk perangkat seluler.

Padahal dari segi mobilitas, smartphone memiliki keunggulan dibandingkan notebook karena ukurannya yang kecil, serta dapat diakses dimanapun.

Permasalahan kembali muncul ketika terjadi suatu masalah keamanan seperti pencurian dan user saat itu tidak melakukan pemantauan keamanan, maka barang yang

(2)

dimiliki user akan hilang tanpa disadari user dalam jarak waktu yang cukup lama sampai user kembali mengecek hasil pemantauan. Tetapi aplikasi webcam monitoring yang kami buat dapat menjawab permasalahan tersebut dengan menawarkan fitur motion detection dan scheduling, sehingga user dapat melakukan pemantauan terhadap kejadian yang sedang terjadi.

Kami telah melakukan observasi sebelumnya kepada para pengusaha di wilayah Jakarta Barat sebanyak 6 orang. Pengusaha yang kami observasi adalah pengusaha yang telah menggunakan CCTV untuk memantau keamanan area usahanya pada malam hari dan saat pengusaha bepergian keluar kota. Kami melakukan wawancara kepada para pengusaha dan mereka menyatakan telah puas dengan kinerja CCTV yang ada saat ini.

Tetapi ada hal yang membuat mereka kurang puas, yakni saat mereka bepergian keluar kota mereka merasa kesulitan untuk melakukan pemantauan area usahanya karena hasil pemantauan dari CCTV yang mereka gunakan hanya dapat diakses melalui sebuah website. Para pengusaha menyatakan mereka kesulitan melakukan pemantauan saat mereka berada di perjalanan karena mereka harus menggunakan sebuah notebook.

3.2 Analisis Kuisioner

Berikut adalah data-data yang dikumpulkan dari kuisoner yang telah kami sebarkan. Total responden yang telah mengisi kuisoner yang kami sebarkan sebanyak 42 orang. Responden yang ada meliputi berbagai lingkup pekerjaan, diantaranya pengusaha, karyawan, ibu rumah tangga, dan mahasiswa.

(3)

Pertanyaan 1

Berapa frekuensi anda ketika berada dirumah?

Jawaban Jumlah Responden Persentase

1 – 6 jam 35 83%

6 – 12 jam 7 17%

Tabel 3.1 Tabel jawaban pertanyaan nomor 1

Gambar 3.1 jawaban pertanyaan nomor 1

(4)

Pertanyaan 2

Jika anda orang yang suka berpergian, apakah anda mementingkan keamanan tempat tinggal anda selama anda tidak berada dirumah?

Sangat penting 30 72%

Tidak terlalu penting 9 21%

Santai saja 3 7%

(5)

Pertanyaan 3

Apakah selama ini anda mengalami kesulitan memantau keamanan rumah selama tidak dirumah?

Ya 38 90%

Tidak 4 10%

(6)

Pertanyaan 4

Dengan cara apakah anda biasa nya memantau keadaan rumah tempat tinggal anda disaat anda berada diluar?

Alarm 15 36%

Telepon orang rumah 19 45%

Security kamera 5 12%

Dan lain-lain 3 7%

(7)

Pertanyaan 5

Sangat membantu kah jika anda dapat memantau keadaan suatu tempat tanpa anda harus berada ditempat tersebut?

Sangat membantu 40 95%

Tidak terlalu membantu 2 5%

(8)

Pertanyaan 6

Setujukah anda peran yang dahulu hanya dapat dilakukan oleh komputer PC atau laptop, sekarang bisa dikerjakan oleh Smartphone/mobile device?

Setuju 40 95%

Kurang setuju 2 5%

(9)

Pertanyaan 7

Setujukah anda kalau Smartphone di zaman sekarang sangat membantu manusia dalam kehidupan sehari-hari?

Setuju 26 62%

Kurang setuju 16 38%

Tidak setuju 0 0%

(10)

Pertanyaan 8

Apakah anda user Smartphone Android?

Ya 40 95%

Tidak 2 5%

(11)

Pertanyaan 9

Jika Smartphone berbasis Android yang anda gunakan menawarkan fitur dari security kamera , tertarik kah anda untuk menggunakannya?

Sangat tertarik 26 62%

Tidak tertarik 14 33%

Tidak juga 2 5%

(12)

Pertanyaan 10

Aplikasi webcam monitoring berbasis Android untuk security kamera, bermanfaat kah bagi anda?

Sangat bermanfaat 29 69%

Kurang bermanfaat 13 31%

Tidak bermanfaat 0 0%

(13)

Pertanyaan 11

Apakah dengan adanya security kamera yang dapat digunakan dan diakses dengan Smartphone, anda akan sangat membantu Anda mengetahui kondisi keamanan rumah di setiap saat?

Jawaban Jumlah Responden Persentase

Ya, sangat membantu 39 93%

Tidak membantu 3 7%

(14)

Pertanyaan 12

Apakah anda membutuhkan aplikasi yang membantu anda untuk memantau suatu keadaan ditempat tertentu hanya dengan mengakses nya menggunakan Smartphone ditangan anda?

Jawaban Jumlah Responden Persentase

Ya 39 93%

Tidak 3 7%

(15)

3.3 Identifikasi Masalah Dari Sistem yang Sedang Berjalan

1. Aplikasi pemantau keamanan yang ada sekarang ini tidak memberikan suatu peringatan ke user bila terjadi suatu kejanggalan yang terpantau oleh aplikasi pemantau keamanan.

2. User merasa kesulitan untuk melakukan pemantauan saat berada dalam perjalanan dan cukup tertarik bila pemantauan keamanan dapat diakses melalui perangkat seluler user.

3.4 Usulan Pemecahan Masalah

Dengan melihat hasil analisis dari permasalahan yang ada dan juga melihat dari hasil kuisoner yang telah dilakukan, terlihat bahwa masyarakat lebih banyak yang pulang kerumah dan mementingkan segi keamanan rumah mereka saat mereka tidak berada dirumah. Oleh karena itu, dibutuhkan suatu aplikasi yang dapat melakukan pemantauan rumah secara realtime. Aplikasi EyeCam dapat memenuhi kebutuhan tersebut dengan baik.

Dengan adanya aplikasi EyeCam ini, user dapat lebih tenang dalam melakukan pemantauan dan pemantauan tidak perlu dilakukan setiap saat karena suatu notifikasi akan diberikan pada perangkat selular user bila terjadi suatu gerakan yang terpantau oleh webcam secara langsung.

Aplikasi EyeCam ini tidak hanya dapat diakses melalui website, tetapi dapat juga diakses melalui smartphone berbasis Android yang dimiliki oleh user, sehingga user

(16)

dapat melakukan pemantauan kapanpun dan dimanapun melalui website ataupun melalui aplikasi yang telah dipasang pada smartphone berbasis Android.

3.5 Perancangan Aplikasi Webcam Monitoring

3.5.1 Perancangan Arsitektur Client/Server Aplikasi Webcam Monitoring

Perancangan arsitektur client/server untuk aplikasi webcam monitoring yang digunakan adalah arsitektur client/server berbasis 3-tier. Arsitektur client/server berbasis 3-tier terbagi menjadi 3 proses, yaitu:

1. Komputer client menjalankan graphical user interface (GUI) logic

2. Aplikasi server menjalankan business logic

3. Database atau legacy application

Arsitektur 3-tier disebut juga sebagai arsitektur fat server, karena memindahkan application logic ke server.

(17)

Gambar 3.13 Arsitektur 3-tier aplikasi webcam monitoring

Untuk arsitektur 3-tier sebanyak apapun client tidak bermasalah karena yang terkoneksi ke database hanya satu yaitu aplikasi server. Aplikasi webcam monitoring terdiri dari client side dan server side. Client side disini adalah smartphone Android yang fungsinya hanya menerima data hasil streaming yang dilakukan oleh server side. Server side disini adalah aplikasi webcam monitoring yang terkoneksi pada komputer server yang fungsinya melakukan streaming langsung dari webcam yang terkoneksi dengan komputer server.

(18)

3.5.2 Perancangan Use Case Diagram Admin

Gambar 3.14 Use Case Admin

(19)

Actors Admin

PreCondition Admin membuka aplikasi Webcam Monitoring pada telepon seluler.

Flow of Events Event dari admin

1. Melakukan login ke aplikasi

2. Memilih webcam yang terdeteksi oleh aplikasi

3. Melakukan video streaming pada Webcam

4. Melakukan motion detection

5. Merekam video streaming pada Webcam

6. Mengambil gambar pada saat streaming pada Webcam

7. Melakukan pengaturan aplikasi pada Webcam

PostCondition Admin telah memakai fitur video streaming, melihat video hasil streaming, merekam video streaming, dan mengambil gambar pada saat streaming pada Webcam.

Tabel 3.13 Berikut ini adalah deskripsi Use Case Diagram admin pada pemakaian aplikasi Webcam Monitoring.

(20)

3.5.3 Perancangan Use Case Diagram Mobile User

Gambar 3.15 Use Case Mobile User

(21)

Actors Mobile Users

PreCondition Pemakai awam membuka aplikasi Webcam Monitoring pada telepon seluler.

Flow of Events Mengakses fitur Webcam Monitoring:

1. Melakukan login ke aplikasi

2. Melakukan video streaming pada Webcam

3. Melihat video yang sudah dilakukan streaming sebelumnya

4. Merekam video streaming pada Webcam

5. Mengambil gambar pada saat streaming pada Webcam

PostCondition Pemakai awam telah memakai fitur video streaming, melihat video hasil streaming, merekam video streaming, dan mengambil gambar pada saat streaming pada Webcam.

Tabel 3.14 Berikut ini adalah deskripsi Use Case Diagram user pada pemakaian aplikasi Webcam Monitoring.

(22)

3.5.4 Perancangan Class Diagram

Gambar 3.16 Class Diagram WebcamMonitoring

(23)

3.5.5 Perancangan Entity Relationship Diagram (ERD)

Gambar 3.17 Entity Relationship Diagram Webcam Monitoring

(24)

3.5.6 Perancangan Sequence Diagram

3.5.6.1 Sequence Login Mobile User

Gambar 3.18 Sequence Diagram Login pada Mobile User

User menjalankan program pada android, user memasukkan username dan password yang sesuai dengan akun user. Setelah user mengklik tombol login, maka data user akan disimpan dan dilakukan autentifikasi dan diverifikasi.

(25)

3.5.6.2 Sequence Streaming Mobile User

Gambar 3.19 Sequence Diagram Streaming pada Mobile User

User melakukan streaming dari android. User mengklik tombol Streaming live kamera kemudian user dapat melihat secara langsung hasil dari streaming. User dapat merekam hasil streaming tersebut, user menekan tombol record kemudian hasil dari rekaman tersebut disimpan dan dikonfirmasi ke user. User juga dapat mengambil bagian gambar dari streaming dengan cara menekan tombol take picture, hasil dari pengambilan gambar disimpan dan dikonfirmasi ke user. Jika user ingin keluar dari program user dapat menekan tombol exit.

(26)

3.5.6.3 Sequence Record Mobile User

Gambar 3.20 Sequence Diagram Record pada Mobile User

User merekam hasil dari live streaming. User menekan tombol record, kemudian hasil dari rekaman tersebut disimpan berdasarkan no Id dari rekaman dan dikonfirmasi ke user.

(27)

3.5.6.4 Sequence Load From Library

Gambar 3.21 Sequence Diagram Melihat Hasil Record

User melihat hasil rekaman langsung dari android. User menekan tombol load from library untuk melihat hasil rekaman, setelah menekan tombol load, user akan masuk ke layar daftar hasil rekaman, user dapat memilih rekaman yang mana untuk dilihat. User menekan tombol play untuk memainkan video hasil rekaman yang sudah dipilih. Untuk kembali kemenu utama user dapat menekan tombol back.

(28)

3.5.6.5 Sequence Take Picture Mobile User

Gambar 3.22 Sequence Diagram Mengambil Gambar pada Mobile User

User dapat mengambil gambar dari video streaming dari android. User menekan tombol take picture, gambar didapat user dapat menyimpannya atau dapat menghapusnya. Kemudian gambar dikonfirmasi ke user.

(29)

3.5.6.6 Sequence Login Admin

Gambar 3.23 Sequence Diagram Login pada Admin

Admin menjalankan program pada komputer sebagai server. Admin memasukkan username dan password untuk user yang telah disetujui oleh admin. Setelah admin mengklik login, maka data user akan disimpan, kemudian diverifikasi oleh admin.

(30)

3.5.6.7 Sequence Streaming Admin

Gambar 3.24 Sequence Diagram Streaming pada Admin

Admin melakukan streaming dari komputer server. Streaming dijalankan dengan mengklik tombol Streaming live kamera, kemudian admin secara langsung streaming dari kamera yang ada pada laptop atau komputernya. Admin juga dapat merekam pada saat menjalankan proses streaming dengan mengklik tombol record. Admin juga dapat mengambil gambar pada saat streaming dengan mengklik tombol take picture. Untuk keluar dari program admin tinggal mengklik tombol exit.

(31)

3.5.6.8 Sequence Record Admin

Gambar 3.25 Sequence Diagram Record pada Admin

Admin dapat melakukan perintah record pada saat streaming. Admin menjalankan perintah record live streaming. Kemudian hasil rekaman dari streaming akan disimpan berdasarkan no record Id yang diberikan, setelah itu akan dikonfirmasi oleh admin.

(32)

3.5.6.9 Sequence Memilih Kamera yang Aktif

Gambar 3.26 Sequence Diagram Memilih Kamera Yang Aktif pada Admin

Admin dapat memilih dan memberikan hak privilege untuk kamera mana saja yang aktif. Admin menjalankan perintah list aktif kamera, kemudian akan muncul list kamera mana saja yang aktif, dan admin akan memilih dan menjalankan kamera tersebut.

(33)

3.5.6.10 Sequence Motion Detection

Gambar 3.27 Sequence Diagram Motion Detection

Admin melakukan koneksi agar terhubung dengan client. Admin menjalankan perintah open connection, kemudian start connection. Admin sudah terhubung dengan client, dan admin dapat mengakhiri koneksi dengan menjalankan perintah end connection.

(34)

3.5.6.11 Sequence Take Picture Admin

Gambar 3.28 Sequence Diagram Take Picture pada Admin

Admin dapat mengambil bagian gambar pada saat streaming. Admin menjalankan perintah take picture, kemudian gambar disimpan berdasarkan image Id. Admin juga dapat menghapus gambar dengan menjalankan perintah delete image.

(35)

3.5.6.12 Sequence Configuration

Gambar 3.29 Sequence Configuration pada Admin

Admin dapat mengatur aplikasi sesuai kebutuhan, admin dapat mengatur pengaturan file, pengaturan text, pengaturan streaming, pengaturan password, pengaturan penjadwalan, dan pengaturan startup.

(36)

3.5.7 Perancangan User Interface Aplikasi Admin

Saat user membuka program, akan muncul form sebagai berikut:

Gambar 3.27 Form tampilan Utama

Gambar 3.30 form utama pada Admin EyeCam

File Settings Window Settings

Enable

Enable File

Stream

Motion

Window Preview

(37)

Saat user memilih menu Camera, akan muncul tampilan:

Gambar 3.28 Form tampilan menu Camera

Gambar 3.31 Menu camera pada Admin

Menu Camera adalah menu yang berhubungan langsung dengan webcam yang ada pada komputer. Di dalam menu Camera ini terdiri dari tiga sub-menu, yakni Choose Camera, Detect Camera, dan Exit. Sub-menu Choose Camera berguna untuk memilih webcam yang ingin diaktifkan dan dilakukan streaming. Sub-menu Detect Camera untuk mengecek webcam yang dikenali oleh komputer. Sub-menu Exit berguna untuk keluar dari program.

EyeCam

File Settings Window

Enable Motion

Window Preview

Webcam (none) Enable File Enable Stream Enable Motion Image To Movie Exit

(38)

Saat user memilih menu Settings, akan muncul tampilan:

Gambar 3.32 Form tampilan menu Settings

Menu Settings berguna untuk melakukan berbagai pengaturan yang ada pada program.

Untuk melakukan pengaturan tersebut terletak pada sub-menu Configuration.

EyeCam

Enable

Enable File

Stream

Motion

Window Preview

Configuration

(39)

Saat user memilih menu Window, akan muncul tampilan:

Gambar 3.33 Form tampilan menu Window

Menu Window berguna untuk melihat, menangkap gambar, dan melakukan deteksi gerakan melalui form baru. Pada menu window, terdiri dari tiga sub-menu, yakni Preview Camera, Capture Image, dan Motion Detection.

EyeCam

Enable

Enable File

Stream

Motion

Window Preview

Preview Camera Capture Image Motion Detection

(40)

Saat user memilih menu Configuration, maka akan muncul tampilan:

Gambar 3.34 Form tampilan menu Configuration

Menu Configuration berisi berbagai pengaturan yang dapat dilakukan oleh user dalam aplikasi EyeCam. Menu Configuration terdiri dari berbagai sub-menu, yakni File, Text, Streaming, Startup, Password, dan Scheduler.

File Text Streaming Startup Password Scheduler Configuration

OK CANCEL

(41)

Saat user memilih menu File pada Configuration, maka akan muncul tampilan:

Gambar 3.35 Form tampilan menu Configuration bagian File

Menu File berguna untuk menyentukan tempat penyimpanan image hasil capture dari webcam dan kualitas dari image tersebut.

Save in: Browse

Quality of Image:

OK CANCEL

(42)

Saat user memilih menu Text pada Configuration, maka akan muncul tampilan:

Gambar 3.36 Form tampilan menu Configuration bagian Text

Menu text berguna untuk melakukan manipulasi terhadap text tanggal dan waktu yang akan tertera pada image hasil capture. Manipulasi text yang dapat dilakukan diantaranya mengubah warna text, mengubah ukuran text, dan mengubah jenis font.

OK CANCEL

Size : Type : Color :

Font :

(43)

Saat user memilih menu Streaming pada Configuration, maka akan muncul tampilan:

Gambar 3.37 Form tampilan menu Configuration bagian Streaming

User dapat memasukkan nomor port agar webcam dapat melakukan streaming secara langsung kewebsite. Kualitas dari image juga dapat ditentukan secara manual. Semakin rendah kualitas image, maka bandwitch yang digunakan untuk live streaming semakin kecil.

Input the port:

Quality of Image:

OK CANCEL

(44)

Saat user memilih menu Startup pada Configuration, maka akan muncul tampilan:

Gambar 3.38 Form tampilan menu Configuration bagian Startup

User dapat memilih agar fitur aplikasi EyeCam dapat berjalan secara otomatis waktu aplikasi dijalankan pertama kali. Fitur-fitur tersebut meliputi motion detection, streaming, recording, dan aplikasi langsung disembunyikan di trayicon saat pertama kali aplikasi dijalankan.

OK CANCEL

Start Motion Detection Start Streaming Start Recording Hide at Startup

(45)

Saat user memilih menu Password pada Configuration, maka akan muncul tampilan:

Gambar 3.39 Form tampilan menu Configuration bagian Password

User dapat menambah atau mengurangi account untuk mengakses aplikasi EyeCam.

Password telah dilakukan hashing MD5 sebelum ditampilkan.

File HTTP Streaming Startup Password Scheduler Configuration

Manage Username and Password

Username Password

Add Remove

OK CANCEL

(46)

Saat user memilih menu Scheduler pada Configuration, maka akan muncul tampilan:

Gambar 3.40 Form tampilan menu Configuration bagian Scheduler

User dapat memilih schedule untuk streaming, motion detection, maupun recording.

Bila waktu yang dipilih telah terdaftar dalam schedule, maka streaming, motion detection, dan recording dapat aktif secara otomatis.

File HTTP Streaming Startup Password Scheduler Configuration

Scheduler

Enable Scheduling

OK CANCEL

(47)

Saat user memilih menu Capture Image pada form utama, maka akan muncul tampilan:

Gambar 3.41 Form tampilan menu Capture Image

User dapat memilih button Capture bila ingin mengambil image dari hasil streaming webcam.

Webcam Streaming

capture

(48)

Saat user memilih tombol Capture pada menu Capture Image, maka akan muncul tampilan:

Gambar 3.42 Form tampilan menu Capture Image saat memilih tombol capture

User dapat memilih button Save untuk menyimpan image hasil capture dan memilih close bila image hasil capture tidak ingin disimpan.

Image Captured

save close

(49)

3.5.8 Perancangan User Interface Aplikasi Mobile User

Saat user membuka program, akan muncul form login sebagai berikut :

Gambar 3.43 Tampilan Form Login pada Client

User dapat memasukkan username dan password, kemudian memilih Login, atau User dapat keluar dari program dan memilih exit. Ketika user telah melakukan login, akan dimunculkan 4 buah pilihan. Pilihan Streaming from Webcam digunakan untuk melakukan webcam streaming terhadap webcam yang ada di komputer. Bila memilih Load from Library, User dapat melihat hasil record dari webcam streaming yang pernah dilakukan sebelumnya. Pilihan Scheduler digunakan untuk melakukan suatu penjadwalan streaming maupun recording secara periodik pada aplikasi EyeCam bagian server. Bila memilih logout, maka akan dimunculkan kembali form login dan user harus kembali login untuk dapat kembali ke form utama.

Username :

Password :

Login Exit

(50)

Gambar 3.44 Tampilan Form Utama pada Client

Ketika User memilih Load from Library, maka akan ditampilkan list hasil record. User dapat memilih list mana yang ingin dilihat, kemudian memilih tombol Play untuk memulai menjalankan videonya.

Streaming From Webcam

Load from Library

Logout

(51)

Gambar 3.45 Tampilan Form Load From Library pada Client

Ketika User memilih Streaming from Webcam, maka akan ditampilkan hasil streaming dari webcam yang ada di komputer. User dapat melakukan record terhadap Webcam Streaming dengan memilih Record, selain itu user juga dapat mengambil gambar dari Webcam dengan memilih Take Picture.

List

Play Back

(52)

Gambar 3.46 Tampilan Form Webcam Streaming pada Client

Bila User memilih untuk mengambil gambar dari Webcam, maka gambar tersebut akan dimunculkan dan User diberikan pilihan untuk menyimpan gambar tersebut dengan memilih Save atau kembali keform sebelumnya dengan memilih Cancel.

Webcam Streaming

Record Take Picture Exit

(53)

Gambar 3.47 Tampilan Form Image Capture pada Client

Bila User memilih untuk menyimpan gambar dari Webcam ke memory card, maka user dapat menekan button Save Image dan jika ingin kembali ke form sebelumnya maka user tinggal menekan button cancel.

Image

Save Image Cancel