5 Framework Untuk Mobile Hybrid Apps

Pada era digital sekarang ini, popularitas aplikasi mobile semakin berkembang pesat. Sekarang semakin banyak orang yang menggunakan smartphone dan menggunakan aplikasi mobile untuk aktivitas sehari-hari mereka. Dengan semakin banyaknya permintaan dan popularitas aplikasi mobile, pengembangan aplikasi mobile juga semakin meningkatkan diri untuk dapat memberikan user experience yang baik dengan teknologi terbaru. Aplikasi Hybrid merupakan alternatif untuk aplikasi native maupun web yang dapat dengan mudah berpindah platform kapanpun dibutuhkan. Aplikasi hybrid merupakan cara yang bagus untuk menghemat biaya pengembangan aplikasi, karena dengan aplikasi hybrid tidak perlu menghabiskan uang membangun aplikasi untuk setiap platform. Berikut ini beberapa framework yang dapat digunakan untuk membangun aplikasi mobile hybrid :

• Ionic

Ionic merupakan sebuah framework opensource yang digunakan untuk membangun aplikasi mobile hybrid. Ionic dibuat oleh Drifty Co. pada tahun 2013. Ionic menggunakan HTML, JavaScript, dan CSS seperti mobile framework lainnya, namun yang membuat Ionic lebih unik yaitu Ionic menggunakan AngularJS dan mendukung SASS(Syntactically Awesome Style Sheet) CSS extension. Tidak seperti jQuery Mobile atau Kendo UI, Ionic hanya digunakan untuk membangun hybrid mobile application. Ionic menawarkan fitur yang atraktif yang dapat digunakan untuk membangun aplikasi mobile yang ramah pengguna. Aplikasi yang dibangun dengan menggunakan framework ini bisa dengan mudah masuk ke native app stores.

Fitur :

1. Open-source dan gratis (dengan MIT license)

2. Mendukung iOS dan Android

3. Lebih dari 500 font icon yang berlisensi MIT(Massachusetts Institute of Technology)

4. Mendukung Cordova, Phonegap, atau Trigger.io

Keunggulan :

1. Menggunakan AngularJS

Ketika berbicara tentang membangun sebuah aplikasi mobile dan aplikasi web, AngularJS merupakan framework yang lebih banyak dipilih oleh para pengembang aplikasi. Framework Ionic menggunakan AngularJS agar dapat pengembang dapat menggunakan komponen yang atraktif dan performa yang cepat seperti aplikasi native.

2. Gratis dan Open Source

Ionic 100% gratis dan merupakan project open source yang berlisensi MIT. Ionic akan selalu gratis dan didukung dengan komunitas dan forum diseluruh dunia.

3. Dokumentasi yang baik

Dokumentasi framework Ionic dibuat dengan contoh aplikasi, demo komponen,  petunjuk dan cara agar aplikasi mobile bisa berjalan dengan performa yang cepat.

4. Mudah berganti platform

Framework Ionic memberikan kesempatan untuk membangun aplikasi hybrid dan menggunakannya dalam berbagai macam platform seperti android, iOS, Windows atau perangkat lainnya.

Kelemahan :

1. Lebih baik digunakan jika sudah familiar dengan AngularJS, jika anda baru pertama kali membangun sebuah aplikasi, maka anda perlu mempelajari framework kemudian akan lebih baik jika mempelajari juga pengembangan Android/iOS.

2. Hanya fokus pada perangkat mobile

3. Tidak cocok untuk aplikasi web.

4. Performa lebih lambat dari aplikasi native meskipun aplikasi yang dibuat dengan Ionic ini memiliki performa seperti aplikasi native.

Aplikasi yang dibangun dengan menggunakan :

1. Poster Maker – Meme Creator

Post Maker adalah aplikasi yang bisa digunakan untuk membuat graffiti dan foto dari text atau gambar dan membagikannya dengan teman di sosial media, aplikasi ini juga dapat menambahkan tulisan pada foto. Post Maker dapat di download di Play Store.

2. Ionic Photo Camera App

Aplikasi ini merupakan aplikasi kamera untuk iOS dan Android yang dapat digunakan untuk mengambil foto atau melihat foto dari library. Dapat digunakan untuk memutar gambar dan membagikan gambar tersebut. 

Link download framework Ionic : https://ionicframework.com/getting-started/

• Phonegap

Phonegap adalah sebuah framework open source dan gratis yang digunakan untuk membuat aplikasi mobile. PhoneGap merupakan framework yang dibuat oleh Nitobi. Pada tahun 2011 Nitobi diakuisisi oleh Adobe sehingga tim dari nitobi dapat memfokuskan diri hanya pada project PhoneGap. Kemudian Adobe/Nitobi mendonasikan kode asli PhoneGap kepada Apache Software Foundation(ASF) untuk diinkubasi, dari hasil inkubasi ini menghasilkan sebuah proyek baru yang disebut Apache Cordova yang menjadi primary engine untuk framework PhoneGap. PhoneGap memungkinkan untuk membangun aplikasi mobile dengan menggunakan teknologi web  seperti HTML5, CSS3, dan JavaScript.

Keunggulan :

1. Multi Platform

Phonegap dapat menghasilkan aplikasi mobile untuk berbagai macam platform seperti iOS, Blackberry, Android, WebOS, Symbian, Windows Phone, dan Samsung Bada.

2. Hanya menggunakan HTML, CSS, dan Javascript sehingga developer tidak perlu mempelajari banyak bahasa agar dapat membangun aplikasi untuk berbagai platform.

3. Merupakan aplikasi yang bersifat open source

Kelemahan :

1. Tidak semua fitur yang ada di native didukung oleh phonegap.

2. Phonegap sering mengalami ketertinggalan ketika ada update fitur baru pada platform yang asli.

3. Tampilan dari aplikasi yang dibangun dengan phonegap terlihat sama pada semua platform dan terkadang terlihat seperti bukan mobile app.

4. Performa aplikasi yang dibangun dengan phonegap tidak seoptimal aplikasi native karena aplikasi dengan phonegap harus menginterpret kode javascript agar bisa diterima native SDK sehingga memerlukan waktu lebih lama untuk menjalankannya.

Contoh aplikasi yang dibagun dengan PhoneGap :

1. HealthTap - find doctors and free answers

HealthTap merupakan aplikasi yang digunakan untuk menemukan jawaban dokter yang terpercaya dengan cepat untuk menjawab pertanyaan tentang kesehatan kapanpun dan dimanapun secara gratis.

2. Sworkit

Merupakan aplikasi olahraga yang menyediakan panduan, video olahraga yang bisa dilakukan kapanpun dan dimanapun. Tanpa perlu berfikir, pengguna dapat dengan mudah mengikuti video dari pelatih professional.

3. FanReact

Merupakan aplikasi mobile sosial media yang memungkinkan fans untuk mengobrol tentang olahraga dan meng-upload video reaksi.

Link download : https://phonegap.com/getstarted/

• Onsen UI

Onsen UI adalah UI framework berbasis open source dan merupakan komponen untuk HTML5 hybrid mobile app development pada PhoneGap / Cordova. Onsen UI dibangun oleh Monaca, Inc. pada tahun 2013. Sama seperti Ionic, Onsen UI menggunakan AngularJS sebagai basisnya, namun Onsen UI juga mendukung jQuery sehingga bagi developer yang sudah terbiasa dengan jQuery juga bisa menggunakan Onsen UI. 

Beberapa fitur yang ada pada Onsen UI :

1. Memiliki theme roller yang dapat digunakan untuk memodifikasi style komponen template.

2. Menggunakan AngularJS, Topcoat, dan HammerJS.

3. Menggunakan Font Awesome.

4. Multi-screen support.

5. Intergrasi dengan Monaca (Cloud Development Platform/Cloud IDE yang bisa digunakan untuk pembuatan aplikasi mobile di web).

Keunggulan : 

1. Onsen UI dibangun dengan Topcoat yang merupakan CSS library open source yang didesain dengan mempertimbangkan kecepatan.

2. Dapat digunakan untuk membangun aplikasi hybrid maupun aplikasi web. Jika membangun aplikasi hybrid dapat digunakan bersama dengan PhoneGap / Cordova, atau dengan menggunakan Monaca IDE yang merupakan cloud-based IDE untuk Cordova.

3. Multi Platform

Kelemahan :

1. Onsen UI tidak mempunyai forum resmi, tetapi developer bisa bertanya melalui StackOverflow group yang disediakan oleh Onsen UI atau menanyakan pertanyaan tersebut melalui twitter.

Aplikasi yang dibangun dengan menggunakan Onsen UI :

1. Ohalog

Aplikasi sleep tracking berbahasa jepang pada iOS.

2. Giro D’Italia

Official app untuk Giro D’Italia balap sepeda

Link download Onsen UI : https://github.com/OnsenUI/OnsenUI-dist/releases/latest

• Kendo UI

Kendo UI merupakan framework untuk modern HTML UI yang dibuat oleh Telerik pada tahun 2014. Kendo UI menyediakan produk yang gratis untuk website dan yang berbayar tersedia untuk mobile UI, DataViz, dan Server Wrapper.

Fitur-fitur yang ada pada Kendo UI :

1. Terdapat lebih dari 70 UI komponen seperti Data Grids, DropDowns, Menu, Button, Chart, Spreadsheet, hingga Maps.

2. Smart UI untuk berbagai ukuran layar.

3. Online training dan kursus untuk mengimplementasikan komponen Kendo UI ke aplikasi.

Keunggulan :

1. Banyak pilihan tema sehingga developer tidak perlu lagi mendesain tampilan aplikasi.

2. Memiliki tool ThemeBuilder yang dapat digunakan untuk mengedit tema yang sudah ada.

3. Mudah dipelajari dan digunakan, Kendo UI menggunakan JavaScript sehingga akan mudah bagi JavaScript developer untuk mulai membuat aplikasi menggunakan Kendo UI.

4. Dapat bekerja secara online dan offline

5. Terintegrasi dengan berbagai framework popular seperti Angular 2+, React, dan Vue framework. Selain itu Kendo UI juga mendukung Bootstrap dan jQuery.

Kekurangan :

1. Kendo UI merupakan produk berbayar dan tidak memiliki dukungan yang sama seperti komunitas open source.

2. Meningkatkan biaya produksi aplikasi karena merupakan produk berbayar.

Berikut ini beberapa aplikasi yang dibangun dengan menggunakan Kendo UI :

1. DNAWeightControl

DNAWeightControl merupakan aplikasi analisis genetic metabolism berdasarkan DNA. Pada aplikasi ini data fisik seperti berat badan, rasio lemak dan rasio otot dapat dikumpulkan. Data divisualisasikan dengan grafik yang simple sehingga mudah dimengerti. Aplikasi ini tersedia di iOS maupun Android.

2. TECOM Direct

 

   

TECOM Direct adalah aplikasi direktori untuk Tecom business park. Aplikasi ini memungkinkan user dapat membayar uang parker pada lokasi parker milik Tecom atau mencari transportasi seperti halte bis dan taxi. Aplikasi ini hanya tersedia pada platform iOS.

Link download free trial Kendo UI : https://www.telerik.com/download-trial-file/v2/kendo-ui

• Framework 7

Framework7 merupakan framework berbasis open source dan gratis yang digunakan untuk membangun aplikasi mobile hybrid ataupun aplikasi web dengan tampilan yang terasa seperti aplikasi native. Framework7 dibentuk pada tahun 2014 dan berlisensi MIT. Tujuan utama dari framework ini yaitu untuk memberi kesempatan pengguna untuk membuat aplikasi iOS dan Android dengan HTML, CSS, dan JavaScript dengan mudah. Framework7 hanya fokus pada pengembangan aplikasi iOS dan Android.

Fitur :

1. Multiple Views (Split View)

2. Swipe back

3. Dynamic Navbar

4. Pull to refresh

Keunggulan :

1. Tidak perlu memperlajari bahasa lain lagi karena framework7 hanya menggunakan HTML, CSS, dan JavaScript.

2. Dapat dikombinasikan dengan berbagai JavaaScript framework.

3. Tidak menggunakan library pihak ke-3

4. Tampilan aplikasi yang dihasilkan sangat mirip dengan aplikasi native.

5. Memiliki dokumentasi yang baik.

Kekurangan :

1. Hanya fokus untuk pengembangan aplikasi iOS dan Android.

Di bawah ini beberapa aplikasi yang dibangun dengan menggunakan Framework 7 :

1. HerdData

HerdData merupakan aplikasi yang memudahkan untuk menyimpan dan mengakses data peternakan melalui Smartphone. Aplikasi ini tersedia untuk iOS dan Android.

2. Bandbiz

Aplikasi ini dapat membantu musisi untuk mencatat uang yang mereka hasilkan dan uang yang mereka keluarkan, merchandise yang mereka jual dan masih banyak lagi yang laiinya. Dengan aplikasi ini pengguna dapat mengatur project kolaborasi band, sinkronisasi kalender dan melihat laporan. Bandbiz tersedia untuk Android dan juga iOS.

Framework 7 dapat didownload pada link berikut ini : https://github.com/framework7io/Framework7/releases

Referensi : 

http://www.gajotres.net/best-html5-mobile-app-frameworks-ionic-review/

http://www.candra.web.id/mengenal-ionic-framework/

https://phonegap.com/about/

http://lpbdsi.blogspot.co.id/2013/09/dongeng-sebelum-tidur-sejarah-phonegap.html

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

https://phonegap.com/blog/2012/03/19/phonegap-cordova-and-whate28099s-in-a-name/

https://www.telerik.com/kendo-ui

http://www.telerik.com/platform/showcases 

http://tipa.co.id/read/12/berkenalan-dengan-kendo-ui-jquery-html5-framework

http://www.gajotres.net/best-html5-mobile-app-frameworks-kendo-ui/

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

https://mkhuda.com/android/mengintip-dua-ui-framework-untuk-developer-phonegap/

http://deaky.my.id/5-framework-gratis-terbaik-untuk-membangun-aplikasi-mobile-dengan-html5-css-dan-javascript/

http://www.gajotres.net/best-html5-mobile-app-frameworks-onsen-ui/

https://onsen.io/samples/

https://www.codepolitan.com/berkenalan-dengan-framework7-57d2962e94423-10799

https://framework7.io/showcase/

https://framework7.io/