Een Xamarin.Forms-app bouwen met Azure Mobile Apps

In deze zelfstudie leert u hoe u een cloudgebaseerde back-endservice toevoegt aan een platformoverschrijdende mobiele app met behulp van Xamarin.Forms 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 worden opgeslagen in Azure.

U moet deze zelfstudie voltooien voordat u andere Xamarin Forms-zelfstudies gebruikt met behulp van de functie Mobile Apps in Azure-app Service.

Vereisten

U kunt deze zelfstudie op Mac of Windows voltooien. U hebt het volgende nodig om deze zelfstudie te voltooien:

• Visual Studio 2022 met de volgende workloads.
  • ASP.NET-ontwikkeling 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 virtueel Android-apparaat met de volgende instellingen:
  • Telefoon: Elke telefoonafbeelding: we gebruiken de Pixel 5 voor het testen.
  • Systeeminstallatiekopieën: Android 11 (API 30 met Google-API's)

Als u de iOS-editie van de app compileert, moet u een beschikbare Mac hebben:

• XCode installeren
• Open Xcode na de installatie, zodat deze extra vereiste onderdelen kan toevoegen.
• Selecteer XCode-voorkeuren nadat u deze hebt geopend...>Onderdelen en installeer een iOS-simulator.
• Als u de zelfstudie in Windows voltooit, volgt u de handleiding voor koppelen aan Mac.

De voorbeeld-app downloaden

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

2. Open de vervolgkeuzelijst Code en selecteer ZIP downloaden.

   

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

De back-end implementeren in Azure

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 azure.yamlook .
3. 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.

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

2. Zorg ervoor dat u zich hebt 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-Beheer istratorwachtwoord. 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:

   

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

De servicecode publiceren

Open het TodoApp.sln bestand in Visual Studio.

1. Selecteer in het rechterdeelvenster de Oplossingenverkenner.

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 Doel in het venster Publiceren en druk vervolgens op Volgende.

   

5. Selecteer Specifiek doel: Azure-app-service (Windows) en druk vervolgens op Volgende.

   

6. Meld u zo 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.

   

9. Selecteer Voltooien.

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

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

    

12. Selecteer Azure SQL Database en selecteer vervolgens Volgende.

13. Selecteer de snelstartdatabase en selecteer vervolgens Volgende.

    

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

    

15. Selecteer Voltooien.

16. Selecteer Sluiten wanneer u klaar is.

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

    

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

1. Vouw het TodoApp.Data project uit.

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

3. Voer de Constants.cs naam in en selecteer Vervolgens Toevoegen.

   

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 Solutions Explorer de xamarin-forms map uit.

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

3. Selecteer in de bovenste balk elke CPU-configuratie en het TodoApp.Forms.Android-doel :

   

4. Als u in plaats daarvan Android Emulator ziet, hebt u geen Android-emulator gemaakt. Zie Setup van Android-emulator voor meer informatie. Ga als volgt te werk om een nieuwe Android-emulator te maken:

   • Selecteer Extra Android-Apparaatbeheer>>.
   • Selecteer + Nieuw.
   • 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.

   Tip

   Start uw Android-emulator voordat u doorgaat. U kunt dit doen door de Android-Apparaatbeheer 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.

De iOS-app bouwen en uitvoeren

1. Vouw in Solutions Explorer de xamarin-forms map uit.

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

3. Selecteer in de bovenste balk i Telefoon Simulatorconfiguratie en het todoApp.Forms.iOS-doel:

   

4. Selecteer de i Telefoon Simulator

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.

Problemen oplossen

De externe simulator die wordt geleverd met Visual Studio 2022 is niet compatibel met XCode 13.3. U ontvangt het volgende foutbericht:

Dit probleem omzeilen:

• Schakel de externe simulator uit (Extra/Opties/ iOS-Instellingen/schakel Externe simulator uit naar Windows). Wanneer dit selectievakje is uitgeschakeld, wordt de simulator uitgevoerd op de Mac in plaats van op Windows. U kunt de simulator vervolgens rechtstreeks op uw Mac gebruiken met behulp van het foutopsporingsprogramma, enzovoort in Windows.
• Schakel de externe simulator uit zoals hierboven, zodat de simulator wordt uitgevoerd op de Mac. Gebruik vervolgens een app voor extern bureaublad om vanuit Windows verbinding te maken met het Mac-bureaublad. Opties voor extern bureaublad zijn Onder andere Devolutions Remote Desktop Manager (snel en er is een gratis versie beschikbaar) en VNC-clients (langzamer en gratis).
• Gebruik een fysiek apparaat om te testen in plaats van de simulator. U kunt een gratis inrichtingsprofiel verkrijgen om de verificatiezelfstudie te voltooien.

Volgende stappen

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