Erstellen einer Apache Cordova-App

Artikel
06/25/2019

Überblick

In diesem Lernprogramm erfahren Sie, wie Sie einer mobilen Apache Cordova-App mithilfe eines mobilen Azure-App-Back-End einen cloudbasierten Back-End-Dienst hinzufügen. Sie erstellen sowohl ein neues mobiles App-Back-End als auch eine einfache Todo-Listen-Apache Cordova-App, die App-Daten in Azure speichert.

Das Abschließen dieses Lernprogramms ist eine Voraussetzung für alle anderen Apache Cordova-Lernprogramme zur Verwendung des Features "Mobile Apps" in Azure App Service.

Voraussetzungen

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

Ein 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 die Apache Cordova-Befehlszeile direkt verwenden. Die Verwendung der Befehlszeile ist hilfreich, wenn Sie das Lernprogramm auf einem Mac-Computer abschließen. Das Kompilieren von Apache Cordova-Clientanwendungen mit der Befehlszeile wird in diesem Lernprogramm nicht behandelt.

Erstellen eines Mobilen Azure-App-Back-Ends

Melden Sie sich beim Azure-Portal an.
Klicken Sie auf Ressource erstellen.
Geben Sie im Suchfeld Web Appein.
Wählen Sie in der Ergebnisliste die Web App aus dem Marketplace aus.
Wählen Sie Ihr Abonnement und Ihre Ressourcengruppe aus (wählen Sie eine vorhandene Ressourcengruppe oder erstellen Sie eine neue mit demselben Namen wie Ihre App).
Wählen Sie einen eindeutigen Namen für Ihre Webanwendung aus.
Wählen Sie die Standardoption Veröffentlichen als Codeaus.
Im Runtime-Stapelmüssen Sie eine Version unter ASP.NET oder Nodeauswählen. Wenn Sie ein .NET-Back-End erstellen, wählen Sie unter ASP.NET eine Version aus. Wenn Sie auf eine nodebasierte Anwendung abzielen, wählen Sie andernfalls eine der Versionen aus Node aus.
Wählen Sie das richtige Betriebssystem, entweder Linux oder Windows.
Wählen Sie die Region aus, in der diese App bereitgestellt werden soll.
Wählen Sie den entsprechenden App Service Plan aus, und klicken Sie auf Überprüfen und erstellen Sie.
Wählen Sie unter Ressourcengruppeeine vorhandene Ressourcengruppe aus, oder eine neue Gruppe erstellen (mit demselben Namen wie Ihre App).
Klicken Sie auf Erstellen. Warten Sie einige Minuten, bis der Dienst erfolgreich bereitgestellt wurde, bevor Sie fortfahren. Sehen Sie sich das Benachrichtigungssymbol im Portalheader an, um Statusaktualisierungen zu erhalten.
Klicken Sie nach Abschluss der Bereitstellung auf den Abschnitt Bereitstellungsdetails und dann auf die Ressource des Typs Microsoft.Web/sites. Es navigiert Sie zu der App Service-Web-App, die Sie gerade erstellt haben.
Klicken Sie auf das Blatt Konfiguration unter Einstellungen und klicken Sie in den Anwendungseinstellungenauf die Schaltfläche Neue Anwendungseinstellung.
Geben Sie auf der Seite Einstellung "Anwendung hinzufügen/bearbeiten"Namen als MobileAppsManagement_EXTENSION_VERSION und Wert als neuesten ein, und drücken Sie "OK".

Sie sind bereit, diese neu erstellte App Service Web-App als mobile App zu 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 neuesten GitHub-Versionherunterladen. Entpacken Sie die MicrosoftAzureMobile.framework Datei, und fügen Sie sie dem Stammverzeichnis des Projekts hinzu.
Sie müssen eine Datenbankverbindung hinzufügen oder eine Verbindung mit einer vorhandenen Verbindung herstellen. Bestimmen Sie zunächst, ob Sie einen Datenspeicher erstellen oder einen vorhandenen verwenden.
- Erstellen eines neuen Datenspeichers: 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 folgenden Anweisungen, wenn Sie eine vorhandene Datenbankverbindung verwenden möchten.
  1. SQL-Datenbankverbindungszeichenfolgenformat - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}
    
    {your_SQLServer} Der Name des Servers kann auf der Übersichtsseite für Ihre Datenbank gefunden werden und hat normalerweise die Form „server_name.database.windows.net“. {port} in der Regel 1433. {your_catalogue} Der Name der Datenbank. {your_username} Benutzernamen für den Zugriff auf Ihre Datenbank. {your_password} Kennwort für den Zugriff auf Ihre Datenbank.
    
    Weitere Informationen zum SQL-Verbindungszeichenfolgenformat
  2. Fügen Sie die Verbindungszeichenfolge zu Ihrer mobilen App hinzu. Im App Service können Sie die Verbindungszeichenfolgen Ihrer Anwendung mithilfe der 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 Name, Wert und Typ für die Verbindungszeichenfolge angeben.
    4. Geben Sie Name als MS_TableConnectionString ein.
    5. Der Wert sollte die Verbindungszeichenfolge sein, die Sie im Schritt zuvor gebildet haben.
    6. Wenn Sie einer SQL Azure-Datenbank eine Verbindungszeichenfolge hinzufügen, wählen Sie SQLAzure unter Typaus.
Azure Mobile Apps verfügt über SDKs für .NET und Node.js Back-Ends.
- Node.js Backend
  
  Wenn Sie Node.js Schnellstart-App verwenden möchten, folgen Sie den nachstehenden Anweisungen.
  1. Wechseln Sie im Azure-Portal zu einfache Tabellen, wird dieser Bildschirm angezeigt.
  2. Stellen Sie sicher, dass die SQL-Verbindungszeichenfolge bereits in der Registerkarte Konfiguration hinzugefügt wurde. Aktivieren Sie dann das Kontrollkästchen Ich bestätige, dass dadurch alle Websiteinhalte überschrieben werden, und klicken Sie auf die Schaltfläche 'TodoItem-Tabelle erstellen'.
  3. Klicken Sie in Einfachen Tabellenauf die Schaltfläche + Hinzufügen.
  4. Erstellen Sie eine TodoItem Tabelle mit anonymem Zugriff.
- .NET-Backend
  
  Wenn Sie die .NET-Schnellstart-App verwenden möchten, folgen Sie den nachstehenden Anweisungen.
  1. Laden Sie das .NET-Serverprojekt von Azure Mobile Apps aus dem Azure-mobile-apps-schnellstarts-Repositoryherunter.
  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 ZUMOAPPNAMEService-Projekt, und klicken Sie dann auf Veröffentlichen. Ein Publish to App Service-Fenster wird angezeigt. Wenn Sie an einem Mac arbeiten, schauen Sie sich weitere Möglichkeiten zum Bereitstellen der App hieran.
  4. Wählen Sie App Service als Veröffentlichungsziel aus, und klicken Sie dann auf Vorhandeneauswählen. Klicken Sie anschließend unten im Fenster auf die Schaltfläche Veröffentlichen.
  5. Sie müssen sich zuerst mit Ihrem Azure-Abonnement bei Visual Studio anmelden. Wählen Sie die Subscription, Resource Groupund dann den Namen Ihrer App aus. Wenn Sie fertig sind, klicken Sie auf OK, stellt dies das .NET-Serverprojekt bereit, das Sie lokal im App Service-Back-End haben. Nach Abschluss der Bereitstellung werden Sie im Browser zu http://{zumoappname}.azurewebsites.net/ weitergeleitet.

Herunterladen und Ausführen der Apache Cordova-App

Navigieren Sie zur Projektmappendatei im Clientprojekt (.sln), und öffnen Sie sie mit Visual Studio.
Wählen Sie in Visual Studio die Lösungsplattform (Android, iOS oder Windows) aus der Dropdownliste neben dem Startpfeil aus. Wählen Sie ein bestimmtes Bereitstellungsgerät oder einen Emulator aus, indem Sie auf den grünen Pfeil auf die Dropdownliste klicken. Sie können die Standardmäßige Android-Plattform und den Ripple-Emulator verwenden. Erweiterte Lernprogramme (z. B. Pushbenachrichtigungen) erfordern die Auswahl eines unterstützten Geräts oder Emulators.
Öffnen Sie die Datei ToDoActivity.java in diesem Ordner - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Der Anwendungsname ist ZUMOAPPNAME.
Wechseln Sie zum Azure-Portal, und navigieren Sie zu der von Ihnen erstellten mobilen App. Suchen Sie auf dem Blatt Overview nach der URL, die der öffentliche Endpunkt für Ihre mobile App ist. Beispiel: Der Websitename für meinen App-Namen "test123" wird https://test123.azurewebsites.net.
Wechseln Sie zur index.js Datei in ZUMOAPPNAME/www/js/index.js und in der onDeviceReady() Methode, ersetzen Sie den ZUMOAPPURL Parameter durch den obigen öffentlichen Endpunkt.

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

wird

client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');
Um Ihre Cordova-App zu erstellen und auszuführen, drücken Sie F5, oder klicken Sie auf den grünen Pfeil. Wenn im Emulator ein Sicherheitsdialogfeld angezeigt wird, das den Zugriff auf das Netzwerk anfordert, akzeptieren Sie es.
Nachdem die App auf dem Gerät oder Emulator gestartet wurde, geben Sie aussagekräftigen Text in " Neuen Text eingeben" ein, z. B. "Lernprogramm abschließen ", und klicken Sie dann auf die Schaltfläche "Hinzufügen ".

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

Sie können die Schritte 3 bis 5 für andere Plattformen wiederholen.

Freigeben über