Nel mondo in evoluzione dello sviluppo di applicazioni mobili, l'ascesa delle Applicazioni Web Progressive (PWAs) ha aperto la strada a nuove runtime a piattaforma cross. Queste runtime consentono alle applicazioni web di essere presenti nei negozi di app senza dipendere esclusivamente da nativi code. Una tecnologia che facilita questo è CapacitorJS, che consente ai sviluppatori 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 fornirti una guida completa per creare la tua applicazione e utilizzare plugin nativi con CapacitorJS.
‣ Requisiti
Prima di iniziare, assicurati di avere installati 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 per macOS)
Nota: Lo sviluppo di un'app iOS è possibile solo su un dispositivo macOS.
‣ Configurazione del tuo progetto Capacitor
Per creare un'applicazione Capacitor, naviga nel cartellino 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 cartellino 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 compattare i nostri file JavaScript, quindi ristrutturiamo il nostro progetto di conseguenza:
- Creare un nuovo cartellino
srcnel cartellino principale. - Creare un nuovo file di script
index.jsinsrc/. - Crea il file di configurazione Vite
vite.config.jsnella cartella principale. - Elimina il
capacitor-welcome.jsfile dawww/js/.
La tua nuova struttura di cartelle 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 Pure JavaScript
Modifichiamo alcuni file per funzionare con il JavaScript puro:
www/index.html
- Elimina gli import dei script per Elementi PWA di Ionic se non stai rilasciando l'applicazione come una 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 HTML dal corpo.
<capacitor-welcome>Aggiorna l'importazione dello script da -
a
capacitor.js. Questo sarà il nostro file JavaScript bundle.js/main.jsRimuovi l'importazione del -
Il tuo
js/capacitor-welcome.jsè ora pronto.index.htmlvite.config.js
Per bundle i nostri moduli Node.js con
Per bundle i nostri moduli Node.js con Vite, abbiamo bisogno di un file di configurazione che specifica la destinazione di output per il nostro script bundle. La seguente configurazione prenderà il file src/index.js e lo bundle 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 bundle i file, consentendoci di utilizzare Vite per questo scopo invece.
Con queste modifiche, la configurazione base del tuo Capacitor è completa, e sei pronto a iniziare a sviluppare la tua app con JavaScript puro.
‣ Sviluppa la tua App
Ora che la base è stata stabilita, puoi iniziare a scrivere la logica dell'applicazione nel src/index.js file. Qui, puoi importare i moduli Node.js necessari, definire la funzionalità dell'app e interagire con i plugin nativi di Capacitor.
Ricorda di eseguire il comando di build di Vite per raggruppare 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. Utilizza i seguenti comandi per aprire la tua app nell'ambiente di sviluppo del rispettivo sistema:
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 tuo browser web, dove potrai testare e debuggare come necessario.
‣ Conclusion
Lo sviluppo di applicazioni cross-platform con CapacitorJS utilizzando JavaScript puro è un modo efficace e conveniente 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 lo sviluppo. Con questa base, sei ben avviato a costruire un'applicazione 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 Directory dei Plugin di Capgo per il flusso di lavoro del prodotto in Directory dei Plugin di Capgo Plugin di Capacitor da Capgo per i dettagli di implementazione in Plugin di Capacitor da Capgo, Aggiungi o Aggiorna Plugin per i dettagli di implementazione in Aggiungi o Aggiorna Plugin, Alternative plugin per Ionic Enterprise per il flusso di lavoro del prodotto in Alternative plugin per Ionic Enterprise, e Capgo Costruzione nativa per il flusso di lavoro del prodotto in Capgo Costruzione nativa.
