Freigeben über

Erstellen einer .NET MAUI-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 erfahren Sie, wie Sie mithilfe von .NET MAUI und einem mobilen Azure-App-Back-End einen cloudbasierten Back-End-Dienst zu einer plattformübergreifenden mobilen App hinzufügen. Sie erstellen sowohl ein neues mobiles App-Back-End als auch eine einfache Todo-Liste App, die App-Daten in Azure speichert.

Sie müssen dieses Lernprogramm vor anderen .NET MAUI-Lernprogrammen mit dem Feature "Mobile Apps" in Azure App Service abschließen.

Voraussetzungen

Um dieses Lernprogramm 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ätmit den folgenden Einstellungen:
    • Telefon: Jedes Telefonbild – wir verwenden pixel 5 zum Testen.
    • Systembild: Android 11 (API 30 mit Google-APIs)
  • Ein verfügbarer Mac (zum Kompilieren und Ausführen der iOS-Version):
    • Installieren XCode-
    • Öffnen Sie Xcode nach der Installation, damit sie zusätzliche erforderliche Komponenten hinzufügen kann.
    • Wählen Sie nach dem Öffnen XCode-Einstellungen...>Komponentenaus, und installieren Sie einen iOS-Simulator.
    • Folgen Sie der Anleitung, um Paar zu Mac.

Zum Kompilieren der iOS-Version ist ein Mac erforderlich.

Sie können dieses Lernprogramm unter Mac oder Windows abschließen.

Herunterladen der Beispiel-App

  1. Öffnen Sie das Azure-Mobile-Apps-Repository in Ihrem Browser.

  2. Öffnen Sie die Dropdownliste Code, und wählen Sie dann ZIP-herunterladen aus.

    Screenshot des Menüs

  3. Sobald der Download abgeschlossen ist, öffnen Sie Ihre Downloads Ordner, und suchen Sie die azure-mobile-apps-main.zip Datei.

  4. 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 in den Beispielen Ordners in den extrahierten Dateien. Das Beispiel für den Schnellstart heißt TodoApp. Sie können das Beispiel in Visual Studio öffnen, indem Sie auf die TodoApp.sln Datei doppelklicken.

Screenshot des Datei-Explorers für die Projektmappe.

Bereitstellen des Back-Ends in Azure

Anmerkung

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 einer Azure App Service- und Azure SQL-Datenbank für Azure.
  • Verwenden Sie Visual Studio, um den Dienstcode für den neu erstellten Azure App Service 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):

  1. Installieren Sie die Azure Developer CLI.
  2. Öffnen Sie ein Terminal, und ändern Sie das Verzeichnis in den Ordner, der die TodoApp.sln Datei enthält. Dieses Verzeichnis enthält auch azure.yaml.
  3. Führen Sie azd upaus.

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 Befehl azd env get-values 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 Schrittfort. Wenn Sie die Azure Developer CLI nicht verwenden möchten, fahren Sie mit den manuellen Schritten fort.

Erstellen Sie Ressourcen in Azure.

  1. Öffnen Sie ein Terminal, und ändern Sie das Verzeichnis in den Ordner, der die TodoApp.sln Datei enthält. Dieses Verzeichnis enthält auch azuredeploy.json.

  2. Stellen Sie sicher, dass Sie angemeldet und ein Abonnement ausgewählt haben, mit der Azure CLI.

  3. Erstellen sie eine neue Ressourcengruppe:

    az group create -l westus -g quickstart

    Mit diesem Befehl wird die ressourcengruppe quickstart in der Region West-USA 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.

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

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

    Screenshot der Befehlszeilenergebnisse.

  6. Notieren Sie sich die einzelnen Werte in den Ausgaben für die spätere Verwendung.

Veröffentlichen des Dienstcodes

Öffnen Sie die TodoApp.sln in Visual Studio.

  1. Wählen Sie im rechten Bereich den Projektmappen-Exploreraus.

  2. Klicken Sie mit der rechten Maustaste auf das TodoAppService.NET6 Projekt, und wählen Sie dann Als Startprojekt festlegenaus.

  3. Wählen Sie im oberen Menü Build>Publish TodoAppService.NET6aus.

  4. Wählen Sie im Fenster Veröffentlichen Ziel: Azureaus, und drücken Sie dann Weiter.

    Screenshot des Zielauswahlfensters.

  5. Wählen Sie ein bestimmtes Ziel aus: Azure App Service (Windows), und drücken Sie dann Weiter.

    Screenshot des spezifischen Zielauswahlfensters.

  6. Melden Sie sich bei Bedarf an, und wählen Sie einen geeigneten Abonnementnamenaus.

  7. Stellen Sie sicher, dass Ansicht auf Ressourcengruppefestgelegt ist.

  8. Erweitern Sie die Ressourcengruppe quickstart, und wählen Sie dann den zuvor erstellten App-Dienst aus.

    Screenshot des App-Dienstauswahlfensters.

  9. Wählen Sie Endeaus.

  10. Nachdem der Erstellungsprozess des Veröffentlichungsprofils abgeschlossen ist, wählen Sie Schließenaus.

  11. Suchen Sie die Dienstabhängigkeiten und wählen Sie die dreifachen Punkte neben der SQL Server-Datenbank aus, und wählen Sie dann Verbindenaus.

    Screenshot mit der Konfiguration der S Q L-Serverauswahl.

  12. Wählen Sie Azure SQL-Datenbank-aus, und wählen Sie dann Weiteraus.

  13. Wählen Sie die Schnellstart- Datenbank aus, und wählen Sie dann Weiteraus.

    Screenshot des Datenbankauswahlfensters.

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

    Screenshot des Datenbankeinstellungsfensters.

  15. Wählen Sie Endeaus.

  16. Wählen Sie nach Abschluss schließen aus.

  17. Wählen Sie Veröffentlichen aus, um Ihre App im zuvor erstellten Azure App Service zu veröffentlichen.

    Screenshot mit der Schaltfläche

  18. Sobald der Back-End-Dienst veröffentlicht wurde, wird ein Browser geöffnet. Fügen Sie der URL /tables/todoitem?ZUMO-API-VERSION=3.0.0 hinzu:

    Screenshot mit der Browserausgabe nach der Veröffentlichung des Diensts.

Konfigurieren der Beispiel-App

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

Wenn Sie azd up zum Bereitstellen und Bereitstellen des Diensts verwendet haben, wurde die Constants.cs Datei für Sie erstellt, und Sie können diesen Schritt überspringen.

  1. Erweitern Sie das TodoApp.Data Projekt.

  2. Klicken Sie mit der rechten Maustaste auf das TodoApp.Data Projekt, und wählen Sie dann Klasse>hinzufügen....

  3. Geben Sie Constants.cs als Namen ein, und wählen Sie dann Hinzufügenaus.

    Screenshot zum Hinzufügen der Constants.cs Datei zum Projekt.

  4. Öffnen Sie die Constants.cs.example Datei, und kopieren Sie den Inhalt (STRG-A, gefolgt von Ctrl-C).

  5. Wechseln Sie zu Constants.cs, markieren Sie den gesamten Text (Ctrl-A), und fügen Sie dann den Inhalt aus der Beispieldatei (Ctrl-V) ein.

  6. Ersetzen Sie die 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.

  7. Speichern Sie die Datei. (Ctrl-S).

Erstellen und Ausführen der Android-App

  1. Erweitern Sie im Projektmappen-Explorer den Ordner maui.

  2. Klicken Sie mit der rechten Maustaste auf das TodoApp.MAUI Projekt, und wählen Sie Als Startprojekt festlegenaus.

  3. Wählen Sie in der oberen Leiste einen geeigneten Android-Emulator aus:

    Screenshot, der zeigt, wie die Ausführungskonfiguration für eine Dot net maui für Android-App festgelegt wird.

  4. Wenn keine Android-Emulatoren verfügbar sind, müssen Sie einen erstellen. Weitere Informationen finden Sie unter Android-Emulatorsetup. So erstellen Sie einen neuen Android-Emulator:

    • Wählen Sie Tools>Android>Android Device Manageraus.
    • Wählen Sie + Neueaus.
    • 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
    • Wählen Sie Erstellenaus.
    • 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.

    Trinkgeld

    Starten Sie Ihren Android-Emulator, bevor Sie fortfahren. Sie können dies tun, indem Sie den Android-Geräte-Manager öffnen und Start- neben dem ausgewählten Emulator drücken.

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

  • 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 der ausgeführten Android-App mit der Aufgabenliste.

Erstellen und Ausführen der Windows-App

  1. Erweitern Sie im Projektmappen-Explorer den Ordner maui.

  2. Klicken Sie mit der rechten Maustaste auf das TodoApp.MAUI Projekt, und wählen Sie Als Startprojekt festlegenaus.

  3. Wählen Sie in der oberen Leiste Windows Machineaus.

    Screenshot, der zeigt, wie die Ausführungskonfiguration für eine dot net maui für Windows-App festgelegt wird.

  4. 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 angezeigt. Sie können:

  • 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 der ausgeführten Windows-App mit der Aufgabenliste.

Nächste Schritte

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