Vytvoření aplikace .NET MAUI pomocí Azure Mobile Apps

  • Článek

V tomto kurzu se dozvíte, jak přidat cloudovou back-endovou službu do mobilní aplikace pro různé platformy pomocí .NET MAUI a back-endu mobilní aplikace Azure. Vytvoříte back-end nové mobilní aplikace i jednoduchou aplikaci seznamu úkolů, která ukládá data aplikací v Azure.

Tento kurz musíte dokončit před dalšími kurzy .NET MAUI pomocí funkce Mobile Apps ve službě Aplikace Azure Service.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

  • Visual Studio 2022 s následujícími úlohami:
    • Vývoj pro ASP.NET a web
    • Vývoj pro Azure
    • Vývoj mobilních aplikací s využitím .NET
  • Účet Azure.
  • Rozhraní příkazového řádku Azure.
    • Než začnete, přihlaste az login se pomocí příslušného předplatného a vyberte příslušné předplatné.
  • (Volitelné) Azure Developer CLI.
  • Virtuální zařízení s Androidem s následujícím nastavením:
    • Telefon: Jakýkoli obrázek telefonu – pro testování používáme pixel 5.
    • Obrázek systému: Android 11 (API 30 s rozhraními GOOGLE API)
  • Dostupný Mac (pro kompilaci a spuštění verze iOS):
    • Instalace XCode
    • Po instalaci otevřete Xcode, aby mohl přidat další požadované součásti.
    • Po otevření vyberte Předvolby XCode...>Komponenty a instalace simulátoru iOS
    • Postupujte podle pokynů v průvodci spárováním s Macem.

K kompilaci verze iOS se vyžaduje mac.

Tento kurz můžete dokončit v systému Mac nebo Windows.

Stažení ukázkové aplikace

  1. Otevřete úložiště azure-mobile-apps v prohlížeči.

  2. Otevřete rozevírací seznam Kód a pak vyberte Stáhnout ZIP.

    Screenshot of the Code menu on GitHub.

  3. Po dokončení stahování otevřete složku Stažené soubory a vyhledejte azure-mobile-apps-main.zip soubor.

  4. Klikněte pravým tlačítkem myši na stažený soubor a vyberte Extrahovat vše....

    Pokud chcete, můžete pomocí PowerShellu rozbalit archiv:

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

Ukázky se nacházejí ve složce s ukázkami v extrahovaných souborech. Ukázka rychlého startu má název TodoApp. Ukázku můžete otevřít v sadě Visual Studio poklikáním na TodoApp.sln soubor.

Screenshot of the file explorer for the solution.

Nasazení back-endu do Azure

Poznámka:

Pokud jste už back-end nasadili z jiného rychlého startu, můžete použít stejný back-end a tento krok přeskočit.

Abychom mohli nasadit back-endovou službu, provedeme následující kroky:

  • Zřiďte službu Aplikace Azure a Azure SQL Database do Azure.
  • Pomocí sady Visual Studio nasaďte kód služby do nově vytvořené služby Aplikace Azure Service.

Provedení všech kroků pomocí Azure Developer CLI

Ukázka TodoAppu je nakonfigurovaná tak, aby podporovala Azure Developer CLI. Dokončení všech kroků (zřizování a nasazení):

  1. Nainstalujte Azure Developer CLI.
  2. Otevřete terminál a změňte adresář na složku obsahující TodoApp.sln soubor. Tento adresář obsahuje azure.yamltaké .
  3. Spusťte azd up.

Pokud ještě nejste přihlášení k Azure, prohlížeč se spustí a požádá vás o přihlášení. Pak se zobrazí výzva k zadání předplatného a oblasti Azure, která se má použít. Azure Developer CLI pak zřídí potřebné prostředky a nasadí kód služby do oblasti Azure a předplatného podle vašeho výběru. Nakonec azure Developer CLI zapíše příslušný Constants.cs soubor za vás.

Spuštěním azd env get-values příkazu zobrazíte ověřovací informace SQL, pokud chcete získat přímý přístup k databázi.

Pokud jste dokončili kroky pomocí Azure Developer CLI, přejděte k dalšímu kroku. Pokud nechcete používat Azure Developer CLI, pokračujte ručními kroky.

Vytvořte prostředky v Azure.

  1. Otevřete terminál a změňte adresář na složku obsahující TodoApp.sln soubor. Tento adresář obsahuje azuredeploy.jsontaké .

  2. Ujistěte se, že jste se přihlásili a vybrali předplatné pomocí Azure CLI.

  3. Vytvořte novou skupinu prostředků:

    az group create -l westus -g quickstart

    Tento příkaz vytvoří quickstart skupinu prostředků v oblasti USA – západ. Můžete vybrat libovolnou oblast, kterou si přejete, a vytvořit tam prostředky. Ujistěte se, že používáte stejný název a oblast všude, kde jsou uvedené v tomto kurzu.

  4. Vytvořte prostředky pomocí nasazení skupiny:

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

    Vyberte silné heslo pro heslo sql Správa istratoru. Později ho budete potřebovat při přístupu k databázi.

  5. Po dokončení nasazení získejte výstupní proměnné, protože tyto důležité informace budete potřebovat později:

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

    Příkladem výstupu je:

    Screenshot of command line results.

  6. Poznamenejte si jednotlivé hodnoty ve výstupech pro pozdější použití.

Publikování kódu služby

Otevřete v sadě TodoApp.sln Visual Studio.

  1. V pravém podokně vyberte Průzkumníka řešení.

  2. Klikněte pravým tlačítkem myši na TodoAppService.NET6 projekt a pak vyberte Nastavit jako spouštěný projekt.

  3. V horní nabídce vyberte Build>Publish TodoAppService.NET6 .

  4. V okně Publikovat vyberte Target: Azure a pak stiskněte Další.

    Screenshot of the target selection window.

  5. Vyberte konkrétní cíl: Aplikace Azure Service (Windows) a stiskněte Další.

    Screenshot of the specific target selection window.

  6. V případě potřeby se přihlaste a vyberte odpovídající název předplatného.

  7. Ujistěte se, že je zobrazení nastavené na skupinu prostředků.

  8. quickstart Rozbalte skupinu prostředků a pak vyberte službu App Service, která byla vytvořena dříve.

    Screenshot of the app service selection window.

  9. Vyberte Dokončit.

  10. Po dokončení procesu vytváření profilu publikování vyberte Zavřít.

  11. Vyhledejte závislosti služby a vyberte trojité tečky vedle databáze SQL Serveru a pak vyberte Připojení.

    Screenshot showing the S Q L server configuration selection.

  12. Vyberte Azure SQL Database a pak vyberte Další.

  13. Vyberte databázi pro rychlý start a pak vyberte Další.

    Screenshot of the database selection window.

  14. Vyplňte formulář pomocí uživatelského jména a hesla SQL, které byly ve výstupech nasazení, a pak vyberte Další.

    Screenshot of the database settings window.

  15. Vyberte Dokončit.

  16. Po dokončení vyberte Zavřít .

  17. Výběrem možnosti Publikovat publikujte aplikaci do služby Aplikace Azure, kterou jste vytvořili dříve.

    Screenshot showing the publish button.

  18. Po publikování back-endové služby se otevře prohlížeč. Přidejte /tables/todoitem?ZUMO-API-VERSION=3.0.0 na adresu URL:

    Screenshot showing the browser output after the service is published.

Konfiguraci ukázkové aplikace

Vaše klientská aplikace potřebuje znát základní adresu URL back-endu, aby s ní mohl komunikovat.

Pokud jste službu azd up zřídili a nasadíte, Constants.cs soubor se vám vytvořil a můžete tento krok přeskočit.

  1. TodoApp.Data Rozbalte projekt.

  2. Klikněte pravým tlačítkem myši na TodoApp.Data projekt a pak vyberte Přidat>třídu....

  3. Jako název zadejte Constants.cs a pak vyberte Přidat.

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

  4. Constants.cs.example Otevřete soubor a zkopírujte obsah (Ctrl-A a potom Ctrl-C).

  5. Přepněte na Constants.cs, zvýrazněte veškerý text (Ctrl-A) a vložte obsah z ukázkového souboru (Ctrl-V).

  6. https://APPSERVICENAME.azurewebsites.net Nahraďte back-endovou adresou URL vaší služby.

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

    Back-endovou adresu URL služby můžete získat na kartě Publikovat . Ujistěte se, že používáte adresu URL https .

  7. Uložte soubor. (Ctrl-S).

Sestavení a spuštění aplikace pro Android

  1. V Průzkumníku řešení rozbalte maui složku.

  2. Klikněte pravým tlačítkem myši na TodoApp.MAUI projekt a vyberte Nastavit jako spouštěný projekt.

  3. Na horním panelu vyberte odpovídající emulátor Androidu:

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

  4. Pokud nejsou k dispozici žádné emulátory Androidu, musíte si ho vytvořit. Další informace najdete v tématu Nastavení emulátoru Androidu. Vytvoření nového emulátoru Androidu:

    • Vyberte Nástroje android>>Správce zařízení.
    • Vyberte + Nové.
    • Na levé straně vyberte následující možnosti:
      • Název: quickstart
      • Základní zařízení: Pixel 5
      • Procesor: x86_64
      • Operační systém: Android 11.0 – API 30
      • Rozhraní API Google: Zaškrtnuté
    • Vyberte Vytvořit.
    • V případě potřeby přijměte licenční smlouvu. Obrázek se pak stáhne.
    • Jakmile se zobrazí tlačítko Start, stiskněte Start.
    • Pokud se zobrazí výzva k hardwarové akceleraci Technologie Hyper-V, přečtěte si dokumentaci k povolení hardwarové akcelerace, než budete pokračovat. Emulátor bude pomalý bez povolení hardwarové akcelerace.

    Tip

    Než budete pokračovat, spusťte emulátor Androidu. Můžete to udělat tak, že otevřete Správce zařízení Androidu a stisknete Klávesu Start vedle zvoleného emulátoru.

  5. Stisknutím klávesy F5 sestavte a spusťte projekt.

Po spuštění aplikace se zobrazí prázdný seznam a textové pole pro přidání položek v emulátoru. Můžete provádět následující akce:

  • Do pole zadejte nějaký text a stisknutím klávesy Enter vložte novou položku.
  • Vyberte položku, která nastaví nebo vymaže dokončený příznak.
  • Stisknutím ikony aktualizace znovu načtěte data ze služby.

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

Sestavení a spuštění aplikace pro Windows

  1. V Průzkumníku řešení rozbalte maui složku.

  2. Klikněte pravým tlačítkem myši na TodoApp.MAUI projekt a vyberte Nastavit jako spouštěný projekt.

  3. Na horním panelu vyberte Počítač s Windows.

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

  4. Stisknutím klávesy F5 sestavte a spusťte projekt.

Po spuštění aplikace se zobrazí prázdný seznam a textové pole pro přidání položek. Můžete provádět následující akce:

  • Do pole zadejte nějaký text a stisknutím klávesy Enter vložte novou položku.
  • Vyberte položku, která nastaví nebo vymaže dokončený příznak.
  • Stisknutím ikony aktualizace znovu načtěte data ze služby.

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

Další kroky

Pokračujte v kurzu přidáním ověřování do aplikace.