Cercheremo di creare 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 live update alla vostra app in secondi.
Su Capacitor
CapacitorJS è veramente un cambiamento di gioco! Potete incorporarlo facilmente in qualsiasi progetto web e lo utilizzerete per avvolgere la vostra applicazione in un view web 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, ottenete una fantastica applicazione mobile nativa senza alcuna configurazione complessa o curva di apprendimento impegnativa. La sua API sottile e la sua funzionalità ottimizzata rendono facile integrarla nel vostro progetto. Sono sicuro che vi sorprenderete per quanto sia facile ottenere un'applicazione mobile nativa completa con Capacitor!
Preparazione dell'app Quasar
Per creare una nuova app Quasar, esegui il seguente comando:
npm init quasar
Scegliete l'opzione "App con Quasar CLI" poi "Quasar v2".
Per creare un'applicazione 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, dovreste poter notare una nuova dist cartella nella radice del tuo progetto.
Questo cartella verrà utilizzata da Capacitor in futuro, 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 in seguito è semplice come eseguire un comando singolo. sync command.
Positivamente, possiamo installare il 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 nella radice del nostro progetto:
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
Ora dovresti essere in grado di osservare nuove iOS e Android Le cartelle nella tua progetto Quasar.
Sono progetti nativi reali!
Per accedere al progetto Android in seguito, devi installare Android Studio. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.
Inoltre, dovresti trovare un capacitor.config.ts il file nel tuo progetto, 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 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"
}Prova a farlo eseguendo i seguenti comandi:
npm run generate
npx cap syncIl primo comando npm run generate costruirà semplicemente il tuo progetto Quasar e copierà la build statica, mentre il secondo comando npx cap sync Sincronizzerà tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati nell'app.
Inoltre, il comando sync potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin È arrivato il momento di ripartire npx cap sync di nuovo.
Siete ora effettivamente completi, quindi vediamo l'app sul dispositivo!
Costruisci e distribuisci app native
Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per app Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, devi iscriverti al Apple Developer Program per iOS e al Google Play Console per Android.
Se sei nuovo nello sviluppo di app mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:
npx cap open ios
npx cap open androidUna 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 proprio account di firma per distribuire l'applicazione su un 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 per sviluppatori). Dopo di che, si può semplicemente premere play per eseguire l'applicazione sul dispositivo collegato, che si può selezionare in alto. Ecco un esempio:
Congratulazioni! Si è riusciti a distribuire l'applicazione web Quasar su un dispositivo mobile. Ecco un esempio:
Ma aspettate, c'è anche un modo più veloce per farlo durante lo sviluppo…
Capgo Live Update
Capgo Live Update è un servizio che consente ai sviluppatori di distribuire aggiornamenti alle loro applicazioni mobili senza dover passare attraverso il tradizionale processo di pubblicazione sull'App Store. Ciò può essere un modo comodo per risolvere velocemente bug o fare piccoli aggiornamenti a un'applicazione senza dover attendere il processo di revisione dell'App Store.
Integrare Capgo nella propria applicazione Quasar è un processo semplice che consente di sfruttare il potere degli aggiornamenti in tempo reale. Questa guida passo dopo passo guiderà attraverso l'integrazione e l'implementazione di Capgo Live Update, consentendo di fornire aggiornamenti senza intoppi.
Iscriversi e accedere al pannello di controllo di Capgo:
È arrivato il momento di iscriversi e ottenere la chiave di API per caricare la prima versione! Inizia con l' iscriversi a un account di Capgo.
Installare il Capgo SDK:
Da una riga di comando, direttamente nella radice del tuo Capacitor app, esegui:
npm i @capgo/capacitor-updater && npx cap sync Per installare il plugin nel tuo Capacitor app.
E poi aggiungi al tuo 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 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'app in Capgo Cloud con il CLI.
npx @capgo/cli@latest app addQuesto comando utilizzerà tutte le variabili definite nel Capacitor config file per creare l'app.
Carica la tua prima versione:
Esegui il comando per costruire il tuo code e invialo 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.
se il build è presente. Potresti anche testarlo con il mio.
app di sandbox mobile:
Dopo aver inviato il tuo app a Capgo, devi impostare il tuo canale come 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:
Configura l'app per validare gli aggiornamenti
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dopo ciò npm run build && npx cap copy aggiornare l'applicazione.
Ricevi un Live Update:
Perché il tuo applicativo riceva un live update da Deploy, dovrai eseguire l'applicazione su un dispositivo o un emulatore. La cosa più facile da fare è semplicemente utilizzare il seguente comando per avviare l'applicazione 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 fatto l'aggiornamento.
Congratulazioni! 🎉 Hai con successo distribuito la tua prima Live Update. Questo è solo l'inizio di tutto ciò che puoi fare con gli Aggiornamenti in Tempo Reale. Per imparare di più, visualizza il documento completo Dossier degli Aggiornamenti in Tempo Reale.
Utilizzare i Plugin Capacitor
Ecco un esempio di come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato prima. Per farlo, possiamo installare un plugin piuttosto semplice eseguendo:
npm i @capacitor/shareNon c'è nulla di particolarmente complesso nel Plugin di condivisioneMa porta comunque in evidenza il dialogo di condivisione nativo! Per questo, adesso basta importare il pacchetto e chiamare il metodo corrispondente. share() funzione da nostra applicazione, quindi cambiamo il pages/index.vue per 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 poi ripubblicare l'app sul dispositivo. Per farlo, esegui il seguente comando:
npx cap syncDopo 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 Capgo di navigazione e transizioni, e risolvere i problemi di layout comuni di iOS che causano overflow orizzontale o aree sicure tagliate.
Interfaccia utente nativa con Capgo di 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 Capgo plugin al posto di kit UI web come Konsta UI:
- @capgo/capacitor-navigazione nativa --- barra di navigazione nativa, Liquid Glass tab bar su iOS e uno stile di barra tab con sfumatura su Android. Il tuo router Quasar mantiene lo stato delle rotte; il plugin possiede il chrome nativo.
- @capgo/capacitor-transizioni --- transizioni di pagina Ionic-style e swipe-back di iOS all'interno della layer WebView, senza adottare l'interfaccia UI di Ionic.
Installate sia:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncConfigura la navigazione nativa con modalità CSS inset affinché il contenuto web rispetti le barre native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendi una barra tab Liquid Glass (iOS utilizza la rendering di sistema; Android utilizza un sfondo WebView con sfumatura):
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 tuo shell 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 destinazione in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') Prima di navigare. Non duplicare intestazioni o piè di pagina web quando la navigazione nativa gestisce queste aree.
Vedi le guide complete: Usa @capgo/capacitor-navigazione nativa e Usa @capgo/capacitor-transizioni.
Zone sicure con Tailwind
Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor pubblicato su tailwind-capacitor su di npm). Fornisce safe-areas utilità e altri plugin Tailwind compatibili con Capacitor
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Usa utilità come pt-safe, pb-safee px-safe al posto di aggiungere env(safe-area-inset-*) a mano. 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 Sovraffollamento 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" />Gestisci l'area di sicurezza di iOS da un solo wrapper radice
Creare un unico contenitore dell'applicazione e applicare la spaziatura di sicurezza dell'area 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);
}Racchiuda tutto il contenuto della pagina all'interno .app-shellLa duplicazione dello spazio di sicurezza nelle intestazioni, nei modali e nei wrapper di layout può rendere l'interfaccia utente tagliata o troppo grande.
Con @capgo/tailwind-capacitor, puoi esprimere lo stesso spazio con utilità come pt-safe pb-safe px-safe su quel singolo shell.
Imposta Capacitor iOS contentInset su never first
primo capacitor.config.tsprefer l'interfaccia nativa disabilitata e lasciare che CSS (o la navigazione nativa) contentInsetMode: 'css'Possiedere l'area di sicurezza:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mischia Capacitor's automatico contenuto di inserimento con CSS env(safe-area-inset-*) lo spazio di padding è una causa comune di doppia interlinea.
Trova l'elemento sovrapposto reale
Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, un'ampiezza di pixel fissata, o una larghezza 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 sovrascrittura orizzontale derivano da 100vw / w-screen, duplicato padding di area sicura, o un contenitore di 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.
Con l'aggiunta di CapgoE' ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, garantendo che gli utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.
Se desideri imparare a aggiungere Capgo alla tua app Next.js, consulta l'articolo successivo.
Creating Mobile Apps con aggiornamenti in tempo reale, Quasar e Capacitor.
Se stai utilizzando Creazione di App mobili con aggiornamenti in tempo reale, Quasar e Capacitor. connettere il lavoro del plugin nativo, collegarlo con Capgo Plugins da __CAPGO_KEEP_1__ per il workflow del prodotto nella Capgo Directory dei Plugin. Capacitor è un'ottima scelta per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere Capgo e mantenere un'interfaccia utente coerente. per i dettagli di implementazione nei plugin di Capacitor da Capgo, Aggiungere o aggiornare i plugin per i dettagli di implementazione in Aggiungere o aggiornare i plugin, Alternative plugin per Ionic Enterprise per il workflow del prodotto in Alternative plugin per Ionic Enterprise, e Costruzioni native Capgo per il workflow del prodotto in Costruzioni native Capgo.
