Cordova/Onsen UI Tutorial : Membuat Aplikasi Portal Berita Part 1 – Setting Environment

onsen-ui-logo-large

Halo, kembali lagi saya nulis di blog yang sudah banyak ditumbuhi lumut :D. Pada kali ini saya coba untuk menulis tutorial step by step, sekalian latihan ngeBlog lagi. Temanya tentang aplikasi mobile, yang hanya perlu sekali coding langsung bisa di-deploy di berbagai platform. Ya..ya..ya, dulu saya ingat, sekitaran tahun 2012 atau 2013, saya pernah membuat aplikasi hybrid seperti ini. Menggunakan Phonegap versi awal, sekarang udah berubah nama jadi Cordova. Pada jaman itu saya susah sekali menemuk UI framework yang pas. Yang ada hanya jQueryMobile, yang benar-benar membuat saya stress dengan performanya yang bikin aplikasi nge-lag bin lemot. Lama gak mengikuti perkembangan cordova dan UI framework-nya, beberapa bulan yang lalu saya iseng googling, ternyata sudah banyak UI framework-nya yang anti nge-lag. Diantaranya Ionic Framework, Lungo, Onsen UI, dll (silahkan googling).

Dari situ saya tertarik untuk mencoba Ionic dan ada permasalahan teknis yang tidak bisa saya temukan solusinya sampai sekarang. Akhirnya beralih ke Onsen UI, keren, dan gak kalah sama Ionic. Dokumentasinya lengkap, sayangnya hanya sedikit yang menggunakannya. Jadinya ketika menemukan masalah, memang agak susah mencari solusinya. Tetap menurut saya sama saja, karena basisnya menggunakan AngularJS. Beberapa waktu yang lalu saya coba untuk membuat aplikasi location tracking dengan Onsen UI, sangat ringan untuk sebuah ukuran framework hybrid, hampir sama dengan aplikasi native.

Saya coba untuk membuat tutorial bersambung, dengan studi kasus membuat aplikasi portal berita sederhana. Berikut daftar environment yang saya gunakan :

  1. Onsen UI untuk UI framework
  2. Slim Micro PHP framework Lumen Micro PHP Framework untuk backend
  3. AngularJS
  4. MySQL
  5. Mac atau Linux, saya tidak bertanggung jawab untuk yang pakai windos :p

Untuk cara instalasinya, silahkan langsung menuju ke dokumentasi Onsen UI resminya. Saya menggunakan main template Sliding Menu, tentunya nanti bisa ubah sesuai keinginan kita. Saya fokuskan disini untuk versi android-nya terlebih dahulu. Tambahkan plaform android ke dalam project aplikasi kita, cordova platform add android.

onsen-ui-add-paltform-android

Setelah menambahkan plaform android ke dalam project aplikasi ini, bisa kita langsung coba melalui emulator atau device/smartphone android/tablet android, cordova run android.

onsen-ui-run-android

Mungkin ini akan menyulitkan bagi rekan-rekan yang masih ngotot dan ngoyo menggunakan OS windos :p. Ada kabar gembira (bukan dari ekstrak manggis), Onsen UI menyediakan sebuah cloud apps, untuk melakukan development aplikasi berbasis Cordova, namanya Monaca.  Tentunya ada versi free-nya dan terbatas, ya iyalaah, namanya juga versi free kok minta support lebih, ya bayar dong :p.

OK sekian dulu untuk bagian pertama project aplikasi portal berita ini, akan saya lanjutkan di tulisan selanjutnya. Ouw iya, sudah saya buatkan repo-nya di Cordova/Onsen UI Tutorial : Membuat Aplikasi Portal Berita Part 1 – Setting Environment, monggo buat rekan-rekan yang mau ikut nimbrung.

 

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!

1 Comment