Mit CapacitorJS Cross-Plattform-Anwendungen entwickeln: Ein Schritt-für-Schritt-Leitfaden

Im sich wandelnden Bereich der mobilen Anwendungs-Entwicklung hat die Entwicklung von Progressive Web-Anwendungen (PWAs) den Weg für neue Cross-Plattform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es, webbasierte Anwendungen in App-Stores ohne sich ausschließlich auf native code zu verlassen. CapacitorJS, die es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und der Webseite mit einem einzigen JavaScript-Codebase zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Kodiergeschwindigkeit.

Diese Anleitung konzentriert sich auf die Erstellung einer Anwendung mit reinem JavaScript ohne zusätzliche Frameworks. Trotz der Herausforderungen bei der Suche nach Ressourcen für die Entwicklung von reinen JavaScript-Anwendungen im Jahr 2021, sind wir hier, um Ihnen eine umfassende Anleitung zur Erstellung Ihrer Anwendung und zur Nutzung von native Plugins mit CapacitorJS bereitzustellen.

‣ Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:

• Node.js (v14.16.1) oder höher
• NPM (v7.6.2) oder höher
• Android Studio für die Entwicklung von Android-Anwendungen
• Xcode für die Entwicklung von iOS-Anwendungen (nur macOS)

Hinweis: Die Entwicklung von iOS-Anwendungen ist nur auf einem macOS-Gerät möglich.

‣ Die Einrichtung Ihres Capacitor Projekts

Um ein Capacitor-Anwendungsprojekt zu erstellen, navigieren Sie zu Ihrem gewünschten Verzeichnis und führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm init @capacitor/app

Folgen Sie den Anweisungen, um das Paket zu installieren und Ihr Projekt einzurichten. Bei Capacitor v3 sollte Ihr Projektverzeichnis wie folgt aussehen:

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

Mit der ersten Einrichtung abgeschlossen, sind Sie bereit, weiterzumachen.

‣ Projektstrukturänderung

Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also ändern wir unsere Projektstruktur entsprechend:

• Erstellen ein neues Verzeichnis src in dem Hauptverzeichnis.
• Erstellen ein neues Skriptdatei index.js in src/.
• Erstellen die Vite-Konfigurationsdatei vite.config.js in der Hauptverzeichnis.
• Entfernen die capacitor-welcome.js Datei aus www/js/.

Ihr neues Verzeichnisstruktur sollte folgendermaßen aussehen:

src/
  index.js
www/
  css/
    style.css
  js/
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js

‣ Anpassen an Pure JavaScript

Lassen Sie uns einige Dateien anpassen, um mit reinem JavaScript zu arbeiten:

www/index.html

1. Entfernen Sie die Skriptimporte für Ionic PWA-Elemente Wenn Sie die App nicht als PWA veröffentlichen:

<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>

2. Löschen Sie das <capacitor-welcome> HTML-Element aus dem Körper.

3. Aktualisieren Sie die Skriptimport von capacitor.js auf js/main.jsDies wird unser gebundelter JavaScript-Datei sein.

4. Entfernen Sie das js/capacitor-welcome.js Importieren Sie nicht mehr. Ihr index.html ist jetzt bereit.

vite.config.js

Um unsere Node.js-Module mit ViteWir benötigen eine Konfigurationsdatei, die die Ausgabedestination für unser gebundenes Skript spezifiziert. Die folgende Konfiguration wird das Skript src/index.js und bündelt es für die Produktion als www/js/main.js:

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  build: {
    outDir: path.resolve(__dirname, 'www'),
    rollupOptions: {
      input: './src/index.js',
      output: {
        format: 'es',
        file: path.resolve(__dirname, 'www/js/main.js')
      }
    }
  }
});

capacitor.config.json

Im capacitor.config.json Datei, suchen Sie nach der "bundledWebRuntime": true Eigenschaft und ändern Sie sie auf false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir stattdessen Vite für diesen Zweck verwenden können.

Mit diesen Änderungen ist die grundlegende Einrichtung Ihrer Capacitor-Anwendung abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.

‣ Die Entwicklung Ihrer App

Jetzt, dass der Boden bereitet ist, können Sie mit der Implementierung Ihrer Anwendung logik in der src/index.js Datei beginnen. Hier können Sie die erforderlichen Node.js-Module importieren, die Funktionalität Ihrer App definieren und mit den nativen Plugins von Capacitor interagieren.

Denken Sie daran, Vites Build-Befehl auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vorgenommen haben:

vite build

Dieser Befehl generiert das main.js Datei in Ihrem www/js Verzeichnis, das Ihre index.html Datei verweist.

‣ Testen und Debuggen

Capacitor bietet eine praktische Möglichkeit, Ihre Anwendung auf verschiedenen Plattformen zu testen. Verwenden Sie die folgenden Befehle, um Ihre App in der jeweiligen Plattform-Entwicklungsumgebung zu öffnen:

Für Android:

npx cap add android
npx cap open android

Für iOS (macOS nur):

npx cap add ios
npx cap open ios

Für Web/PWA:

npx cap serve

Diese Befehle ermöglichen Ihnen, Ihre Anwendung in Android Studio, Xcode oder Ihrem Webbrowser auszuführen, wo Sie testen und debuggen können, wie nötig.

‣ Conclusion

Die Entwicklung von Plattformenübergreifenden Anwendungen mit CapacitorJS mithilfe von reinem JavaScript ist eine kosteneffiziente und effiziente Möglichkeit, Apps für mehrere Plattformen mit einer einzigen Codebasis zu erstellen. Durch die Befolgung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es umstrukturiert und Ihre App auf die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem richtigen Weg, eine robuste und vielseitige Anwendung zu erstellen.

Denken Sie daran, gründlich auf allen Plattformen zu testen und die Capacitor-Eigenschaften zur Verbesserung der Funktionalität Ihrer App zu nutzen. Viel Erfolg beim Programmieren!

Fortsetzen Sie mit Entwickeln von Apps für mehrere Plattformen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung

Wenn Sie bereits Entwickeln von Apps für mehrere Plattformen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung um native Plugin-Arbeit zu planen, mit ihr zu verbinden Capgo-Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor-Plugins von Capgo zur Implementierungsdetail in Capacitor-Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Ionische Unternehmens-Plugin-Alternativen für das Produktworkflow in Ionic Enterprise Plugin Alternativen und Capgo nativee Native Builds für das Produktworkflow in Capgo Native Builds.