Nel mondo in continua evoluzione dello sviluppo mobile, l'ascesa delle Progressive Web Applications (PWA) ha aperto la strada a nuovi runtime cross-platform. Questi runtime permettono alle web app di essere presenti negli app store senza dipendere solo da code nativi. Una tecnologia che facilita questo processo è CapacitorJS, che consente agli sviluppatori di distribuire un semplice sito web come applicazione su Android, iOS e web usando un unico codebase JavaScript. Questo approccio riduce drasticamente i costi di sviluppo e aumenta l'efficienza del codice.
Questa guida si concentrerà sulla creazione di un'app in puro JavaScript, senza framework aggiuntivi. Nonostante le difficoltà nel trovare risorse per lo sviluppo di app in puro JavaScript nel 2021, siamo qui per fornirti un tutorial completo su come costruire la tua applicazione e utilizzare plugin nativi con CapacitorJS.
‣ Prerequisiti
Prima di iniziare, assicurati di avere installato i seguenti strumenti:
- Node.js (v14.16.1) o superiore
- NPM (v7.6.2) o superiore
- Android Studio per lo sviluppo di app Android
- Xcode per lo sviluppo di app iOS (solo macOS)
Nota: Lo sviluppo di app iOS è possibile solo su un dispositivo macOS.
‣ Configurazione del progetto Capacitor
Per creare un'applicazione Capacitor, vai nella cartella desiderata ed esegui il seguente comando nel terminale:
npm init @capacitor/appSegui i prompt per installare il pacchetto e configurare il progetto. Con Capacitor v3, la directory del progetto dovrebbe apparire così:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdUna volta completata la configurazione iniziale, puoi procedere.
‣ Ristrutturazione del progetto
Useremo Vite per il bundle dei file JavaScript, quindi ristrutturiamo il progetto di conseguenza:
- Crea una nuova cartella
srcnella directory principale. - Crea un nuovo file script
index.jsnellasrc/. - Crea il file di configurazione Vite
vite.config.jsnella directory principale. - Rimuovi la
capacitor-welcome.jsil file dawww/js/.
La nuova struttura delle cartelle dovrebbe essere simile a:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Adattamento a JavaScript puro
Modifichiamo alcuni file per lavorare con JavaScript puro:
www/index.html
- Rimuovi gli import degli script per Ionic PWA Elements se non pubblichi l'app 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>-
Elimina l'elemento
<capacitor-welcome>Elemento HTML dal body. -
Aggiorna l'import dello script da
capacitor.jsajs/main.js. Questo sarà il nostro file JavaScript bundle. -
Rimuovi l'import
js/capacitor-welcome.jsimport. Il tuoindex.htmlè ora pronto.
vite.config.js
Per fare il bundle dei nostri moduli Node.js con Vite, abbiamo bisogno di un file di configurazione che specifichi la destinazione di output del nostro script bundlato. La configurazione seguente prenderà il file src/index.js e lo bundlerà 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 faccia il bundling dei file, permettendoci di usare Vite per questo scopo.
Con queste modifiche, il setup base della tua applicazione Capacitor è completo e sei pronto a sviluppare la tua app in puro JavaScript.
‣ Sviluppo della tua app
Ora che le basi sono gettate, puoi iniziare a scrivere la logica della tua applicazione nel src/index.js file. Qui puoi importare i moduli Node.js necessari, definire le funzionalità della tua app e interagire con i plugin nativi di Capacitor.
Ricorda di eseguire il comando build di Vite per fare il bundle dei tuoi file JavaScript ogni volta che apporti modifiche:
vite buildQuesto comando genererà il main.js file nella tua www/js directory, a cui il tuo index.html file farà riferimento.
‣ Testing e Debugging
Capacitor offre un modo semplice per testare la tua applicazione su diverse piattaforme. Usa i seguenti comandi per aprire la tua app nell'ambiente di sviluppo della piattaforma corrispondente:
Per Android:
npx cap add android
npx cap open androidPer iOS (solo macOS):
npx cap add ios
npx cap open iosPer Web/PWA:
npx cap serveQuesti comandi ti permetteranno di eseguire l'applicazione in Android Studio, Xcode o nel browser, dove potrai testare e fare debug come necessario.
‣ Conclusione
Sviluppare applicazioni cross-platform con CapacitorJS usando solo JavaScript è un modo economico ed efficiente per creare app per più piattaforme con un unico codebase. Seguendo questa guida, hai configurato il progetto, lo hai ristrutturato per Vite e lo hai preparato per lo sviluppo. Con queste basi, sei sulla strada giusta per costruire un'applicazione robusta e versatile.
Ricorda di testare tutto accuratamente su ogni piattaforma e sfrutta i plugin nativi di Capacitor per potenziare le funzionalità della tua app. Buon coding!
Continua da Sviluppare App Cross-Platform con CapacitorJS: Una Guida Passo dopo Passo
Se stai usando Sviluppare app cross-platform con CapacitorJS: guida passo dopo passo per pianificare il lavoro sui plugin nativi, collegalo a Directory dei plugin di Capgo per il workflow del prodotto nella Capgo Plugin Directory, Plugin Capacitor di Capgo per i dettagli di implementazione in Capacitor Plugins di Capgo, Aggiunta o aggiornamento dei plugin per i dettagli sull'implementazione in Adding or Updating Plugins, Alternative ai plugin Ionic Enterprise per il workflow del prodotto in Ionic Enterprise Plugin Alternatives, e Capgo Native Build per il workflow di prodotto in Capgo Native Builds.
