• Pengantar

• Tentang Penulis

Mengenal Ionic

• Apa itu Ionic

• Project Ionic Pertamaku

Project: Tuntas Belajar App - Pengenalan Konsep

• Perencanaan

• Kupas Struktur Aplikasi Ionic Angular

• Mengenal Komponen Ionic

• Mengenal Grid dan tampilan Responsive

• Mengenal Service dan ambil data dengan HttpClient

• Mengenal Routing

Project: Tuntas Belajar App - Pembuatan Pages

• List Tutorial ala Skillshare (Coming Soon)

• Youtube Player (Coming Soon)

• List Pembelajaran (Coming Soon)

• About Page (Coming Soon)

• Contact Me (Coming Soon)

Project: Tuntas Belajar App

Advanced

• Login (Coming Soon)

• Admin untuk baca Contact (Coming Soon)

• Push Notification (Coming Soon)

Upload Aplikasi untuk Publik

• Upload ke Google Play Store (Coming Soon)

• Otomatisasi Upload ke Google Play Store (Coming Soon)

• Upload ke Apple App Store (Coming Soon)

• Otomatisasi Upload ke Apple App Store (Coming Soon)

• Upload ke Huawei App Gallery (Coming Soon)

Qualitas Aplikasi dan Coding

• ngLint (Coming Soon)

• Karma (Coming Soon)

• Protractor (Coming Soon)

• Sonarqube (Coming Soon)

• Codecov (Coming Soon)

Atau navigasi kebawah untuk lihat versi Text

Menurut website resminya:

Ionic’s open source Framework and developer-friendly tools and services power apps for some of the world’s best-known brands

Kita ambil 3 Kata Benda yang digunakan oleh Ionic:

• Framework
• Tools
• Services

• Framework: Library dan UI Komponen untuk membuat Aplikasi
• Tools: Penunjang penggunaan seperti Ionic CLI, Stencil, Capacitor, Ionic Native
• Services: Online Service (Ionic Appflow/Cloud)

Framework Ionic

Bersifat Framework Agnostic sehingga bisa digunakan dengan Framework apa saja (Angular, React Vue) atau dengan Vanilla Javascript.

Konsep Framework

• @ionic/core –> UI Components
• @ionic/angular
• @ionic/react
• @ionic/vue

Tools

• Ionic CLI: Untuk installasi dan jalankan Toolchain
• Stencil: Untuk membuat web component native
• Capacitor: Evolusi dari Cordova
• Ionic Native: Plugin-plugin Cordova/Capacitor untuk akses Fitur Native

Services

Ionic Appflow (dulunya Ionic Cloud) merupakan kumpulan Tools berbayar untuk membantu development Ionic. Beberapa Fiturnya:

• Authentikasi
• Automated Build
• Hot Push

Atau navigasi kebawah untuk lihat versi Text

Persiapan

Hal minimal yang dibutuhkan adalah Node JS dan sebuah IDE (Saya merekomendasikan VS Code)

Pro Trip: Gunakan NVM

Memulai Project

## Cara yang direkommendasikan Ionic
npm install -g @ionic/cli
ionic start myApp tabs

## Cara yang saya rekomendasikan
npx --package @ionic/cli ionic start myApp tabs
atau
npx -p @ionic/cli ionic start myApp tabs

Run Project di Lokal

npx -p @ionic/cli ionic serve

## atau install @ionic/cli sebagai dev dependency
## agar npx tidak selalu menginstall
npm install -E -D @ionic/cli

## lalu jika ingin menjalankan cukup
npx ionic serve

## atau gunakan script npm
npm run start

Struktur Project

Hasil yang ditampilkan (Browser)

Hasil yang ditampilkan (Mobile)

Atau navigasi kebawah untuk lihat versi Text

Failing to Plan is Planning to Fail

Gagal berencana adalah berencana untuk Gagal

Sebelum Coding

Hal terpenting sebelum mulai coding adalah perencanaan.

Design

Banyak Tools yang bisa digunakan untuk Design. Figma dan XD adalah dua Tools yang sangat digemari sekarang. Setidaknya buatlah Mood Board agar tahu arah Aplikasinya akan kemana.

Project Management

Pekerjaan perlu di pecah menjadi beberapa bagian. Biasanya saya menggunakan Trello tetapi Github dan Gitlab menawarkan Project Management sederhana yang terintegrasi dengan website mereka sehingga tidak memerlukan sistem lain.

Atau navigasi kebawah untuk lihat versi Text

package.json

Dikarenakan ini project Nodejs maka sudah pasti ada file package.json dan package-lock.json untuk mengatur daftar scripts dan dependencies dari npm yang perlu diinstall untuk menjalankan project ionic kita.

Apa yang terjadi saat project di Run?

Dikarenakan kita menggunakan Angular para Project ini, maka saat memanggil script untuk menserve dia sebetulnya menjalankan perintah angular. Dimana Angular akan mengcompile dan membuat beberapa chunk dan menjalankan sebuah Web Server di localhost untuk melihat hasilnya di Browser.

tslint.json

Berisi rules linting dari Typescript.

tsconfig.json

Ini adalah configurasi dari typescript compiler kita. Contoh setupnya seperti apa target bahasanya misalnya es2015, informasi kemana hasil compiling akan diletakkan dan lainnya.

karma.conf.json

Ini configurasi Karma runner yang digunakan saat melakukan Unit Testing dengan Karma.

ionic.config.json

Digunakan untuk setup Ionicnya. Jika kita menggunakan beberapa fitur Ionic di Cloud (App flow) maka configurasinya akan diletakkan disini juga.

browserslist

Untuk mencatat daftar target browser saat Angular membuild Project ini.

angular.json

Configurasi Angular dari mulai nama Project, jenis-jenis isi di Projectnya, dll.

.gitignore

Untuk configurasi file-file apa yang tidak perlu masuk ke Git. Dari Ionic sudah dibantu dengan isian dari default template mereka seperti node_modules dan build folder tidak usah masuk Git.

Folder e2e

Digunakan untuk seluruh Configurasi dan Script End-To-End Test. Lebih detil nanti

Folder node_modules

Seluruh dependency dari package.json didownload dan di build disini. Folder ini besar dan sengaja tidak dimasukkan ke Git.

Folder src

Berisi seluruh coding aplikasi kita. Disinilah sebagian besar development terjadi.

src/zone-flags.ts

File ini untuk mengatur change detection pada aplikasi Angular

src/test.ts

File Test untuk Unit Testing. Ini yang akan dijalankan oleh Karma nanti.

src/pollyfills.ts

Agar aplikasi kita dapat tetap berjalan pada jenis browser-browser yang lama maka file ini akan mengakali beberapa library agar tetap bisa digunakan. Tapi tetap saran saya sih user agar menggunakan browser jenis terbaru.

src/main.ts

Ini adalah file root dari Angular yang akan meenjalankan seluruh aplikasi Angularnya.

src/index.html

Ini adalah file pertama yang akan dijalankan oleh Browser. Dan Angular akan menginject diri ke file ini sehingga aplikasinya bisa berjalan.

src/global.scss

File ini mengatur styling css dari seluruh aplikasi. Jika ada library external yang mau dimasukkan secara global maka pastinya perlu dimasukkan kesini.

src/theme/variable.scss

Variabel untuk mengcustomisasi styling biasanya diletakkan disini.

src/environments

File-file disini digunakan untuk setting/parameter tambahan saat menjalankan Angular. Biasanya digunakan untuk membedakan url server production dan development atau flag-flag lainnya.

src/assets

File-file seperti gambar, fonts, json, file untuk bahasa dan dokument diletakkan disini karena tidak perlu dicompile dan hanya dipanggil saja.

src/app/app.module.ts

File main.ts akan memanggil file ini untuk memulai menginisasi module-module yang akan digunakan. Lalu apakah entry component (komponen pertama yang akan dipanggil) juga di konfigurasi disini.

src/app/app.component.ts

Ini umumnya adalah Komponen pertama yang dipanggil. Sehingga biasanya script-script inisiasi Aplikasi ada disini.

Template Component

Umumnya sebuah komponen akan menampilkan html. Ini disebut template. Template dapat ditulisan di dalam file .ts si Komponen atau menggunakan templateUrl diarahkan ke file html yang akan menjadi templatenya.

Styling component

Setiap komponent jika memerlukan Styling maka dapat ditambahkan inlince styling atau styleurls. Dengan beitu sebuah file css/scss terpisah akan dipanggil untuk membantu styling.

Routing Module

Jika Aplikasi kita memiliki banyak page maka setiap Page perlu diarahkan ke URL pada Browser. Ini dilakukan di Routing Module. Setiap Module dapat memiliki Routing Module jadi setiap Module dapat bekerja secara autonom.

Atau navigasi kebawah untuk lihat versi Text

Ionic menyediakan Dokumentasi lengkap untuk semua Komponen

Ionic Components

Setiap Komponen memiliki penjelasan, ada contoh tampilan langsung yang dan contoh implementasi kode yang bisa kita copy paste

Atau navigasi kebawah untuk lihat versi Text

Ionic menyediakan implementasi flexbox untuk membuat layout

Ionic Components

Atau navigasi kebawah untuk lihat versi Text

Karena kita masih ingin Fokus ke Aplikasi kita sendiri tanpa memerlukan Server maka untuk Sumber data akan kita letakkan di file JSON di Folder Assets.

Kita akan menggunakan Angular HttpClient untuk membaca JSON ini dan menggunakan Service File agar seluruh Business Logic terpisah dengan Komponen.

## membuat file service
npx ng generate service shared/api/content

HttpClient digunakan untuk melakukan HTTP Request. Kembalian dari requestnya adalah observable jadi untuk mendapatkan data bisa dengan mensubscribe ke observablenya atau dengan memanfaatkan toPromise() yang tidak disarankan.

Agar dapat memaksimalkan typing dari typescript maka disarankan untuk membuat interface yang mendeskripsikan kembalian dari HTTP Request

## membuat file service
npx ng generate interface shared/api/models/kursus

Apa jadinya jika aplikasi yang dibuat tidak memiliki Routing? Aplikasinya menjadi single view dan tidak dapat mempertahankan state navigasi saat melakukan reload browser.

Ini adalah contoh dengan single state

Dari sisi Angular jauh lebih baik jika menggunakan Router sehingga aplikasi bisa menggunakan berbagai Komponent

Dan jika menggunakan Tabs seperti pada contoh Aplikasi yang sedang dikembangkan maka pastinya menjadi sedikit lebih rumit

Tentunya masing-masing Komponent dapat di Konversi menjadi Module sehingga menggunakan lazy Loading