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

Transkripsi

1 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 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 tahun b tahun c. > 35 tahun 52

2 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 tahun. Jenis kelamin: a. Laki-laki b. Perempuan Gambar 3.2 Grafik hasil jawaban kuesioner pada pertanyaan demografi 2

3 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 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 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 (Sistem Informasi/Teknik Informatika). 2. Berapa menit durasi anda mengajar efektif dalam 1 shift? a. 50 menit

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

6 57 Gambar 3.6 Grafik hasil jawaban kuesioner pada pertanyaan nomor 3 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 Gambar 3.7 Grafik hasil jawaban kuesioner pada pertanyaan nomor 4

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

8 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 Gambar 3.9 Grafik hasil jawaban kuesioner pada pertanyaan nomor 6 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 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 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? a. Disediakan preset-preset warna pada nomor 7

10 61 b. Dengan tabel warna c. Gabungan dari keduanya Gambar 3.11 Grafik hasil jawaban kuesioner pada pertanyaan nomor 8 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 62 Gambar 3.12 Grafik hasil jawaban kuesioner pada pertanyaan nomor 9 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 63 Gambar 3.13 Grafik hasil jawaban kuesioner pada pertanyaan nomor 10 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 64 Gambar 3.14 Grafik hasil jawaban kuesioner pada pertanyaan nomor 11 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 65 Gambar 3.15 Grafik hasil jawaban kuesioner pada pertanyaan nomor 12 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 66 Gambar 3.16 Grafik hasil jawaban kuesioner pada pertanyaan nomor 13 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 67 Gambar 3.17 Grafik hasil jawaban kuesioner pada pertanyaan nomor 14 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

17 68 Gambar 3.18 Grafik hasil jawaban kuesioner pada pertanyaan nomor 15 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) 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 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: Gambar 3.20 Cara kerja ebeam Edge (Sumber: uploads/2009/12/ebeam-edge-architecture.jpg)

19 70 Receiver Stylus Toolbox Gambar 3.21 Demo ebeam Edge (Sumber: 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.

20 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: Sensor Stylus Canvas Gambar 3.23 Penggunaan Interactive Xi Bar pada ruang kelas (Sumber:

21 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 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 73 Gambar 3.24 Tampilan ActivBoard 378 (Sumber: images/product_gallery/promethean/promethean_pr-iwbabd378pro-ad-e_p1_xl.jpg) Gambar 3.25 Stylus ActivBoard 378 (Sumber:

23 74 Speaker Proyektor Canvas Toolbox Gambar 3.26 ActivBoard 378 dan alat-alat yang digunakan (Sumber: images/slj/ /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 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

24 ActivSoftware yang juga berisi ribuan gambar, template, dan berbagai tools multimedia yang dapat membantu presentasi 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: cache/1/image/5e06319eda06f020e43594a9c230972d/s/m/smartboard_1.jpg)

25 76 Gambar 3.28 Tampilan SMARTBoard 680 ketika digunakan (Sumber: 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: Images/sb680_P_RGB_H_0011_L.jpg)

26 77 Gambar 3.30 SMART UF65 (Sumber: 732/UF _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 ebeam Edge Interactive Activ SMART Xi Bar Board 378 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 Eraser Ya Ya Ya Ya

27 78 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 Memerlukan permukaan khusus Device tambahan Teknologi Ya Ya Ya Tidak Tidak Tidak Ya Ya Sensor dan stylus Sensor dan Stylus Sensor dan stylus Sensor dan Stylus Papan tulis khusus dan stylus Touchsceen Papan tulis khusus dan stylus 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 % responden menggunakan waktu efektif selama 100 menit untuk mengajar % responden tidak mengetahui adanya aplikasi Smart Board % responden menginginkan fitur pen pada aplikasi Smart Board % responden menginginkan fitur penghapus untuk aplikasi Smart Board % responden menginginkan fitur highlighter untuk aplikasi Smart Board % responden menginginkan fitur papan tulis virtual untuk aplikasi Smart Board % responden menginginkan fitur screen recording untuk aplikasi Smart Board.

28 % responden menginginkan aplikasi Smart Board ditempatkan dibagian bawah % responden memilih warna hitam sebagai warna yang paling dibutuhkan untuk menggambar dan menulis % responden menginginkan tersedianya preset-preset warna dan tabel warna untuk memilih warna % responden menginginkan fitur draw shape walaupun responden dapat menggambar dengan bebas % responden memilih shape lingkaran sebagai jenis shape yang paling dibutuhkan % responden menginginkan fitur undo dan redo ketika menggunakan aplikasi Smart Board % responden memilih kualitas 480p sebagai kualitas resolusi perekaman layar % responden menginginkan aplikasi Smart Board bisa berjalan sendiri (native) tanpa harus meng-install aplikasi pendukung lainnya % 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 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.

30 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 Membuat sebuah aplikasi yang 1. dapat membantu pembelajaran 91% responden merupakan agar menjadi lebih interaktif asisten lab. dengan uji coba di laboratorium Software Binus University % 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. 87% responden menginginkan fitur penghapus untuk aplikasi Smart Board. 87% responden menginginkan fitur highlighter untuk aplikasi Smart Board. 83% responden menginginkan fitur papan tulis virtual untuk aplikasi Smart Board. 72% responden menginginkan fitur screen recording untuk 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

31 82 No. Analisis Kebutuhan Solusi Kebutuhan aplikasi Smart Board % 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). 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.

32 Perancangan Aplikasi Berikut ini adalah perancangan aplikasi Bee Board berdasarkan solusi-solusi dari hasil yang didapatkan dalam analisis user dan analisis aplikasi sejenis Deskripsi Aplikasi Deskripsi aplikasi berisi tentang gambaran umum tentang aplikasi Bee Board. Berikut ini adalah deskripsi aplikasi Bee Board 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. 84 Gambar 3.31 Smart Board yang menggunakan teknologi sensor dan stylus (Sumber: Gambar 3.32 Smart Board yang menggunakan teknologi touch screen (Sumber: 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 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 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 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 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 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: <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 89 <bottomleft> <x>884</x> <y>32</y> </bottomleft> <bottomright> <x>252</x> <y>47</y> </bottomright> </wiimote> <board> <topleft> <x>102</x> <y>76</y> </topleft> <topright> <x>921</x> <y>76</y> </topright> <bottomleft> <x>102</x> <y>691</y> </bottomleft> <bottomright> <x>921</x> <y>691</y> </bottomright> </board> </calibration> </configuration> Tabel 3.3 Keterangan perancangan konfigurasi XML Deskripsi Value Keterangan audioinput default Audio input device yang digunakan pada audio video recording videodimensi Jenis ukuran video yang akan 480p on dihasilkan pada audio video

39 90 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. 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 calibration 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: Perancangan Sistem 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 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 :

41 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". 3. Administrator memilih halaman Wiimote Settings. 5. Administrator menekan tombol "Calibrate". 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. Responden Sistem 2. Sistem merespon dengan membuka aplikasi backend "Bee Board". 4. Sistem merespon dengan menampilkan halaman Wiimote Settings. 6. Sistem membuka Calibration Window dengan titik merah di kiri atas. 8. Sistem membaca posisi LED pen dan mengganti titik merah ke kanan atas. 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.

42 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" 6. Administrator memilih "Yes" 8. Administrator memilih "OK". 5. Sistem menampilkan konfirmasi "Are you sure you want to save configuration?" 7. Sistem menyimpan konfigurasi aplikasi "Bee Board" ke dalam sebuah file. 8. Sistem menampilkan notifikasi "Configuration saved successfully." 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 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" 5. Administrator memilih "Yes" 4. Sistem menampilkan konfirmasi "Are you sure you want to restore all configuration to default?" 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 Bidang khas suatu event 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"

44 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 Bidang khas suatu event 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.

45 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 Bidang khas suatu event 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.

46 97 5. User memilih ukuran ketebalan yang ingin digunakan. 9. User menandai bagian pada canvas "Bee Board". 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. 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. Bidang khas suatu event 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.

47 98 7. User memilih ukuran ketebalan yang ingin digunakan. 7. User menentukan titik pertama (X1,Y1) dari shape yang akan digambar 8. User menentukan titik kedua (X2,Y2) dari shape yang akan digambar. 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. 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 Tujuan Bidang khas suatu event User Merekam layar dan suara yang masuk ke dalam komputer yang menjalankan aplikasi "Bee Board" User dapat merekam layar dan suara yang masuk ke dalam komputer yang menjalankan aplikasi "Bee Board" Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih start recording tool. Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 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 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 Bidang khas suatu event 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.

49 100 Tabel 3.13 Use Case Narrative Undo Pelaku Deskripsi Tujuan Bidang khas suatu event User Membatalkan hasil gambar/coretan yang sudah dilakukan sebelumnya pada canvas "Bee Board" 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" Responden Sistem 2. Sistem merespon dengan membuka aplikasi "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. Pelaku Deskripsi Tujuan 11. Use Case Narrative Redo Pada proses ini, user dapat membatalkan proses undo yang telah dilakukan sebelumnya. Tabel 3.14 Use Case Narrative Redo User Mengembalikan hasil gambar/coretan pada canvas "Bee Board" yang sudah dibatalkan sebelumnya User dapat menggunakan fitur redo untuk mengembalikan tampilan canvas "Bee Board" sebelum fitur undo digunakan. Bidang Kegiatan User Responden Sistem

50 101 khas suatu event 1. User membuka aplikasi "Bee Board" 2. Sistem merespon dengan membuka aplikasi "Bee Board" 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 Deskripsi Tujuan Bidang khas suatu event User Menggabungkan seluruh hasil snapshot yang sudah disimpan menjadi sebuah file PDF User dapat menggabungkan seluruh hasil snapshot menjadi sebuah file dengan format PDF Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User memilih merge snapshots as PDF tool. Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 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 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 Bidang khas suatu event User Mengganti warna tool User dapat mengganti warna yang akan digunakan ketika menggunakan shape tool, pen tool, dan highlighter tool. Kegiatan User 1. User 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. 9. User memilih warna pada tabel warna. 10. User memilih "OK" pada tabel warna. Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 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. 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.

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

53 104 Tujuan Bidang khas suatu event 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.

54 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 Bidang khas suatu event 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.

55 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 Bidang khas suatu event Kegiatan User 1. User membuka aplikasi "Bee Board" 3. User menekan LED pen di daerah pemanggilan toolbox "Bee Board" pada bagian bawah canvas. Responden Sistem 2. Sistem merespon dengan membuka aplikasi "Bee Board" 4. Sistem merespon dengan membaca koordinat x LED pen, kemudian toolbox "Bee Board" berpindah ke koordinat x tersebut 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 Gambar 3.35 Sequence Diagram Calibrate 107

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

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

60 Gambar 3.39 Sequence Diagram Erase 111

61 Sequence Diagram Highlight Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan highlight pada aplikasi Bee Board. Gambar 3.40 Sequence Diagram Highlight

62 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

63 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 Gambar 3.43 Sequence Diagram Snapshot 115

65 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

66 Sequence Diagram Undo Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan undo pada aplikasi Bee Board. Gambar 3.45 Sequence Diagram Undo

67 Sequence Diagram Redo Sequence ini menunjukan proses-proses yang terjadi ketika user melakukan redo pada aplikasi Bee Board. Gambar 3.46 Sequence Diagram Redo

68 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

69 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

70 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

71 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

72 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

73 Sequence Diagram Call Toolbox Sequence ini menunjukan proses-proses yang terjadi ketika user memanggil toolbox Bee Board. Gambar 3.52 Sequence Diagram Call Toolbox 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 Gambar 3.53 Class Diagram Bee Board 55

75 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 127 Gambar 3.55 State diagram Canvas 3. State diagram Pen Berikut adalah state diagram untuk event-event yang terjadi pada Pen :

77 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

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

80 State diagram Recorder Berikut adalah state diagram untuk event-event yang terjadi pada Recorder : Gambar 3.61 State diagram Recorder

81 State diagram Configuration Berikut adalah state diagram untuk event-event yang terjadi pada Configuration : Gambar 3.62 State diagram Configuration

82 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

83 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

84 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 Storyboard 1. Front-End Tabel 3.22 Storyboard untuk Front-End Application Multimedia Storyboard Project: "Bee Board" Date: 1 Jan 2013 Screen: 1 of 3 Screen ID: Front-end

85 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

86 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

87 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

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

89 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" Date: 1 Jan 2013 Screen: 2 of 3 Screen ID: Back-end Application Screen Description: Back-end Application adalah bagian untuk pengaturan yang berhubungan aplikasi Bee Board.

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

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

92 143 b. WiiMote Settings Tabel 3.24 Storyboard WiiMote Settings (back-end application) Multimedia Storyboard Project: "Bee Board" Date: 1 Jan 2013 Screen: 3 of 3 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)