Ionic

Apache Cordova
• Framework untuk membungkus skrip
pemrograman web (css, html, js), sehingga
aplikasi dapat dijalankan di banyak jenis
device/OS.
• Instal Cordova
• Cek versi
• Jika gagal
npm cache clear
npm cache verify
npm cache clear --force
 Ionic
• Install Ionic
Jika gagal
• Cek versi
• Jika minta update (jalankan 1 cmd)
• Project baru

• Sidemenu merupakan template yg dipilih,

template lainnya ada: tabs, blank, super,
tutorial
• Jalankan aplikasi
• Install Capacitor pada project
Capacitor merupakan sebuah tools yg dapat membuat project ionic mampu menggunakan
komponen-komponen native pada perangkat android/IOS missal akses kamera, telpon dsb
• Jika gagal
npm i @ionic/app-scripts
npm install
npm start
• Ionic serve - -lab
Untuk menampilkan 3 jenis platform: Android,
IOS, Windows Phone
 Struktur Aplikasi
• File src/index.html
File yg pertama kali diakses ketika project
dijalankan.
<ion-app></ion-app>
Tag untuk directive
• Folder src
• File src/app/app.html
Membuat halaman baru
• Install Ext. Cordova Tools di VS Code
• Membuat Item Menu
Merupakan class yg diimport utk membuat
controller halaman

Letak file controller yg bearti di dalam folder contact

yg diberi nama contact.ts.
Gunakan pemisah – jika nama file/folder terdiri dari
2 kata
Judul menu
• Membuat Folder Halaman (manual)
• Buat file controller (contact.ts)
• Mendaftarkan ke Module
• Membuat template halaman (contact.html)
• Membuat file style halaman (contact.scss)
• Generate halaman dengan CLI

Atur controller dan html seperti halaman

contact
• Mengatur halaman awal aplikasi