In der sich ständig verändernden Welt der mobilen Anwendungsentwicklung hat die Entwicklung von Progressive Web Anwendungen (PWAs) den Weg für neue Cross-Plattform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es Web-basierten Anwendungen, in App-Stores ohne sich auf native code zu verlassen, präsent zu sein. Ein solches Technologie, das dies ermöglicht ist CapacitorJS, das es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und der Web mit einem einzigen JavaScript-Codebase zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Programmier-Effizienz.
Dieses Leitfaden wird sich auf die Erstellung einer Anwendung mit reinem JavaScript ohne zusätzliche Frameworks konzentrieren. Trotz der Herausforderungen bei der Suche nach Ressourcen für die Entwicklung von reinem 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 Android-App-Entwicklung
- Xcode für die iOS-App-Entwicklung (macOS nur)
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.
‣ Projektumstrukturierung
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also lassen Sie uns unser Projekt entsprechend umstrukturieren:
- Erstellen eine neue Ordner
srcim Hauptverzeichnis. - Erstellen eine neue Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei im Hauptverzeichnis.
vite.config.jsLöschen - den Datei aus
capacitor-welcome.jsIhr neues Verzeichnisstruktur sollte folgendermaßen aussehen:www/js/.
__CAPGO_KEEP_0__
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
Lasst uns einige Dateien anpassen, um mit reinem JavaScript zu arbeiten:
www/index.html
- Entfernt die Skriptimporte für Ionic PWA-Elemente falls ihr die App nicht als PWA veröffentlicht
<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öscht die
<capacitor-welcome>HTML-Element aus dem Body. -
Aktualisiert den Skriptimport von
capacitor.jszujs/main.js. Dies wird unser gebundenes JavaScript-File sein. -
Entfernt 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 den Ausgabebereich für unser gebundenes Skript spezifiziert. Die folgende Konfiguration nimmt 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 auf false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir Vite stattdessen verwenden können.
With diesen Änderungen ist die grundlegende Konfiguration Ihres Capacitor-Anwendungsprojekts abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.
‣ Ihre App entwickeln
Jetzt, dass der Boden bereitet ist, können Sie Ihre Anwendungslogik in dem src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.
native Plugins interagieren.
vite buildDenken Sie daran, Vite’s Build-Befehl auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vornehmen: main.js Dieser Befehl generiert das www/js Datei in Ihrem index.html Verzeichnis, das Ihre
Datei referenziert.
Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:
__CAPGO_KEEP_0__ bietet eine praktische Möglichkeit, Ihre Anwendung auf verschiedenen Plattformen zu testen. Verwenden Sie die folgenden Befehle, um Ihre App im jeweiligen Plattform-Entwicklungs-Umgebung zu öffnen: Für Android:
npx cap add android
npx cap open androidFor iOS (macOS nur):
npx cap add ios
npx cap open iosFor 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.
‣ Schlussfolgerung
Mit CapacitorJS können Sie kosteneffizient und effizient cross-plattformige Anwendungen mit reinem JavaScript erstellen. Durch die Verwendung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es neu strukturiert 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 Vorteile der Capacitor-Plugins für Ihre App zu nutzen. Viel Spaß beim Programmieren!
Fortsetzen Sie mit Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide
Wenn Sie native Plugin-Arbeit planen, verbinden Sie es mit Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide um es mit dem Capgo Plugin Directory zum Produktworkflow in Capgo Plugin Directory zu verbinden, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren, Alternativen zu Ionic Enterprise Plugins für den Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
