Creating Mobile Apps with live updates, Quasar and Capacitor.

In questo tutorial, creeremo una nuova app web utilizzando QuasarPiù avanti, impareremo a trasformarla in un'app mobile utilizzando Capacitor. Se desiderate migliorare l'aspetto della vostra app 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 React Native.

Questo tutorial vi guiderà attraverso il processo, iniziando con una nuova app Quasar e poi incorporando Capacitor per passare nel mondo delle app mobili native. Inoltre, utilizzerete Capacitor Capgo Su __CAPGO_KEEP_0__

About Capacitor

Con __CAPGO_KEEP_0__, otterrete una fantastica app mobile nativa senza alcun setup complesso o curva di apprendimento ripida. La sua __CAPGO_KEEP_1__ e funzionalità streamlinata rendono facile integrarla nel vostro progetto. Sono sicuro che vi sorprenderà la facilità con cui potete ottenere un'app mobile nativa completa con __CAPGO_KEEP_2__!

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

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

Quasar

npm init quasar

Scegli l'opzione "App con Quasar CLI" poi "Quasar v2".

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

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

Dopo aver eseguito il comando generate, dovresti essere in grado di vedere un nuovo dist folder

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Questo folder verrà utilizzato da Capacitor in seguito, ma per ora dobbiamo configurarlo correttamente.

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

Per prima cosa, possiamo installare il Capacitor CLI come dipendenza di sviluppo, e poi configurarlo nel nostro progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.

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

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

creerà cartelle per ogni piattaforma nella radice del nostro progetto: Inizializza il __CAPGO_KEEP_0__ Da questo punto, dovresti essere in grado di osservare nuove cartelle per le piattaforme 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 che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa di cui devi tenere conto è il webDirche deve puntare al risultato del tuo comando di build. Attualmente, è inesatto.

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

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

Puoi provare a eseguire i seguenti comandi:

npm run generate
npx cap sync

Il primo comando npm run generate costruirà il tuo progetto Quasar e copierà la costruzione statica, mentre il secondo comando npx cap sync sincronizzerà tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati 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 ancora.

Senza accorgersene, sei ora effettivamente fatto, quindi vediamo l'app sul dispositivo!

Costruisci e distribuisci applicazioni native

Per sviluppare applicazioni iOS, è necessario avere Xcode installato, e per le applicazioni Android, è necessario avere Android Studio installato. Inoltre, se pianifichi di distribuire la tua app sul negozio di app, è necessario iscriversi al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

Se sei nuovo allo sviluppo di applicazioni mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, basta attendere che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, è necessario configurare il tuo account di firma per distribuire la tua app su un dispositivo reale al posto del simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, è necessario essere iscritti al programma di sviluppatore). Dopo di che, puoi semplicemente premere play per eseguire l'app sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai distribuito con successo la tua app web Quasar su un dispositivo mobile. Ecco un esempio:

Ma pensate di fermarvi qui, ma c'è anche un modo più veloce per farlo durante lo sviluppo…

Capgo Aggiornamento in Tempo Reale

Capgo Aggiornamento in Tempo Reale è un servizio che consente ai sviluppatori di distribuire aggiornamenti alle loro app mobili senza dover passare per il processo di sottoscrizione tradizionale dell'App Store. Ciò può essere un modo comodo per risolvere velocemente i bug o apportare piccoli aggiornamenti a un'app senza dover attendere il processo di revisione dell'App Store.

Integrare Capgo nella tua 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 di Capgo Aggiornamento in Tempo Reale, consentendoti di distribuire aggiornamenti senza intoppi.

Iscriviti e accedi al pannello di controllo Capgo:

È arrivato il momento di iscriversi e ottenere la tua chiave API per caricare la tua prima versione! Inizia con: iscriviti 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()

Ciò dirà al plugin nativo che l'installazione è riuscita.

Accedi a Capgo CLOUD:

In primo luogo, utilizza il all apikey presente nel tuo account per accedere con il CLI:

`npx @capgo/cli@latest login YOU_KEY`

Aggiungi il tuo primo App:

Iniziamo creando un'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.

Verifica nel Capgo se il build è presente

Potresti anche testarlo con il mio app mobile di sandbox.

Imposta il canale predefinito:

Dopo aver inviato il tuo app a Capgo, hai bisogno di impostare 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 questo config 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 il tuo'app locale in un emulatore o un dispositivo collegato al tuo computer.

  npx cap run [ios | android]

Apri l'app, mettila in background e aprila nuovamente, dovresti vedere nei log che l'app ha eseguito l'aggiornamento.

Congratulazioni! 🎉 Hai avuto successo nella distribuzione della tua prima Aggiornamento in Tempo Reale. Questo è solo l'inizio di tutto ciò che puoi fare con gli Aggiornamenti in Tempo Reale. Per imparare di più, visualizza la documentazione completa. Documentazione degli Aggiornamenti in Tempo Reale.

Utilizzare i Plugin Capacitor

Vediamo come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato prima. 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 ora dobbiamo solo importare il pacchetto e chiamare la funzione corrispondente dall'app, quindi cambiamo il share() pagina index.vue a questo: Come menzionato prima, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul 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>

Aggiornamento in Tempo Reale

npx cap sync

After averendo il pulsante, potrai assistere alla bella finestra di condivisione nativa in azione!

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

Interfaccia utente con un aspetto nativo con Capgo Navigazione e Transizioni native

Lavoro da anni con Ionic per costruire applicazioni cross-platform, ma integrarla con Quasar è un processo complicato e raramente vale la pena quando già disponi di Tailwind CSS.

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

• @capgo/capacitor-native-navigation – barra di navigazione nativa, Liquid Glass barra a schede su iOS e uno stile di barra a schede sfocato 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 il modello 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 di tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo di WebView sfocato):

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>

Avvolgi le pagine di routing in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') context: HTML testo frammento da una stringa UI Capgo più lunga (chiave genitrice `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di Capacitor per l'aggiornamento in tempo reale. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `alternatives_cta_questions` (Domande di CTA per le alternative). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitrice `appflow_cta_questions`). Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina ionic-appflow.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `appflow_cta_questions` (Domande di CTA per Appflow). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitrice `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: Lungo paragrafo di marketing o legale. Visto in: pagina capwesome.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `capwesome_cta_questions` (Domande di CTA per Capwesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: Sottotitolo o didascalia di sezione. Visto in: pagina consulting.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `consulting_faq_subtitle` (Sottotitolo FAQ per la consulenza). | Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: Etichetta UI breve o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina soluzioni/ionic-enterprise-plugins.astro. Chiave del messaggio `appflow_plugins_or` (Appflow Plugins O).

Prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede quelle superfici. Using @capgo/capacitor-native-navigation Utilizzare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigazione nativa Utilizzando @capgo/capacitor-transizioni.

Zone sicure con Tailwind

Per le zone sicure del dispositivo in Tailwind CSS, utilizzare @capgo/tailwind-capacitor Pubblicato su tailwind-capacitor su npm. Fornisce safe-areas utilità e altri plugin Tailwind compatibili con Capacitor:

npm add -D tailwind-capacitor

In src/css/app.scss:

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

Utilizza utilità come pt-safe, pb-safe, e px-safe al posto di aggiungerle env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Quasar, apri una PR su GitHub.

Risoluzione dei problemi di layout iOS (Viewport, Area di sicurezza, e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificare 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 di sicurezza di iOS da un solo wrapper radice

Creare un unico contenitore dell'applicazione e applicare il padding dell'area di sicurezza lì — non in 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 tutto il contenuto della pagina all'interno di .app-shellLa duplicazione del padding dell'area di sicurezza nei capisaldi, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitor, puoi esprimere la stessa spaziatura con utilità come pt-safe pb-safe px-safe su quella singola shell.

Imposta Capacitor iOS contentInset su never context: Pagina/Area: Pagina prodotti con aggiornamenti in tempo reale. Ruolo: Etichetta UI breve o elemento di navigazione. Chiave di messaggio `live_update_dynamic_label_to` (Etichetta dinamica di aggiornamento in tempo reale To).

primo capacitor.config.tsIn contentInsetMode: 'css', preferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione nativa)

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-*) Mescolare __CAPGO_KEEP_0__’s automatico contenuto insetto con CSS

la spaziatura di padding è una causa comune di doppia spaziatura.

The colpevole di solito è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza in pixel fissata, o un grande min-width.

In Safari Web Inspector, esegui:

[...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-screen, padding di area sicura duplicato, o un contenitore di larghezza fissata — non dal tag meta viewport stesso.

Conclusioni

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 CapgoAggiungere aggiornamenti in tempo reale al tuo app è ancora più facile, assicurando che i tuoi utenti abbiano sempre accesso alle funzionalità e alle correzioni di bug più recenti.

Se desideri imparare a aggiungere Capgo alla tua 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 i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin, Alternativi per Plugin Enterprise di Ionic per il flusso di lavoro del prodotto in Alternativi per Plugin Enterprise di Ionic, e Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native.