Een Windows-app (UWP) bouwen met Azure Mobile Apps

Artikel
10/23/2023

In deze zelfstudie leert u hoe u een cloudgebaseerde back-endservice toevoegt aan een Universeel Windows-platform desktop-app (UWP) met behulp van Azure Mobile Apps en een back-end voor mobiele Apps van Azure. U maakt zowel een nieuwe back-end voor mobiele apps als een eenvoudige takenlijst-app waarin app-gegevens worden opgeslagen in Azure.

Deze zelfstudie is vereist voor alle andere Windows-zelfstudies (UWP) over het gebruik van de functie Mobile Apps in Azure-app Service.

Vereisten

U hebt het volgende nodig om deze zelfstudie te voltooien:

Visual Studio 2022 met de volgende workloads.
- ASP.NET-ontwikkeling en webontwikkeling
- Azure-ontwikkeling
- Ontwikkeling voor Universeel Windows-platform
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.

Deze zelfstudie kan alleen worden voltooid op een Windows-systeem.

De voorbeeld-app downloaden

Open de opslagplaats azure-mobile-apps in uw browser.
Open de vervolgkeuzelijst Code en selecteer ZIP downloaden.
Zodra het downloaden is voltooid, opent u de map Downloads en zoekt u het azure-mobile-apps-main.zip bestand.
Klik met de rechtermuisknop op het gedownloade bestand en selecteer Alles uitpakken....

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 met voorbeelden in de uitgepakte bestanden. Het voorbeeld voor de quickstart heeft de naam TodoApp. U kunt het voorbeeld openen in Visual Studio door te dubbelklikken op het TodoApp.sln bestand.

Screenshot of the file explorer for the solution.

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):

Installeer de Azure Developer CLI.
Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat azure.yamlook .
Voer azd up uit.

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 azd env get-values opdracht 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.

Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat azuredeploy.jsonook .
Zorg ervoor dat u zich hebt aangemeld en een abonnement hebt geselecteerd met behulp van de Azure CLI.
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.
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-Beheer istratorwachtwoord. U hebt deze later nodig bij het openen van de database.
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:
Noteer elk van de waarden in de uitvoer voor later gebruik.

De servicecode publiceren

Open het TodoApp.sln bestand in Visual Studio.

Selecteer in het rechterdeelvenster de Oplossingenverkenner.
Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer Instellen als opstartproject.
Selecteer In het bovenste menu Build>Publish TodoAppService.NET6.
Selecteer Doel in het venster Publiceren en druk vervolgens op Volgende.
Selecteer Specifiek doel: Azure-app-service (Windows) en druk vervolgens op Volgende.
Meld u zo nodig aan en selecteer een geschikte abonnementsnaam.
Zorg ervoor dat weergave is ingesteld op Resourcegroep.
Vouw de quickstart resourcegroep uit en selecteer vervolgens de App Service die eerder is gemaakt.
Selecteer Voltooien.
Zodra het proces voor het maken van het publicatieprofiel is voltooid, selecteert u Sluiten.
Zoek de serviceafhankelijkheden en selecteer de drie puntjes naast de SQL Server-database en selecteer vervolgens Verbinding maken.
Selecteer Azure SQL Database en selecteer vervolgens Volgende.
Selecteer de snelstartdatabase en selecteer vervolgens Volgende.
Vul het formulier in met behulp van de SQL-gebruikersnaam en het wachtwoord in de uitvoer van de implementatie en selecteer vervolgens Volgende.
Selecteer Voltooien.
Selecteer Sluiten wanneer u klaar is.
Selecteer Publiceren om uw app te publiceren naar de Azure-app Service die u eerder hebt gemaakt.
Zodra de back-endservice is gepubliceerd, wordt er een browser geopend. Toevoegen /tables/todoitem?ZUMO-API-VERSION=3.0.0 aan de URL:

De voorbeeld-app kunt configureren

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

Als u azd up de service hebt ingericht en geïmplementeerd, is het Constants.cs bestand voor u gemaakt en kunt u deze stap overslaan.

Vouw het TodoApp.Data project uit.
Klik met de rechtermuisknop op het TodoApp.Data project en selecteer Klasse toevoegen>....
Voer de Constants.cs naam in en selecteer Vervolgens Toevoegen.
Open het Constants.cs.example bestand en kopieer de inhoud (Ctrl-A, gevolgd door Ctrl-C).
Ga naar Constants.cs, markeer alle tekst (Ctrl-A) en plak de inhoud uit het voorbeeldbestand (Ctrl-V).

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.

Sla het bestand op. (Ctrl-S).

De voorbeeld-app bouwen en uitvoeren

Vouw in Solutions Explorer de windows map uit.
Klik met de rechtermuisknop op het TodoApp.UWP project en selecteer Instellen als opstartproject.
Selecteer in de bovenste balk de CPU-configuratie en het TodoApp.UWP-doel :
Druk op F5 om het project te bouwen en uit te voeren.

Zodra de app is gestart, ziet u een lege lijst met een tekstvak. U kunt:

Voer tekst in en druk op het + pictogram om het item toe te voegen.
Schakel het selectievakje in of uit om een item als voltooid te markeren.
Druk op het vernieuwingspictogram om gegevens van de service opnieuw te laden.

Volgende stappen

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