Panduan Langkah-demi-Langkah Membuat Aplikasi Lintas Platform dengan CapacitorJS

In dunia pengembangan aplikasi mobile yang terus berkembang, munculnya Aplikasi Web Progresif (PWAs) telah membuka jalan bagi runtime-platform baru yang memungkinkan aplikasi berbasis web hadir di toko aplikasi tanpa bergantung sepenuhnya pada native code. CapacitorJSyang memungkinkan para pengembang mengembangkan sebuah situs web sederhana sebagai aplikasi di Android, iOS, dan web menggunakan satu basis kode JavaScript. Pendekatan ini secara signifikan mengurangi biaya pengembangan dan meningkatkan efisiensi pengkodean.

Guide ini akan fokus pada pembuatan aplikasi menggunakan JavaScript murni tanpa menggunakan framework tambahan. Meskipun tantangan menemukan sumber daya untuk pengembangan aplikasi JavaScript murni pada tahun 2021, kami akan memberikan tutorial komprehensif tentang cara membuat aplikasi Anda 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
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 Capacitor Anda

Untuk membuat aplikasi Capacitor, navigasikan ke folder yang diinginkan dan jalankan perintah berikut di terminal Anda:

npm init @capacitor/app

Ikuti 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.md

Dengan setup awal selesai, Anda siap untuk melanjutkan.

‣ Restructuring Proyek

Kita akan menggunakan Vite untuk mengemas file JavaScript kita, jadi mari kita restruktur proyek kita sesuai:

Buat folder baru src dalam direktori utama.
Buat file skrip baru index.js dalam src/.
Buat file konfigurasi Vite vite.config.js dalam direktori utama.
Hapus file dari capacitor-welcome.js Struktur folder Anda seharusnya menyerupai: www/js/.

folder baru di dalam direktori utama.

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 tubuh.
Ubah import skrip dari capacitor.js ke js/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 dibundelkan kita. js/capacitor-welcome.js import. Anda siap. index.html is now ready.

vite.config.js

Untuk mengemas modul Node.js kita dengan Vite, kita memerlukan file konfigurasi yang menentukan lokasi output untuk skrip yang dikemas. 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, cari "bundledWebRuntime": true properti dan ubahnya menjadi false. Penyesuaian ini memastikan bahwa Capacitor tidak mengemas file, sehingga kita dapat menggunakan Vite untuk tujuan tersebut.

Aplikasi Capacitor Anda sudah siap untuk digunakan, dan Anda siap untuk memulai mengembangkan aplikasi Anda dengan JavaScript murni.

‣ Mengembangkan Aplikasi Anda

Sekarang bahwa dasar telah ditata, Anda dapat mulai 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 native Capacitor.

Hatuhkan untuk menjalankan perintah build Vite untuk mengemas file JavaScript Anda setiap kali Anda membuat perubahan:

vite build

Perintah ini akan menghasilkan main.js di direktori Anda, yang akan digunakan oleh www/js yang akan mengacu ke 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:

npx cap add android
npx cap open android

Untuk iOS (macOS hanya):

npx cap add ios
npx cap open ios

Untuk Web/PWA:

npx cap serve

Perintah-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 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 melakukan pengujian secara menyeluruh di semua platform dan manfaatkan plugin-plugin native Capacitor 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-plugin oleh Capgo untuk detail implementasi di Capacitor Plugin-plugin oleh Capgo Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin Alternatif Plugin Bisnis Ionic Enterprise untuk alur kerja produk di Alternatif Plugin Bisnis Ionic Enterprise, dan Capgo Build Nativ untuk alur kerja produk di Capgo Build Nativ.

Membuat Aplikasi Berbasis Multi-Platform dengan CapacitorJS: Panduan Langkah demi Langkah