Pengembangan Ionic 2 Framework dan Angular 2 | belajar framework ionic

Pengembangan Aplikasi Hybrid Menggunakan Ionic

·         Instalasi dan Pengaturan 

Prosedur  instalasi  dari  Ionic  dan  Cordova  cukup  sederhana.  Sebelum  installasi  Ionic  2  dan Cordova diharapkan agar melakukan installasi Node JS terlebih dahulu dimana source bisa di download pada nodejs.org. Untuk melakukan instalasi global, perintah berikut dapat di masukan di terminal yang telah menginstal paket yang dibutuhkan. Pemasangan global:   npm install –g ionic cordova Setelah aplikasi dasar Ionic 2 sudah ter-install, silahkan gunakan command berikut untuk pengecekan :

ionic –v

cordova-v

Untuk membangun aplikasi baru di Ionic 2,  ionic serve  dapat digunakan di terminal setelah melakukan setting  direktori  yang  sesuai  dimana  proyek  tersebut  tersimpan.  Hasil  dari  perintah  tersebut  akan menghasilkan  tampilan  aplikasi  pada  browser  default  pada  komputer.  Jika  ingin  menampilkan  hasil aplikasi dengan berbagai versi pada browser bisa  menggunakan  ionic serve  –cls  ,  maka akan tampil 3 versi tampilan yaitu Android, Windows dan iOS.

Untuk  menjalankan  aplikasi  pada  emulator/device  phone  harus  menambahkan  platform  pada  project aplikasi  dengan  cara  :  ionic  platform  add  [android/ios],  pada  terminal.  Ketika  ingin  menjalankan aplikasi pada emulator bisa menggunakan command :  ionic [run/emulate] [android/ios]

·         Spesifikasi Perangkat Lunak

Untuk membangun aplikasi, beberapa  tools  dan  software  dipergunakan. Aplikasi dibangun dan diuji pada  platform  Windows menggunakan  command line interface. Salah satunya adalah penggunaan NodeJS  Versi  4.4.0.  Untuk  menuliskan  TypeScript  dan  CSS  Script,  editor  teks  yang  digunakan  adalah Visual  Studio  Code.  Web  Browser  yang  digunakan  untuk  deployment  dan  debugging  adalah  Google Chrome versi 49.0.2623.87.

·         Adaptasi Metodologi Pengembangan Aplikasi Hybrid

Untuk membangun aplikasi dari awal, sketsa konsep dasar digambarkan seperti Gambar 1. 0dibawah ini. Sketsa konsep menyoroti berbagai aspek yang dibutuhkan dalam rangka merancang,

membangun, menguji, debug dan menjalankan aplikasi.

·         Perancangan dan Implementasi Kode

Aspek terpenting untuk  melakukan pengkodean pada aplikasi  mobile  adalah pemahaman  yang mendalam  tentang  Angular  2  Framework.  Terdapat  berbagai  aspek  yang  perlu  dipahami  untuk  dapat memahami pengembangan aplikasi menggunakan Ionic 2 dan Angular 2 seperti  NgModule, Component, dan    HTML  Angular  2  dibangun  untuk  memberikan  fungsionalitas  pada  aplikasi.  Angular  2  juga memungkinkan untuk menentukan  Component  kita sendiri.  NgModule  pada Angular 2 digunakan untuk mengendalikan  data  dalam  aplikasi  dimana  digunakan  objek  TypeScript  dasar.  Controller  setiap  page HTML dikendalikan pada  code  TypeScript.  Nama  class  yang ada didalam TypeScript masing  –  masing controller akan di daftarkan didalam app.module.ts. Tampilan bebeberapa code:Pada Controller Page:

xport class HelloIonicPage {

dataZodiak = {tgl_lahir : '',

nama: ''};

itemsZodiak: any;

tgllahir;

constructor(public navCtrl: NavController, private zodiakservice:ZodiakService, public

alerCtrl: AlertController) {

}

searchZodiak(){}

……

}

Pada app.module.ts:

@NgModule({

declarations: [

MyApp,

HelloIonicPage,

ItemDetailsPage,

ListPage

],

imports: [

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HelloIonicPage,

ItemDetailsPage,

ListPage

],

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

HTML pada dasarnya digunakan untuk mendefinisikan interface tanpa tampilan sebuah antarmuka, pada

Ionic 2 ini bisa menggunakan tag bawaan Ionic ataupun HTML dasar, contoh code, seperti:

<ion-menu [content]="content">

<ion-content class="has-header mymenu">

<ion-item class="menu-header">

<div class="avatar">

<br/>

<div class="app-icon"></div>

398

<br/>

<h2>My Zodiak</h2>

</div>

</ion-item>

<br/>

<ion-list class="myitem">

<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

<ion-icon name="{{p.icon}}" item-left></ion-icon>

{{p.title}}

</button>

</ion-list>

</ion-content>

<ion-footer>

<ion-buttons class="mybutton">

<button ion-button outline (click)="exitApp()" >

<ion-icon name="log-out" item-left></ion-icon>

Keluar

</button>

</ion-buttons>

</ion-footer>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Penggunaan  Ionic  2  Framework  dan  Angular  2  terbukti  dapat  dijalankan  di  mobile  operating sistem yang berbeda.. Untuk  menguji bahwa Ionic 2 telah running  di cross platform  dapat menggunakan code sebagai berikut:

a.  Pada Android: ionic run android

b.  Pada iOS : ionic run ios

Dilihat dari sisi simulasi dalam bentuk web-based yang dimiliki Ionic, dapat menggunakan kode: ionic serve –cls, maka akan tampil di browser tampilan beda platform.

·         Tampilan User Interface dari Aplikasi

Setelah  merancang  user-interface  dan  membuat  panggilan  API,  pengembangan  aplikasi  tahap akhir  siap untuk di-deploy. Pengembangan akhir aplikasi pada platform  mobile  dapat dilihat di bawah ini yang  mengekstrak  data  real  time  dan  menampilkannya  ke  pengguna  untuk  mengetahui  situasi  layanan yang  sedang  dgunakan.  Penulis  menggunakan  API  Free  dari  ibacor.com  untuk  percobaan  pembuatan aplikasi MyZodiak.

Untuk hasil ke versi Android dapat di  download  di Google Play Store dengan kata kunci MyZodiak.

Dengan  bantuan  Ionic  2  Framework,  dapat  dikembangkan  aplikasi  dengan  fungsionalitas lengkap  yang  dapat  dijalankan  di  mobile  operating  system  yang  berbeda  seperti  Android,  iOS  dan Windows  Phone.  Dapat  disimpulkan  bahwa  Ionic  sebagai  teknologi  baru,  namun  sangat  berkembang, adalah sederhana dan mudah digunakan. Ionic 2 memungkinkan pengembang untuk membuat kode pada TypeScript,  HTML  dan  CSS  untuk  menghasilkan  aplikasi  lintas  platform  hybrid  yang  secara  penuh memiliki fungsional bagi pengguna.

Menciptakan  teknologi  yang  efektif,  dengan  dimediasi  melalui  pendekatan  prototype(prototyping) dimana pengembangan dan pengujian terhadap model kerja (prototipe) dari aplikasi yang dikembangkan telah melalui proses interaksi secara berulang dan melalui perbaikan terus-menerus hingga tercapai kesesuaian dengan yang dibutuhkan oleh pengguna ( user). Aplikasi yang tepat tentunya sangat membantu pengguna dalam kelancaran maupun kecepatan penyelesaian berbagai tugas, baik dalam skala kecil atau besar.

Hasil penelitian dapat digunakan sebagai salah satu referensi di dalam pengembangan perangkat lunak,  baik  di  Indonesia  maupun  dalam  skala  global,  untuk  melakukan  efisiensi  didalam  proses pembuatan perangkat lunak berbasis mobile.

Sumber : Paula Dewanti1), Putu Adi Guna Permana2) STMIK STIKOM Bali/Sistem Komputer