Skip to main content
Install Ionic Framework

Cara Mudah Install Ionic Pada Windows

Install Framework Ionic

Pembahasan tentang cara install Ionic pada OS Windows merupakan kelanjutan dari pembahasan sebelumnya tentang mengenal framework Ionic. Ionic adalah sebuah framework yang digunakan untuk membuat aplikasi mobile dengan menggunakan teknologi web, seperti html5, css, javascript dll. Ionic menggunakan AngularJS sebagai framework yang basicnya Web dan Cordova untuk membangun aplikasi mobile. Framework Ionic ini bisa digunakan untuk mengembangkan aplikasi mobile native/hybrid (sekali buat aplikasi bisa digunakan untuk Android dan IOS).

Baca : Pengenalan Framework Ionic

Sebelum kita membahas cara install Ionic, pastikan dalam melakukan praktek ini komputer/PC anda terkoneksi dengan Jaringan Internet. Pastikan juga koneksi internet nya stabil jangan sampai mengalami kendala pada saat melakukan proses instalasi.

Cara Install Ionic Framework di Windows

Konfigurasi Ionic

Tahapan awal untuk install ionic, terlebih dahulu anda perlu menginstall beberapa tool. tool ini dibutuhkan sebelum kita memulai proses instalasi ionic. Ikuti step by step dari pembahasan ini supaya anda supaya lebih paham dalam instalasi Ionic.

1. Download dan Install Node.js

Tahapan pertama untuk install ionic adalah meng install Node.js. Node.js merupakan salah satu tool popular untuk membangun utilisasi command line, ionic dan cordova merupakan salah satu yang menggunakan node.js ini.

Untuk toolnya dapat mendownloadnya disini (Pilihan 32 bit atau 64 bit jangan lupa).

Anda tidak perlu melakukan PATH Environment karena sudah di atur sendiri pada saat instalasi. Berikut Langkah-langkah instalasinya :

Install Ionic Framework
Install nodeJS
Install Ionic Framework
Install nodeJS
Install Ionic Framework
Install nodeJS
Install Ionic Framework
Install nodeJS
Install Ionic Framework
Install nodeJS
Install Ionic Framework
Install nodeJS

install Node.js di direktori C, seperti biasanya dan tunggu hingga selesai. Setelah selesai, Buka cmd dan ketikkan perintah “node -v”, jika yang tampil adalah versi Node.js, maka artinya Node.js Anda telah ok. Lihat gambar jika sukses instalasi :

Install Ionic Framework
Sukses Instalasi

Ada terkadang muncul error seperti ini di Command Prompt :

Install Ionic Framework
Error

Solusinya, anda harus setting path nya melalui menu berikut :

berarti anda belum mensetting path nya..

Select : Start -> Computer -> System Properties -> Advanced system settings -> Environment Variables -> System variables -> PATH.

Install Ionic Framework
Setting PATH

2. Install NPM

NPM  (Node Package Manager. ) sudah diikutsertakan secara default waktu instalasi NodeJS. Tool ini benar-benar akan sangat membantu untuk menambahkan beberapa module NodeJS akan terinstall secara default di C:\Program Files\nodejs\node_modules\npm\bin 

Untuk memastikan NPM sudah terinstall, cek lewat CMD lagi :

Install Ionic Framework
Cek NPM

Jika terdapat error sama seperti sebelumnya is not recognized as an internal or external command, berarti kita harus menambahkan variable pathnya di Environmetn nya :

C:\Program Files\nodejs\node_modules\npm\bin;

Catatan : Setiap kali membuat perubahan pada PATH, atau variabel environtment lainnya, Anda harus me-restart atau membuka tab baru dalam program shell untuk perubahan PATH berlaku. (tutup cmd lalu buka lagi)

3. Download dan Install Java

Tahapan ketiga Untuk install ionic, pastikan Java sudah terinstall.

Download java Disini .

Java dibutuhkan untuk menjalankan android SDK dalam kita install Ionic, sedelah selesai instalasi java jangan lupa di PATH Environment,  karena ini sangat berpengaruh nantinya. untuk mengatur PATH Environmentnya : klik kanan pada computer – pilih Properties – pilih Advanced System Setting – pada menu Advanced pilih Environment Variables. Untuk cek apakah Java sudah terinstall, buka Command Prompt ketikkan : java -version

Install Ionic Framework
Cek Install Java

4. Download Apache Ant

Tahap berikutnya untuk install Ionic yaitu Apache Ant.

Download Apache Ant disini

Tool ini dibutuhkan oleh android dan Cordova. jika sudah selesai mendownload apache ant-nya, ekstrak file download ke dalam direktori yang di inginkan. Setelah download, ekstrak folder ANT tersebut di direktori C:. Terakhir, tambahkan paht \bin dari folder ANT tersebut kedalam variabel Path di environment settings Anda. ke folder bin/variabel path environment. Berikut gambaran nya :

Install Ionic Framework
Install ANT
Install Ionic Framework
Install ANT
Install Ionic Framework
Install ANT

5. Download Android SDK

Android SDK menyediakan tool untuk mengembangkan aplikasi android, silahkan download dahulu tool android SDK-nya. untuk install android SDK  ini banyak cara bisa di install, salah satunya dengan menginstall android Studio atau bisa juga dengan mendownload Android SDK saja. namun intinya kita hanya memerlukan anroid SDKnya saja. Android SDK berisikan library dan emulator android yang berguna untuk aplikasi mobile yang di buat nantinya. dan jangan lupa lupa untuk mengatur PATH Environment-nya.

Install Ionic Framework
Cek PATH SDK Android

Untuk tes apakah Android SDK nya berhasil dipasang, buka CMD ketikkan seperti gambar berikut :

Install Ionic Framework
Cek SDK Android

6. Mengatur Path Environment Setiap Tool

ini yang paling penting dalam melakukan path environtment pada semua tools yang sudah di install dan di path. sebenarnya path di atas hanya untuk memudahkan saja, tidak ada fungsinya jika path environment ini tidak dibuat. intinya ini path dari keseluruhan dari semua tool yang ada. berikut gambarnya :

Install Ionic Framework
Total Setting PATH

Isi secara jelas sebagai berikut :

C:\Program Files\Java\jdk1.8.0_25\bin;C:\apache-ant-1.9.6\bin;C:\Users\Iwan\AppData\Roaming\npm;C:\Program Files\nodejs;C:\sdk\platform-tools;C:\sdk\tools

7. Instalasi Cordova dan Ionic

Inilah tahapan terakhir untuk install ionic. Setelah semua tool di atas sudah di siapkan, tahap terakhir adalah melakukan instalasi Cordova dan Ionic. Buka command prompt atau Node.js command prompt , ketikkan perintah berikut :

Note : Pastikan koneksi internet stabil dalam tahapan ini

Buka Command Prompt, ketikkan perintah berikut : $npm install g cordova ionic

Install Ionic Framework
Install Ionic
Install Ionic Framework
Install Ionic

Jika berhasil tidak ada halangan, berikut hasil akhirnya :

Install Ionic Framework
Install Ionic

sekian tutorial instalasi ionic, kita berjumpa kembali di tutorial selanjutnya cara membuat mobile application menggunakan ionic framework.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

  • Aldy Muldani

    Nice artikenya…

    • Thank Sdr. Aldy, semoga mendapat pencerahan..

  • Chaedar ali

    ijin sedot ilmunya yaa