Erstellen einer Apache Cordova-App

Artikel
06/25/2019

Übersicht

Dieses Tutorial zeigt Ihnen, wie Sie einen cloudbasierten Back-End-Dienst mithilfe eines mobilen Azure-App-Back-Ends zu einer mobilen Apache Cordova-App hinzufügen. Sie erstellen sowohl ein neues Mobile App-Back-End als auch eine einfache Apache Cordova-App des Typs Aufgabenliste, die App-Daten in Azure speichert.

Das Absolvieren dieses Tutorials ist Voraussetzung für alle anderen Apache Cordova-Tutorials zur Verwendung des Features „Mobile Apps“ von Azure App Service.

Voraussetzungen

Zum Durchführen dieses Tutorials benötigen Sie Folgendes:

Einen PC mit Visual Studio Community 2017 oder höher
Visual Studio-Tools für Apache Cordova.
Ein aktives Azure-Konto.

Sie können auch Visual Studio umgehen und direkt die Apache Cordova-Befehlszeile verwenden. Die Verwendung der Befehlszeile ist hilfreich, wenn Sie das Tutorial auf einem Macintosh-Computer ausführen. Das Kompilieren von Apache Cordova-Clientanwendungen über die Befehlszeile wird in diesem Tutorial nicht behandelt.

Erstellen eines Azure Mobile App-Back-Ends

Melden Sie sich beim Azure-Portal an.
Klicken Sie auf Ressource erstellen.
Geben Sie in das Suchfeld Web-Appein.
Klicken Sie in der Ergebnisliste über den Marketplace auf Web-App.
Wählen Sie Ihr Abonnement und Ihre Ressourcengruppe aus. Dabei können Sie entweder eine bereits vorhandene Ressourcengruppe auswählen oder eine neue erstellen und dabei den gleichen Namen wie für die App verwenden.
Geben Sie einen eindeutigen Namen für Ihre Web-App ein.
Wählen Sie als Standardoption zum VeröffentlichenCode aus.
Im Laufzeitstapel müssen Sie unter ASP.NET oder Node eine Version auswählen. Wenn Sie an einem .NET-Backend arbeiten, wählen Sie eine ASP.NET-Version aus. Wenn Sie aber an einer Node-basierten Anwendung arbeiten, wählen Sie eine Node-Version aus.
Wählen Sie ein Betriebssystem aus (entweder Linux oder Windows).
Wählen Sie die Region aus, für die diese App bereitgestellt werden soll.
Wählen Sie einen passenden App Service-Plan aus, und klicken Sie auf Überprüfen und erstellen.
Wählen Sie unter Ressourcengruppe eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue. (Verwenden Sie dabei den gleichen Namen wie für die App.)
Klicken Sie auf Erstellen. Warten Sie ein paar Minuten, bis der Dienst bereitgestellt wurde, bevor Sie fortfahren. Das Benachrichtigungssymbol (Glocke) in der Portalüberschrift informiert Sie über Statusupdates.
Sobald die Bereitstellung abgeschlossen ist, klicken Sie erst auf den Abschnitt Bereitstellungsdetails und dann auf die Ressource vom Typ Microsoft.Web/sites. Dann werden Sie zu der App Service-Web-App geleitet, die Sie gerade erstellt haben.
Klicken Sie unter Einstellungen auf das Blatt Konfiguration und unter Anwendungseinstellungen auf die Schaltfläche Neue Anwendungseinstellung.
Geben Sie auf der Seite Anwendungseinstellung hinzufügen/bearbeiten den NamenMobileAppsManagement_EXTENSION_VERSION und den Wert Latest (Aktuell) ein. Drücken Sie anschließend auf „OK“.

Nun können Sie diese neu erstellte App Service-Web-App als mobile App verwenden.

Erstellen einer Datenbankverbindung und Konfigurieren des Client- und Serverprojekts

Laden Sie die Client-SDK-Schnellstarts für die folgenden Plattformen herunter:

iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
Cordova
Windows (C#)

Hinweis

Wenn Sie das iOS-Projekt verwenden, müssen Sie "azuresdk-iOS-*.zip" aus der neuesten GitHub-Version herunterladen. Entzippen Sie die Datei, und fügen Sie die Datei MicrosoftAzureMobile.framework dem Stamm des Projekts hinzu.
Sie müssen eine Datenbankverbindung hinzufügen oder eine Verbindung mit einer vorhandenen Verbindung herstellen. Legen Sie zunächst fest, ob Sie einen Datenspeicher erstellen oder einen bereits vorhandenen verwenden möchten.
- Erstellen Sie einen neuen Datenspeicher: Wenn Sie einen Datenspeicher erstellen möchten, verwenden Sie die folgende Schnellstartanleitung:
  
  Schnellstart: Erste Schritte mit einzelnen Datenbanken in Azure SQL Datenbank
- Vorhandene Datenquelle: Befolgen Sie die nachstehenden Anweisungen, wenn Sie eine vorhandene Datenbankverbindung verwenden möchten.
  1. Format der SQL-Datenbank-Verbindungszeichenfolge: Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}
    
    {your_SQLServer}: Name des Servers. Diesen finden Sie auf der Übersichtsseite für Ihre Datenbank, in der Regel im Format „server_name.database.windows.net“. {port}: Normalerweise 1433. {your_catalogue}: Name der Datenbank. {your_username}: Benutzername für den Zugriff auf Ihre Datenbank. {your_password}: Kennwort für den Zugriff auf Ihre Datenbank.
    
    Weitere Informationen zum Format der SQL-Verbindungszeichenfolge
  2. Fügen Sie die Verbindungszeichenfolge Ihrer mobilen App hinzu. In App Service können Sie Verbindungszeichenfolgen für Ihre Anwendung über die Option Konfiguration im Menü verwalten.
    
    So fügen Sie eine Verbindungszeichenfolge hinzu:
    1. Klicken Sie auf die Registerkarte Anwendungseinstellungen.
    2. Klicken Sie auf [+] Neue Verbindungszeichenfolge.
    3. Sie müssen den Namen, Wert und Typ Ihrer Verbindungszeichenfolge angeben.
    4. Geben Sie als NameMS_TableConnectionString ein.
    5. Der Wert muss der Verbindungszeichenfolge entsprechen, die Sie im vorherigen Schritt zusammengestellt haben.
    6. Wenn Sie eine Verbindungszeichenfolge einer SQL Azure-Datenbank hinzufügen, wählen Sie unter Typ die Option SQLAzure.
Azure Mobile Apps umfasst SDKs für .NET- und Node.js-Back-Ends.
- Node.js-Back-End
  
  Wenn Sie die Node.js-Schnellstart-App verwenden möchten, befolgen Sie die nachstehenden Anweisungen.
  1. Wechseln Sie im Azure-Portal zu Einfache Tabellen. Der folgende Bildschirm wird angezeigt.
  2. Stellen Sie sicher, dass die SQL-Verbindungszeichenfolge bereits auf der Registerkarte "Konfiguration " hinzugefügt wird. Aktivieren Sie dann das Kontrollkästchen von mir, dass dadurch alle Websiteinhalte überschrieben werden , und klicken Sie auf die Schaltfläche "TodoItem-Tabelle erstellen ".
  3. Klicken Sie in Einfache Tabellen auf die Schaltfläche + Hinzufügen.
  4. Erstellen Sie eine TodoItem-Tabelle mit anonymem Zugriff.
- .NET-Back-End
  
  Wenn Sie die .NET-Schnellstart-App verwenden möchten, befolgen Sie die nachstehenden Anweisungen.
  1. Laden Sie das .NET-Serverprojekt für Azure Mobile Apps aus dem Repository azure-mobile-apps-quickstarts herunter.
  2. Erstellen Sie das .NET-Serverprojekt lokal in Visual Studio.
  3. Öffnen Sie in Visual Studio den Projektmappen-Explorer, klicken Sie mit der rechten Maustaste auf das Projekt ZUMOAPPNAMEService, und klicken Sie auf Veröffentlichen. Das Fenster Publish to App Service wird angezeigt. Wenn Sie an einem Mac arbeiten, finden Sie hier andere Möglichkeiten zum Bereitstellen der App.
  4. Wählen Sie App Service als Ziel für die Veröffentlichung aus, klicken Sie auf Vorhandene auswählen, und klicken Sie dann im unteren Fensterbereich auf Veröffentlichen.
  5. Sie müssen sich zuerst mit Ihrem Azure-Abonnement bei Visual Studio anmelden. Wählen Sie Subscription, Resource Group und dann den Namen Ihrer App aus. Klicken Sie schließlich auf OK. Dadurch wird das lokale .NET-Serverprojekt im App Service-Back-End bereitgestellt. Nach Abschluss der Bereitstellung werden Sie im Browser an http://{zumoappname}.azurewebsites.net/ umgeleitet.

Herunterladen und Ausführen der Apache Cordova-App

Navigieren Sie zu der Projektmappendatei im Clientprojekt (.sln), und öffnen Sie sie mittels Visual Studio.
Wählen Sie in Visual Studio in der Dropdownliste neben dem Startpfeil die Plattform für die Projektmappe (Android, iOS oder Windows) aus. Wählen Sie ein bestimmtes Bereitstellungsgerät oder einen Emulator aus, indem Sie auf die Dropdownliste mit dem grünen Pfeil klicken. Sie können die standardmäßig ausgewählte Android-Plattform und den Ripple-Emulator verwenden. In komplexeren Tutorials (etwa mit Pushbenachrichtigungen) muss ein unterstütztes Gerät oder ein unterstützter Emulator ausgewählt werden.
Öffnen Sie die Datei ToDoActivity.java in diesem Ordner: „ZUMOAPPNAME/app/src/main/java/com/example/zumoappname“. Der Anwendungsname lautet ZUMOAPPNAME.
Wechseln Sie zum Azure-Portal, und navigieren Sie zu der mobilen App, die Sie erstellt haben. Suchen Sie auf dem Blatt Overview nach der URL, die den öffentlichen Endpunkt für Ihre mobile App darstellt. Beispiel: Der Websitename für meinen App-Namen „test123“ lautet https://test123.azurewebsites.net.
Wechseln Sie zu der Datei index.js in „ZUMOAPPNAME/www/js/index.js“, und ersetzen Sie in der onDeviceReady()-Methode den Parameter ZUMOAPPURL durch den oben stehenden öffentlichen Endpunkt.

client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

Vervollständigung

client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');
Drücken Sie F5, oder klicken Sie auf den grünen Pfeil, um Ihre Cordova-App zu erstellen und auszuführen. Sollte im Emulator ein Sicherheitsdialogfeld mit einer Netzwerkzugriffsanforderung angezeigt werden, lassen Sie den Zugriff zu.
Nachdem die App auf dem Gerät oder im Emulator gestartet wurde, geben Sie unter Enter new text (Neuen Text eingeben) einen aussagekräftigen Text ein (etwa Tutorial abschließen), und klicken Sie dann auf die Schaltfläche Hinzufügen.

Das Back-End fügt Daten aus der Anforderung in die TodoItem-Tabelle in SQL-Datenbank ein und gibt Informationen zu den neu gespeicherten Elementen an die mobile App zurück. Die mobile App zeigt diese Daten in der Liste an.

Die Schritte 3 bis 5 können für andere Plattformen wiederholt werden.