Een Windows-app maken met een Azure-back-end

2019-06-25

Overzicht

In deze zelfstudie leert u hoe u een cloudgebaseerde back-endservice toevoegt aan een UWP-app (Universal Windows Platform). Zie Wat zijn Mobile Apps voor meer informatie. Hier volgen schermopnamen van de voltooide app:

Voltooide bureaublad-app

Het voltooien van deze zelfstudie is een vereiste voor alle andere zelfstudies voor mobiele apps voor UWP-apps.

Vereiste voorwaarden

U hebt het volgende nodig om deze zelfstudie af te ronden:

Een actief Azure-account. Als u geen account hebt, kunt u zich registreren voor een proefversie van Azure en maximaal 10 gratis mobiele apps krijgen die u kunt blijven gebruiken, zelfs nadat uw proefabonnement is beëindigd. Zie Gratis proefversie van Azure voor meer informatie.
Windows 10.
Visual Studio Community 2017.
Bekendheid met de ontwikkeling van UWP-apps. Ga naar de UWP-documentatie voor meer informatie over het instellen van UWP-apps.

Een nieuwe back-end voor mobiele Azure-apps maken

Volg deze stappen om een nieuwe back-end voor mobiele apps te maken.

Meld u aan bij het Azure-portaal.
Klik op Een resource maken.
Typ Webapp in het zoekvak.
Selecteer in de resultatenlijst de Web App uit de Marketplace.
Selecteer uw abonnement en resourcegroep (selecteer een bestaande resourcegroep of maak een nieuwe (met dezelfde naam als uw app)).
Kies een unieke Naam voor uw webapp.
Kies de standaard Publiceren optie als Code.
In de Runtime-stack moet u een versie selecteren voor ASP.NET of Node. Als u een .NET-back-end bouwt, selecteert u een versie onder ASP.NET. Als u een op Node gebaseerde toepassing wilt gebruiken, selecteert u een van de versies van Node.
Kies het juiste besturingssysteem, Linux of Windows.
Selecteer de regio waar u deze app wilt uitrollen.
Selecteer het juiste App Service-plan en klik op Controleren en maken.
Selecteer onder Resourcegroep een bestaande resourcegroep of maak een nieuwe (met dezelfde naam als uw app).
Klik op Create. Wacht enkele minuten totdat de service is uitgerold voordat u doorgaat. Bekijk het pictogram Meldingen (bel) in de portalheader voor statusupdates.
Zodra de implementatie is voltooid, klikt u op de sectie Implementatiedetails en vervolgens op de resource van het type Microsoft.Web/sites. Hiermee gaat u naar de App Service-web-app die u zojuist hebt gemaakt.
Klik op het tabblad Configuratie onder Instellingen en klik in de toepassingsinstellingen op de knop Nieuwe toepassingsinstelling.
Voer op de pagina Toepassingsinstelling toevoegen/bewerken Naam in als MobileAppsManagement_EXTENSION_VERSION en Waarde als latest en druk op OK.

U bent klaar om deze zojuist gemaakte App Service-web-app te gebruiken als een mobiele app.

Een databaseverbinding maken en het client- en serverproject configureren

Download de client-SDK-quickstarts voor de volgende platforms:

iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
Córdoba
Windows (C#)

Opmerking

Als u het iOS-project gebruikt, moet u 'azuresdk-iOS-*.zip' downloaden uit de nieuwste GitHub-release. Pak het MicrosoftAzureMobile.framework bestand uit en voeg dit toe aan de hoofdmap van het project.
U moet een databaseverbinding toevoegen of verbinding maken met een bestaande verbinding. Bepaal eerst of u een gegevensarchief maakt of een bestaand gegevensarchief gebruikt.
- Een nieuwe gegevensopslag maken: Als u een gegevensopslag gaat maken, gebruikt u de volgende quickstart:
  
  Quickstart: Aan de slag met de individuele databases in Azure SQL Database
- #B0 bestaande gegevensbron #A1: volg de onderstaande instructies als u een bestaande databaseverbinding wilt gebruiken
  1. SQL database-verbindingsreeks - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}
    
    #B0 {your_SQLServer} #C1 naam van de server, vindt u deze op de overzichtspagina voor uw database en heeft deze meestal de vorm server_name.database.windows.net. {port} meestal 1433. {your_catalogue} Naam van de database. {your_username} Een gebruikersnaam om toegang te krijgen tot uw database. {your_password} Wachtwoord om toegang te krijgen tot uw database.
    
    #B0 Meer informatie over het SQL-verbindingstekstformaat #C1
  2. Voeg de verbindingsreeks toe aan uw mobiele app. In App Service kunt u verbindingsreeksen voor uw toepassing beheren met behulp van de optie Configuration in het menu.
    
    Een verbindingsreeks toevoegen:
    1. Klik op de Applicatie-instellingen tab.
    2. Klik op [+] Nieuwe verbindingsreeks.
    3. U moet Naam, Waarde en Type voor de connectiestring opgeven.
    4. Typ naam als MS_TableConnectionString
    5. Waarde moet de verbindingsstring zijn die je in de vorige stap hebt gevormd.
    6. Als u een verbindingsreeks toevoegt aan een SQL Azure database, kiest u SQLAzure onder type.
Azure Mobile Apps heeft SDK's voor .NET en Node.js back-ends.
- Node.js back-end
  
  Als u Node.js quickstart-app gaat gebruiken, volgt u de onderstaande instructies.
  1. Ga in het Azure-portal naar Easy Tables. U ziet dit scherm.
    
    Node Easy Tables
  2. Zorg ervoor dat de SQL-verbindingsreeks al is toegevoegd op het tabblad Configuratie. Vink vervolgens het selectievakje bij Ik erken dat hiermee alle site-inhoud wordt overschreven aan en klik op de knop TodoItem-tabel maken.
  3. Klik in Easy Tables op de knop + Toevoegen.
  4. Maak een TodoItem tabel met toegang voor anonieme gebruikers.
- .NET-back-end
  
  Als u de .NET-quickstart-app gaat gebruiken, volgt u de onderstaande instructies.
  1. Download het .NET-serverproject van de Azure Mobile Apps uit het repository azure-mobile-apps-quickstarts.
  2. Bouw het .NET-serverproject lokaal in Visual Studio.
  3. Open Solution Explorer in Visual Studio, klik met de rechtermuisknop op ZUMOAPPNAMEService project, en klik op Publiceren, u ziet een Publish to App Service venster. Als u op een Mac werkt, bekijk dan andere manieren om de app hier te implementeren.
  4. Selecteer App Service als publicatiedoel, klik vervolgens op Select Existing, en klik daarna op de knop Publiceren onder aan het venster.
  5. U moet zich eerst aanmelden bij Visual Studio met uw Azure-abonnement. Selecteer de Subscription, Resource Group, en selecteer vervolgens de naam van uw app. Wanneer u klaar bent, klikt u op OK. Hiermee wordt het .NET-serverproject dat u lokaal hebt, in de App Service-backend geïmplementeerd. Wanneer de implementatie is voltooid, wordt u omgeleid naar http://{zumoappname}.azurewebsites.net/ in de browser.

Het clientproject uitvoeren

Open het UWP-project.
Ga naar de Azure-portal en navigeer naar de mobiele app die u hebt gemaakt. Zoek op het Overview-blad naar de URL die het openbare eindpunt is voor uw mobiele app. Voorbeeld: de sitenaam voor mijn app-naam "test123" wordt https://test123.azurewebsites.net.
Open het bestand App.xaml.cs in deze map - windows-uwp-cs/ZUMOAPPNAME/. De naam van de toepassing is ZUMOAPPNAME.
Vervang ZUMOAPPURL in App klasse de parameter door het bovenstaande openbare eindpunt.

public static MobileServiceClient MobileService = new MobileServiceClient("ZUMOAPPURL");

Wordt

public static MobileServiceClient MobileService = new MobileServiceClient("https://test123.azurewebsites.net");
Druk op F5 om de app te implementeren en uit te voeren.
Typ in de app een zinvolle tekst, zoals De zelfstudie voltooien, in het tekstvak Vul een TodoItem in, en klik op Opslaan.

Hiermee wordt een POST-aanvraag verzonden naar de nieuwe back-end van de mobiele app die wordt gehost in Azure.

Delen via