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

  • Cikk

Ez az oktatóanyag bemutatja, hogyan adhat hozzá felhőalapú háttérszolgáltatást egy platformfüggetlen mobilalkalmazáshoz a .NET MAUI é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 listaalkalmazást is, amely az Azure-ban tárolja az alkalmazásadatokat.

Ezt az oktatóanyagot más .NET MAUI-oktatóanyagok előtt kell elvégeznie a Azure-alkalmazás Service Mobile Apps funkciójával.

Előfeltételek

Az oktatóanyag elvégzéséhez a következőkre lesz szüksége:

  • Visual Studio 2022 a következő számítási feladatokkal:
    • ASP.NET és webfejlesztés
    • Azure-fejlesztés
    • Mobil fejlesztés a .NET használatával
  • Egy Azure-fiók.
  • Az Azure CLI.
    • A kezdés előtt jelentkezzen be, az login és válasszon ki egy megfelelő előfizetést.
  • (Nem kötelező) Az Azure Developer CLI.
  • Android rendszerű virtuális eszköz a következő 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)
  • Elérhető Mac (az iOS-verzió összeállításához és futtatásához):
    • 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 az XCode-beállításokat...>Összetevők, és telepítsen egy iOS-szimulátort.
    • Kövesse az útmutatót a Mac-párok használatához.

Az iOS-verzió fordításához macre van szükség.

Ezt az oktatóanyagot Macen vagy Windowson is elvégezheti.

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 a ZIP letöltése lehetőséget.

    Screenshot of the Code menu on GitHub.

  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 mintamappájában találhatók. A gyors üzembe helyezéshez használt minta neve TodoApp. A minta megnyitásához kattintson duplán a fájlra a TodoApp.sln Visual Studióban.

Screenshot of the file explorer for the solution.

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

Feljegyzés

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:

  • Kiépíteni egy Azure-alkalmazás szolgáltatást és egy Azure SQL Database-t az Azure-ban.
  • A Visual Studióval üzembe helyezheti a szolgáltatáskódot az újonnan létrehozott Azure-alkalmazás szolgáltatásban.

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-t.
  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 is tartalmaz azure.yaml.
  3. Futtassa az azd up parancsot.

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 parancs futtatásával azd env get-values 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 is tartalmaz azuredeploy.json.

  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 az 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 Rendszergazda istrator-jelszavá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:

    Screenshot of command line results.

  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 Visual Studióban.

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

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

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

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

    Screenshot of the target selection window.

  5. Válassza ki az Adott cél: Azure-alkalmazás szolgáltatás (Windows) lehetőséget, majd nyomja le a Tovább billentyűt.

    Screenshot of the specific target selection window.

  6. Ha szükséges, jelentkezzen be, és válasszon egy megfelelő előfizetésnevet.

  7. Győződjön meg arról, hogy a Nézet erőforráscsoportra van állítva.

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

    Screenshot of the app service selection window.

  9. Válassza a Befejezés lehetőséget.

  10. A közzétételi profil létrehozási folyamatának befejezése után válassza a Bezárás 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ás.

    Screenshot showing the S Q L server configuration selection.

  12. Válassza az Azure SQL Database, majd a Tovább gombot.

  13. Válassza ki a gyorsútmutató-adatbázist, majd válassza a Tovább gombot.

    Screenshot of the database selection window.

  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ább gombot.

    Screenshot of the database settings window.

  15. Válassza a Befejezés lehetőséget.

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

  17. A Közzététel gombra kattintva közzéteheti az alkalmazást a korábban létrehozott Azure-alkalmazás szolgáltatásban.

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

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 korábban a szolgáltatás kiépítését és üzembe helyezését használta azd up , a Constants.cs fájlt ön hozta létre, é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 az Osztály hozzáadása>... lehetőséget.

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

    Screenshot of adding the Constants.cs file to the project.

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

  5. Váltson az összes szöveg kiemelésére Constants.cs(Ctrl-A), majd illessze be a tartalmat a példafájlból (Ctrl-V).

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

    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 maui mappát.

  2. Kattintson a jobb gombbal a projektre, TodoApp.MAUI és válassza a Beállítás indítási projektként lehetőséget.

  3. A felső sávon válassza ki a megfelelő Android emulátort:

    Screenshot showing how to set the run configuration for a dot net maui for Android app.

  4. Ha nem érhetők el Android emulátorok, létre kell hoznia egyet. További információ: Android emulátor beállítása. Új Android emulátor létrehozása:

    • Válassza az Android-eszközök>androidos>Eszközkezelő lehetőséget.
    • Válassza a + Új lehető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: Bejelölve
    • Válassza a Létrehozás 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 a Start billentyűt.
    • Ha a Rendszer a 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.

    Tipp.

    A folytatás előtt indítsa el az Android emulátort. Ehhez nyissa meg az Android Eszközkezelő, és nyomja le a Start billentyűt a kiválasztott emulátor mellett.

  5. A projekt létrehozásához és futtatásához nyomja le az F5 billentyűt.

Az alkalmazás elindítása után megjelenik egy üres lista és egy szövegmező, amely elemeket ad hozzá az emulátorhoz. A következőket teheti:

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

Screenshot of the running Android app showing the to do list.

A Windows-alkalmazás létrehozása és futtatása

  1. A megoldáskezelőben bontsa ki a maui mappát.

  2. Kattintson a jobb gombbal a projektre, TodoApp.MAUI és válassza a Beállítás indítási projektként lehetőséget.

  3. A felső sávon válassza a Windows Gép lehetőséget.

    Screenshot showing how to set the run configuration for a dot net maui for windows app.

  4. A projekt létrehozásához és futtatásához nyomja le az F5 billentyűt.

Az alkalmazás elindítása után egy üres lista és egy szövegmező jelenik meg az elemek hozzáadásához. A következőket teheti:

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

Screenshot of the running Windows app showing the to do list.

Következő lépések

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