Boleh rujuk bantuan di https://ionicframework.com/getting-started . Kenapa IONIC framework? Pembangunan menggunakan IONIC – berbilang platform, kerangka sumber terbuka, kod lebih mudah berasaskan HTML
![Pembangunan menggunakan IONIC - berbilang platform, kerangka sumber terbuka, kod lebih mudah berasaskan HTML](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Top-Reasons-Pick-Ionic-Framework-App-Development-1024x429.jpg)
Pertamanya pasang dahulu NodeJS dari https://nodejs.org/en/download/ – NodeJS merupakan pengkompil JavaScript – runtime built.
Selepas install NodeJS – pastikan PATH ke npm (NodeJS package manager) ditujukan pada folder di mana NodeJS dipasang. Biasanya di C:\Program Files\nodejs – sila gunakan Edit Environment Variables untuk setting PATH.
![Edit enviroment variables Windows10](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Windows10-environment-variables-1024x683.png)
Kemudian tambah PATH
![Tambah path ke NodeJS](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Windows10-add-path-to-environment-variables.png)
Dengan menggunakan CMD atau PowerShell (CLI – command line interface) kita akan install ionic dan bina apps baharu. Sebaiknya pilih untuk Run as Administrator.
![Windows10 guna powershell untuk install ionic](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Windows10-guna-powershell-untuk-install-ionic-1-1024x843.png)
Seterusnya dengan menulis cli Ionic dalam Powershell, taipkan npm install -g ionic. -g merujuk kepada global.
npm install -g ionic
![npm install ionic](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/npm-install-ionic.png)
Selepas berjaya pasang ionic, ikuti langkah seterusnya untuk pasang projek Ionic yang baharu. Di sini penulis menggunakan direktori D://ionic untuk dijadikan workspace projek-projek Ionic.
![Ionic -contoh pilihan jenis navigasi apps](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/ionic-start-mynewapp-1024x315.png)
ionic start mynewapp tabs
![Ionic start mynewapp choose Angular JavaScript framework](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/ionic-start-mynewapp-choose-angular.png)
![ionic start mynewapp choose angular downloading components](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/ionic-start-mynewapp-choose-angular-downloading-components.png)
![Selesai pasang projek ionic baharu](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Selesai-pasang-projek-ionic-baharu.png)
Sekarang boleh gunakan kod editor pilihan anda (seperti Sublime) untuk mengedit kod projek Ionic anda.
![Paparan kod projek Ionic pada sublime](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Ionic-projek-folder-in-Sublime-1024x635.png)
Satu lagi keperluan adalah untuk pasang Apache Cordova. Apache Cordova membolehkan pembangun membina aplikasi mobile menggunakan CSS , HTML & Javascript yang bersifat berbilang platform, tidak hanya terhad kepada aplikasi mobile spesifik kepada Android atau iOS.
![Apache Cordova membolehkan pembangun membina aplikasi mobile menggunakan CSS , HTML & Javascript yang bersifat berbilang platform](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/cordova_bot.png)
npm install -g cordova
![npm install -g cordova](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/npm-install-g-cordova.png)
Untuk menjalankan server ionic, untuk tujuan uji antaramuka, sila laksanakan ionic serve.
ionic serve
![ionic serve](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/ionic-serve.png)
Kemudian paparan applikasi mobile Ionic yang baharu dibina tadi akan dikeluarkan pada browser.
![paparan ionic dalam browser chrome inspection CTRL SHIFT I](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/paparan-ionic-dalam-browser-chrome-inspection-CTRL-SHIFT-I.png)
Sekiranya berminat untuk menguji paparan Ionic pada phone, sila pasang apps IONIC DEVAPP pada telefon Android anda. Pastikan laptop/PC berada dalam network yang sama supaya apps mobile Ionic Devapp boleh memaparkan projek anda pada laptop.
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2019/09/Ionic-Devapp-from-Google-Playstore.png)
Syarat tambahan untuk menggunakan IONIC DEVAPP
+ run ionic serve –devapp
+ pastikan phone dan laptop dalam network WIFI yang sama
Penulis adalah pensyarah di Jabatan Sains Komputer, FSTM KUIS. Khirulnizam telah menjadi pengajar/trainer Programming semenjak 1999. Bermula dengan C, Java, Visual Basic, PHP & MySQL. Sekarang lebih berminat dengan MVC framework (masa depan pengaturcaraan) seperti Android Studio, Bootstrap, Laravel, dan IONIC. Bermula 2020 beliau akan fokus dengan IONIC sebagai mobile frontend dan Laravel sebagai backend. Hubungi kami di fstm.wasap.my
Untuk training pertama kalinya, kod dan nota ada di GITHUB –
https://github.com/khirulnizam/todoapp