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