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.
![yusuphamdani-ionic1](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic1.png)
![yusuphamdani-ionic2](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic2.png)
Jika keluar error seperti :
C:\Users\LENOVO>node -v
‘node’ is not recognized as an internal or external command,
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.
![yusuphamdani-ionic3](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic3.png)
![yusuphamdani-ionic4](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic4.png)
Cek apakah NPM sudah ter-install atau belum
![yusuphamdani-ionic5](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic5.png)
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
![yusuphamdani-ionic6](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic6.png)
Ketikan npm install –g cordova kemudian enter, Tunngu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek cordova
![yusuphamdani-ionic7](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic7.png)
Install Ionic
![yusuphamdani-ionic8](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic8.png)
Tunggu sampai proses ionic selesai, kemudian cek ketikan ionic kemudian enter
![yusuphamdani-ionic9](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic9.png)
Membangun aplikasi ionic dengan command promf
![yusuphamdani-ionic10](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic10.png)
![yusuphamdani-ionic11](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic11.png)
Running aplikasi ionic di browser
![yusuphamdani-ionic12](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic12.png)
![yusuphamdani-ionic13](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic13.png)
Selamat Anda telah selesai membangun aplikasi ionic. Untuk run aplikasi di android langsung akan saya jelaskan di tutorial berikutnya ^_^
- Pastikan anda untuk menginstall Git For Windows dan opisional console : http://www.git-scm.com/download/win
- Install NodeJs http://www.nodejs.org/dist/v0.12.0/node-v0.12.0-x86.msi setelah install selesai
- Buka Command Prompt
![yusuphamdani-ionic1](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic1.png)
- NODE JS
Cek apakah NodeJs sudah ter-install atau belum
![yusuphamdani-ionic2](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic2.png)
Jika keluar error seperti :
C:\Users\LENOVO>node -v
‘node’ is not recognized as an internal or external command,
operable program or batch file.
Berarti Anda belum setting pathnya, cara setting path :
![yusuphamdani-ionic3](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic3.png)
- NPM
![yusuphamdani-ionic4](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic4.png)
Cek apakah NPM sudah ter-install atau belum
![yusuphamdani-ionic5](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic5.png)
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
![yusuphamdani-ionic6](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic6.png)
Ketikan npm install –g cordova kemudian enter, Tunngu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek cordova
![yusuphamdani-ionic7](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic7.png)
Install Ionic
![yusuphamdani-ionic8](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic8.png)
Tunggu sampai proses ionic selesai, kemudian cek ketikan ionic kemudian enter
![yusuphamdani-ionic9](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic9.png)
Membangun aplikasi ionic dengan command promf
![yusuphamdani-ionic10](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic10.png)
- 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
![yusuphamdani-ionic11](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic11.png)
Running aplikasi ionic di browser
![yusuphamdani-ionic12](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic12.png)
![yusuphamdani-ionic13](https://yusuphamdani.files.wordpress.com/2016/04/yusuphamdani-ionic13.png)
Selamat Anda telah selesai membangun aplikasi ionic. Untuk run aplikasi di android langsung akan saya jelaskan di tutorial berikutnya ^_^
Tidak ada komentar:
Posting Komentar