Makalah Seminar Tugas Akhir

Pembangunan Aplikasi Mobile

Edukasi Sejarah Ilmuwan Islam

Menggunakan HTML5 dan Framework PhoneGap

Muhammad Khoerul Huda , Moch. Taufik, ST. MiT, Mustafa, ST. MMMahasiswa FTI, Jurusan Teknik Informatika, UNISSULA

Dosen Pembimbing 1, FTI, Jurusan Teknik Informatika, UNISSULADosen Pembimbing 2, FTI, Jurusan Teknik Informatika, UNISSULA

ABSTRAK

Smartphone atau telepon pintar saat ini memiliki segudang keunggulan dan kecanggihan. Salah satu keunggulan yang baru-baru ini ditemukan adalah developer atau pengembang aplikasi dapat membangun suatu aplikasi mobile dengan memanfaatkan HTML5. HTML5 memperkenalkan unsur-unsur penataan baru yang dapat digunakan untuk membuat dokumen menjadi lebih canggih.

Fitur-fitur dalam HTML5 sangat banyak dan berguna pada pengelolaan halaman web maupun aplikasi masa mendatang. Sampai sekarang ini, fitur pada HTML5 terbagi menjadi beberapa bagian seperti Canvas (2D and 3D), Cross-document messaging, Geolocation, Audio and Video, Forms, MathML, Microdata, Server-Sent events, Scalable Vector Graphics (SVG), WebSocket API and protocol, Web origin concept, Web storage, Indexed database, Application Cache (Offline Web Apps), Web Workers, Drag and Drop, XMLHttpRequest Level 2.

Untuk membangun aplikasi mobile berbasis HTML5, developer dapat memanfaatkan framework bernama PhoneGap. PhoneGap menyediakan jembatan dari dunia JavaScript ke dunia asli dari platform, yang memungkinkan API JavaScript untuk mengakses dan mengontrol perangkat (ponsel atau tablet).

Implementasi dari HTML5 yang dapat dimanfaatkan untuk membangun suatu aplikasi mobile akan diaplikasikan dalam bentuk sistem aplikasi edukasi mobile Android dengan topik pembelajaran dan sejarah ilmuwan-ilmuwan Islam di dunia. Aplikasi ini dinamakan Ilmuwan Islam.Kata Kunci: Aplikasi Mobile, HTML5, PhoneGaP, Android, Ilmuwan Islam,

BAB I PENDAHULUAN

1.1 Latar BelakangDewasa ini, seluruh kalangan masyarakat lebih tertarik menggenggam

perangkat smartphone dibanding membaca buku. Sebuah info grafik yang diterbitkan oleh Go-Gulf.com, diketahui bahwa pengguna smartphone di dunia sudah mendekati angka 1,1 Milyar, dimana market share tertinggi adalah Android dengan 46,9% dan iPhone 28,7%. Strategy Analytics, salah satu perusahaan riset, mengungkapkan bahwa kuartal ke-3 2012 menjadi tonggak awal utama, dimana disebutkan sekarang telah ada lebih dari 1 miliar smartphone digunakan di seluruh dunia

1

Sementara itu juga, pertumbuhan pemakai smartphone di Indonesia diprediksi meningkat dari 6% di 2011 menjadi 22% pada 2012, atau naik tiga kali lipat. Temuan itu seperti dilaporkan Ericsson Lab yang melakukan riset sejak awal 2011 hingga awal 2012 kepada 6.600 responden di seluruh Indonesia.

Smartphone atau telepon pintar saat ini memiliki segudang keunggulan dan kecanggihan. Salah satu keunggulan yang baru-baru ini ditemukan adalah developer atau pengembang aplikasi dapat membangun suatu aplikasi mobile dengan memanfaatkan HTML5. Kemudahan ini dapat ditemukan dalam sebuah framework yang bernama PhoneGap. Framework ini memungkinkan developer untuk membuat aplikasi dengan basis platform mobile seperti Android, iOS, Windows Phone7, Blackberry, Bada maupun WebOS sekaligus.

HTML5 sebenarnya sudah mulai dimanfaatkan oleh vendor-vendor terkenal seperti Youtube dan para vendor pembuat game online. HTML5 bukanlah bahasa pemrograman baru, karena HTML5 tetap memiliki basis HTML umum, CSS, DOM maupun Javascript. Dengan teknologi baru yang disandangnya seperti Canvas, dukungan video, offline local storage, dan game development, menjadikan HTML5 lebih menarik untuk dimanfaatkan dalam membangun sebuah aplikasi.

Oleh karena HTML5 sekarang dapat dimanfaatkan untuk membangun suatu aplikasi mobile, maka penulis akan mencoba mengaplikasikannya dalam bentuk aplikasi edukasi mobile dengan topik pembelajaran dan sejarah ilmuwan-ilmuwan Islam di dunia.

1.2 Perumusan MasalahDari uraian latar belakang di atas, dapat dirumuskan permasalahan yang

dihadapi yaitu Bagaimana mewujudkan sebuah aplikasi mobile yang berkaitan dengan sejarah ilmuwan-ilmuwan Islam di dunia menggunakan sebuah Framework HTML5 yang nantinya dapat disajikan untuk para pengguna Smartphone.

1.3 Pembatasan MasalahAplikasi dan sistem yang akan dibuat mempunyai batasan beberapa

masalah, agar pembahasan maupun perancangan nantinya tidak terlalu melebar. Berikut adalah batasan masalahnya:1. menitik beratkan pada aplikasi mobile berbasis HTML52. aplikasi ini dimaksudkan sebagai media untuk edukasi sejarah para tokoh

ilmuwan Islam di seluruh dunia.3. berfokus pada pembangunan aplikasi mobile menggunakan framework

HTML5 dengan memanfaatkan PhoneGap.

1.4 Tujuan PenelitianTujuan yang ingin dicapai dalam penulisan tugas akhir ini yaitu:

1. Menciptakan sebuah aplikasi mobile yang akan mendayagunakan perangkat smartphone sebagai proses edukasi dan inspirasi.

2. membuat suatu aplikasi mobile berbasis HTML5 dan sesuai dengan

2

perkembangan zaman.3. Menciptakan aplikasi mobile yang menampilkan biografi dan sejarah para

ilmuwan Islam yang berpengaruh di dunia.4. membangun aplikasi mobile dengan menggunakan framework PhoneGap dan

Eclipse.

1.5 Manfaat PenelitianManfaat yang ingin dicapai penulis dalam penulisan laporan tugas akhir

ini adalah :1. Dapat mengaplikasikan bahasa pemrograman HTML5 menjadi sebuah ap-

likasi mobile berbentuk edukasi sejarah Ilmuwan Islam.2. Sebagai sarana belajar sejarah dan biografi Ilmuwan Islam dengan lebih

ringkas.3. Memaparkan kepada kalangan bahwa HTML5 dapat dipergunakan untuk

membuat sebuah aplikasi mobile tanpa menggunakan bahasa pemrograman asli (native programming).

1.6 Sistematika PenulisanLaporan tugas akhir ini disusun dengan cara sistematis agar

mempermudah penulis maupun pembaca dalam mempergunakan laporan ini, adapun sistematika penulisan tugas akhir ini adalah :BAB I PENDAHULUAN

Pada bab ini akan dijelaskan mengenai latar belakang pembuatan laporan tugas akhir, perumusan masalah, pembatasan masalah, tujuan tugas akhir, manfaat tugas akhir, serta sistematika penulisan.

BAB II TINJAUAN PUSTAKAPada bab ini berisi berbagai landasan teori yang digunakan untuk menunjang analisa masalah sebagai acuan untuk menyusun tugas akhir.

BAB III PERANCANGAN SISTEMPada bab ini dijelaskan tentang langkah-langkah perancangan, diantaranya yaitu : Deskripsi Sistem, Pengguna Sistem, Perancangan Rule, Pemodelan Data, Perancangan Database, Desain Antarmuka.

BAB IV IMPLEMENTASI DAN PENGUJIANPada bab ini akan dibahas proses pembuatan program-program inti atau prosedur-prosedur inti, serta tampilan antarmuka terhadap aplikasi yang dibuat maupun pengujian sistem.

BAB V KESIMPULAN DAN SARANBab ini berisi kesimpulan mengenai laporan tugas akhir dan saran untuk pengembangan ke depan.

BAB II TINJAUAN PUSTAKA2.1 Definisi Smartphone

Smartphone secara harfiah artinya telepon pintar, yakni telepon seluler yang memiliki kemampuan seperti PC walaupun terbatas. Selain itu, smartphone juga mendukung email dan organizer. Fitur lainnya adalah kemampuannya untuk

3

ditambah aplikasi-aplikasi baru (Zaki, 1999).Sistem operasi yang dapat ditemukan di telepon pintar atau Smartphone

adalah Symbian OS, iPhone OS, RIM BlackBerry, Windows Mobile, Linux, Palm WebOS dan Android. Android dan WebOS dibuat oleh Linux, dan iPhone OS dibuat oleh BSD dan sistem operasi NeXTSTEP berhubungan dengan Unix (Wikipedia).

Menurut Istiyanto (2012), Smartphone (ponsel cerdas) merupakan salah satu wujud realisasi ubiquitous computing (ubicomp) di mana teknologi tersebut memungkinkan proses komputasi dapat terintegrasi dengan berbagai aktifitas keseharian manusia dengan jangkauannya yang tidak dibatasi dalam satu wilayah atau suatu scope area.

Dalam masa ini, ubicomp telah didukung beberapa faktor, diantaranya adalah (Istiyanto, 2012):1. Pertama, dukungan ketersediaan jaringan infrastruktur nirkabel dengan caku-

pan yang luas untuk komunikasi data atau komunikasi audio dan video.2. Kedua, teknologi mikroprosesor yang semakin canggih.3. Ketiga, faktor gaya hidup user yang saat ini mulai bergantung pada perangkat

mobile sebagai alat komunikasi di social network, akses layanan e-mail, chat-ting, atau telekonferensi.

Komunikasi digital nirkabel sudah sangat dibutuhkan pada berbagai bidang, seperti edukasi, bisnis, hiburan, kesehatan atau keamanan. Sehingga sangat diperlukan ketersediaan perangkat mobile yang dapat mendukung aktivitas pengguna di berbagai lingkungan dengan fleksibilitas tinggi, perangkat yang lebih praktis dan kemudahan dalam penggunaan (Istiyanto, 2012).

2.2 Sejarah HTMLPada tahun 1998, W3C (World Wide Web Consortium) memutuskan

bahwa mereka tidak akan lagi untuk melanjutkan pengembangan HTML. Kedepannya mereka lebih percaya kepada XML. Jadi, mereka menghentikan pengembangan HTML pada versi 4.01 dan merilis sebuah spesifikasi baru bernama XHTML 1.0, dimana menjadi sebuah versi XML dari HTML yang mengharuskan penggunaan sintaks XML sebagai atribut quote, penutupan tags dan lainnya. Transisi XHTML didesain untuk memudahkan seorang beralir ke standar emas dari versi XHTML paling ketat (Lawson, 2010).Sebuah grup perusahaan Kecil bernama Opera, tidak yakin bahwa XML yang dikembangkan W3C adalah masa depan untuk pembuatan web. Mereka bekerja untuk melanjutkan proyek pengembangan HTML secara mandiri hingga memunculkan versi HTML baru yaitu HTML5 (Lawson, 2010).

2.2.1 HTML5HTML5 memperkenalkan unsur-unsur penataan baru yang dapat

digunakan untuk membuat dokumen menjadi lebih canggih. Konsep HTML5 awalnya diusulkan oleh perusahaan-perusahaan besar seperti Apple, Mozilla Foundation, dan Opera Software yang dikenal sebagai WHATWG kepanjangan dari Web Hypertext Application Technology Working Group (Sikos, 2011).

Fokus HTML5 tidak hanya berkutat pada markup struktural dan

4

multimedia, tetapi juga pada pemrograman aplikasi antarmuka atau biasa disebut API. Aplikasi yang dibuat menggunakan HTML5 dapat diakses pada perangkat independen, selain itu kode HTML5 juga dapat dengan mudah digunakan kembali. Namun, sebagian besar dari fungsi HTML5 akan dapat dicapai melalui penggunaan teknologi tambahan seperti CSS3, Javascript, Server Side Script, Java, atau XSLT (Sikos, 2011).

2.2.2 Penerapan HTML5Dalam penggunaannya, HTML5 awalnya dibagi menjadi beberapa

spesifikasi yang dapat memisahkan dokumen standar untuk menjaga spesifikasi terfokus. HTML5 dianggap lebih cerdas untuk mengatur dan mengedit beberapa fitur tertentu. Dengan cara ini, satu masalah markup kecil tidak akan mempengaruhi markup secara keseluruhan isi dari tampilan HTML (Rubbers, 2011).

Menurut Rubbers (2011), para ahli di berbagai penjuru dunia telah berkontribusi bersama-sama pada milis atau tulisan mereka sendiri untuk membahas fitur HTML5. Fitur yang mereka bahas mengacu pada set asli fitur, termasuk Geolocation, dan berbagai API HTML5. Fitur-fitur dalam HTML5 sangat banyak dan berguna pada pengelolaan halaman web. Sampai sekarang ini, fitur pada HTML5 terbagi menjadi beberapa bagian seperti berikut:

Canvas (2D and 3D) Cross-document messaging Geolocation Audio and Video Forms MathML Microdata Server-Sent events Scalable Vector Graphics (SVG) WebSocket API and protocol Web origin concept Web storage Indexed database Application Cache (Offline Web Apps) Web Workers Drag and Drop XMLHttpRequest Level 2

2.3 Pengembangan Aplikasi MobilePada tahun 2007, Apple dan Google meluncurkan platform mobile

mereka. Dan pada tahun 2008, kedua perusahaan telah meluncurkan toko aplikasi (web store) mobile yang memungkinkan pengguna smartphone untuk men-download aplikasi mobile. Era aplikasi mobile telah dimulai. Sejak saat itu, jumlah pengguna smartphone telah tumbuh secara eksponensial (Gathol, 2012).

Menurut Gathol (2012), beberapa perusahaan mulai berfokus pada penyediaan layanan dan konten pada platform smartphone. Para pebisnis sadar,

5

bahwa mereka harus mengalihkan fokus mereka untuk pengguna smartphone. Tidak hanya karena adanya peningkatan jumlah pengguna, tetapi frekuensi penggunaan smartphone meningkat juga.

Bisa dibayangkan, jika pengembang aplikasi bekerja ratusan jam untuk merilis produk yang sama pada iPhone, Android, BlackBerry, WebOS, dan Symbian. Pekerjaan ini dimulai dengan pembangunan lingkungan masing-masing platform yang telah terfragmentasi. Untuk iPhone, diperlukan mesin Mac, dan untuk BlackBerry, dibutuhkan Windows (Gathol, 2012).

Banyak dari developer setidaknya harus memiliki beberapa pengalaman sebelum bekerja dengan aplikasi mobile, namun sejumlah besar dari para developer lebih akrab dengan non-mobile Platform (semisal platform web) (Gathol, 2012).

2.4 AndroidAndroid adalah sebuah sistem operasi untuk perangkat mobile berbasis

Linux yang mencakup sistem operasi, middleware dan aplikasi. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka. Awalnya, Google Inc. Membeli Android Inc. Yang merupakan pendatang baru yang membuat piranti lunak untuk ponsel/smartphone. Kemudian untuk mengembangkan Android, dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan piranti keras, piranti lunak, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia. (Safaat, 2012).

Menurut Safaat (2012), pada saat perilisan perdana Android, 5 November 2007, Android bersama Open Handset Alliance menyatakan mendukung pengembangan open source pada perangkat mobile. Di lain pihak, Google merilis kode-kode Android di bawah lisensi Apache, sebuah lisensi perangkat lunak dan open platform perangkat seluler.

2.5 PhoneGapPhoneGap adalah framework aplikasi berbasis HTML5 yang digunakan

untuk mengembangkan aplikasi asli mobile melalui teknologi web. Intinya, developer dapat mengembangkan aplikasi Smartphone dan Tablet dengan menggunakan bahasa pemrograman web seperti HTML, CSS, dan JavaScript. Dengan PhoneGap, pengembang tidak harus belajar bahasa pemrograman baru seperti Objective-C untuk iPhone dan Java untuk Android (Gathol, 2012).

Gathol (2012) juga menjelaskan bahwa PhoneGap menggunakan HTML5, JavaScript, dan CSS3 untuk mengembangkan aplikasi mobile. Itu artinya bahwa PhoneGap memakai teknologi standar dalam dunia web. Dengan menggunakan PhoneGap, pengembang dengan sedikit atau tidak memiliki latar belakang bahasa asli pemrograman Platform Mobile dapat mulai mengembangkan aplikasi mobile untuk semua platform mobile populer seperti :

Android, iPhone, Blackberry, Windows Phone 7. Symbian,

6

Maupun Bada.

BAB III PERANCANGAN SISTEM3.1 Deskripsi Sistem

Cara kerja Sistem Aplikasi Mobile ini adalah dengan merangkum beberapa kisah atau cerita para ilmuwan Islam di seluruh dunia dimana didalamnya juga terdapat detail mengenai tanggal lahir, kota atau negara asal, kontribusi alat maupun penemuan dan cerita singkat mengenai tokoh ilmuwan tersebut. Sistem aplikasi mobile ini merupakan bentuk dari edukasi ringkas yang dirangkum dalam bentuk aplikasi praktis sehingga dapat dimanfaatkan oleh banyak kalangan, baik pelajar maupun masyarakat umum pengguna smartphone / tablet.

Sistem dibuat dengan antarmuka yang ringkas dan mudah dipahami, dimana sedapat mungkin pengguna dihadapkan dengan interface serta mekanisme penggunaan yang tidak terlalu sulit. Antarmuka aplikasi ini dibagi menjadi 2 bagian utama yaitu menu berfungsi untuk navigasi dan bagian konten yang menampilkan informasi-informasi data ilmuwan maupun kuis.

Seperti aplikasi mobile pada umumnya, aplikasi yang dibuat juga mempunyai tampilan home (halaman muka). Halaman awal atau home inilah yang menjadi shortcut (jalan pintas) menuju beberapa fungsi dan fitur utama aplikasi. Diantara fitur yang dapat diakses melalui home ini adalah konten utama aplikasi dan kuis tentang ilmuwan Islam.

Ilmuwan Islam merupakan aplikasi mobile yang dibuat sebagai media edukasi para pengguna smartphone terutama dengan platform Android, bahkan iOS maupun platform lain yang akan didukung pada pengembangan nantinya.

3.2 Pengguna SistemPengguna sistem perlu dijelaskan tentang klasifikasinya agar mudah

menentukan kebutuhan pada saat perancangan sistem. Para pengguna tersebut adalah :

1. Masyarakat umum, 2. Mahasiswa maupun pelajar,3. Sejarawan umum maupun Islam, 4. Programmer.

3.3 Alat dan Bahan PerancanganSistem aplikasi mobile ilmuwan Islam merupakan aplikasi yang dibuat

menggunakan bahasa pemrograman utama HTML5 dan Javascript.Pada penelitian proyek tugas akhir aplikasi ilmuwan Islam ini, penulis

mengkhususkan dan memfokuskan dalam pembuatan aplikasi berbasis platform buatan Google yaitu Android. Untuk membuat aplikasi berbasis Android berikut adalah perangkat aplikasi yang diperlukan:

1. OS WindowsSistem operasi merupakan modal utama dalam penelitian ini. Penulis menggunakan system operasi Windows 7. Untuk membuat proyek aplikasi Android berbasis HTML5 ini, sebenarnya dapat pula dilakukan menggunakan

7

OS selain Windows, seperti Linux maupun MacOS2. Eclipse JunoEclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform-independent)3. Bluefish Editor.

Gambar 3.1. Bluefish EditorBluefish adalah text editor bersifat open source yang canggih dan telah dilengkapi dengan berbagai tool-tool pemrograman pada umumnya untuk pengembangan website dinamis. Bluefish mendukung pembangunan aplikasi dengan bahasa pemrograman HTML, XHTML, CSS, XML, PHP, C, C + +, JavaScript, Java, Google Go, Vala, Ada, D, SQL, Perl, ColdFusion, JSP, Python, Ruby dan shell.4. Inkscape dan GIMP.Inkscape adalah sebuah perangkat lunak editor gambar vektor yang bersifat perangkat lunak bebas dibawah lisensi GNU GPL. Tujuan utama dari Inkscape adalah menjadi perangkat grafik mutakhir yang memenuhi standar XML, SVG, dan CSS.Sedangkan GIMP atau GNU Image Manipulation Program adalah perangkat lunak untuk manipulasi grafik berbasis raster. Grafik yang dihasilkan oleh GIMP disimpan dengan format XCF dan bisa diekspor ke berbagai format gambar seperti bmp, jpg, gif, pdf, png, svg, tiff, dan masih banyak lagi yang lainnya.

3.4 Perancangan Struktur MenuMenu dalam aplikasi Ilmuwan Islam berfungsi sebagai navigasi untuk

pengguna sistem agar lebih leluasa dan memudahkan pengguna dalam mengakses berbagai konten maupun fitur. Berikut adalah struktur menu yang ada di dalam aplikasi Ilmuwan Islam yang telah penulis buat :

8

3.5 Perancangan TampilanAplikasi mobile Ilmuwan Islam dirancang menggunakan aplikasi grafis

bernama Inkscape. Semua yang berkaitan dengan menu, bagian konten, kuis dan berbagai hal yang ada di dalam aplikasi berawal dari desain Inkscape.

Desain antarmuka terdiri dari menu tab, kemudian isi konten dan juga footer. Tampilan dalam aplikasi ini terbagi menjadi 3 bagian utama, yaitu : Splash Screen (Tampilan Pembuka), Home (Beranda), Konten (Isi), Learn (Kuis), dan About (Penjelasan Aplikasi).Berikut adalah rancangan grafis yang dibuat menggunakan Inkscape:

9

10

3.6 Perancangan Fitur

Dalam konsepnya, aplikasi Ilmuwan Islam mempunyai fitur-fitur utama. Fitur-fitur ini ada yang dirancang menggunakan bahasa pemrograman HTML5 maupun Javascript, Fitur ini merupakan perpaduan dari bahasa pemrograman HTML5 dengan fungsi asli (native) perangkat mobile Android.

Berikut adalah beberapa fitur dalam aplikasi Ilmuwan Islam:1. Navigasi Tab Menu,2. Navigasi Swipe,3. Exit App Notification.

3.7 Perancangan DatabaseAplikasi Ilmuwan Islam mempunyai rancangan database yang

diperuntukkan untuk informasi dan data-data kelengkapan tokoh Ilmuwan. Dengan merancang database, selanjutnya aplikasi Ilmuwan Islam dapat diimplementasikan menggunakan data JSON maupun Cloud Database.

Adapun tabel data yang diperlukan untuk Aplikasi Ilmuwan Islam ini adalah sebagai berikut :

Tabel 3.1. Perancangan DatabaseN

o

Nama

Field

Tipe

Data

Uku

ran

Keteranga

n

1. idtokoh String 10 Id unik

untuk

setiap

11

tokoh

ilmuwan

Islam

2. Namatok

oh

String 25 Nama

tokoh

Ilmuwan

Islam

3. Karya String 30 Karya atau

kontribusi

nyata

setiap

tokoh

ilmuwan

Islam

4. Asaltoko

h

String Kota atau

negara asal

tokoh

Ilmuwan

Islam

5. Tahun String Rentangan

tahun masa

hidup

tokoh

Ilmuwan

Islam

hingga

Wafat

6. Cerita String

/Text

Cerita

singkat

perjalanan

hidup

tokoh

ilmuwan

Islam

7. Gambar String Data teks

berupa link

12

url gambar

tokoh

ilmuwan

Islam

3.8 Deskripsi Proses PerancanganBeberapa hal yang perlu dimasukkan dalam proses perancangan adalah

pembuatan bisnis proses seperti perancangan arsitektur data online, pembuatan diagram use case, penggunaan library javascript maupun proses instalasi kebutuhan aplikasi.

3.8.1 Perancangan Arsitektur Cloud databaseAplikasi Ilmuwan Islam mempunyai sebuah sistem yang telah terintegrasi

dengan sebuah cloud database di server online. Penulis membuat gambaran yang fungsinya untuk menjelaskan alur data yang digunakan aplikasi Ilmuwan Islam.

Berikut adalah gambaran arsitektur data online aplikasi Ilmuwan Islam:

3.8.2 Perancangan Use CaseUse case digunakan untuk memodelkan dan menyatakan unit

fungsi/layanan yang disediakan oleh sistem (or bagian sistem: subsistem atau class) ke pemakai.

Dan berikut adalah gambaran Use Case untuk Aplikasi Ilmuwan Islam :

13

BAB IV IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi SistemImplementasi dilakukan terhadap aplikasi mobile Ilmuwan Islam, setelah

memperhatikan beberapa kelebihan dan kekurangan yang dimiliki aplikasi mobile berbasis HTML5 dengan framework PhoneGap.

4.1.1 Implementasi Persiapan CodingAplikasi Ilmuwan Islam yang berbasis HTML5 dan berjalan di platform

Android menggunakan beberapa teknologi yang dapat berjalan dengan baik di lingkungan sistem operasi Windows. Berikut adalah beberapa implementasi proses pengkodean aplikasi Ilmuwan Islam:

a. Instalasi Javab. Instalasi Android SDKc. Instalasi Eclipsed. Instalasi ADT/Plugin Eclipsee. Instalasi MDS Applaudf. Membuat AVDg. Membuat USB Debugging

4.1.2 Implementasi Pembuatan Project

Aplikasi Ilmuwan Islam memanfaatkan sebuah Plugins di Eclipse yang bernama MDS AppLaud. Setelah MDS AppLaud terpasang di Eclipse, selanjutnya penulis membuat project baru dengan nama Ilmuwan Islam.

Pada pembuatan project, penulis memanfaatkan Wizard Project yang merupakan fitur di Eclipse setelah diinstall MDS Applaud.

4.1.3 Implementasi File Sistem

Sistem file yang dibangun menggunakan PhoneGap berbasis di dalam

14

folder assets\www, dan berikut adalah isi paket file Ilmuwan Islam yang berada di dalam folder assets\www :

Gambar 4.1. File Sistem Ilmuwan IslamDi dalam folder assets/www, terdapat beberapa file maupun folder baru

yang merupakan sumber-sumber css, javascript maupun html5 yang dipergunakan untuk membuat sistem utama aplikasi Ilmuwan Islam. Berikut adalah tabel penjelasan file atau folder tersebut :

Tabel 4.1. File SistemNama Jenis Isi KeteranganIlmuwan folder Image

PNGfolder ilmuwan merupakan folder yang berisi sumber gambar tokoh yang dipakai pada konten-konten tokoh aplikasi Ilmuwan Islam

Ilmuwan-kuis

folder Image, html, css, javascri

Folder ilmuwan-kuis merupakan

15

pt folder yang berisi file sistem untuk konten kuis dalam aplikasi Ilmuwan Islam. Di dalamnya terdapat sumber-sumber jquery maupun javascript yang mendukung.

Images Folder

Image Berisi file-file gambar yang dipergunakan dalam menu di halaman home aplikasi Ilmuwan Islam

Img Folder

Image Berisi gambar-gambar pendukung untuk aplikasi seperti sumber gambar Facebook, Twitter, menu dan lain sebagainya.

Js Folder

File Javascript

Berisi file-file sumber Javascript seperti Jquery dan lain sebagainya

Cordova-1.9.0.js

File Kode Javascript

Merupakan sumber yang wajib disertakan untuk pembanguna

16

n aplikasi berbasis PhoneGap

Index.html

File Kode HTML dan Javascript

File indeks yang berfungsi sebagai kerangka utama HTML5 aplikasi Ilmuwan Islam.

Style.css File Kode CSS

Merupakan kode-kode CSS yang digunakan untuk mengatur tata letak maupun tampilan utama aplikasi Ilmuwan Islam

4.1.4 Implementasi Aplikasi dan Antar Muka

Implementasi tampilan atau antar muka merupakan hasil dari perancangan antarmuka di BAB 3. Dalam implementasi ini, disajikan gambaran nyata antar muka aplikasi yang sudah berjalan di perangkat smartphone Android.

Berikut adalah beberapa gambaran antar muka aplikasi dan beberapa hasil implementasi berdasarkan perancangan:

Icon Akses AplikasiSetelah aplikasi terpasang di perangkat mobile Android, maka akan muncul icon Ilmuwan Islam di antara menu-menu aplikasi. Icon ini merupakan implementasi agar memudahkan user untuk mengidentifikasi bahwa aplikasi Ilmuwan Islam telah terpasang di perangkat.

17

Gambar 4.2. Ikon Akses Ilmuwan Islam

Fitur Navigasi Swipe dan Antarmuka BerandaUser dapat memulai memakai aplikasi dengan men-tap menu yang ada di beranda (home) aplikasi Ilmuwan Islam. Di bagian home ini, sesuai yang terdapat di bagian perancangan, terdapat fitur swipe menu navigation dimana user dapat mengakses berbagai fitur aplikasi dengan melakukan swipe ke kanan atau ke kiri.

Fitur Tab NavigationUser dapat men-tap icon di tab navigation untuk mengakses fitur. Proses berjalannya tab navigation adalah setelah user men-tap salah satu menu, maka background di tab navigation berubah menjadi berwarna abu-abu

Gambar 4.3. Fitur Navigasi Tab

Konten Utama AplikasiKonten utama aplikasi, memanfaatkan fasilitas list Jquery Mobile dengan bentuk Thumbnails, dimana pada bagian list ilmuwan terdapat thumbnails gambar tokoh, nama tokoh dan rentang tahun hidup.

18

Gambar 4.4. Konten Utama Aplikasi

Fitur Peta HidupFitur peta hidup atau live map merupakan fitur tambahan yang sudah disematkan ke dalam aplikasi Ilmuwan Islam. Fitur ini dimaksudkan agar user dapat melihat rentang tahun tokoh-tokoh Ilmuwan Islam dari abad ke 1 hingga sekarang.

Gambar 4.5. Fitur Peta Hidup

Fitur Kuis

19

Fitur tambahan lain pada aplikasi Ilmuwan Islam adalah kuis. Fitur ini memanfaatkan plug-in Jquery SlickQuiz yang telah dimodifikasi sedemikian rupa sehingga konten-konten dalam kuis tetap bernuansa Ilmuwan Islam.

Gambar 4.6. Hasil Ranking Kuis4.1.5 Implementasi Arsitektur Cloud

Dalam pemanfaatannya, perancang menggunakan arsitektur Cloud yang telah disediakan oleh Parse.com. untuk dapat memanfaatkan cloud database dari Parse.com, perancang harus mendaftar terlebih dahulu dengan memilih pricing free, karena Parse.com juga merupakan penyedia cloud database yang tidak 100% gratis.

Setelah mendaftar di situs Parse.Com, perancang diberi sebuah dashboard yang berisi halaman untuk mengelola cloud database. Selain itu, perancang juga diberikan kode API yang menjadi identitas untuk disematkan ke dalam aplikasi Ilmuwan Islam.

20

Gambar 4.7. Kode API Parse.com

Untuk mempermudah input data ke server cloud Parse.com, perancang juga membuat form input sederhana yang diakses melalui localhost komputer. Form ini dapat berinteraksi secara langsung dengan Parse.com menggunakan API yang telah disediakan oleh Parse.com sendiri. Syarat utama untuk menginput dari localhost adalah kondisi komputer harus terkoneksi internet.

4.2 Pengujian Sistem4.2.1. Tujuan Pengujian

Tujuan pengujian yang dilakukan pada aplikasi Ilmuwan Islam, dikhususkan untuk mengetahui fungsionalitas fitur seperti Splash Screen, Swipe Navigation, Tab Navigation, Performa aplikasi pada perangkat dan fitur-fitur animasi maupun kuis.

4.2.2. Kriteria PengujianDalam pengujian perangkat lunak diperlukan adanya kriteria pengujian

21

untuk mengukur sejauh mana perangkat lunak itu dianggap benar. Dalam pengujian, spesifikasi kriteria pengujian yang ditetapkan adalah bahwa perangkat lunak yang dianggap benar memenuhi kasus uji tertentu jika telah berjalan sesuai dengan yang diharapkan berdasarkan spesifikasi.

4.2.3. Lingkungan Pengujian

Aplikasi Ilmuwan Islam telah diuji menggunakan beberapa perangkat mobile Android yang mempunyai spesifikasi berbeda. Berikut adalah perangkat mobile yang dipergunakan untuk pengujian: Samsung Galaxy Y S5360 Sony Ericson Xperia Miro Sony Ericson Xperia Tipo Samsung Galaxy Fit Samsung Galaxy Y Duos HTC Wildfire Samsung Galaxy Mini Samsung Galaxy S2 Samsung Galaxy Note

4.2.4. Hasil Pengujian

Tabel hasil pengujian aplikasi dapat dilihat pada lampiran tabel.

BAB V KESIMPULAN DAN SARAN

5.1 KesimpulanDari perancangan dan pembangunan sistem aplikasi mobile Ilmuwan

Islam ini, maka dapat diambil kesimpulan sebagai berikut:1. HTML5 dapat dimanfaatkan untuk membangun suatu aplikasi mobile den-

gan memanfaatkan framework PhoneGap. Sehingga web developer den-gan mudah dapat membangun aplikasi untuk platform mobile seperti An-droid, iPhone, maupun Blackberry

2. Keunggulan yang dimiliki HTML5 selain dapat digunakan untuk pemban-gunan aplikasi mobile antara lain mempunyai fitur Canvas, dukungan video, offline local storage, dan game development.

3. Aplikasi Ilmuwan Islam merupakan aplikasi mobile yang dibuat sebagai media edukasi para pengguna smartphone terutama dengan platform An-droid, bahkan iOS maupun platform lain yang akan didukung pada pengembangan nantinya.

4. Dalam pengujian ke beberapa perangkat Android, terbukti fitur dalam ap-likasi Ilmuwan Islam dapat berjalan dengan normal walaupun digunakan pada perangkat dengan spesifikasi low-end atau minimum.

22

5.2 SaranBerikut adalah saran dan masukan tersebut :

1. Membangun aplikasi mobile menggunakan HTML5 mempunyai beberapa kekurangan dalam hal performa aplikasi, oleh karena itu diharapkan pengembangan framework PhoneGap harus dapat diikuti agar selalu up to date.

2. Aplikasi mobile Ilmuwan Islam hendaknya mempunyai model penyim-panan data yang lebih dinamis dan mudah dikembangkan. Karena saat ini pengembangan aplikasi HTML5 dengan memanfaatkan database dirasa cukup teknis dan merepotkan.

3. Pada perkembangan selanjutnya, jika aplikasi Ilmuwan Islam telah ber-jalan dengan baik di sistem platform Android, hendaknya aplikasi ini dapat dikembangkan ke beberapa platform lain seperti iPhone, Blackberry maupun Windows Phone 7.

4. Agar aplikasi Ilmuwan Islam lebih diterima oleh berbagai kalangan seperti pelajar, mahasiswa maupun masyarakat umum, sebaiknya dilakukan vali-dasi maupun pengujian ke beberapa pihak yang terkait dengan sejarah per-adaban Islam maupun para developer aplikasi mobile.

DAFTAR PUSTAKA

Lawson, B. dan Remi Sharp. Introducing HTML5. Berkeley: New Riders. 2012.Gathol, R. dan Yogesh Patel. Beginning PhoneGap. New York: Apress. 2012.Chuan, Shi. HTML5 Mobile Development Cookbook. Birmingham: PacktPub.

2012Sikos, F. Web Standards. New York: Apress. 2011Rubbers, P., dkk. Pro HTML5 Programming. New York: Apress. 2011Zaki, A. E-life Style Memanfaatkan Beragam Perangkat Teknologi Digital.

Jakarta: Salemba Infotek, 1999.Handoko, H., 2012. Strategy Analytics: Pengguna Smartphone Capai 1 Milyar,

[online], (http://www.tabloidpulsa.co.id/news/5087-strategy-analytics-pengguna-smartphone-capai-1-milyar, diakses tanggal 1 Desember 2012)

Intana, L., 2012. Tahun Ini Pengguna Smartphone Naik 3 Kali Lipat, [online], (http://swa.co.id/technology/tahun-ini-pengguna-smartphone-naik-3-kali-lipat, diakses tanggal 25 Nopember 2012)

Istiyanto, E. Pemrograman Smartphone Menggunakan SDK Android dan Hacking Android. Yogyakarta: Graha Ilmu. 2012

Safaat, N. 2012. Pemrograman Aplikasi Mobile Smartphone dan Tablet PC Berbasis Android. Bandung: Informatika. 2012

23