Sviluppare Applicazioni Cross-Platform con CapacitorJS: Una Guida Passo dopo Passo

Nel mondo in continua evoluzione del software per applicazioni mobili, l'ascesa delle Applicazioni Web Progressive (PWAs) ha aperto la strada a nuovi runtime cross-platform. Questi runtime consentono alle applicazioni web di essere presenti nei negozi di app senza dipendere esclusivamente da nativi code. 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 costruire la sua applicazione e utilizzare plugin nativi con CapacitorJS.

‣ Prerequisiti

Prima di iniziare, assicurati di avere installati i seguenti strumenti:

• Node.js (v14.16.1) o superiore
• NPM (v7.6.2) or higher
• Android Studio per lo sviluppo di applicazioni Android
• Xcode per lo sviluppo di applicazioni iOS (solo macOS)

Nota: lo sviluppo di applicazioni iOS è possibile solo su un dispositivo macOS.

‣ Configurazione del tuo progetto Capacitor

Per creare un'applicazione Capacitor, accedi al cartellino desiderato e esegui il seguente comando nel tuo terminale:

npm init @capacitor/app

Segui le istruzioni per installare il pacchetto e configurare il tuo progetto. Con Capacitor v3, il tuo cartellino di progetto dovrebbe avere questo aspetto:

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

Dopo aver completato la configurazione iniziale, sei pronto a procedere.

‣ Ricostruzione del progetto

Utilizzeremo Vite per pacchettizzare i nostri file JavaScript, quindi riorganizziamo il progetto di conseguenza:

• Crea una nuova cartella src nella directory principale.
• Crea un nuovo file di script index.js nel src/.
• Crea il file di configurazione Vite vite.config.js nella directory principale.
• Elimina il capacitor-welcome.js il file da www/js/.

La tua nuova struttura di cartelle dovrebbe assomigliare:

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

1. Elimina le importazioni di script per Ionic PWA Elementi 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>

2. Cancella l' <capacitor-welcome> elemento HTML dal corpo.

3. Aggiorna l'importazione di script da capacitor.js per js/main.js. Questo sarà il nostro file JavaScript bundle.

4. Eliminare il js/capacitor-welcome.js Importato index.html è ora pronto.

vite.config.js

Per bundle i nostri moduli Node.js con ViteAbbiamo 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

In il capacitor.config.json file, individua la "bundledWebRuntime": true proprietà e modificala in falseQuesto aggiustamento assicura che Capacitor non bundle i file, consentendoci di utilizzare Vite per tale scopo al suo posto.

Con questi cambiamenti, 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 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 bundle i file JavaScript ogni volta che apporti modifiche:

vite build

Questo comando genererà il main.js file nel tuo www/js directory, che il tuo index.html file si riferirà.

‣ Test e Debugging

Capacitor offre una comoda modalità per testare la tua applicazione su diverse piattaforme. Utilizza i seguenti comandi per aprire la tua app nell'ambiente di sviluppo rispettivo:

Per Android:

npx cap add android
npx cap open android

Per iOS (solo macOS):

npx cap add ios
npx cap open ios

Per Web/PWA:

npx cap serve

Il comando ti consentirà di eseguire la tua applicazione in Android Studio, Xcode o nel tuo browser web, dove potrai testare e debuggare come necessario.

‣ Conclusioni

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 pronto a costruire un'applicazione robusta e versatile.

Ricorda di testare accuratamente su tutte le piattaforme e di utilizzare i plugin nativi di Capacitor per migliorare la funzionalità dell'app. Buon codice!

Continua con 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 dei plugin nativi, connettilo con Capgo Directory dei Plugin per il workflow del prodotto nella Capgo Directory dei Plugin. Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiungere o Aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin, Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternative Plugin Enterprise Ionic Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native.