Mengenal Ionic!

Halo, Nostra Readers!

Tadi siang sepupu saya datang ke rumah untuk silaturahmi. Sambil mengobrol-ngobrol, tiba-tiba terbahas suatu framework yang baru saya dengar, namanya itu Ionic. Wah menarik nih, langsung coba googling apa itu ionic.

Nah untuk postingan kali ini, saya akan membahas singkat mengenai sebuah framework yang disebut-sebut mudah untuk membuat sebuah mobile apps ini.

Iconic merupakan open source SDK mobile untuk membuat native dan progressive web apps dengan mudah. Awalnya iconic dibuat pada tahun 2013 berdasarkan Angular dan Apache Cordova. Sekarang ini Iconic merupakan versi yang kedua, namun tetap dipanggil Ionic, yang berdasarkan dari Angular. Di Ionic ini memberikan tools dan service untuk membuat hybrid mobile apps yang menggunakan teknologi-teknologi dari web seperti HTML, CSS, dan Sass. Lalu dari pemanfaatan teknologi-teknologi web, dengan menggunakan Cordova dapat diinstall pada device-device.

Getting Started

Untuk memulai Ionic cukup mudah, pertama-tama kita perlu menginstall node js terlebih dahulu untuk dapat menggunakan fitur npm. Lalu dari command prompt (Command Line) dimulai dengan menginstall ionic dengan cara mengetik,

npm install -g cordova ionic

Ketika sudah selesai menginstall, lalu dilanjutkan dengan memulai app yang sudah ada(Preset) dengan mengetik di command line dari salah satunya dibawah ini,

- ionic start myApp blank - ionic start myApp tabs - ionic start myApp sidemenu

kemudian setelah kita melakukan command diatas, dimana dari command itu kita sudah meng-clone dari git, kita masuk ke dalam foldernya yaitu myApp,

cd myApp

Lalu dimulai dengan cara,

ionic serve

Setelah dijalankan nantinya akan membuka page baru yang berisikan content dari apa yang sudah di clone tadi.

Nah sekarang ini sudah ada yang namanya Ionic Creator, dimana Ionic Creator merupakan tools dari Ionic yang penggunaannya untuk membuat interface hanya dengan drag and drop.

Mungkin itu dulu dari saya kali ini, semoga bermanfaat untuk kedepannya!

References:
- Ionic
- Wikipedia

Springboot + Java Robot

Pada kesempatan sebelumnya saya pernah membahas mengenai java.awt.Robot di artikel ini.
Dan saat itu saya menganggap bahwa ini library menarik, karena bisa melakukan/menggantikan input dari keyboard dan mouse. 

Pada dasarnya java robot ini memang ditujukan untuk automation seperti yang di jelaskan pada java doc:

This class is used to generate native system input events for the purposes of test automation, self-running demos, and other applications where control of the mouse and keyboard is needed. The primary purpose of Robot is to facilitate automated testing of Java platform implementations.

Untuk input mouse menggunakan java.awt.event.InputEvent yang sudah dibahas pada post sebelum nya. Sedangkan untuk input keyboard menggunakan java.awt.event.KeyEvent. Pada kali ini yg akan kita gunakan adalah input keyboard, berikut contohnya:

 
try {
    Robot robot = new Robot();

    // untuk melakukan aksi menekan tombol enter 
    robot.keyPress(KeyEvent.VK_ENTER);
    // untuk melakukan aksi melepas tombol enter
    robot.keyRelease(KeyEvent.VK_ENTER);

    // untuk melakukan aksi menekan tombol tab 
    robot.keyPress(KeyEvent.VK_TAB);
    // untuk melakukan aksi melepas tombol tab
    robot.keyRelease(KeyEvent.VK_TAB);

} catch (AWTException e) {
    e.printStackTrace();
}
 

Springboot & Headless Mode

Dan ternyata java Robot ini bisa di kombinasikan dengan Springboot. Library ini ternyata bisa digunakan/running dalam springboot yang merupakan sebuah application server dengan menambahkan sedikit code, yaitu konfigurasi system headless. Beberapa library java secara default berasumsi bahwa UI atau Display Monitor dan juga keyboard terpasang. Application server tidak memiliki UI atau Display Monitor yang terpasang, dan ini disebut mode Headless.

Tetapi karena Springboot merupakan sebuah standalone yang bisa juga kita running pada laptop/PC, jadi bisa kita mengeset mode Headless ini menjadi false. Berikut baris code tambahan untuk melakukan setting mode headless :

 
System.setProperty("java.awt.headless", "false");
 

Implementasi

Jadi ide kali ini bertujuan akhir untuk bisa menginput aksi tombol arrow ke kanan dan kiri keyboard.
Sehingga bisa membantu kita saat melakukan presentasi dan berposisi jauh dari laptop.

Untuk spring boot yang digunakan adalah gs-rest-service bisa di dapatkan dari github springboot rest.
Buatlah sebuah API baru seperti berikut:

 
@RequestMapping("/right")
public void right(){
    try {
        System.setProperty("java.awt.headless", "false");

        Robot robot = new Robot();
        robot.keyPress(KeyEvent.VK_RIGHT);
        robot.keyRelease(KeyEvent.VK_RIGHT);
    } catch (AWTException e) {
        e.printStackTrace();
    }
}
 

Setelah kita running springboot tersebut dan mengakses API yang baru saja kita buat, maka laptop/komputer akan mendapatkan aksi tombol arrow ke kanan.

 
http://localhost:8080/right
 

API ini bisa di call melalui perangkat lain yang satu jaringan dengan laptop ini. Misalnya laptop lain yang terkonek pada Access Point/WiFi yang sama, atau perangkat mobile yang bisa mengakses url API tersebut.

Kita tinggal mengemasnya menjadi sebuah aplikasi mobile yang memudahkan pengguna untuk mengakses method-method baru yang kita buat. Dimana di dalam method-method baru itu mungkin berisi logic dari sebuah kombinasi aktivitas keyboard dan mouse yang sudah kita tentukan sendiri.

Native VS Hybrid apps for mobile.

Dua minggu yang lalu saya berkesempatan untuk mempresentasikan tentang membuat mobile apps menggunakan Ionic framework, dimana Ionic sendiri adalah hybrid engine yang memungkinkan kita untuk membuat mobile aplikasi menggunakan HTML5.

Dari materi diatas kemudian muncul beberapa pertanyaan baru, yang paling menarik adalah aplikasi seperti apa yang sebaiknya kita buat menggunakan hybrid engine ?

Ada 2 point yang menurut saya harus di perhatikan pada saat kita akan membuat aplikasi menggunakan hybrid apps:

1. Apakah anda memiliki team native developer yang berpengalaman?

pada saat kita membuat aplikasi secara native kita harus membuat aplikasi untuk beberapa platform seperti android, ios, blackberry, amazon OS , etc. Hal ini tentunya menuntut perusahaan untuk menghire beberapa developer yang berpengalaman yang tentunya tidak murah.

Semakin banyak platform tentunya kita akan semakin banyak menghadapi masalah. Dengan satu core aplikasi untuk semua platform yang digunakan hybrid apps kita bisa melakukan maintenance dengan sangat mudah. tentunya menghemat banyak waktu dan biaya.

2. Performa

Kebanyakan para developer enggan menggunakan hybrid apps adalah masalah di performa. Pada awalnya memang jika kita bandingkan beberapa feature seperti gesture,  transitions dan animasi di hybrid tidak secepat native. Tapi, dengan device yang berkembang sangat cepat perbedaan performa ini tidak terlalu terasa antara hybrid dan native apps.

Bahkan untuk versi android Kitkat keatas dan IOS 7 sudah mendukung chromium based untuk WebView (https://developer.chrome.com/multidevice/webview/overview). Hal ini memungkinkan rendering antara WebView dan Chrome berjalan konsisten. 

Selain itu, yang menjadi masalah lain pada saat membangun aplikasi menggunakan hybrid adalah aplikasi hybrid tidak mempunyai SDK untuk membuat tampilan seperti Collection View, List data, dan beberapa tampilan lain. Seperti yang saya sudah bahas di materi sebelumnya sekarang sudah ada framework Ionic yang memiliki component UI yang memudahkan kita untuk membangun tampilan aplikasi seperti native SDK.

Berikut adalah contoh beberapa aplikasi yang dibuat menggunakan hybrid apps:

1. AirAsia
2. Moodle Mobile
3. HabitRPG
4. dan beberapa contoh lain bisa diakses di showcase.ionicframework.com

Kesimpulan

Menurut saya untuk membuat aplikasi menggunakan hybrid engine kita harus bisa memperhitungkan apakah deadline pembuatan aplikasi ketat dan mengharuskan untuk avaiable disetiap platform, jika iya kita bisa mempertimbangkan untuk menggunakan hybrids app. Dan sedikit tips juga untuk mempertahankan native look and feel, sebaiknya kita tidak membuat animasi yang terlalu berat, contohnya seperti Image slider atau carousel. 

Say Hello to Ionic Framework

Di postingan sebelumnya kami sempat membahas bagaimana membuat mobile apps menggunakan hybrids technology (phonegap). Dimana Phonegap memungkinkan kita membuat mobile apps hanya dengan menggunakan HTML, CSS dan Javascript.

Tetapi pada saat kita melakukan development menggunakan phonegap, kita masih diharuskan untuk melakukan design dan menambahkan framework javascript sendiri untuk mendukung proses development.

Dikesempatan kali ini kita akan membahas membuat aplikasi mobile menggunakan Ionic Framework. Ionic adalah HTML5 native app development framework yang membantu kita untuk membuat hybrids mobile apps.

Ionic Framework berfokus pada meningkatkan tampilan dari mobile apps dan juga meningkatkan fungsional dari UI interaction dari aplikasi. Ionic sendiri bekerja diatas cordova dan phonegap, hanya saja Ionic menambahkan beberapa component yang dibutuhkan dalam melakukan development mobile apps.  Berikut beberapa component yang disediakan oleh Ionic:

1. CSS Components, dengan memanfaatkan css component dari Ionic kita dimudahkan untuk membuat tamplate yang berorientasi mobile.
2. Sass, Ionic juga menginclude Sass, sehingga kita akan jauh lebih dimudahkan dalam menghandle css diaplikasi.
3. Javascript extension, Tidak hanya menggunakan AngularJs sebagai javascript framework, Ionic juga menambahkan beberapa javascript component yang nantinya berguna untuk menghandling event-event di aplikasi yang sifatnya lebih mobile oriented.
4. CLI, Ionic juga menyediakan beberapa perintah command line yang nantinya berguna untuk membuild, run dan testing aplikasi.
5. Ionicons, Kumpulan Icon yang disediakan oleh ionic. 

Berikut langkah-langkah yang untuk instalasi dan membuat sample app menggunakan Ionic Framework.

1. Pastikan kalau Node.js sudah terinstal di komputer kalian.
2. Masuk ke command line dan jalankan perintah berikut:  

sudo npm install -g cordova ionic,

3. Setelah menginstall Cordova dan Ionic, kita akan masuk ke proses membuat sample app. berikut adalah perintah untuk membuat sample app.

   ionic start [Nama aplikasi] [Template].

   Di Ionic kita dapat menggunakan beberapa jenis template pada aplikasi kita, yaitu Tabs, Sidemenu, dan Blank.
   
   
4. Setelah itu ionic akan mengenerate mobile app kita dan membuat struktur code seperti berikut: 
   
5. Selanjutnya kita akan menjalankan aplikasi yang barusan kita buat. Pada contoh kali ini saya akan menjalankan aplikasi untuk iOS jadi yang harus saya lakukan adalah menambahkan platform di aplikasi kita untuk iOs, jalankan perintah berikut di command line: 

   $ cd [nama_aplikasi]/

   $ ionic platform add ios

6. Selanjutnya build aplikasi:

   $ ionic build ios

7. dan jalankan aplikasi:

   $ ionic emulate ios

   dan voilà, aplikasi kita langsung bisa dijalankan di iOS simulator
   
   
   
   

note: jika terjadi error pada saat menjalankan apikasi ke simulator, jalankan perintah berikut: 

$ npm install -g ios-sim