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 integrieren Konsta UI für eine verbesserte mobile UI mit Tailwind CSS.

Capacitor ermöglicht Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder ein neues Fähigkeiten 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 UI 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 steile Lernkurve zu erstellen. Sein schlanker API und gestreamtete Funktionalität 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!

Vorbereitung Ihrer SvelteKit-Anwendung

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 Befehl ausgeführt haben, sollten Sie ein neues Verzeichnis im Root Ihres Projekts sehen. build __CAPGO_KEEP_0__ ist ein Teil von Capgo. dist __CAPGO_KEEP_1__ ist ein Teil von Capgo.

Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.

Capacitor zu Ihrem SvelteKit-App hinzufügen

Um jede Web-App 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 Entwicklungspaket und einrichten Sie es innerhalb Ihres Projekts. 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 installieren Sie 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 auf das Android-Projekt später zuzugreifen, müssen Sie Android Studio installieren. Für iOS benötigen Sie einen Mac und sollten Xcode.

zudem sollten Sie in Ihrem Projekt 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 die

Um dieses Problem zu beheben, öffnen Sie das 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 auf 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 durch Erstellung einer +layout.js Seite anlegen src/routes und fügen Sie einfach den folgenden Export hinzu zu +layout.js:

export const prerender = true

Nachdem Sie hinzugefügt und aktualisiert haben +layout.js Nachdem wir unsere mobilen Plattformen hinzugefügt haben, müssen wir unser Projekt neu erstellen, um das build Verzeichnis zu erstellen

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

npm run build
npx cap sync

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

Zusätzlich kann die Synchronisierungsanweisung die nativen Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie neue Capacitor-Pluginsinstallieren, es Zeit ist, npx cap sync wieder zu laufen.

Ohne es zu merken, haben Sie nun den Prozess abgeschlossen, also sehen wir das 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 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 neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Einmal haben Sie Ihre native Projekte eingerichtet, ist das Bereitstellen 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 Ihre SvelteKit-Web-App erfolgreich 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 daran gewöhnt, Hot Reload mit allen modernen Frameworks zu haben, und die gute Nachricht ist, dass Sie dieselbe Funktionalität haben können auf einem mobilen Gerät mit minimalen Anstrengungen!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live-Neustart auf Ihrem Netzwerk durch das Laden der Capacitor-App von der spezifischen URL.

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 App 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 den richtigen IP-Adresse und Port verwenden, wie im Beispiel oben gezeigt.

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

npx cap copy

Der copy Befehl ist ähnlich wie sync, aber er kopiert nur die Änderungen, die an der Web-Folder und Konfiguration vorgenommen wurden, ohne das natives 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, eine Neucompilierung Ihres natives Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann. __CAPGO_KEEP_0__

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

Capacitor-Plugins verwenden

Schauen wir uns an, wie man einen Capacitor-Plugin in Aktion verwendet, den wir vorher erwähnt haben. Dazu können wir ein einfaches Plugin installieren, indem wir Folgendes ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Teilen-Plugin, aber es öffnet den nativen Teilen-Dialog! share() Für dies benötigen wir nur noch die Importierung des Pakets und die Aufruf der Funktion aus unserer App, also ändern wir das src/routes/index.svelte

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

auf Folgendes:

npx cap sync

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und das App dann auf unserem Gerät neu bereitstellen. Dazu führen Sie bitte Folgendes aus:

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

Um Konsta UI in Ihrer Nuxt 3-Anwendung zu verwenden, benötigen Sie tailwind 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 wird die Standardkonfiguration (oder Ihre eigene) von Tailwind CSS mit einigen zusätzlichen Varianten und Hilfsfunktionen erweitern, die für Konsta UI erforderlich sind.

Jetzt müssen wir die Hauptkomponente so einrichten, dass wir einige globale Parameter (wie Wir müssen die gesamte Anwendung mit theme).

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

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

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

__CAPGO_KEEP_0__

Now that everything is set up, we can use Konsta UI Svelte components in our SvelteKit pages.

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 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 SvelteKit und Capacitor erstellt wurde!

Sie sollten die folgende Seite als Ergebnis sehen:

Fazit

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

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

Erfinden Sie heraus, wie Capgo Ihnen helfen kann, bessere Apps schneller zu entwickeln, sich für ein kostenloses Konto anmelden heute.