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

Artikel
09/07/2023

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 WPF-bureaublad-app (Windows Presentation Framework) met behulp van Azure Mobile Apps 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 alle andere Windows-zelfstudies (WPF) over het gebruik van de functie Mobile Apps in Azure App Service worden gebruikt.

Voorwaarden

U hebt het volgende nodig om deze zelfstudie te voltooien:

Visual Studio 2022 met de volgende workloads.
- ASP.NET en webontwikkeling
- Azure-ontwikkeling
- .NET-desktopontwikkeling
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 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):

Installeer de Azure Developer CLI-.
Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat ook azure.yaml.
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.

Open een terminal en wijzig de map in de map met het TodoApp.sln bestand. Deze map bevat ook azuredeploy.json.
Zorg ervoor dat u bent 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 Administrator-wachtwoord. 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 de TodoApp.sln in Visual Studio.

Selecteer in het rechterdeelvenster de Solutions Explorer.
Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer Instellen als opstartproject.
Selecteer in het bovenste menu Build>Publish TodoAppService.NET6.
Selecteer In het venster Publiceren doel: Azureen druk vervolgens op Volgende.
Selecteer Specifiek doel: Azure App Service -en druk vervolgens op Volgende.
Meld u indien 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 Service-afhankelijkheden en selecteer de drie puntjes naast de SQL Server-database en selecteer vervolgens Verbinding maken.
Selecteer Azure SQL Databaseen selecteer vervolgens Volgende.
Selecteer de quickstart database 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 Publish 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. Voeg /tables/todoitem?ZUMO-API-VERSION=3.0.0 toe aan de URL:

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.

Vouw het TodoApp.Data project uit.
Klik met de rechtermuisknop op het TodoApp.Data project en selecteer >Klasse toevoegen....
Voer Constants.cs in als de naam en selecteer 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 Solution Explorer de map windows uit.
Klik met de rechtermuisknop op het TodoApp.WPF project en selecteer Instellen als opstartproject.
Selecteer in de bovenste balk de Een CPU--configuratie en het TodoApp.WPF- 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 Enter of 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.

Delen via