TUTORIAL IONIC : Installasi Ionic (PART 1)

Assalamu'alaikum Wr Wb

1.Pengenalan
Kali ini saya akan membahas IONIC framework, apa itu IONIC?
IONIC adalah suatu framework untuk membuat suatu aplikasi mobile hybrid, menggunakan HTML, CSS, JS (JavaScript) dan menggunakan teknologi CORDOVA. Sebenarnya bukan hanya CORDOVA, ionic juga bisa menggunakan CAPACITOR, hanya saja kalau CAPACITOR ini belum stabil, tidak seperti CORDOVA.

2. Installasi
di tutorial ini kita menginstall ionic v4+ (versi terbaru dari ionic).
Bahan-bahan untuk menggunakan IONIC sebenanya hanya node js, tapi jika teman-teman ingin membuild nya menjadi bentuk apk maka teman-teman membutuhkan:
- node js (saran saya minimal versi 6 dan pilih yang LTS) download disini
- JDK (saran saya minimal versi 8) download disini
- Android Studio (sudah sepaket dengan SDK android jika teman-teman install Android Studio) download disini

jika teman-teman sudah download dan install, maka selanjutnya mengatur environment variable nya, kebetulan di tutorial ini saya menggunakan OS windows 10 maka langkah-langkahnya juga mengatur environment variable di windows.

cara mengaturnya seperti ini:
1. masuk ke windows explorer

























2. klik kanan pada this PC lalu pilih properties
3. klik advenced system settings
4. klik Environment Variable (di atas tombol cancel)
5. Setelah masuk ke pengaturan environment variable, teman-teman membuat variable baru di bagian System variable, dan klik tombol new (di gambar sudah saya kasih tanda)












dengan nama variable ANDROID_HOME valuenya di arahkan ke folder sdk android (anda, jika beda letak foldernya bisa sesuaikan dengan letak folder di PC/laptop teman-teman), kalau saya set seperti ini, jika sudah klik OK.







6. membuat variable baru dengan nama JAVA_HOME dan valuenya di arahkan ke folder Java(anda, jika beda letak foldernya bisa sesuaikan dengan letak folder di PC/laptop teman-teman), kalau saya set seperti ini, jika sudah klik OK.








7. edit pada bagian path (lihat gambar di langkah no 5), dan tambahkan seperti ini























8. Jika sudah, jangan lupa klik OK semua jendela yang terbuka untuk mengatur environment variable lalu restrart PC/laptopnya.
9. selanjutnya kita ke tahap create project ionic, tapi sebelumnya cek dulu node js dan npm nya sudah benar-benar terinstall belum, caranya buka CMD lalu ketikan perintah berikut :
- untuk cek node js ketikan perintah: node -v








- untuk cek npm ketikan perintah: npm -v







10. Create Project Ionic
ketika create project teman-teman harus terhubung ke internet!
langkah-langkah :
a. buat folder di drive mana saja (saran saya jangan di drive C)
b. jika sudah, buka cmd dan arahkan ke folder yang baru dibuat tadi (perhatikan gambar di bawah baik-baik) kalau saya nama foldernya projectIonic terletak di drive D , lalu ketikan perintah berikut : npm install -g ionic cordova








c. tunggu sampai selesai, jika sudah selesai baru kita create project dengan cara mengetikkan perintah berikut : ionic start myApp blank









Sedikit penjelasan dari perintah di atas :
- ionic start
perintah untuk mulai membuat project ionic.
- myApp
nama untuk project ionic yang kita buat.
- blank (macam-macam template ionic blank, tabs, sidemenu)
nama template yang di gunakan.
Karena kita mengetikkan perintahnya seperti di atas, maka kita akan menggunakan angular (default dari ionic) di project kita nanti. Jika sudah selesai teman-teman ketikkan perintah berikut : cd myApp











d. dan kemudian ketikan lagi perintah : ionic serve













e. tunggu sampai selesai, dan nanti akan keluar seperti ini di browser












supaya tampilan browser bisa seperti tampilan mobile, jika menggunakan google chrome teman-teman bisa tekan shortcut ctrl+shift+i

Sekian tutorial dari saya, untuk tutorial berikutnya bisa klik disini. Semoga bermanfa'at :)

Wassalamu'alaikum Wr Wb

Comments

Post a Comment

Popular posts from this blog

PERKEMBANGAN CHIPSET SMARTPHONE 2023

RENCANA KEBERHASILAN SISTEM EBUSSINESS

TUTORIAL IONIC : Pindah Page/Move Page (PART 4)