Membangun ionic di windows 7

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:

  1. 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.
  2. Sebuah pemetaan versi Android. Kawan-kawan dapat menentukan versi dari platform Android akan berjalan pada emulator.
  3. 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 :

  1. Buka X:\PATHSDKANDA\SDK Manager.exe
  2. Klik Android Virtual Devices Manager pada Toolbar.
  3. Berikutnya akan muncul form seperti dibawah ini.7
  4. Klik New untuk membuat AVD-nya.8
  5. Isi semua konfigurasinya, sehingga seperti gambar dibawah ini.9
    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

  6. Nah, kita telah berhasil membuat AVD.10

    untuk menjalankan AVD yang telah kita buat , klik Start. Dan berikut tampilan AVD yang telah kita buat.11

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s