Memulai Projek dengan Ionic dan Capacitor

Ionic Framework merupakan framework mobile app open-source untuk pengembangan aplikasi mobile menggunakan teknologi web dan progressive web app sedangkan Capacitor adalah cross-platform mobile native runtime yang memungkinkan untuk menkonversi web dapat berjalan secara native di Android dan iOS.

Dulunya dikenal dengan istilah Hybrid App, namun saat ini lebih dikenal dengan istilah Web Native Apps. Capacitor ini menyediakan native container untuk dapat mengakses native SDK menggunakan sejumlah plugin open-source yang dapat berjalan di Android, iOS dan Web.

Instal Ionic CLI

Pertama sekali, pastikan Node.js telah terinstal. Kemudian, install Ionic CLI dengan NPM seperti berikut:

npm install -g @ionic/cli

Jika sebelumnya Anda telah menginstal Ionic, silakan terlebih dahulu uninstall dan install kembali seperti berikut:

npm uninstall -g ionic
npm install -g @ionic/cli

-g di atas artinya global. Jika terjadi permission error, silakan lihat Permission Error lebih lanjut.

Memulai Aplikasi (via CLI)

Cara paling mudah memulai Ionic adalah menggunakan template bawaannya. Ionic menyediakan 3 template yang dapat Anda gunakan sebagai starter template, yaitu: blank, tabs dan sidemenu. Menggunakan perintah berikut:

ionic start myApp tabs

ionic: prefix dari Ionic CLI (Command Line Interface)
start: untuk memulai projek dengan Ionic
myApp: nama dari aplikasi Anda, boleh string apa saja tanpa spasi
tabs: salah satu pilihan template starter

Perintah di atas akan menghasilkan berikut:

Pilih salah satu framework JavaScript yang Anda kuasai, saya prefer Angular. Gunakan kursor atas-bawah di keyboard untuk memilih, lalu enter. Untuk bypass pilihan ini, Anda dapat memulai project dengan propery --type.

ionic start myApp tabs --type=angular

Gambaran template starter Ionic adalah seperti di bawah ini:

Untuk melihat semua template Ionic yang tersedia, bisa dilihat dengan perintah berikut:

ionic start --list

Menjalankan Aplikasi di Browser

Untuk dapat menjalankan aplikasi di browser menggunakan perintah berikut:

cd myApp
ionic serve

Anda akan melihat aplikasi tersebut berjalan di browser dengan alamat http://localhost:8100. Untuk menjalankan aplikasi Ionic di browser dengan tampilan Android & iOS sekaligus, Anda bisa menggunakan perintah:

ionic serve --lab

Nah, di atas tersebut adalah cara memulai aplikasi Ionic menggunakan CLI. Ionic juga menyediakan metode lain untuk memulai projek, yaitu dengan wizard.

Memulai Aplikasi (via Wizard)

Untuk memulai aplikasi Ionic melalui wizard UI silakan klik disini. Dari wizard ini, Anda dapat menentukan nama aplikasi, icon, warna tema, pilih template dan pilih framework.

Langkah berikutnya adalah Anda dapat mengkoneksikan projek Ionic tersebut ke Github/Gitlab/Bitbucket dan menggunakan Dashboard Ionic untuk build, deploy dan preview.

Menggunakan Capacitor

Capacitor tidak hanya dapat digunakan dengan Ionic, namun juga dengan web app lainnya. Untuk menginstal Capacitor dengan Ionic sebagai berikut:

Projek Baru

Memulai projek Ionic beserta Capacitor adalah sebagai berikut:

ionic start myApp tabs --capacitor
cd myApp

Existing Ionic Project

Sedangkan jika Anda sebelumnya telah memulai projek Ionic, lalu Capacitor dapat diinstall sebagai berikut:

cd myApp
ionic integrations enable capacitor

Inisial Capacitor dengan Aplikasi

npx cap init [appName] [appId]

appName: nama aplikasi
appId: domain identifier dari aplikasi Anda (misal: com.mirzailhami.app)

Build Aplikasi Ionic

Anda harus build aplikasi Ionic (minimal satu kali) untuk dapat menambahkan platform native Android atau iOS.

ionic build

Perintah diatas menghasilkan folder www sesuai konfigurasi webDir di file capacitor.config.json.

Tambahkan Platform

Untuk menambahkan platform Android dan/atau iOS melalui perintah berikut:

npx cap add ios
npx cap add android

Perintah diatas akan menghasilkan folder Android dan iOS yang nantinya keduanya bisa Anda gunakan dengan Android Studio dan Xcode.

Note: platform iOS hanya dapat dibuild menggunakan MacOS

Build, Run dan Deploy via IDE

Setelah menambahkan platform, berikutnya adalah menjalankan projek tersebut di emulator Android dan iOS via IDE menggunakan perintah:

npx cap open ios
npx cap open android

Perintah di atas akan menjalankan Android Studio dan Xcode dikomputer Anda. Tentu, pastikan Android Studio dan Xcode telah terinstal sebelumnya. Gunakan IDE tersebut untuk menjalankan aplikasi di emulator Android dan iOS.

Sinkronisasi App dengan Capacitor

Setiap kali Anda membuat perubahan melalui perintah ionic build yang tentunya mengubah direktori web Anda (defaultnya www), Anda perlu melakukan copy folder tersebut ke projek native Android dan iOS:

npx cap copy

Menggunakan Plugin Cordova dan Ionic Native

Anda dapat menggunakan plugin Cordova dan Ionic Native di Capacitor. Silakan cek Cordova Plugins untuk informasi lebih lanjut. Anda juga dapat menggunakan Capacitor Plugins. Plugin-plugin native tersebut dapat Anda gunakan diaplikasi misalnya untuk mengakses Kamera, Haptics, Push Notification dan banyak lagi fitur-fitur native lainnnya.

Demikian untuk memulai projek Ionic dengan Capacitor.