Helo Guyss,
Ionic adalah sebuah framework yang digunakan untuk membuat aplikasi mobile dengan menggunakan teknologi web, seperti html5, css, javascript dll.
pastikan untuk men-download dan menginstal Git for Windows dan opsional Console
1. install nodejs
| Windows Installer (.msi) | 32-bit | 64-bit |
|---|
OS WIndows 7 anda. setelah download selesai jalan kan setup secara default path install akan terinstall di C:\Program Files\nodejs
tekan tombol flagwindows+r (run) lalu ketik cmd maka akan masuk ke konsol dos lalu ketik
“node -v”
C:\Windows\system32>node -v
v0.10.36
Jika Keluar error seperti ini
C:\Windows\system32>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.
tambahkan C:\Program Files\nodejs ; ke awal variabel PATH.
NPM
NPM (Node Package Manager. ) . NPM ini sudah diikutsertakan secara default waktu instalasi NodeJS. Tool ini benar-benar akan sangat membantu Anda untuk menambahkan beberapa module NodeJS akan teristal secara default di C:\Program Files\nodejs\node_modules\npm\bin
ketik di cmd
“npm-v”
C:\Windows\system32>npm -v
1.4.28
jika ada error
Select Start -> Computer -> System Properties -> Advanced system settings -> Environment Variables -> System variables -> PATH.
tambahkan C:\Program Files\nodejs\node_modules\npm\bin ; ke awal variabel PATH.
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. (close cmd lalu buka lagi guys)
2. Install cordova
cordova dinstal lewat npm
npm install -g cordova
Ini membutuhkan koneksi internet.
cordova -v
jika error berati kita belum menambahkan path untuk package yang dinstall npm
C:\Users\Usersaya\AppData\Roaming\npm;
Usersaya = user anda
Select Start -> Computer -> System Properties -> Advanced system settings -> Environment Variables -> System variables -> PATH.
tambahkan C:\Users\Usersaya\AppData\Roaming\npm; ke awal variabel PATH.
3. Install ionic
npm install -g ionic
4. Membuat Awal aplikasi IONIC
ionic start myapp tabs
myapp adalah nama aplikasi yang akan dibuat
tabs adalah template dari ionic, ada tiga pilihan yaitu blank, tabs, dan sidemenu
Di langkah ini kita sudah bisa langsung menjalankannya melalui web browser. ketikkan
cd myapp
Running Aplikasi di browser
ionic serve
Untuk debugging code tekan F12
tutorial debugging dan menggunakan console di chrome klik di sini
tutorial debugging dan menggunakan console di mozila firefox klik di sini
tutorial debugging dan menggunakan console di internet explorer klik di sini
Untuk Android:
Java JDK
Instal Java JDK terbaru (TIDAK hanya JRE).
untuk JDK bisa download di sini http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Selanjutnya, buat variabel lingkungan untuk JAVA_HOME menunjuk ke root folder di mana Java JDK diinstal. Jadi, jika Anda menginstal JDK ke C: \ Program Files \ Java \ JDK7, mengatur JAVA_HOME menjadi jalan ini. Setelah itu, tambahkan direktori bin JDK terhadap variabel PATH juga. Setelah asumsi sebelumnya, ini harus berupa% JAVA_HOME% \ bin atau path lengkap C: \ Program Files \ Java \ JDK7 \ bin
Apache Ant
Untuk menginstal Ant, download zip dari sini, ekstrak, memindahkan folder pertama di pos ke tempat yang aman, dan memperbarui PATH Anda untuk menyertakan folder bin dalam folder itu. Sebagai contoh, jika Anda memindahkan folder Ant ke c: /, Anda akan ingin menambahkan ini ke PATH Anda: C: \ apache-ant-1.9.2 \ bin.
Android SDK
Instalasi SDK Android juga diperlukan. Android SDK menyediakan perpustakaan API dan alat-alat pengembang yang diperlukan untuk membangun, menguji, dan debug aplikasi Android.
Cordova memerlukan variabel lingkungan ANDROID_HOME yang akan ditetapkan. Hal ini harus menunjuk ke [ANDROID_SDK_DIR] \ direktori android-sdk (misalnya c: \ android \ android-sdk).
Selanjutnya, memperbarui PATH Anda untuk menyertakan tools / dan platform-tools / folder dalam folder itu. Jadi, dengan menggunakan ANDROID_HOME, Anda akan menambahkan kedua% ANDROID_HOME% \ dan alat-alat% ANDROID_HOME% \ Platform-tools.
AVD (ANDROID VIRTUAL DEVICES
AVD (Android Virtual Devices) adalah konfigurasi dari emulator sehingga kita dapat menjalankan perangkat Android sesuai model yang dipilih, misal Android 1.5 atau 2.2 dan seterusnya. Untuk dapat menjalankan emulator, kawan-kawan harus terlebih dahulu memiliki Android SDK.
Setiap AVD terdiri dari:
- Sebuah profil perangkat keras. Kawan-kawan dapat mengatur opsi untuk menentukan fitur hardware emulator. Misalnya, menentukan apakah menggunakan perangkat kamera, apakah menggunakan keyboard QWERTY fisik atau tidak, berapa banyak memori internal, dan lain-lain.
- Sebuah pemetaan versi Android. Kawan-kawan dapat menentukan versi dari platform Android akan berjalan pada emulator.
- Pilihan lainnya. kawan-kawan dapat menentukan skin yang ingin di gunakan pada emulator, yang memungkinkan untuk menentukan dimensi layar, tampilan, dan sebagainya. Selain itu kita juga dapat menentukan SD Card virtual untuk digunakan dengan di emulator.
Kita dapat membuat AVD sebanyak apapun dibutuhkan, berdasarkan jenis konfigurasi model dan jenis Android yang dipilih
Berikut cara membuat AVD :
- Buka X:\PATHSDKANDA\SDK Manager.exe
- Klik Android Virtual Devices Manager pada Toolbar.
- Berikutnya akan muncul form seperti dibawah ini.
- Klik New untuk membuat AVD-nya.
- Isi semua konfigurasinya, sehingga seperti gambar dibawah ini.
keterangan :- AVD Name : nama AVD/emulator yang akan kita buat.
- Device : model device android yang akan kita buat
- Target : versi android yang hendak kita gunakan.
- Keyboard : konfigurasi apakah kita akan menggunakan keyboard atau tidak pada emulator yang akan kita buat.
- Back Camere : konfigurasi apakah kita akan menggunakan camera atau tidak pada emulator yang akan kita buat.
- Internal Storage : kapasitas memori internal pada emulator kita.
- SD Card: kapasitas kartu memori pada emulator kita.
Klik OK
- Nah, kita telah berhasil membuat AVD.
untuk menjalankan AVD yang telah kita buat , klik Start. Dan berikut tampilan AVD yang telah kita buat.
5. Testing Aplikasi di Android
Untuk bisa menjalankannya di smartphone dan mendapatkan file apk, ketikkan
ionic platform add android
ionic build android
file apk berada di folderaplikasi/platforms\android\ant-build
Untuk menjalankan di emulator seperti genymotion, ketikkan
ionic emulate android
Untuk menjalankan langsung di smartphone, pastikan smartphone sudah terhubung dan ketikkan
ionic run android
dan tunggu android emulator akan muncul dengan menampilkan aplikasi anda
Semoga Bermanfaat
