Creating Mobile Apps with live updates, Quasar and Capacitor.

In questo tutorial, creeremo una nuova app web utilizzando Quasar. In seguito, 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 Capgo per inviare aggiornamenti in tempo reale alla vostra app in secondi.

Su Capacitor

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

Con Capacitor, otterrete una fantastica app mobile nativa senza alcun setup complesso o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile integrarla nel vostro progetto. Sono sicuro che sarete ammirati dalla facilità con cui potete ottenere un'app mobile nativa completa con Capacitor!

Preparazione della tua 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 del nostro progetto. Quindi, aggiungiamo 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 alla radice del tuo progetto.

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

Adding Capacitor to Your Quasar App

Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma in seguito è semplice come eseguire un comando. sync In primo luogo, possiamo installare il

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

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

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

cartelle ios cartelle ios And Android cartelle

progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare Studio Android. Per iOS, è necessario 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 dovresti preoccuparti è la webDir, che deve puntare al risultato della tua riga di comando di build. Attualmente, è inesatto.

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

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

contexto: frammento di testo HTML da una stringa di Capgo UI più lunga (chiave genitrice `solutions_cordova_to_capacitor_ai_step2_body`). Pagina/area: pagina di marketing di Capgo per le soluzioni. Ruolo: frase di copertina del sito web. Visto in: pagina solutions/cordova-to-capacitor-ai.astro. Chiave di messaggio `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

npm run generate
npx cap sync

Puoi provare a farlo eseguendo i seguenti comandi: npm run generate La prima riga di comando npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

synccherà tutti i web __CAPGO_KEEP_0__ nei posti giusti delle piattaforme native, in modo che possano essere visualizzati in un'app. Capacitor plugins __CAPGO_KEEP_0__ plugin npx cap sync di nuovo.

Senza accorgersene, si è ora effettivamente finiti, quindi vediamo l'app sul dispositivo!

Crea e distribuisci app native

Per sviluppare app iOS, è necessario avere Xcode installato, e per app Android, è necessario avere Android Studio installato. Inoltre, se si prevede di distribuire l'app sul negozio di app, è necessario iscriversi al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

Se si è nuovi allo sviluppo mobile nativo, si può utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i progetti nativi, distribuire l'app sul dispositivo connesso è facile. In Android Studio, è sufficiente attendere che tutto sia pronto, e si può distribuire l'app sul dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, è necessario configurare l'account di firma per distribuire l'app sul dispositivo reale invece che solo sul simulatore. Se non si è mai fatto prima, Xcode guida attraverso il processo (ma di nuovo, è necessario essere iscritti al programma di sviluppatore). Dopo di che, si può semplicemente premere play per eseguire l'app sul dispositivo connesso, che si può selezionare in alto. Ecco un esempio:

Congratulazioni! Hai avuto successo nel distribuire la tua app web Quasar su un dispositivo mobile. Ecco un esempio:

Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo…

Capgo Live Update

Capgo Live Update è un servizio che consente ai developer di distribuire aggiornamenti alle loro app mobili senza dover passare per il processo di sottoscrizione 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 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 Live Update, consentendoti di distribuire aggiornamenti senza intoppi.

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 facendo: iscriversi a un account Capgo.

Installare 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 nel tuo applicazione Capacitor.

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

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

CapacitorUpdater.notifyAppReady()

Ciò informerà il plugin nativo che l'installazione è riuscita.

Accedi a Capgo CLOUD:

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

`npx @capgo/cli@latest login YOU_KEY`

Aggiungi la tua prima App:

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

Carica la tua prima versione:

Esegui il comando per creare 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.

Potresti anche testarlo con il mio applicazione 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 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, dovrai eseguire l'app sul dispositivo o su un emulatore. La cosa più facile da fare è semplicemente utilizzare il seguente comando per avviare l'app locale su un emulatore o su un dispositivo collegato al tuo computer.

  npx cap run [ios | android]

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

Congratulazioni! 🎉 Hai con successo distribuito 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 la documentazione completa Documentazione degli Aggiornamenti in Tempo Reale.

Utilizzare i Plugin Capacitor

Ecco un esempio di come utilizzare un plugin Capacitor in azione, che abbiamo menzionato alcune volte 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 porta comunque avanti il dialogo di condivisione nativo! Per questo adesso abbiamo bisogno solo di importare il pacchetto e chiamare la funzione corrispondente dal nostro'app, quindi cambiamo il share() pagina index.vue Utilizzare i Plugin __CAPGO_KEEP_0__ a questo:

<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>

Come menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e quindi ripubblicare l'app sul dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

Dopo aver premuto il pulsante, puoi assistere alla bella finestra di condivisione nativa in azione!

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

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

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

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

• @capgo/capacitor-native-navigation — barra di navigazione nativa, Liquid Glass barra dei tab su iOS e uno stile di barra dei tab sfocato su Android. Il router Quasar mantiene lo stato delle rotte; il plugin possiede il chrome nativo.
• Transizioni @capgo/capacitor — Transizioni di pagina simili a Ionic e swipe-back di iOS nell' layer WebView, senza adottare l'interfaccia utente di Ionic.

Installare sia:

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

Configurare la navigazione nativa con il modello di inset CSS 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',
  },
});

Rendere una barra di tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo 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}`);
});

Aggiungere 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>

Wrappare le pagine di destinazione 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 queste superfici.

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

Aree sicure con Tailwind

Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato su tailwind-capacitor npm). Fornisce safe-areas utilità e altri plugin di 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 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 essere 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. Esegui 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" />

Tratta l'area di sicurezza iOS da un solo wrapper radice

Creare un unico contenitore dell'applicazione e applicare il padding dell'area di sicurezza lì — non in più componenti nidificati:

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 dentro .app-shell. Aggiungi padding di sicurezza duplicato nelle intestazioni, nei modali e nei wrapper di layout, il che spesso fa sì che l'interfaccia utente sembri tagliata o troppo grande.

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

Imposta Capacitor iOS contentInset su never primo

In capacitor.config.ts, preferisci l'inserzione nativa disabilitata e lascia che il CSS (o la navigazione nativa) contentInsetMode: 'css') gestisca l'area sicura:

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

Miscela l'inserzione di contenuto automatica di Capacitor con CSS env(safe-area-inset-*) La spaziatura è una causa comune di doppia spaziatura.

Trova l'elemento che sta effettivamente sovrapponendo.

Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza in pixel fissata, o un contenitore molto ampio 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 a larghezza fissata — non dal tag meta viewport stesso.

Conclusioni

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

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

Se desideri imparare a aggiungere Capgo alla tua app Next.js, prendi un'occhiata all'articolo successivo:

Continua a leggere da Creating Mobile Apps con aggiornamenti in tempo reale, Quasar e Capacitor.

Se stai utilizzando Creating Mobile Apps 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 Plugins da Capgo per i dettagli di implementazione in Capacitor Plugins da Capgo Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native.