Salam. Baik, sekarang kita lanjutkan ya ke part 2 instalasi Ionic Framework. Bagi sahabat yang belum mengikuti materi sebelumnya silakan klik disini untuk dipelajari. Kita lanjutkan langkah selanjutnya yaitu download dan install ant apache.

  1. Download dan Install Ant Apache. Silakan rekan-rekan browsing di google dengan kata kunci download ant apache. Lalu klik web ant apache download, silakan scroll kebawah dan download file zip ant apache.

Lalu, silakan ekstrak file zip ant apache tadi, misalnya kita buat folder di C:\apache-ant-1.9.7 . Oh iya, maaf di website dan folder versinya agak berbeda ya karena pas di cek di website-nya sudah keluar versi yang terbaru ^_^ . Kalau sudah kita setting kembali Environtment Variables, yaitu dengan menambahkan Variable name : JAVA_HOME , dan Variable value : C:\Program Files\Java\jdk1.8.0_111 (sesuaikan dengan alamat jdk).

Setelah itu, kita kembali konfigurasi Environtment variables dengan menambahkan variabel baru, yaitu Variable name : ANT_HOME , Variable value : C:\apache-ant-1.9.7 (sesuaikan dengan alamat ant apache). Lalu OK.

Kita update kembali Environtment variables, pada list System variables pilih Path, klik edit lalu edit text dan tambahkan titik koma (;) serta tambahkan %ANT_HOME%\bin . Lalu Ok.

Terakhir, untuk memastikan apakah ant apache sudah terinstall atau belum silakan anda buka command prompt lalu ketikkan ant -v .

Apabila ada keterangan seperti di atas berarti anda sudah berhasil melakukan instalasi ant apache. Apabila belum berhasil, silakan restart komputer anda lalu dicoba kembali.

2. Download dan Install node.js . Sekarang kita lanjut browsing di google dengan kata kunci download node js . Lalu pilih link teratas, kita akan diarahkan ke website node js. Silakan pilih LTS Recommended For Most Users dan klik Windows Installer. Download file lalu install next next next ^_^ . Tetapi, apabila ingin versi yang terbaru juga silakan dicoba, pilih Current Lates Features.

Kalau sudah di install, kita search di button start ketik node. Apabila muncul gambar di bawah ini berarti node js sudah terinstall dengan baik.

Kita buka command prompt (CMD) lalu ketikkan npm lalu enter untuk cek apakah instalasi node js. Ketikkan node –version dan npm –version untuk melihat versinya.

3. Install Ionic Framework via Command Prompt. Silakan anda search command prompt cmd atau command prompt node js, lalu anda buka.

Lalu setelah dibuka, masukkan npm install -g cordova ionic . Pastikan koneksi internet stabil ya ^_^ , karena instalasi akan mendownload framework ionic via cmd ini. Tunggu beberapa saat karena proses download memakan waktu, siapkan secangkir kopi sambil nonton tv boleh.

Ok, kalau sudah terinstall kita coba cek versi ionic dan cordova-nya. Ketikkan ionic -v enter, lalu cordova -v enter.

Ok, sampai disini instalasi Framework Ionic sudah selesai, tahap selanjutnya adalah pembuatan aplikasi ionic.

4. Membuat project Ionic Framework. Sebelumnya kita membuat folder untuk project Ionic, misalkan kita ke drive C lalu buat folder proyek kita. Caranya ketikkan cd \ enter untuk ke drive C, lalu anda buat folder atau direktori project dengan mengetikkan mkdir myproject (nama project bebas saja). Ketikkan cd myproject untuk masuk ke folder. Lalu kita akan buat aplikasi di dalam myproject dengan nama aplikasi myApp (misalnya), lalu ketikkan ionic start myApp blank enter untuk aplikasi android kosong. Pilihan lainnya adalah aplikasi android dengan menu tab ketikkan ionic start myApp tabs dan ionic start myApp sidemenu untuk aplikasi android dengan menu samping.

Selesai nih buat instalasi project-nya. Silakan di cek.

Lalu ketikkan cd myApp enter. Kita cek aplikasi android yang sudah kita buat di browser dengan mengetikkan ionic serve (tampilan di browser) atau ionic serve -cls untuk yang 2 versi yaitu tampilan ios dan android.

Berikut tampilan di browser untuk aplikasi android yang kosong atau blank.

Kalau rekan-rekan ingin menghapus aplikasi myApp lalu ingin memilih bentuk android yang tab atau side menu silakan keluar dulu, ketik q enter.

Silakan hapus foder myApp pada folder myproject ya. Bisa melalui windows explorer, setelah itu tekniknya sama dengan yang di atas, misalnya kita ingin membuat aplikasi dengan menu tab berarti ketik cd.. enter agar ke folder myproject, lalu ketikkan ionic start myApp tabs . Ok, instalasi selesai silakan di cek kembali dengan mengetikkan ionic serve -cls .

Silakan anda buka windows explorer, karena project ini saya buat di drive C maka silakan buka dan cari project kita tadi. Kita akan memakan waktu lama untuk memodifikasi Ionic Framework pada folder www . Syaratnya anda harus perkuat basic HTML, CSS, dan Javascript ya…!! ^_^

Struktur Ionic Framework.

Kalau sudah kita modifikasi, silakan cek di browser yang menampilkan ionic serve -cls tadi ya, langsung update ketika kita melakukan perubahan. Sekarang bila kita ingin publish karya kita atau kita ingin coba buka di gadget smartphone kita maka ketikkan ionic platform add android enter untuk menambahkan platform android, lalu ketikkan ionic build android enter untuk build aplikasi ke apk. Silakan cek alamatnya lalu buka di windows explerer, kirim aplikasi yang sudah kita build tadi dan dibuka di smartphone kesayangan kita ^_^ . Taraaa…!! We have build our android application.

Silakan cek alamat file apk di atas, dan kirim via bluetooth ke smartphone kita lalu install.

Baik, demikian tutorial instalasi Ionic Framework. Selamat mencoba dan berkreasi ya sahabat…!! Wassalam.