In questo tutorial, creeremo una nuova app web utilizzando Capgo QuasarPiù avanti, impareremo a trasformarlo in un'app mobile utilizzando Capacitor. Se desiderate migliorare l'aspetto della vostra app su mobile.
Con Capacitor, puoi trasformare la tua app web Quasar in un'app mobile senza dover fare molte cose difficili o imparare un nuovo modo di creare app come faresti con qualcosa chiamata React Native.
Questa guida ti guiderà attraverso il processo, iniziando con una nuova app Quasar e poi incorporando Capacitor per entrare nel regno delle app mobili native. Inoltre, utilizzerai Capgo per inviare un aggiornamento live all'app in secondi.
Su Capacitor
CapacitorJS è veramente un cambiamento di gioco! Puoi incorporarlo facilmente in qualsiasi progetto web e lo utilizzerai per avvolgere la tua applicazione in una view web nativa, generando il progetto Xcode e Android Studio nativo per te. Inoltre, i suoi plugin forniscono accesso alle funzionalità di dispositivo nativo come la fotocamera tramite un ponte JS.
Con Capacitor, ottieni una fantastica app mobile nativa senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile integrarla nel tuo progetto. Sono sicuro che sarai impressionato dalla facilità con cui puoi ottenere 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 esport di nostro progetto. Quindi, includiamo uno script semplice nel nostro package.json che può essere utilizzato per creare e copiare il progetto Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Dopo l'esecuzione del comando generate, dovresti essere in grado di vedere un nuovo dist cartella alla 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 Assegnalo come dipendenza di sviluppo e impostalo quindi all'interno del 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.
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
Al punto in cui siamo, dovresti essere in grado di osservare nuove ios e context: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve UI o elemento di navigazione. Visto in: pagina trust.astro. Chiave di messaggio `e` (E). android
cartelle nel tuo progetto Quasar.
Sono progetti nativi reali! Per accedere al progetto Android in seguito, è necessario installare lo Studio Android.. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.
Inoltre, dovresti trovare un file capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__ che vengono utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il
webDir capacitor.config.json Per correggere questo, apri il file __CAPGO_KEEP_0__.config.json:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}e aggiorna il campo webDir. Puoi provare 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 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 è tempo di eseguire npx cap sync nuovamente.
Senza accorgersene, sei ora effettivamente finito, quindi vediamo l'app sul 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 Android È installato. Inoltre, se hai l'intenzione di distribuire il tuo'applicazione sul negozio di app, devi iscriverti al Programma di sviluppo per Apple per iOS e al Console di Google Play per Android.
Se sei nuovo nello sviluppo di applicazioni 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, il processo di distribuzione dell'applicazione su un dispositivo collegato è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire l'applicazione su un dispositivo collegato senza modificare alcuna impostazione. Ecco un esempio:
In Xcode, devi impostare il tuo account di firma per distribuire l'applicazione su un dispositivo reale invece che solo sul simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto al Programma di sviluppo). Dopo di che, puoi semplicemente premere play per eseguire l'applicazione sul tuo dispositivo collegato, che puoi selezionare in alto. Ecco un esempio:
Congratulazioni! Hai con successo distribuito 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 agli sviluppatori di distribuire aggiornamenti alle loro app mobili senza dover passare attraverso il processo di sottoscrizione tradizionale del negozio di app. Ciò può essere un modo comodo per risolvere velocemente bug o fare piccoli aggiornamenti a un'app senza dover aspettare il processo di revisione del negozio di app.
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 degli Capgo Live Update, 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 facendo: 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()Questo ti dirà al plugin nativo che l'installazione è riuscita.
Accedi a Capgo CLOUD:
Prima, utilizza il all chiave API presente nel tuo account per accedere con il CLI:
`npx @capgo/cli@latest login YOU_KEY`Aggiungi la tua prima App:
Cominciamo creando la prima app in Capgo Cloud con il CLI.
npx @capgo/cli@latest app addQuesto comando utilizza 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 l'ingresso Capgo se il build è presente.
Potresti anche testarlo con il mio app di sandbox mobile.
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()Esegui poi un npm run build && npx cap copy per aggiornare l'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]Apri l'app, mettila in background e aprila nuovamente, dovresti vedere nei log che l'app ha eseguito 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 la documentazione completa sugli Aggiornamenti in Tempo Reale.
Utilizzare i plugin di Capacitor
Ecco 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/shareNon c'è nulla di particolarmente complesso nel plugin di condivisionema 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() pagina principale (index.vue) a questo: Come abbiamo 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>Dopo aver premuto il pulsante, potrai assistere al bellissimo dialogo di condivisione nativo in azione!
npx cap syncSuccessivamente, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni __CAPGO_KEEP_0__ e risolvere i comuni problemi di layout iOS che causano overflow orizzontale o aree sicure tagliate.
Interfaccia utente nativa con navigazione e transizioni Capgo native
Native-feeling UI with Capgo Native Navigation and Transitions
blog su come creare un'app mobile con Capacitor e Quasar Ionic per costruire applicazioni cross-platform, ma integrarlo con Quasar è un po' un trucco e non vale la pena quando già ne hai Tailwind CSS.
Per un aspetto nativo su 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 una 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'UI di Ionic.
Installare entrambi:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncConfigura la navigazione nativa con il CSS inset mode 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 delle schede di vetro liquido (su iOS si utilizza la rendering di sistema; su Android si 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 le 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>Avvolgere le pagine di routing in cap-router-outlet, cap-page, e cap-content, e chiamare setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa gestisce 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, utilizzare @capgo/tailwind-capacitor (pubblicato come) tailwind-capacitor su npm). Fornisce safe-areas strumenti 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";Utilizza strumenti come pt-safe, pb-safe, e px-safe invece di aggiungerli env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Quasar, apri una PR su GitHub.
Risolvere problemi di layout iOS (Viewport, Area sicura 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 sicura di iOS da un wrapper radice solo
Crea un unico contenitore dell'applicazione e applica il padding dell'area sicura 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 sicura nei capisaldi, nei modali e nei wrapper di layout può rendere l'interfaccia utente tagliata o troppo grande.
Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo contenitore.
Imposta Capacitor iOS contentInset a never primo
In capacitor.config.ts, preferisci l'ingombro nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Mettere insieme l'ingombro automatico di contenuto 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 sovrapponendosi
Il solito colpevole è un elemento che utilizza
, Tailwind 100vw, una larghezza fissa in pixel, o una larghezza w-screenIn Safari Web Inspector, esegui: min-width.
In
[...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-screenpadding di area sicura duplicato, o da un contenitore di larghezza fissata — non dal tag meta viewport stesso.
Conclusioni
Capacitor è un'ottima opzione per creare applicazioni native sulla base di un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.
E con l'aggiunta di Capgocontext
If you would like to learn how to add Capgo to your Next.js app, take a look at the next article :
Se desideri imparare a aggiungere Capacitor al tuo app Next.js, consulta l'articolo successivo:
Continua a leggere da Creare App Mobili con aggiornamenti in tempo reale, Quasar e __CAPGO_KEEP_0__. 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, Sostituti dei Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Sostituti dei Plugin Enterprise Ionic, e Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native.
