Pada dunia pengembangan aplikasi mobile yang terus berkembang, naiknya aplikasi Web Progressif (PWAs) telah membuka jalan bagi runtime berbasis multi-platform baru. Runtime ini memungkinkan aplikasi berbasis web untuk hadir di toko aplikasi tanpa bergantung sepenuhnya pada code. Salah satu teknologi yang memfasilitasi hal ini adalah CapacitorJS, yang memungkinkan pengembang untuk mengembangkan sebuah situs web sederhana sebagai aplikasi di Android, iOS, dan web menggunakan satu kode JavaScript. Pendekatan ini secara signifikan mengurangi biaya pengembangan dan meningkatkan efisiensi coding.
Panduan ini akan fokus pada membuat aplikasi menggunakan JavaScript murni tanpa menggunakan framework tambahan. Meskipun tantangan menemukan sumber daya untuk pengembangan aplikasi JavaScript murni pada tahun 2021, kami disini untuk memberikan tutorial komprehensif tentang membuat aplikasi dan menggunakan plugin native dengan CapacitorJS.
‣ Prasyarat
Sebelum kita memulai, pastikan Anda telah menginstal tools berikut:
- Node.js (v14.16.1) atau lebih tinggi
- NPM (v7.6.2) atau lebih tinggi
- Studio Android untuk pengembangan aplikasi Android
- Xcode untuk pengembangan aplikasi iOS (hanya macOS)
Catatan: Pengembangan aplikasi iOS hanya dapat dilakukan pada perangkat macOS.
‣ Mengatur Proyek Capacitor Anda
Untuk membuat aplikasi Capacitor, navigasikan ke folder yang diinginkan dan jalankan perintah berikut di terminal Anda:
npm init @capacitor/appIkuti prompt untuk menginstal paket dan mengatur proyek Anda. Dengan Capacitor v3, direktori proyek Anda seharusnya terlihat seperti ini:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdDengan setup awal selesai, Anda siap untuk melanjutkan.
‣ Restructuring Proyek
Akan kita menggunakan Vite untuk mengemas file JavaScript kita, jadi mari kita restruktur proyek kita sesuai dengan itu:
- Buat folder baru
srcdi direktori utama. - Buat file skrip baru
index.jsdisrc/. - Buat konfigurasi Vite file
vite.config.jsdi direktori utama. - Hapus the
capacitor-welcome.jsfile dariwww/js/.
Struktur folder Anda seharusnya menyerupai ini:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Mengadaptasi ke JavaScript Murni
Biarkan kita memodifikasi beberapa file untuk bekerja dengan JavaScript murni:
www/index.html
- Hapus import skrip 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 elemen
<capacitor-welcome>HTML dari bagian tubuh. -
Perbarui import skrip dari
capacitor.jskejs/main.js. File JavaScript ini akan kami bundel. -
Hapus
js/capacitor-welcome.jsImport. Sekarang Anda siap.index.htmlvite.config.js
Untuk menggabungkan modul Node.js kami dengan
Vite , kami memerlukan sebuah file konfigurasi yang menentukan lokasi output untuk skrip kami yang dibundel. Konfigurasi berikut akan mengambil file dan menggabungkannya untuk produksi sebagai src/index.js __CAPGO_KEEP_0__.config.json 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
file, cari capacitor.config.json file, locate the "bundledWebRuntime": true properti dan ubahlah menjadi false. Perubahan ini memastikan bahwa Capacitor tidak menggabungkan file, sehingga kita dapat menggunakan Vite untuk tujuan tersebut.
Dengan perubahan-perubahan ini, konfigurasi dasar aplikasi Capacitor Anda sudah selesai, dan Anda siap untuk memulai mengembangkan aplikasi Anda dengan JavaScript murni.
‣ Mengembangkan Aplikasi
Sekarang bahwa dasar-dasar sudah dipasang, Anda dapat memulai menulis logika aplikasi Anda di src/index.js Sini, Anda dapat mengimport modul Node.js yang diperlukan, mendefinisikan fungsi aplikasi Anda, dan berinteraksi dengan plugin-plugin native Capacitor.
Hati-hati untuk menjalankan perintah build Vite untuk menggabungkan file JavaScript Anda setiap kali Anda membuat perubahan:
vite buildPerintah ini akan menghasilkan main.js file di direktori www/js yang akan digunakan oleh index.html ‣ Pengujian dan Debugging
‣ Pengembangan Aplikasi Anda
Capacitor menyediakan cara yang nyaman untuk menguji aplikasi Anda di berbagai platform. Gunakan perintah-perintah berikut untuk membuka aplikasi Anda di lingkungan pengembangan platform masing-masing:
For Android:
npx cap add android
npx cap open androidFor iOS (macOS hanya):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap servePerintah-perintah ini akan memungkinkan Anda menjalankan aplikasi Anda di Android Studio, Xcode, atau browser web, di mana Anda dapat menguji dan memperbaiki sesuai kebutuhan.
‣ Kesimpulan
Mengembangkan aplikasi cross-platform dengan CapacitorJS menggunakan JavaScript murni adalah cara yang efektif dan efisien untuk membuat aplikasi untuk berbagai platform dengan satu basis kode. Dengan mengikuti panduan ini, Anda telah mengatur proyek Anda, merestrukturinya untuk Vite, dan mempersiapkan aplikasi Anda untuk pengembangan. Dengan dasar ini, Anda sudah siap untuk membangun aplikasi yang kuat dan fleksibel.
Jangan lupa untuk menguji secara menyeluruh di semua platform dan manfaatkan plugin-plugin native Capacitor untuk meningkatkan fungsi aplikasi Anda. Selamat berkode!
Teruskan dari Mengembangkan Aplikasi Cross-Platform dengan CapacitorJS: Panduan Langkah demi Langkah
Jika Anda menggunakan Mengembangkan Aplikasi Cross-Platform dengan CapacitorJS: Panduan Langkah demi Langkah untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.
