Dalam dunia pengembangan aplikasi mobile yang terus berkembang, naiknya Aplikasi Web Progressif (PWAs) telah membuka jalan bagi runtime-platform baru yang dapat digunakan secara lintas platform. Runtimes ini memungkinkan aplikasi berbasis web untuk hadir di toko aplikasi tanpa bergantung sepenuhnya pada native code. Salah satu teknologi yang memfasilitasi hal ini adalah 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 pengkodean.
Panduan ini akan berfokus pada pembuatan aplikasi menggunakan JavaScript murni tanpa menggunakan framework tambahan. Meskipun tantangan dalam mencari sumber daya untuk pengembangan aplikasi JavaScript murni pada tahun 2021, kami disini untuk memberikan tutorial komprehensif tentang pembuatan aplikasi dan penggunaan 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
- 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
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.
‣ 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
capacitor-welcome.jsdariwww/js/.
Struktur folder 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 ubah 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. Ini akan menjadi file JavaScript yang dibundel. -
Hapus
js/capacitor-welcome.jsimport. Andaindex.htmlSekarang sudah siap.
vite.config.js
Untuk menggabungkan modul Node.js kita dengan Vite, kita membutuhkan sebuah file konfigurasi yang menentukan lokasi output untuk skrip yang telah digabungkan. Konfigurasi berikut akan mengambil file src/index.js dan menggabungkannya 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 temukan properti dan ubahnya menjadi "bundledWebRuntime": true . Penyesuaian ini memastikan bahwa __CAPGO_KEEP_0__ tidak menggabungkan file-file, sehingga kita dapat menggunakan Vite untuk tujuan tersebut. falseCapacitor
Dengan perubahan-perubahan ini, aplikasi Capacitor Anda sudah siap untuk memulai pengembangan aplikasi dengan JavaScript murni.
‣ Mengembangkan Aplikasi
Sekarang bahwa dasar sudah terbangun, 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.
plugin native __CAPGO_KEEP_0__.
vite buildJangan lupa menjalankan perintah build Vite untuk mengemas file JavaScript Anda setiap kali Anda membuat perubahan: main.js Perintah ini akan menghasilkan www/js file di direktori index.html yang akan digunakan oleh
file.
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:
__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:
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 di Android Studio, Xcode, atau browser web, di mana Anda dapat menguji dan memperbaiki sesuai kebutuhan.
‣ Kesimpulan
Membangun aplikasi lintas 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, merestrukturinya untuk Vite, dan mempersiapkan aplikasi 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. 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 Plugin Directory untuk alur kerja produk di Capgo Plugin Directory, 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 Perusahaan Ionic untuk alur produk di Alternatif Plugin Perusahaan Ionic, dan Capgo Build Nativ untuk alur produk di Capgo Build Nativ.
