Rancang Bangun Aplikasi Sandi Semaphore pada Perangkat Mobile berbasis Android

(1)

Rancang Bangun Aplikasi Sandi Semaphore pada

Perangkat Mobile berbasis Android

1_{Rangga Firdaus,}2_{Machudor Yusman,}3_{Tangguh Pramono,}

1

Jurusan Ilmu Komputer Universitas Lampung

2_{Jurusan Ilmu Komputer Universitas Lampung} 3

Jurusan Ilmu Komputer Universitas Lampung

Abstract

Semaphore is a medium to communicate from one person to another. The process of studying semaphore codes is quite difficult and requires a relatively long time because of the limited medium for learning this code. This research aims to design and develop the application for learning semaphore code on Android-based mobile devices as well as providing an alternative learning media for semaphore code learners. Android mobile devices selected as the basis of application development considering of the use of those Android technologies.

This application was developed with the Java, HTML, CSS and JavaScript programming language. The data used are motion pictures semaphore. The application tests was carried out using the Blackbox Testing method. The testing is done by examining the functional features of the application. The test results of system and application test shows that the Semaphore Code Application is able to run well on Android operating system applied on Ice Cream Sandwich and Jelly Bean version and also able to translate words and sentences in roman letters into motion pictures semaphores.

Keywords: Android, learning media, mobile devices, semaphore.

1 Pendahuluan

Perkembangan penggunaan perangkat mobile di Indonesia yang semakin tinggi ini berpengaruh terhadap penggunaan layanan data internet yang semakin melonjak. Hasil survei dari MarkPlus

Insight Netizen menyebutkan bahwa jumlah pengguna internet di Indonesia telah mencapai 61

juta orang pada tahun 2012 [1]. Sebuah penelitian dari Silicon India menyebutkan bahwa Indonesia menempati posisi ke delapan negara dengan pengguna internet terbanyak di dunia. Penelitian dari Boston Consulting Group memprediksi jumlah pengguna internet di Indonesia terus meningkat sampai angka tiga kali lipat di tahun 2015 dibandingkan tahun 2010 [2].

Android merupakan salah satu produk ilmu pengetahuan di bidang teknologi yang berkembang

sangat cepat. Dari Metrotvnews.com dijelaskan bahwa sampai akhir tahun 2013, jumlah pengguna Android sebanyak 900 juta orang di seluruh dunia dan 48 miliar aplikasi yang telah terpasang di perangkat Android [3].

Semaphore merupakan salah satu media untuk berkomunikasi antara satu orang dengan orang

yang lainnya, yang memiliki keterampilan menguasai sandi semaphore yang sama [4]. Maka dengan dikembangkannya aplikasi semaphore pada Android ini, diharapkan para pengguna mendapatkan solusi dan alternatif media pembelajaran yang lebih baik dan lebih mudah, serta dapat diimplementasikan di media yang berbeda. Tujuan penelitian ini adalah merancang dan mengembangkan aplikasi pembelajaran sandi semaphore para perangkat mobile berbasis Android.

(2)

2 Metodologi

Penelitian ini menggunakan metode Waterfall sebagai metode pengembangan sistem. Metode ini dipilih karena metode Waterfall merupakan metode yang sistematis, berututan, serta mudah diimplementasikan dalam proses pengembangan sistem. Metode Waterfall yang dilakukan pada penelitian ini terdiri dari:

1. Analisis Kebutuhan Sistem (Requirement Definition). 2. Desain Aplikasi (System and Software Design).

3. Penerapan Desan dan Penulisan Kode Program (Implementation and Coding). 4. Pengujian Aplikasi (Integration and System Testing).

5.

Penerapan Aplikasi dan Perawatan (Operational and Maintenance) [5].

3 Pembahasan

3.1 Analisis Kebutuhan Sistem

Aplikasi Sandi Semaphore dikembangkan dengan menggunakan bahasa pemrograman Java, HTML, CSS dan JavaScript. Source code aplikasi ditulis dengan menggunakan text editor Xcode, kemudian di-compile dengan menggunakan aplikasi Eclipse. Data yang digunakan pada aplikasi ini adalah gambar gerakan-gerakan semaphore.

3.2 Perancangan Aplikasi

Perancangan Aplikasi Semaphore terdiri dari Use Case Diagram, Data Flow Diagram, Activity

Diagram, Class Diagram dan Interface Diagram.

3.2.1 Use Case Diagram

Use Case Diagram adalah diagram yang mendeskripsikan interaksi antara pengguna dengan

aplikasi. Desain Use Case Diagram ditunjukkan seperti pada Gambar 1.

Translate

Keywords

Dictionary

About and Help

User

System

(3)

3.2.2 Data Flow Diagram (DFD)

DFD Aplikasi Semaphore terdiri dari Context Diagram dan DFD level 1. DFD level 1 Aplikasi

Semaphore seperti tampak pada Gambar 2.

Informasi Data Gambar

User

Memilih menu

Aplikasi

Semaphore Data Gambar

Menampilkan pilihan menu

Data Gambar

Gambar 2. DFD level 1 aplikasi

3.2.3 Activity Diagram

Activity Diagram atau Diagram Aktivitas menggambarkan alir akvitas dalam aplikasi,

menjelaskan proses masing-masing alir berawal, decision yang mungkin terjadi dan proses aplikasi berakhir. Diagram aktivitas juga menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.

3.2.3.1 Diagram Aktivitas Halaman Utama

Diagram aktivitas Halaman Utama Aplikasi Semaphore ditunjukkan seperti pada Gambar 3.

User Sistem

Memilih Aplikasi Semaphore Menampilkan Halaman Utama

Memilih Menu pada Halaman Utama Menampilkan Icon Menu pada Halaman Utama

Translate Keywords Dictionary Help and About

Menampilkan Halaman Selanjutnya

(4)

nampilkan Informasi Halaman Keywor

3.2.3.2 Diagram Aktivitas Halaman Translate

Diagram aktivitas Halaman Translate ditunjukkan pada Gambar 4.

User Sistem

Memilih Halaman Translate Menampilkan Halaman Translate

Memilih menu pada Halaman Translate

Kembali ke Halaman Utama Input Translate

Menekan "Go" Button Mengeksekusi input translate

Melihat hasil terjemahan Menampilkan hasil terjemahan

Menampilkan Halaman Utama

Gambar 4. Diagram Aktivitas Halaman Translate

3.2.3.3 Diagram Aktivitas Halaman Keywords, Dictionary, dan Help and About

Diagram Aktivitas Halaman Keywords, Dictionary, dan Help and About ditunjukkan pada Gambar 5.

User Sistem

MemMielmihilHihaHlaamlaamnaKn eKyewyowrodrsd,s Me Menampilkan Halaman Keywords, ds

Dictionary, dan Help and About Dictionary, dan Help and About

Menekan Home Button

(5)

Top Package::translate.html Top Package::keywords.html Top Package::dictionary.html

3.2.4 Class Diagram

Class Diagram atau Diagram Kelas merupakan diagram struktural yang memodelkan

sekumpulan kelas, interface, kolaborasi dan relasinya. Diagram kelas digambarkan dengan bentuk kotak. Diagram kelas Aplikasi Semaphore ditunjukkan pada Gambar 6.

tangguh.web. semaphore

Top Package::index.html

Top Package::helpabout.html

«datatype» «datatype» «datatype» «datatype» «datatype» «datatype»

sema.css jqm-docs.js jqm-docs.css jquery.mobile-1.1.1.css jquery.js jquery.mobile-1.1.1.js

Gambar 6. Diagram Kelas Aplikasi Semaphore

3.2.5 Interface Diagram

Interface Diagram atau Diagram Antarmuka digunakan untuk menjelaskan alur antarmuka

aplikasi. Halaman menunjukkan pilihan-pilihan yang dapat diakses oleh pengguna. Desain perancangan diagram antarmuka Aplikasi Semaphore ditunjukkan pada Gambar 7.

KELUAR Kembali [3] HALAMAN UTAMA [1] HEADER [2] TRANSLATE [3] KEYWORDS [5] HELP AND ABOUT [6] APPENDIX COPYRIGHT [2] HALAMAN TRANSLATE [1] BUTTON HOME [2] HEADER [3] POSISI SEMAPHORE [5] GO TRANSLATE BUTTON Kembali [4] Kembali Kembali [5]

HALAMAN KEYWORDS HALAMAN DICTIONARY HALAMAN HELP AND ABOUT

[1] BUTTON HOME [1] BUTTON HOME [1] BUTTON HOME

[2] HEADER [2] HEADER [2] HEADER

[3] LISTING KEYWORDS [4] GERAKAN SEMAPHORE [5] FOOTER COPYRIGHT

[3] LISTING GERAKAN SEMAPHORE (A-Z 0-9)

[5] FOOTER COPYRIGHT

[3] INFORMASI BANTUAN DAN TENTANG APLIKASI [5] FOOTER COPYRIGHT

Kembali Kembali Kembali

Gambar 7. Diagram Antarmuka aplikasi

(6)

Copyright Dictionary Header Semaphore images Semaphore images Translate Button Keyword Button Dictionary Button Help and About B utton

3.3 Desain Halaman Aplikasi

Desain halaman-halaman Aplikasi Semaphore seperti pada Gambar 8.

Header Home Button Translate Header Home Button Keyword Header

Home Button Home Button

Help and About Header

Translated images Semaphore images Key words Help and Ab out Text Info rmation

Copyright

Input form _ButtonGo

Gambar 8. Desain Halaman-halaman aplikasi

3.4 Implementasi dan Kode Program

Untuk membuat sebuah aplikasi Android, pertama dilakukan adalah membuat sebuah project pada aplikasi Eclipse. Pada awal pembuatan project, Eclipse menentukan nama project aplikasi yang dibuat dan lokasi penyimpanan data-data aplikasi. Kemudian menentukan target Android SDK, yaitu target maksimal aplikasi dapat berjalan. Langkah terakhir yang dilakukan adalah menambahkan nama package project Aplikasi Semaphore dan menentukan Android SDK minimal yang dapat digunakan.

3.4.1 Integrasi PhoneGap

Pada activity project, ditambahkan library PhoneGap dan sebuah public class untuk mengeksekusi library yang telah ditambahkan, yaitu extends

DroidGap. Perintah super.loadUrl

("file:///android_asset/www/index.html") merupakan perintah dasar yang digunakan untuk memuat file index.html yang merupakan halaman utama Aplikasi Semaphore. Nama

package yang digunakan pada Aplikasi Semaphore adalah tangguh.web.semaphore, terlihat pada Gambar 9.

(7)

3.4.2 Versi Aplikasi

android:versionCode merupakan fungsi untuk menjelaskan kode aplikasi yang dibuat. Fungsi ini bisa bernilai sampai tak hingga, tergantung pada pengembang jika terus mengembangkan aplikasinya. Sedangkan android:versionName digunakan untuk menentukan versi aplikasi yang dibuat oleh pengembang. Perintah <uses-sdk digunakan untuk menentukan versi minimal dan target SDK yang digunakan. Contoh program untuk menentukan versi aplikasi seperti tampak pada Gambar 10.

Gambar 10. Source code versi aplikasi

3.4.3 Halaman Aplikasi

Halaman-halaman Aplikasi Semaphore seperti pada Gambar 11.

Gambar 11. Halaman-halaman aplikasi

Button kembali ke Halaman Utama ditunjukkan pada perintah <a href="index.

html"><div class="mb_single">Home</div>. Perintah <a href= "index. html"> digunakan untuk menautkan ke Halaman Utama. Kemudian untuk header halaman ini ditunjukkan dengan perintah <div class="ui-block-a"><img src="img/ header_translate.png" width="100%"/></div>. Perintah <img src=”...” adalah untuk merujuk lokasi gambar berada. Perintah width="100%" berfungsi untuk membuat header halaman ini memiliki lebar sesuai lebar perangkat yang digunakan. Potongan perintah <td valign="top" id="content"> <img name= "semaphore"

id="semaphore" src= "img/~.gif" class= "signalman"/>

</td>, digunakan untuk mendefinisikan gambar default yang muncul pada Halaman

Translate, sebelum dan sesudah dilakukan proses penerjemahan. Fungsi input kata pada

(8)

Gambar 12. Source code input kata atau kalimat dan go buttom

Fungsi penerjemahan pada Halaman Translate ini menggunakan bahasa pemrograman

JavaScript. Perintah function addLetter(newLetter){flag[i]="img/"+

newLetter+".gif";}, digunakan untuk menerjemahkan input kata menjadi gerakan isyarat

semaphore. Perintah var t=setInterval (printFlag, 500); digunakan untuk

memberikan nilai jarak waktu antar isyarat gerakan semaphore sesuai input kata yang dimasukkan. Nilai waktu ini memiliki satuan milisecond, atau 1/1000 detik. Source code lengkap proses penerjemahan Aplikasi Semaphore ini seperti ditunjukkan pada Gambar 13.

Gambar 13. Source code untuk melakukan terjemahan dari huruf menjadi gambar

Isi Halaman Keywords merupakan perpaduan gerakan isyarat semaphore yang sudah biasa digunakan dalam peragaan semaphore. Perpaduan gerakan isyarat ini memiliki arti tersendiri. Dalam menyusun halaman ini, digunakan perintah <table> untuk membentuk halaman dalam bentuk tabel yang berisi banyak keyword. Perintah <tr><h3>1. Berita Siap dimulai</h3><p><img src="img/ur.gif"/></p></tr>, digunakan untuk

(9)

Gambar 14. Potongan source code Halaman Keywords

lass="abc"><img src="img/a.gif" class="alphabet" alt=""/> an perintah untuk memuat gambar yang ditampilkan pada Halaman Dictionary ="abc" merupakan nama dari class perintah yang dieksekusi. Sedangka ="alphabet", merupakan nama class yang diakses dari file sema.css, digunaka

engatur ukuran gambar semaphore. Potongan source code Halaman Dictionary sepert mbar 15.

Gambar 15. Potongan source code Halaman Dictionary

menampilkan gambar sebagai background halaman, digunakan perintah background- e:url("img/bluebg.png");, seperti tampak pada Gambar 16.

Gambar 16. Source code menampilkan gambar background

n Help and About menggunakan atribut <div class="textinfo"> untuk pilkan karakter halaman. Class tersebut berada di file sema.css yang merupakan rujukan n untuk memperindah halaman. <ul><li>Versi : 1.0 </li>, merupakan untuk membuat tulisan dalam bentuk list tidak bernomor. Perintah <p e="text-align:center;"> © <b>2014 Tangguh Pramono menampilkan judul keyword dengan tipe header level 3 <h3>, gambar ditampilkan pada baris baru dengan perintah <p>, dan <tr> digunakan untuk mengisi data tabel tiap barisnya. Contoh potongan source code Halaman Keywords seperti tampak pada Gambar 14.

<div c , merupak . class n class n untuk m i pada Ga Untuk imag Halama menam tambaha perintah styl

</b></p>, digunakan untuk menampilkan copyright di baris paling bawah halaman ini. Perintah style="text-align:center;" berfungsi untuk menampilkan tulisan copyright dalam bentuk rata tengah, dan perintah <b> untuk memberi efek bold pada tulisan copyright.

Copyright berfungsi untuk menunjukkan hak cipta atas Aplikasi Semaphore. Source code

(10)

Gambar 17. Source code Halaman Help and About

3.5 Pengujian Aplikasi

Aplikasi Semaphore ini diuji dengan menggunakan metode Blackbox Testing yang berfokus pada persyaratan fungsional perangkat lunak. Tujuan penerapan metode pengujian ini adalah untuk mencari kesalahan pada fungsi yang tidak sesuai, ketidakharmonisan pada interface, kesalahan pada struktur data, kesalahan performance dan kesalahan inisialisasi serta tujuan akhir aplikasi [6]. Pengujian dilakukan dengan melibatkan 16 orang responden atau penguji. Kemudian meminta seluruh responden tersebut untuk memasang Aplikasi Semaphore para perangkat Android-nya. Setelah selesai memasang aplikasi, responden diberikan waktu untuk melihat-lihat, mempelajari dan menelusuri setiap informasi yang terdapat pada aplikasi, termasuk mencoba mengonversi teks menjadi gambar semaphore pada Halaman Translate. Setelah responden selesai menggunakan aplikasi tersebut, responden memberikan feedback berupa kuisioner yang telah disiapkan oleh pengembang.

Tabel 1. Hasil Kuisioner Pengujian Aplikasi Semaphore

No Pertanyaan Jawaban

1 Apakah Anda menggunakan perangkat smartphone dengan

Android sebagai sistem operasinya?

Ya Tidak

15 1

2 Jika Ya, versi apakah yang Anda gunakan? JB ICS Lainnya

13 2 -

3 Sudah berapa lama Anda menggunakan perangkat Android tersebut?

< 6 bln 6-12 bln > 12 bln

5 3 7

4 Apakah Anda tahu mengenai sandi semaphore sebelumnya? Tahu Tidak Tahu

13 3

5 Apakah Anda bersedia untuk meng-install Aplikasi

Semaphore di perangkat Android Anda? Bersedia

Tidak Bersedia

14 1

6 Apakah Aplikasi Semaphore dapat berjalan baik di

perangkat Android Anda? Ya Tidak

Tidak Tahu

(11)

7 Bagaimana tampilan Aplikasi Semaphore secara keseluruhan menurut pendapat Anda?

Baik Kurang Menarik

Tidak Menarik

14 2 -

8 Apakah Aplikasi Semaphore dapat membantu Anda sesuai

dengan fungsi aplikasi tersebut? Ya Tidak

Tidak Tahu

14 1 -

Tabel 2. Hasil Pengujian Fungsional Aplikasi

No Tes Kasus Harapan Versi Android

4.0 4.1 4.2 4.3

1 Install Aplikasi Aplikasi dapat di-install para

berbagai versi Android ✓ ✓ ✓ ✓

2 Menu Utama Tampilan Menu Utama tersusun dengan baik (tidak berantakan)

✓ ✓ ✓ ✓

3 Menu Translate Tampilan Menu Translate

tersusun dengan baik ✓ ✓ ✓ ✓

Fungsi input dan translate

berjalan dengan baik ✓ ✓ ✓ ✓

4 Menu Keywords Tampilan kombinasi huruf

semaphore dapat tampil

dengan baik

✓ ✓ ✓ ✓

5 Menu Dictionary Tampilan deretan gambar- gambar gerakan semaphore

dapat tampil dengan baik

✓ ✓ ✓ ✓

6 Menu Help and About Tampilan teks bantuan informasi versi aplikasi dapat tampil dengan baik

✓ ✓ ✓ ✓

7 Menu button Button kembali ke Menu

Utama dapat tampil dan berjalan dengan baik

✓ ✓ ✓ ✓

8 Full Screen Aplikasi dapat tampil dengan

full screen mode ✓ ✓ ✓ ✓

9 Icon Aplikasi Logo aplikasi berupa logo

Android dengan warna

bendera semaphore dapat terlihat pada daftar aplikasi ter-install di perangkat

Android

✓ ✓ ✓ ✓

10 Resolusi Perangkat

Android

Aplikasi dapat berjalan pada berbagai resolusi perangkat

Android

✓ ✓ ✓ ✓

Dari hasil pengujian fungsional aplikasi, secara umum didapat bahwa Aplikasi Semaphore ini dapat berjalan baik pada smartphone berbasis Android versi 4.0 Ice Cream Sandwich dan 4.1

Jelly Bean. Dari lima halaman yang dibuat oleh pengembang, yaitu Halaman Utama, Halaman Translate, Halaman Keyword, Halaman Dictionary, dan Halaman Help and About,

(12)

secara keseluruhan dapat berjalan dengan baik, dan telah sesuai yang telah direncanakan oleh pengembang. Fungsi terjemahan atau translasi yang merupakan inti dari aplikasi ini pun dapat berjalan dengan baik sebagaimana mestinya.

Kesimpulan

Berdasarkan hasil pengujian dan analisis pada Aplikasi Sandi Semaphore pada perangkat mobile berbasis Android, maka didapatkan kesimpulan sebagai berikut:

1. Aplikasi ini dapat dipasang dan berjalan dengan baik pada perangkat Android versi ICS dan

Jelly Bean.

2. Aplikasi ini mampu menerjemahkan kata dan kalimat yang di-input-kan oleh user menjadi gerakan-gerakan isyarat semaphore.

3. Aplikasi ini sangat berguna untuk user yang ingin mempelajari gerakan-gerakan semaphore, baik untuk tingkat pemula maupun yang telah mahir.

Referensi

[1] Simpleitcom. 2013. Woow Pengguna Perangkat Mobile Melebihi Jumlah Penduduk Indonesia. http://simpleitcom.blogspot.com/2013/10/woow- pengguna- perangkat-mobile- melebihi.html diakses pada 7 November 2013 pukul 16.37 WIB.

[2] Kristo, Fino Yurio, 2013. Posisi Indonesia di Percaturan Teknologi Dunia. http://inet.detik.com/read/2013/ 08/ 21/ 112207/ 2336008/ 398/ 2/ posisi-indonesia- di- percaturan-teknologi-dunia. Diakses pada 3 November 2013 pukul 10.34 WIB.

[3] Lam, Stephen. 2013. 900 Juta Orang Gunakan Android. http://www.metrotvnews. com/tekno/read/2013/05/16/13/154157/900-Juta-Orang-Gunakan-Android. Diakses pada 5 November 2013 pukul 00.50 WIB.

[4] O-Reaper, Jack. 2013. Semaphore. http://detsunote.blogspot.com/2013/01/semaphore.html, diakses pada tanggal 1 November 2013 pukul 10.44 WIB.

[5] Sommerville, Ian. 2011. Software Engineering Ninth Edition. Pearson Education, Inc.: USA. Hal. 30-32.

[6] Khan, Mohd. Ehmer dan Farmeena Khan. 2012. A Comparative Study of White Box, Black