IONIC Framework, Getting Started


Status
Not open for further replies.
V

voezie

Hosting Guru
Halo Semua,

Dikarenakan Sub Forum ini masih kosong, saya mulai dengan topic IONIC Framework, salah satu framework HTML5 dan JavaScript (AngularJS), jadi untuk membuat aplikasi mobile di hampir seluruh platform, baik itu Android, iOS, Windows Phone dan Blackberry tidak perlu membuat codingan/script terpisah, cukup gunakan framework IONIC ini dan bagi yang terbiasa dengan teknologiweb scripting utamanya HTML, CSS dan JavaScript, maka bisa beradaptasi dengan mudah untuk mempelajari IONIC Framework ini, mari kita mulai menginstall IONIC di PC Microsoft Windows :D

Yang dibutuhkan adalah:
  1. Java SE JDK 8 or Latest, download
    • Cara Installnya via GUI, tinggal ikuti Wizard saja
  2. Android SDK, download
    • Cukup di Extract di Drive C:\AndroidSDK atau D:\AndroidSDK untuk kemudian nanti dimasukkan ke variable NodeJS
    • Buka Command Prompt,
    • cd C:\AndroidSDK\tools\bin
    • sdkmanager add-ons;addon-google_apis-google-23 add-ons;addon-google_apis-google-24 build-tools;23.0.3 build-tools;24.0.3 build-tools;25.0.3 build-tools;26.0.3 build-tools;27.0.2 extras;android;m2repository extras;google;google_play_services extras;google;m2repository extras;google;usb_driver platform-tools platforms;android-23 platforms;android-24 platforms;android-25 platforms;android-26 platforms;android-27 sources;android-23 sources;android-24 sources;android-25 sources;android-26 sources;android-27
  3. NodeJS, download
    • Cara Installnya via GUI, tinggal ikuti Wizard saja
    • Buka file pakai text editor C:\Program Files\nodejs\nodevars.bat
    • isi baris berikut dibawah @echo off
    • set "ANDROID_HOME=C:\AndroidSDK\"
      set "JAVA_HOME=C:\Program Files\Java\jdk1.8.0_152\"
      set "PATH=%PATH%;%JAVA_HOME%\bin;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\build-tools\27.0.2"
  4. Git for Windows, download
    • Cara Installnya via GUI, tinggal ikuti Wizard saja
  5. Gradle, Install
  6. Cordova, Install
    • Buka NPM.JS Command Prompt
    • npm install -g cordova --save
  7. IONIC, Install
    • Buka NPM.JS Command Prompt
    • npm install -g ionic --save
Setelah proses instalasi tersebut selesai, mari kita buat project aplikasi baru menggunakan IONIC Framework:
  1. Buka Node.JS Command Prompt, Lalu pindah ke directory tempat penyimpanan project IONIC, misalnya: cd D:\IONIC
Ketik perintah berikut untuk membuat baru project dengan template default berikut

ionic start myApp blank \\untuk template halaman blank
ionic start myApp tabs \\untuk template halaman dengan tab
ionic start myApp sidemenu \\untuk template halaman dengan slide menu

Nah untuk editing nya bisa pakai aplikasi Web Editor yang biasa digunakan untuk edit HTML, CSS, dan JavaScript, seluruh file project tadi tersimpan di D:\IONIC\MyApp

Untuk template starter ionic banyak dijual murah, jadi tinggal download/beli, lalu edit
https://market.ionicframework.com/starters

Mudah Bukan :D
 
natanetwork

natanetwork

Hosting Guru
Verified Provider
intinya sih ionic1 bisa running untuk hp android lawas yg masi pake kitkat dll.. cuma kalo running di android marshmallow agak berat/lambat.
sedangkan ionic 2 atau 3 itu bagus untuk android 6 keatas alias bisa kerasa ringan..kalo dipasang di android lawas kaya kitkat malah ga kompatibel.
 
V

voezie

Hosting Guru
Hmm, kemungkinan kompatibilitas itu cuma ada di proses build/compile, biasanya karena android target tidak disertakan di AndroidSDK, karena seluruh aplikasi IONIC pada dasarnya cuma HTML5, JavaScript (Angular) dan CSS, bisa di open pakai browser juga koq :D
 
natanetwork

natanetwork

Hosting Guru
Verified Provider
https://forum.ionicframework.com/t/minimum-android-version-supported-by-ionicv2/54164

itu salah satunya.. pake ionic2 tapi android kitkat ga kompatibel.. harus downgrade ke ionic1 itu

ionic itu selurunya bukan html5.. yg html5 cuma front end aja.. back-end dia pake angular.
nah trus dikemas menggunakan apache cordova yang seolah2 bisa install aplikasi android seperti native..padahal itu bukan native alias pake apache cordova sebagai web servernya dan ditampilkan pake font end html5.. jadi apk nya itu macam browser yg sudah dikemas cantik hanya bisa buka web dari ionic saja..
 
V

voezie

Hosting Guru
Jadi gini bro... IONIC ini jalannya pakai InAppBrowser atau WebView... atau semacam browser dalam aplikasi nah, masing masing device di tiap versi android itu API nya beda2 versi, solusinya bisa pakai Crosswalk untuk menggantikan InAppBrowser / WebView, kalau dibilang ini masalah IONIC ya gak juga :D Framework yang berbasis HTML5, CSS dan JS kurang lebih masalahnya sama koq begitu :D
 
natanetwork

natanetwork

Hosting Guru
Verified Provider
iya sih ada yg bilang pake crosswalk.. cuma saya blom coba.. untuk yg pake android lawas sementara saya pake ionic1..
projectnya untuk pabrik ..bukan untuk public soalnya :D
kalo public pake ionic3 lbh enak kayaknya
 
V

voezie

Hosting Guru
Kalo sekedar datalisting dan form database emang cukup pakai IONIC v1, btw kalaupun kekurangan module di IONIC v1, bisa koq pasang module angular atau plain javascript :D
 
Status
Not open for further replies.

Top