In un mondo in continua evoluzione di sviluppo di applicazioni mobili, l'ascesa delle Applicazioni Web Progressiste (PWAs) ha aperto la strada a nuovi runtime cross-platform. Questi runtime consentono alle applicazioni basate su web di essere presenti nei negozi di app senza affidarsi esclusivamente a native code. Uno di questi tecnologie che facilita questo è CapacitorJS, che consente ai developer di distribuire un semplice sito web come applicazione su Android, iOS e web utilizzando un unico codice JavaScript. Questo approccio riduce significativamente i costi di sviluppo e aumenta l'efficienza di codifica.
Questa guida si concentrerà sulla creazione di un'applicazione utilizzando solo JavaScript puro senza alcun framework aggiuntivo. Nonostante le sfide di trovare risorse per lo sviluppo di app JavaScript puro nel 2021, siamo qui per fornirle una guida completa per creare la sua applicazione e utilizzare plugin nativi con CapacitorJS.
‣ Prerequisiti
Prima di iniziare, assicurati di avere gli strumenti seguenti installati:
- Node.js (v14.16.1) o superiore
- NPM (v7.6.2) o superiore
- Android Studio per lo sviluppo di applicazioni Android
- Xcode per lo sviluppo di applicazioni iOS (disponibile solo su macOS)
Nota: lo sviluppo di applicazioni iOS è possibile solo su un dispositivo macOS.
‣ Configurazione del tuo progetto Capacitor
Per creare un'applicazione Capacitor, naviga nel folder desiderato e esegui il seguente comando nel tuo terminale:
npm init @capacitor/appSegui le istruzioni per installare il pacchetto e configurare il tuo progetto. Con Capacitor v3, il tuo directory progetto dovrebbe avere questo aspetto:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdCon la configurazione iniziale completata, sei pronto a procedere.
‣ Ricostruzione del progetto
Utilizzeremo Vite per bundle i nostri file JavaScript, quindi riorganizziamo il nostro progetto di conseguenza:
- Crea una nuova cartella
srcnel directory principale. - Crea un nuovo file di script
index.jsinsrc/. - Crea il file di configurazione Vite
vite.config.jsnel directory principale. - Elimina il
capacitor-welcome.jsfile dawww/js/.
La tua struttura di cartelle nuova dovrebbe assomigliare a:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adattarsi a JavaScript puro
Modifichiamo alcuni file per funzionare con il JavaScript puro:
www/index.html
- Elimina gli import di script per Elementi PWA di Ionic se non stai rilasciando l'applicazione come 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>-
Cancella il
<capacitor-welcome>elemento HTML dal corpo. -
Aggiorna l'importo di script da
capacitor.jsajs/main.js. Questo sarà il nostro file JavaScript bundle. -
Elimina il
js/capacitor-welcome.jsimport. Il tuoindex.htmlè ora pronto.
vite.config.js
Per avvolgere i nostri moduli Node.js con Vite, abbiamo bisogno di un file di configurazione che specifica la destinazione di output per il nostro script avvolto. La seguente configurazione prenderà il file src/index.js e lo avvolgerà per la produzione come 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
Nel capacitor.config.json file, individua la "bundledWebRuntime": true proprietà e modificala in false. Questa modifica assicura che Capacitor non avvolga i file, consentendoci di utilizzare Vite per questo scopo invece.
With questi cambiamenti, la configurazione base del tuo Capacitor applicazione è completa, e sei pronto a iniziare a sviluppare la tua app con JavaScript puro.
‣ Sviluppa la tua App
Ora che la base è stata posata, puoi iniziare a scrivere la logica della tua applicazione nel src/index.js file. Qui puoi importare i moduli Node.js necessari, definire la funzionalità della tua app e interagire con i plugin nativi di Capacitor.
Ricorda di eseguire il comando di build di Vite per bundle i file JavaScript ogni volta che apporti modifiche:
vite buildQuesto comando genererà il main.js file nel tuo www/js directory, che il tuo index.html file si riferirà.
‣ Test e Debug
Capacitor fornisce un modo comodo per testare la tua applicazione su vari sistemi operativi. Utilizza i seguenti comandi per aprire la tua app nel rispettivo ambiente di sviluppo:
Per Android:
npx cap add android
npx cap open androidFor iOS (macOS solo):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap serveEcco i comandi che ti permetteranno di eseguire la tua applicazione in Android Studio, Xcode o nel tuo browser web, dove potrai testare e debuggare come necessario.
‣ Conclusion
Sviluppare applicazioni cross-platform con CapacitorJS utilizzando JavaScript puro è un modo efficace e cost-efettivo per creare app per più piattaforme con un unico codice. Seguendo questa guida, hai configurato il tuo progetto, lo hai riorganizzato per Vite e hai preparato l'app per la fase di sviluppo. Con questa base, sei pronto a costruire un'app robusta e versatile.
Non dimenticare di testare accuratamente su tutte le piattaforme e di sfruttare i plugin nativi di Capacitor per migliorare le funzionalità dell'app. Buon codice!
Continua da Sviluppa Applicazioni Cross-Platform con CapacitorJS: Una Guida Passo dopo Passo
Se stai utilizzando Sviluppa Applicazioni Cross-Platform con CapacitorJS: Una Guida Passo dopo Passo per pianificare il lavoro sui plugin nativi, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto in Capgo Directory dei Plugin, Plugin da Capacitor sviluppati da Capgo per i dettagli di implementazione in Plugin da Capacitor sviluppati da Capgo, Aggiunta o Aggiornamento di Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento di Plugin, Alternative per Plugin Enterprise di Ionic per il workflow del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Build Nativi per il workflow del prodotto in Capgo Build Nativi.
