Ionic merupakan sebuah framework untuk mengembangkan aplikasi mobile menggunakan bahasa HTML. Kelebihannya adalah aplikasi yang dibuat ini bisa diimplementasikan untuk perangkat mobile dengan sistem operasi iOS dan Android.

Untuk menginstal ionic di Windows, saya merujuk pada laman ini: http://ionicframework.com/docs/guide/installation.html. Oiya, peralatan tempur utama kita adalah CLI aka Command Line Interface.

Pertama, pastikan bahwa di komputer anda sudah terinstal npm. Cek dengan perintah berikut untuk melihat versi npm:

npm -v

Berikutnya, instal cordova

npm instal -g cordova

Lanjut dengan instal ionic

npm instal -g ionic

Setelah berhasil, silakan coba membuat aplikasi pertama dengan perintah berikut:

ionic start app todo blank

Selanjutnya, kita masuk ke folder todo

cd todo

Sebelum kita setup lebih lanjut, pastikan kita menginstal gulp via npm

npm install -g gulp

Selanjutnya kita setup dengan perintah berikut

ionic setup sass

Berikutnya kita coba buka aplikasi dengan browser. Tapi, jalankan dulu server ionicnya dengan perintah berikut:

ionic serve

Sesuai panduannya, saya buka folder /todo/www. Di sana ada file index.html. Saya edit isinya menjadi seperti ini

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Todo</title>
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

 <link href="lib/ionic/css/ionic.css" rel="stylesheet">

 http://lib/ionic/js/ionic.bundle.js

 http://js/app.js
 <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
 http://cordova.js
 </head>
 <body ng-app="todo">
 <ion-side-menus>

 <!-- Center content -->
 <ion-side-menu-content>
 <ion-header-bar class="bar-dark">
 <h1 class="title">Todo</h1>
 </ion-header-bar>
 <ion-content>
 </ion-content>
 </ion-side-menu-content>

 <!-- Left menu -->
 <ion-side-menu side="left">
 <ion-header-bar class="bar-dark">
 <h1 class="title">Projects</h1>
 </ion-header-bar>
 </ion-side-menu>

 </ion-side-menus>
</body>
</html>

Selanjutnya pada file /todo/www/js/app.js juga perlu dimodifikasi menjadi seperti ini

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('todo', ['ionic'])

todo1

todo2

Sudah berhasil? Jika sudah, yuk kita buat coba buat platform ios dan androidnya

ionic platform add ios

atau

ionic platform add android

Oiya, perlu dicatat ya, untuk platform ios hanya bisa dijalankan pada komputer ber-OS besutan Apple (OS X).

Berikutnya, untuk build aplikasi kita gunakan perintah build. Oiya, contoh di sini saya gunakan platform android. Jika anda menggunakan platform ios, cukup ganti android dengan ios:

ionic build android

Untuk simulasikan aplikasi, coba perintah berikut:

ionic emulate android

Untuk menjalankan aplikasi pada perangkat, pasang perangkat Android Anda dengan mode developer ON, lalu gunakan perintah ini

ionic run android

Untuk membuat paket dengan ionic, gunakan

ionic package <mode> <platform>

Sebagai catatan, untuk build dan run android, kita harus memiliki SDK Android.

Advertisements