In dunia pengembangan aplikasi mobile yang terus berkembang, munculnya Aplikasi Web Progresif (PWAs) telah membuka jalan bagi runtime-platform baru. Runtime ini memungkinkan aplikasi berbasis web untuk hadir di toko aplikasi tanpa bergantung sepenuhnya pada native code. CapacitorJS, yang memungkinkan para 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.
Guida 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 mulai, pastikan Anda telah menginstal tools berikut:
- Node.js (v14.16.1) atau lebih tinggi
- NPM (v7.6.2) atau lebih tinggi
- Sistem Pengembang 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/appPilih opsi 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.mdSetelah setup awal selesai, Anda siap untuk melanjutkan.
‣ Restructuring Proyek
Kita akan menggunakan Vite untuk mengemas file JavaScript, jadi mari kita restruktur proyek kita:
- Buat folder baru
srcdalam direktori utama. - Buat file skrip baru
index.jsdalamsrc/. - Buat konfigurasi Vite file
vite.config.jsdalam direktori utama. - Hapus file dari
capacitor-welcome.jsStruktur folder Anda seharusnya menyerupai ini:www/js/.
__CAPGO_KEEP_0__
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
Ubah beberapa file untuk berfungsi dengan JavaScript murni:
www/index.html
- Hapus import skrip untuk Elemen PWA Ionic 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. -
Ubah import skrip dari
capacitor.jskejs/main.jscontext: Halaman/area: Halaman produk live update. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To). -
. Ini akan menjadi file JavaScript yang dibundel.
js/capacitor-welcome.jsimport. Anda siap.index.htmlis now ready.
vite.config.js
Untuk mengemas modul Node.js kita dengan Vite, kita memerlukan sebuah file konfigurasi yang menentukan lokasi output untuk skrip yang dikemas kita. Konfigurasi berikut akan mengambil file src/index.js dan mengemasnya 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
Dalam file capacitor.config.json file konfigurasi ini, cari property "bundledWebRuntime": true dan ubahnya menjadi false. Penyesuaian ini memastikan bahwa Capacitor tidak mengemas file-file, sehingga kita dapat menggunakan Vite untuk tujuan tersebut.
With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.
‣ Mengembangkan Aplikasi Anda
Sekarang bahwa dasar telah ditata, Anda dapat mulai menulis logika aplikasi Anda di src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.
Aplikasi Anda.
vite buildHatuhkan untuk menjalankan perintah build Vite untuk menggabungkan file-file JavaScript Anda setiap kali Anda membuat perubahan: main.js Perintah ini akan menghasilkan www/js di direktori Anda, yang akan disebut oleh index.html Hatuhkan untuk menjalankan perintah build Vite untuk menggabungkan file-file JavaScript Anda setiap kali Anda membuat perubahan:
Perintah ini akan menghasilkan
Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:
Hatuhkan untuk menjalankan perintah build Vite untuk menggabungkan file-file JavaScript Anda setiap kali Anda membuat perubahan: Perintah ini akan menghasilkan file di direktori Anda, yang akan disebut oleh file Anda.‣ Pengujian dan Debugging Aplikasi Anda dapat diuji dengan mudah di berbagai platform. Gunakan perintah-perintah berikut untuk membuka aplikasi Anda di lingkungan pengembangan platform masing-masing: Untuk Android:
npx cap add android
npx cap open androidUntuk iOS (macOS hanya):
npx cap add ios
npx cap open iosUntuk Web/PWA:
npx cap servePerintah-perintah ini akan memungkinkan Anda menjalankan aplikasi di Android Studio, Xcode, atau browser web, di mana Anda dapat melakukan pengujian dan debug sesuai kebutuhan.
‣ Kesimpulan
Membangun aplikasi lintas platform dengan menggunakan CapacitorJS dan 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, merestrukturinya untuk Vite, dan mempersiapkan aplikasi untuk pengembangan. Dengan dasar ini, Anda sudah siap untuk membangun aplikasi yang kuat dan fleksibel.
Jangan lupa untuk melakukan pengujian secara menyeluruh di semua platform dan manfaatkan plugin-plugin native Capacitor untuk meningkatkan fungsi aplikasi. Selamat berkode!
Teruskan dari Membangun Aplikasi Lintas Platform dengan CapacitorJS: Panduan Langkah-demi-Langkah
Jika Anda menggunakan Membangun Aplikasi Lintas 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-plugin oleh Capgo untuk detail implementasi di Capacitor Plugin-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 Build Nativ untuk alur kerja produk di Capgo Build Nativ.
