Vytvoření aplikace na platformě Xamarin.Forms s využitím Azure

Přehled

V tomto kurzu se dozvíte, jak přidat cloudovou službu back-end do mobilní aplikace na platformě Xamarin.Forms pomocí funkce Mobile Apps služby Azure App Service jako back-endu. Vytvoříte jak nový back-end Mobile Apps, tak jednoduchou aplikaci Xamarin.Forms, která bude představovat seznam úkolů a ukládat data do Azure.

Ve všech dalších kurzech k Mobile Apps týkajících se Xamarin.Forms se předpokládá dokončení tohoto kurzu.

Požadavky

K dokončení tohoto kurzu potřebujete:

  • Aktivní účet Azure. Pokud účet nemáte, můžete si zaregistrovat zkušební verzi Azure a získat až 10 bezplatných mobilních aplikací, které můžete používat i po skončení zkušebního období. Další informace najdete na stránce bezplatné zkušební verze Azure.

  • Visual Studio Tools for Xamarin, v sadě Visual Studio 2017 nebo novějším nebo Visual Studio pro Mac. Pokyny najdete na stránce věnované instalaci Xamarinu.

  • (Volitelné) K sestavení aplikace pro iOS se vyžaduje Mac s prostředím Xcode 9.0 nebo novějším. Visual Studio pro Mac lze použít k vývoji aplikací pro iOS nebo k použití sady Visual Studio 2017 nebo novější (pokud je mac dostupný v síti).

Vytvoření nového back-endu Mobile Apps

  1. Přihlaste se k webu Azure Portal.

  2. Klikněte na Vytvořit prostředek.

  3. Do vyhledávacího pole zadejte Web App.

  4. V seznamu výsledků vyberte webovou aplikaci z Marketplace.

  5. Vyberte své předplatné a skupinu prostředků (vyberte existující skupinu prostředků nebo vytvořte novou (použijte stejný název jako vaše aplikace).)

  6. Zvolte jedinečný název vaší webové aplikace.

  7. Zvolte výchozí možnost Publikovat jako kód.

  8. V zásobníku modulu runtime musíte v části ASP.NET nebo Node vybrat verzi. Pokud vytváříte back-end .NET, vyberte v části ASP.NET verzi. Jinak pokud cílíte na aplikaci založenou na uzlu, vyberte jednu z verzí z Node.

  9. Vyberte správný operační systém, Linux nebo Windows.

  10. Vyberte oblast , do které chcete tuto aplikaci nasadit.

  11. Vyberte odpovídající App Service Plán a stiskněte Zkontrolovat a vytvořit.

  12. V části Skupina prostředků vyberte existující skupinu prostředků nebo vytvořte novou (použijte stejný název, jaký má aplikace).

  13. Klikněte na Vytvořit. Počkejte několik minut na úspěšné nasazení služby a teprve potom pokračujte. Sledujte ikonu oznámení (zvonek) v hlavičce portálu upozorňující na aktualizace stavu.

  14. Po dokončení nasazení klikněte na část Podrobnosti o nasazení a potom klikněte na prostředek typu Microsoft.Web/sites. Přejdete do App Service webové aplikace, kterou jste právě vytvořili.

  15. Klikněte na okno Konfigurace v části Nastavení a v nastavení aplikace klikněte na tlačítko Nové nastavení aplikace .

  16. Na stránce nastavení přidat/upravit aplikaci zadejte název jako MobileAppsManagement_EXTENSION_VERSION a hodnotu jako nejnovější a stiskněte OK.

Všechny jsou nastavené tak, aby používaly nově vytvořenou App Service webovou aplikaci jako mobilní aplikaci.

Vytvoření připojení k databázi a konfigurace projektu klienta a serveru

  1. Stáhněte si rychlé starty klientské sady SDK pro následující platformy:

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

    Poznámka

    Pokud používáte projekt iOS, musíte si stáhnout "azuresdk-iOS-*.zip" z nejnovější verze GitHubu. Rozbalte soubor a přidejte MicrosoftAzureMobile.framework ho do kořenového adresáře projektu.

  2. Budete muset přidat připojení k databázi nebo se připojit k existujícímu připojení. Nejprve určete, jestli vytvoříte úložiště dat nebo použijete existující úložiště.

    • Vytvořte nové úložiště dat: Pokud chcete vytvořit úložiště dat, použijte následující rychlý start:

      Rychlý start: Začínáme s jednoúčelovými databázemi v Azure SQL Database

    • Existující zdroj dat: Pokud chcete použít existující připojení k databázi, postupujte podle následujících pokynů.

      1. SQL Database formát připojovacího řetězce –Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Název serveru najdete na stránce s přehledem pro vaši databázi a obvykle je ve formě "server_name.database.windows.net". {port} obvykle 1433. {your_catalogue} Název databáze. {your_username} Uživatelské jméno pro přístup k databázi. {your_password} Heslo pro přístup k databázi

        Další informace o formátu připojovacího řetězce SQL

      2. Přidejte připojovací řetězec do mobilní aplikace V App Service můžete spravovat připojovací řetězce pro vaši aplikaci pomocí možnosti Konfigurace v nabídce.

        Přidání připojovacího řetězce:

        1. Klikněte na kartu Nastavení aplikace .

        2. Klikněte na [+] Nový připojovací řetězec.

        3. Pro připojovací řetězec budete muset zadat název, hodnotu a typ .

        4. Název typu jakoMS_TableConnectionString

        5. Hodnota by měla být připojovací řetězec, který jste vytvořili v kroku předtím.

        6. Pokud do databáze SQL Azure přidáváte připojovací řetězec, zvolte sqlAzure pod typem.

  3. Azure Mobile Apps obsahuje sady SDK pro .NET a Node.js back-endy.

    • Node.js back-end

      Pokud budete používat Node.js aplikaci pro rychlý start, postupujte podle následujících pokynů.

      1. V Azure Portal přejděte do části Snadné tabulky, zobrazí se tato obrazovka.

        Snadné tabulky uzlu

      2. Ujistěte se, že je připojovací řetězec SQL již přidaný na kartě Konfigurace . Potom zaškrtněte políčko , že se tím přepíše veškerý obsah webu a kliknete na tlačítko Vytvořit tabulku TodoItem .

        Konfigurace snadno použitelných tabulek uzlu

      3. V části Snadné tabulky klikněte na tlačítko + Přidat .

        Node Easy Tables Add Button

      4. Vytvořte TodoItem tabulku s anonymním přístupem.

        Přidání tabulky Easy Tables uzlu

    • Back-end .NET

      Pokud budete používat aplikaci pro rychlý start .NET, postupujte podle následujících pokynů.

      1. Stáhněte si projekt serveru Azure Mobile Apps .NET z úložiště azure-mobile-apps-quickstarts.

      2. Projekt serveru .NET sestavte místně v sadě Visual Studio.

      3. V sadě Visual Studio otevřete Průzkumník řešení, klikněte pravým tlačítkem myši na ZUMOAPPNAMEService projekt, klikněte na Publikovat, zobrazí se Publish to App Service okno. Pokud pracujete na Macu, podívejte se na další způsoby nasazení aplikace tady.

        Publikování sady Visual Studio

      4. Vyberte App Service jako cíl publikování a potom klikněte na Vybrat existující a potom klikněte na tlačítko Publikovat v dolní části okna.

      5. Nejprve se budete muset přihlásit k sadě Visual Studio s předplatným Azure. SubscriptionVyberte , Resource Groupa pak vyberte název vaší aplikace. Až budete připraveni, klikněte na OK, tím se nasadí projekt serveru .NET, který máte místně, do App Service back-endu. Po dokončení nasazení budete přesměrováni do http://{zumoappname}.azurewebsites.net/ prohlížeče.

Spuštění řešení Xamarin.Forms

K otevření řešení se vyžadují nástroje Visual Studio Tools for Xamarin, viz pokyny k instalaci Xamarinu. Pokud jsou tyto nástroje už nainstalované, použijte ke stažení a otevření tohoto řešení následující postup:

Visual Studio (Windows a Mac)

  1. Přejděte do Azure Portal a přejděte do mobilní aplikace, kterou jste vytvořili. V okně Overview vyhledejte adresu URL, která je veřejným koncovým bodem vaší mobilní aplikace. Příklad – název webu pro název aplikace "test123" bude https://test123.azurewebsites.net.

  2. Otevřete soubor Constants.cs v této složce – xamarin.forms/ZUMOAPPNAME. Název aplikace je ZUMOAPPNAME.

  3. Ve Constants.cs třídě nahraďte ZUMOAPPURL proměnnou veřejným koncovým bodem výše.

    public static string ApplicationURL = @"ZUMOAPPURL";

    stane se

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Při spouštění projektů pro Android nebo Windows (a také pro iOS, pokud je v síti k dispozici počítač Mac) použijte následující pokyny.

(Nepovinné) Spuštění projektu pro Android

V této části spustíte projekt Xamarin.Android. Můžete ji přeskočit, pokud s takovými zařízeními nepracujete.

Visual Studio

  1. Klikněte pravým tlačítkem na projekt pro Android (Droid) a pak vyberte Nastavit jako spouštěný projekt.

  2. V nabídce Sestavení (Build) vyberte Správce konfigurace.

  3. V dialogovém okně Správce konfigurace zaškrtněte políčka Sestavení a Nasazení vedle projektu pro Android a zkontrolujte, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení.

  4. Stisknutím klávesy F5 nebo kliknutím na tlačítko Start se projekt sestaví a aplikace se spustí v emulátoru Androidu.

Visual Studio pro Mac

  1. Klikněte pravým tlačítkem na projekt pro Android a pak vyberte Nastavit jako spouštěný projekt.

  2. Pokud chcete sestavit projekt a spustit aplikaci v emulátoru Androidu, v nabídce Spustit vyberte Spustit ladění.

Zadejte do aplikace smysluplný text, například Naučit se Xamarin, a pak vyberte symbol plus (+).

Aplikace seznamu úkolů pro Android

Touto akcí se odešle požadavek POST na nový back-end Mobile Apps, jehož hostitelem je Azure. Data z požadavku se vloží do tabulky TodoItem. Back-end Mobile Apps vrátí položky uložené v tabulce a data se zobrazí v seznamu.

Poznámka

Kód, který získává přístup k back-endu Mobile Apps, najdete v souboru jazyka C# TodoItemManager.cs v projektu sdíleného kódu pro vaše řešení.

(Nepovinné) Spuštění projektu pro iOS

V této části spustíte projekt Xamarin.iOS pro zařízení s iOS. Můžete ji přeskočit, pokud s takovými zařízeními nepracujete.

Visual Studio

  1. Klikněte pravým tlačítkem na projekt pro iOS a pak vyberte Nastavit jako spouštěný projekt.

  2. V nabídce Sestavení (Build) vyberte Správce konfigurace.

  3. V dialogovém okně Správce konfigurace zaškrtněte políčka Sestavení a Nasazení vedle projektu pro iOS a zkontrolujte, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení.

  4. Pokud chcete projekt sestavit a spustit aplikaci v emulátoru iPhonu, stiskněte klávesu F5.

Visual Studio pro Mac

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

  2. V nabídce Spustit vyberte Spustit ladění, aby se projekt sestavil a aplikace se spustila v emulátoru iPhonu.

Zadejte do aplikace smysluplný text, například Naučit se Xamarin, a pak vyberte symbol plus (+).

Aplikace seznamu úkolů pro iOS

Touto akcí se odešle požadavek POST na nový back-end Mobile Apps, jehož hostitelem je Azure. Data z požadavku se vloží do tabulky TodoItem. Back-end Mobile Apps vrátí položky uložené v tabulce a data se zobrazí v seznamu.

Poznámka

Kód, který získává přístup k back-endu Mobile Apps, najdete v souboru jazyka C# TodoItemManager.cs v projektu sdíleného kódu pro vaše řešení.

(Nepovinné) Spuštění projektu pro Windows

V této části spustíte projekt Xamarin.Forms Univerzální platformy Windows (UPW) pro zařízení s Windows. Můžete ji přeskočit, pokud s takovými zařízeními nepracujete.

Visual Studio

  1. Klikněte pravým tlačítkem na projekt pro UPW a pak vyberte Nastavit jako spouštěný projekt.

  2. V nabídce Sestavení (Build) vyberte Správce konfigurace.

  3. V dialogovém okně Správce konfigurace zaškrtněte políčka Sestavení a Nasazení vedle zvoleného projektu pro Windows a zkontrolujte, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení.

  4. Stisknutím klávesy F5 nebo kliknutím na tlačítko Start (na kterém by měl být text Místní počítač) se projekt sestaví a aplikace se spustí v emulátoru Windows.

Poznámka

Projekt pro Windows nejde spustit v macOS.

Zadejte do aplikace smysluplný text, například Naučit se Xamarin, a pak vyberte symbol plus (+).

Touto akcí se odešle požadavek POST na nový back-end Mobile Apps, jehož hostitelem je Azure. Data z požadavku se vloží do tabulky TodoItem. Back-end Mobile Apps vrátí položky uložené v tabulce a data se zobrazí v seznamu.

Aplikace seznamu úkolů pro UPW

Poznámka

Kód, který získává přístup k back-endu Mobile Apps, najdete v souboru jazyka C# TodoItemManager.cs v projektu knihovny přenosných tříd pro vaše řešení.

Řešení potíží

Pokud máte se sestavením řešení problémy, spusťte správce balíčků NuGet a proveďte aktualizaci na nejnovější verz iXamarin.Forms. V projektu pro Android aktualizujte balíčky pro podporu Xamarin.Android. Projekty Rychlý start nezahrnují vždycky nejnovější verze.

Upozorňujeme, že všechny balíčky podporu odkazované ve vašem projektu Android musí mít stejnou verzi. Balíček NuGet pro mobilní aplikace AzureXamarin.Android.Support.CustomTabszávislost pro platformu Android, takže pokud váš projekt používá novější balíčky podpory, je nutné nainstalovat přímo tento balíček s požadovanou verzi, aby nedocházelo ke konfliktům.