Nel mondo in continua evoluzione dello sviluppo di applicazioni mobili, l'ascesa delle Applicazioni Web Progressive (PWAs) ha aperto la strada a nuove runtime cross-platform. Queste runtime consentono alle applicazioni web di essere presenti nei negozi di app senza dipendere esclusivamente da native code. Una tecnologia che facilita questo processo è 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 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.
‣ Prerequisiti
Prima di iniziare, assicurati di avere installati i seguenti strumenti:
- Node.js o superiore __CAPGO_KEEP_0__
- NPM (v7.6.2) Android Studio
- per lo sviluppo di app Android Xcode
- per lo sviluppo di app iOS (solo per macOS) Nota
Nota: Lo sviluppo di un'app iOS è possibile solo su un dispositivo macOS.
‣ Impostazione del tuo progetto Capacitor
Per creare un'applicazione Capacitor, naviga nella cartella desiderata 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, la directory del tuo 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 abbinare i nostri file JavaScript, quindi riorganizziamo il progetto di conseguenza:
- Creare una nuova cartella
srcnella directory principale. - Creare 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 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 JavaScript puro
Modifichiamo alcuni file per funzionare con JavaScript puro:
www/index.html
- Elimina gli import di script per Elementi PWA di Ionic se non rilasci 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 l'elemento HTML dal corpo.
<capacitor-welcome>Aggiorna l'importazione dello script da -
to
capacitor.jscontext: Pagina/area: Pagina prodotti per aggiornamenti in tempo reale. Ruolo: Etichetta di navigazione breve o elemento UI. Chiave di messaggio `live_update_dynamic_label_to` (Etichetta dinamica di aggiornamento in tempo reale To).js/main.js. Questo sarà il nostro file JavaScript bundle. -
Cancella l'importazione dello
js/capacitor-welcome.jsLa tuaindex.htmlè ora pronta.
vite.config.js
Per bundle i nostri moduli Node.js con ViteEcco, 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 progetto Capacitor è completa, e sei pronto a iniziare a sviluppare la tua app con JavaScript puro.
‣ Sviluppo della tua App
Ora che la base è stata stabilita, puoi iniziare a scrivere la logica di 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 creare un pacchetto dei tuoi file JavaScript ogni volta che apporti modifiche:
vite buildQuesto comando genererà il file nel tuo main.js directory, che il tuo file www/js si riferirà. index.html ‣ Test e Debug
__CAPGO_KEEP_0__ fornisce un modo comodo per testare la tua applicazione su diverse piattaforme. Utilizza i seguenti comandi per aprire la tua app nel rispettivo ambiente di sviluppo:
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:
Per iOS (solo macOS):
npx cap add android
npx cap open androidPer Web/PWA:
npx cap add ios
npx cap open iosQuesti comandi ti consentiranno di eseguire la tua applicazione in Android Studio, Xcode o nel tuo browser web, dove potrai testare e debuggare come necessario.
npx cap serve‣ Conclusion
__CAPGO_KEEP_0__ è un modo comodo per testare la tua applicazione su diverse piattaforme. Utilizza i seguenti comandi per aprire la tua app nel rispettivo ambiente di sviluppo per Android, iOS o Web/PWA.
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 utilizzare i plugin nativi di Capacitor per migliorare la funzionalità dell'app. Buon codice!
Continua da Sviluppare Applicazioni Cross-Platform con CapacitorJS: Una Guida Passo dopo Passo
Se stai utilizzando Sviluppare 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 Capacitor Plugin di Capgo per i dettagli di implementazione in Capacitor Plugin di Capgo Aggiungere o Aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin Alternativi per Plugin Enterprise Ionic per il workflow del prodotto in Alternativi per Plugin Enterprise Ionic, e Capgo Costruzioni native per il workflow del prodotto in Capgo Costruzioni native.
