Belajar Ionic – Aplikasi Pertama

Ionic menyediakan 3 template aplikasi. 2 template yang siap dipakai dan 1 template blank. Untuk memulai kita cukup masuk ke folder dimana aplikasi ingin kita install dan jalankan perintah ini dari command prompt.

 

Dimana myApp adalah nama aplikasinya dan tabs adalah nama Templatenya. Berikut adalah perintah untuk masing-masing template.

Belajar Ionic - Aplikasi Pertama
Template Ionic

 

Lalu jika ingin melihat hasilnya di Browser kita maka kita cukup menjalankan perintah berikut di folder myApp tadi.

Mari kita coba mengubah sedikit aplikasi starternya. Masuk ke source code dari myApp/www/templates/tab-dash.html lalu ubah codingnya menjadi

Perhatikan bahwa begitu kita save maka Aplikasi kita di Browser akan berubah seketika.

Belajar Ionic - Aplikasi Pertama

Inilah aplikasi sederhana pertama menggunakan Ionic. Masih banyak yang bisa diexplore dan mungkin akan saya bahas di lain kesempatan.

 

Belajar Ionic – Installasi

Setelah memutuskan untuk menggunakan Ionic sekarang saatnya memulai dengan Installasi. Hal pertama yang dilakukan adalah memperhatikan Situs resminya Ionic. Jujur tampilan dan showcasenya memukau tetapi saat masuk ke start pagenya ternyata banyak sekali dependencies yang harus dipelajari!

Belajar Ionic - Aplikasi Pertama
Daftar Installasi dari Get Started Pagenya Ionic

 

Cordova/Phonegap sudah sangat jelas harus dipelajari tetapi rasanya cukup sulit jika harus juga menginstallasi Node.js, AngularJS selain Android SDK/iOS SDK. Untungnya pada Video Raymond Camden, dia memperlihatkan sebuah Alternatif installasi yaitu menggunakan Vagrant.

Vagrant menggunakan Virtual Box untuk mensetup Development Environment dari Box yang sudah disediakan oleh orang lain. Dalam pemahaman saya, sebuah Box itu identik dengan Image/ISO dan didalamnya sudah ada semua kebutuhan untuk mulai Development. Dalam hal ionic-android Box sudah langsung memiliki

  • Node.js
  • Git
  • Java SDK 7 update 65 (OpenJDK7)
  • Apache Ant
  • Android SDK
  • Cordova
  • Ionic Framework
  • Expect

Konsep ini membuka mata saya terhadap kemungkinan-kemungkinan lain. Saya bisa menggunakan banyak Box dan hanya mengaktifkan saat dibutuhkan. Hal yang mirip saat ini saya lakukan dengan services di Windows dimana saat saya sedang tidak menggunakan ColdFusion / SQL Server / Oracle maka servicenya tidak saya nyalakan. Walaupun cara itu juga bagus tetapi kenyataannya mungkin ada servis atau proses-proses yang nyala yang menghabiskan resources. Dengan menggunakan Vargrant/VM saya cukup menyalakan VM yang saya butuhkan saja dan mengatur berapa HD, Memori dan Processor yang saya alokasikan. Kekurangannya kita akan membutuhkan resource lebih banyak untuk OS dll milik si VM.

Walau secara teori terdengar sangat mudah namun prakteknya banyak hambatan, yaitu:

  • Vargant membutuhkan waktu untuk download Box, dengan koneksi internet 100-150 kbps ini bisa memakan 5 jam (maklum, Imagenya ukurannya 2.5 GB)
  • Berkali-kali mencoba meng-up kan Vargant tetapi terhenti di VM is Booting Up, entah apa masalahnya dan akhirnya harus menghabiskan waktu mencari solusi untuk mengendalikan Virtual Box dan tetap gagal

Karena sudah menghasibkan 1.5 hari untuk mencoba-coba dan tetap gagal, akhirnya saya memutuskan untuk menginstallasi masing-masing komponent secara manual. Ternyata lebih cepat dan tidak terlalu sulit (walaupun masih penasaran ingin lakukan development di VPN lokal).

Di situs resmi ada tutorial bagus untuk installasi Ionic di Windows ditambah SDK Android. Dan Videonya juga mudah diikuti.

Singkatnya, untuk Installasi Ionic saja (tanpa kebutuhan Builder) bisa dilakukan dalam 2 langkah mudah:

  1. Installasi Node.js
  2. Jalankan perintah berikut dari Command Prompt

Dan jika menggunakan Mac, tambahkan sudo di depan

Akhirnya selesai Installasi dan akhirnya bisa ke bagian serunya. CODING!