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 berfokus pada membuat aplikasi menggunakan JavaScript murni tanpa menggunakan framework tambahan. Meskipun tantangan dalam menemukan sumber daya untuk pengembangan aplikasi JavaScript murni pada tahun 2021, kami di sini untuk memberikan panduan komprehensif tentang membuat aplikasi dan menggunakan plugin native dengan CapacitorJS.
‣ Persyaratan
Sebelum kita mulai, 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)
CatatanPengembangan aplikasi iOS hanya dapat dilakukan pada perangkat macOS.
‣ Mengatur Proyek Anda Capacitor
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.mdSetelah setup awal selesai, Anda siap untuk melanjutkan.
‣ Restruktur Proyek
Kita akan menggunakan Vite untuk mengemas file JavaScript, jadi mari kita restruktur proyek kita sesuai:
- Buat folder baru
srcdi direktori utama. - Buat file skrip baru
index.jsdisrc/. - Buat Konfigurasi Vite file
vite.config.jsdi direktori utama. - Hapus file dari
capacitor-welcome.jsStruktur folder baru Anda seharusnya menyerupai:www/js/.
‣ Mengadaptasi ke JavaScript Murni
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.jsMari kita modifikasi beberapa file untuk bekerja dengan JavaScript murni:
www/index.html
Hapus impor skrip untuk
- Remove the script imports for 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 bagian tubuh.
<capacitor-welcome>Update import skrip dari -
ke
capacitor.js. Ini akan menjadi file JavaScript kami yang dikompilasi.js/main.jsHapus -
import. Aplikasi
js/capacitor-welcome.jsAnda siap digunakan.index.htmlvite.config.js
Untuk mengompilasi modul Node.js kami dengan
Untuk mengompilasi modul Node.js kami dengan ViteKita memerlukan sebuah file konfigurasi yang menentukan lokasi output untuk skrip yang telah dibundel. Konfigurasi berikut akan mengambil file tersebut dan membundelnya 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')
}
}
}
});Dalam file tersebut, carilah properti dan ubahlah menjadi . Perubahan ini memastikan bahwa capacitor tidak membundel file-file tersebut, sehingga kita dapat menggunakan Vite untuk tujuan tersebut.
Dengan perubahan-perubahan ini, konfigurasi dasar aplikasi __CAPGO_KEEP_0__ Anda sudah lengkap, dan Anda siap untuk memulai mengembangkan aplikasi Anda dengan JavaScript murni. capacitor.config.json ‣ Mengembangkan Aplikasi Anda "bundledWebRuntime": true Sekarang bahwa dasar telah dibangun, 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__. false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.
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
‣ Mengembangkan Aplikasi Anda 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 dalam direktori Anda, yang akan digunakan oleh www/js untuk mengaksesnya. 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 (hanya macOS):
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 sesuai kebutuhan.
npx cap serve‣ Kesimpulan
protectedTokens
Membangun aplikasi lintas platform dengan menggunakan CapacitorJS menggunakan JavaScript murni adalah cara yang efektif dan efisien untuk membuat aplikasi untuk beberapa platform dengan satu basis kode.
Remember to test thoroughly on all platforms and make use of Capacitor’s native plugins to enhance your app’s functionality. Happy coding!
