Im sich wandelnden Umfeld 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 Codierungs-Effizienz.
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, bieten wir Ihnen eine umfassende Anleitung zum Aufbau Ihrer Anwendung und zur Nutzung von native Plugins mit CapacitorJS.
‣ 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 Android-App-Entwicklung
- Xcode für die iOS-App-Entwicklung (nur macOS)
Hinweis: Die iOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Die Einrichtung Ihres Capacitor-Projekts
Um eine Capacitor-Anwendung zu erstellen, navigieren Sie zu Ihrem gewünschten Ordner und führen Sie die folgende Befehl in Ihrem Terminal aus:
npm init @capacitor/appFolgen Sie den Anweisungen, um das Paket zu installieren und Ihr Projekt einzurichten. Mit 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.mdMit der ersten Einrichtung abgeschlossen, sind Sie bereit, weiterzumachen.
‣ Projektstrukturänderung
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also lassen Sie uns unser Projekt entsprechend umstrukturieren:
- Erstellen einen neuen Ordner
srcin dem Hauptverzeichnis. - Erstellen eine neue Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei
vite.config.jsin dem Hauptverzeichnis. - Löschen den
capacitor-welcome.jsDatei vonwww/js/.
Dein neues Verzeichnisstruktur sollte wie folgt 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
Ändern wir einige Dateien, damit sie mit Pure JavaScript funktionieren:
www/index.html
- Entferne die Skriptimporte für Ionische PWA-Elemente falls du die App nicht als PWA veröffentlichen möchtest:
<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>-
Lösche das
<capacitor-welcome>HTML-Element aus dem Body. -
Update die Skriptimport von
capacitor.jsbis zujs/main.js. Dies wird unser gebundelter JavaScript-Datei sein. -
Entfernen Sie die
js/capacitor-welcome.jsimport. Ihrindex.htmlist jetzt bereit.
vite.config.js
Um unsere Node.js-Module mit Vitezu bündeln, benötigen wir eine Konfigurationsdatei, die die Ausgabedestination für unsere gebundelte Skript festlegt. Die folgende Konfiguration wird die Datei src/index.js und bündelt sie 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
In der capacitor.config.json Datei, suchen Sie nach "bundledWebRuntime": true eigenschaft und ändern Sie es zu false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir Vite für diesen Zweck verwenden können.
Mit diesen Änderungen ist die grundlegende Konfiguration 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 Ihre Anwendung logik in der src/index.js Datei schreiben. Hier können Sie die notwendigen 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 buildDieser Befehl generiert das main.js Datei in Ihrem www/js Verzeichnis, das Ihre index.html Datei referenziert.
‣ Testen und Debuggen
Capacitor bietet eine bequeme Möglichkeit, Ihre Anwendung auf verschiedenen Plattformen zu testen. Verwenden Sie die folgenden Befehle, um Ihre App in der jeweiligen Plattform-Entwicklungs-Umgebung zu öffnen:
Für Android:
npx cap add android
npx cap open androidFür iOS (macOS nur):
npx cap add ios
npx cap open iosFür Web/PWA:
npx cap serveDiese 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.
‣ Fazit
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 es für die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem Weg, eine robuste und vielseitige Anwendung zu erstellen.
Denken Sie daran, gründlich auf allen Plattformen zu testen und die nativen Plugins von Capacitor zu nutzen, um die Funktionalität Ihrer App zu verbessern. Viel Spaß beim Programmieren!
Fortsetzen Sie mit: Eine Schritt-für-Schritt-Anleitung zur Entwicklung von Plattformenübergreifenden Apps mit CapacitorJS
Wenn Sie native Plugin-Arbeit planen und mit ihr verbinden möchten Die Entwicklung von Plattformenübergreifenden Apps mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung zur Planung von native Plugin-Arbeit, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf 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 zur Produktionsablauf in Ionische Unternehmens-Plugin-Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.
