Mit SvelteKit und Capacitor mobile Apps erstellen

In diesem Tutorial beginnen wir mit einer neuen SvelteKit Anwendung und wechseln zur nativen mobilen Entwicklung mit Capacitor. Optional können Sie auch eine verbesserte Tailwind CSS-Mobil-UI mit Konsta UI integrieren.

Capacitor ermöglicht Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass Sie bedeutende Änderungen vornehmen oder eine neue Fähigkeit wie React Native erlernen müssen.

Folgen Sie diesem Schritt-für-Schritt-Leitfaden, um Ihre SvelteKit-Anwendung in eine mobile App mit Capacitor umzuwandeln und, wenn gewünscht, Ihre mobile UI mit Konsta UI verbessern.

Über Capacitor

CapacitorJS ist ein echter Game-Changer! Es kann problemlos in jede Web-Projekt integriert werden, indem Ihre Anwendung in eine native WebView eingeschlossen und native Xcode- und Android Studio-Projekte generiert werden. Seine Plugins bieten Zugriff auf native Gerätefeatures wie die Kamera über eine JavaScript-Brücke.

Capacitor ermöglicht Ihnen, eine fantastische native mobile App ohne komplizierte Einrichtung oder steile Lernkurve zu erstellen. Sein schlanker API und gestreamlinertes Funktionsdesign machen es einfach, es in Ihr Projekt zu integrieren. Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!

Ihr SvelteKit-Projekt vorbereiten

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

npm create svelte@latest my-app
cd my-app
npm install
npm run build

Nachdem Sie den build Befehl ausgeführt haben, sollten Sie ein neues dist Verzeichnis am Root Ihres Projekts sehen.

Dieses Verzeichnis wird später von Capacitor verwendet, aber für den Moment müssen wir es korrekt einrichten.

Capacitor in Ihr SvelteKit-Projekt hinzufügen

Um jede Web-Anwendung in einen native mobilen Container zu packen, müssen wir einige erste Schritte ausführen. Anschließend ist es so einfach wie das Ausführen eines einzigen sync Befehls.

Zuerst müssen Sie den Capacitor CLI installieren als Entwicklungsabhängigkeit installieren und innerhalb Ihres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabeaufforderung “Enter” die Standardwerte für Namen und Bundle-ID akzeptieren.

Installieren Sie als Nächstes das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

Schließlich fügen Sie die Plattformen hinzu, und Capacitor wird für jede Plattform einen Ordner am Root Ihres Projekts erstellen:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your SvelteKit 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

In diesem Punkt sollten Sie neue ios und android Ordner in Ihrem SvelteKit-Projekt sehen.

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 der webDir, der auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist dies falsch.

Um dies zu beheben, öffnen Sie die capacitor.config.ts -Datei und aktualisieren Sie den webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Nachdem wir unsere Capacitor-Einstellungen aktualisiert haben, lassen wir unser Sveltekit-Projekt zu einer statischen Anwendung umwandeln, indem wir das entsprechende statische Adapter-Paket herunterladen:

npm i -D @sveltejs/adapter-static

Nachdem das Paket installiert ist, müssen wir es anpassen svelte.config.js Datei aus dem Auto-Adapter zu statisch:

import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
}

export default config

Mit dem svelte.config.js aktualisiert, müssen wir eine prerender Option hinzufügen, indem wir eine +layout.js Seite zu src/routes und fügen einfach folgende Export hinzu zu +layout.js:

export const prerender = true

Nachdem wir die Seite hinzugefügt und aktualisiert haben, müssen wir unsere mobilen Plattformen hinzufügen, unser Projekt neu aufbauen, um das Verzeichnis "build" zu erstellen. __CAPGO_KEEP_0__ Sie können es tun, indem Sie die folgenden Befehle ausführen: Der erste Befehl baut Ihr SvelteKit-Projekt und kopiert die statische Build, während der zweite Befehl

synchronisiert alle Web __CAPGO_KEEP_0__ in die richtigen Orte der nativen Plattformen, damit sie in einer App angezeigt werden können.

npm run build
npx cap sync

Zusätzlich kann der Synchronisierungsbefehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie neue npm run build __CAPGO_KEEP_0__ Plugins npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

build Capacitor pluginsThe first command will build your SvelteKit project and copy the static build, while the second command will sync all the web __CAPGO_KEEP_0__ into the right places of the native platforms so they can be displayed in an app. npx cap sync wieder.

Ohne es zu merken, hast du den Prozess nun abgeschlossen, also sehen wir mal, wie die App auf einem Gerät aussieht!

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigst du Xcode installiert, und um Android-Apps zu entwickeln, benötigst du Android Studio installiert. Darüber hinaus musst du, wenn du deine App im App-Store verteilen möchtest, dich im Apple Developer Programm für iOS und im Google Play Console für Android anmelden.

Wenn du neu bei der nativen mobilen Entwicklung bist, kannst du die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald du deine native Projekte eingerichtet hast, ist das Bereitstellen deiner App auf einem verbundenen Gerät einfach. In Android Studio musst du nur auf alles warten, und du kannst deine App auf einem verbundenen Gerät bereitstellen, ohne dass du Einstellungen ändern musst. Hier ist ein Beispiel:

In Xcode musst du deine Signierungsanmeldung einrichten, um deine App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn du das noch nie gemacht hast, führt Xcode dich durch den Prozess (aber wiederum benötigst du dich im Developer Programm angemeldet zu haben). Anschließend kannst du einfach auf 'Play' klicken, um die App auf deinem verbundenen Gerät auszuführen, das du oben auswählen kannst. Hier ist ein Beispiel:

Herzlichen Glückwunsch! Sie haben erfolgreich Ihre SvelteKit-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

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

Capacitor Live Reload

Bis jetzt sind Sie wahrscheinlich an heißen Neuladen mit allen modernen Frameworks gewöhnt, und die gute Nachricht ist, dass Sie die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk indem Sie die Capacitor-App laden, die den Inhalt von der spezifischen URL bezieht.

Der erste Schritt besteht darin, Ihre lokale IP-Adresse zu ermitteln. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl in der Terminal-Anwendung ausführen:

ipconfig getifaddr en0

Auf Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unseren capacitor.config.ts Datei:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Stellen Sie sicher, dass Sie den richtigen IP-Adresse und Portwie im Beispiel oben gezeigt.

Jetzt können wir diese Änderungen anwenden, indem wir sie in unser natives Projekt übernehmen:

npx cap copy

Der copy Befehl ähnelt sich syncaber wird nur die Änderungen im Web-Ordner übernehmen und Konfiguration, ohne die native Projekt zu aktualisieren.

Sie können Ihr App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Svelte App ändern, wird die App automatisch neu geladen und zeigt die Änderungen an!

Beachten Sie dass, wenn Sie neue Plugins wie die Kamera installieren, ein Neubuild des native Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.

Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der code-Block oben zeigt die Standard-SvelteKit-Port für Demonstrationszwecke an.

Mit Capacitor-Plugins

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

npm i @capacitor/share

Es ist nichts Besonderes an dem Share-Pluginaber es öffnet den native Share-Dialog! Für dies benötigen wir nun nur noch das Paket zu importieren und die Funktion aufzurufen. share() Funktion aus unserer App, also ändern wir das __CAPGO_KEEP_0__ Als wir vorher erwähnt haben, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Um dies durchzuführen, führen Sie bitte folgenden Befehl aus:

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

<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>

Nachdem Sie auf den Button geklickt haben, können Sie den schönen nativen Teilen-Dialog in Aktion sehen!

npx cap sync

Hinzufügen von Konsta UI

Um Konsta UI in Ihrer Nuxt 3 App zu verwenden, benötigen Sie

tailwind bereits installiert und um das Paket zu installieren: Zusätzlich müssen Sie Ihre

npm i konsta

Datei anpassen: tailwind.config.js Dies wird die Standard- (oder Ihre benutzerdefinierte) Tailwind CSS-Konfiguration mit einigen zusätzlichen Varianten und Hilfsfunktionen erweitern, die für Konsta UI erforderlich sind.

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

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

konstaConfig src/routes/index.svelte

Jetzt müssen wir die Hauptkomponente einrichten, damit wir einige globale Parameter setzen können (wie z.B. App-Komponente Wir müssen die gesamte App mit theme).

in der App Beispiel-Seite src/routes/+layout.svelte:

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

<App theme="ios">
  <slot />
</App>

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

Beispielweise öffnen wir

und ändern es in folgendes: src/routes/index.svelte Wenn der Live-Reload 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 SvelteKit und __CAPGO_KEEP_0__ erstellt wurde!

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

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

  <Block strong>
    <p>
      Here is your SvelteKit & 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>

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with SvelteKit and Capacitor!

konsta-sveltekit

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung nativer 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 Zugabe von Capgo, ist es noch 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 erfahren möchten, wie Sie Capgo in Ihre SvelteKit-Anwendung einfügen können, nehmen Sie einen Blick auf das nächste Artikel:

Lernen Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen. Jetzt anmelden Mithilfe von