Creare App Mobili con aggiornamenti in tempo reale, Quasar e Capacitor.

In questo tutorial, inizieremo creando una nuova app web utilizzando Quasar. In seguito, impareremo a trasformarla in un'app mobile utilizzando Capacitor. Se desiderate che la vostra app abbia un aspetto migliore su mobile.

Con Capacitor, potete trasformare la vostra app web Quasar in un'app mobile senza dover fare molte cose difficili o imparare un nuovo modo di creare app come fareste con qualcosa chiamato React Native.

This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Inoltre, utilizzerai Capacitor per inviare aggiornamenti live al tuo app in pochi secondi. Capgo Per inviare aggiornamenti live al tuo app in pochi secondi.

Di Capacitor

CapacitorJS è veramente un cambiamento di gioco! Puoi incorporare facilmente in qualsiasi progetto web e lo renderà in un webview nativo, generando il progetto Xcode e Android Studio nativo per te. Inoltre, i suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Con Capacitor, ottieni una fantastica app mobile nativa senza alcun setup complesso o curva di apprendimento ripida. La sua API sottile e la sua funzionalità streamlinata rendono facile da integrare nel tuo progetto. Sono sicuro che sarai impressionato da quanto sia facile raggiungere un'app mobile nativa completa con Capacitor!

Preparazione dell'app Quasar

Per creare una nuova app Quasar, esegui il seguente comando:

npm init quasar

Scegli l'opzione “App con Quasar CLI” poi “Quasar v2”.

Per creare un'app mobile nativa, abbiamo bisogno di un export di nostro progetto. Quindi, includiamo uno script semplice nel nostro package.json che può essere utilizzato per costruire e copiare il progetto Quasar:

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Dopo l'esecuzione del comando generate, dovresti essere in grado di notare un nuovo dist cartella nella radice del tuo progetto.

Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.

Aggiungere Capacitor al tuo App Quasar

Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma dopo di che è semplice come eseguire un solo sync comando.

Infine, possiamo installare il Capacitor CLI As una dipendenza di sviluppo, e poi impostalo all'interno del nostro progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.

Successivamente, abbiamo bisogno di installare il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

Infine, possiamo aggiungere le piattaforme, e Capacitor creerà cartelle per ogni piattaforma nella radice del nostro progetto:

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

# Initialize Capacitor in your Quasar 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

Da questo punto, dovresti essere in grado di osservare nuove ios e android cartelle nel tuo progetto Quasar.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare Android Studio. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.

Inoltre, dovresti trovare un file capacitor.config.ts nel tuo progetto, che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il webDir, che deve puntare al risultato del tuo comando di build. Attualmente, è inesatto.

Per correggere questo, apri il file capacitor.config.json e aggiorna il webDir:

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

Puoi provare a farlo eseguendo i seguenti comandi:

npm run generate
npx cap sync

Il primo comando npm run generate costruirà semplicemente il tuo progetto Quasar e copierà la build statica, mentre il secondo comando npx cap sync sincronizzerà tutte le web code nei posti giusti delle piattaforme native affinché possano essere visualizzate in un'app.

Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin è il momento di eseguire npx cap sync nuovamente.

Senza accorgersene, sei ora effettivamente finito, quindi vediamo l'applicazione su un dispositivo!

Costruire e distribuire app native

Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Studio di Android È necessario iscriversi al programma di sviluppo Apple per iOS e al console di Google Play per Android se desiderate distribuire il vostro'app sul negozio di app.

Se siete nuovi allo sviluppo mobile nativo, potete utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i vostri progetti nativi, è facile distribuire il vostro'app su un dispositivo connesso. In Studio di Android, basta attendere che tutto sia pronto e potete distribuire il vostro'app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, è necessario configurare il vostro account di firma per distribuire il vostro'app su un dispositivo reale invece che solo sul simulatore. Se non avete mai fatto questo prima, Xcode vi guida attraverso il processo (ma ancora, è necessario essere iscritti al programma di sviluppo). Dopo di che, potete semplicemente premere play per eseguire l'app sul vostro dispositivo connesso, che potete selezionare in alto. Ecco un esempio:

Congratulazioni! Avete con successo distribuito la vostra'app web Quasar su un dispositivo mobile. Ecco un esempio:

Ma aspettate, c'è anche un modo più veloce di fare questo durante lo sviluppo…

Capgo Live Update

Capgo Live Update è un servizio che consente agli sviluppatori di distribuire aggiornamenti alle loro app mobili senza dover passare attraverso il processo di sottoscrizione tradizionale dell'App Store. Ciò può essere un modo comodo per risolvere velocemente dei bug o fare piccoli aggiornamenti a un'app senza dover attendere il processo di revisione dell'App Store.

Integrare Capgo nel tuo app Quasar è un processo semplice che ti consente di sfruttare il potere degli aggiornamenti in tempo reale. Questa guida passo dopo passo ti guiderà attraverso l'integrazione e l'implementazione degli aggiornamenti in tempo reale di Capgo, consentendoti di fornire aggiornamenti senza soluzione di continuità.

Iscriviti e accedi al pannello di controllo di Capgo:

È arrivato il momento di iscriversi e ottenere la tua chiave API per caricare la tua prima versione! Inizia con iscrivendoti a un account Capgo.

Installa il Capgo SDK:

Dalla riga di comando, direttamente nella radice della tua app Capacitor, esegui:

npm i @capgo/capacitor-updater && npx cap sync Per installare il plugin nella tua app Capacitor.

E poi aggiungi alla tua app questo code al posto di CodePush:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Questo ti dirà al plugin nativo che l'installazione è riuscita.

Accedi a Capgo CLOUD:

Prima, utilizza all l'apikey presente nel tuo account per accedere con il CLI:

`npx @capgo/cli@latest login YOU_KEY`

Aggiungi la tua prima App:

Iniziamo creando la prima app in Capgo Cloud con il CLI.

    npx @capgo/cli@latest app add

Questo comando utilizzerà tutte le variabili definite nel file di configurazione Capacitor per creare l'app.

Carica la tua prima versione:

Esegui il comando per costruire il tuo code e inviarlo a Capgo con:

npx @capgo/cli@latest bundle upload`

Di default, il nome della versione sarà quello presente nel tuo file package.json.

Controlla in Capgo se il build è presente.

Puoi anche testarlo con il mio app di sandbox mobile.

Stabilisci canale predefinito:

Dopo aver inviato il tuo app a Capgo, hai bisogno di stabilire il tuo canale predefinito per consentire agli app di ricevere aggiornamenti da Capgo.

npx @capgo/cli@latest channel set production -s default

Configura l'app per validare gli aggiornamenti:

Aggiungi questa configurazione al tuo file JavaScript principale.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Poi fai un npm run build && npx cap copy per aggiornare il tuo app.

Ricevi un Aggiornamento in Tempo Reale:

Perché il tuo'applicazione riceva un aggiornamento in tempo reale da Deploy, avrai bisogno di eseguire l'app su un dispositivo o un emulatore. La cosa più facile da fare è semplicemente utilizzare il seguente comando per avviare l'app locale in un emulatore o un dispositivo collegato al tuo computer.

  npx cap run [ios | android]

Apre l'app, mettila in background e aprila di nuovo, dovresti vedere nei log che l'app ha fatto l'aggiornamento.

Congratulazioni! 🎉 Hai avuto successo nel distribuire il tuo primo Aggiornamento in Tempo Reale. Questo è solo l'inizio di tutto ciò che puoi fare con gli Aggiornamenti in Tempo Reale. Per imparare di più, consulta i Documenti degli Aggiornamenti in Tempo Reale.

Usando Capacitor Plugin

Ecco come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato precedentemente. Per farlo, possiamo installare un plugin abbastanza semplice eseguendo:

npm i @capacitor/share

Non c'è nulla di particolarmente complesso nel plugin di condivisione, ma comunque apre il dialogo di condivisione nativo! Per questo, adesso dobbiamo solo importare il pacchetto e chiamare la funzione corrispondente dall'app, quindi cambiamo il share() file index.vue a questo: Come abbiamo detto prima, quando installiamo nuovi plugin, dobbiamo eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

<template>
  <div>
    <h1>Welcome to Quasar 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 premuto il pulsante, potrai vedere il dialogo di condivisione nativo in azione!

npx cap sync

Successivamente, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni __CAPGO_KEEP_0__ e risolvere i problemi di layout comuni di iOS che causano un sovrappiù orizzontale o aree sicure tagliate.

Interfaccia utente nativa con Capgo Navigazione e Transizioni Nativa

Native-feeling UI with Capgo Native Navigation and Transitions

protectedTokens Ionic per costruire applicazioni cross-platform, ma integrarla con Quasar è un po' complicato e non vale spesso la pena quando già ne hai Tailwind CSS.

Per un aspetto nativo su mobile in un'app Quasar + Capacitor utilizza i plugin Capgo al posto di kit UI web come Konsta UI:

• @capgo/capacitor-native-navigation – barra di navigazione nativa, Liquid Glass bar delle schede su iOS e stile di barra delle schede sfocata su Android. Il tuo router Quasar mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
• @capgo/capacitor-transitions – transizioni di pagina dello stile Ionic e swipe indietro su iOS nell'layer WebView, senza adottare l'interfaccia utente di Ionic.

Installa entrambi:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

Configura la navigazione nativa con modalità CSS inset per far rispettare il contenuto web le barre native:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Rendi una barra delle schede in vetro liquido (iOS utilizza il rendering di sistema; Android utilizza un backdrops sfocato di WebView):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Aggiungi transizioni di pagina native nel contenitore dell'app:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

Raccogliere pagine di routing in cap-router-outlet, cap-pagee cap-contente chiamare setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede quelle superfici.

Vedi le guide complete: Utilizzare @capgo/capacitor-navigazione-nativa e Utilizzare @capgo/capacitor-transizioni.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor su npm). Fornisce safe-areas strumenti e altre Capacitor-compatibili plugin Tailwind:

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utilizza strumenti come pt-safe, pb-safe, e px-safe invece di spargere env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Quasar, apri un PR su GitHub.

Risolvere Problemi di Layout iOS (Viewport, Area di Sicurezza, e Scoramento Orizzontale)

Se il contenuto sembra tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o regolare il tag viewport da solo non risolve di solito il problema. Passa attraverso questi controlli in ordine.

Assicurati che il tag meta viewport sia applicato correttamente

In index.html (o il tuo template HTML Quasar), imposta il tag meta viewport in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gestisci l'area sicura di iOS da un unico wrapper radice

Crea un unico contenitore dell'app e applica il padding dell'area sicura lì — non nei componenti nidificati multipli:

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Avvolgi tutta il contenuto della pagina dentro .app-shellIl padding dell'area sicura duplicato nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitor, puoi esprimere lo stesso padding con utility come pt-safe pb-safe px-safe su quel singolo contenitore.

Imposta Capacitor iOS contentInset To never Primo

In capacitor.config.ts, preferisci un inset nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Mescolare l'insetto di contenuto automatico di __CAPGO_KEEP_0__ con CSS

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Trova l'elemento che sta veramente sovrascrivendo.

L'elemento più comune è un elemento che utilizza

, Tailwind 100vw, una larghezza in pixel fissata, o una larghezza w-screenIn Safari Web Inspector, esegui: min-width.

In Safari Web Inspector, run:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Con Tailwind, sostituisci w-screen con w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screenduplicati padding di area sicura, o da un contenitore di larghezza fissata — non dal tag meta viewport stesso.

Conclusion

Capacitor è un'ottima opzione per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.

E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'app, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desideri imparare a aggiungere Capgo al tuo app Next.js, consulta l'articolo successivo :

Continua da Creare App mobili con aggiornamenti in tempo reale, Quasar e Capacitor.

Se stai utilizzando Creare App mobili con aggiornamenti in tempo reale, Quasar e Capacitor. per pianificare il lavoro dei plugin nativi, connettilo con Capgo Directory dei plugin per il flusso di lavoro del prodotto in Capgo Directory dei plugin, Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo, Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native.