In der sich entwickelnden Welt der mobilen Anwendungs-Entwicklung hat der Aufstieg von Progressive Web-Anwendungen (PWAs) den Weg für neue cross-plattformische Laufzeiten geebnet. Diese Laufzeiten ermöglichen es webbasierten Anwendungen, in App-Stores ohne Rücksicht auf native code präsent zu sein. Eine solche Technologie, die dies erleichtert, ist CapacitorJS, die es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und dem Web mit einer einzigen JavaScript-Codebasis 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 Entwicklung von Android-Anwendungen
- Xcode für die Entwicklung von iOS-Anwendungen (nur macOS)
HinweisiOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Die Einrichtung Ihres Capacitor-Projekts
Um ein Capacitor-Anwendungsprojekt zu erstellen, navigieren Sie in Ihren gewünschten Ordner und führen Sie in Ihrem Terminal die folgende Kommandozeilenanweisung 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 ist alles bereit.
‣ Projektstruktur
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also sollten wir unsere Projektstruktur entsprechend anpassen:
- Erstellen Sie ein neues Verzeichnis
srcin dem Hauptverzeichnis. - Erstellen Sie eine neue Skriptdatei
index.jsinsrc/. - Erstellen Sie die Vite-Konfigurationsdatei
vite.config.jsim Hauptverzeichnis. - Entfernen Sie den
capacitor-welcome.jsDatei auswww/js/.
Ihr 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
Lassen Sie uns einige Dateien anpassen, um mit reinem JavaScript zu arbeiten:
www/index.html
- Entfernen Sie die Skriptimporte für Ionic PWA Elemente Wenn Sie das 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>-
Löschen Sie das
<capacitor-welcome>HTML-Element aus dem Body. -
Aktualisieren Sie die Skriptimport von
capacitor.jsaufjs/main.js. Dies wird unser gebundenes JavaScript-File sein. -
Entfernen Sie das
js/capacitor-welcome.jsImport. Ihrindex.htmlist jetzt bereit.
vite.config.js
Um unsere Node.js-Module mit zu bündeln, ViteWir benötigen eine Konfigurationsdatei, die den Ausgabebereich für unser gebundenes Skript spezifiziert. Die folgende Konfiguration wird das File 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
In der capacitor.config.json Datei, suchen Sie nach der "bundledWebRuntime": true Eigenschaft und ändern Sie sie in 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 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, die Vite-Build-Kommandozeile auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vornehmen:
vite buildDiese Kommandozeile 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 Kommandozeilen, um Ihre App in der jeweiligen Plattform-Entwicklungsumgebung zu öffnen:
Für Android:
npx cap add android
npx cap open androidFür iOS (nur macOS):
npx cap add ios
npx cap open iosFür Web/PWA:
npx cap serveDiese Kommandozeilen 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
Mit CapacitorJS können Sie kosteneffiziente und effiziente Wege entwickeln, um Apps für mehrere Plattformen mit einer einzigen Codebasis zu erstellen. Durch die Befolgung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es für Vite umstrukturiert und Ihr App für die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem besten Weg, eine robuste und vielseitige Anwendung zu erstellen.
Denken Sie daran, gründlich auf allen Plattformen zu testen und die Vorteile der nativen Plugins von Capacitor zu nutzen, um die Funktionalität Ihrer App zu verbessern. Viel Spaß beim Programmieren!
Weiter auf dem Weg: "Entwickeln Sie Cross-Platform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung"
Wenn Sie "Entwickeln Sie Cross-Platform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung" verwenden Entwickeln Sie Cross-Platform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung um das native Plugin-Work zu planen, verbinden Sie es mit Capgo Plugin Directory für den Produktworkflow in Capgo Plugin Directory Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Alternativen zum Ionic Enterprise Plugin für den Produktworkflow in Alternativen zum Ionic Enterprise Plugin und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
