In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mithilfe von Quasar. Später werden wir lernen, 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 viel Arbeit oder eine komplett neue Art der App-Entwicklung wie bei etwas genanntem React Native lernen müssen.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-App und dann die Einbindung von Capacitor zur Umwandlung in native mobile Apps. Darüber hinaus werden Sie Capacitor verwenden. Capgo in Sekunden live aktualisieren Sie Ihre App.
Über Capacitor
CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jedes Web-Projekt integrieren, und es wird Ihre Anwendung in eine native WebView einhüllen, sodass Xcode und Android Studio Projekte für Sie 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 komplizierte Einrichtung oder steile Lernkurve. Sein schlanker API und gestreamlinertes Funktionsdesign machen es ein 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 App vorbereiten
Um eine neue Quasar App 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 unseres Projekts. Also lassen Sie uns ein einfaches Skript in unserem package.json dies kann verwendet werden, um das Quasar-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem Sie die Kommandozeilenanweisung generateausgeführt haben, sollten Sie ein neues dist Verzeichnis am Root Ihres Projekts erkennen.
Dieses Verzeichnis wird später von Capacitor verwendet, aber für den Moment müssen wir es korrekt einrichten.
Capacitor zu Ihrem Quasar-App hinzufügen
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Kommandos.
Zuerst können wir das Capacitor CLI als Entwicklungspaket installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID zu 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 zuzugreifen, müssen Sie Android Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.
Darüber hinaus sollten Sie ein capacitor.config.ts Datei in Ihrem Projekt finden, die einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist die webDir, die auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist sie ungenau.
Um dies zu korrigieren, öffnen Sie das capacitor.config.json Datei und aktualisieren Sie die webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:
npm run generate
npx cap syncDer erste Befehl npm run generate wird einfach Ihr Quasar-Projekt bauen und den statischen Build kopieren, während der zweite Befehl npx cap sync alle Web code werden so synchronisiert, dass sie auf den nativen Plattformen an den richtigen Orten angezeigt werden können.
Außerdem kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie ein neues __CAPGO_KEEP_0__-Plugin installieren, Capacitor plugins Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal das App auf einem Gerät! npx cap sync Natives Apps erstellen und bereitstellen
Um iOS-Apps zu entwickeln, benötigen Sie
Xcode
installiert und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden. Build and Deploy native apps To develop iOS apps, you need to have Xcode installed, and for Android apps, you need to have Android Studio installed. Moreover, if you plan to distribute your app on the app store, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android.
Wenn Sie mit der Entwicklung nativer Mobilanwendungen neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidNachdem Sie Ihre native Projekte eingerichtet haben, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihre Signierungsanmeldung einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Entwicklerprogramm angemeldet haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:
Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Quasar-Webanwendung auf einem Mobilgerät bereitgestellt. Hier ist ein Beispiel:
Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capgo Live Update
Capgo Live Update ist ein Dienst, der Entwicklern ermöglicht, Updates für ihre Mobilanwendungen ohne das traditionelle App-Store-Übermittlungsverfahren bereitzustellen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App vorzunehmen, ohne auf das App-Store-Überprüfungsverfahren warten zu müssen.
Die Integration von Capgo in Ihre Quasar-Anwendung ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht der Echtzeit-aktualisierungen zu nutzen. Diese Schritt-für-Schritt-Anleitung führt Sie durch die Integration und Implementierung von Capgo Live Update, um Ihnen eine reibungslose 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 den Wurzelordner 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 Ihrem App-Code diese code als Ersatz für CodePush ein:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies wird dem nativen Plugin mitteilen, dass die Installation erfolgreich war.
Anmelden bei Capgo CLOUD:
Zuerst verwenden Sie den all apikey sind in Ihrem Konto vorhanden, um mit dem CLI: zu login zu können
`npx @capgo/cli@latest login YOU_KEY`Hinzufügen Ihres ersten Apps:
Lassen Sie uns mit der Erstellung einer App in Capgo Cloud mit dem CLI beginnen
npx @capgo/cli@latest app addDiese Kommando wird alle Variablen verwenden, die in der Capacitor Konfigurationsdatei definiert sind, um die App zu erstellen
Hochladen der ersten 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`Standardmäßig wird der Versionsname der in Ihrem package.json-File sein
Überprüfen Capgo ob die Build 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 führen Sie dann 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 erfolgreich Ihre erste Live-Update veröffentlicht. Dies ist nur der Anfang dessen, was Sie mit Live-Updates tun können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Updates-Dokumentation.
Verwenden Sie Capacitor-Plugins
Lasst uns einen Blick darauf werfen, wie man einen Capacitor-Plugin in Aktion verwendet, das wir vorher mehrfach erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir folgendes ausführen:
npm i @capacitor/shareEs ist 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 aus 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 syncso:
Wenn wir neue Plugins installieren, müssen wir eine Synchronisierungsoperation durchführen und dann die App auf unser Gerät neu deployen. Um dies zu tun, führen Sie bitte folgende Kommando aus:
Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Teilen-Dialog in Aktion sehen! Optionales Hinzufügen von Konsta UI: und um das Paket zu installieren:
npm i konstaZusätzlich 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 erweitert die Standard- (oder Ihre benutzerdefinierte) Tailwind CSS-Konfiguration mit einigen zusätzlichen Varianten und Hilfsfunktionen, die für Konsta UI erforderlich sind.
Jetzt müssen wir die Haupt- App -Komponente einrichten, damit wir einige globale Parameter (wie theme).
Wir müssen die gesamte App mit App in der pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>Beispiel-Seite
Jetzt, wenn alles eingerichtet ist, können wir Konsta UI Vue-Komponenten in unseren Quasar-Seiten verwenden.
Beispiel: Öffnen Sie 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 erstellt wurde!
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 Hinzufügung von Capgo, ist es noch einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihrer Next.js-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel :
Fahren Sie mit dem Erstellen von mobilen Apps mit Live-Updates, Quasar und Capacitor fort.
Wenn Sie Erstellen Sie mobilen Apps mit Live-Updates, Quasar und Capacitor zum Planen von nativen Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
