Přejít k navigační liště

Zdroják » JavaScript » Vyvíjíme hybridní aplikace v Ionicu: Windows 10 Mobile

Vyvíjíme hybridní aplikace v Ionicu: Windows 10 Mobile

Dnes odbočíme od hlavní linie seriálu a ukážeme si, jakým způsobem lze aplikaci zprovoznit na dalších dvou operačních systémech – Windows 10 Mobile a desktopových Windows 10. Čtvrtý díl tedy osloví především fanoušky této platformy, své zde naleznou ale i ostatní zájemci o hybridní vývoj.

Ke konci roku 2015 bylo na oficiálním blogu Ionic oznámeno vydání nové verze 1.2. Honza Václavík se o této události zmínil již v minulém dílu seriálu s tím, že kromě oprav mnoha chyb přinesla i podporu platformy Windows 10 Mobile. Od této verze je tedy možné používat Ionic pro vývoj na platformách iOS, Android, Windows 10 Mobile, Windows 10 a dokonce i na mobilním webu.

Oficiální dokumentace frameworku je, co se týče Windows, poměrně skoupá na slovo – komunita řeší různé problémy hlavně na fóru a v issues na GitHubu. A když člověk vyčerpá oba zdroje, přichází na řadu Google jdoucí ruku v ruce s četnými pokusy a omyly.

Berte prosím následující článek jako ucelenější souhrn poznatků, které jsem načerpal během svých snah o vývoj hybridních aplikací pro Windows. A při kterých jsem jen nepatrně zešedivěl.

Ionic & Windows Phone

Vzhledem k tomu, že aplikace jsou sestavovány s využitím frameworku Apache Cordova, bylo samozřejmě možné nasazovat je – s určitými úpravami v kódu – i do zařízení s Windows Phone 8.1 dávno před vydáním Ionic verze 1.2.

Za použitelné se ovšem daly označit jen menší a jednodušší aplikace. Zkrátka takové, které nevyužívaly příliš mnoho Ionic funkcionality.

Situace se změnila až s příchodem Windows 10 Mobile (nástupce Windows Phone). Díky novému WebView, jež využívá prohlížeč Microsoft Edge, došlo k nárůstu výkonu při provádění JavaScriptu a byly též odstraněny známé chyby vyskytující se po nasazení na předchozí verzi operačního systému. Podobné chování jako na telefonech s Androidem či iOS je nyní možné simulovat i na telefonech s nejnovější verzí systému Windows.

Záhy sice zjistíme, že vše není tak fajn a barevné a sluníčkové, ale s patřičnými znalostmi můžeme dosáhnout celkem uspokojivého výsledku.

Co budeme potřebovat

Jak již bylo naznačeno v úvodu, výsledná aplikace nemusí běžet pouze jako aplikace na mobilním telefonu, ale také jako její desktopová varianta, což vychází z myšlenky Microsoftu a jejich Windows 10 Universal Apps. K tomu budeme potřebovat… ano, správně… Windows a s tím související technologie. Ale k věci. Kromě Ionic, který má každý instalovaný již od prvního dílu, si pořiďte:

  • mobilní telefon se systémem Windows 10 Mobile, případně Local Machine, kterou lze spustit z Visual Studia. Nebo emulátor – ten ale spíš nedoporučuji a navíc to jde i bez něj.
  • prostředí pro build aplikace (Windows 10 s nainstalovaným Windows 10 SDK)
    • Windows 10 ISO jde stáhnout zadarmo přímo od Microsoftu.
    • Systém jde samozřejmě spouštět i virtualizovaný. Já používám program VirtualBox.
  • vývojové přostředí Visual Studia 2015 (Community Edition je ke stažení zde)
    • K vývoji univerzální aplikace pro Windows je potřeba během jeho instalace zvolit minimálně možnosti Universal Windows App Development Tool a Cross Platform Mobile Development
    • Visual Studio sice není teoreticky vůbec potřeba, protože nám nic nebrání nainstalovat Windows 10 SDK samostatně, ale velmi se hodí. Zvlášť tehdy, když vám nasazená aplikace z jakéhokoliv svého dobrého rozmaru padá třeba při startu – díky spuštění aplikace v debug módu z VS je hledání chyby mnohem snazší.

Jako doplněk ke konfiguraci výše jistě oceníte i několik dobře míněných rad, díky kterým si ušetříte spoustu času. Všechny vycházejí z osobních poznatků autora, jenž je uživatel Mac OS a s Windows se setkal znovu po letech. Mohou být tedy dost subjektivní. I tak… nemáte zač.

  • Instalace VS sebere i v té nejosekanější verzi poměrně dost místa na disku.
  • Pokud se rozhodnete instalovat emulátor pro Windows 10 Mobile, ujistěte se, že jako prostředí pro vývoj používáte na počítači Windows 10 Pro (Home nemají technologii Hyper-V)
  • Nepokoušejte se rozjet emulátor na virtualizovaných Windows.
  • Tohle je sice nejvíce subjektivní, ale ať se děje cokoliv, vyvíjejte na počítači s 64bitovou verzí Windows. Prostě proto. (32bit neumí emulátor, já osobně jsem měl navíc v šesti z pěti pokusů s čímkoliv – npm, instalace VS, build… nějaký problém)
  • Visual Studio používá svou vlastní verzi Node.JS. Nastavte si cestu tak, aby používalo tu, se kterou pracuje celý váš systém.
  • Microsoft oficiální update Windows 10 Mobile slibuje od loňského prosince. Otázkou je, jak vážně lze brát poslední informaci o tom, že aktualizace by měla spatřit světlo světa začátkem března 2016. Pokud zrovna nepatříte mezi ty, kdo rádi čekají na Godota, a rozhodnete se přes Insider updatovat, čtěte prosím ještě upozornění týkající se budoucích aktualizací.
Instalace nástrojů Visual Studia 2015 CE

Instalace nástrojů Visual Studia 2015 CE

Přidání Windows platformy do Ionic projektu

Vypadá to, že nyní máme nainstalováno vše potřebné. Pojďme se tedy pustit po cestě, jež by měla končit nasazením aplikace do telefonu. Abych zůstal v mezích seriálu, vypůjčím si pro naše potřeby projekt z minulého dílu:

git clone https://github.com/jvaclavik/ionic-tutorial-movies.git

Nyní je na vás, zda se projekt rozhodnete vyvíjet pomocí Visual Studia (File -> New -> Project From Existing Code, jako typ vybrat Apache Cordova a dále se inspirovat například zde), nebo si vystačíte s libovolným textovým editorem a CLI. První možnost je dobrou volbou pro vývoj složitějších projektů. Pokud se pro ni rozhodnete, měli byste znát ještě první bod z následující sekce Známé problémy a nedostatky.

My budeme vzhledem k malému rozsahu naklonovaného projektu pokračovat druhou cestou a provedeme úpravu v souboru bower.json tak, aby projekt pracoval s nejnovější verzí frameworku. V řádku "ionic": "driftyco/ionic-bower#1.1.1" nahradíme verzi 1.1.1 za verzi 1.2.4 a v té samé složce, jako se nachází upravovaný soubor, necháme provést příkaz:

bower update --force

Nyní přidáme do projektu naši platformu:

ionic platform add windows

Pro správné sestavení je nutné přidat do souboru config.xml, který se nachází v kořenovém adresáři aplikace, specifické nastavení pro Windows platformu:

<platform name="windows">
    <preference name="windows-target-version" value="10.0"/>
    <preference name="windows-phone-target-version" value="10.0"/>
</platform>

Dále provedeme drobnou úpravu v souboru app.js a zakomentujeme následující fragment kódu (opět viz následující sekce Známé problémy a nedostatky):

if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}

Specifického vzhledu ikonek a splashscreen aplikace snadno dosáhneme tak, že ve složce images v adresářové struktuře Windows platformy nahradíme defaultní png obrázky našimi vlastními. Jen upozorním, že je třeba zachovávat jména a rozměry obrázků.

Konečně to nejdůležitější. Sestavení aplikace provedeme příkazem

ionic build windows

Pokud vše proběhlo v pořádku, získali jsme sestavenou aplikaci připravenou k nasazení a též cestu k jejímu appx balíčku. Vzhledem k tomu, že se jedná o univerzální Windows aplikaci, je možné ji rovnou spustit i lokálně na počítači pomocí příkazu ionic run windows. Počítejte s tím, že systém po vás bude chtít instalovat certifikát nebo bude žádat povolení pro spouštění v tzv. vývojářském režimu.

Ionic aplikace po spuštění na Windows 10 desktopu.

Ionic aplikace po spuštění na Windows 10 desktopu.

Známé problémy a nedostatky

  • Jakmile jednou provedu build projektu z CLI, později se již nedaří spouštět jej a tedy ani debugovat ve Visual Studio (nastává chyba appxrecipe file is missing).
  • Ovládací prvky stále ještě úplně neodpovídají vzhledu Windows platformy. Výsledek tak může působit jako iOS aplikace běžící na telefonu s Windows
    • funguje zde například iOS gesto pro návrat o stránku zpět, nicméně toto lze relativně snadno vypnout přidáním podmínky do app.config, který se v našem případě nachází v souboru routes.js:
    • if (ionic.Platform.isEdge()) { 
          $ionicConfigProvider.views.swipeBackEnabled(false);
      } 
  • Problém s funkcí hideKeyboardAccessoryBar v souboru app.js.  Je třeba ošetřit podmínkou. Ve verzi 1.2.4 jsem ovšem situaci kvůli problémům s window.cordova.plugins.Keyboard řešil kompletním zakomentováním.
  • Nutnost explicitního nastavení pro toast notifikace.

Nasazení aplikace do telefonu

Aplikaci máme sestavenou a podařilo se nám ji spustit lokálně na počítači. K tomu, abychom se s ní mohli druhý den pochlubit přátelům, nám zbývá jediné – nahrát ji z PC do telefonu. Toho docílíme s pomocí nástroje WinAppDeployCmd a připojením telefonu přes USB kabel (alternativně připojením do stejné sítě).

Od buildu, který vyšel loni v říjnu, můžeme využít i druhou a poněkud elegantnější cestu prostřednictvím tzv. portálu zařízení. V krátkosti představím obě varianty a vy sami se pak rozhodnete, která z nich vám vyhovuje více.

Samozřejmě se nejedná o jediné dva způsoby. Nasadit aplikaci na vzdálené zařízení umožňuje i Visual Studio. Osobně jsem ale tuto možnost nikdy nezkoušel, a proto bych ji nechal pro vaše vlastní experimenty.

Nástroj příkazové řádky WinAppDeployCmd

Tento nástroj jsme získali automaticky s instalací Windows 10 SDK. Před samotným nahráním souboru s aplikací je nutné zabrousit do nastavení telefonu, z nabídky vybrat Aktualizace a zabezpečení, v další obrazovce možnost Pro vývojáře a zde povolit Vývojářský režim společně se sekcí Zjišťování zařízení.

Povolení režimu pro vývojáře.

Povolení režimu pro vývojáře.

Nástroj je umístěn v cestě C:\Program Files (x86)\Windows Kits\10\bin\x86\WinAppDeployCmd.exe. Příkazem WinAppDeployCmd devices lze zobrazit seznam všech cílových zařízení v síti, se kterými můžeme komunikovat. Seznam zahrnuje IP adresu, GUID a jméno modelu. A právě IP adresu využijeme v příkazu pomocí kterého nainstalujeme aplikaci do telefonu:

WinAppDeployCmd install -file "C:\Cesta\SampleApp.appx" -ip 127.0.0.1 -pin ABC1dE

Přepínač pin je generovaný kód, který slouží k autentizaci. Získáme jej tak, že v již zmíněné sekci pro zjišťování zařízení zvolíme možnost spárovat.

Vygenerovaný kód k autentizaci párovaného zařízení.

Vygenerovaný kód k autentizaci párovaného zařízení.

Kompletní seznam příkazů včetně přepínačů je k dispozici v dokumentaci.

Přístup přes portál zařízení

Druhá slíbená možnost vyžaduje aktivaci v sekci Portál zařízení. Po zapnutí získáváme IP adresu, ke které následně přistoupíme pomocí prohlížeče a ocitneme se ve webovém rozhraní pro správu telefonu.

Pokud se navíc rozhodneme zapnout možnost Ověřování, načtená stránka po nás bude chtít zadat pin. Ten získáme úplně stejně jako v případě výše volbou spárování.

Povolení přístupu přes portál zařízení.

Povolení přístupu přes portál zařízení.

Webové rozhraní poskytuje krom snadné instalace aplikací (záložka Apps) i další funkcionalitu, například správu běžících procesů nebo sledování výkonu.

Ukázka připojení k zařízení přes webový portál. Prostřednictvím záložky Apps instalujeme sestavené aplikace.

Ukázka připojení k zařízení přes webový portál. Prostřednictvím záložky Apps je možné instalovat sestavené aplikace.

Docílili jsme toho, čeho jsme chtěli docílit. Pokud jste si při čtení minulého dílu kladli otázku, jak by asi vypadala filmová aplikace na telefonu s Windows, toto je odpověď:

Filmová aplikace v Ionic ze třetího dílu spuštěna na telefonu s Windows 10 Mobile.

Filmová aplikace v Ionic ze třetího dílu spuštěna na telefonu s Windows 10 Mobile.

Závěr

Dnes jsme si ukázali, jakým způsobem je možné používat Ionic s Windows 10 Mobile. Nebylo to zadarmo, ale doufám a věřím, že pro spoustu z vás bylo toto téma přínosné, a že jste si doplnili další střípek do mozaiky vývoje hybridních aplikací. Příští pátý díl by měl už plynule navázat tam, kde skončil díl třetí.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.