Hello World
Sudah lama saya tidak menulis di blog ini lagi 😀. Untuk mengawali kembalinya saya di blog ini, saya akan mencoba membuat series tutorial Framework Ionic yang akan saya posting secara berkala.
Apa itu Ionic ?
Ionic adalah sebuah framework yang digunakan untuk membangun aplikasi mobile hybrid dengan teknologi web seperti HTML5, CSS, dan Javascript. Ionic menyediakan komponen-komponen yang dapat digunakan untuk membangun aplikasi mobile selayaknya aplikasi native. Ionic sendiri tidak memiliki kemampuan untuk berkomunikasi langsung dengan fitur device seperti GPS, dan kamera, sebagai gantinya Ionic bekerja berdampingan dengan Cordova untuk mencapainya.
Sejarah dan perkembangannya
Seperti diketahui aplikasi mobile hybrid merupakan aplikasi web yang dijalankan di sebuah web view, dalam kemasan native environment yang kecil. Awalnya, dalam pengembangan aplikasi hybrid tidak tersedia SDK atau komponen untuk membuat mobile UI. Tim Ionic melihat permasalahan ini, dan menawarkan solusi dengan menciptakan Ionic Framework sebagai framework untuk membangun aplikasi mobile hybrid dengan komponen-komponen mobile UI.
Konfigurasi Ionic
Berikut adalah langkah-langkah untuk memulai setup dan konfigurasi Ionic :
1. Install NodeJS : untuk men-setup Ionic, langkah pertama yang harus dilakukan adalah install NodeJS di komputer, agar komputer dapat mengakses Node Package Manager (NPM). Untuk memastikan NodeJS sudah benar terinstall, buka command line (Windows) dan ketikkan perintah node –v atau npm –v dan tekan enter.
2. Install Ionic CLI : langkah selanjutnya adalah menggunakan NPM untuk menginstall Ionic CLI.
1) Buka command line dan jalankan perintah : npm install –g ionic.
2) Setelah proses diatas selesai, maka jalankan perintah ionic –v di command line untuk melihat versi Ionic CLI, dan memastikan Ionic telah berhasil diinstall.
3) Untuk melihat semua perintah-perintah di Ionic CLI, bisa dilihat di link berikut : https://ionicframework.com/docs/cli/commands.html
3. Install Cordova : berikutnya adalah menginstall Cordova menggunakan NPM. Cordova dibutuhkan untuk mengakses fitur-fitur device seperti GPS, dan kamera.
1) Buka command line dan jalankan perintah : npm install –g cordova.
2) Setelah proses diatas selesai, maka jalankan perintah cordova –v di command line untuk melihat versi Ionic CLI, dan memastikan Ionic telah berhasil diinstall.
Memulai Project Baru
Untuk membuat project baru dengan Ionic, kita dapat menggunakan Ionic CLI pada command line. Perintah untuk membuat project baru adalah : ionic start __nama_project__ __template__ .
- __nama_project__ adalah nama aplikasi mobile yang akan dikerjakan, dan sekaligus nama folder project, perlu diperhatikan nama project tidak boleh menggunakan spasi misalnya : “My App”, seharusnya “MyApp”.
- __template__ adalah template aplikasi standard yang tersedia di Ionic. Terdapat tiga template yang disediakan oleh Ionic, yaitu blank, tabs, dan sidemenu.
Struktur Project
Setelah berhasil membuat project baru, Ionic akan men-generate beberapa folder, dan file sebagai bagian workflow dari project Ionic Framework. Berikut adalah contoh struktur file yang terdapat pada folder project dari contoh diatas :
Untuk melihat hasil view dari project Ionic bisa menggunakan perintah ionic serve (dijalankan di aplikasi browser), atau ionic cordova run android/ios (dijalankan di emulator atau device) pada command line.
Satu halaman aplikasi pada
Ionic, umumnya memiliki tiga jenis file yaitu *.html (view), *.ts
(controller), *.scss (desain atau style).
Demikian penjelasan "singkat" tentang Ionic dan bagaimana install dan konfigurasi project Ionic. Selanjutnya akan dibahas pada artikel berikutnya.
Comments
Post a Comment