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

(1)

52 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

(2)

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

(3)

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

Gambar 3.3 Grafik hasil jawaban kuesioner pada pertanyaan demografi 3

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 )

(4)

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 (Sistem Informasi/Teknik Informatika).

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

(5)

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)

(6)

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

(7)

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

(8)

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.

(9)

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 Gambar 3.10 Grafik hasil jawaban kuesioner pada pertanyaan nomor 7

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?

(10)

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)

(11)

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

(12)

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

(13)

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)

(14)

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

(15)

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

(16)

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 di-copy (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)

(17)

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:

(18)

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)

(19)

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.

Toolbox

(20)

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)

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

Sensor Stylus

(21)

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.

(22)

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

(23)

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

Proyektor

Canvas

Toolbox Speaker

(24)

Pen dan Eraser Canvas

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.

Gambar 3.27 SMARTBoard 680

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

(25)

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/

(26)

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 di-review kembali.

Tabel 3.1 Perbandingan Aplikasi Sejenis

Poin Evaluasi eBeam Edge Interactive Xi Bar Activ Board 378 SMART board 680 Harga $649 $729 $1795 $1999 Perlu installasi Ya Ya Ya Ya Perlu kalibrasi Ya Ya Ya Ya

Touchscreen Tidak Tidak Ya Ya

Free Draw Ya Ya Ya Ya

Highlighter Ya Ya Ya Ya

Draw Shape Ya Ya Ya Ya

(27)

Poin Evaluasi eBeam Edge Interactive Xi Bar Activ Board 378 SMART board 680 Audio Video Recording Tidak Ya Ya Ya

Snapshot Tidak Tidak Tidak Ya

Undo Redo Ya Ya Ya Ya

Multiple Pages Ya Ya Ya Ya

Collaborative

Learning Ya Ya Ya Tidak

Memerlukan

permukaan khusus 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

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.

(28)

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.

(29)

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.

(30)

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. Analisis Kebutuhan Solusi Kebutuhan

1. 91% responden merupakan asisten lab.

Membuat sebuah aplikasi yang dapat membantu pembelajaran agar menjadi lebih interaktif dengan uji coba di laboratorium Software Binus University. 2.

84% responden menggunakan waktu efektif selama 100 menit untuk mengajar.

Menghitung estimasi ukuran file maksimal yang dapat dihasilkan pada saat perekaman layar. 3.

92% responden tidak mengetahui adanya aplikasi Smart Board.

Membantu meningkatkan pengetahuan user tentang teknologi Smart Board. 4.

92% responden menginginkan fitur pen pada aplikasi Smart Board.

Membuat fitur pen untuk mencatat/menggambar pada aplikasi Smart Board.

5.

87% responden menginginkan fitur penghapus untuk aplikasi Smart Board.

Membuat fitur eraser untuk menghapus gambar/catatan yang telah ditulis pada aplikasi Smart Board.

6.

87% responden menginginkan fitur highlighter untuk aplikasi Smart Board.

Membuat fitur highlighter untuk menandai catatan yang penting pada aplikasi Smart Board.

7.

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

Membuat fitur papan tulis virtual sebagai canvas untuk

mencoret/menggambar pada aplikasi Smart Board. 8. 72% responden menginginkan

fitur screen recording untuk

Membuat fitur screen recoding untuk merekam materi yang

(31)

No. Analisis Kebutuhan Solusi Kebutuhan

aplikasi Smart Board. dibawakan pengajar pada aplikasi Smart Board.

9.

51% responden menginginkan aplikasi Smart Board

ditempatkan dibagian bawah.

Menempatkan aplikasi Smart Board di bagian bawah.

10.

94% responden memilih warna hitam sebagai warna yang paling dibutuhkan untuk menggambar dan menulis.

Menjadikan warna hitam sebagai warna default dalam pemilihan warna pada aplikasi Smart Board.

11.

66% responden menginginkan tersedianya preset-preset warna dan tabel warna untuk memilih warna.

Menyediakan preset-preset warna dan tabel warna dalam pemilihan warna pada aplikasi Smart Board.

12.

79% responden menginginkan fitur draw shape walaupun responden dapat menggambar dengan bebas.

Membuat fitur draw shape untuk menggambar bangun ruang pada aplikasi Smart Board.

13.

96% responden memilih shape lingkaran sebagai jenis shape yang paling dibutuhkan.

Menjadikan shape lingkaran sebagai jenis shape default pada aplikasi Smart Board.

14.

99% responden menginginkan fitur undo dan redo ketika menggunakan aplikasi Smart Board.

Membuat fitur undo dan redo pada aplikasi Smart Board, sehingga user bisa kembali mengoreksi hasil pekerjaannya.

15.

57% responden memilih kualitas 480p sebagai kualitas resolusi perekaman layar.

Menjadikan kualitas 480p sebagai kualitas default yang digunakan dalam fitur perekaman layar pada aplikasi Smart Board.

16.

95% responden menginginkan aplikasi Smart Board bisa berjalan sendiri (native) tanpa harus meng-install aplikasi pendukung lainnya.

Membuat aplikasi Smart Board dapat berjalan secara native pada komputer tanpa harus meng-install aplikasi tambahan.

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).

Memberikan saran/masukan kepada pihak laboratorium Software Binus University untuk menyediakan storage khusus dan storage umum sebagai media penyaluran hasil perekaman layar dan snapshot.

(32)

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

(33)

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

(34)

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.

(35)

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

(36)

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:

(37)

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: <configuration> <audioInput>default</audioInput> <videoDimension>480p</videoDimension> <saveLocation>D:\</saveLocation> <undoLevels>10</undoLevels> <calibration> <wiimote> <topLeft> <x>882</x> <y>569</y> </topLeft> <topRight> <x>328</x> <y>469</y> </topRight>

(38)

Tabel 3.3 Keterangan perancangan konfigurasi XML

Deskripsi Value Keterangan

audioInput default Audio input device yang digunakan pada audio video recording

videoDimensi

on 480p

Jenis ukuran video yang akan dihasilkan pada audio video

(39)

Deskripsi Value Keterangan recording.

saveLocation D:\

Lokasi tempat penyimpanan utama untuk file-file output yang

dihasilkan aplikasi “Bee Board”.

undoLevels 10 Batasan langkah undo yang dapat

dilakukan.

calibration

wiimote

Titik-titik kotak layar proyektor yang dibaca oleh WiiMote.

topLeft x: 882, y: 569 topRight x: 328, y: 469 bottomLeft x: 884, y: 32 bottomRight x: 252, y: 47 board

Titik-titik kotak layar monitor. topLeft x: 102, y:76

topRight x: 921, y:76 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”:

(40)

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”:

(41)

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 Administrator

Deskripsi Kalibrasi area layar proyektor yang akan dibaca oleh WiiMote

Tujuan Untuk memetakan posisi layar proyektor ke posisi layar monitor sehingga posisi LED pen yang ditangkap oleh sensor WiiMote lebih akurat

Bidang khas suatu event

Kegiatan Administrator Responden Sistem 1. Administrator membuka

aplikasi back-end "Bee Board".

2. Sistem merespon dengan membuka aplikasi back-end "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.

7. Administrator

memindahkan posisi LED pen ke titik merah kiri atas.

8. Sistem membaca posisi LED pen dan mengganti titik merah ke kanan atas. 9. Administrator

memindahkan posisi LED pen ke titik merah kanan atas.

10. Sistem membaca posisi LED pen dan mengganti titik merah ke kiri bawah. 11. Administrator

memindahkan posisi LED pen ke titik merah kiri bawah.

12. Sistem membaca posisi LED pen dan mengganti titik merah ke kanan bawah.

13. Administrator

memindahkan posisi LED pen ke titik merah kanan bawah.

14. Sistem membaca posisi LED pen dan menutup Calibration Window.

(42)

2. Use Case Narrative Config

Pada proses ini, administrator melakukan pengaturan aplikasi “Bee Board”.

Tabel 3.5 Use Case Narrative Config Pelaku Administrator

Deskripsi Konfigurasi aplikasi "Bee Board"

Tujuan Untuk mengganti pengaturan aplikasi "Bee Board" Bidang

khas suatu event

Kegiatan Administrator Responden Sistem 1. Administrator membuka

aplikasi back-end "Bee Board".

2. Sistem merespon dengan membuka aplikasi back-end "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.

(43)

Tabel 3.6 Use Case Narrative Restore to Default Pelaku Administrator

Deskripsi Mengembalikan konfigurasi "Bee Board" ke konfigurasi default

Tujuan Mengembalikan konfigurasi "Bee Board" ke konfigurasi default

Kegiatan User Responden Sistem

1. Administrator membuka aplikasi back-end "Bee Board".

2. Sistem merespon dengan membuka aplikasi back-end "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 User

Deskripsi Menggambar/mencoret pada canvas "Bee Board"

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

1. User membuka aplikasi "Bee Board"

2. Sistem merespon dengan membuka aplikasi "Bee Board"

(44)

3. User memilih menu pen tool.

4. Sistem merespon dengan menampilkan ukuran

ketebalan yang tersedia pada pen tool.

5. User memilih ukuran ketebalan yang ingin digunakan.

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. 9. User

menggambar/mencoret pada canvas "Bee Board".

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 User

Deskripsi Menghapus gambar/coretan pada canvas "Bee Board" Tujuan User dapat menghapus gambar/coretan yang telah digambar

sebelumnya pada canvas "Bee Board" sesuai dengan lokasi dan ukuran yang diinginkan.

3. User memilih menu eraser tool.

4. Sistem merespon dengan menampilkan jenis dan ukuran yang tersedia pada eraser tool.

5. User memilih jenis eraser yang ingin digunakan.

6. Sistem merespon dengan mengganti jenis eraser sesuai dengan yang dipilih.

(45)

7. User memilih ukuran eraser yang ingin digunakan.

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. 11. User menghapus coretan

pada canvas "Bee Board".

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 User

Deskripsi Menandai bagian pada canvas "Bee Board"

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

3. User memilih menu highlighter tool.

4. Sistem merespon dengan menampilkan ukuran

ketebalan yang tersedia pada highlighter tool.

(46)

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 User

Deskripsi Menggambar shape pada canvas "Bee Board"

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

3. User memilih menu shape tool.

4. Sistem merespon dengan menampilkan jenis shape dan ukuran ketebalan yang

tersedia pada shape tool. 5. User memilih jenis shape

yang ingin digunakan.

6. Sistem merespon dengan mengganti jenis shape sesuai dengan yang dipilih.

(47)

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 User

Deskripsi 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"

Kegiatan User Responden Sistem 1. User membuka

aplikasi "Bee Board"

2. Sistem merespon dengan membuka 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.

(48)

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 User

Deskripsi Mengambil gambar layar komputer atau canvas "Bee Board" Tujuan User dapat mengambil gambar pada layar komputer atau

pada canvas "Bee Board" yang sedang aktif. Bidang

3. User memilih menu snapshot tool.

4. Sistem merespon dengan menampilkan jenis

pengambilan gambar yang tersedia.

5. User memilih jenis pengambilan gambar yang diinginkan.

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”.

(49)

Tabel 3.13 Use Case Narrative Undo Pelaku User

Deskripsi 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"

3. User memilih undo tool. 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 User

Deskripsi 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.

(50)

3. User memilih redo tool. 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 User

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

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

Kegiatan User Responden Sistem 1. User membuka aplikasi

"Bee Board"

2. Sistem merespon dengan membuka aplikasi "Bee Board" 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"

(51)

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 User

Deskripsi Mengganti warna tool

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

"Bee Board"

2. Sistem merespon dengan membuka aplikasi "Bee Board" 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. 5. User memilih warna

yang akan digunakan dari list yang sudah disediakan.

6. Sistem merespon dengan mengganti warna pen tool, highlighter tool, dan shape tool.

7. Jika warna yang diinginkan tidak tersedia pada list, user dapat memilih "More..." untuk memilih warna lainnya.

8. Sistem merespon dengan menampilkan tabel warna.

9. User memilih warna pada tabel warna. 10. User memilih "OK" pada tabel warna.

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”.

(52)

Tabel 3.17 Use Case Narrative Change/Add Canvas Pelaku User

Deskripsi Mengganti dan menambah halaman canvas "Bee Board" Tujuan User dapat mengganti dan menambah halaman canvas "Bee

Board" Bidang

"Bee Board"

2. Sistem merespon dengan 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 User

(53)

Tujuan User dapat menampilkan atau menyembunyikan canvas "Bee Board"

3. User menekan gambar canvas tool.

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 User

Deskripsi Mengganti layar canvas yang sedang aktif

Tujuan User dapat mengganti layar canvas yang sedang digunakan Bidang

2. Sistem merespon dengan membuka aplikasi "Bee Board" 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. 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.

8. Sistem merespon dengan menampilkan tabel warna.

(54)

9. User memilih warna pada tabel warna.

10. Sistem merespon dengan menampilkan warna canvas sesuai dengan yang sedang dipilih oleh user dengan metode live preview. 11. User memilih "OK" pada

tabel warna.

13. Sistem merespon dengan menambahkan warna yang dipilih oleh user ke dalam salah satu dari empat slot warna yang tersedia. 14. User menggeser slider

opacity.

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 User

Deskripsi Membuka folder penyimpanan snapshot dan video

Tujuan User dapat membuka folder tempat penyimpanan snapshot dan video

3. User memilih open folder tool.

4. Sistem merespon dengan membuka folder yang

digunakan untuk menyimpan snapshot dan video.

(55)

18. Use Case Narrative Call Toolbox

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

Pelaku User

Deskripsi Memanggil toolbox "Bee Board"

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

"Bee Board"

3. User menekan LED pen di daerah

pemanggilan toolbox "Bee Board" pada bagian bawah canvas.

4. Sistem merespon dengan membaca koordinat x LED pen, kemudian toolbox "Bee Board" berpindah ke

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 terjadi ketika administrator melakukan kalibrasi pada aplikasi back-end.

(56)

(57)

2. Sequence Diagram Config

Sequence ini menunjukan proses-proses yang 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 terjadi ketika administrator mengembalikan pengaturan aplikasi “Bee Board” ke pengaturan awal.

(58)

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”.

(59)

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”.

(60)

(61)

6. Sequence Diagram Highlight

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

(62)

7. Sequence Diagram Draw Shape

Sequence ini menunjukan proses-proses yang terjadi ketika user menggambar shape pada aplikasi “Bee Board”.

(63)

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”.

(64)

(65)

10. Sequence Diagram Merge Snapshot

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

(66)

11. Sequence Diagram Undo

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

(67)

12. Sequence Diagram Redo

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

(68)

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”.

(69)

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”.

(70)

15. Sequence Diagram Hide/Show Canvas

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

(71)

16. Sequence Diagram Change Canvas Color

Sequence ini menunjukan proses-proses yang terjadi ketika user mengganti background color pada canvas pada aplikasi “Bee Board”.

(72)

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”.

(73)

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”:

(74)

(75)

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”:

(76)

Gambar 3.55 State diagram “Canvas”

3. State diagram “Pen”

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

(77)

Gambar 3.56 State diagram “Pen”

4. State diagram “Eraser”

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

(78)

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”:

(79)

Gambar 3.59 State diagram “Shape”

7. State diagram “Audio Playback”

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

(80)

8. State diagram “Recorder”

Berikut adalah state diagram untuk event-event yang terjadi pada “Recorder”:

(81)

9. State diagram “Configuration”

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

(82)

10. State diagram “Bee Board Configuration Center”

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

(83)

11. State diagram “Application Settings Page”

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

(84)

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" Date: 1 Jan 2013

(85)

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: -