Erstellen einer Xamarin.Forms-App mit Azure Mobile Apps

Artikel
01/16/2024

In diesem Tutorial erfahren Sie, wie Sie einer plattformübergreifenden mobilen App mithilfe von Xamarin.Forms und eines Back-Ends für mobile Azure-Apps einen cloudbasierten Back-End-Dienst hinzufügen. Sie erstellen ein neues Back-End für mobile Apps und eine einfache Aufgabenlisten-App, die App-Daten in Azure speichert.

Sie müssen dieses Tutorial vor anderen Xamarin.Forms-Tutorials zur Verwendung des Mobile Apps-Features von Azure App Service durchführen.

Voraussetzungen

Sie können dieses Tutorial unter Mac oder Windows durcharbeiten. Um die Schritte dieses Tutorials abzuschließen, benötigen Sie Folgendes:

Visual Studio 2022 mit den folgenden Workloads.
- ASP.NET und Webentwicklung
- Azure-Entwicklung
- Mobile Entwicklung mit .NET
Ein Azure-Konto.
Die Azure CLI
- Melden Sie sich mit az login an, und wählen Sie vor dem Start ein entsprechendes Abonnement aus.
(Optional) Die Azure Developer CLI.
Ein virtuelles Android-Gerät mit den folgenden Einstellungen:
- Telefon: Jedes Telefonbild – wir verwenden pixel 5 zum Testen.
- Systembild: Android 11 (API 30 mit Google-APIs)

Wenn Sie die iOS-Edition der App kompilieren, müssen Sie über einen verfügbaren Mac verfügen:

Installieren Sie Xcode.
Öffnen Sie Xcode nach der Installation, damit weitere erforderliche Komponenten hinzugefügt werden können.
Wählen Sie nach dem Öffnen von Xcode Einstellungen>Komponenten aus, und installieren Sie einen iOS-Simulator.
Wenn Sie das Tutorial unter Windows durchführen, folgen Sie der Anleitung zum Koppeln mit Mac.

Herunterladen der Beispiel-App

Öffnen Sie das Repository für Azure-Mobile-Apps in Ihrem Browser.
Öffnen Sie die Dropdownliste "Code ", und wählen Sie dann "ZIP herunterladen" aus.
Sobald der Download abgeschlossen ist, öffnen Sie Ihren Downloadordner , und suchen Sie die azure-mobile-apps-main.zip Datei.
Klicken Sie mit der rechten Maustaste auf die heruntergeladene Datei, und wählen Sie " Alle extrahieren..." aus.

Wenn Sie es vorziehen, können Sie PowerShell verwenden, um das Archiv zu erweitern:
```
C:\Temp> Expand-Archive azure-mobile-apps-main.zip
```

Die Beispiele befinden sich im Beispielordner innerhalb der extrahierten Dateien. Das Beispiel für den Schnellstart lautet " TodoApp. Sie können das Beispiel in Visual Studio öffnen, indem Sie auf die TodoApp.sln Datei doppelklicken.

Screenshot of the file explorer for the solution.

Bereitstellen des Back-Ends in Azure

Hinweis

Wenn Sie das Back-End bereits aus einem anderen Schnellstart bereitgestellt haben, können Sie dasselbe Back-End verwenden und diesen Schritt überspringen.

Zur Bereitstellung des Back-End-Diensts führen wir folgende Schritte aus:

Bereitstellen eines Azure-App Diensts und Azure SQL-Datenbank für Azure.
Verwenden Sie Visual Studio, um den Dienstcode im neu erstellten Azure-App Dienst bereitzustellen.

Verwenden der Azure Developer CLI, um alle Schritte auszuführen

Das TodoApp-Beispiel ist für die Unterstützung der Azure Developer CLI konfiguriert. So führen Sie alle Schritte aus (Bereitstellung und Bereitstellung):

Installieren Sie die Azure Developer CLI.
Öffnen Sie ein Terminal, und ändern Sie das Verzeichnis in den Ordner, der die TodoApp.sln Datei enthält. Dieses Verzeichnis enthält azure.yamlauch .
Führen Sie azd up aus.

Wenn Sie noch nicht bei Azure angemeldet sind, wird der Browser gestartet, um Sie aufzufordern, sich anzumelden. Sie werden dann aufgefordert, ein Abonnement und eine Azure-Region zu verwenden. Die Azure Developer CLI stellt dann die erforderlichen Ressourcen bereit und stellt den Dienstcode in der Azure-Region und im Abonnement Ihrer Wahl bereit. Schließlich schreibt die Azure Developer CLI eine entsprechende Constants.cs Datei für Sie.

Sie können den azd env get-values Befehl ausführen, um die SQL-Authentifizierungsinformationen anzuzeigen, wenn Sie direkt auf die Datenbank zugreifen möchten.

Wenn Sie die Schritte mit der Azure Developer CLI abgeschlossen haben, fahren Sie mit dem nächsten Schritt fort. Wenn Sie die Azure Developer CLI nicht verwenden möchten, fahren Sie mit den manuellen Schritten fort.

Erstellen Sie Ressourcen in Azure.

Öffnen Sie ein Terminal, und ändern Sie das Verzeichnis in den Ordner, der die TodoApp.sln Datei enthält. Dieses Verzeichnis enthält azuredeploy.jsonauch .
Stellen Sie sicher, dass Sie sich mit der Azure CLI angemeldet und ein Abonnement ausgewählt haben.
Erstellen Sie eine neue Ressourcengruppe:
```
az group create -l westus -g quickstart
```
Mit diesem Befehl wird die quickstart Ressourcengruppe in der Region "USA West" erstellt. Sie können eine beliebige Region auswählen, sodass Sie dort Ressourcen erstellen können. Stellen Sie sicher, dass Sie in diesem Lernprogramm denselben Namen und dieselbe Region verwenden, wo sie Erwähnung werden.
Erstellen Sie die Ressourcen mithilfe einer Gruppenbereitstellung:
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
Wählen Sie ein sicheres Kennwort für Ihr SQL-Administratorkennwort aus. Sie benötigen sie später beim Zugriff auf die Datenbank.
Sobald die Bereitstellung abgeschlossen ist, rufen Sie die Ausgabevariablen ab, da diese wichtigen Informationen enthalten, die Sie später benötigen:
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
Eine Beispielausgabe ist:
Notieren Sie sich die einzelnen Werte in den Ausgaben für die spätere Verwendung.

Veröffentlichen des Dienstcodes

Öffnen Sie in Visual Studio TodoApp.sln.

Wählen Sie im rechten Bereich den Projektmappen-Explorer aus.
Klicken Sie mit der rechten Maustaste auf das TodoAppService.NET6 Projekt, und wählen Sie dann "Als Startprojekt festlegen" aus.
Wählen Sie im oberen Menü "TodoAppService.NET6 erstellen>" aus.
Wählen Sie im Fenster "Veröffentlichen" "Ziel: Azure" aus, und drücken Sie dann "Weiter".
Wählen Sie "Bestimmtes Ziel" aus: Azure-App Dienst (Windows), und drücken Sie dann "Weiter".
Melden Sie sich bei Bedarf an, und wählen Sie einen geeigneten Abonnementnamen aus.
Stellen Sie sicher, dass die Ansicht auf " Ressource" festgelegt ist.
Erweitern Sie die quickstart Ressourcengruppe, und wählen Sie dann den zuvor erstellten App-Dienst aus.
Wählen Sie Fertig stellenaus.
Nachdem der Veröffentlichungsprofilerstellungsprozess abgeschlossen ist, wählen Sie "Schließen" aus.
Suchen Sie die Dienstabhängigkeiten, und wählen Sie die dreifachen Punkte neben der SQL Server-Datenbank aus, und wählen Sie dann Verbinden aus.
Wählen Sie Azure SQL-Datenbank und dann "Weiter" aus.
Wählen Sie die Schnellstartdatenbank und dann "Weiter" aus.
Füllen Sie das Formular mithilfe des SQL-Benutzernamens und des Kennworts aus, das sich in den Ausgaben der Bereitstellung befand, und wählen Sie dann "Weiter" aus.
Wählen Sie Fertig stellenaus.
Wählen Sie "Schließen " aus, wenn sie abgeschlossen ist.
Wählen Sie "Veröffentlichen" aus, um Ihre App im zuvor erstellten Azure-App Dienst zu veröffentlichen.
Sobald der Back-End-Dienst veröffentlicht wurde, wird ein Browser geöffnet. Zur URL hinzufügen /tables/todoitem?ZUMO-API-VERSION=3.0.0 :

Konfigurieren der Beispiel-App

Ihre Clientanwendung muss die Basis-URL Ihres Back-End kennen, damit sie mit ihr kommunizieren kann.

Wenn Sie den azd up Dienst bereitgestellt und bereitgestellt haben, wurde die Constants.cs Datei für Sie erstellt, und Sie können diesen Schritt überspringen.

Erweitern Sie das TodoApp.Data Projekt.
Klicken Sie mit der rechten Maustaste auf das TodoApp.Data Projekt, und wählen Sie dann "Klasse hinzufügen>" aus.
Geben Sie Constants.cs als Namen ein, und wählen Sie dann "Hinzufügen" aus.
Öffnen Sie die Constants.cs.example Datei, und kopieren Sie den Inhalt (STRG-A, gefolgt von STRG-C).
Wechseln Sie zu Constants.cs, markieren Sie den gesamten Text (STRG-A), und fügen Sie dann den Inhalt aus der Beispieldatei (STRG-V) ein.

Ersetzen Sie dies https://APPSERVICENAME.azurewebsites.net durch die Back-End-URL Ihres Diensts.

namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

Sie können die Back-End-URL Ihres Diensts über die Registerkarte "Veröffentlichen " abrufen. Stellen Sie sicher, dass Sie eine HTTPS-URL verwenden.

Speichern Sie die Datei . (STRG-S).

Erstellen und Ausführen der Android-App

Erweitern Sie im Projektmappen-Explorer den xamarin-forms Ordner.
Klicken Sie mit der rechten Maustaste auf das Projekt TodoApp.Forms.Android, und wählen Sie Als Startprojekt festlegen aus.
Wählen Sie in der oberen Leiste "Beliebige CPU-Konfiguration " und das Ziel "TodoApp.Forms.Android " aus:
Wenn stattdessen der Android-Emulator angezeigt wird, haben Sie keinen Android-Emulator erstellt. Weitere Informationen finden Sie unter Android-Emulatorsetup. So erstellen Sie einen neuen Android-Emulator:
- Wählen Sie "Tools>Android Android>Geräte-Manager" aus.
- Wählen Sie + Neu aus.
- Wählen Sie auf der linken Seite die folgenden Optionen aus:
  - Name: quickstart
  - Basisgerät: Pixel 5
  - Prozessor: x86_64
  - Betriebssystem: Android 11.0 – API 30
  - Google-APIs: Aktiviert
- Klicken Sie auf Erstellen.
- Akzeptieren Sie bei Bedarf den Lizenzvertrag. Das Bild wird dann heruntergeladen.
- Sobald die Schaltfläche "Start " angezeigt wird, drücken Sie "Start".
- Wenn Sie zur Hyper-V-Hardwarebeschleunigung aufgefordert werden, lesen Sie die Dokumentation, um die Hardwarebeschleunigung zu aktivieren, bevor Sie fortfahren. Der Emulator wird langsam sein, ohne die Hardwarebeschleunigung zu aktivieren.
Tipp

Starten Sie Ihren Android-Emulator, bevor Sie fortfahren. Sie können dies tun, indem Sie die Android-Geräte-Manager öffnen und neben dem ausgewählten Emulator auf "Start" drücken.
Drücken Sie F5, um das Projekt zu erstellen und auszuführen.

Nachdem die App gestartet wurde, wird eine leere Liste und ein Textfeld zum Hinzufügen von Elementen im Emulator angezeigt. Sie können Folgendes ausführen:

Geben Sie Text in das Feld ein, und drücken Sie dann die EINGABETASTE, um ein neues Element einzufügen.
Wählen Sie ein Element aus, um das fertige Kennzeichen festzulegen oder zu löschen.
Drücken Sie das Aktualisierungssymbol, um Daten aus dem Dienst neu zu laden.

Screenshot of the running Android app.

Erstellen und Ausführen der iOS-App

Hinweis

Sie MÜSSEN dem Leitfaden zum Koppeln mit Mac folgen. Wenn Sie iOS-Anwendungen ohne einen gekoppelten Mac kompilieren oder ausführen, werden Fehler angezeigt.

Erweitern Sie im Projektmappen-Explorer den xamarin-forms Ordner.
Klicken Sie mit der rechten Maustaste auf das Projekt TodoApp.Forms.iOS, und wählen Sie Als Startprojekt festlegen aus.
Wählen Sie in der oberen Leiste i Telefon Simulatorkonfiguration und das Ziel "TodoApp.Forms.iOS" aus:
Wählen Sie den i Telefon Simulator aus.
Drücken Sie F5, um das Projekt zu erstellen und auszuführen.

Nachdem die App gestartet wurde, wird eine leere Liste und ein Textfeld zum Hinzufügen von Elementen im Emulator angezeigt. Sie können Folgendes ausführen:

Geben Sie Text in das Feld ein, und drücken Sie dann die EINGABETASTE, um ein neues Element einzufügen.
Wählen Sie ein Element aus, um das fertige Kennzeichen festzulegen oder zu löschen.
Drücken Sie das Aktualisierungssymbol, um Daten aus dem Dienst neu zu laden.

Screenshot of the running i O S app showing the to do list.

Problembehandlung

Der Remotesimulator, der im Lieferumfang von Visual Studio 2022 enthalten ist, ist mit XCode 13.3 nicht kompatibel. Sie erhalten die folgende Fehlermeldung:

Screenshot of the error message when launching the i O S simulator.

So umgehen Sie dieses Problem:

Deaktivieren Sie den Remotesimulator (Extras / Optionen / iOS Einstellungen / Deaktivieren des Remotesimulators für Windows). Wenn die Option deaktiviert ist, wird der Simulator auf dem Mac anstelle von Windows ausgeführt. Sie können dann direkt auf Ihrem Mac mit dem Simulator interagieren, während Sie den Debugger usw. unter Windows verwenden.
Deaktivieren Sie den Remotesimulator wie oben, damit der Simulator auf dem Mac ausgeführt wird. Verwenden Sie dann eine Remotedesktop-App, um über Windows eine Verbindung mit dem Mac-Desktop herzustellen. Remotedesktopoptionen umfassen Devolutions Remote Desktop Manager (schnell und es gibt eine kostenlose Version verfügbar), und VNC-Clients (langsamer und kostenlos).
Verwenden Sie ein physisches Gerät, um anstelle des Simulators zu testen. Sie können ein kostenloses Bereitstellungsprofil abrufen, um das Authentifizierungslernprogramm abzuschließen.

Nächste Schritte

Fahren Sie mit dem Lernprogramm fort, indem Sie der App die Authentifizierung hinzufügen.