Vytvoření aplikace na platformě Apache Cordova

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

Přehled

V tomto kurzu se dozvíte, jak přidat cloudovou back-end službu k mobilní aplikaci Apache Cordova pomocí back-endu mobilní aplikace Azure. Vytvoříte jak nový back-end mobilní aplikace, tak jednoduchou aplikaci Apache Cordova, která bude představovat seznam úkolů a ukládat data do Azure.

Dokončení tohoto kurzu se předpokládá ve všech dalších kurzech k používání funkce Mobile Apps v Azure App Service pro Apache Cordova.

Požadavky

Pro absolvování tohoto kurzu musí být splněné následující požadavky:

• Počítač se sadou Visual Studio Community 2017 nebo novější
• Visual Studio Tools pro Apache Cordova.
• Aktivní účet Azure.

Visual Studio je možné obejít a používat přímo příkazový řádek platformy Apache Cordova. Použití příkazového řádku je užitečné v případě, že kurz budete absolvovat na počítači Mac. Tento kurz se nezabývá kompilací klientských aplikací Apache Cordova pomocí příkazového řádku.

Vytvoření back-endu mobilní aplikace Azure

1. Přihlaste se k webu Azure Portal.

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

3. Do vyhledávacího pole zadejte webovou aplikaci.

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 (s použitím stejného názvu jako vaše aplikace)).

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

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

8. V zásobníku modulu runtime musíte vybrat verzi v části ASP.NET nebo Uzel. Pokud vytváříte back-end .NET, vyberte verzi v části ASP.NET. 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 , ve které chcete tuto aplikaci nasadit.

11. Vyberte odpovídající App Service Plán a klikněte na 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 Pro přidání nebo úpravu nastavení aplikace zadejte Název jako MobileAppsManagement_EXTENSION_VERSION a Hodnotu jako nejnovější a stiskněte OK.

Všechny jsou nastavené tak, aby používaly tuto 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 ho 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ě dat.

   • 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. 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 na stránce přehledu 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 dříve.

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

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

   • Node.js back-endu

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

     1. V Azure Portal přejděte na Snadné tabulky, uvidíte tuto obrazovku.

        

     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 todoItem.

        

     3. Ve snadné tabulce klikněte na tlačítko + Přidat .

        

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

        

   • Back-end .NET

     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 projekt serveru .NET 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í Publish to App Service se okno. Pokud pracujete na Macu, podívejte se na další způsoby, jak aplikaci nasadit tady.

        

     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. Nejdřív se budete muset přihlásit k sadě Visual Studio s předplatným Azure. SubscriptionVyberte položku , Resource Groupa pak vyberte název aplikace. Až budete připraveni, klikněte na tlačítko OK, tím se nasadí projekt serveru .NET, který máte místně do back-endu App Service. Po dokončení nasazení budete přesměrováni do http://{zumoappname}.azurewebsites.net/ prohlížeče.

Stažení a spuštění aplikace Apache Cordova

1. Přejděte do souboru řešení v klientském projektu (.sln) a otevřete ho pomocí sady Visual Studio.

2. V sadě Visual Studio zvolte platformu řešení (Android, iOS nebo Windows) z rozevíracího seznamu vedle spouštěcí šipky. Vyberte konkrétní zařízení pro nasazení nebo emulátor kliknutím na rozevírací seznam na zelené šipce. Můžete použít výchozí platformu Android a emulátor Ripple. Pokročilejší kurzy (například k nabízeným oznámením) vyžadují výběr podporovaného zařízení nebo emulátoru.

3. Otevřete soubor ToDoActivity.java v této složce – ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. Název aplikace je ZUMOAPPNAME.

4. Přejděte na 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.

5. Přejděte do index.js souboru v ZUMOAPPNAME/www/js/index.js a v onDeviceReady() metodě nahraďte ZUMOAPPURL parametr veřejným koncovým bodem výše.

   client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

   stane se

   client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

6. Aplikaci Cordova sestavíte a spustíte stisknutím klávesy F5 nebo kliknutím na zelenou šipku. Pokud se v emulátoru zobrazí dialogové okno zabezpečení požadující přístup k síti, potvrďte ho.

7. Po spuštění aplikace na zařízení nebo emulátoru zadejte smysluplný text do pole Enter new text, například Dokončit kurz , a potom klikněte na tlačítko Přidat .

Back-end vloží data z požadavku do tabulky TodoItem ve službě SQL Database a vrátí informace o nově uložených položkách do mobilní aplikace. Mobilní aplikace zobrazí tato data v seznamu.

Kroky 3 až 5 můžete opakovat i pro jiné platformy.