D03108008-ta-Bab 3

26
41 BAB III METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM 3.1 Metodologi Penelitian 3.1.1 Bahan Penelitian Bahan penelitian yaitu berupa perangkat Kamera IP, perangkat mobile atau handphone dengan sistem operasi Android dan jaringan internet digunakan sebagai media transmisi streaming yang dilakukan pada ruangan laboratorium dan kebutuhan sistem dalam perancangan aplikasi mobile yang didukung dengan perangkat kamera IP. 3.1.2 Alat yang Dipergunakan 3.1.2.1 Alat Penelitian Alat penelitian yang digunakan dalam penelitian ini adalah Unified Modelling Language (UML). Diagram yang akan digunakan dalam pengembangan peranti lunak ini adalah use case diagram, sequence diagram dan class diagram. 3.1.2.2 Perangkat Keras Perangkat keras yang digunakan dalam penelitian ini adalah: a. Acer Aspire 4920 dengan spesifikasi prosesor Intel Centrino Core 2 Duo Processor T5750 (2.0 GHz, 667 MHz FSB, 2MB L2 cache), 14.1 WXGA Acer CrystalBrite LCD, Mobile Intel Graphics Media Accelerator X3100, RAM 1 GB, HDD 160 GB. b. Satu unit komputer yang digunakan untuk media penyimpanan histori pemantauan kamera IP, Acer Aspire M1641 dengan spesifikasi Intel Pentium Dual-Core Desktop Intel Pentium Dual-Core E220 (2.2GHz, 800MHz FSB, 1MB L2 Cache), Acer X163w - 16" Widescreen TFT LCD, RAM 1 GB DDR2 memory DIMM modules, HDD 160 GB - Serial ATA-150 - 5400 rpm. c. Dlink DCS-920 Series IP Camera. d. Samsung Galaxy P6200 Tab 7 plus.

Transcript of D03108008-ta-Bab 3

41

BAB III METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM

3.1 Metodologi Penelitian

3.1.1 Bahan Penelitian

Bahan penelitian yaitu berupa perangkat Kamera IP, perangkat mobile

atau handphone dengan sistem operasi Android dan jaringan internet digunakan

sebagai media transmisi streaming yang dilakukan pada ruangan laboratorium dan

kebutuhan sistem dalam perancangan aplikasi mobile yang didukung dengan

perangkat kamera IP.

3.1.2 Alat yang Dipergunakan

3.1.2.1 Alat Penelitian

Alat penelitian yang digunakan dalam penelitian ini adalah Unified

Modelling Language (UML). Diagram yang akan digunakan dalam

pengembangan peranti lunak ini adalah use case diagram, sequence diagram dan

class diagram.

3.1.2.2 Perangkat Keras

Perangkat keras yang digunakan dalam penelitian ini adalah:

a. Acer Aspire 4920 dengan spesifikasi prosesor Intel Centrino Core 2 Duo

Processor T5750 (2.0 GHz, 667 MHz FSB, 2MB L2 cache), 14.1 WXGA

Acer CrystalBrite LCD, Mobile Intel Graphics Media Accelerator X3100,

RAM 1 GB, HDD 160 GB.

b. Satu unit komputer yang digunakan untuk media penyimpanan histori

pemantauan kamera IP, Acer Aspire M1641 dengan spesifikasi Intel Pentium

Dual-Core Desktop Intel Pentium Dual-Core E220 (2.2GHz, 800MHz FSB,

1MB L2 Cache), Acer X163w - 16" Widescreen TFT LCD, RAM 1 GB

DDR2 memory DIMM modules, HDD 160 GB - Serial ATA-150 - 5400 rpm.

c. Dlink DCS-920 Series IP Camera.

d. Samsung Galaxy P6200 Tab 7 plus.

42

3.1.2.3 Perangkat Lunak

Perangkat lunak yang digunakan dalam penelitian ini adalah:

a. Adobe Photoshop CS3

b. Android emulator.

c. Android SDK.

d. D-Link D-ViewCam 2.03.

e. Eclipse 3.7 Indigo.

f. Plugin ADT (Android Development Tools).

g. Sistem Operasi Android 2.2 (Froyo).

h. StarUML

i. Sistem Operasi Windows XP Service Pack 2.

j. Stunnel 4.3.6

k. XAMPP 1.7.7

3.1.3 Metodologi Penelitian

Metode penelitian yang akan dilakukan antara lain yaitu:

a. Studi Literatur

Studi literatur yang digunakan untuk memahami materi-materi yang berkaitan

dari beberapa literatur.

b. Pengumpulan data

Pengumpulan data dilakukan untuk memperoleh informasi mengenai peranti

lunak yang telah ada sebelumnya, fitur apa yang akan ditambahkan ke peranti

lunak. Studi literatur dilakukan untuk memperoleh teori-teori pendukung serta

pengetahuan yang berhubungan dan berguna dalam pengembangan peranti

lunak.

c. Perancangan konseptual aplikasi yang akan dibangun

Metode perancangan aplikasi terdiri dari Unified Modelling Language (UML)

dengan use case diagram, sequence diagram dan class diagram untuk

memodelkan bentuk keseluruhan dari aplikasi.

d. Perancangan prototipe aplikasi

Perancangan prototipe aplikasi merupakan langkah ketiga dalam bentuk

aplikasi.

43

e. Pengujian aplikasi

Pengujian yang dilakukan terdiri dari tiga jenis yaitu :

1. Pengujian kompatibilitas aplikasi terhadap perangkat Android yang

digunakan yaitu kompatibilitas menjalankan aplikasi.

2. Pengujian live streaming dengan format Motion-JPEG. Pengujian

dilakukan dengan membandingkan streaming format MJPEG dan

streaming bukan dengan format MJPEG yang bertujuan membuktikan

salah satu karakteristik streaming dengan format MJPEG yaitu tidak

menguras memori sistem perangkat mobile saat melakukan, streaming

yang dilakukan pada jaringan lokal ini untuk melihat banyak frame (fps)

yang mempengaruhi kinerja memori.

3. Pengujian jumlah frame (fps) streaming dan penggunaan bandwidth pada

jaringan internet dan menggunakan aplikasi mobile Network Monitor

Mini untuk memantau penggunaan bandwidth dari setiap jumlah frame

yang mempengaruhi proses streaming yang dilakukan.

f. Analisis hasil pengujian.

Analisis pada hasil pengujian serta validasi dilakukan untuk mengetahui

karakteristik aplikasi yang dibangun dan mengidentifkasi apabila terdapat

ketidaksonsistenan sistem. Dari hasil analisis juga digunakan sebagai dasar

perbaikan.

g. Penarikan kesimpulan

Berdasarkan pengujian yang telah dilakukan maka kesimpulan dapat

dirumuskan apakah aplikasi yang dibangun mampu memberikan informasi

keadaan ruangan melalui streaming dengan format Motion-JPEG dari

pemantauan kamera IP dengan dukungan perangkat mobile menggunakan

platform Android.

44

3.2 Diagram Alir Penelitian

Langkah-langkah penelitian yang dilakukan dapat dijelaskan sebagai berikut

Gambar 3.1 Diagram alir penelitian

3.3 Perancangan Sistem

Dalam melakukan rancang bangun sistem terdapat beberapa tahapan, yaitu

sebagai berikut :

a. Perancangan Arsitektur Sistem

Pada perancangan arsitektur sistem meliputi gambaran umum proses kegiatan

yang berlangsung dalam sistem.

b. Perancangan Unified Modeling Language (UML)

Pada perancangan UML metode pemodelan secara visual sebagai sarana

yang memberikan standar penulisan sebuah sistem blue print, yang meliputi

konsep bisnis proses, penulisan kelas-kelas dalam bahasa program yang

45

spesifik, skema database, dan komponen - komponen yang diperlukan dalam

sistem software. Pada penelitan ini akan digunakan use case diagram, class

diagram dan sequence diagram

c. Perancangan Flowchart Sistem.

Tahapan perancangan sistem adalah bagan yang menunjukkan alur kerja atau

apa yang dikerjakan dalam sistem secara keseluruhan dan menjelaskan urutan

serta prosedur-prosedur yang ada pada sistem.

d. Perancangan Antar Muka Aplikasi

Tahapan perancangan antarmuka sistem yaitu perancangan struktur

antarmuka sistem serta perancangan layout dan komponen antarmuka sistem.

3.3.1 Perancangan Arsitektur Sistem

3.3.1.1 Perancangan Arsitektur Sistem Kamera IP

Sistem yang dibangun terdiri dari dua bagian, yaitu aplikasi mobile yang

dirancang yaitu menghasilkan streaming gambar dalam format MJPEG. Aplikasi

yang dibangun menampilkan kembali histori pemantauan dalam bentuk gambar

yang dapat diunduh dari sisi aplikasi mobile.

Sebuah (Personal Computer) PC desktop atau sebagai storage recording

yang memiliki peran dalam sisi mekanisme penyimpanan histori gambar dari hasil

pemantauan kamera IP dengan kemampuan motion detection dapat mengirimkan

notifikasi atau peringatan dalam bentuk email yang berisi alamat hasil capture

gambar pada perangkat mobile pada saat terjadi pergerakan objek dari hasil

pemantauan perangkat kamera IP.

Dalam penelitian ini penggunaan kamera IP merupakan kamera stand

alone yang memungkinkan pengguna dapat mengakses video dari manapun via

jaringan lokal maupun internet hanya dengan menggunakan web browser standar

dan melalui aplikasi yang dirancang. Teknologi yang ada pada kamera IP adalah

pengembangan dari kamera Close-Circuit Television (CCTV) biasa yang harus

menggunakan kabel coaxial dan digital video decoder untuk mengubah data

gambar dari digital analog agar bisa diakses melalui komputer. Keseluruhan

sistem yang ada pada kamera IP sudah digitalisasi dimana didalamnya sudah

46

terdapat processor untuk memproses gambar digital dan program web server

untuk menampilkannya ke web browser pengguna.

Gambar 3.2 Rancangan arsitektur sistem Kamera IP

3.3.1.2 Perancangan Arsitektur Streaming

Perangkat kamera IP yang digunakan sebagai sumber pemantauan yang

terjadi di lapangan membutuhkan suatu pengolah data ouput live streaming yang

baik dalam format motion-jpeg untuk dapat ditampilkan melalui perangkat mobile.

Koneksi antara perangkat mobile dan kamera IP menggunakan protokol Hypertext

Transfer Protocol (HTTP). Live streaming yang terjadi, pada dasarnya

menampilkan gambar yang diterima dari kamera IP secara kontinyu, pada

perangkat mobile melakukan request terus menerus ke kamera IP dan

menampilkan hasil pemantauan objek ruangan. Berikut adalah rancangan

arsitektur Streaming Motion-JPEG pada aplikasi mobile dapat dilihat pada

Gambar 3.3.

47

Gambar 3.3 Rancangan arsitektur streaming

3.3.1.3 Perancangan Arsitektur Penyimpanan Histori dan Pengiriman Email

Histori hasil pemantauan kamera IP disimpan pada sebuah Personal

Computer (PC) standar sebagai media penyimpanan dari hasil event detection

aplikasi desktop D-Link D-ViewCam 2.03, kemudian perancangan view histori

dirancang pada browser yang akan digunakan untuk melihat hasil capture gambar

dan rekaman video yang dihasilkan dari pemantauan ruangan. Berikut adalah

rancangan arsitektur penyimpanan dan view histoy pada storage recording dapat

dilihat pada Gambar 3.4

Gambar 3.4 Rancangan arsitektur pengiriman email

48

Histori dalam bentuk gambar dan video yang disimpan pada media

penyimpanan dikirim melalui email sebagai notifikasi dalam bentuk alamat

gambar dan video ke pengguna perangkat mobile. Pengiriman email pada sisi

localhost dilakukan setingan atau penambahan script pada file tertentu yang

terdapat modul yang digunakan. Kemudian dengan melakukan instalasi aplikasi

stunnel dan melakukan setingan pada file stunnel.conf.

Berikut konfigurasi atau penambahan baris script yang difungsikan untuk

mengirim email dari sisi localhost.

a. Php.ini

Melakukan penambahan atau menghilangkan karakter titik koma ; pada awal

baris, sehingga baris file php.ini yang berada pada C:\xampp\php\php.ini

menjadi aktif. Berikut perancangan konfigurasi file seperti Kode Program 3.1

di bawah ini.

Kode Program 3.1 Php.ini

Konfigurasi script hasil rancangan pada file php.ini dapat dilihat pada

Gambar 3.5

Gambar 3.5 Konfigurasi file php.ini

49

b. Sendmail.php

Melakukan penambahan script pada baris auth_username, auth_password,

dan force_sender yang disesuaikan pada penelitian ini menggunakan acoount

gmail. File sendmail.ini berada pada C:\xampp\sendmail\sendmail.php.

Berikut perancangan konfigurasi file seperti Kode Program 3.2 di bawah ini.

Kode Program 3.2 Sendmail.php

Konfigurasi script hasil perancangan pada sendmail.php dapat dilihat pada

Gambar 3.6

Gambar 3.6 Konfigurasi file sendmail.php c. Stunnel.conf

Aplikasi stunnel yang diinstal pada sisi localhost kemudian dilakukan

penambahan beberapa baris, file stunnel.conf berada pada C:\Program

Files\stunnel\stunnel.conf. Berikut perancangan konfigurasi file seperti

Kode Program 3.3 di bawah ini.

Kode Program 3.3 Stunnel.conf

50

Script hasil perancangan pada stunnel.conf dapat dilihat pada Gambar 3.7

Gambar 3.7 Konfigurasi file stunnel.conf 3.3.2 Perancangan Unified Modelling Language (UML)

3.3.2.1 Perancangan Use Case Diagram

Berikut adalah rancangan desain use case aplikasi pada Gambar 3.8

Gambar 3.8 Use case diagram aplikasi.

Tabel 3.1 Definis Use Case (UC) No. Use Case Deskripsi UC1 Melakukan streaming User melakukan streaming kamera IP. UC2 Memuat ulang

streaming User melakukan refresh atau muat ulang streaming apabila koneksi kamera IP terputus.

UC3 Mengunduh file User melakukan unduh gambar dari link unduh inbox email.

UC3 Melihat hasil unduh User melihat file gambar hasil pemantauan yang selesai diunduh.

51

Tabel 3.1 Definis Use Case (UC) (lanjutan) No. Use Case Deskripsi UC4 Mendaftarkan email User mendaftarkan email untuk

menerima link histori pemantauan kamera IP.

UC5 Keluar Aplikasi User memilih menu keluar dari aplikasi.

1. Skenario Use Case

a. Use Case Melakukan Streaming

Nama Use Case : Melakukan Streaming Skenario :

Tabel 3.2 Skenario Normal Melakukan Streaming Aksi Actor Reaksi Aplikasi

Skenario Normal 1. Memilih menu pertama

“Kamera IP”

2. Mengecek URL kamera IP 3. Menyiapkan streaming layout 4. Menerima response http kamera IP 5. Melakukan proses streaming 6. Menampilkan streaming layout 7. Memilih tombol “Back” 8. Menampilkan halaman utama aplikasi. 9. Memilih tombol “Keluar” 10. Menampilkan dialog box konfirmasi

keluar aplikasi.

Tabel 3.3 Skenario Alternatif Melakukan Streaming Aksi Actor Reaksi Sistem

Skenario Alternatif 1. Membuka inbox email 2. Menampilkan link unduh histori 3. Memilih link unduh 4. Menampilkan dialog box “Complete

action using” 5. Memilih aplikasi “in

Secure Cam”

6. Menampilkan dialog box “Konfirmasi melanjutkan pemantauan dengan Streaming”

7. Memilih tombol “Streaming”

8. Mengecek URL kamera IP

52

Tabel 3.3 Skenario Alternatif Melakukan Streaming (lanjutan) Aksi Actor Reaksi Sistem

Skenario Alternatif 9. Menyiapkan streaming layout 10. Menerima response http kamera IP 11. Melakukan proses streaming 12. Menampilkan streaming layout 12. Memilih tombol “Back” 13. Menampilkan halaman utama aplikasi. 14. Memilih tombol “Keluar” 15. Menampilkan dialog box konfirmasi

keluar aplikasi.

b. Use Case Memuat Ulang Streaming

Nama Use Case : Memuat Ulang Streaming Skenario :

Tabel 3.4 Skenario Normal Memuat Ulang Streaming Aksi Actor Reaksi Aplikasi

Skenario Normal 1. Memilih menu pertama

“Kamera IP”

2. Mengecek URL kamera IP 3. Menyiapkan streaming layout 4. Menerima response http kamera IP 5. Melakukan proses streaming 6. Menampilkan streaming layout 7. Error request client protocol 8. Layout streaming gagal ditampilkan 9. Memilih tombol “Muat

Ulang”

10. Menampilkan streaming layout 11. Memilih tombol “Back” 12. Menampilkan halaman utama aplikasi. 13. Memilih tombol “Keluar” 14. Menampilkan dialog box konfirmasi

keluar aplikasi.

c. Use Case Mengunduh File

Nama Use Case : Mengunduh File Skenario :

Tabel 3.5 Skenario Normal Mengunduh File Aksi Actor Reaksi Aplikasi

Skenario Normal 1. Memilih menu kedua

“Unduh Histori”

53

Tabel 3.5 Skenario Normal Mengunduh File (lanjutan) Aksi Actor Reaksi Aplikasi

Skenario Normal 2. Menampilkan halaman unduh dan view

image hasil unduh. 3. Memasukkan alamat unduh 4. Memilih tombol “unduh” 5. Menampilkan progressbar unduh 6. Menyimpan gambar pada direktori

“Histori Unduh Kamera IP” pada SDCard Perangkat mobile

7. Menampilkan gambar pada image view hasil unduh.

8. Memilih tombol “Back” 9. Menampilkan halaman utama aplikasi. 10. Memilih tombol “Keluar” 11. Menampilkan dialog box konfirmasi

keluar aplikasi.

Tabel 3.6 Skenario Alternatif Mengunduh File Aksi Actor Reaksi Aplikasi

Skenario Normal 1. Membuka inbox email 2. Menampilkan link unduh histori 3. Memilih link unduh 4. Menampilkan dialog box “Complete

action using” 5. Memilih aplikasi “in

Secure Cam”

6. Menampilkan dialog box “Konfirmasi melanjutkan pemantauan dengan Unduh Histori”

7. Memilih tombol “Unduh Histori”

8. Menampilkan progressbar unduh 9. Menyimpan gambar pada direktori

“Histori Unduh Kamera IP” pada SDCard Perangkat mobile

10. Menampilkan gambar pada image view hasil unduh.

10. Memilih tombol “Back” 11. Menampilkan halaman utama aplikasi. 12. Memilih tombol “Keluar” 13. Menampilkan dialog box konfirmasi

keluar aplikasi.

54

d. Use Case Melihat Hasil Unduh

Nama Use Case : Melihat Hasil Unduh Skenario :

Tabel 3.7 Skenario Normal Melihat Hasil Unduh Aksi Actor Reaksi Aplikasi

Skenario Normal 1. Memilih menu kedua

“Unduh Histori”

2. Menampilkan halaman unduh dan view image hasil unduh.

3. Memilih tombol “Histori Unduh”

4. Menampilkan list view gambar hasil unduh.

5. Memilih list gambar 6. Menampilkan gambar dalam bentuk

image box. 7. Memilih tombol “Back” 8. Menampilkan halaman utama aplikasi. 9. Memilih tombol “Keluar” 10. Menampilkan dialog box konfirmasi

keluar aplikasi.

e. Use Case Mendaftarkan Email

Nama Use Case : Mendaftarkan Email Skenario : Tabel 3.8 Skenario Normal Mendaftarkan Email

Aksi Actor Reaksi Aplikasi Skenario Normal 1. Memilih menu ketiga

“Daftar Email”

2. Menampilkan halaman daftar Email 3. Memasukkan Nama dan

Email

4. Memilih tombol “Daftar” 5. Nama dan Email disimpan 6. Memilih tombol “Back” 7. Menampilkan halaman utama aplikasi 8. Memilih tombol “Keluar” 9. Menampilkan dialog box konfirmasi

keluar aplikasi.

55

f. Use Case Keluar Aplikasi

Nama Use Case : Keluar Aplikasi

Skenario : Tabel 3.9 Skenario Normal Keluar Aplikasi

Aksi Actor Reaksi Aplikasi Skenario Normal 1. Memilih tombol “Keluar” 2. Menampilkan dialog box konfirmasi

keluar dari aplikasi 3. Memilih tombol Ya 4. Keluar

3.3.2.2 Perancangan Class Diagram Diagram kelas keseluruhan perancangan aplikasi ditunjukkan pada Gambar 3.9

berikut.

Gambar 3.9 Class diagram aplikasi

56

3.3.2.3 Perancangan Sequence Diagram

1. Use Case (UC-01) Melakukan Streaming

a. Identifikasi Kelas Analisis

Tabel 3.10 Identifikasi Kelas Analisis UC-01 No Nama Kelas Jenis Kelas

(Interface, Control, Entity) 1 MainActivity Interface 2 DeteksiObjek Interface 3 Mjpeg Interface 4 ProsesMjpegStreaming Control 5 TampilanMjpeg Entity

b. Sequence Diagram Melakukan Streaming Skenario Normal

Deskripsi : Pengguna melakukan pemantauan streaming

Gambar 3.10 Sequence diagram melakukan streaming skenario normal

c. Sequnce Diagram Skenario Alternatif

Deskripsi : Pengguna melakukan pemantauan streaming apabila membuka link

unduh dari inbox email.

57

Gambar 3.11 Sequence diagram melakukan streaming skenario alternatif

2. Use Case (UC-02) Memuat Ulang Streaming

a. Identifikasi Kelas Analisis

Tabel 3.11 Identifikasi Kelas Analisis UC-02

No Nama Kelas Jenis Kelas (Interface, Control, Entity)

1 MainActivity Interface 2 Mjpeg Interface 3 ProsesMjpegStreaming Control 3 TampilanMjpeg Entity

b. Sequence Diagram Skenario Normal

Deskripsi : Pengguna memuat ulang streaming saat request http error atau

koneksi terputus

58

Gambar 3.12 Sequence diagram memuat ulang streaming skenario normal

3. Use Case (UC-03) Mengunduh File

a. Identifikasi Kelas Analisis

Tabel 3.12 Identifikasi Kelas Analisis UC-03

No Nama Kelas Jenis Kelas (Interface)

1 MainActivity Interface 2 Unduh File Interface

b. Sequence Diagram Skenario Normal

Deskripsi : Pengguna mengunduh file hasil pemantauan kamera IP

Gambar 3.13 Sequence diagram mengunduh file skenario normal

59

c. Sequence Diagram Skenario Alternatif

Deskripsi : Pengguna mengunduh file hasil pemantauan kamera IP apabila

membuka link unduh pada inbox email

Gambar 3.14 Sequence diagram mengunduh file skenario alternatif

4. Use Case (UC-04) Melihat Hasil Unduh

a. Identifikasi Kelas Analisis

Tabel 3.13 Identifikasi Kelas Analisis UC-04

No Nama Kelas Jenis Kelas (Interface, Control)

1 MainActivity Interface 2 Unduh File Interface 3 LihatFile Interface

b. Sequence Diagram Skenario Normal

Deskripsi : Pengguna melihat file hasil unduh histori melalui halaman unduh file

dengan memilih tombol “Unduh Histori”.

60

Gambar 3.15 Sequence diagram melihat file hasil unduh histori skenario normal

4. Use Case (UC-05) Mendaftarkan Email

a. Identifikasi Kelas Analisis

Tabel 3.14 Identifikasi Kelas Analisis UC-05

No Nama Kelas Jenis Kelas (Interface, Control)

1 MainActivity Interface 2 DaftarEmail Interface 3 CustomHttpClient Control

b. Sequence Diagram Skenario Normal

Deskripsi : Pengguna mendaftarkan nama dan alamat email untuk menerima

pengiriman email dari sisi desktop sebagai notifikasi histori hasil

pemantauan kamera IP.

61

Gambar 3.16 Sequence diagram daftar email skenario normal

4. Use Case (UC-06) Keluar Aplikasi

a. Identifikasi Kelas Analisis

Tabel 3.15 Identifikasi Kelas Analisis UC-06

No Nama Kelas Jenis Kelas (Interface)

1 MainActivity Interface

b. Sequence Diagram Skenario Normal

Deskripsi : Pengguna mengakhiri semua aktifitas aplikasi dengan memilih

tombol keluar aplikasi.

Gambar 3.17 Sequence diagram keluar aplikasi skenario normal

62

3.3.3 Perancangan Flowchart View Histori dan Pengiriman Email

Histori pada storage recording dioptimalkan pada sisi desktop dengan

perancangan view histori pada browser untuk melihat semua histori dari

pemantauan kamera IP dan mengirimkan link unduh ke email pengguna perangkat

mobile.

Berikut adalah rancangan flowchart view histori dan pengiriman email

dapat dilihat pada Gambar 3.10

Gambar 3.18 Flowchart view histori pada browser

63

3.3.4 Perancangan Antar Muka Aplikasi

3.3.4.1 Perancangan Struktur Antarmuka Aplikasi

Aplikasi mobile bagi pengguna dibangun menggunakan Eclipse.

Antarmuka aplikasi ini dirancang dalam bentuk aktifitas-aktifitas yang ada.

Aktifitas tersebut diakses melalui menu pada aktifitas utama. Struktur yang akan

dirancang untuk pengguna yaitu sebagai berikut :

Gambar 3.19 Struktur antarmuka aplikasi bagi pengguna

Pada aktifitas ini pengguna akan diarahkan pada fitur-fitur aplikasi yang

telah ada dan fitur tambahan yang dibangun untuk optimalisasi aplikasi. Fitur-fitur

pada aktifitas utama ini adalah IP Kamera, Unduh Histori dan Daftar Email.

3.3.4.2 Perancangan Layout dan Komponen Antarmuka Aplikasi

a. Perancangan Aktifitas Pilihan Menu Utama

Pada aktifitas ini pengguna dihadapkan pada tampilan awal setelah aplikasi

dijalankan atau dieksekusi. Berikut adalah rancangan aktifitas pilihan menu

utama dapat dilihat pada Gambar 3.12.

64

Gambar 3.20 Rancangan tampilan halaman menu utama aplikasi.

Pada tampilan awal aplikasi ini pengguna akan dibawa pada tampilan

Kamera IP, Unduh Histori, dan Daftar Email. Pada pilihan menu Kamera IP,

user dibawa pada tampilan pemantaun langsung dari kamera IP yang

terpasang, Menu kedua yaitu Unduh Histori, pengguna dapat melakukan

unduh histori pemantauan dari sisi penyimpanan histori dalam bentuk

gambar dan video.

b. Perancangan Aktifitas Menu Kamera IP

Pada aktifitas kamera IP ini user dapat melakukan pemantauan langsung

streaming melalui sebuah layout yang dirancang untuk menjalankan proses

kompresi gambar untuk menjadi streaming berbentuk video yang disebut

Motion-JPEG (MJPEG). Berikut adalah rancangan layout aktifitas menu

Kamera IP dapat dilihat pada Gambar 3.13.

65

Gambar 3.21 Rancangan streaming layout

c. Perancangan Aktifitas Menu Unduh Histori

Perancangan aktifitas ini adalah user dapat melakukan unduh gambar dari

email yang dikirim dari sisi penyimpanan histori. Berikut adalah rancangan

layout aktifitas menu unduh histori dapat dilihat pada Gambar 3.14.

Gambar 3.22 Rancangan layout unduh histori

Pada halaman ini pengguna aplikasi juga dapat melakukan menyimpan

semua hasil unduh pada sdcard atau penyimpanan eksternal perangkat

mobile dan melihat kembali hasil penyimpanan melalui layout histori

unduh. Berikut adalah rancangan layout aktifitas histori unduh dapat

dilihat pada Gambar 3.15.

66

Gambar 3.23 Rancangan layout histori unduh

d. Perancangan Aktifitas Menu Daftar Email

Menu daftar email adalah halaman aktifitas yang dirancang untuk

mendukung pengiriman email, pengguna terlebih dahulu melakukan

pendaftaran email melalui aplikasi untuk menerima email berbentuk alamat

penyimpanan histori file dari pemantauan kamera IP. Berikut adalah

rancangan layout aktifitas menu daftar email dapat dilihat pada Gambar

3.16.

Gambar 3.24 Rancangan layout daftar email