Framework Aplikasi Hybrid

Pada pembahasan kali ini, saya akan membahas tentang framework yang digunakan untuk membuat aplikasi hybrid. Tapi sebelumnya apa sih pengertian dari framework dan aplikasi hybrid?

Framework atau bahasa indonesianya kerangka kerja itu sebuah software untuk memudahkan para programmer membuat aplikasi atau web yang isinya adalah berbagai fungsi, plugin, dan konsep sehingga membentuk suatu sistem tertentu. Jadi dengan kita menggunakan framework, sebuah aplikasi akan tersusun dan terstruktur dengan rapi.

Sedangkan aplikasi hybrid adalah aplikasi web yang ditransformasikan menjadi kode native pada platform seperti iOS atau Android. Aplikasi hybrid biasanya menggunakan browser untuk mengijinkan aplikasi web mengakses berbagai fitur di device mobile seperti Push Notification, Contacts, atau Offline Data Storage.

Nah setelah kalian mengetahui apa itu pengertian framework dan aplikasi hybrid, saya mau memberikan informasi beberapa framework untuk membuat aplikasi hybrid, dan inilah 5 framework hybrid, silahkan membaca! :)

JQUERY MOBILE

                                        

Framework pertama adalah, JQuery Mobile adalah web framework yang digunakan  untuk perangkat-perangkat layar sentuh. jQuery Mobile yang dikenal sebagai library JavaScript maupun framework mobile ini dikembangkan oleh tim jQuery Project. John Resig merilis jQuery pada bulan Januari 2006 di BarCamp NYC dan telah digunakan oleh lebih dari 52% dari 10.000 situs yang paling banyak dikunjungi. jQuery ini bersifat gratis, open source, dan berada dibawah lisensi dari MIT. Tujuan pengembangannya adalah berfokus pada pembuatan framework yang kompatibel dengan beraneka ragam perangkat smartphone dan tablet.

Jquery mobile memiliki banyak fitur yang dimilikinya, yaitu:

• Built on jQuery core, supaya syntax jQuery konsisten dan familiar dan memanfaatkan jQuery UI code dan pattern
• Compatible dengan semua mobile, tablet, e-reader & desktop platforms – IOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan semua browser modern dinilai dengan tingkat dukungan
• Ukuran yang ringan, dan dependensi gambar yang minimal untuk kecepatan.
• Modular arsitektur, untuk meng-create custom builds yang dioptimalkan hanya fitur yang dibutuhkan untuk aplikasi tertentu (particular application)
• HTML5 Markup-driven, konfigurasi halaman untuk pengembangan yang cepat dan scripting yang diperlukan minimal
• Progressive enhancement, membawa konten inti dan fungsionalitas untuk semua mobile, tablet dan desktop platform dan menginstal aplikasi seperti pengalaman pada platform mobile baru.

Lalu kelebihan jQuery adalah sebagai berikut:

• ·      jQuery Mobile memudahkan pengembangan user-interface untuk mobile web apps.
• ·     Memastikan bahwauser-interfcae bekerja pada web browser.
• ·     Menggunakan theme untuk memudahkan untuk costumized tampilan aplikasi Anda.

Sedangkan kelemahannya adalah:

• Setiap mempunyai kelebihan pasti memiliki kelemahan,kelemahan dari jquerymobile ini  terletak pada device gadget yang tidak universal,karena jquerymobile memang dirancang untuk mobile web bagi perangkat yang memiliki layar sentuh.
• Tidak tepat untuk mendesain web yang berbasis desktop.

Hasil aplikasi yang menggunakan JQuery Mobile:

Aplikasi Weather Web service adalah aplikasi untuk mencari atau mengakses perkiraan cuaca disetiap kota atau negara. Webservice dari weather ini sendiri diakses dari URL http://api.openweathermap.org/data/2.5/ dan untuk datatypenya menggunakan Json.

Web Service adalah aplikasi sekumpulan data(database), perangkat lunak yang dapat diakses dan diremote oleh berbagai pranti dengan sebuah perantara tertentu. Secara umum web service diidentifikasikan dengan URL seperti hanya web pada umumnya. URL webservice hanya mengandung kumpulan informasi, perintah, konfigurasi atau sintaks yang berguna membangun sebuah fungsi-fungsi tertentu dari aplikasi.

Link Download Framework
http://jquerymobile.com/

Sencha Touch

Framework kedua adalah Sencha Touch adalah sebuah MVC (Model-View-Controller) JavaScript dirancang khusus untuk membuat aplikasi web mobile untuk perangkat touchscreen. Sencha Touch memungkinkan pengembang untuk membuat aplikasi pada platform mobile dengan menerapkan standar terbaru, seperti pada WebKit browser engine.

Sencha touch adalah produk dari sencha, yang dibentuk proyek populer JavaScript library menggabungkan Ext JS, JQTouch, dan Raphaël. Rilisan pertama sencha touch, versi 0.90 beta, telah dibuat tersedia pada 17 Juli 2010. Rilisan beta ini didukung perangkat yang menjalankan Android, dan IOS (pada iPhone, iPod touch, iPad). Selanjutnya versi stabil yang pertama, 1.0, dirilis pada bulan November 2010. Sencha ouch versi 1.1.0 menambahkan dukungan untuk perangkat yang menjalankan OS BlackBerry versi 6. Rilisan terbaru dari sencha touch, versi 2.2.1, dirilis pada bulan April 2013, dan dirancang untuk dijalankan pada browser dan platform berikut : browser Android, Google chrome untuk Android, BlackBerry 10, Bada Mobile Browser, Kindle Fire Browser, Windows Phone 8, Windows 8 IE10 dan Mobile Safari. Sencha touch 2.3 berisi dukungan awal untuk browser Tizen.

Fitur-fitur yang terdapat dalam Sencha touch, adalah:

Sencha touch mencakup seperangkat kontrol user interface GUI berbasis grafis (atau komponen) untuk digunakan dalam aplikasi web mobile. Komponen-komponen ini dioptimalkan untuk untuk input sentuhan. Komponen tersebut adalah : tombol-tombol perangkat dengan tema dan efek tertentu; bentuk elemen seperti text fields untuk email; pemetik tanggal, dan alamat; slider, penyeleksi, dan combo-boxes; daftar komponen dengan momentum-scrolling dan index bar; minimal set icon, toolbar dan menu; tab bergerak; toolbar bawah; dan sebuah peta komponen dengan bantuan gerakan multi-touch seperti pinch dan zoom.

Sencha touch memiliki delapan efek transisi built-in termasuk geser atas atau bawah elemen saat ini, menyerudukkan, membalik, dan kubus. Sencha touch mendukung gerakan sentuhan umum yang dibangun dari peristiwa sentuh, yang merupakan web standar tetapi hanya didukung oleh android, IOS, dan beberapa perangkat sentuh aktif. Ini adalah tap, double tap, swipe, scroll, dan pinch.

Kelebihan Sencha Touch:

·         Semuanya adalah JS (JS menghasilkan DOM)

·         Framework aplikasi mobile terlama

·         Menggunakan MVC (membedakan model,view,controller)

Kekurangan Sencha Touch:

·      Sulit untuk merancang layout karena memerlukan pengetahuan tentang JS, design tidak   user friendly

·         Dokumentasi sedikit

·         Terlalu banyak dependency pada variabel global sehingga mensulitkan saat debugging

·         Kesulitan dalam theme karena harus mengoprek JS dan SCSS

·         Hanya mendukung browser berbasis Webkit

Aplikasi yang menggunakan Sencha touch:
Perancangan Antarmuka Situs Jejaring Sosial yang Diakses Melalui Smartphone dengan Layar Sentuh dengan Memanfaatkan Framework Sencha Touch.

Link Download

      https://www.sencha.com/products/touch/

Ionic Framework

Ionic adalah framework yang dikhususkan untuk membangun aplikasi mobile hybrid dengan HTML5, CSS dan AngularJS. Ionic menggunakan Node.js SASS, AngularJS sebagai engine-nya. Ionic dilengkapi dengan komponen-komponen CSS seperti button, list, card, form, grids, tabs, dan masih banyak lagi. Jadi Ionic itu merupakan teknologi web yang bisa digunakan untuk membuat suatu aplikasi mobile. Karena hybrid maka aplikasi hanya dibuat 1 kali tetapi sudah bisa dirilis di lebih dari 1 platform alias cross-platform. Aplikasi ini bersifat open source. Ionic pertama kali dibentuk oleh Drifty Co. pada tahun 2013.

Fitur dalam Ionic adalah:

·    Ionic CLI adalah tool command line yang digunakan untuk membuat project dan menjalankan project. Masih banyak fitur dari ionic CLI ini, silahkan mengacu ke http://ionicframework.com/docs/cli/start.html.

·       IonicLab Adalah solusi bagi anda yang ingin kenyamanan. IonicLab adalah Versi GUI dari Ionic CLI, anda tinggal klik untuk melakukan operasi operasi yang semula harus mengetikan perintah di Console.

·      Berbeda dengan jQuery mobile atau platform lain yang memaksa kita coding manual untuk mendesain tampilan UInya. Ionic menyediakan Ionic Creater, produk free yang akan memudahkan anda mendesain tampilan UI dari aplikasi. Ionic Creator sendiri adalah WebApp artinya anda harus mengaksesnya lewat Browser. Untuk Akun Free kita hanya bisa mendesain satu aplikasi saja, Jika ingin lebih belilah paket Premium. Anda bisa mencobanya di https://creator.ionic.io/app/login.

·      Aplikasi ini adalah Aplikasi Android. Fungsi utamanya adalah mempreview program Ionic langsung dari Android. Aplikasi yang bisa di preview oleh ViewApp bisa aplikasi yang kita buat atau aplikasi orang lain yang dishare di Ionic Market.

Kelebihan Ionic

·         Ionic Menggunakan lisensi Opensource

Ionic platform menggunakan lisensi opensource, anda boleh membuat aplikasi free ataupun comercial dengan Ionic.

·         Menggunakan teknologi web terbaru

Ionic memanfaatkan AngularJS untuk implementasi logicnya. Mengapa tidak memakai jQuery? karena jQuery terkenal lambat di mobile sedangkan Angular menawarkan performa dan respon cepat serasa aplikasi native.

·         Target Hanya untuk Android 4 dan ios 7 Keatas

Anda bisa melihat ini sebagai kelebihan ataupun kekurangan. Bagi yang suka dengan hal baru dan ingin kode yang bersih tanpa memikirkan kompabilitas dengan versi mobile OS lama, maka ionic adalah platform yang paling pas.

·         Berbasis Apache Cordova /Phonegap

Perhatikan point ini. Ionic hanya menyediakan frameworknya, untuk membungkusnya menjadi aplikasi Android atau iOS anda tetap pakai phonegap. Artinya bagi para programer phonegap  dengan platform lain, keahliannya tetap bisa dipakai.

Kekurangan Ionic

·       Masih sebatas framework, jika untuk membungkusnya menjadi aplikasi Android, iOS atau windows phone tetap menggunakan Phonegap

Aplikasi yang menggunakan ionic adalah sebagai berikut:

Link Download

https://ionicframework.com/docs/intro/installation/

Dojo Toolkit

Dojo Toolkit merupakan salah satu framework Javascript yang menyediakan penyederhanaan fungsi scripting dengan javascript sampai ke pembuatan RIA (Rich Internet Application) yang kompleks. Didalam Dojo Toolkit menyediakan kumpulan kelas Javascript library yang lengkap mulai dari dasar JavaScript sampai fungsi lanjutan untuk meningkatkan interaktivitas pada web dan diperkuat dengan Widgeting system.

Dojo toolkit pertama kali dibentuk pada tanggal 25 April 2004, ditulislah kode yang kemudian menjadi cikal bakal Dojo Toolkit, sebuah Javascript Framework yang menyediakan penyederhanaan fungsi scripting dengan javascript sampai ke pembuatan RIA (Rich Internet Application) yang kompleks.

Paket modular sangat membantu para web developer untuk membuat web yang interaktif dengan struktur yang mudah dimengerti. Ditambah lagi sebuah kesatuan antara Javascript library, dengan Widgeting system memperkokoh posisi Dojo Toolkit sebagai Javascript Framework sebenarnya.

Fitur dalam Dojo Toolkit, adalah sebagai berikut:

·         Dojo Core

Dojo Core adalah inti dari Dojo Toolkit. Kita bisa menggunakan fungsi-fungsi umum seperti XHR (POST/GET), i18n, enkripsi, xml, date/time, efek animasi, dll. Dojo merupakan kelas yang berisi komponen-komponen dasar JavaScript yang digunakan untuk menjalankan fungsi lanjutan yang ada pada Dojo widget dan Dojo extention (kelas dijit dan dojox) dan untuk membangun fungsi-fungsi javascript yang kita buat sendiri. Apabila kita ingin menyertakan library Dojo pada web yang sedang kita bangun, hal yang kita perlu lakukan hanya menyertakan (include) file dojo.js.

·         Dojo Widget / Dijit

Dojo Widget / Dijit merupakan aplikasi kecil (widget) “siap pakai” yang menggunakan fungsi-fungsi bawaan Dojo. Dijit membutuhkan file dojo.js dan modul-modul lainnya. Sesuai namanya, dijit berisi fungsi-fungsi yang sudah jadi dan langsung dapat digunakan (widget). Dijit digunakan untuk keperluan pembangunan UI. Pengguna hanya tinggal menyisipkan fungsi yang ada pada dijit ini tanpa perlu membangun fungsinya dari awal lagi. Kelas ini berisi fungsi-fungsi untuk membangun UI web. Apabila kita ingin menggunakan sebuah kelas widget dalam web kita, maka sebelumnya kita perlu mendeklarasikan kelas widget tersebut didalam kode.

·         Dojo Extensions

Dojo Extensions atau Dojox merupakan Dijit yang masih dalam tahap pengembangan tetapi sudah bisa digunakan hanya saja API masih bisa berubah. Biasanya Dojox merupakan extension dari Dijit dengan fitur yang lebih baik.

·         Dojo Utils

Dojo Utils merupakan tool untuk melakukan testing. Jadi kita bisa bikin test unit dari dijit yang kita buat dan kita test disitu.

Kelebihan:

• Library yang besar
• Very liberal license (BSD), jadi kita bisa menggunakan framework ini dengan bebas, bahkan bisa dibuat untuk komersil juga

Kekurangan:

· Kalau kita gak tau API dari tiap2 Dijit maka kita akan kesulitan untuk membuat secara program.

· Dokumen HTML kita tidak valid, karena atribut dojoType tidak dikenali dalam aturan W3C. Penggunaan cara ini juga tidak fleksibel karena Dijit yang kita gunakan sulit untuk kita modifikasi “on the fly”.

· Dojo Experimental atau Dojox merupakan Dijit yang masih dalam tahap pengembangan tetapi sudah bisa digunakan hanya saja API masih bisa berubah.

Aplikasi yang menggunakan Dojo Toolkit:
Kita dapat membuat animasi menggunakan dojo toolkit, inilah hasilnya, jika kita meng-klik link hilangkan maka teks dibawah akan fade out, dan sebaliknya jika kita meng-klik link tampilkan, teks dibawah itu akan tampil kembali dengan efek fade in.

Link Download

http://dojotoolkit.org/download/

Onsen UI

Framework terakhir adalah, Onsen UI merupakan framework mobile web aplikasi open source yang memberikan pengembang otonomi untuk mengembangkan aplikasi dengan menggabungkan komponen asli yang terlihat berbeda. Framework ini sangat mudah untuk digunakan, serta hadir dengan dokumentasi yang sangat baik, lengkap dengan contoh yang bisa menjadi referensi. Onsen UI menyediakan kerangka dan alat UI untuk menciptakan aplikasi mobile hibrida HTML5 yang cepat dan indah berdasarkan PhoneGap / Cordova. Onseun UI pertama kali dibuat pada tahun 2013 dan dibuat oleh perusahaan Monaca, Inc. / Asial Corporation.

Fitur di dalam Onsen UI, adalah sebagai berikut:

·         Memiliki Theme Roller. Dapat digunakan untuk memodifikasi style komponen template.

·         Telah menggunakan Font Awesome

·         Multi-screen Support, untuk berbagai layar handset

·         Sudah ter integrasi dengan Monaca. Monaca adalah Cloud Development Platform / Cloud IDE yang dapat dipakai untuk pembuatan aplikasi mobile di web

Kelebihan Onsen:

·  Keuntungan Onsen adalah menggunakan Sudut di bawah tenda, tidak memaksa pengembang untuk belajar Angular.

·      Menggunakan TopCoat untuk dasar CSS dan kemudian melapisi theming melalui Stylus yang memudahkan pembuatan UI dengan mudah ditiru yang terlihat cukup bagus dan sangat fleksibel.

·        Editor Tema adalah sentuhan yang bagus.

Kekurangan Onsen:

·   Onsen tidak terlihat sama bagusnya dengan ionik, saat berjalan di perangkat tampilan default hanya terasa sedikit off.

·   Alat starter (kecuali Master-Detail) agak berantakan, tidak hanya berisi data lipsum,   namun keseluruhan aplikasi

·       Terpasang di dalam index.html (tidak ada template terpisah, tidak ada file js).

·       Mengizinkan objek dikibarkan ke dalam ruang global dengan menganotasi elemen dengan atribut var.

Aplikasi yang menggunakan Onsen:
Kita dapat membuat aplikasi system informasi akademik menggunakan onsen ui, ini contoh dari aplikasi yang dimaksud.

Link Download
https://onsen.io/v2/guide/installation.html

Referensi

https://en.wikipedia.org/wiki/Onsen_UI

http://www.blogersumatra.net/2017/05/pengertian-framework-web-mobile-onsen-ui.html

http://gedelumbung.com/tutorial-android-contoh-aplikasi-sistem-informasi-akademik-berbasis-android/
http://pemrogramanmobile2014.blogspot.co.id/2015/01/jquery-mobile.html
http://www.hermantolle.com/class/docs/jquery-mobile-framework/
http://anamasix.blogspot.co.id/2014/12/jquery-mobile-dan-ajax-untuk-mengakses.html

https://teknojurnal.com/sencha-touch/

http://www.hermantolle.com/class/docs/sencha-touch-framework/
https://www.codepolitan.com/apa-itu-ionic-framework-57baac4756622-17924
https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework)
https://khalifavi.wordpress.com/2010/09/05/sekilas-mengenai-dojo-toolkit/
https://toreizen.wordpress.com/2010/09/20/pengenalan-dojo-toolkit/