Erstellung von mobilen Apps mit live Updates, Quasar und Capacitor.

In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mit Quasar. Später werden wir erfahren, wie man sie in eine mobile App umwandelt, indem man Capacitor verwendet. Wenn Sie möchten, dass Ihre App auf dem Mobilgerät besser aussieht.

Mit Capacitor können Sie Ihre Quasar-Web-App in eine mobile App umwandeln, ohne dass Sie viele schwierige Dinge tun oder eine völlig neue Art der App-Erstellung wie bei React Native lernen müssen.

Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-Anwendung und dann die Einbindung von Capacitor zur Ermöglichung der Entwicklung von nativen mobilen Apps. Darüber hinaus werden Sie auch Capgo benutzen, um live Updates an Ihre App in Sekunden zu senden.

Über Capacitor

CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jede Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, wodurch Xcode- und Android-Studio-Projekte generiert werden. Darüber hinaus bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.

Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken API und seine gestreamte Funktionalität machen es zu einem Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!

Ihre Quasar-Anwendung vorbereiten

Um eine neue Quasar-Anwendung zu erstellen, führen Sie den folgenden Befehl aus:

npm init quasar

Wählen Sie die Option „App mit Quasar CLI“ und dann „Quasar v2“.

Um eine native mobile App zu erstellen, benötigen wir ein export von unserem Projekt. Daher sollten wir ein einfaches Skript in unserem package.json nachdem Sie den Befehl

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

ausführen, sollten Sie ein frisches generateOrdner an der Wurzel Ihres Projekts erkennen. dist Dieser Ordner wird später von __CAPGO_KEEP_0__ verwendet, aber für den Moment müssen wir ihn korrekt einrichten.

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

Adding Capacitor to Your Quasar App

Befehls. sync Zunächst können wir das

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI als Entwicklungsabhängigkeit installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe von “Enter” die Standardwerte für Namen und Bundle-ID akzeptieren.

Als nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.

Schließlich können wir die Plattformen hinzufügen, und Capacitor wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:

# 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

Bis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem Quasar-Projekt beobachten können.

Das sind echte native Projekte!

Um später auf das Android-Projekt zugreifen zu können, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.

Darüber hinaus sollten Sie ein 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__Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der

webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie die __CAPGO_KEEP_0__.config.json:

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

Datei und aktualisieren Sie den Wert von "webDir". Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:

npm run generate
npx cap sync

Die erste Kommandozeilenanweisung npm run generate wird einfach Ihren Quasar-Projekt bauen und die statische Ausgabe kopieren, während das zweite Kommando npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren wird, damit sie in einer App angezeigt werden können.

Zusätzlich kann die Synchronisierungsanweisung die nativen Plattformen aktualisieren und Plugins installieren, daher sollten Sie, wenn Sie ein neues Capacitor-Plugin installieren, wiederholen. npx cap sync Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal die App auf einem Gerät!

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, müssen Sie

Xcode installiert haben, und um Android-Apps zu entwickeln, müssen Sie installiert haben Android Studio ist installiert. Darüber hinaus benötigen Sie, wenn Sie Ihre App im App Store verteilen möchten, eine Registrierung im Apple Developer Program für iOS und im Google Play Console für Android. Wenn Sie mit der nativen mobilen Entwicklung neu sind, können Sie die __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ verwenden, um beide native Projekte leicht zu öffnen:

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

xcode-run

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

__CAPGO_KEEP_0__ Live Update ist ein Dienst, der Entwicklern ermöglicht, Updates für ihre mobilen Apps ohne den traditionellen App Store-Submission-Prozess bereitzustellen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App vorzunehmen, ohne auf den App Store-Review-Prozess warten zu müssen.

Capgo Live Update

Capgo Live Update ist eine Möglichkeit, Updates für Ihre App schnell bereitzustellen, ohne den App Store zu verwenden.

Die Integration von Capgo in Ihre Quasar-Anwendung ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht von Echtzeit-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung führt Sie durch die Integration und Implementierung von Capgo Live Update, um Ihnen eine störungsfreie Aktualisierung zu ermöglichen.

Registrieren Sie sich und zugreifen Sie auf das Capgo-Dashboard:

Es ist Zeit, sich anzumelden und Ihre API-Schlüssel zu erhalten, um Ihre erste Version hochzuladen! Beginnen Sie damit, sich für ein Capgo-Konto anzumelden.

Installieren Sie das Capgo-SDK:

Vom Befehlszeilenfenster direkt in das Verzeichnis Ihrer Capacitor-Anwendung ausführen:

npm i @capgo/capacitor-updater && npx cap sync Um die Erweiterung in Ihre Capacitor-Anwendung zu installieren.

Und fügen Sie dann Ihrer Anwendung dieses code als Ersatz für CodePush hinzu:

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

CapacitorUpdater.notifyAppReady()

Dies wird dem native Plugin mitteilen, dass die Installation erfolgreich war.

Anmelden bei Capgo CLOUD:

Zunächst verwenden Sie den all apikey sind in Ihrem Konto vorhanden, um mit dem CLI: anzumelden

`npx @capgo/cli@latest login YOU_KEY`

Fügen Sie Ihre erste App hinzu:

Lassen Sie uns mit der Erstellung einer App in Capgo Cloud beginnen, die mit der CLI erstellt wird

    npx @capgo/cli@latest app add

Diese Kommandozeile wird alle in der Capacitor Konfigurationsdatei definierten Variablen verwenden, um die App zu erstellen

Hochladen Sie Ihre erste Version:

Führen Sie das Kommando aus, um Ihre code zu bauen und es an Capgo zu senden mit:

npx @capgo/cli@latest bundle upload`

Der Standardname der Version wird der im package.json-File sein

Überprüfen Sie ein Capgo ob die Veröffentlichung vorhanden ist

Sie können es sogar mit meinem mobil-Sandbox-App testen.

Machen Sie den Kanal standardmäßig:

Nachdem Sie Ihr App bei Capgo gesendet haben, müssen Sie Ihren Kanal standardmäßig machen, damit Apps Updates von Capgo erhalten können.

npx @capgo/cli@latest channel set production -s default

Konfigurieren Sie die App zum Validieren von Updates:

Fügen Sie diese Konfiguration in Ihr Haupt-JavaScript-File ein.

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

CapacitorUpdater.notifyAppReady()

Dann tun Sie ein npm run build && npx cap copy um Ihr App zu aktualisieren.

Empfangen Sie ein Live-Update:

Damit Ihre Anwendung ein Live-Update von Deploy empfangen kann, müssen Sie die App auf einem Gerät oder einem Emulator ausführen. Der einfachste Weg, dies zu tun, besteht darin, einfach den folgenden Befehl auszuführen, um Ihre lokale App in einem Emulator oder einem mit Ihrem Computer verbundenen Gerät zu starten.

  npx cap run [ios | android]

Öffnen Sie die App, stellen Sie sie in den Hintergrund und öffnen Sie sie erneut, Sie sollten im Protokoll sehen, dass die App die Aktualisierung durchgeführt hat.

Glückwunsch! 🎉 Sie haben Ihre erste Live-Update erfolgreich implementiert. Dies ist nur der Anfang dessen, was Sie mit Live-Updates erreichen können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Updates-Dokumentation.

Verwenden Sie Capacitor-Plugins

Lassen Sie uns einen Blick darauf werfen, wie man einen Capacitor-Plugin in Aktion verwendet, das wir vorher mehrmals erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:

npm i @capacitor/share

Es gibt nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf! share() Für dies benötigen wir nun nur noch das Paket importieren und die entsprechende Funktion von unserer App aufrufen, also ändern wir das

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

pages/index.vue

npx cap sync

zu diesem:

Wie erwähnt, wenn man neue Plugins installiert, muss man eine Synchronisierungsoperation durchführen und dann die App auf das Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte Folgendes aus:

Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Teilen-Dialog in Aktion sehen! Optional: Konsta UI hinzufügen und um das Paket zu installieren:

npm i konsta

Darüber hinaus müssen Sie Ihre tailwind.config.js Datei:

// 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 wird die Standardkonfiguration (oder Ihre benutzerdefinierte) von Tailwind CSS mit einigen zusätzlichen Varianten und Hilfsfunktionen erweitern, die für Konsta UI erforderlich sind.

Jetzt müssen wir die Haupt Komponente einrichten, damit wir einige globale Parameter (wie Wir müssen die gesamte Anwendung mit theme).

in der App Beispiel-Seite pages/_app.vue:

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

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

Jetzt, wenn alles eingerichtet ist, können wir Konsta UI Vue-Komponenten in unseren Quasar-Seiten verwenden.

Beispiel: Lassen Sie uns

For example, let’s open pages/index.vue und ändern Sie es in folgendes:

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

Wenn der Live-Neustart nach der Installation aller notwendigen Komponenten aus der Synchronisation ist, versuchen Sie, alles neu zu starten. Sobald Sie das getan haben, sollten Sie eine mobile App mit einem etwas nativen Aussehen sehen, die mit Quasar und Capacitor!

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Einführung von Capgo, ist es sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, um sicherzustellen, dass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihrer Next.js-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel :