Freigeben über

Erstellen einer Apache Cordova-App mit Azure Mobile Apps

  • Artikel

Anmerkung

Dieses Produkt wird eingestellt. Eine Ersetzung für Projekte mit .NET 8 oder höher finden Sie in der Community Toolkit Datasync-Bibliothek.

In diesem Lernprogramm wird gezeigt, wie Sie einer plattformübergreifenden Apache Cordova-App einen cloudbasierten Back-End-Dienst mithilfe von Azure Mobile Apps und einem mobilen Azure-App-Back-End hinzufügen. Sie erstellen sowohl ein neues mobiles App-Back-End als auch eine einfache Todo-Liste App, die App-Daten in Azure speichert.

Schließen Sie dieses Lernprogramm ab, bevor Sie mit anderen Apache Cordova-Lernprogrammen zur Verwendung des Features "Mobile Apps" in Azure App Service fortfahren.

Voraussetzungen

Um dieses Lernprogramm abzuschließen, benötigen Sie Folgendes:

Dieses Lernprogramm kann auf Windows- oder Mac-Systemen abgeschlossen werden. Die iOS-Version der App kann nur auf einem Mac ausgeführt werden. In diesem Lernprogramm wird nur Windows (mit der auf Android ausgeführten App) verwendet.

Apache Cordova 8.1.2 oder früher erforderlich

Apache Cordova hat eine inkompatible Änderung am Tool in v9.0.0 veröffentlicht. Wenn Sie Apache Cordova v9.0.0 oder höher installiert haben, funktioniert das Plug-In nicht und beschwert sich über ein Abhängigkeitsproblem mit dem modul q.

Visual Studio Code

Es gibt eine Apache Cordova-Erweiterung für Visual Studio Code, mit der Sie die Anwendung mit Debugging ausführen können. Visual Studio Code wird für die Apache Cordova-Entwicklung dringend empfohlen.

Installieren von Gradle

Der häufigste Fehler beim Konfigurieren von Apache Cordova unter Windows ist die Installation von Gradle. Dies wird standardmäßig mit Android Studio installiert, ist jedoch nicht für die normale Verwendung verfügbar. Laden Sie die neueste Versionherunter, und entpacken Sie sie, und fügen Sie dann das bin Verzeichnis manuell zu Ihrem PATH hinzu.

Laden Sie das Apache Cordova-Schnellstartprojekt herunter.

Das Apache Cordova-Schnellstartprojekt befindet sich im ordner samples/cordova des azure/azure-mobile-apps GitHub-Repository. Sie können das Repository als ZIP-Dateiherunterladen und dann entpacken. Die Dateien werden im Ordner azure-mobile-apps-main erstellt.

Öffnen Sie nach dem Herunterladen ein Terminal, und ändern Sie das Verzeichnis an den Speicherort der Dateien.

Bereitstellen des Back-End-Diensts

Um den Schnellstartdienst bereitzustellen, melden Sie sich zuerst mit der Azure CLI bei Azure an:

az login

Ein Webbrowser wird geöffnet, um die Autorisierung abzuschließen.

Wählen Sie bei Bedarf ein Abonnementaus.

Erstellen einer Ressourcengruppe

Geben Sie Folgendes ein, um eine Ressourcengruppe zu erstellen:

az group create -l westus -n zumo-quickstart

Mit diesem Befehl wird eine Ressourcengruppe namens zumo-quickstart- erstellt, um alle von uns erstellten Ressourcen aufzunehmen. Ersetzen Sie westus durch eine andere Region, wenn Sie keinen Zugriff auf die Westregion haben oder eine Region näher an Ihnen bevorzugen.

Bereitstellen des Back-Ends in Azure

Der Dienst besteht aus den folgenden Ressourcen:

  • Ein App-Dienst-Hostingplan im kostenlosen Plan.
  • Eine Website, die im App Service Hosting-Plan gehostet wird.
  • Ein Azure SQL-Server.
  • Eine Azure SQL-Datenbank auf der Stufe "Einfach" (kostenauffälligkeit).

Die Azure SQL-Datenbank ist die einzige Ressource, die Kosten verursacht. Ausführliche Informationen finden Sie unter Preise.

Geben Sie zum Bereitstellen der Ressourcen die folgenden Befehle ein:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Führen Sie nach Abschluss den folgenden Befehl aus, um die Ausgaben anzuzeigen:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Dieser Befehl enthält Informationen zu Ihrer Bereitstellung, die Sie für die Entwicklung Ihrer mobilen Anwendung benötigen. Der Benutzername und das Kennwort der Datenbank sind nützlich für den Zugriff auf die Datenbank über das Azure-Portal. Der Name des App-Diensts wird unten verwendet, und der öffentliche Endpunkt wird später in Ihren Code eingebettet.

Stellen Sie schließlich den Azure Mobile Apps-Server für den erstellten App-Dienst bereit:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Ersetzen Sie zumo-XXXXXXXX durch den Namen Ihres App-Diensts. in der Liste der Ausgaben angezeigt. Innerhalb von 2 bis 3 Minuten kann Ihr Azure Mobile Apps-Server verwendet werden. Sie können einen Webbrowser verwenden, um zu bestätigen, dass das Back-End funktioniert. Zeigen Sie Ihren Webbrowser auf Ihren öffentlichen Endpunkt, /tables/TodoItem an ihn angefügt wurde (z. B. https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). Der Browser zeigt einen Fehler bei einem fehlenden X-ZUMO-VERSION-Parameter an, wenn der Server ordnungsgemäß funktioniert.

Löschen der Ressourcen

Nachdem Sie das Schnellstart-Lernprogramm abgeschlossen haben, können Sie die Ressourcen mit az group delete -n zumo-quickstartlöschen.

Das Lernprogramm besteht aus drei Teilen (einschließlich dieses Abschnitts). Löschen Sie die Ressourcen nicht, bevor Sie das Lernprogramm abschließen.

Konfigurieren des Apache Cordova-Schnellstartprojekts

Führen Sie npm install aus, um alle Abhängigkeiten zu installieren.

Fügen Sie dem Projekt eine Plattform hinzu. Um beispielsweise die Android-Plattform hinzuzufügen, verwenden Sie Folgendes:

cordova platform add android

Sie können nach Bedarf browser, androidund ios hinzufügen. Die browser-Plattform funktioniert nicht mit aktivierter Offlinesynchronisierung. Nachdem Sie alle plattformen hinzugefügt haben, die Sie verwenden möchten, führen Sie cordova requirements aus, um sicherzustellen, dass alle Anforderungen erfüllt wurden.

Öffnen Sie die www/js/index.js Datei in einem Text-Editor. Bearbeiten Sie die Definition von BackendUrl, um Ihre Back-End-URL anzuzeigen. Wenn Ihre Back-End-URL beispielsweise https://zumo-abcd1234.azurewebsites.netwurde, würde die Back-End-URL wie folgt aussehen:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Speichern Sie die Datei. Öffnen Sie die www/index.html Datei in einem Text-Editor. Bearbeiten Sie die Content-Security-Policy, um die URL so zu aktualisieren, dass sie mit Ihrer Back-End-URL übereinstimmt; Zum Beispiel:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Verwenden Sie zum Erstellen der App den folgenden Befehl:

cordova build

Ausführen der App

Wenn Sie über einen Browser (mit cordova platform add browser) ausgeführt werden, müssen Sie die CORS-Unterstützung innerhalb von Azure App Service aktivieren. Führen Sie dazu den folgenden Befehl aus:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Ersetzen Sie die ZUMPAPPNAME durch den Namen Ihres mobilen Azure App Service-Back-Ends. Nachdem das Back-End konfiguriert wurde, führen Sie den folgenden Befehl aus:

cordova run android

Sobald der anfängliche Start abgeschlossen ist, können Sie Elemente aus der Liste hinzufügen und löschen. Todo-Elemente werden in der Azure SQL-Instanz gespeichert, die mit Ihrem Azure Mobile Apps-Back-End verbunden ist.

Wenn der Emulator nicht automatisch gestartet wird, öffnen Sie Android Studio, und wählen Sie Konfigurieren>AVD-Manager-aus. Sie können den Emulator jetzt manuell starten. Wenn Sie adb devices -lausführen, sollte das ausgewählte emulierte Gerät angezeigt werden. Sie sollten jetzt in der Lage sein, cordova run androidauszuführen.

Apache Cordova App

Nächste Schritte

Fahren Sie fort, um Offlinedatensynchronisierungzu implementieren.