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

In questo tutorial, inizieremo creando una nuova app web utilizzando QuasarPiù avanti, impareremo a trasformarla in un'app mobile utilizzando Capacitor. Se desiderate che la vostra app si presenti meglio sul mobile.

Con Capacitor, potete trasformare la vostra app web Quasar in un'app mobile senza dover fare molte cose difficili o imparare un modo completamente nuovo di creare app come fareste con qualcosa chiamato 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 To invia aggiornamenti live per il tuo app in pochi secondi.

About 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 i progetti Xcode e Android Studio nativi 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 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 funzionale nativa con Capacitor!

Preparazione dell'app Quasar

Esegui il seguente comando per creare una nuova app 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 That può essere utilizzato per creare e copiare il progetto Quasar:

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

Dopo l'esecuzione del comando generatepotresti notare 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 progetto Quasar

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

Innanzitutto, 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.

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 nuovi 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"
}

Prova 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 code web nei posti giusti delle piattaforme native affinché possano essere visualizzate nell'app.

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

Senza accorgersene, si è ora effettivamente completato, quindi vediamo l'applicazione su un dispositivo!

Costruisci e distribuisci app native

Per sviluppare app iOS, è necessario avere Xcode installato, e per le app Android, è necessario avere Android Studio installato. Inoltre, se si prevede di distribuire l'applicazione 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 mobile nativo, 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 aspettare che tutto sia pronto e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, devi impostare il tuo account di firma per distribuire la tua app 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 per sviluppatori). 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 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 tradizionale processo di pubblicazione dell'App Store. Ciò può essere un modo comodo per risolvere velocemente dei bug o fare piccoli aggiornamenti a un'app senza dover aspettare 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 Capgo, consentendoti di fornire aggiornamenti senza soluzione di continuità.

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

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

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ù, visualizza il completo documentazione degli Aggiornamenti in Tempo Reale.

Usa Capacitor Plugin

Prendiamo in considerazione 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 sofisticato nel Plugin di condivisione, ma porta comunque in evidenza 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 questo: Come menzionato in precedenza, 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, puoi assistere al bellissimo dialogo di condivisione nativo in azione!

npx cap sync

Aggiungere Konsta UI facoltativamente

Per utilizzare Konsta UI nell'app Quasar, è necessario avere

tailwind già installato Let’s take a look at how to use a __CAPGO_KEEP_0__ plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running: e per installare il pacchetto:

npm i konsta

Inoltre, è necessario modificare il tuo tailwind.config.js file:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Estenderà la configurazione di default (o la tua personalizzata) Tailwind CSS con alcune varianti e utilità di aiuto richieste per Konsta UI.

Ora abbiamo bisogno di configurare il App componente principale per poter impostare alcuni parametri globali (come theme).

Abbiamo bisogno di avvolgere l'intera app con App in il pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Pagina di esempio

Ora che tutto è stato configurato, possiamo utilizzare i componenti Vue di Konsta UI nelle nostre pagine Quasar.

Ad esempio, apriamo pages/index.vue e cambialo con il seguente:

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

Se il live reload è fuori sincronia dopo aver installato tutti i componenti necessari, prova a riavviare tutto. Una volta fatto, dovresti vedere un'app mobile con un aspetto nativo abbastanza, costruita con Quasar e Capacitor!

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 Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'app, assicurandoti 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 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 Directory dei Plugin Capgo per il workflow del prodotto in Directory dei Plugin Capgo, Plugin Capacitor sviluppati da Capgo per i dettagli di implementazione in Plugin Capacitor sviluppati da Capgo, Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiunta o Aggiornamento dei Plugin, Sostituti dei Plugin Enterprise Ionic per il workflow del prodotto in Sostituti dei Plugin Enterprise Ionic, e Costruzione Nativa Capgo per il workflow del prodotto in Costruzione Nativa Capgo.