Píšeme první multiplatformní mobilní aplikaci s Visual Studio Tools for Apache Cordova

Apache Cordova je technologie, která umožňuje vytvářet mobilní aplikace pro všechny běžně používané platformy – iOS, Android a Windows Phone. Je vhodná především pro jednodušší aplikace a její výhodou je fakt, že se při vývoji používá HTML a zvládne to každý, kdo umí napsat jednoduchou webovou stránku.

Díky velkému množstí pluginů a tomu, jak Cordova funguje, nejste omezeni tím, co umí samotný webový prohlížeč, ale máte možnost přistupovat i ke specifickým funkcím telefonu, např. fotoaparátu, souborům uživatele, GPS, senzorům atd.

Visual Studio 2015 obsahuje nástroje, jež s vývojem mobilní aplikace v Cordově pomáhají. Tyto nástroje jsou k dispozici i v edici Community, která je k dispozici zdarma. Vývojáře potěší integrace „emulátoru“ Ripple s toolingem Visual Studia, kde přímo ve vývojovém prostředí máte k dispozici developer konzoli, výpisy chyb a mnoho dalších informací.

Co budeme potřebovat

V ukázkovém příkladu používáme edici Visual Studio 2015 Community Edition. Vzhledem k tomu, že pro testování aplikace je třeba Android SDK, emulátory Androidu, zabere celá instalace přibližně 15 GB místa na disku. Android SDK není třeba instalovat zvlášť, pokud jej nemáte, stačí jej zakliknout při instalaci Visual Studia a vše se nainstaluje a nakonfiguruje samo.

Pokud chcete aplikaci kompilovat a testovat i pro iOS, je nutné mít ještě počítač s Mac OS X, kam je třeba nainstalovat vývojové prostředí XCode a spustit tam agenta pro vzdálenou kompilaci. Tento počítač pak musí být ve stejné síti jako počítač s Visual Studiem, a Visual Studio jej využije pro to, co na Windows provést nejde (zkompilování aplikace, spuštění iPhone simulátoru atd.). Podrobný návod, jak to zprovoznit, najdete zde (v angličtině).

Pro vystavení aplikace na store budete potřebovat účet Google, Microsoftu a Apple. Pokud chcete aplikaci umístit na App Store, je třeba zaplatit poplatek $99 a platí se každý rok. Google Play vyžaduje jednorázový poplatek $25 a Windows Store dokonce jen $19. Platí se pomocí platební karty, která má povolené internetové platby.

Instalace prostředí

Nejprve je třeba stáhnout Visual Studio 2015 Community Edition. Po spuštění instalace je třeba zvolit možnost Custom a na další obrazovce v sekci Cross Platform Mobile Development zaškrtnout možnost HTML/Javascript (Apache Cordova).

image00

Po dokončení instalace Visual Studio 2015 spusťte, přihlaste se svým účtem Microsoft (pokud to Visual Studio bude vyžadovat).

Založení projektu

Abychom mohli začít, musíme ve Visual Studiu založit projekt. V menu File klikněte na New > Project a v okně, které se objeví, vyberte v sekci Templates > Javascript > Apache Cordova Apps možnost Blank App (Apache Cordova). To vytvoří prázdnou multiplatformní mobilní aplikaci, se kterou budeme dále pracovat.

image02

Po potvrzení nám Visual Studio vytvoří prázdnou mobilní aplikaci, která obsahuje několik souborů. Tyto soubory vidíme napravo v podokně Solution Explorer.

Soubory v aplikaci

Po vytvoření prázdného projektu by okno Solution Explorer mělo vypadat takto:

image01

Nejprve se podíváme na soubory, které v projektu Visual Studio vytvořilo:

  • bower.json je soubor, který obsahuje nastavení Boweru, což je balíčkovací systém pro (nejčastěji) javascriptové knihovny.
  • build.json obsahuje nastavení, která jsou potřeba pro vytvoření balíčku pro Android.
  • config.xml obsahuje nastavení vaší aplikace (budeme si s ním hrát později).
  • package.json je konfigurace Node.js. Je tam hlavně proto, že se pomocí něj instaluje Bower.
  • taco.json obsahuje nastavení Cordova CLI.

Dále je v projektu několik složek.

  • Do složky www se dávají všechny HTML stránky, obrázky, CSS styly i javascriptové soubory, které bude naše aplikace potřebovat. Do této složky se dává vše, co je společné pro všechny platformy.
  • Složka merges obsahuje podsložky android, ios, windows a wp8, které obsahují soubory, jež se pro danou platformu nějak liší. Tyto soubory mají vždycky přednost, takže pokud byste měli v projektu např. soubor www/images/logo.png, ale ve složce merges/android/images/logo.png, tak na Androidu se použije druhý zmíněný soubor, zatímco na všech ostatních platformách se použije ten první.
  • Složka res poté obsahuje nutné součásti pro to, abychom mohli pro každou platformu vytvořit aplikační balíček. Na každé platformě jsou například potřeba jiné ikony v jiných velikostech, nebo jiné rozměry úvodní obrazovky vaší aplikace.

Základní nastavení aplikace

Naši aplikaci musíme nejdříve pojmenovat, nastavit jí nějaký popis a pár dalších věcí. To se dělá úpravou souboru config.xml. Visual Studio na to má tzv. designer, takže není třeba soubor editovat ručně (ale samozřejmě můžete, pokud chcete).

image04

Na stránce Common můžeme nastavit název aplikace, její popis, výchozí jazyk (používáme hodnotu cs-CZ, což je ISO kód jazyka a země – čeština a Česká republika).

Dále vyplňujeme autora aplikace, číslo verze, a můžeme zvolit, které režimy zobrazení (Portrait, Landscape) má aplikace podporovat, jestli má běžet ve full screen módu. Dají se zde též povolit externí domény, na které se aplikace může připojovat.

Důležité je také políčko Start Page, které říká, že po spuštění aplikace se otevře stránka index.html. To je vše, změny uložíme a soubor config.xml můžeme zavřít.

Na záložkách Windows, Android a iOS se nastavují informace specifické pro konkrétní platformy,

Na záložce Plugins je pak jednoduchý package manager, který umožňuje doinstalovat pluginy.

image03

Jak to funguje

Apache Cordova funguje tak, že celá aplikace je jen jedno velké okno webového prohlížeče, ve kterém se načte nějaká stránka, která je (spolu se skripty, styly a obrázky, které potřebuje) zabalena v aplikaci. Případně může být i někde na serveru, taková aplikace by ale nefungovala offline.

Aplikace tedy načte první stránku, a pokud je naše aplikace složitější a chceme umožnit přejít na jinou stránku, použijeme klasický hypertextový odkaz:

<a href="stranka2.html">Druhá stránka</a>

Jak aplikace vypadá

V adresáři www najdete soubor index.html, který obsahuje vzorovou stránku. Odkazuje se v ní na pár skriptů, které vyžaduje cordova, a dále na soubory index.js, kde se ošetřují hlavní aplikační události, a index.css, který obsahuje základní aplikační styly.

Všimněme si meta hlaviček, mezi nimiž se mimo jiné nachází následující:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Tato hlavička upravuje nastavení zabezpečení a dají se pomocí ní zakázat např. inline skripty ve stránce (kvůli různým XSS útokům).

Dále je zde klasická meta viewport hlavička, která určuje, jak se aplikace bude chovat na malých displejích, jestli půjde zoomovat atd.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Spuštění aplikace

Abychom si mohli vyzkoušet, v jakém stavu aplikace je, spustíme ji. Ve Visual Studiu máte na výběr, v čem budete aplikaci testovat. Dokud nevyužíváme žádné specifické funkce telefonu, stačí použít Ripple, což je v zásadě webová stránka otevřená v prohlížeči, která umí Cordova aplikaci načíst a nasimulovat, jak asi bude vypadat na telefonu.

Není to stoprocentní a na reálném telefonu se to může chovat jinak, ale na základní věci to stačí, a výhodou je, že to je velmi rychlé, nejedná se o žádný těžkotonážní emulátor, který se 10 minut spouští. V praxi se základ aplikace odladí třeba právě v Ripple, a až když je podstatná část aplikace hotová, otestuje a doladí se v emulátorech a na reálných zařízeních.

Ripple je výchozí možnost, takže stačí zmáčknout F5 a spustí se. Během toho, co je Ripple spuštěný, můžete dále měnit soubory ve Visual Studiu – jakmile je uložíte, aplikace se zrestartuje a načte znovu. Klidně tedy Ripple nechte spuštěný a vyvíjejte dál (ideální je mít dva monitory).

Pokud byste chtěli aplikaci spustit v emulátoru, můžete vybrat z nabídky vedle tlačítka pro spuštění aplikace.

image06

Možnost Device umožňuje testovat aplikaci na reálném zařízení, pro to je nutné připojit reálný telefon pomocí USB kabelu (a povolit na něm ladění). Google Android Emulator nedoporučuji používat, protože je velmi pomalý – rychlejší je VS Emulator, kde si můžete vybrat, jestli testujete tablet, nebo telefon, a předvoleb zařízení a verzí systému je daleko více než tyto základní dvě.

Existuje i mnoho dalších alternativ, v případě, že byste v nastavení Visual Studia zadali cestu k remote build agentovi na Mac OS X, zobrazí se v této nabídce i možnost spustit aplikaci na iOS simulátoru či na reálném iPhone.

image05

Nástroje pro ladění ve Visual Studiu zahrnují mimo jiné DOM Explorer, CSS inspector a developer konzoli. Samozřejmě ale můžete využít obdobné nástroje v prohlížeči, ve kterém Ripple pouštíte.

image08

České znaky

Pokuk narazíte při hraní s nástroji pro Cordovu na situaci, kdy se nezobrazuje správně diakritika, je to pravděpodobně tím, že soubory ve standardní šabloně nejsou defaultně v UTF-8, ale v CP1252.  

Stačí problematický soubor otevřít a v menu File > Advanced Save Options nastavit jako kódování Unicode (UTF-8 with signature).

image07

Vytvoření aplikačních balíčků

Balíčky je třeba pro každou platformu vytvořit zvlášť a postup se liší. Vzhledem k tomu, že tento proces je dlouhý, zde jsou odkazy na stránku (v angličtině), kde je postup popsán podrobně. Lze to samozřejmě automatizovat, což dává smysl u libovolného projektu, který je větší než malý.

Vytvořené balíčky je poté potřeba nahrát na příslušný store. Proces publikování aplikace je také poměrně dlouhý, je třeba vyplnit mnoho polí a informací, včetně ceny aplikace, podporovaných jazyků, prohlášení o ochraně osobních údajů, kontaktu na technickou podporu atd.

Aplikace na store také musí splňovat určitá kritéria, aby prošla certifikací. Nejméně přísná pravidla jsou na Google Play, kde projde téměř cokoliv, nejpřísnější jsou na iOS – certifikace obvykle trvá několik dní a pokud aplikace neprojde, dostanete zpět report s popisem, co je třeba upravit.

Je vhodné si prostudovat pravidla, která musí mobilní aplikace splňovat, a je třeba počítat s tím, že napoprvé vaše aplikace nemusí projít a certifikační kolečko se může několikrát opakovat.

Detailní návod k Visual Studio Tools pro Apache Cordova najdete v dokumentaci.

Podpora Visual Studia

Visual Studio nabízí velmi dobrou podporu pro mnoho souborových formátů. Samozřejmostí je HTML, CSS a Javascript, velmi dobře se též pracuje s Typescriptem a mnoha dalšími jazyky.

Pro webové vývojáře, anebo pro vývojáře v Cordově, se hodí například plugin Web Compiler, který umožňuje snadno kompilovat LESS a SASS soubory, Web Essentials, které rozšiřují možnosti v HTML a CSS editoru (například umí na jedno kliknutí převést soubor s obrázkem na Data URI reprezentaci, zobrazuje různé chytré náhledy atd.).

Samostatnou kapitolou je pak podpora Typescriptu, což je jazyk, který přidává do Javascriptu typovou kontrolu a mnoho funkcí z ECMAScript 6.

Visual Studio zkrátka již dávno není nástroj výlučně určený pro technologie Microsoftu, ale stále více se otevírá všemu ostatnímu. Navíc existuje i verze Visual Studio Code, která sice neumí vše, co najdete ve velkém Visual Studiu, ale je multiplatformní a podpora formátů, kterou využijí weboví vývojáři nebo vývojáři v Cordově, je též velmi dobrá.

Část obrázků byla převzata z webu https://taco.visualstudio.com/en-us/docs/.

Chief Software Architect at RIGANTI s.r.o., Microsoft Most Valuable Professional, occasional piano and golf player.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 6

Přehled komentářů

Ondřej Novák iOS :(
Kolemjdoucí Re: iOS :(
Tomáš Herceg Re: iOS :(
Tomáš Herceg Re: iOS :(
JB Re: iOS :(
Vítězslav Škrabal Při instalovaní Visual Studio Tools for Apache Cordova
Zdroj: https://www.zdrojak.cz/?p=18455