Apa itu Ionic?
Ionic adalah framework untuk membangun aplikasi hibrida menggunakan HTML, CSS, dan JavaScript. Muncul dengan seperangkat komponen UI dan fungsi yang dapat Anda gunakan untuk membuat aplikasi seluler yang berfungsi penuh dan menarik.
Ionic dibangun di atas susunan Cordova. Anda tidak dapat membuat aplikasi seluler dengan Ionic saja karena hanya menangani bagian UI. Ini perlu bekerja dengan Angular, yang menangani logika aplikasi, dan Cordova, framework aplikasi lintas platform yang memungkinkan Anda untuk mengompilasi aplikasi Anda ke dalam file yang dapat diinstal dan menjalankannya di dalam tampilan web perangkat seluler.
Aplikasi yang dibuat dengan Cordova dan Ionic dapat berjalan di perangkat Android dan iOS. Anda juga dapat menginstal plugin Cordova untuk menyediakan fungsionalitas asli seperti mengakses kamera dan bekerja dengan perangkat Bluetooth Low Energy.
Cara menginstal Ionic
Cara menggunakan Ionic Framework di Windows | Sebelum mulai menggunakan Ionic saya jelaskan untuk apa Ionic framework itu. Ionic digunakan untuk membangun aplikasi mobile dengan menggunakan bahasa website, seperti HTML5, CSS, Javascript dan lainnya.
1. Pastikan anda untuk menginstall Git For Windows dan opisional console : http://www.git-scm.com/download/win
2. Install NodeJs http://www.nodejs.org/dist/v0.12.0/node-v0.12.0-x86.msi setelah install selesai
3. Buka Command Prompt
Cek apakah NodeJs sudah ter-install atau belum
Jika keluar error seperti :
C:\Users\LENOVO>node -v ‘node’ is not recognized as an internal or external command,
operable program or batch file.
operable program or batch file.
Berarti Anda belum setting pathnya, cara setting path :
Select Start -> Computer -> System Properties -> Advanced system settings -> Environment Variables -> System variables -> PATH.
- NPM
NPM (Node Package Manager). Ini sudah terinstall bersamaan dengan install nodejs. Tools ini akan sangat membantu saat menambahkan module nodejs akan terinstall secara default di C:\Program Files\nodejs\node_modules\npm\bin
Cek apakah NPM sudah ter-install atau belum.
CATATAN: Setiap kali Anda membuat perubahan pada PATH, atau variabel environtment lainnya, Anda harus me-restart atau membuka tab baru dalam program shell untuk perubahan PATH berlaku.
Install Cordova
Install Ionic
Tunggu sampai proses ionic selesai, kemudian cek ketikan ionic kemudian enter
Membangun aplikasi ionic dengan command promf
- Pertama kita ketkan cd Desktop, ini berarti kita membuka folder desktop windows
- Kedua kita membuat aplikasi ionic yang otomatis akan didownload dan disimpan di desktop dengan nama folder myapp
- Myapp adalah nama aplikasi yang akan dibuat
- Blank adalah template dari ioni, ada tiga pilihan template yang bisa dipilih blank, tabs, dan sidemenu
- Tunggu sampai proses download selesai, disini saya perlihatkan apa bila selesai maka folder myapp akan ada di desktop
Running aplikasi ionic di browser
Selesai.
Konferasi ionic
Membandingkan 2 framework yang cukup terkenal yaitu ionic dan react native tetapi sebelumnya kita harus tau apa yang dimaksud dengan hybrid app dan native app. mari kita lihat tabel di bawah ini.
| Hybrid app | Native App |
| Dibangun dengan menggunakan html, css dan javascript | Dibangun dengan spesifik platform yang akan digunakan, misalkan java , c# dsb |
| Menuliskan sekali, dan dapat di jalankan pada beberapa platform | tidak bisa multi platform |
| Menghemat waktu | pengembangan lebih lama |
| Cepat dalam pengembangan aplikasi | Butuh banyak biaya dan waktu |
| Peforma yang tidak sebagus native app | peforma yang lebih cepat di bandingkan dengan hybrid app |
dari table di atas hanya beberapa perbedaan saja.
Ada begitu banyak kerangka kerja mobile hybrid seperti Ionic, NativeScript, React Native, Xamarin, PhoneGap dll. tapi saya hanya mencoba untuk membedakan ionic dan react native saja.
perbedaan dari dua framework diatas saya jelaskan dalam tabel di bawah ini.
| Ionic | React Native |
| Berbasis Angular 2 yang di kembangkan google | Berbasis React js yang dikembangkan oleh facebook |
| Dokumentasi mudah dipelajari, sangat jelas dan konsisten | membuat dokumentasi yang basic jika di bandingkan dengan ionic |
| Medium peforma karena menggunakan semacam web view | Mempunyai peforma yang bagus |
| menulis kode satu kali dan dapat berjalan di berbagai platform | Belajar sekali, menulis di mana saja, karena ada perbedaan pada setiap platform yang akan di jalankan |
| Bisa dengan cepat melakukan testing, karena jika sudah selesai kita bisa melakukan testing di browser | Membutuhkan emulator atau real device untuk melakukan testing |
| Apache cordoba di gunakan di ionic 2 untuk mengakses fungsi dari hardware phone | React native di kopile langsung ke native code sehingga dapat mengakses langsung feature |
| Penulisan kode menggunakan typescript | Penulisan kode menggunakan jsx |
dari penjelasan diatas berikut kesimpulan saya.
Ionic adalah kerangka pengembangan hibrida yang khas. Menggunakan teknologi web untuk menulis dan membuat aplikasi, dan memerlukan jembatan PhoneGap / Cordova untuk mengakses fitur asli. Kemudian akan mencoba mereproduksi perilaku asli untuk memberikan pengalaman pengguna terbaik.
Kelebihan dan kelemahan Ionic
Kelebihan
- Pengembangan multi platform yang lebih cepat
- menggunakan bahasa yang familiar untuk web developer sehingga mudah dipelajari
- free dan open source 100 % di github
- full cross platform android, ios, windows
- dokumentasi yang mudah di pelajari dan konsisten
- tidak membutuhkan device atau emulator untuk melakukan testing karena bisa dilakukan di browser
- Peforma yang medium atau tidak begitu cepat











