Delen via

Een .NET TENANT-app bouwen met Azure Mobile Apps

  • Artikel

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

In deze zelfstudie leert u hoe u een cloudgebaseerde back-endservice toevoegt aan een platformoverschrijdende mobiele app met behulp van .NET MAUI en een back-end van een mobiele Azure-app. U maakt zowel een nieuwe back-end voor mobiele apps als een eenvoudige takenlijst app waarin app-gegevens in Azure worden opgeslagen.

U moet deze zelfstudie voltooien voordat u andere .NET MAUI-zelfstudies gebruikt met behulp van de functie Mobile Apps in Azure App Service.

Voorwaarden

U hebt het volgende nodig om deze zelfstudie te voltooien:

  • Visual Studio 2022 met de volgende werkbelastingen:
    • ASP.NET en webontwikkeling
    • Azure-ontwikkeling
    • Mobiele ontwikkeling met .NET
  • Een Azure-account.
  • De Azure CLI-.
    • Meld u aan met az login en selecteer een geschikt abonnement voordat u begint.
  • (Optioneel) De Azure Developer CLI-.
  • Een virtuele Android-apparaat, met de volgende instellingen:
    • Telefoon: Elke telefoonafbeelding- we gebruiken de Pixel 5 om te testen.
    • Systeeminstallatiekopieën: Android 11 (API 30 met Google-API's)
  • Een beschikbare Mac (voor het compileren en uitvoeren van de iOS-versie):
    • XCode- installeren
    • Open Xcode na de installatie, zodat deze extra vereiste onderdelen kan toevoegen.
    • Selecteer XCode Preferences...>Componentsen installeer een iOS-simulator wanneer u deze hebt geopend.
    • Volg de handleiding voor Koppelen aan Mac.

Er is een Mac vereist om de iOS-versie te compileren.

U kunt deze zelfstudie op Mac of Windows voltooien.

De voorbeeld-app downloaden

  1. Open de opslagplaats azure-mobile-apps in uw browser.

  2. Open de vervolgkeuzelijst Code en selecteer ZIP-downloaden.

    Schermopname van het menu Code op GitHub.

  3. Zodra het downloaden is voltooid, opent u de map Downloads en zoekt u het azure-mobile-apps-main.zip bestand.

  4. Klik met de rechtermuisknop op het gedownloade bestand en selecteer Alles extraheren....

    Als u wilt, kunt u PowerShell gebruiken om het archief uit te vouwen:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip

De voorbeelden bevinden zich in de map in de uitgepakte bestanden. Het voorbeeld voor de quickstart heet TodoApp. U kunt het voorbeeld openen in Visual Studio door te dubbelklikken op het bestand TodoApp.sln.

schermopname van de verkenner voor de oplossing.

De back-end implementeren in Azure

Notitie

Als u de back-end al hebt geïmplementeerd vanuit een andere quickstart, kunt u dezelfde back-end gebruiken en deze stap overslaan.

Om de back-endservice te implementeren, doen we het volgende:

  • Richt een Azure App Service en Azure SQL Database in op Azure.
  • Gebruik Visual Studio om de servicecode te implementeren in de zojuist gemaakte Azure App Service.

De Azure Developer CLI gebruiken om alle stappen uit te voeren

Het TodoApp-voorbeeld is geconfigureerd ter ondersteuning van de Azure Developer CLI. Alle stappen voltooien (inrichten en implementeren):

  1. Installeer de Azure Developer CLI-.
  2. Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat ook azure.yaml.
  3. Voer azd upuit.

Als u nog niet bent aangemeld bij Azure, wordt de browser gestart om u aan te melden. U wordt vervolgens gevraagd om een abonnement en een Azure-regio te gebruiken. De Azure Developer CLI richt vervolgens de benodigde resources in en implementeert de servicecode naar de Azure-regio en het abonnement van uw keuze. Ten slotte schrijft de Azure Developer CLI een geschikt Constants.cs-bestand voor u.

U kunt de opdracht azd env get-values uitvoeren om de SQL-verificatiegegevens te zien als u rechtstreeks toegang wilt krijgen tot de database.

Als u de stappen hebt voltooid met de Azure Developer CLI, gaat u verder met de volgende stap. Als u de Azure Developer CLI niet wilt gebruiken, gaat u verder met de handmatige stappen.

Resources maken in Azure.

  1. Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat ook azuredeploy.json.

  2. Zorg ervoor dat u bent aangemeld en een abonnement hebt geselecteerd met behulp van de Azure CLI.

  3. Maak een nieuwe resourcegroep:

    az group create -l westus -g quickstart

    Met deze opdracht maakt u de quickstart resourcegroep in de regio VS - west. U kunt elke gewenste regio selecteren, mits u daar resources kunt maken. Zorg ervoor dat u dezelfde naam en regio gebruikt, waar ze ook worden vermeld in deze zelfstudie.

  4. Maak de resources met behulp van een groepsimplementatie:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234

    Kies een sterk wachtwoord voor uw SQL Administrator-wachtwoord. U hebt deze later nodig bij het openen van de database.

  5. Zodra de implementatie is voltooid, haalt u de uitvoervariabelen op omdat deze belangrijke informatie bevatten die u later nodig hebt:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs

    Een voorbeeld van uitvoer is:

    schermopname van de opdrachtregelresultaten.

  6. Noteer elk van de waarden in de uitvoer voor later gebruik.

De servicecode publiceren

Open de TodoApp.sln in Visual Studio.

  1. Selecteer in het rechterdeelvenster de Solutions Explorer.

  2. Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer Instellen als opstartproject.

  3. Selecteer in het bovenste menu Build>Publish TodoAppService.NET6.

  4. Selecteer In het venster Publiceren doel: Azureen druk vervolgens op Volgende.

    Schermopname van het doelselectievenster.

  5. Selecteer Specifiek doel: Azure App Service -en druk vervolgens op Volgende.

    schermopname van het specifieke doelselectievenster.

  6. Meld u indien nodig aan en selecteer een geschikte abonnementsnaam.

  7. Zorg ervoor dat weergave- is ingesteld op resourcegroep.

  8. Vouw de quickstart resourcegroep uit en selecteer vervolgens de App Service die eerder is gemaakt.

    schermopname van het selectievenster van de App Service.

  9. Selecteer voltooien.

  10. Zodra het proces voor het maken van het publicatieprofiel is voltooid, selecteert u sluiten.

  11. Zoek de Service-afhankelijkheden en selecteer de drie puntjes naast de SQL Server-database en selecteer vervolgens Verbinding maken.

    schermopname van de configuratieselectie van de S Q L-server.

  12. Selecteer Azure SQL Databaseen selecteer vervolgens Volgende.

  13. Selecteer de quickstart database en selecteer vervolgens Volgende.

    Schermopname van het selectievenster van de database.

  14. Vul het formulier in met behulp van de SQL-gebruikersnaam en het wachtwoord in de uitvoer van de implementatie en selecteer vervolgens Volgende.

    Schermopname van het venster database-instellingen.

  15. Selecteer voltooien.

  16. Selecteer sluiten wanneer u klaar is.

  17. Selecteer Publish om uw app te publiceren naar de Azure App Service die u eerder hebt gemaakt.

    Schermopname met de knop Publiceren.

  18. Zodra de back-endservice is gepubliceerd, wordt er een browser geopend. Voeg /tables/todoitem?ZUMO-API-VERSION=3.0.0 toe aan de URL:

    Schermopname van de browseruitvoer nadat de service is gepubliceerd.

De voorbeeld-app configureren

Uw clienttoepassing moet de basis-URL van uw back-end kennen, zodat deze ermee kan communiceren.

Als u azd up hebt gebruikt om de service in te richten en te implementeren, is het Constants.cs-bestand voor u gemaakt en kunt u deze stap overslaan.

  1. Vouw het TodoApp.Data project uit.

  2. Klik met de rechtermuisknop op het TodoApp.Data project en selecteer >Klasse toevoegen....

  3. Voer Constants.cs in als de naam en selecteer toevoegen.

    Schermopname van het toevoegen van het Constants.cs bestand aan het project.

  4. Open het Constants.cs.example-bestand en kopieer de inhoud (Ctrl-A, gevolgd door Ctrl-C).

  5. Ga naar Constants.cs, markeer alle tekst (Ctrl-A) en plak de inhoud uit het voorbeeldbestand (Ctrl-V).

  6. Vervang de https://APPSERVICENAME.azurewebsites.net door de back-end-URL van uw service.

    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";
    }
}

    U kunt de back-end-URL van uw service verkrijgen op het tabblad Publiceren. Zorg ervoor dat u een https URL gebruikt.

  7. Sla het bestand op. (Ctrl-S).

De Android-app bouwen en uitvoeren

  1. Vouw in Solution Explorer de map maui uit.

  2. Klik met de rechtermuisknop op het TodoApp.MAUI project en selecteer Instellen als opstartproject.

  3. Selecteer in de bovenste balk een geschikte Android-emulator:

    Schermopname die laat zien hoe u de uitvoeringsconfiguratie instelt voor een dot net- en Android-app.

  4. Als er geen Android-emulators beschikbaar zijn, moet u er een maken. Zie Android-emulator instellenvoor meer informatie. Ga als volgt te werk om een nieuwe Android-emulator te maken:

    • Selecteer Tools>Android>Android Device Manager.
    • Selecteer + Nieuwe.
    • Selecteer de volgende opties aan de linkerkant:
      • Naam: quickstart
      • Basisapparaat: Pixel 5
      • Processor: x86_64
      • Besturingssysteem: Android 11.0 - API 30
      • Google-API's: gecontroleerd
    • Selecteer maken.
    • Accepteer indien nodig de gebruiksrechtovereenkomst. De installatiekopieën worden vervolgens gedownload.
    • Zodra de knop Start wordt weergegeven, drukt u op Start.
    • Als u wordt gevraagd om Hyper-V hardwareversnelling, leest u de documentatie om hardwareversnelling in te schakelen voordat u doorgaat. De emulator is traag zonder hardwareversnelling in te schakelen.

    Fooi

    Start uw Android-emulator voordat u doorgaat. U kunt dit doen door Android Device Manager te openen en op Start naast de gekozen emulator te drukken.

  5. Druk op F5- om het project te bouwen en uit te voeren.

Zodra de app is gestart, ziet u een lege lijst en een tekstvak om items toe te voegen in de emulator. U kunt:

  • Voer tekst in het vak in en druk op Enter om een nieuw item in te voegen.
  • Selecteer een item om de voltooide vlag in te stellen of te wissen.
  • Druk op het vernieuwingspictogram om gegevens van de service opnieuw te laden.

Schermopname van de actieve Android-app met de takenlijst.

De Windows-app bouwen en uitvoeren

  1. Vouw in Solution Explorer de map maui uit.

  2. Klik met de rechtermuisknop op het TodoApp.MAUI project en selecteer Instellen als opstartproject.

  3. Selecteer in de bovenste balk Windows-machine.

    Schermopname waarin wordt getoond hoe u de uitvoeringsconfiguratie instelt voor een dot net-bestand voor de Windows-app.

  4. Druk op F5- om het project te bouwen en uit te voeren.

Zodra de app is gestart, ziet u een lege lijst en een tekstvak om items toe te voegen. U kunt:

  • Voer tekst in het vak in en druk op Enter om een nieuw item in te voegen.
  • Selecteer een item om de voltooide vlag in te stellen of te wissen.
  • Druk op het vernieuwingspictogram om gegevens van de service opnieuw te laden.

Schermopname van de actieve Windows-app met de takenlijst.

Volgende stappen

Ga door met de zelfstudie door verificatie toe te voegen aan de app.