Simulasi Aplikasi Hybrid Berbasis Webkit

Sofyan SaputraVeryani Pangemanan

Sekolah Tinggi Manajemen Informasi Dan Komputer(STMIK) adhiguna

PaluEmail : sofyansaputra12@gmail.com

veryanipangemanan@gmail.com

AbstrakSebuah aplikasi hybrid, menurut definisi, adalah segala sesuatu yang berasal

dari sumber yang heterogen atau kombinasi dari teknologi , pendekatan atauelemen dari berbagai jenis . Sehubungan dengan aplikasi komputer, aplikasihybrid memanfaatkan kedua teknologi web asli dan perangkat. Campuran kontenweb dan asli kemampuan menentukan tingkat kemampuan aplikasi hybrid. Hal inidapat bervariasi dari 1 % sampai 99 % . Penelitian ini terutama berfokus padakebutuhan untuk Pendekatan Hybrid, keuntungan fungsional dan kelemahan,tantangan, metode pelaksanaan, dampak pada aspek operasional sepertipemeliharaan dan pembaruan. Fokus utama dari aplikasi hybrid adalah mencapaikompatibilitas yang lintas platform, dengan penekanan pada fitur asli. Kekuatanfitur asli tidak dapat diabaikan dan pendekatan Hybrid mengambil penuhkeuntungan dari ini . Menurut Gartner, jika organisasi Anda menargetkan tiga ataulebih platform mobile , atau jika Anda memerlukan konektivitas ke tiga atau lebihaplikasi, maka alat multichannel atau cross-platform biasanya menghasilkan yanglebih baik hasil proyek selama tiga sampai lima tahun jika dibandingkan denganalat native. Pengamatan lai yang menarik adalah bahwa ketika mengembangkanaplikasi untuk dua platform, biaya yang di keluarkan 160 % lebih besar daripengembangan untuk satu platform . Penelitian ini merangkum pendekatan ini danmenguraikan manfaat.Keyword : aplikasi hybrid,adhiguna SDK

I. PendahuluanPerkembangan aplikasi terus

mengalami perkembangan apakah ituplatform, perangkat, teknologi, fitur,model jaringan atau eksplorasi kasuspenggunaan aplikasi, kecepatanperubahan untuk salah satu dariteknologi ini berarti bahwa bisnisharus memberikan pemikiran yangserius sebelum berinvestasi dalammenciptakan aplikasi mereka sendiri.untuk mengatasi tantangan ini, industrisecara keseluruhan sedang mencaribasis kode tunggal yang dapat bekerja

di beberapa platform dan perangkatuntuk mengembangkan aplikasikonsumen dan aplikasi perusahaan.kebijakan yang muncul di industri untumempercepat kebutuhan untuk kodetunggal berbasis web, dengan sedikitatau tanpa jejak pada perangkat untukdengan mudah mengelola aplikasi.Sebelum mendalami ke pendekatanhybrid, akan lebih bermanfaat untukmembahas solusi potensial lainnya.

Aplikasi Native adalah sebuahaplikasi yang dikembangkan

menggunakan bahasa OS asli untukmembuat penggunaan terbaik SDKPlatform individual dan fitur perangkatuntuk menghasilkan pengalamanpengguna yang terbaik.Sayangnya,aplikasi yang dikembangkan untuksatu platform tidak dapat digunakan diseluruh platform, yang berartikeseluruhan biaya pengembangan akanlebih tinggi jika seseorang inginmenjadikan aplikasi cross-platformyang kompatibel.

Tekhnologi Web adalahpendekatan yang paling sederhanauntuk membuat aplikasi untukperangkat mobile atau komputer tanpabanyak investasi, karena tidak lebihdari mengakses halaman web padaperangkat mobile atau komputer.Meskipun pilihan ini sangat fiskal danmenarik, pengalaman pengguna sangatterbatas, seperti penggunaan fiturnative harus benar-benar diabaikan.

Aplikasi Hybrid dirancang untukmengambil keuntungan dari keduatekhnologi native dan pendekatanWeb. Manfaat ini dari fleksibilitasteknologi web dengan kombinasi fiturperangkat keras yang terangkum dalam1 Software DevelopmentKit.Tekhnologi ini sangat cocok untukberbagai aplikasi dan masih bisamemberikan pengalaman penggunayang baik.

Selanjutnya membahaspendekatan hybrid mendalam padabagian berikut. Keuntungan daripendekatan hybrid:

1. waktu lebih cepat ke pasar biladibandingkan dengan sikluswaktu pengembangan aplikasiNative.

2. Total biaya kepemilikan yanglebih rendah sebagai lintas

platform adaptasi lebih mudah.3. pengalaman UX Cukup baik

dengan toolkit JavaScript modern(gestures, swipes, tap andtransitions)

4. Pengembangan, Pembaruan, danPengembangan Mudah

5. Akses ke fitur asli

Kekurangan dari pendekatanhybrid:

1. kinerja Sedikit lebih rendahkarena render halaman web danmengakses data melalui beberapalapisan

2. Pengalaman Terbatas UXdibandingkan dengan UI asli

3. Kekhawatiran terhadapkeamanan

Untuk dukungan yang tepat untuktekhnologi yang tepat sangat pentingdalam pengembangan aplikasi, doronganyang luar biasa dari seluruh industriuntuk memajukan aplikasi hybrid sangatbaik ini terbukti dengan terusberkembangnya HTML5 sebagaitekhnologi kunci untuk aplikasi hybrid.

Pengembangan HTML5 yangbegitu signifikan juga mempengaruhiaplikasi hybrid diantaranya sebagaiberikut :

1. HTML5 mendukung banyak fituryang pengembangan aplikasihybrid.

2. Banyak Elemen Baru sepertiaudio,video, dan canvas, dll.

3. PenyimpananSementara(application caching)dan Penyimpanan client.

4. Fitur canvas dinamis, skriprender untuk pengambangangambar 2D dan gambar bitmap.

5. Application Programing Interface(API) yang kuat diantaranya

sbb :• Geo location• WebSql dan WebStorage• Web Socket• Drag And Drop Feature

Cascading StyleShet (CSS) jugaturut menyumbankan sumbangsihyang sangat berarti bagi perkembangantekhnologi web dan hybrid, saat iniCSS telah mencapai versi 3 dengankeunggulan sbb:

1. Peningkatan kinerja yangsignifikan

2. Desain web responsif3. Dukungan untuk perangkat

tambahan progresif denganadjustable konten halaman webberdasarkan fungsionalitasperangkat.

4. Dukungan opacity dan Shadowyang menyediakan visual yanglebih baik.

Dengan berkembangnya HTML5dan CSS3 maka hal ini juga turutmenjadikan javascript menjadi lebihpowerfull dengan keunggulan sebagaiberikut :

1. Dukungan yang kuat terhadapantar muka pengguna.

2. Proerty dan obyek lebihterdefinisikan.

3. Fungsi Baru untuk menanganiberbagai objek.

4. Garbage Collector5. Numerous emerging

frameworks

II. Tampilan AnalisisIndustri analis telah mengambil

melihat lebih dekat pada evolusiteknologi ini dan tiba di beberaparekomendasi. Berikut adalah beberapakutipan dari Forrester dan analisGartner:

“Because of the increasingconsumer adoption of HTML5-ready

desktop browsers, retailers will look toraise the user experience stakes of theirmain ecommerce sites by introducingHTML5 versions”

“Developers show growing interestin technologies that promote open webarchitectures. HTML5 is certainly one ofthese, with 60% of developers eitheralready using it or planning to within thenext two years”

“Embrace HTML wrappingapproaches and tools as a primarystrategy for delivering content andapplication capabilities to mobiledevices in a cross-device, cross-platform, cross-browser approach.”

“Although there will still be appstores by 2015, over 50% of the appssold and/or pointed to (rather thaninstalled) will be Web apps, notplatform-specific native apps. There willstill be paid apps, but more will be Webapps for which users pay. Morespecifically, by 2015, 60% of enterprisemobile applications and 40% ofconsumer mobile applications will beWeb applications.”

III. Dukungan VendorVendor yang mendukung dan

bersiap-siap untuk mendukungkompatibilitas fitur HTML5 di PC danmedia mobile.

Gambar 1.1 Dukungan Vendorbrowser terhadap Web API(http://mobilehtml5.org/)

Gambar 1.2 Dukungan Beberapa

IV. Dukungan Aplikasi Hybrid DiPC Desktop

Di Aspek Mobile, perkembanganaplikasi hybrid sangat tajam ini hampirdibuktikan dengan banyak Alata atauSoftware Development Kit (SDK)yang Tersedia dan beberapa konsepaplikasi hybrid sudah menjadi trendpostitif dalam perkembangannya halini sangat bertolak belakan dengankeadaan di Aspek Komputer Pc itusendiri dengan pembangunan Softwaredevelopment kit berbasis hybrid yangakan di simulasikan maka diharapkankekuatan aplikasi hybrid di bidangmobile dapat diterapkan Pada bidangKomputer Pc.

Beberapa keunggulan yang akanditerapkan sbb:

1. Database Storage Dalam webmobile, data disimpan sebagaiteks biasa. Ada ruang untukancaman keamanan (a) Jika

Webengine (http://mobilehtml5.org/)

data yang hilang (b) jika lokasipenyimpanan tetap dan aplikasilain dapat mengaksesnya.Dengan aplikasi hybrid, datadapat disimpan secara amandengan enkripsi.

2. Media Dengan aplikasi webmobile, konten dapat diputarkembali. Dengan aplikasi hybrid,data yang tidak bisa hanya bisadimainkan kembali, tapi direkamdengan menggunakan nativebridge.

3. Network Connections HTML5mendukung soket web. TheHybrid Pendekatan dapatmenangani socket penuhkomunikasi. Komponen ponselasli dapat membuka socket dandapat berkomunikasi denganserver/perangkat lain, sepertidalam komunikasi sockettradisional. Dalam HTML5, webserver dapat mendukung soketweb, meskipun tidak semuabrowser mendukung fitur inipada saat ini.

4. Push Notification adalah fiturpemberitahuan secara realtimeyang tersedia pada html5dengan pendekatan aplikasihybrid maka fitur ini dapatdiolah dengan baik

Kedepannya pengembangandapat dilakukan dengan menambahkandukungan yang lebih baik terhadapperangkat contoh dukungan terhadapakses filesistem,Kamera,sensor gerak,accelerometer, daftar kontak dansensor.

V. Simulasi Aplikasi hybrid

Simulasi Aplikasi akandilakukan menggunakan AdhigunaSDK, Adhiguna SDK adalah salah satusoftware development kit yang sayakembangkan untuk penelitian inibeberapa fitur aplikasi hybrid yangtersedia pada bidang mobile sudahtersedia dalam bentuk Applicationprograming Interface (API) diadhiguna SDK

Gambar 1.3 Arsitektur AdhigunaSDK

Berdasarkan gambar 1.3Adhiguna SDK adalah softwaretransisi yang didalamnya telahmenyediakan API yang akanmenghubunkan sebuah dokumen Web

ke Perangkat menjadi sebuah aksitersndiri terhadap fungsi yang telahdibangkitkan dari fungsi javascriptkonsep pemanggilan fungsi dapat dilihatpada gambar 1.4

Gambar 1.4 Pemanggilan Kembalifungsi yang dilakukan oleh web engine

Adhiguna SDK memanfaatkan jenis webkit sebagai web engine, Webkitadalah sebuah Web engine hasil forking dari KHTML dari kde yang berkembang lebih detailnya adhiguna menggunakan QtWebkit yang dikembangkan oleh digiaberdasarkan forkingan Webkit.

Fitur yang disediakan adhiguna SDK diantaranya sbb:

1. Database API2. Spawn API3. Filesistem API4. System API5. Network API6. Localstorage7. Developer API8. Developer Remote9. Window Api10. Dialog API

Adhiguna SDK dibuat dengan bahasa C++ menggunakan Qt frameworkdengan memforking dari IGNSDK (Igos nusantara Software Development Kit) seta penambahan fitur mandiri dari adhiguna SDK.

Gambar 1.5 Peta Api Adhiguna SDK

5.1 Simulasi Window

Simulasi window APImenggunakan sistem operasiArchlinux dengan memanfaatkanwindow API yang ada padaadhiguna SDK dengan perintahadhiguna -s path-folder-proyek.

Gambar 1.6 Simulasi Aplikasihybrid pada sistem operasi

archlinux

5.2 Simulasi Fitur Developer Mode

Dalam mengembangkanAplikasi hybrid fitur ini sangarpotensial berhubung dengan fitur ini

developer dapat melihatkesahalan atau bug yang ada pada aplikasi yangakan dikembangkan ada 2 jenisdeveloper mode yang disediakan padaadhiguna sdk yaitu developer modebiasa dan mode remote untuk moderemote kekurangan yang di hadapiadalah window developer akanterbuka jika menggunakan webbrowser yang sepadan jikamenggunakan tekhnologi berbedamaka tidak ada aksi yang ditampilkan perintah yang digunakanadalah adhiguna -a proyek -d.

Gambar 1.7 Simulasi developer mode

Gambar 1.8 Simulasi DeveloperRemote Aplikasi Hybrid

5.3 Simulasi Window APIWindow API adalah salah

satu jenis API untuk menanganifungsi khusus pada windwoAdhiguna SDK, API ini tersediabanyak macam diantara adalahWindow Transparan yang dapat diakses dengan perintah adhiguna -sproyek -t atau denganmenambahkan skripadg.windowTransparent(true);kedalam tag dokumen web yangtersedia.

Gambar 1.9 Window API

5.4 Simulasi Akses SystemAkses Sistem adalah awal

dari perbandingan dari sebuahaplikasi berbasis web menjadisebuah aplikasi hybrid denganmenggunakan Adhiguna SDK inidapat tertangani dengan baiksehingga aplikasi bisaberkomunikasi langsung dengan

aplikasi kita dan jelas ini adalahpercampuran antara aplikasi webdengan native yang menjadi aplikasihybrid, perintah yang penelitimasukan adalah perintah “ls” dimanaperintah ini adalah perintah untukmelihat file pada sistem operasiberbasis linux.

API ini dapat di akses denganmemasukan skrip“adg.exec('perintah')” pada tagdokumen web anda.

Gambar 2.0 System API

5.4 Simulasi Database APIAdhiguna SDK menyediakan

Database Api pada simulasi digambar 2.1 menggunakanmariadb/mysql untuk mengaksesmariadb server maka dibutuhkanscript“adg.mysqlConnect(user,pass,db)” parameter dalam bentuk string dijavascript

Gambar 2.1 Koneksi DatabaseMariaDB denga Aplikasi hybrid

Gambar 2.2 Server Mysql

Pada gambar 2.2 adalah pembuktian dengan telah mantapnya api.

5.5 Simulasi Local StorageLocal Storage Adalah fitur

baru yang ada pada HTML5 fitur ini juga diemban webkit sebagai webengine maka dengan fitur ini pengembang aplikasi dapat memanfaatkan sebuah database local dari webengine sebesar 5Mb.

Gambar 2.3 Simulasi fiturlocal Storage

VI. KesimpulanAplikasi Hybrid Adalah sebuah

tehknologi baru dalam pengembanganPerangkat lunak komputer yangmenggabung 2 tekhnologi yaitutekhnologi Native dan tekhnologi Web,Penggabungan ini didasarkan pada

penggunaan beberapa fungsi yang dapatberkomunikasi langsung denganperangkat keras komputer pada sisiNative aplikasi sedangkan pada sisi webdesain dan tampilan adalah landasanutama ini terbukti dengan tampilan yangdibuat berbasis tehknologi Web.

Perkembangan Aplikasi hybridsendiri adalah tekhnologi masa depanyang dapat dipakai dalam pembuatanaplikasi lintas platform dengan biayayang dapat di tekan karena aplikasihybrid juga mencakup teknologi Webyang murah dalam pengembangannya.

Daftar Pustaka

Nripin Babu & Arun Bhat, Developmentof Hybrid Applications withHTML,Mindtek

Nizamettin Gok and Nitin Khanna,Building Hybrid Android Apps with Java and JavaScript, O’ReillyMedia, Inc., 1005 Gravenstein HighwayNorth, Sebastopol, CA 95472, July 2013.

Sankar Srini, Hybrid Mobile Applicationb Development Approaches,Bachelors inMechanical Engineering, SriVenkateswara University, India

Ynon Perek, Qt Hybrid Apps, February14 2012 , Finlandia

Native, web or hybrid mobile-appdevelopment, IBM Software, IBMCorporation, 2012

Allan Sandfeld Jensen,DigiaGermany,Stateand Future of QtWebkit, November 2013

website: http://mobilehtml5.org/

website : http://webkit.org

website : http://blog.ignsdk.web.id

website : http://tizenindonesia.blogspot.com/search/label/HTML5#.U46qSVT_QjA

website : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/