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.
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 :
- 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
- Lebih cepat go to market. Karena development cepat maka aplikasi semakin cepat menuju ke pasar sehingga bisnis lebih cepat berjalan.
- 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 :
- 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.
- Performa lebih lambat jika dibandingkan dengan aplikasi native.
- 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 adalahnpm 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 :
- blank -> tidak terdapat ui sama sekali
- tabs -> project langsung mendapatkan ui berupa tiga buah tab dibawah.
- 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
- download android sdk : http://developer.android.com/sdk/index.html
- unzip , dan lakukan installasi sesuai petunjuk di : http://developer.android.com/sdk/installing/index.html
- 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.
[…] kita akan membuat halaman beserta navigasinnya seperti tampak pada bagian page skeleton(bab 2). Sebelum memulai koding siapkan dulu project ionic. Jika belum memahami cara setup project ionic dapat membaca ulasan sebelumnya (http://degananda.com/2017/05/23/membuat-setup-aplikasi-android-dengan-ionic-dan-typescript/). […]
[…] tidak dibahas dalam series ini. Anda dapat melihat pada tutorial mengenai installasi ionic disini. Setiap bagian dari tutorial berseri ini nantinnya akan dilengkapi video untuk […]
[…] anda belum melakukan installasi nodejs dan ionic maka silahkan membaca proses installasinya(ionic) disini. Untuk texteditor kami sangat menyarakan menggunakan microsoft visual studio code karena pertama […]
[…] Cara Membuat dan Menginisiasi Project Android dengan Ionic Typescript […]