Degananda.com -

Melalui ionic kita dapat membuat aplikasi android/ios dengan menggunakan javascript(angular 2) namun masih tetap dapat mengakses fitur-fitur native dari android/ios itu sendiri. Istilahnya adalah hybrid app.

Sedangkan native app adalah aplikasi yang dibangun dengan native language dari sebuah sistem operasi.

Baca juga

• Memulai Belajar Membuat dan Mendesain Website dengan…
• Cara Memulai Belajar Pemrograman Aplikasi Mobile…
• Cara Install Deno pada Windows 10
• Memulai Pemrograman Typescript – Typescript Indonesia
• Memulai Belajar Membuat Aplikasi Android dan Ios…

Contohnya android dapat dibangun secara native dengan menggunakan java. Sebelum membaca ulasan ini, terdapat keuntungan dan kelebihan membangun aplikasi secara hybrid menurut pandangan saya dan dirangkum berdasarkan ulasan-ulasan di internet.

Keuntungan :

1. Development time sangat cepat (karena menggunakan javascript) jika dibandingkan dengan native. Native memakan waktu development yang lebih lama meski relatif karena terkait dengan resources dan skill yang ada
2. Lebih cepat go to market. Karena development cepat maka aplikasi semakin cepat menuju ke pasar sehingga bisnis lebih cepat berjalan.
3. Dua platform sekaligus yakni android dan ios. Jika membuat secara native maka kita perlu membuat aplikasi tersebut dengan dua bahasa pemrograman yang berbeda. Java untuk android dan swift untuk ios.

Kelemahan :

1. UI Sangat tidak seperti aplikasi native. Look and feel dari aplikasi hybrid yang dibuat dari css menyerupai dengan ui android/ios namun tidak sepenuhnya sama karena look and feel nya pasti berbeda hal ini dapat menyebabkan ux yang buruk.
2. Performa lebih lambat jika dibandingkan dengan aplikasi native.
3. Aplikasi native memiliki akses yang lebih luas terhadap sistem opreasi

Setelah membaca kelebihan dan kekurangan ionic tentunnya anda dapat memutuskan apakah ingin mempelajari ionic atau tidak. Namun yang pasti, jika anda menggemari pemrograman web maka ionic adalah salah satu hal yang patut untuk dipelajari.

Cara Membuat dan Menginisiasi Project Android dengan Ionic Typescript

Here we go ~ berikut ini adalah langkah-langkah untuk mensetup project ionic.

1. Pastikan telah menginstall beberapa hal program ini

• NodeJS
• Microsoft visual studio
  MVS adalah sebuah editor, anda bebas menggunakan editor yang anda sukai.
• Ionic (pada ulasan ini akan menggunakan ionic v3, maka secara default ditulis dengan typescript/subset javascript)
  menginstall ionic sangat mudah hanya perlu menggunakan NPM. setelah itu perintah yang digunakan adalah

  npm install -g cordova ionic

2. Membuat project ionic

setelah tiga hal diatas terinstall maka kita telah siap untuk membuat project ionic. Perintah yang digunakan adalah :

ionic start [nama_aplikasi] [tipe_aplikasi]

secara default terdapat tiga jenis tipe aplikasi yaitu :

1. blank -> tidak terdapat ui sama sekali
2. tabs -> project langsung mendapatkan ui berupa tiga buah tab dibawah.
3. sidemnu -> project langsung mendapatkan hamburger menu.

opsional : tambahkan opsi –ts untuk membuat project ionic dengan typescript. pada ulasan kali ini akan menggunakan typescript. Jika anda menggunakan ionic 2 atau 3 (bukan beta), maka tidak perlu menggunakan opsi –ts karena secara default ionic 2 dan 3 menggunakan typescript.

tunggu beberapa menit, maka project ionic akan selesai dibuat.

gambar diatas merupakan file dan directory yang dihasilkan dari perintah ionic start sesuai dengan konfigurasi yang kita masukan.

3. Menjalankan ionic pada browser

Untuk menjalankan ionic pada browser jalankan perintah dibawah ini pada folder project maka browser secara otomatis akan membuka localhost untuk ionic.

ionic serve

ionic serve sangat membantu dalam proses development karena proses dijalankan pada brwoser sehingga jika terjadi perubahan pada kode akan sangat cepat untuk melakukan kompile dan langsung muncul pada browser.

3.1 Mengganti ukuran aplikasi ionic sesuai devices pada browser

Buka console pada browser (chrome atau firefox developer edition) maka pada pojok kanan akan menemukan icon yang berbentuk handphone. Gunakan ikon tersebut untuk mengkonfigurasi tampilan sesuai dengan devices yang di inginkan.

setelah itu pada browser akan otomatis menyesuaikan ukurannya dan muncul opsi untuk mengganti jenis devices.

3.2 Dock mode

kita juga dapat membuat tampilannya menjadi dock mode agar lebih memudahkan dalam development.

klik pada ikon tersebut maka tampilan akan menjadi seperti dibawah ini

menurut saya pribadi posisi docking seperti ini adalah posisi terbaik karena proses debugging pada console jauh lebih mudah dan kita tidak perlu melakukan scroll kebawah untuk melihat tampilan penuh dari devices.

4. Hello world

tak lengkap rasannya jika membuat aplikasi pada platform yang baru pertama kita buat tanpa menuliskan kata-kata mutiara “hello world”. Untuk mengganti isi dari halaman tab maka yang perlu kita lakukan adalah menuju ke folder

/src/app/pages/home/home.html

kemudian tuliskan kata-kata mutiara hello world tersebut maka live reload akan terjadi pada browser sesaat ketika kita menekan tombol save.

5. Angular

ionic 3 menggunakan angular js. Jika kita telah familiar dengan angular maka hal ini akan sangat membantu dalam proses development. Alangkah lebih baik jika mempelajari angular terlebih dahulu sebelum membangun aplikasi ionic.

6. Menjalankan ionic pada emulator

pastikan telah terinstall android SDK. tanpa android sdk kita tidak dapat menjalankan ionic pada emulator. Jika belum menginstall android sdk dan mengkonfigurasi path maka lakukan ini terlebih dahulu untuk mengkonfigurasi android sdk pada komputer/laptop, jika error pada proses export path dapat melihat forum di stackoverflow ini

1. download android sdk : http://developer.android.com/sdk/index.html
2. unzip , dan lakukan installasi sesuai petunjuk di : http://developer.android.com/sdk/installing/index.html
3. export path
   OSX(mac)

   export ANDROID_HOME=/<installation location>/android-sdk-macosx
   export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

   Windows

   set ANDROID_HOME=C:\<installation location>\android-sdk-windows
   set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Langkah pertama adalah menambahkan platform android untuk project ionic kita.

ionic cordova platform

jika anda mengalami error saat menjalankan perintah diatas maka ionic cordova belum terinstall pada local machine anda. Untuk menginstall cukup jalankan perintah dibawah dan ikuti instruksinnya. jika selesai terinstall(ionic cordova) maka jalankan perintah diatas(platform)

npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest

setelah itu kita harus membuild project tersebut dengan perintah dibawah

ionic cordova build

setelah selesai maka kita tinggal menjalankan emulator android, dengan perintah

ionic cordova emulate

7. Menjalankan ionic pada realdevices

pastikan devices telah terkoneksi dengan laptop/pc dan nyalakan fitur usb debugging pada menu settings (developer option).

kemudian jalankan perintah dibawah ini

ionic cordova run android --device

maka pada handphone android yang terkoneksi dengan laptop/pc  akan langsung launch aplikasi ionic yang kita buat tadi.

selesai. Maka itulah keseluruhan proses untuk mensetup sebuah project ionic hingga melakukan deploy pada emulator dan real devices. Selamat mencoba dan berexperimen.