Mit SvelteKit und Capacitor mobile Apps erstellen

In diesem Tutorial beginnen wir mit einer neuen SvelteKit Anwendung und wechseln zur Entwicklung von nativen mobilen Anwendungen mit Capacitor. Optional können Sie auch Konsta UI integrieren für eine verbesserte Tailwind CSS mobile Benutzeroberfläche. __CAPGO_KEEP_0__ ermöglicht es Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder das Erlernen einer neuen Fähigkeit wie React Native erforderlich sind.

Capacitor allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like React Native.

Verfolgen Sie diese Schritt-für-Schritt-Anleitung, um Ihr SvelteKit-App in eine mobile App umzuwandeln, mithilfe von Capacitor und, wenn gewünscht, Ihre mobile UI mit Konsta UI zu 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.

Capacitor ermöglicht Ihnen, eine fantastische native mobile App ohne einen komplizierten Setup oder steilen Lernkurven 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-App

Um eine neue SvelteKit-App 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 am Wurzelort Ihres Projekts sehen. build Dieses Verzeichnis wird später von __CAPGO_KEEP_0__ verwendet, aber für den Moment müssen wir es korrekt einrichten. dist __CAPGO_KEEP_0__ in Ihre SvelteKit-App hinzufügen

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

Adding Capacitor to Your SvelteKit App

Um eine neue SvelteKit-App zu erstellen, führen Sie den folgenden Befehl aus: sync Kommando.

Installieren Sie zunächst das Capacitor CLI als Entwicklungspaket und konfigurieren 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.

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

Zu diesem Zeitpunkt sollten Sie neue ios und android Ordner in Ihrem SvelteKit-Projekt sehen.

Das sind echte native Projekte!

To haben Sie Zugriff auf das Android-Projekt später, 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 die

webDir capacitor.config.ts To korrigieren, öffnen Sie das 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 von der Auto-Adapter- zu einer statischen Anpassung ä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 der svelte.config.js -Datei aktualisiert, müssen wir eine prerender -Option hinzufügen, indem wir eine +layout.js -Seite erstellen src/Routen und fügen Sie einfach folgenden Export hinzu zu Nachdem Sie hinzugefügt und aktualisiert haben die:

export const prerender = true

Seitenvorlage.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:

Der erste Befehl

npm run build
npx cap sync

wird Ihr SvelteKit-Projekt aufbauen und die statische Build kopieren, während der zweite Befehl npm run build alle Web __CAPGO_KEEP_0__ synchronisieren wird, um sie in die richtigen Orte der nativen Plattformen zu platzieren, damit sie in einer App angezeigt werden können. 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.

Darüber hinaus aktualisiert der Synchronisierungs-Befehl möglicherweise die nativen Plattformen und installiert Plugins, sodass Sie, wenn Sie neue Capacitor Pluginsinstallieren, es Zeit ist, npx cap sync again.

ohne es zu merken, haben Sie nun den Prozess 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 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.

Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide nativen 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:

In Xcode müssen Sie Ihre Signierungsaccount einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das 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 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, dass Sie bei allen modernen Frameworks Hot Reload haben, und die gute Nachricht ist, dass Sie dasselbe Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können!

Zulassen Sie Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk durch das Laden des Inhalts durch die 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 im Terminal 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 Portwie im Beispiel oben gezeigt, verwenden.

Jetzt können wir diese Änderungen anwenden, indem wir sie in unsere native Projekt kopieren:

npx cap copy

Die copy Der Befehl ähnelt sich sync, aber es wird nur Die Änderungen im Web-Ordner und die Konfiguration werden übernommen, ohne das native Projekt zu aktualisieren. Sie können Ihre App noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Svelte-Anwendung ändern,

die App wird 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. Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der __CAPGO_KEEP_0__-Block oben zeigt die Standard-Port für SvelteKit zur Demonstration.

Mit code-Plugins

Schauen wir uns an, 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:

Capacitor

npm i @capacitor/share

There’s nothing fancy about the Teilen-Plugin, aber es öffnet das native Teilen-Fenster! share() Für dies benötigen wir nur noch das Paket importieren und die Funktion aus unserer App aufrufen, 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>

zum Beispiel so:

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 folgende Kommando aus:

Nachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Fenster in Aktion sehen!

Konsta UI hinzufügen Um Konsta UI in Ihrer Nuxt 3 App zu verwenden, benötigen Sie Tailwind bereits installiert zu haben und das Paket mit folgender Kommando zu installieren:

npm i konsta

Darüber hinaus müssen Sie Ihren tailwind.config.js file:

// 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 erweitern Sie 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 Anwendung mit App in der src/routes/+layout.svelte:

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

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

Beispiel-Seite

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

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>

If der Live-Reload nicht synchron ist, nachdem alle notwendigen Komponenten installiert wurden, 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 Zugabe von Capgoist 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 Ihre SvelteKit-App hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:

Erhalten Sie Informationen darüber, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen. Registrieren Sie sich für ein kostenloses Konto heute.

Bleiben Sie bei Building Mobile Apps mit SvelteKit und Capacitor

Wenn Sie Building Mobile Apps mit SvelteKit und Capacitor um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD für den Produktworkflow in Capgo CI/CD, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, Capgo Integrations für den Produktworkflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Aktionen-Integration für die Implementierungsdetails in GitHub Aktionen-Integration.