Xamarin.Forms-alkalmazás létrehozása az Azure Mobile Apps használatával

Jegyzet

Ez a termék ki van állítva. A .NET 8-at vagy újabb verziót használó projektek cseréjét a Community Toolkit Datasync kódtárcímű témakörben talál.

Ez az oktatóanyag bemutatja, hogyan adhat hozzá felhőalapú háttérszolgáltatást egy platformfüggetlen mobilalkalmazáshoz a Xamarin.Forms és egy Azure-mobilalkalmazás-háttérrendszer használatával. Létre fog hozni egy új mobilalkalmazás-háttéralkalmazást és egy egyszerű Todo-listát alkalmazást, amely az Azure-ban tárolja az alkalmazásadatokat.

Ezt az oktatóanyagot az Azure App Service Mobile Apps szolgáltatását használó egyéb Xamarin Forms-oktatóanyagok előtt kell elvégeznie.

Előfeltételek

Ezt az oktatóanyagot Macen vagy Windowson is elvégezheti. Az oktatóanyag elvégzéséhez a következőkre van szüksége:

• Visual Studio 2022 az alábbi számítási feladatokkal.
  • ASP.NET és webfejlesztés
  • Azure-fejlesztés
  • Mobilfejlesztés a .NET-tel
• Egy Azure-fiók.
• Az Azure CLI.
  • Jelentkezzen be a az login, és válasszon ki egy megfelelő előfizetést a kezdés előtt.
• (Nem kötelező) Az Azure Developer CLI.
• Egy Android rendszerű virtuális eszköz, az alábbi beállításokkal:
  • Telefon: Bármilyen telefonkép – teszteléshez a Pixel 5-öt használjuk.
  • Rendszerkép: Android 11 (API 30 Google API-kkal)

Ha összeállítja az alkalmazás iOS-kiadását, rendelkeznie kell egy elérhető Mac gépel:

• Az XCode telepítése
• A telepítés után nyissa meg az Xcode-ot, hogy bármilyen további szükséges összetevőt hozzáadhat.
• A megnyitás után válassza XCode-beállítások...>Összetevőklehetőséget, és telepítsen egy iOS-szimulátort.
• Ha befejezi az oktatóanyagot Windows rendszeren, kövesse az útmutatót a Pár és a Mac.

A mintaalkalmazás letöltése

1. Nyissa meg az azure-mobile-apps adattárat a böngészőben.

2. Nyissa meg a Kód legördülő menüt, majd válassza ZIP-letöltése lehetőséget.

   

3. A letöltés befejezése után nyissa meg a Letöltések mappát, és keresse meg a azure-mobile-apps-main.zip fájlt.

4. Kattintson a jobb gombbal a letöltött fájlra, és válassza az Összes kibontása...lehetőséget.

   Ha szeretné, a PowerShell használatával kibonthatja az archívumot:

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

A minták a kinyert fájlok minták mappájában találhatók. A gyors üzembe helyezési minta neve TodoApp. A minta megnyitásához kattintson duplán a TodoApp.sln fájlra a Visual Studióban.

A háttérrendszer üzembe helyezése az Azure-ban

Jegyzet

Ha már üzembe helyezte a háttérrendszert egy másik gyorsindításból, ugyanazt a háttérrendszert használhatja, és kihagyhatja ezt a lépést.

A háttérszolgáltatás üzembe helyezéséhez a következőt fogjuk tenni:

• Azure App Service és Azure SQL Database kiépítése az Azure-ban.
• A Visual Studióval üzembe helyezheti a szolgáltatáskódot az újonnan létrehozott Azure App Service-ben.

Az Összes lépés végrehajtása az Azure Developer CLI használatával

A TodoApp-minta az Azure Developer CLI támogatására van konfigurálva. Az összes lépés végrehajtása (üzembe helyezés és üzembe helyezés):

1. Telepítse az Azure Developer CLI.
2. Nyisson meg egy terminált, és módosítsa a könyvtárat a TodoApp.sln fájlt tartalmazó mappára. Ez a könyvtár azure.yamlis tartalmaz.
3. Futtassa a azd up.

Ha még nem jelentkezett be az Azure-ba, a böngésző elindul, hogy kérje meg a bejelentkezést. Ezután a rendszer kérni fogja, hogy egy előfizetést és egy Azure-régiót használjon. Az Azure Developer CLI ezután kiépíti a szükséges erőforrásokat, és üzembe helyezi a szolgáltatáskódot az Ön által választott Azure-régióban és előfizetésben. Végül az Azure Developer CLI egy megfelelő Constants.cs fájlt ír Önnek.

A azd env get-values parancs futtatásával megtekintheti az SQL-hitelesítési adatokat, ha közvetlenül hozzá szeretne férni az adatbázishoz.

Ha elvégezte a lépéseket az Azure Developer CLI-vel, folytassa a következő lépéssel. Ha nem szeretné használni az Azure Developer CLI-t, folytassa a manuális lépésekkel.

Erőforrások létrehozása az Azure-ban.

1. Nyisson meg egy terminált, és módosítsa a könyvtárat a TodoApp.sln fájlt tartalmazó mappára. Ez a könyvtár azuredeploy.jsonis tartalmaz.

2. Győződjön meg arról, hogy bejelentkezett, és kiválasztott egy előfizetést az Azure CLI használatával.

3. Hozzon létre egy új erőforráscsoportot:

   az group create -l westus -g quickstart
   

   Ez a parancs létrehozza a quickstart erőforráscsoportot az USA nyugati régiójában. Kiválaszthatja a kívánt régiót, feltéve, hogy ott hozhat létre erőforrásokat. Győződjön meg arról, hogy ugyanazt a nevet és régiót használja, bárhol is említi őket ebben az oktatóanyagban.

4. Hozza létre az erőforrásokat csoporttelepítéssel:

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

   Válasszon erős jelszót az SQL-rendszergazdai jelszóhoz. Az adatbázis elérésekor később szüksége lesz rá.

5. Miután az üzembe helyezés befejeződött, kérje le a kimeneti változókat, mivel ezek a fontos információkat tartalmazzák, amelyekre később szüksége lesz:

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

   Példakimenet:

   

6. Jegyezze fel az egyes értékeket a kimenetekben későbbi használatra.

A szolgáltatáskód közzététele

Nyissa meg a TodoApp.sln a Visual Studióban.

1. A jobb oldali panelen válassza a Megoldáskezelő.

2. Kattintson a jobb gombbal a TodoAppService.NET6 projektre, majd válassza a Beállítás indítási projektkéntlehetőséget.

3. A felső menüben válassza Build>Publish TodoAppService.NET6lehetőséget.

4. A Közzététel ablakban válassza a Cél: Azurelehetőséget, majd nyomja le Továbbbillentyűt.

   

5. Konkrét cél kiválasztása: Azure App Service (Windows), majd nyomja le Következőbillentyűt.

   

6. Ha szükséges, jelentkezzen be, és válassza ki a megfelelő előfizetés nevét.

7. Győződjön meg arról, hogy NézetErőforráscsoport.

8. Bontsa ki a quickstart erőforráscsoportot, majd válassza ki a korábban létrehozott App Service-t.

   

9. Válassza Befejezéslehetőséget.

10. Miután a közzétételi profil létrehozási folyamata befejeződött, válassza bezárása lehetőséget.

11. Keresse meg a szolgáltatásfüggőségeket, és válassza ki az SQL Server-adatbázis melletti három pontokat, majd válassza a Csatlakozáslehetőséget.

    

12. Válassza Azure SQL Database, majd a Következőlehetőséget.

13. Válassza a gyorsútmutatót adatbázist, majd válassza a Továbblehetőséget.

    

14. Töltse ki az űrlapot az üzembe helyezés kimenetében szereplő SQL-felhasználónévvel és jelszóval, majd válassza a Továbblehetőséget.

    

15. Válassza Befejezéslehetőséget.

16. Ha elkészült, válassza bezárása lehetőséget.

17. Válassza a Közzététel lehetőséget az alkalmazás korábban létrehozott Azure App Service-ben való közzétételéhez.

    

18. A háttérszolgáltatás közzététele után megnyílik egy böngésző. /tables/todoitem?ZUMO-API-VERSION=3.0.0 hozzáadása az URL-címhez:

    

A mintaalkalmazás konfigurálása

Az ügyfélalkalmazásnak ismernie kell a háttérrendszer alap URL-címét, hogy kommunikálni tudjon vele.

Ha azd up használta a szolgáltatás kiépítéséhez és üzembe helyezéséhez, a Constants.cs fájl létre lett hozva, és kihagyhatja ezt a lépést.

1. Bontsa ki a TodoApp.Data projektet.

2. Kattintson a jobb gombbal a TodoApp.Data projektre, majd válassza >osztály hozzáadása....

3. Adja meg a Constants.cs nevet, majd válassza hozzáadása lehetőséget.

   

4. Nyissa meg a Constants.cs.example fájlt, és másolja a tartalmat (Ctrl-A, majd Ctrl-C).

5. Váltson Constants.cs, jelölje ki az összes szöveget (Ctrl-A), majd illessze be a tartalmat a példafájlból (Ctrl-V).

6. Cserélje le a https://APPSERVICENAME.azurewebsites.net a szolgáltatás háttérbeli URL-címére.

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

   A szolgáltatás háttér-URL-címét a Közzététel lapon szerezheti be. Győződjön meg arról, hogy https URL-címet használ.

7. Mentse a fájlt. (Ctrl-S).

Az Android-alkalmazás létrehozása és futtatása

1. A megoldáskezelőben bontsa ki a xamarin-forms mappát.

2. Kattintson a jobb gombbal a TodoApp.Forms.Android projektre, és válassza a Beállítás indítási projektkéntlehetőséget.

3. A felső sávon válassza a Bármely CPU- konfigurációt és a TodoApp.Forms.Android célértéket:

   

4. Ha ehelyett Android Emulator jelenik meg, nem hozott létre Android emulátort. További információ: Android emulátor beállítása. Új Android emulátor létrehozása:

   • Válassza Eszközök>Android>Android Device Managerlehetőséget.
   • Válassza a + Újlehetőséget.
   • Válassza ki a következő beállításokat a bal oldalon:
     • Név: quickstart
     • Alapeszköz: Pixel 5
     • Processzor: x86_64
     • Operációs rendszer: Android 11.0 – API 30
     • Google API-k: Ellenőrzött
   • Válassza létrehozása lehetőséget.
   • Szükség esetén fogadja el a licencszerződést. A rendszerkép ezután letöltődik.
   • A Start gomb megjelenése után nyomja le Startbillentyűt.
   • Ha a rendszer Hyper-V hardvergyorsításra kéri, a folytatás előtt olvassa el a dokumentációt a hardvergyorsítás engedélyezéséhez. Az emulátor lassú lesz a hardveres gyorsítás engedélyezése nélkül.

   Borravaló

   A folytatás előtt indítsa el az Android emulátort. Ehhez nyissa meg az Android Device Managert, és nyomja le Start a választott emulátor mellett.

5. A projekt létrehozásához és futtatásához nyomja le F5.

Az alkalmazás elindítása után megjelenik egy üres lista és egy szövegmező, amely elemeket ad hozzá az emulátorhoz. Képes vagy:

• Írjon be egy szöveget a mezőbe, majd az Enter billentyűt lenyomva szúrjon be egy új elemet.
• Jelöljön ki egy elemet a befejezett jelző beállításához vagy törléséhez.
• A frissítési ikonra kattintva újra betölthet adatokat a szolgáltatásból.

Az iOS-alkalmazás létrehozása és futtatása

Jegyzet

kell követnie az útmutatót, amely Mac-párok. Hibaüzenetek jelennek meg az iOS-alkalmazások párosított Mac nélküli összeállításakor vagy futtatásakor.

1. A megoldáskezelőben bontsa ki a xamarin-forms mappát.

2. Kattintson a jobb gombbal a TodoApp.Forms.iOS projektre, és válassza a Beállítás indítási projektkéntlehetőséget.

3. A felső sávon válassza iPhone-szimulátor konfigurációját és a TodoApp.Forms.iOS cél:

   

4. Válassza ki az iPhone-szimulátort

5. A projekt létrehozásához és futtatásához nyomja le F5.

Az alkalmazás elindítása után megjelenik egy üres lista és egy szövegmező, amely elemeket ad hozzá az emulátorhoz. Képes vagy:

• Írjon be egy szöveget a mezőbe, majd az Enter billentyűt lenyomva szúrjon be egy új elemet.
• Jelöljön ki egy elemet a befejezett jelző beállításához vagy törléséhez.
• A frissítési ikonra kattintva újra betölthet adatokat a szolgáltatásból.

Hibaelhárítás

A Visual Studio 2022-vel hajózható távoli szimulátor nem kompatibilis az XCode 13.3-val. A következő hibaüzenet jelenik meg:

A probléma megkerüléséhez:

• Tiltsa le a távoli szimulátort (Eszközök / Beállítások / iOS-beállítások / törölje a jelet Távoli szimulátor windows). Ha nincs bejelölve, a szimulátor a Windows helyett a Macen fog futni. Ezután közvetlenül a Mac gépen használhatja a szimulátort, miközben a hibakeresőt stb. használja Windows rendszeren.
• A fenti módon tiltsa le a távoli szimulátort, hogy a szimulátor a Mac gépen fusson. Ezután egy távoli asztali alkalmazással csatlakozhat a Mac asztalhoz a Windowsból. A távoli asztali lehetőségek közé tartozik Devolutions Remote Desktop Manager (gyors és ingyenes verzió érhető el), valamint VNC-ügyfelek (lassabb és ingyenes).
• A szimulátor helyett használjon fizikai eszközt a teszteléshez. A hitelesítési oktatóanyag elvégzéséhez beszerezhet egy ingyenes kiépítési profilt.

Következő lépések

Folytassa az oktatóanyagot úgy, hogy hitelesítést ad hozzá az alkalmazáshoz.