BAB 3 ANALISIS DAN PERANCANGAN. sejenis. Analisis user dilakukan dengan cara menyebarkan kuesioner mengenai aplikasi

BAB 3 ANALISIS DAN PERANCANGAN

3.1. Analisis Aplikasi Analisis aplikasi dilakukan dengan melakukan analisis user dan analisis aplikasi sejenis. Analisis user dilakukan dengan cara menyebarkan kuesioner mengenai aplikasi yang bersangkutan kepada responden berdasarkan ruang lingkup dalam penelitian ini. Analisis aplikasi sejenis dilakukan dengan cara studi pustaka terhadap beberapa aplikasi terkenal yang memiliki kemiripan dalam fitur dan fungsionalitas.

3.1.1. Analisis User Analisis user dilakukan dengan membuat kuesioner dan menyebarkannya ke responden. Jumlah responden yang mengisi kuesioner dengan valid adalah 146 responden. Berikut adalah rincian pertanyaan dan hasil kuesioner yang disebarkan: • Berapakah usia anda saat ini? a. 17–23 tahun b. 24–35 tahun c. > 35 tahun

52

53

Gambar 3.1 Grafik hasil jawaban kuesioner pada pertanyaan demografi 1

Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden berusia antara 17–23 tahun.

• Jenis kelamin: a. Laki-laki b. Perempuan


54 Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden adalah laki-laki.

• Responden adalah: a. Dosen b. Asisten Lab c. Guru d. Pengajar/Instruktur Lainnya


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden adalah asisten lab.

1. Apa mayoritas ilmu yang anda ajarkan saat ini? a. Sains (Matematika/Statistika )

55 b. Ilmu Komputer (Sistem Informasi/Teknik Informatika ) c. Ekonomi (Akuntansi/Bisnis Manajemen ) d. Desain (Advertising/Animasi/Interior ) e. Teknik (Arsitektur/Teknik Industri/Teknik Komputer/Teknik Sipil ) f. Humaniora (Hukum/Psikologi/Sastra ) g. Komunikasi (Komunikasi Pemasaran/Manajemen Hotel ) h. Lainnya

Gambar 3.4 Grafik jawaban kuesioner pada pertanyaan nomor 1

Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden berasal

dari

pengajar

dalam

bidang

Ilmu

Komputer

Informasi/Teknik Informatika).

2. Berapa menit durasi anda mengajar efektif dalam 1 shift? a. 50 menit

(Sistem

56 b. 60 menit c. 75 menit d. 100 menit

Gambar 3.5 Grafik hasil jawaban kuesioner pada pertanyaan nomor 2

Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden mengajar selama 100 menit dalam satu shift. Catatan: durasi yang ditanyakan kepada responden merupakan durasi efektif yang digunakan oleh responden dalam 100 menit (1 shift) perkuliahan pada Binus University. Oleh karena itu, dari diagram diatas dapat disimpulkan bahwa tidak semua pengajar menggunakan waktu 100 menit penuh untuk mengajar dalam satu shift.

3. Apakah anda mengetahui adanya aplikasi “Smart Board”? a. Ya. Jika ya, sebutkan nama aplikasi tersebut ________ b. Tidak (ke no 5)

57


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden tidak mengetahui adanya aplikasi Smart Board.

4. Pernahkan anda mencoba aplikasi tersebut? a. Ya b. Tidak


58 Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden yang mengetahui tentang aplikasi Smart Board belum pernah menggunakan aplikasi tersebut.

5. Menurut anda, apabila ada aplikasi tersebut, fitur apa saja yang diperlukan (boleh lebih dari satu ) ? a. Pen b. Penghapus c. Highlighter (stabilo) d. Papan tulis virtual e. Perekaman layar/screen recording f. Lainnya


59 Berdasarkan

hasil

jawaban

pada

pertanyaan

kuesioner

yang

digambarkan dengan diagram diatas, maka dapat diketahui bahwa fitur yang paling diinginkan oleh para responden adalah fitur pen untuk menulis.

6. Dimana posisi penempatan aplikasi Smart Board di layar komputer yang anda inginkan? a. Kiri b. Kanan c. Bawah


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden menginginkan agar aplikasi Smart Board diletakkan di bagian bawah. Untuk posisi bagian atas tidak dimasukkan ke dalam pilihan karena jangkauan tangan setiap orang berbeda-beda, sehingga tidak semua orang bisa menggapai bagian atas dari papan tulis.

60 7. Untuk menulis dan mencoret, warna apa saja yang anda butuhkan (boleh pilih lebih dari satu)? a. Hitam b. Merah c. Hijau d. Biru e. Lainnya


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden memilih warna hitam sebagai warna yang paling dibutuhkan untuk menulis dan mencoret ketika menggunakan aplikasi Smart Board.

8. Bagaimana cara yang anda inginkan dalam memilih warna untuk menulis dan menggambar? a. Disediakan preset-preset warna pada nomor 7

61 b. Dengan tabel warna c. Gabungan dari keduanya


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden menginginkan metode pemilihan warna dengan disediakannya preset-preset warna beserta tabel warna di dalam aplikasi Smart Board.

9. Dengan adanya fitur free draw, apakah anda masih membutuhkan fitur untuk menggambar shape? a. Ya (ke no 10) b. Tidak (ke no 11)

62


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden tetap membutuhkan fitur untuk menggambar shape, walaupun sudah tersedia fitur free draw.

10. Shape apa saja yang anda butuhkan ? a. Garis b. Persegi/Persegi Panjang c. Lingkaran d. Segitiga e. Other

63


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden memilih lingkaran sebagai shape yang ingin ditambahkan dalam fitur draw shape.

11. Apakah anda membutuhkan fitur undo dan redo ketika menggunakan aplikasi Smart Board? a. Ya b. Tidak

64


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden membutuhkan fitur undo dan redo ketika menggunakan aplikasi Smart Board.

12. Untuk perekaman video, menurut anda berapakah kualitas minimal yang masih dapat ditonton oleh mahasiswa? a. 240p (dimensi 427px x 240px, kisaran ukuran video 2641 KB/menit) b. 360p (dimensi 640px x 360px, kisaran ukuran video 4476 KB/menit) c. 480p (dimensi 854px x 480px, kisaran ukuran video 6354 KB/menit)

65


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden memilih perekaman video dengan kualitas 480p.

13. Apakah anda menginginkan aplikasi Smart Board ini dapat berjalan tanpa perlu meng-install aplikasi pendukung lainnya ? a. Ya b. Tidak

66


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden menginginkan aplikasi Smart Board dapat berjalan tanpa perlu meng-install aplikasi pendukung lainnya (berjalan native).

14. Apakah anda tertarik untuk menggunakan aplikasi ini pada saat mengajar? a. Ya b. Tidak

67


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden tertarik untuk menggunakan aplikasi Smart Board pada saat mengajar.

15. Untuk mendistribusikan hasil rekaman video ke mahasiswa, cara apa yang lebih anda sukai? a. Di-copy pada storage (media penyimpanan) khusus agar bisa dicopy (hanya pada saat perkuliahan) oleh mahasiswa (misal: di ruang kelas) b. Di-upload pada storage umum agar bisa di-download oleh mahasiswa (misal: situs universitas / sekolah) c. Keduanya

68


Berdasarkan hasil jawaban dari pertanyaan kuesioner yang digambarkan dengan diagram diatas, maka dapat diketahui bahwa mayoritas responden lebih memilih untuk mendistribusikan video dengan cara meng-upload pada storage khusus (misalnya NAS) dan storage umum (seperti website universitas/sekolah).

3.1.2. Analisis Aplikasi Sejenis Pemilihan aplikasi sejenis yang digunakan sebagai perbandingan diambil dari website smartboardreviews.com. Website tersebut melakukan perbandingan dan review terhadap aplikasi-aplikasi Smart Board yang terbaik dan dikenal oleh masyarakat. Berikut ini adalah ulasan untuk setiap aplikasi Smart Board yang sejenis:

69 3.1.2.1. eBeam Edge eBeam Edge adalah sebuah aplikasi Smart Board yang dibuat oleh Luidia Inc. Pada dasarnya, aplikasi ini terbagi menjadi dua bagian, yaitu sebuah receiver dan sebuah stylus khusus. Receiver digunakan untuk mendeteksi pergerakan stylus sebagai pengganti whiteboard. Sedangkan, stylus digunakan sebagai pengganti mouse. Sebelum menggunakan eBeam Edge, user harus meng-install driver receiver dan stylus terlebih dahulu agar bisa berinteraksi dengan layar.

Gambar 3.19 Bentuk stylus dan receiver eBeam Edge (Sumber: http://av.loyola.com/products/presentation/images/ebeam-edge_lg.jpg)

Gambar 3.20 Cara kerja eBeam Edge (Sumber: http://www.smartboardsreviews.com/wp-content/ uploads/2009/12/ebeam-edge-architecture.jpg)

70 Stylus

Receiver

Toolbox Gambar 3.21 Demo eBeam Edge (Sumber: http://www.wired.com/reviews/wp-content/uploads/2012/05/ebeam2.jpg)

Receiver biasanya dipasang di bagian kanan/kiri dari permukaan yang akan digunakan sebagai layar, kemudian disambungkan dengan sebuah kabel USB ke komputer/laptop. Setelah itu, akan muncul notifikasi untuk melakukan kalibrasi terlebih dahulu, yaitu dengan cara menunjukkan stylus ke sembilan titik pada permukaan yang akan digunakan sebagai layar. Kesembilan titik akan ditentukan secara otomatis oleh system. Karena hanya menggunakan stylus dan receiver, eBeam Edge menjadi salah satu Smart Board dengan tingkat portability yang tinggi sehingga memungkinkan bagi user untuk melakukan presentasi menggunakan eBeam Edge di tempat yang berbeda-beda dengan mudah.

71 3.1.2.2. Interactive Xi Bar Interactive Xi Bar adalah sebuah aplikasi Smart Board yang dibuat oleh Mimio. Pada dasarnya, aplikasi ini memiliki sebuah stylus khusus beserta sebuah sensor untuk menangkap pergerakan dan lokasi stylus pada papan tulis virtual, yang kemudian akan diterjemahkan berupa input ke komputer.

Gambar 3.22 Stylus dan sensor Interactive Xi Bar (Sumber: http://www.vivanotion.com/ourproducts/images/mimio_interactive.gif)

Sensor

Stylus

Canvas Gambar 3.23 Penggunaan Interactive Xi Bar pada ruang kelas (Sumber: http://s2.hubimg.com/u/3212553_f520.jpg)

72 Pada sensor Interactive Xi Bar, terdapat lima buah tombol untuk mengganti konfigurasi ketika menggunakan Interactive Xi Bar, yaitu interactive mode, tool pallette, screen mark-up, dan presentation effects. Stylus dapat berfungsi sebagai pengganti mouse dan memiliki tombol untuk mengakses beberapa fungsi mouse pada umumnya, seperti left click, right click, dan operasi drag ‘n drop.

3.1.2.3. ActivBoard 378 ActivBoard 378 adalah Smart Board yang dibuat oleh Promethean. Berbeda dengan Interactive Xi Bar dan eBeam Edge yang menggunakan sensor dan stylus sehingga mempunyai tingkat portability yang tinggi, ActivBoard 378 merupakan salah satu Smart Board yang memiliki layar sendiri sehingga tidak bergantung kepada proyektor. ActivBoard 378 memiliki layar sebesar 78 inch yang pada permukaan layarnya memiliki medan electromagnetic, sehingga terlihat seperti tablet raksasa. Selain pada permukaan layar, stylus dari ActivBoard 378 juga memiliki magnet di bagian ujungnya.

73

Gambar 3.24 Tampilan ActivBoard 378 (Sumber: http://www.reflectionsav.com.au/Tempo/versions/v_rav_01/ images/product_gallery/promethean/promethean_pr-iwbabd378pro-ad-e_p1_xl.jpg)

Gambar 3.25 Stylus ActivBoard 378 (Sumber: http://vic.ucxs.net/image_upload/ActivArena-1.png)

74 Speaker

Proyektor

Canvas Toolbox

Gambar 3.26 ActivBoard 378 dan alat-alat yang digunakan (Sumber: http://www.schoollibraryjournal.com/articles/ images/SLJ/20100301/slj1003_Tech_TD.jpg)

ActivBoard 378 juga sudah mendukung fitur video recording sehingga kegiatan presentasi dapat di-review kembali. Promethean juga menyediakan sebuah website yang

bernama PrometheanPlanet dengan

anggota yang sudah mencapai lebih dari 400.000. Di website tersebut user dapat mencari, men-download, dan saling berbagi ribuan pembelajaran maupun materi dengan para pengajar dari berbagai belahan dunia. Disamping itu, terdapat juga sebuah plug-in browser yang bernama

75 ActivSoftware yang juga berisi ribuan gambar, template, dan berbagai tools multimedia yang dapat membantu presentasi.

3.1.2.4. SMARTBoard 680 SMARTBoard 680 adalah Smart Board yang dibuat oleh SMART Technologies, sebuah perusahaan Amerika yang pertama kali mempelopori penggunaan teknologi Smart Board. SMARTBoard 680 memiliki layar sebesar 77 inch yang sudah mengadopsi fitur touch screen. Dalam paket pembelian SMARTBoard 680, user akan mendapatkan empat buah stylus untuk menulis dan menggambar dengan warna yang berbeda-beda, sebuah stylus yang berfungsi sebagai penghapus, dan sebuah proyektor SMART UF65 yang sudah terintegrasi penuh dengan SMARTBoard 680.

Proyektor SMART UF65

Canvas

Pen dan Eraser

Gambar 3.27 SMARTBoard 680 (Sumber: http://www.schoolsvision.co.uk/media/catalog/product/ cache/1/image/5e06319eda06f020e43594a9c230972d/s/m/smartboard_1.jpg)

76

Gambar 3.28 Tampilan SMARTBoard 680 ketika digunakan (Sumber: http://smarttech.com/us/Solutions/Government+Solutions/ Products+for+government/Interactive+whiteboards+and+displays/ SMART+Board+interactive+whiteboards/~/media/Images/Versioned/Prd/SBiw/600i4/N on-Education/prd_sb685i4_iso_businessProjections.ashx?w=338&h=317&as=1)

Gambar 3.29 Stylus dan eraser SMARTBoard 680 (Sumber: http://www.rm.com/_RMVirtual/Media/ Images/sb680_P_RGB_H_0011_L.jpg)

77

Gambar 3.30 SMART UF65 (Sumber: http://www.byfarthecheapest.com/product_images/q/ 732/UF65__49080_zoom.gif)

Selain itu, SMARTBoard 680 memiliki beberapa fitur, seperti penyimpanan catatan/gambar dari layar dalam format PDF, JPG, dan PPT. Adanya fitur “SMART Recorder” juga memungkinkan user untuk menyimpan semua aktivitas presentasi dalam format video agar dapat direview kembali.

Tabel 3.1 Perbandingan Aplikasi Sejenis Poin Evaluasi Harga Perlu installasi Perlu kalibrasi Touchscreen Free Draw Highlighter Draw Shape Eraser

eBeam Edge $649 Ya Ya Tidak Ya Ya Ya Ya

Interactive Xi Bar $729 Ya Ya Tidak Ya Ya Ya Ya

Activ Board 378 $1795 Ya Ya Ya Ya Ya Ya Ya

SMART board 680 $1999 Ya Ya Ya Ya Ya Ya Ya

78 eBeam Edge

Interactive Xi Bar

Activ Board 378

SMART board 680

Tidak

Ya

Ya

Ya

Tidak Ya Ya

Tidak Ya Ya

Tidak Ya Ya

Ya Ya Ya

Ya

Ya

Ya

Tidak

Tidak

Tidak

Ya

Ya

Device tambahan

Sensor dan stylus

Sensor dan stylus

Papan tulis khusus dan stylus

Papan tulis khusus dan stylus

Teknologi

Sensor dan Stylus

Sensor dan Stylus

Touchsceen

Touchscreen

Poin Evaluasi Audio Video Recording Snapshot Undo Redo Multiple Pages Collaborative Learning Memerlukan permukaan khusus

3.2. Analisis dan Solusi Kebutuhan Berdasarkan analisis user dan analisis aplikasi sejenis yang telah dilakukan, maka dapat diperoleh beberapa analisa kebutuhan sebagai berikut: 1. 91% responden merupakan asisten lab. 2. 84% responden menggunakan waktu efektif selama 100 menit untuk mengajar. 3. 92% responden tidak mengetahui adanya aplikasi Smart Board. 4. 92% responden menginginkan fitur pen pada aplikasi Smart Board. 5. 87% responden menginginkan fitur penghapus untuk aplikasi Smart Board. 6. 87% responden menginginkan fitur highlighter untuk aplikasi Smart Board. 7. 83% responden menginginkan fitur papan tulis virtual untuk aplikasi Smart Board. 8. 72% responden menginginkan fitur screen recording untuk aplikasi Smart Board.

79 9. 51% responden menginginkan aplikasi Smart Board ditempatkan dibagian bawah. 10. 94% responden memilih warna hitam sebagai warna yang paling dibutuhkan untuk menggambar dan menulis. 11. 66% responden menginginkan tersedianya preset-preset warna dan tabel warna untuk memilih warna. 12. 79% responden menginginkan fitur draw shape walaupun responden dapat menggambar dengan bebas. 13. 96% responden memilih shape lingkaran sebagai jenis shape yang paling dibutuhkan. 14. 99% responden menginginkan fitur undo dan redo ketika menggunakan aplikasi Smart Board. 15. 57% responden memilih kualitas 480p sebagai kualitas resolusi perekaman layar. 16. 95% responden menginginkan aplikasi Smart Board bisa berjalan sendiri (native) tanpa harus meng-install aplikasi pendukung lainnya. 17. 69% responden memilih metode distribusi video dengan meng-upload video ke storage khusus (misalnya NAS) dan meng-copy video ke storage umum (seperti website universitas/sekolah).

Dari hasil analisis user dan aplikasi sejenis diatas, maka dapat dirumuskan solusi kebutuhan sebagai berikut: 1. Membuat sebuah aplikasi yang dapat membantu pembelajaran agar menjadi lebih interaktif dengan uji coba di laboratorium Software Binus University.

80 2. Menghitung estimasi ukuran file maksimal yang dapat dihasilkan pada saat perekaman layar. 3. Membantu meningkatkan pengetahuan user tentang teknologi Smart Board. 4. Membuat fitur pen untuk mencatat/menggambar pada aplikasi Smart Board. 5. Membuat fitur eraser untuk menghapus gambar/catatan yang telah ditulis pada aplikasi Smart Board. 6. Membuat fitur highlighter untuk menandai catatan yang penting pada aplikasi Smart Board. 7. Membuat fitur papan tulis virtual sebagai canvas untuk mencoret/menggambar pada aplikasi Smart Board. 8. Membuat fitur screen recoding untuk merekam materi yang dibawakan pengajar pada aplikasi Smart Board. 9. Menempatkan aplikasi Smart Board di bagian bawah. 10. Menjadikan warna hitam sebagai warna default dalam pemilihan warna pada aplikasi Smart Board. 11. Menyediakan preset-preset warna dan tabel warna dalam pemilihan warna pada aplikasi Smart Board. 12. Membuat fitur draw shape untuk menggambar bangun ruang pada aplikasi Smart Board. 13. Menjadikan shape lingkaran sebagai jenis shape default pada aplikasi Smart Board. 14. Membuat fitur undo dan redo pada aplikasi Smart Board, sehingga user bisa kembali mengoreksi hasil pekerjaannya.

81 15. Menjadikan kualitas 480p sebagai kualitas default yang digunakan dalam fitur perekaman layar pada aplikasi Smart Board. 16. Membuat aplikasi Smart Board dapat berjalan secara native pada komputer tanpa harus meng-install aplikasi tambahan. 17. Memberikan saran/masukan kepada pihak laboratorium Software Binus University untuk menyediakan storage khusus dan storage umum sebagai media penyaluran hasil perekaman layar dan snapshot.

Tabel 3.2 Analisis dan solusi kebutuhan No.

1.

2.

3.

4.

Analisis Kebutuhan 91% responden merupakan asisten lab. 84% responden menggunakan waktu efektif selama 100 menit untuk mengajar. 92% responden tidak mengetahui adanya aplikasi Smart Board. 92% responden menginginkan fitur pen pada aplikasi Smart Board.

5.

87% responden menginginkan fitur penghapus untuk aplikasi Smart Board.

6.

87% responden menginginkan fitur highlighter untuk aplikasi Smart Board.

7.

83% responden menginginkan fitur papan tulis virtual untuk aplikasi Smart Board.

8.

72% responden menginginkan fitur screen recording untuk

Solusi Kebutuhan Membuat sebuah aplikasi yang dapat membantu pembelajaran agar menjadi lebih interaktif dengan uji coba di laboratorium Software Binus University. Menghitung estimasi ukuran file maksimal yang dapat dihasilkan pada saat perekaman layar. Membantu meningkatkan pengetahuan user tentang teknologi Smart Board. Membuat fitur pen untuk mencatat/menggambar pada aplikasi Smart Board. Membuat fitur eraser untuk menghapus gambar/catatan yang telah ditulis pada aplikasi Smart Board. Membuat fitur highlighter untuk menandai catatan yang penting pada aplikasi Smart Board. Membuat fitur papan tulis virtual sebagai canvas untuk mencoret/menggambar pada aplikasi Smart Board. Membuat fitur screen recoding untuk merekam materi yang

82 No.

9.

10.

11.

12.

13.

14.

15.

16.

17.

Analisis Kebutuhan aplikasi Smart Board. 51% responden menginginkan aplikasi Smart Board ditempatkan dibagian bawah. 94% responden memilih warna hitam sebagai warna yang paling dibutuhkan untuk menggambar dan menulis. 66% responden menginginkan tersedianya preset-preset warna dan tabel warna untuk memilih warna. 79% responden menginginkan fitur draw shape walaupun responden dapat menggambar dengan bebas. 96% responden memilih shape lingkaran sebagai jenis shape yang paling dibutuhkan. 99% responden menginginkan fitur undo dan redo ketika menggunakan aplikasi Smart Board. 57% responden memilih kualitas 480p sebagai kualitas resolusi perekaman layar. 95% responden menginginkan aplikasi Smart Board bisa berjalan sendiri (native) tanpa harus meng-install aplikasi pendukung lainnya. 69% responden memilih metode distribusi video dengan meng-upload video ke storage khusus (misalnya NAS) dan meng-copy video ke storage umum (seperti website universitas/sekolah).

Solusi Kebutuhan dibawakan pengajar pada aplikasi Smart Board. Menempatkan aplikasi Smart Board di bagian bawah. Menjadikan warna hitam sebagai warna default dalam pemilihan warna pada aplikasi Smart Board. Menyediakan preset-preset warna dan tabel warna dalam pemilihan warna pada aplikasi Smart Board. Membuat fitur draw shape untuk menggambar bangun ruang pada aplikasi Smart Board. Menjadikan shape lingkaran sebagai jenis shape default pada aplikasi Smart Board. Membuat fitur undo dan redo pada aplikasi Smart Board, sehingga user bisa kembali mengoreksi hasil pekerjaannya. Menjadikan kualitas 480p sebagai kualitas default yang digunakan dalam fitur perekaman layar pada aplikasi Smart Board. Membuat aplikasi Smart Board dapat berjalan secara native pada komputer tanpa harus menginstall aplikasi tambahan. Memberikan saran/masukan kepada pihak laboratorium Software Binus University untuk menyediakan storage khusus dan storage umum sebagai media penyaluran hasil perekaman layar dan snapshot.

83 3.3. Perancangan Aplikasi Berikut ini adalah perancangan aplikasi “Bee Board” berdasarkan solusi-solusi dari hasil yang didapatkan dalam analisis user dan analisis aplikasi sejenis.

3.3.1. Deskripsi Aplikasi Deskripsi aplikasi berisi tentang gambaran umum tentang aplikasi “Bee Board”. Berikut ini adalah deskripsi aplikasi “Bee Board”.

3.3.1.1. Informasi Umum Smart Board adalah sebuah teknologi yang memungkinkan user untuk mengubah display dari sebuah proyektor pada satu bidang menjadi sebuah papan tulis pintar, dimana semua input yang dilakukan oleh user, baik itu menggunakan stylus khusus maupun touch screen, akan dikenali sebagai input langsung ke komputer, sehingga user bisa menggambar, menulis notes, bahkan beberapa Smart Board dapat menggerakan mouse langsung dari papan tulis virtual yang diproyeksikan oleh proyektor. Saat ini, di pasaran telah beredar bermacam-macam Smart Board yang dibuat oleh berbagai macam vendor yang berbeda dengan spesifikasi, kelebihan, dan kekurangan yang bermacam-macam. Ada beberapa tipe Smart Board yang hanya menggunakan sensor dan stylus, sehingga proses instalasi aplikasi menjadi lebih mudah dan Smart Board dapat dengan mudah dipindahkan. Selain itu, terdapat juga Smart Board yang sudah mendukung native touch screen, sehingga secara garis besar, lebih responsif

84 daripada Smart Board yang masih mengandalkan sensor dan stylus, namun tentu saja dengan kekurangan tidak portable dan biaya yang sangat mahal.

Gambar 3.31 Smart Board yang menggunakan teknologi sensor dan stylus (Sumber: http://www.vivanotion.com/ourproducts/images/mimio_interactive.gif)

Gambar 3.32 Smart Board yang menggunakan teknologi touch screen (Sumber: http://www.aveducacion.com/326-thickbox/smart-board-sb-680-.jpg)

Aplikasi “Bee Board” ini dirancang dengan menggunakan C++ sebagai bahasa pemrogramannya dan Qt sebagai GUI framework, beserta

85 WiiMote sebagai sensor pembaca dan LED khusus untuk mengirim posisi dari stylus yang akan digunakan sebagai input untuk “Bee Board”.

3.3.1.2. Konsep Dasar Konsep dasar dari aplikasi Smart Board adalah, membuat sebuah Interactive Whiteboard, yaitu memindahkan fungsi PC/laptop ke board atau layar. Apabila pada komputer/laptop terdapat display dan mouse, maka teknologi Smart Board dapat membuat semua fungsi tersebut menjadi satu kesatuan sekaligus. Dalam hal ini, dimana sebuah stylus khusus, atau jari user akan menjadi mouse dan permukaan display akan menjadi monitor, sehingga semua input user yang terjadi pada permukaan display, akan menjadi input pula pada komputer/laptop, sehingga seolah-olah sedang menggunakan mouse pada komputer/laptop. Selain kemampuannya untuk menjadi Interactive Whiteboard, “Smart Board” juga memiliki kemampuan untuk recording (merekam), dimana semua aktivitas yang sedang aktif pada layar komputer/laptop dapat disimpan kedalam sebuah video/gambar, sehingga user dapat me-review kembali presentasi atau pengajaran yang telah dilakukan dengan menggunakan Smart Board.

86

3.3.1.3. Key Feature Dalam aplikasi “Bee Board”, terdapat beberapa fitur utama yaitu: 1. Canvas Dalam aplikasi “Bee Board”, canvas adalah sebuah papan tulis virtual yang digunakan sebagai tempat menulis atau menggambar. Luas canvas ditentukan oleh seberapa besar luas layar monitor komputer yang menjalankan aplikasi “Bee Board”. 2. Pen Dalam aplikasi “Bee Board”, pen adalah sebuah fitur yang digunakan untuk menulis dan menggambar pada canvas “Bee Board”. Pen merupakan alat tulis utama dari canvas dan berfungsi seperti spidol pada whiteboard atau kapur pada blackboard.

3. Eraser Dalam aplikasi “Bee Board”, eraser adalah sebuah fitur yang digunakan untuk menghapus tulisan atau gambar yang pernah dibuat pada canvas “Bee Board” yang sedang aktif. Eraser berfungsi seperti penghapus pada whiteboard atau blackboard pada umumnya

4. Snapshot Dalam aplikasi “Bee Board”, snapshot adalah sebuah fitur yang digunakan untuk melakukan pengambilan gambar. Jenis

87 pengambilan gambar akan dikelompokan menjadi dua jenis. Yang pertama, pengambilan gambar gabungan antara latar belakang canvas dan canvas itu sendiri. Dan yang kedua, pengambilan gambar canvas saja. File hasil snapshot akan disimpan dalam format PNG. Untuk memudahkan user, seluruh hasil snapshot dapat digabungkan menjadi satu buah file dalam format PDF.

5. Audio Video Recorder Dalam aplikasi “Bee Board”, audio video recorder adalah sebuah fitur yang digunakan untuk merekam layar komputer yang digunakan untuk menjalankan aplikasi beserta dengan suara yang diucapkan oleh user melalui sebuah audio input device yang terhubung ke komputer.

3.3.2. Perancangan XML XML digunakan untuk menyimpan seluruh konfigurasi pada aplikasi “Bee Board”. Perancangan XML dimulai dengan menentukan atribut-atribut yang akan di simpan oleh aplikasi “Bee Board”. Dari atribut-atribut yang sudah ditentukan, dibuat tree yang digunakan untuk menggambarkan file XML secara visual. Berikut ini adalah perancangan XML yang digambarkan dengan tree:

88

Gambar 3.33 Perancangan XML dalam bentuk tree

Dari hasil tree yang sudah digambarkan, dirancang file XML dalam bentuk teks. Berikut ini adalah contoh hasil perancangan XML yang digambarkan dengan teks: default 480p <saveLocation>D:\ 10 <wiimote> <x>882 569 <x>328 469

89 <x>884 32 <x>252 47 <x>102 76 <x>921 76 <x>102 691 <x>921 691

Tabel 3.3 Keterangan perancangan konfigurasi XML Deskripsi

Value

audioInput

default

videoDimensi on

480p

Keterangan Audio input device yang digunakan pada audio video recording Jenis ukuran video yang akan dihasilkan pada audio video

90 Deskripsi

Value

saveLocation

D:\

undoLevels

10

calibration

Keterangan recording. Lokasi tempat penyimpanan utama untuk file-file output yang dihasilkan aplikasi “Bee Board”. Batasan langkah undo yang dapat dilakukan.

wiimote topLeft x: 882, y: 569 Titik-titik kotak layar proyektor topRight x: 328, y: 469 yang dibaca oleh WiiMote. bottomLeft x: 884, y: 32 bottomRight x: 252, y: 47 board topLeft x: 102, y:76 topRight x: 921, y:76 Titik-titik kotak layar monitor. bottomLeft x: 102, y: 691 bottomRight x: 921, y: 691

3.4. Perancangan Sistem 3.4.1. Use Case Diagram Dalam perancangan sistem aplikasi “Bee Board”, digunakan pula use case diagram untuk mendefinisikan interaksi antara user dan administrator dengan sistem dari “Bee Board”. Berikut adalah use case dari aplikasi “Bee Board”:

91

Gambar 3.34 Use Case sistem aplikasi “Bee Board”

Dalam perancangan sistem aplikasi “Bee Board”, digunakan pula use case narrative untuk menjelaskan dengan lebih rinci mengenai interaksi antara user dengan sistem aplikasi “Bee Board”. Berikut adalah use case narrative dari aplikasi “Bee Board”:

92 1. Use Case Narrative Calibrate Pada proses ini, administrator melakukan proses kalibrasi layar proyektor dengan menggunakan LED pen dan aplikasi “Bee Board”. Tabel 3.4 Use Case Narrative Calibrate Pelaku Deskripsi Tujuan

Bidang khas suatu event

Administrator Kalibrasi area layar proyektor yang akan dibaca oleh WiiMote Untuk memetakan posisi layar proyektor ke posisi layar monitor sehingga posisi LED pen yang ditangkap oleh sensor WiiMote lebih akurat Kegiatan Administrator 1. Administrator membuka aplikasi back-end "Bee Board".

Responden Sistem 2. Sistem merespon dengan membuka aplikasi backend "Bee Board".

3. Administrator memilih halaman Wiimote Settings.

4. Sistem merespon dengan menampilkan halaman Wiimote Settings.

5. Administrator menekan tombol "Calibrate".

6. Sistem membuka Calibration Window dengan titik merah di kiri atas. 8. Sistem membaca posisi LED pen dan mengganti titik merah ke kanan atas.

7. Administrator memindahkan posisi LED pen ke titik merah kiri atas. 9. Administrator memindahkan posisi LED pen ke titik merah kanan atas. 11. Administrator memindahkan posisi LED pen ke titik merah kiri bawah. 13. Administrator memindahkan posisi LED pen ke titik merah kanan bawah.

10. Sistem membaca posisi LED pen dan mengganti titik merah ke kiri bawah. 12. Sistem membaca posisi LED pen dan mengganti titik merah ke kanan bawah. 14. Sistem membaca posisi LED pen dan menutup Calibration Window.

93

2. Use Case Narrative Config Pada proses ini, administrator melakukan pengaturan aplikasi “Bee Board”. Tabel 3.5 Use Case Narrative Config Pelaku Deskripsi Tujuan Bidang khas suatu event

Administrator Konfigurasi aplikasi "Bee Board" Untuk mengganti pengaturan aplikasi "Bee Board" Kegiatan Administrator Responden Sistem 1. Administrator membuka 2. Sistem merespon dengan aplikasi back-end "Bee membuka aplikasi back-end Board". "Bee Board". 3. Administrator mengganti pengaturan aplikasi. 4. Administrator menekan tombol "Save"

5. Sistem menampilkan konfirmasi "Are you sure you want to save configuration?"

6. Administrator memilih "Yes"

7. Sistem menyimpan konfigurasi aplikasi "Bee Board" ke dalam sebuah file. 8. Sistem menampilkan notifikasi "Configuration saved successfully."

8. Administrator memilih "OK".

9. Sistem merespon dengan menutup aplikasi back-end "Bee Board"

3. Use Case Narrative Restore to Default Pada proses ini, administrator dapat mengembalikan pengaturan “Bee Board “ ke pengaturan default yang sudah ditentukan aplikasi.

94

Tabel 3.6 Use Case Narrative Restore to Default Pelaku Deskripsi Tujuan Bidang khas suatu event

Administrator Mengembalikan konfigurasi "Bee Board" ke konfigurasi default Mengembalikan konfigurasi "Bee Board" ke konfigurasi default Kegiatan User Responden Sistem 1. Administrator membuka 2. Sistem merespon dengan aplikasi back-end "Bee membuka aplikasi back-end Board". "Bee Board". 3. Administrator menekan tombol "Restore defaults"

4. Sistem menampilkan konfirmasi "Are you sure you want to restore all configuration to default?"

5. Administrator memilih "Yes"

6. Sistem merespon dengan mengembalikan konfigurasi "Bee Board" ke konfigurasi default 7. Sistem menampilkan notifikasi sukses.

4. Use Case Narrative Free Draw Pada proses ini, user dapat menggambar/mencoret secara bebas pada canvas “Bee Board”. Tabel 3.7 Use Case Narrative Free Draw Pelaku Deskripsi Tujuan

User Menggambar/mencoret pada canvas "Bee Board" User dapat menggambar/mencoret pada canvas "Bee Board" sesuai dengan lokasi dan ketebalan yang diinginkan.


Kegiatan User 1. User membuka aplikasi "Bee Board"

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board"

95 3. User memilih menu pen tool.

5. User memilih ukuran ketebalan yang ingin digunakan.

9. User menggambar/mencoret pada canvas "Bee Board".

4. Sistem merespon dengan menampilkan ukuran ketebalan yang tersedia pada pen tool. 6. Sistem merespon dengan mengganti tool yang aktif menjadi pen tool. 7. Sistem mengganti ketebalan pen tool sesuai dengan yang dipilih. 8. Sistem merespon dengan menutup menu pen tool. 10. Sistem merespon dengan menggambar pada canvas "Bee Board" sesuai dengan lokasi dan ketebalan yang sudah ditentukan user.

5. Use Case Narrative Erase Pada proses ini, user dapat menghapus coretan yang ada pada canvas “Bee Board”. Tabel 3.8 Use Case Narrative Erase Pelaku Deskripsi Tujuan

User Menghapus gambar/coretan pada canvas "Bee Board" User dapat menghapus gambar/coretan yang telah digambar sebelumnya pada canvas "Bee Board" sesuai dengan lokasi dan ukuran yang diinginkan.


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih menu eraser tool.

5. User memilih jenis eraser yang ingin digunakan.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan menampilkan jenis dan ukuran yang tersedia pada eraser tool. 6. Sistem merespon dengan mengganti jenis eraser sesuai dengan yang dipilih.

96 7. User memilih ukuran eraser yang ingin digunakan.

11. User menghapus coretan pada canvas "Bee Board".

8. Sistem merespon dengan mengganti tool yang aktif menjadi eraser tool. 9. Sistem mengganti ketebalan eraser tool sesuai dengan yang dipilih. 10. Sistem merespon dengan menutup menu eraser tool. 12. Sistem merespon dengan menghapus gambar/coretan pada canvas "Bee Board" sesuai dengan lokasi dan ketebalan yang sudah ditentukan user..

6. Use Case Narrative Highlight Pada proses ini, user dapat menandakan sebuah bagian pada canvas “Bee Board” dengan menggunakan highlighter. Tabel 3.9 Use Case Narrative Highlight Pelaku Deskripsi Tujuan

User Menandai bagian pada canvas "Bee Board" User dapat menandai bagian pada canvas "Bee Board" sesuai dengan lokasi dan ketebalan yang diinginkan.


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih menu highlighter tool.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan menampilkan ukuran ketebalan yang tersedia pada highlighter tool.

97 5. User memilih ukuran ketebalan yang ingin digunakan.

6. Sistem merespon dengan mengganti tool yang aktif menjadi highlighter tool. 7. Sistem mengganti ketebalan highlighter tool sesuai dengan yang dipilih. 8. Sistem merespon dengan menutup menu highlighter tool.

9. User menandai bagian pada canvas "Bee Board".

10. Sistem merespon dengan menandai bagian pada canvas "Bee Board" sesuai dengan lokasi dan ketebalan yang sudah ditentukan user..

7. Use Case Narrative Draw Shape Pada proses ini, user dapat menggambar shape pada canvas “Bee Board”. Tabel 3.10 Use Case Narrative Draw Shape Pelaku Deskripsi Tujuan

User Menggambar shape pada canvas "Bee Board" User dapat menggambar shape (garis, persegi, persegi panjang, lingkaran) pada canvas "Bee Board" sesuai dengan lokasi, ukuran, dan ketebalan yang diinginkan.


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih menu shape tool.

5. User memilih jenis shape yang ingin digunakan.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan menampilkan jenis shape dan ukuran ketebalan yang tersedia pada shape tool. 6. Sistem merespon dengan mengganti jenis shape sesuai dengan yang dipilih.

98 7. User memilih ukuran ketebalan yang ingin digunakan.

6. Sistem merespon dengan mengganti tool yang aktif menjadi shape tool. 7. Sistem mengganti ketebalan shape tool sesuai dengan yang dipilih. 8. Sistem merespon dengan menutup menu shape tool.

7. User menentukan titik pertama (X1,Y1) dari shape yang akan digambar 8. User menentukan titik kedua (X2,Y2) dari shape yang akan digambar.

9. Sistem merespon dengan menggambar shape pada canvas "Bee Board" sesuai dengan jenis, lokasi, dan ketebalan yang telah ditentukan oleh user.

8. Use Case Narrative Audio Video Recording Pada proses ini, user dapat merekam semua aktivitas di layar komputer beserta dengan suara yang masuk ke dalam komputer dalam format video. Tabel 3.11 Use Case Narrative Audio Video Recording Pelaku Deskripsi

User Merekam layar dan suara yang masuk ke dalam komputer yang menjalankan aplikasi "Bee Board"

Tujuan

User dapat merekam layar dan suara yang masuk ke dalam komputer yang menjalankan aplikasi "Bee Board"




3. User memilih start recording tool.

4. Sistem merespon dengan mengaktifkan modul recording. 5. Mulai saat ini semua aktifitas di layar komputer dan suara yang masuk ke dalam komputer akan terekam dalam sebuah video.

99 6. User memilih stop recording tool.

7. Sistem merespon dengan menghentikan modul recording. 8. Sistem menyimpan video hasil perekaman dalam format [TahunBulanTanggal_JamMenit Detik].mp4

9. Use Case Narrative Snapshot Pada proses ini, user dapat mengambil snapshot layar maupun canvas yang sedang aktif pada saat itu. Tabel 3.12 Use Case Narrative Snapshot Pelaku Deskripsi Tujuan

User Mengambil gambar layar komputer atau canvas "Bee Board" User dapat mengambil gambar pada layar komputer atau pada canvas "Bee Board" yang sedang aktif.


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih menu snapshot tool.

5. User memilih jenis pengambilan gambar yang diinginkan.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan menampilkan jenis pengambilan gambar yang tersedia. 6. Sistem merespon dengan mengambil gambar sesuai dengan jenis pengambilan gambar yang dipilih. 7. Sistem menyimpan gambar dalam format page_[NomorHalaman].png

10. Use Case Narrative Undo Pada proses ini, user dapat menggunakan fitur undo pada “Smart Board”.

100

Tabel 3.13 Use Case Narrative Undo Pelaku Deskripsi

User Membatalkan hasil gambar/coretan yang sudah dilakukan sebelumnya pada canvas "Bee Board"

Tujuan

User dapat menggunakan fitur undo untuk mengembalikan hasil gambar/coretan yang sudah dilakukan sebelumnya pada canvas "Bee Board"


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih undo tool.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan melihat history action yang dilakukan oleh user pada canvas "Bee Board" 5. Jika terdapat history, maka sistem akan mengembalikan tampilan canvas "Bee Board" satu langkah sebelumnya dan mengaktifkan redo tool. Sedangkan jika tidak ada history, maka sistem tidak akan melakukan apa apa.

11. Use Case Narrative Redo Pada proses ini, user dapat membatalkan proses undo yang telah dilakukan sebelumnya. Tabel 3.14 Use Case Narrative Redo Pelaku Deskripsi

User Mengembalikan hasil gambar/coretan pada canvas "Bee Board" yang sudah dibatalkan sebelumnya

Tujuan

User dapat menggunakan fitur redo untuk mengembalikan tampilan canvas "Bee Board" sebelum fitur undo digunakan.

Bidang

Kegiatan User

Responden Sistem

101 khas suatu event

1. User membuka aplikasi "Bee Board" 3. User memilih redo tool.

2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan memastikan apakah user pernah melakukan undo sebelumnya. 5. Jika user pernah melakukan undo, sistem akan mengembalikan tampilan canvas "Bee Board" ke tampilan sebelum undo dilakukan. Jika tidak, maka sistem tidak akan melakukan apapun.

12. Use Case Narrative Merge Snapshot Pada proses ini, user dapat menggabungkan semua snapshot yang sudah dilakukan sebelumnya menjadi satu file dengan format PDF. Tabel 3.15 Use Case Narrative Merge Snapshot Pelaku Deskripsi

User Menggabungkan seluruh hasil snapshot yang sudah disimpan menjadi sebuah file PDF

Tujuan

User dapat menggabungkan seluruh hasil snapshot menjadi sebuah file dengan format PDF




3. User memilih merge snapshots as PDF tool.

4. Sistem akan menggabungkan seluruh hasil snapshot menjadi sebuah file dengan format [TahunBulanTanggal_JamMenit Detik].pdf. 5. Sistem merespon dengan memberikan notifikasi "Merge success"

102

13. Use Case Narrative Change Tool Color Pada proses ini, user dapat mengganti warna tool pada “Bee Board”. Tabel 3.16 Use Case Narrative Change Tool Color Pelaku Deskripsi Tujuan

User Mengganti warna tool User dapat mengganti warna yang akan digunakan ketika menggunakan shape tool, pen tool, dan highlighter tool.




3. User memilih menu "Tool Color"

4. Sistem merespon dengan menampilkan empat warna (hitam, merah, hijau, biru) yang sudah disediakan dan empat slot warna tambahan. 6. Sistem merespon dengan mengganti warna pen tool, highlighter tool, dan shape tool. 8. Sistem merespon dengan menampilkan tabel warna.

5. User memilih warna yang akan digunakan dari list yang sudah disediakan. 7. Jika warna yang diinginkan tidak tersedia pada list, user dapat memilih "More..." untuk memilih warna lainnya. 9. User memilih warna pada tabel warna. 10. User memilih "OK" pada tabel warna.

11. Sistem merespon dengan mengganti warna pen tool, highlighter tool, dan shape tool. 12. Sistem merespon dengan menambahkan warna yang dipilih oleh user ke dalam salah satu dari 4 slot warna yang tersedia.

14. Use Case Narrative Change/Add Canvas Pada proses ini, user dapat berpindah–pindah dan menambah canvas pada “Bee Board”.

103 Tabel 3.17 Use Case Narrative Change/Add Canvas Pelaku Deskripsi Tujuan Bidang khas suatu event

User Mengganti dan menambah halaman canvas "Bee Board" User dapat mengganti dan menambah halaman canvas "Bee Board" Kegiatan User Responden Sistem 1. User membuka aplikasi 2. Sistem merespon dengan "Bee Board" membuka aplikasi "Bee Board" 3. User memilih "next page" atau "previous page"

4. Sistem merespon dengan melakukan validasi sebagai berikut : Jika user memilih "previous page": a. Jika nomor canvas adalah 1, maka sistem tidak akan melakukan apa-apa. b. Jika nomor canvas bukan 1, maka sistem akan mengganti halaman canvas ke halaman sebelumnya. Jika user memilih "next page": a. Jika nomor canvas bukan yang terakhir, maka sistem akan mengganti halaman canvas ke halaman berikutnya. b. Jika nomor canvas adalah yang terakhir, maka sistem menambahkan canvas baru di halaman berikutnya dan mengganti halaman canvas ke halaman berikutnya.

15. Use Case Narrative Hide/Show Canvas Pada proses ini, user menampilkan atau menyembunyikan canvas. Tabel 3.18 Use Case Narrative Hide/Show Canvas Pelaku Deskripsi

User Menampilkan atau menyembunyikan canvas "Bee Board"

104 Tujuan

User dapat menampilkan atau menyembunyikan canvas "Bee Board"


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User menekan gambar canvas tool.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan memeriksa status canvas sekarang. Jika canvas sedang ditampilkan, maka sistem akan menyembunyikan canvas, sedangkan jika canvas sedang disembunyikan maka sistem akan menampilkan canvas.

16. Use Case Narrative Change Canvas Color Pada proses ini, user dapat mengganti warna dan opacity canvas. Tabel 3.19 Use Case Narrative Change Canvas Color Pelaku Deskripsi Tujuan Bidang khas suatu event

User Mengganti layar canvas yang sedang aktif User dapat mengganti layar canvas yang sedang digunakan Kegiatan User Responden Sistem 1. User membuka aplikasi 2. Sistem merespon dengan "Bee Board" membuka aplikasi "Bee Board" 3. User memilih menu "Tool Color"

5. User memilih warna yang akan digunakan dari list yang sudah disediakan. 7. Jika warna yang diinginkan tidak tersedia pada list, user dapat memilih "More..." untuk memilih warna lainnya.

4. Sistem merespon dengan menampilkan empat warna (hitam, merah, hijau, biru) yang sudah disediakan dan empat slot warna tambahan. 6. Sistem merespon dengan mengganti warna pen tool, highlighter tool, dan shape tool. 8. Sistem merespon dengan menampilkan tabel warna.

105 9. User memilih warna pada tabel warna.

11. User memilih "OK" pada tabel warna.

14. User menggeser slider opacity.

10. Sistem merespon dengan menampilkan warna canvas sesuai dengan yang sedang dipilih oleh user dengan metode live preview. 12. Sistem merespon dengan mengganti warna pen tool, highlighter tool, dan shape tool. 13. Sistem merespon dengan menambahkan warna yang dipilih oleh user ke dalam salah satu dari empat slot warna yang tersedia. 15. Sistem merespon dengan langsung mengganti opacity canvas dengan metode live preview.

17. Use Case Narrative Open Folder Pada proses ini, user dapat langsung mengakses folder yang digunakan untuk menyimpan snapshot dan video. Tabel 3.20 Use Case Narrative Open Folder Pelaku Deskripsi Tujuan

User Membuka folder penyimpanan snapshot dan video User dapat membuka folder tempat penyimpanan snapshot dan video


Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih open folder tool.

Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan membuka folder yang digunakan untuk menyimpan snapshot dan video.

106

18. Use Case Narrative Call Toolbox Pada proses ini, user dapat memanggil toolbox “Bee Board”. Tabel 3.21 Use Case Narrative Call Toolbox Pelaku Deskripsi Tujuan

User Memanggil toolbox "Bee Board" User dapat memanggil toolbox "Bee Board" ke posisi-x yang di inginkan



Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 3. User menekan LED 4. Sistem merespon dengan pen di daerah membaca koordinat x LED pemanggilan toolbox "Bee pen, kemudian toolbox "Bee Board" pada bagian Board" berpindah ke bawah canvas. koordinat x tersebut.

3.4.2. Sequence Diagram Dalam perancangan sistem aplikasi “Bee Board”, digunakan pula sequence diagram untuk menjelaskan dengan lebih rinci bagaimana proses pertukaran informasi antara user dengan sistem. Berikut adalah sequence diagram dari aplikasi “Bee Board”: 1. Sequence Diagram Calibrate Sequence

ini

menunjukan

proses-proses

yang

administrator melakukan kalibrasi pada aplikasi back-end.

terjadi

ketika

107

Gambar 3.35 Sequence Diagram Calibrate

108

2. Sequence Diagram Config Sequence

ini

menunjukan

proses-proses

yang

terjadi

ketika

terjadi

ketika

administrator melakukan pengaturan pada aplikasi back-end.

Gambar 3.36 Sequence Diagram Config

3. Sequence Diagram Restore to Default Sequence

ini

menunjukan

proses-proses

yang

administrator mengembalikan pengaturan aplikasi “Bee Board” ke pengaturan awal.

109

Gambar 3.37 Sequence Diagram Restore to Default

4. Sequence Diagram Free Draw Sequence ini menunjukan proses-proses yang terjadi ketika user sedang menggunakan pen tool pada aplikasi “Bee Board”.

110

Gambar 3.38 Sequence Diagram Free Draw

5. Sequence Diagram Erase Sequence ini menunjukan proses-proses yang terjadi ketika user menggunakan fitur eraser tool pada aplikasi “Bee Board”.

111

Gambar 3.39 Sequence Diagram Erase

112 6. Sequence Diagram Highlight Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan highlight pada aplikasi “Bee Board”.

Gambar 3.40 Sequence Diagram Highlight

113 7. Sequence Diagram Draw Shape Sequence ini menunjukan proses-proses yang terjadi ketika user menggambar shape pada aplikasi “Bee Board”.

Gambar 3.41 Sequence Diagram Draw Shape

114 8. Sequence Diagram Audio Video Recording Sequence ini menunjukan proses-proses yang terjadi ketika user sedang menggunakan fitur audio video recording tool ketika menggunakan aplikasi “Bee Board”.

Gambar 3.42 Sequence Diagram Audio Video Recording

9. Sequence Diagram Snapshot Sequence ini menunjukan proses-proses yang terjadi ketika user menggunakan fitur snapshot pada aplikasi “Bee Board”.

115

Gambar 3.43 Sequence Diagram Snapshot

116 10. Sequence Diagram Merge Snapshot Sequence ini menunjukan proses-proses yang terjadi ketika user menggunakan fitur merge snapshot pada aplikasi “Bee Board”.

Gambar 3.44 Sequence Diagram Merge Snapshot

117

11. Sequence Diagram Undo Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan undo pada aplikasi “Bee Board”.

Gambar 3.45 Sequence Diagram Undo

118

12. Sequence Diagram Redo Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan redo pada aplikasi “Bee Board”.

Gambar 3.46 Sequence Diagram Redo

119

13. Sequence Diagram Change Tool Color Sequence ini menunjukan proses-proses yang terjadi ketika user mengganti color untuk highlighter, pen, dan shape pada aplikasi “Bee Board”.

Gambar 3.47 Sequence Diagram Change Tool Color

120

14. Sequence Diagram Change/Add Canvas Sequence ini menunjukan proses-proses yang terjadi ketika user mengganti halaman canvas atau menambah halaman canvas pada aplikasi “Bee Board”.

Gambar 3.48 Sequence Diagram Change Canvas

121

15. Sequence Diagram Hide/Show Canvas Sequence ini menunjukan proses-proses yang terjadi ketika user menampilkan/menyembunyikan canvas pada aplikasi “Bee Board”.

Gambar 3.49 Sequence Diagram Hide / Show Canvas

122 16. Sequence Diagram Change Canvas Color Sequence ini menunjukan proses-proses yang terjadi ketika user mengganti background color pada canvas pada aplikasi “Bee Board”.

Gambar 3.50 Sequence Diagram Change Canvas Color

123 17. Sequence Diagram Open Folder Sequence ini menunjukan proses-proses yang terjadi ketika user membuka folder tempat penyimpanan file snapshoot dan video lewat “Bee Board”.

Gambar 3.51 Sequence Diagram Open Folder

124

18. Sequence Diagram Call Toolbox Sequence ini menunjukan proses-proses yang terjadi ketika user memanggil toolbox “Bee Board”.

Gambar 3.52 Sequence Diagram Call Toolbox

3.4.1. Class Diagram Dalam perancangan sistem aplikasi “Bee Board”, digunakan class diagram untuk mendefinisikan class beserta atribut dan fungsi yang ada di dalam aplikasi “Bee Board”. Berikut adalah class diagram dari aplikasi “Bee Board”:

55

Gambar 3.53 Class Diagram “Bee Board”

126 3.4.2. State Diagram Dalam perancangan sistem aplikasi “Bee Board”, digunakan pula state diagram untuk menggambarkan transisi dan perubahan keadaan (dari satu state ke state lainnya) suatu objek pada sistem. Berikut adalah state diagram dari aplikasi “Bee Board”: 1. State diagram “Bee Board” Berikut adalah state diagram untuk event-event yang terjadi pada “Bee Board”:

Gambar 3.54 State diagram “Bee Board”

2. State diagram “Canvas” Berikut adalah state diagram untuk event-event yang terjadi pada “Canvas”:

127

Gambar 3.55 State diagram “Canvas”

3. State diagram “Pen” Berikut adalah state diagram untuk event-event yang terjadi pada “Pen”:

128

Gambar 3.56 State diagram “Pen”

4. State diagram “Eraser” Berikut adalah state diagram untuk event-event yang terjadi pada “Eraser”:

Gambar 3.57 State diagram “Smart Eraser”

129 5. State diagram “Highlighter” Berikut adalah state diagram untuk event-event yang terjadi pada “Highlighter”:

Gambar 3.58 State diagram “Highlighter”

6. State diagram “Shape” Berikut adalah state diagram untuk event-event yang terjadi pada “Shape”:

130

Gambar 3.59 State diagram “Shape”

7. State diagram “Audio Playback” Berikut adalah state diagram untuk event-event yang terjadi pada “Audio Playback”:

Gambar 3.60 State diagram “Audio Playback”

131 8. State diagram “Recorder” Berikut adalah state diagram untuk event-event yang terjadi pada “Recorder”:

Gambar 3.61 State diagram “Recorder”

132

9. State diagram “Configuration” Berikut adalah state diagram untuk event-event yang terjadi pada “Configuration”:

Gambar 3.62 State diagram “Configuration”

133

10. State diagram “Bee Board Configuration Center” Berikut adalah state diagram untuk event-event yang terjadi pada “Bee Board Configuration Center”:

Gambar 3.63 State diagram “Bee Board Configuration Center”

134

11. State diagram “Application Settings Page” Berikut adalah state diagram untuk event-event yang terjadi pada “Application Settings Page”:

Gambar 3.64 State diagram “Application Settings Page”

135

12. State diagram “Wiimote Settings Page” Berikut adalah state diagram untuk event-event yang terjadi pada “Wiimote Settings Page”:

Gambar 3.65 State diagram “Wiimote Settings Page”

3.4.3. Storyboard 1. Front-End Tabel 3.22 Storyboard untuk Front-End Application Multimedia Storyboard Project: "Bee Board" Screen: 1 of 3

Date: 1 Jan 2013 Screen ID: Front-end

136 Multimedia Storyboard

Screen Description: Aplikasi front-end adalah aplikasi utama dari "Bee Board", dimana terdapat berbagai macam tools untuk mencoret, menggambar, serta menunjang penggunaan aplikasi “Bee Board” pada proses belajar mengajar. Link From Screen ID: Link to Screen ID: Color Scheme: • Background color: white (#ffffff) • Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 9pt o Color: black Images: • Title: bb_text.png (On-hover: bb_text_h.png) • Pen Dropdown Button: pen.png (On-hover: pen_h.png) • Eraser Dropdown Button:eraser.png (On-hover: eraser_h.png) • Highlighter Dropdown Button: highlighter.png (On-hover: highlighter_h.png) • Shape Dropdown Button: ellipse.png (On-hover: ellipse_h.png) • Tool Color Dropdown Button: color_picker.png (On-hover: color_picker_h.png) • Canvas Dropdown Button: hide.png (On-hover: hide_h.png) • Undo Button: no_undo.png (On-hover: undo.png) • Redo Button: no_redo.png (On-hover: redo.png) • Snapshot Dropdown Button: screenshot.png (On-hover: screenshot_h.png) • Recording Button: record.png (On-hover: record_h.png) • Merge Snapshots as PDF Button: pdf.png (On-hover: pdf_h.png) • Open Folder: open_folder.png (On-hover: open_folder_h.png) Audio: Video: Animation: Dropdown slider

137 Pada aplikasi front-end, terdapat beberapa menu, yaitu: a. Pen Pen berfungsi untuk menulis, menggambar atau mencoret pada canvas. User hanya diperkenankan untuk menulis, menggambar, atau mencoret hanya ketika kondisi canvas sedang diaktifkan. User juga dapat mengatur tingkat ketebalan pen yang akan digunakan. Terdapat enam tingkatan ketebalan pen pada aplikasi ini.

b. Eraser Eraser berfungsi untuk menghapus hasil coretan/gambar yang ada di canvas. Terdapat dua jenis bentuk eraser, yaitu bentuk lingkaran dan segiempat. Selain itu, disediakan tiga tingkatan ukuran untuk eraser, yaitu small, medium, dan large. Pada menu ini, user juga dapat membersihkan canvas yang sedang aktif secara langsung.

c. Highlighter Highlighter berfungsi untuk menandakan suatu bagian pada canvas. Berbeda dengan pen, highlighter tidak akan menutupi coretan canvas yang sudah ada sebelumnya, karena tingkat opacity yang digunakan highlighter lebih rendah daripada pen. Terdapat enam tingkatan ketebalan highlighter pada aplikasi ini.

d. Shape

138 Tool shape digunakan untuk menggambar shape pada canvas. Terdapat tiga jenis shape yang dapat dipilih, yaitu persegi, lingkaran, dan garis. Terdapat enam tingkatan ketebalan untuk shape pada aplikasi ini.

e. Tool Color Tool color digunakan untuk mengatur warna yang digunakan pada pen, highlighter, dan shape. Pada awalnya, sudah disediakan empat warna default ketika user memilih menu color, yaitu merah, hitam, hijau dan biru. Selain empat warna yang ada, user dapat memilih warna lainnya juga dengan memilih menu “More”.

f. Canvas Canvas digunakan untuk melakukan pengaturan terhadap canvas aplikasi. Pengaturan yang dapat dilakukan antara lain, opacity canvas, warna canvas, dan menyembunyikan canvas atau menampilkan canvas.

g. Snapshot Snapshot digunakan untuk mengambil gambar dari layar yang sedang aktif pada aplikasi. User dapat memilih untuk mengambil snapshot hanya pada canvas yang sedang aktif, atau beserta dengan latar belakangnya. File hasil snapshot akan disimpan dalam

139 format PNG dan berada pada folder yang telah ditentukan pada aplikasi back-end.

h. Audio Video Recording Video digunakan untuk merekam semua aktivitas yang terjadi pada canvas dalam rentang waktu tertentu.

i. Merge Snapshots as PDF Merge snapshots as PDF digunakan untuk menggabungkan semua file hasil snapshot ke dalam sebuah file dengan ekstensi PDF. Snapshot yang akan digabung akan diurutkan berdasarkan nomor halaman canvas.

j. Undo Undo digunakan untuk membatalkan perintah yang sudah dilaksanakan sebelumnya. Banyaknya tingkatan undo ditentukan melalui pengaturan pada aplikasi back-end.

k. Redo Redo digunakan untuk membatalkan undo yang dilaksanakan. Banyaknya tingkatan redo disamakan dengan banyaknya tingkatan undo.

140

l. Open Folder Open folder digunakan untuk membuka folder yang digunakan untuk menyimpan hasil snapshot dan video. Lokasi open folder ditentukan melalui pengaturan pada aplikasi back-end.

2. Back-End a. Application Settings Tabel 3.23 Storyboard Application Settings (back-end application) Multimedia Storyboard Project: "Bee Board" Screen: 2 of 3

Date: 1 Jan 2013 Screen ID: Back-end Application

Screen Description: Back-end Application adalah bagian untuk pengaturan yang berhubungan aplikasi “Bee Board”.

141 Multimedia Storyboard Link From Screen ID: 3 Link to Screen ID: 2 Color Scheme: • Background color: gray (#f0f0f0) • Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 8pt o Color: black Images: • Application Page: settings.png • WiiMote Page: wiimote.png Audio: Video: Animation: -

Pada menu Application Settings, terdapat beberapa pengaturan, yaitu: 1) Audio Input Audio input berfungsi untuk mengatur darimana input audio berasal ketika video recording dijalankan.

2) Video Dimension Pada video dimension, user dapat mengatur besar resolusi video yang akan digunakan untuk merekam aktivitas yang terjadi pada canvas. Terdapat 3 resolusi yang bisa diplih, yaitu 240p, 320p, dan 480p. Resolusi default-nya adalah 480p.

142

3) Default Save Location Default save berfungsi untuk menentukan folder dimana file hasil snapshot dan video akan disimpan. Lokasi penyimpanan default-nya adalah folder user sistem operasi yang sedang aktif.

4) Undo Levels Undo levels berfungsi untuk menentukan berapa banyak tingkatan undo dan redo yang dapat digunakan. Nilai default-nya adalah 10.

5) Restore to Default Restore to Default berfungsi untuk mengembalikan semua pengaturan ke pengaturan awal.

6) Save Save digunakan untuk menyimpan config. Config yang akan disimpan kemudian di-save dalam format XML.

7) Close Close digunakan untuk keluar dari aplikasi back-end.

143

b. WiiMote Settings Tabel 3.24 Storyboard WiiMote Settings (back-end application) Multimedia Storyboard Project: "Bee Board" Screen: 3 of 3

Date: 1 Jan 2013 Screen ID: Back-end WiiMote

Screen Description: Back-end WiiMote adalah bagian yang memberikan informasi WiiMote serta digunakan untuk melakukan kalibrasi WiiMote dengan layar proyektor yang digunakan. Link From Screen ID: 2 Link to Screen ID: 3 Color Scheme: • Background color: gray (#f0f0f0)

144 Multimedia Storyboard • Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 8pt o Color: black Images: • Application Page: settings.png • WiiMote Page: wiimote.png Audio: Video: Animation: -

Pada menu WiiMote Settings, terdapat beberapa informasi dan pengaturan untuk koneksi antara WiiMote dan komputer, beberapa diantaranya adalah: 1) Connected Connected berfungsi untuk menandakan apakah WiiMote yang digunakan terhubung dengan komputer atau tidak.

2) Battery Battery berfungsi untuk mengukur kapasitas baterai pada WiiMote yang tersisa. Kadar baterai yang tersisa ditunjukan dalam satuan percentage (%).

3) IR Sensor IR Sensor digunakan untuk menunjukan lokasi LED pen yang ditangkap oleh WiiMote.

145 4) Utilization Utilization menunjukkan seberapa besar persentase area layar proyektor yang sudah di kalibrasi sebelumnya terhadap besar area kamera yang dapat dibaca WiiMote. 5) Calibrate Calibrate berfungsi untuk mengkalibrasi posisi antara layar yang diproyeksikan dan posisi WiiMote. Lokasi hasil kalibrasi ini kemudian akan di-save dalam sebuah file dengan format XML.

BAB 3 ANALISIS DAN PERANCANGAN. sejenis. Analisis user dilakukan dengan cara menyebarkan kuesioner mengenai aplikasi

Recommend Documents