Mit SvelteKit und Capacitor mobile Apps erstellen

In diesem Tutorial beginnen wir mit einer neuen SvelteKit App und wechseln zu der Entwicklung von mobilen Apps mit Capacitor. Optional können Sie auch Konsta UI integrieren. Martin Donadieu für eine verbesserte Tailwind CSS-Mobilbenutzeroberfläche.

Capacitor ermöglicht Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder ein neues Wissen wie React Native erforderlich sind.

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

Über Capacitor

CapacitorJS ist ein Game-Changer! Es kann problemlos in jede Web-Projekt integriert werden, indem Ihre Anwendung in eine native Webview eingehüllt wird 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 einen komplizierten Setup oder einen steilen Lernkurve zu erstellen. Sein schlanker API und seine gestreamte Funktionalität machen es leicht, ihn in Ihr Projekt zu integrieren. Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erstellen!

Ihre SvelteKit-Anwendung vorbereiten

Um eine neue SvelteKit-Anwendung zu erstellen, führen Sie den 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 richtig einrichten.

Capacitor in Ihre SvelteKit-Anwendung hinzufügen

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

Zuerst installieren Sie das Capacitor CLI als Entwicklungszusammenhang und setzen Sie es innerhalb Ihres Projekts ein. Während der Einrichtung können Sie auf „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID zu 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 erstellt Ordner für jede Plattform am Root Ihres Projekts:

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

Das sind echte native Projekte!

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

installieren. Darüber hinaus sollten Sie ein capacitor.config.ts file in your project, which contains some basic Capacitor settings used 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.ts Datei und aktualisieren Sie die webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Da 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 das svelte.config.js Datei vom Auto-Adapter zu statisch ändern:

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 Sie einfach folgenden Export hinzu zu +layout.js:

export const prerender = true

Nachdem Sie hinzugefügt und aktualisiert haben den +layout.js Seite, müssen wir unsere mobilen Plattformen hinzufügen, unser Projekt neu aufbauen, um das build Ordner

Sie können es tun, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Der erste Befehl npm run build wird Ihr SvelteKit-Projekt erstellen und die statische Buildkopie anlegen, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der native Plattformen synchronisiert, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die native Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie neue Capacitor-Pluginsinstallieren, es Zeit ist, npx cap sync wieder

ohne es zu merken, haben Sie den Prozess nun abgeschlossen, also sehen wir uns das App auf einem Gerät an!

Native Apps entwickeln und bereitstellen

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und um Android-Apps zu entwickeln, benötigen Sie Android Studio installiert. Darüber hinaus benötigen Sie, wenn Sie Ihre App im App-Store verteilen möchten, eine Registrierung im Apple Developer Programm für iOS und im Google Play Console für Android.

Wenn Sie mit der nativen mobilen Entwicklung noch nicht vertraut sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald 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 Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

android-studio-run

In Xcode müssen Sie Ihre Signierungsaccount 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 benötigen Sie eine Registrierung im Developer Programm). 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:

xcode-run

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

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

Capacitor Live Reload

Bis jetzt sind Sie wahrscheinlich mit der Hot-Reload-Funktion aller modernen Frameworks vertraut, und die gute Nachricht ist, dass Sie die gleiche Funktionalität auf einem mobilen Gerät haben können mit minimalen Anstrengungen!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live-Neustart auf Ihrem Netzwerk durch die Capacitor-Anwendung, die den Inhalt von der spezifischen URL lädt.

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

Bei Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die Anwendung direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem 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 die richtige IP-Adresse und den Port verwendenwie im Beispiel oben gezeigt.

Jetzt können wir diese Änderungen über unsere native Projekt übernehmen:

npx cap copy

Der copy Befehl ist ähnlich wie sync, aber er wird nur die Änderungen im Web-Ordner und die Konfiguration übernehmen, ohne das native Projekt zu aktualisieren.

Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Svelte-Anwendung ä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 Ihres native Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.

Beachten Sie, dass Sie den richtigen IP-Adresse und Port in Ihrer Konfiguration verwenden sollten. Der code-Block oben zeigt die Standard-Port für SvelteKit zur Demonstration.

Mit Capacitor-Erweiterungen arbeiten

Lassen Sie uns sehen, wie man eine Capacitor-Erweiterung in Aktion verwendet, die wir vorher mehrmals erwähnt haben. Um dies zu tun, können wir eine einfache Erweiterung installieren, indem wir folgendes ausführen:

npm i @capacitor/share

Es gibt nichts Besonderes an der Share-Erweiterungaber sie öffnet den nativen Teilen-Dialog! Für dies benötigen wir jetzt nur noch die Verwendung des share() Funktion aus unserer App, also ändern wir das src/routes/index.svelte in folgendes:

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

Wie erwähnt, müssen wir bei der Installation neuer Erweiterungen eine Synchronisationsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie folgenden Befehl aus:

npx cap sync

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

Konsta UI hinzufügen

Um Konsta UI in Ihrer Nuxt 3-Anwendung zu verwenden, müssen Sie die Erweiterung haben Tailwind ist bereits installiert und um das Paket zu installieren:

npm i konsta

Zusätzlich müssen Sie Ihre tailwind.config.js Datei anpassen:

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

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

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

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

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

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

__CAPGO_KEEP_0__

Zum Beispiel öffnen Sie src/routes/index.svelte und ändern Sie es in folgendes:

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

Wenn die Live-Neustartfunktion nach der Installation aller notwendigen Komponenten außer Synchron 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 Capacitor erstellt wurde!

Sie sollten die folgende Seite als Ergebnis sehen:

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 sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerkorrekturen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihre SvelteKit-App 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, sich für ein kostenloses Konto anmelden heute.