Dalam dunia pengembangan aplikasi mobile yang terus berkembang, munculnya Progressive Web Applications (PWA) telah membuka jalan bagi runtime cross-platform baru. Runtime ini memungkinkan aplikasi berbasis web hadir di app store tanpa harus bergantung sepenuhnya pada code native. Salah satu teknologi yang memfasilitasi hal ini adalah CapacitorJS, yang memungkinkan developer men-deploy website sederhana sebagai aplikasi di Android, iOS, dan web hanya dengan satu codebase JavaScript. Pendekatan ini secara signifikan mengurangi biaya pengembangan dan meningkatkan efisiensi coding.
Panduan ini akan fokus pada pembuatan aplikasi menggunakan JavaScript murni tanpa framework tambahan. Meski sulit mencari sumber pengembangan aplikasi JavaScript murni di tahun 2021, kami hadir untuk memberikan tutorial lengkap dalam membangun aplikasi Anda dan menggunakan plugin native dengan CapacitorJS.
‣ Prasyarat
Sebelum mulai, pastikan Anda sudah menginstal tools berikut:
- Node.js (v14.16.1) atau lebih tinggi
- NPM (v7.6.2) atau lebih tinggi
- Android Studio untuk pengembangan aplikasi Android
- Xcode untuk pengembangan aplikasi iOS (khusus macOS)
Catatan: pengembangan aplikasi iOS hanya bisa dilakukan di perangkat macOS.
‣ Menyiapkan Proyek Capacitor Anda
Untuk membuat aplikasi Capacitor, buka folder tujuan Anda dan jalankan perintah berikut di terminal:
npm init @capacitor/appIkuti prompt untuk menginstal package dan menyiapkan project Anda. Dengan Capacitor v3, struktur direktori project Anda akan seperti ini:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdSetelah setup awal selesai, Anda siap untuk melanjutkan.
‣ Restrukturisasi Project
Kita akan menggunakan Vite untuk bundle file JavaScript kita, jadi mari kita restrukturisasi project sesuai kebutuhan:
- Buat folder baru
srcdi direktori utama. - Buat file script baru
index.jsdisrc/. - Buat file konfigurasi Vite
vite.config.jsdi direktori utama. - Hapus halaman
capacitor-welcome.jsfile dariwww/js/.
Struktur folder baru Anda akan terlihat seperti ini:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adaptasi ke Pure JavaScript
Mari kita modifikasi beberapa file agar bisa berjalan dengan pure JavaScript:
www/index.html
- Hapus import script untuk Ionic PWA Elements jika Anda tidak merilis aplikasi sebagai PWA:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
Hapus
<capacitor-welcome>elemen HTML dari body. -
Perbarui import script dari
capacitor.jskejs/main.js. Ini akan menjadi file JavaScript bundle kita. -
Hapus
js/capacitor-welcome.jsimport. Sekarang,index.htmlsudah siap.
vite.config.js
Untuk membundle modul Node.js dengan Vite, kita butuh file konfigurasi untuk menentukan tujuan output dari script bundle kita. Konfigurasi berikut akan mengambil file tersebut src/index.js dan membundlenya untuk produksi sebagai www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
Di capacitor.config.json file, cari properti "bundledWebRuntime": true properti dan mengubahnya menjadi false. Penyesuaian ini memastikan Capacitor tidak melakukan bundling file, sehingga kita bisa menggunakan Vite untuk keperluan tersebut.
Dengan perubahan ini, setup dasar aplikasi Capacitor Anda sudah selesai, dan Anda siap mulai mengembangkan aplikasi dengan JavaScript murni.
‣ Mengembangkan Aplikasi Anda
Setelah fondasi siap, Anda bisa mulai menulis logika aplikasi di dalam src/index.js file. Di sini, Anda dapat mengimpor modul Node.js yang diperlukan, menentukan fungsionalitas aplikasi, dan berinteraksi dengan plugin native Capacitor.
Jangan lupa jalankan perintah build Vite untuk mem-bundle file JavaScript Anda setiap kali ada perubahan:
vite buildPerintah ini akan menghasilkan main.js file di dalam www/js direktori, yang akan dirujuk oleh index.html file akan mereferensikan.
‣ Testing dan Debugging
Capacitor menyediakan cara praktis untuk menguji aplikasi Anda di berbagai platform. Gunakan perintah berikut untuk membuka aplikasi Anda di environment development masing-masing platform:
Untuk Android:
npx cap add android
npx cap open androidUntuk iOS (hanya macOS):
npx cap add ios
npx cap open iosUntuk Web/PWA:
npx cap servePerintah ini memungkinkan Anda menjalankan aplikasi di Android Studio, Xcode, atau browser web Anda, lalu melakukan testing dan debugging sesuai kebutuhan.
‣ Kesimpulan
Mengembangkan aplikasi cross-platform dengan CapacitorJS menggunakan JavaScript murni adalah cara yang hemat biaya dan efisien untuk membuat aplikasi untuk berbagai platform dengan satu codebase. Dengan mengikuti panduan ini, Anda telah menyiapkan proyek, menata ulangnya untuk Vite, dan menyiapkan aplikasi untuk pengembangan. Dengan fondasi ini, Anda sudah berada di jalur yang tepat untuk membangun aplikasi yang kuat dan serbaguna.
Jangan lupa uji secara menyeluruh di semua platform dan manfaatkan plugin native dari Capacitor untuk meningkatkan fungsionalitas aplikasi Anda. Happy coding!
Lanjutkan dari Mengembangkan Aplikasi Cross-Platform dengan CapacitorJS: Panduan Langkah demi Langkah
Jika Anda menggunakan Panduan Langkah demi Langkah Mengembangkan Aplikasi Cross-Platform dengan CapacitorJS untuk merencanakan pekerjaan plugin native, hubungkan dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi pada Menambahkan atau Memperbarui Plugin, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di alternatif plugin Ionic Enterprise, dan Capgo Native Build untuk alur kerja produk di Capgo Native Builds.
