Freigeben über

Erstellen einer Xamarin.Forms-App mit Azure

  • Artikel

Überblick

In diesem Lernprogramm erfahren Sie, wie Sie einer mobilen Xamarin.Forms-App mithilfe des Features "Mobile Apps" von Azure App Service als Back-End einen cloudbasierten Back-End-Dienst hinzufügen. Sie erstellen sowohl ein neues Back-End für mobile Apps als auch eine einfache to-do Liste Xamarin.Forms-App, die App-Daten in Azure speichert.

Das Abschließen dieses Lernprogramms ist eine Voraussetzung für alle anderen Lernprogramme für mobile Apps für Xamarin.Forms.

Voraussetzungen

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

  • Ein aktives Azure-Konto. Wenn Sie nicht über ein Konto verfügen, können Sie sich für eine Azure-Testversion registrieren und bis zu 10 kostenlose mobile Apps erhalten, die Sie auch nach Dem Testende weiterhin verwenden können. Weitere Informationen finden Sie in der kostenlosen Azure-Testversion.

  • Visual Studio Tools for Xamarin, in Visual Studio 2017 oder höher, oder Visual Studio für Mac. Anweisungen finden Sie auf der Xamarin-Installationsseite .

  • (optional) Zum Erstellen einer iOS-App ist ein Mac mit Xcode 9.0 oder höher erforderlich. Visual Studio für Mac kann zum Entwickeln von iOS-Apps verwendet werden, oder Visual Studio 2017 oder höher kann verwendet werden (solange der Mac im Netzwerk verfügbar ist).

Erstellen eines neuen Back-Ends für mobile Apps

  1. Melden Sie sich beim Azure-Portal an.

  2. Klicken Sie auf Ressource erstellen.

  3. Geben Sie im Suchfeld Web Appein.

  4. Wählen Sie in der Ergebnisliste die Web App aus dem Marketplace aus.

  5. 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).

  6. Wählen Sie einen eindeutigen Namen für Ihre Webanwendung aus.

  7. Wählen Sie die Standardoption Veröffentlichen als Codeaus.

  8. 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.

  9. Wählen Sie das richtige Betriebssystem, entweder Linux oder Windows.

  10. Wählen Sie die Region aus, in der diese App bereitgestellt werden soll.

  11. Wählen Sie den entsprechenden App Service Plan aus, und klicken Sie auf Überprüfen und erstellen Sie.

  12. Wählen Sie unter Ressourcengruppeeine vorhandene Ressourcengruppe aus, oder eine neue Gruppe erstellen (mit demselben Namen wie Ihre App).

  13. 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.

  14. 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.

  15. Klicken Sie auf das Blatt Konfiguration unter Einstellungen und klicken Sie in den Anwendungseinstellungenauf die Schaltfläche Neue Anwendungseinstellung.

  16. 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

  1. 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.

  2. 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.

  3. 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.

        Node Einfache Tabellen

      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'.

        Konfiguration einfacher Knotentabellen

      3. Klicken Sie in Einfachen Tabellenauf die Schaltfläche + Hinzufügen.

        Knoten

      4. Erstellen Sie eine TodoItem Tabelle mit anonymem Zugriff.

        Node Easy Tables Tabelle hinzufügen

    • .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.

        Visual Studio-Veröffentlichung

      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.

Ausführen der Xamarin.Forms-Lösung

Die Visual Studio-Tools für Xamarin sind erforderlich, um die Lösung zu öffnen, siehe die Installationsanweisungen für Xamarin. Wenn die Tools bereits installiert sind, führen Sie die folgenden Schritte aus, um die Lösung herunterzuladen und zu öffnen:

Visual Studio (Windows und Mac)

  1. 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.

  2. Öffnen Sie die Datei Constants.cs in diesem Ordner - xamarin.forms/ZUMOAPPNAME. Der Anwendungsname ist ZUMOAPPNAME.

  3. Ersetzen Sie in der Constants.cs-Klasse die ZUMOAPPURL-Variable durch den öffentlichen Endpunkt oben.

    public static string ApplicationURL = @"ZUMOAPPURL";

    wird

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Folgen Sie den nachstehenden Anweisungen, um die Android- oder Windows-Projekte auszuführen. und wenn ein netzwerkgenetzter Mac-Computer verfügbar ist, wird das iOS-Projekt verwendet.

(Optional) Ausführen des Android-Projekts

In diesem Abschnitt führen Sie das Xamarin.Android-Projekt aus. Sie können diesen Abschnitt überspringen, wenn Sie nicht mit Android-Geräten arbeiten.

Visual Studio

  1. Klicken Sie mit der rechten Maustaste auf das Android-Projekt (Droid), und wählen Sie dann "Als Startprojekt festlegen" aus.

  2. Wählen Sie im Menü " Erstellen " die Option "Configuration Manager" aus.

  3. Aktivieren Sie im Dialogfeld Configuration Manager die Kontrollkästchen "Erstellen und Bereitstellen " neben dem Android-Projekt, und stellen Sie sicher, dass das freigegebene Codeprojekt das Kontrollkästchen "Erstellen " aktiviert hat.

  4. Um das Projekt zu erstellen und die App in einem Android-Emulator zu starten, drücken Sie F5 , oder klicken Sie auf die Schaltfläche "Start ".

Visual Studio für Mac

  1. Klicken Sie mit der rechten Maustaste auf das Android-Projekt, und wählen Sie dann "Als Startprojekt festlegen" aus.

  2. Um das Projekt zu erstellen und die App in einem Android-Emulator zu starten, wählen Sie das Menü "Ausführen " und dann " Debuggen starten" aus.

Geben Sie in der App aussagekräftigen Text ein, z. B. "Xamarin lernen", und wählen Sie dann das Pluszeichen (+) aus.

Android-to-do-App

Diese Aktion sendet eine Postanforderung an das neue Mobile-Apps-Back-End, das in Azure gehostet wird. Daten aus der Anforderung werden in die Tabelle "TodoItem" eingefügt. Elemente, die in der Tabelle gespeichert sind, werden vom Back-End der mobilen Apps zurückgegeben, und die Daten werden in der Liste angezeigt.

Hinweis

Der Code, der auf ihr Back-End für mobile Apps zugreift, befindet sich in der TodoItemManager.cs C#-Datei des freigegebenen Codeprojekts in der Lösung.

(Optional) Ausführen des iOS-Projekts

In diesem Abschnitt führen Sie das Xamarin.iOS-Projekt für iOS-Geräte aus. Sie können diesen Abschnitt überspringen, wenn Sie nicht mit iOS-Geräten arbeiten.

Visual Studio

  1. Klicken Sie mit der rechten Maustaste auf das iOS-Projekt, und wählen Sie dann "Als Startprojekt festlegen" aus.

  2. Wählen Sie im Menü " Erstellen " die Option "Configuration Manager" aus.

  3. Aktivieren Sie im Dialogfeld Configuration Manager die Kontrollkästchen "Erstellen und Bereitstellen" neben dem iOS-Projekt, und stellen Sie sicher, dass das freigegebene Codeprojekt das Kontrollkästchen "Erstellen " aktiviert hat.

  4. Um das Projekt zu erstellen und die App im iPhone-Emulator zu starten, wählen Sie die F5-TASTE aus.

Visual Studio für Mac

  1. Klicken Sie mit der rechten Maustaste auf das iOS-Projekt, und wählen Sie dann "Als Startprojekt festlegen" aus.

  2. Wählen Sie im Menü "Ausführen " die Option " Debuggen starten " aus, um das Projekt zu erstellen und die App im iPhone-Emulator zu starten.

Geben Sie in der App aussagekräftigen Text ein, z. B. "Xamarin lernen", und wählen Sie dann das Pluszeichen (+) aus.

iOS-to-do-App

Diese Aktion sendet eine POST-Anfrage an das neue Mobile-Apps-Back-End, das in Azure gehostet wird. Daten aus der Anforderung werden in die Tabelle "TodoItem" eingefügt. Elemente, die in der Tabelle gespeichert sind, werden vom Back-End der mobilen Apps zurückgegeben, und die Daten werden in der Liste angezeigt.

Hinweis

Sie finden den Code, der auf Ihr Mobile Apps Back-End in der TodoItemManager.cs C#-Datei des freigegebenen Codeprojekts in der Lösung zugreift.

(Optional) Ausführen des Windows-Projekts

In diesem Abschnitt führen Sie das Projekt Xamarin.Forms Universal Windows Platform (UWP) für Windows-Geräte aus. Sie können diesen Abschnitt überspringen, wenn Sie nicht mit Windows-Geräten arbeiten.

Visual Studio

  1. Klicken Sie mit der rechten Maustaste auf ein beliebiges UWP-Projekt, und wählen Sie dann "Als Startprojekt festlegen" aus.

  2. Wählen Sie im Menü " Erstellen " die Option "Configuration Manager" aus.

  3. Aktivieren Sie im Dialogfeld Configuration Manager die Kontrollkästchen "Erstellen und Bereitstellen" neben dem ausgewählten Windows-Projekt, und stellen Sie sicher, dass das freigegebene Codeprojekt das Kontrollkästchen "Erstellen " aktiviert hat.

  4. Um das Projekt zu erstellen und die App in einem Windows-Emulator zu starten, drücken Sie F5 , oder klicken Sie auf die Schaltfläche "Start " (die den lokalen Computer lesen soll).

Hinweis

Das Windows-Projekt kann nicht unter macOS ausgeführt werden.

Geben Sie in der App aussagekräftigen Text ein, z. B. "Xamarin lernen", und wählen Sie dann das Pluszeichen (+) aus.

Diese Aktion sendet eine POST-Anfrage an das neue Mobile Apps-Back-End, das auf Azure gehostet wird. Daten aus der Anforderung werden in die Tabelle "TodoItem" eingefügt. Elemente, die in der Tabelle gespeichert sind, werden vom Back-End mobile Apps zurückgegeben, und die Daten werden in der Liste angezeigt.

UWP-to-do-App

Hinweis

Sie finden den Code, der auf das Back-End Ihrer mobilen Apps in der TodoItemManager.cs C#-Datei des Projekts für die portable Klassenbibliothek Ihrer Lösung zugreift.

Problembehandlung

Wenn Sie Probleme beim Erstellen der Lösung haben, führen Sie den NuGet-Paket-Manager aus, und aktualisieren Sie es auf die neueste Version von Xamarin.Forms, und aktualisieren Sie im Android-Projekt die Xamarin.Android Supportpakete. Schnellstartprojekte enthalten möglicherweise nicht immer die neuesten Versionen.

Bitte beachten Sie, dass alle Supportpakete, auf die in Ihrem Android-Projekt verwiesen wird, dieselbe Version aufweisen müssen. Das Azure Mobile Apps NuGet-Paket verfügt über Xamarin.Android.Support.CustomTabs Abhängigkeit für Android-Plattform. Wenn Ihr Projekt also neuere Supportpakete verwendet, müssen Sie dieses Paket mit der erforderlichen Version direkt installieren, um Konflikte zu vermeiden.