Sdílet prostřednictvím

Vytvoření aplikace Xamarin.Forms pomocí Azure

Přehled

V tomto kurzu se dozvíte, jak přidat cloudovou back-end službu do mobilní aplikace Xamarin.Forms pomocí funkce Mobile Apps služby Azure App Service jako back-endu. Vytvoříte jak nový back-end pro Mobile Apps, tak i jednoduchou aplikaci Xamarin.Forms s označením to-do, která ukládá data aplikace v Azure.

Dokončení tohoto kurzu je předpokladem pro všechny ostatní kurzy Mobile Apps pro Xamarin.Forms.

Požadavky

K dokončení tohoto kurzu potřebujete následující:

  • 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 dál používat i po skončení zkušební verze. Další informace najdete v tématu Bezplatná zkušební verze Azure.

  • Nástroje Visual Studio pro Xamarin ve Visual Studio 2017 nebo novější, nebo Visual Studio pro Mac. Pokyny najdete na stránce instalace Xamarinu .

  • (volitelné) K vytvoření aplikace pro iOS se vyžaduje Mac s Xcode 9.0 nebo novějším. Visual Studio pro Mac je možné použít k vývoji aplikací pro iOS nebo k použití sady Visual Studio 2017 nebo novější (pokud je Mac k dispozici v síti).

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

  1. Přihlaste se do Azure Portalu.

  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 předplatného a skupiny prostředků (vyberte existující skupinu prostředků nebo vytvořte novou (se stejným názvem jako vaše aplikace).)

  6. Zvolte jedinečný název své webové aplikace.

  7. Jako výchozí možnost vyberte Publikovat jako Kód.

  8. V zásobníku modulu runtimemusíte vybrat verzi podle ASP.NET nebo Node. Pokud vytváříte back-end .NET, vyberte verzi v části ASP.NET. V opačném případě, 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 oblasti, kam chcete tuto aplikaci nasadit.

  11. Vyberte odpovídající plán služby App Service a stiskněte Zkontrolovat a vytvořit.

  12. V části Skupina prostředkůvyberte existující skupinu prostředků nebo vytvořte novou skupinu (se stejným názvem jako vaše aplikace).

  13. Klikněte na Vytvořit. Než budete pokračovat, počkejte několik minut, než se služba úspěšně nasadí. Sledujte ikonu Oznámení (zvonek) v záhlaví portálu pro aktualizace stavu.

  14. Po dokončení nasazení klikněte na oddíl Podrobnosti o nasazení a potom klikněte na zdroj typu Microsoft.Web/sites. Přejdete na webovou aplikaci App Service, kterou jste právě vytvořili.

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

  16. Na stránce Přidat nebo upravit nastavení aplikace zadejte název jako MobileAppsManagement_EXTENSION_VERSION a hodnotu jako nejnovější a stiskněte TLAČÍTKO OK.

Jste připraveni použít tuto nově vytvořenou webovou aplikaci App Service 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 pro iOS, musíte si stáhnout azuresdk-iOS-*.zipz nejnovější verze GitHubu. Rozbalte a přidejte soubor MicrosoftAzureMobile.framework 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ření nového ú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 ve službě 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. Formát připojovacího řetězce SQL Database – Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} název serveru, najdete ho na stránce přehledu pro vaši databázi a obvykle je ve formátu "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 Ve službě App Service. Připojovací řetězce pro aplikaci můžete spravovat pomocí možnosti Konfigurace v nabídce.

        Pro 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, Hodnota a Typ.

        4. Zadejte název jakoMS_TableConnectionString

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

        6. Pokud do databáze SQL Azure přidáváte připojovací řetězec, zvolte SQLAzure v kategorii typ.

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

    • Node.js backend

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

      1. Na webu Azure Portal přejděte na Easy Tables, zobrazí se tato obrazovka.

        Easy Tables Node

      2. Ujistěte se, že je připojovací řetězec SQL již přidaný na kartě Konfigurace. Potom zaškrtněte políčko potvrzuji, že tím dojde k přepsání veškerého obsahu webu a klikněte na tlačítko Vytvořit tabulku TodoItem.

        Konfigurace Node Easy Tables

      3. V Snadné tabulkyklikněte na tlačítko + Přidat.

        Tlačítko přidat snadné tabulky uzlu

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

        tabulky Easy Tables Přidat tabulku

    • .NET back-endové

      Pokud budete používat aplikaci pro rychlý start k .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. Sestavte místně projekt serveru .NET ve Visual Studiu.

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

        Publikování sady Visual Studio

      4. Jako cíl publikování vyberte App Service, poté klikněte na Vybrat existujícía poté klikněte na tlačítko Publikovat v dolní části okna.

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

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

K otevření řešení se vyžaduje Visual Studio Tools for Xamarin, viz pokyny k instalaci Xamarinu. Pokud už jsou nástroje nainstalované, stáhněte a otevřete řešení podle těchto kroků:

Visual Studio (Windows a Mac)

  1. Přejděte na portál Azure a přejděte na mobilní aplikaci, 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 třídě Constants.cs nahraďte proměnnou ZUMOAPPURL výše uvedeným veřejným koncovým bodem.

    public static string ApplicationURL = @"ZUMOAPPURL";

    stane se

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

  4. Postupujte podle pokynů níže a spusťte projekty Androidu nebo Windows; a pokud je k dispozici síťový počítač Mac, projekt iOS.

(Volitelné) Spuštění projektu Pro Android

V této části spustíte projekt Xamarin.Android. Pokud nepracujete se zařízeními s Androidem, můžete tuto část přeskočit.

Visual Studio

  1. Klikněte pravým tlačítkem myši na projekt Androidu (Droid) a pak vyberte Nastavit jako spouštěcí projekt.

  2. V nabídce Sestavení vyberte Configuration Manager.

  3. V dialogovém okně Configuration Manager zaškrtněte políčka Sestavit a nasadit vedle projektu Android a ujistěte se, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení .

  4. Pokud chcete sestavit projekt a spustit aplikaci v emulátoru Androidu, stiskněte klávesu F5 nebo klikněte na tlačítko Start .

Visual Studio pro Mac

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

  2. Pokud chcete sestavit projekt a spustit aplikaci v emulátoru Androidu, vyberte nabídku Spustit a pak spusťte ladění.

V aplikaci zadejte smysluplný text, například Learn Xamarin, a pak vyberte znaménko plus (+).

Aplikace to-do pro Android

Tato akce odešle požadavek typu POST na novou serverovou část aplikace Mobile Apps, která je hostována v Azure. Data z požadavku se vloží do tabulky TodoItem. Položky uložené v tabulce jsou vráceny serverovým systémem aplikací pro mobilní zařízení a data se zobrazí v seznamu.

Poznámka:

Kód, který přistupuje k back-endu Mobile Apps, je v souboru TodoItemManager.cs C# projektu sdíleného kódu v řešení.

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

V této části spustíte projekt Xamarin.iOS pro zařízení s iOSem. Pokud nepracujete se zařízeními s iOSem, můžete tuto část přeskočit.

Visual Studio

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

  2. V nabídce Sestavení vyberte Configuration Manager.

  3. V dialogovém okně Configuration Manager zaškrtněte políčka Sestavit a nasadit vedle projektu iOS a ujistěte se, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení .

  4. Pokud chcete sestavit projekt a spustit aplikaci v emulátoru iPhonu, vyberte 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í a sestavte projekt a spusťte aplikaci v emulátoru iPhonu.

V aplikaci zadejte smysluplný text, například Learn Xamarin, a pak vyberte znaménko plus (+).

Aplikace to-do pro iOS

Tato akce odešle požadavek typu POST na nový back-end Mobilních aplikací, který je hostován v Azure. Data z požadavku se vloží do tabulky TodoItem. Položky uložené v tabulce vrátí back-end Mobile Apps a data se zobrazí v seznamu.

Poznámka:

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

(Volitelné) Spuštění projektu Windows

V této části spustíte projekt Xamarin.Forms Universal Windows Platform (UPW) pro zařízení s Windows. Pokud nepracujete se zařízeními s Windows, můžete tuto část přeskočit.

Visual Studio

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

  2. V nabídce Sestavení vyberte Configuration Manager.

  3. V dialogovém okně Configuration Manager zaškrtněte políčka Sestavit a Nasadit vedle vybraného projektu Windows a ujistěte se, že projekt sdíleného kódu má zaškrtnuté políčko Sestavení .

  4. Pokud chcete sestavit projekt a spustit aplikaci v emulátoru Windows, stiskněte klávesu F5 nebo klikněte na tlačítko Start (které by mělo číst místní počítač).

Poznámka:

Projekt Windows nelze spustit v systému macOS.

V aplikaci zadejte smysluplný text, například Learn Xamarin, a pak vyberte znaménko plus (+).

Tato akce odešle požadavek POST na nové zázemí Mobile Apps hostované v Azure. Data z požadavku se vloží do tabulky TodoItem. Položky uložené v tabulce vrátí back-end Mobile Apps a data se zobrazí v seznamu.

Aplikace UWP to-do

Poznámka:

Kód, který přistupuje k back-endu Mobile Apps, najdete v souboru TodoItemManager.cs C# přenosného projektu knihovny tříd vašeho řešení.

Řešení problémů

Pokud máte problémy s sestavením řešení, spusťte správce balíčků NuGet a aktualizujte na nejnovější verzi Xamarin.Formsa v projektu Android aktualizujte Xamarin.Android balíčky podpory. Projekty rychlého startu nemusí vždy obsahovat nejnovější verze.

Upozorňujeme, že všechny balíčky podpory, na které odkazuje váš projekt Android, musí mít stejnou verzi. Balíček NuGet Azure Mobile Apps má Xamarin.Android.Support.CustomTabs závislost pro platformu Android, takže pokud váš projekt používá novější balíčky podpory, musíte tento balíček nainstalovat s požadovanou verzí přímo, aby nedocházelo ke konfliktům.

  • Last updated on