Dalam dunia pengembangan aplikasi mobile yang terus berkembang, naiknya aplikasi web progresif (PWA) telah membuka jalan bagi runtime berbasis multi-platform baru. Runtime ini memungkinkan aplikasi berbasis web untuk hadir di toko aplikasi tanpa bergantung sepenuhnya pada aplikasi native 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 kode JavaScript tunggal. Pendekatan ini secara signifikan mengurangi biaya pengembangan dan meningkatkan efisiensi pengkodean.
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 di sini untuk memberikan tutorial komprehensif tentang membuat aplikasi dan menggunakan plugin native dengan CapacitorJS.
‣ Persyaratan
Sebelum kita memulai, pastikan Anda telah menginstal alat-alat 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 (hanya macOS)
Catatan: Pengembangan aplikasi iOS hanya dapat dilakukan pada perangkat macOS.
‣ Mengatur Proyek Anda Capacitor
Membuat sebuah aplikasi Capacitor memerlukan langkah-langkah sebagai berikut: navigasikan ke folder yang diinginkan dan jalankan perintah berikut di terminal Anda:
npm init @capacitor/appIkuti instruksi 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.
‣ Restruktur Proyek
Kita akan menggunakan Vite untuk mengompilasi file JavaScript, jadi mari kita restruktur proyek kita sesuai dengan kebutuhan:
- Buat folder baru
srcdi direktori utama. - Buat file skrip baru
index.jsdisrc/. - Buat Konfigurasi Vite file
vite.config.jsdi direktori utama. - Hapus file
capacitor-welcome.jsdariwww/js/.
Struktur folder baru Anda seharusnya menyerupai:
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
Mari kita modifikasi beberapa file untuk bekerja dengan JavaScript murni:
www/index.html
- Hapus impor skrip 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 HTML dari body.
<capacitor-welcome>Ubah import skrip dari -
ke
capacitor.js. Ini akan menjadi file JavaScript yang dibundel.js/main.jsHapus import. -
Aplikasi
js/capacitor-welcome.jsAnda sekarang siap.index.htmlvite.config.js
Untuk membundel modul Node.js kita dengan
To bundle our Node.js modules with ViteKita memerlukan sebuah file konfigurasi yang menentukan lokasi output untuk skrip yang dibundel. Konfigurasi berikut ini akan mengambil file src/index.js dan mengompilasinya 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 lokasi properti dan ubahlah menjadi "bundledWebRuntime": true . Perubahan ini memastikan bahwa __CAPGO_KEEP_0__ tidak mengompilasikan file-file tersebut, sehingga kita dapat menggunakan Vite untuk tujuan tersebut. falseDengan perubahan-perubahan ini, pengaturan dasar aplikasi Capacitor Anda sudah lengkap, dan Anda siap untuk memulai mengembangkan aplikasi Anda dengan JavaScript murni.
With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.
Sekarang bahwa dasar-dasar sudah tercipta, Anda dapat memulai menulis logika aplikasi Anda di file
. Di sini, Anda dapat mengimport modul Node.js yang diperlukan, mendefinisikan fungsi aplikasi Anda, dan berinteraksi dengan plugin-plugin native __CAPGO_KEEP_0__. 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.
Ingatlah untuk menjalankan perintah pembangunan Vite untuk mengemas file JavaScript Anda setiap kali Anda membuat perubahan:
vite buildPerintah ini akan menghasilkan main.js file di direktori Anda, yang file www/js akan merujuk. index.html ‣ Pengujian dan Debugging
__CAPGO_KEEP_0__ 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:
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:
Untuk iOS (macOS hanya):
npx cap add android
npx cap open androidUntuk Web/PWA:
npx cap add ios
npx cap open iosPerintah-perintah ini akan memungkinkan Anda menjalankan aplikasi Anda di Android Studio, Xcode, atau browser web, di mana Anda dapat menguji dan debug jika perlu.
npx cap serve‣ Kesimpulan
__CAPGO_KEEP_0__
Membangun aplikasi lintas platform dengan menggunakan JavaScript murni melalui CapacitorJS 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, meregangkan struktur untuk Vite, dan mempersiapkan aplikasi Anda untuk pengembangan. Dengan dasar ini, Anda sudah siap untuk membangun aplikasi yang kuat dan fleksibel.
Hati-hati untuk melakukan tes secara menyeluruh di semua platform dan manfaatkan Capacitor’s native plugins untuk meningkatkan fungsi aplikasi Anda. 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 oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Perusahaan Ionic untuk alur kerja produk di Alternatif Plugin Perusahaan Ionic, dan Capgo Pembangunan Asli untuk alur kerja produk di Capgo Pembangunan Asli.
