Créer des Applications Mobiles avec Vue et Capacitor

In questo tutorial, ti guideremo attraverso il processo di conversione di un’applicazione web Vue in un’app mobile nativa utilizzando Capacitor. Facoltativamente, puoi anche migliorare la tua UI mobile con Konsta UI, una libreria UI mobile basata su Tailwind CSS.

Informazioni su Capacitor

Capacitor è uno strumento rivoluzionario che ti permette di integrarlo facilmente in qualsiasi progetto web e convertire la tua applicazione in un’app mobile nativa. Genera progetti nativi Xcode e Android Studio e fornisce accesso alle funzionalità native del dispositivo come la fotocamera attraverso un bridge JavaScript.

Preparare la tua App Vue

Per prima cosa, crea una nuova app Vue eseguendo il seguente comando:

vue create my-app
cd my-app
npm install

Per preparare la tua app Vue per il deployment mobile nativo, dovrai esportare il tuo progetto. Aggiungi uno script nel file package.json per buildare e copiare il progetto Vue:

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

Dopo aver eseguito il comando build, dovresti vedere una nuova cartella dist nella directory root del tuo progetto. Questa cartella verrà utilizzata da Capacitor successivamente.

Aggiungere Capacitor alla tua App Vue

Per convertire la tua app web Vue in un container mobile nativo, segui questi passaggi:

Installa la CLI di Capacitor come dipendenza di sviluppo e configurala all’interno del tuo progetto. Accetta i valori predefiniti per nome e ID bundle durante la configurazione.
Installa il pacchetto core e i pacchetti pertinenti per le piattaforme iOS e Android.
Aggiungi le piattaforme, e Capacitor creerà cartelle per ciascuna piattaforma alla root del tuo progetto:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Ora dovresti vedere nuove cartelle iOS e android nel tuo progetto Vue.

Aggiorna il file capacitor.config.json per far puntare il webDir al risultato del tuo comando build:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Ora puoi buildare il tuo progetto Vue e sincronizzarlo con Capacitor:

npm run build
npx cap sync

Buildare e Deployare App Native

Per sviluppare app iOS, hai bisogno di Xcode installato, e per le app Android, hai bisogno di Android Studio installato. Inoltre, devi iscriverti all’Apple Developer Program per iOS e alla Google Play Console per Android per distribuire la tua app sullo store.

Usa la CLI di Capacitor per aprire entrambi i progetti nativi:

npx cap open ios
npx cap open android

Deploya la tua app su un dispositivo connesso utilizzando Android Studio o Xcode.

Live Reload di Capacitor

Abilita il live reload sul tuo dispositivo mobile facendo caricare all’app Capacitor il contenuto da un URL specifico sulla tua rete.

Trova il tuo indirizzo IP locale e aggiorna il file capacitor.config.ts con l’IP e la porta corretti:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Applica queste modifiche copiandole nel tuo progetto nativo:

npx cap copy

Ora la tua app si ricaricherà automaticamente e mostrerà le modifiche quando aggiorni la tua app Vue.

Utilizzare i Plugin di Capacitor

Installa un plugin Capacitor, come il plugin Share, e utilizzalo nella tua app Vue:

npm i @capacitor/share

Importa il pacchetto e chiama la funzione share() nella tua app:

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

Dopo aver installato nuovi plugin, esegui il comando sync e rideployare l’app sul tuo dispositivo:

npx cap sync

Aggiungere Konsta UI

Per utilizzare Konsta UI nella tua app Vue, devi avere tailwind già installato e installare il pacchetto: Per utilizzare Konsta UI nella tua app Vue, installa il pacchetto e modifica il tuo file tailwind.config.js:

npm i konsta

Avvolgi la tua app con il componente App nel file pages/_app.vue, e usa i componenti Vue di Konsta UI nelle tue pagine Vue.

Conclusione

Capacitor è un’ottima opzione per costruire applicazioni native basate su un progetto web esistente. Con l’aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti live alla tua app, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Scopri come Capgo può aiutarti a costruire app migliori più velocemente, registrati per un account gratuito oggi.