Microsoft App Studio

Ne každý je ostříleným vývojářem moderních aplikací pro Windows, ale občas se může hodit jít s aktuálními trendy a vytvořit appku pro mobilní zařízení a třeba ji pak publikovat i na Windows Store. S příchodem Windows 10 bude toto téma ještě ožehavější, proto dnes necháme našeho dalšího hosta, aby vám představil jednoduchý a přívětivý způsob, jak na to. Autorem je Petr Vlk z KPCS CZ.

Martin

Přemýšleli jste někdy o vývoji vlastní aplikace pro moderní dotyková zařízení s operačním systémem Windows 8.1 a Windows 10? Chcete prezentovat vaši společnost, její produkty a služby formou líbivé aplikace? Nebo jen chcete rychle vytvořit aplikaci k nějaké události, nebo zobrazující aktuální menu vaší restaurace? A narazili jste přitom na limity vašich znalostí programování a technické složitosti vývoje celé aplikace od samotného zdrojového kódu až po tvorbu grafických prvků?

Přesně pro vás je tu Microsoft App Studio - https://appstudio.windows.com/

App Studio umožňuje komukoliv jednoduše vytvořit interaktivní aplikaci složenou z předem připravených komponent a datových zdrojů jako jsou RSS, YouTube, Facebook, Twitter, HTML a další jen pomocí jejich vhodného nastavení. Svoji aplikaci si tak postavíte rychle a snadno jako stavebnici LEGO. App Studio má sice přívěšek Beta, ale je plně funkční a generuje aplikace, které lze bez problému a pádů používat.

V obchodu s aplikacemi máte možnost stáhnout si vzorové ukázky aplikací, které byly vytvořeny pomocí App Studia, například Contoso Sample App. Můžete si tak udělat představu, jak mohou v App Studiu vytvořené aplikace vypadat a fungovat.

Na podobném principu skládání jednotlivých komponent do sebe pracuje Project Siena. Na rozdíl od App Studia ovšem slouží spíše pokročilejším, kteří chtějí zajistit načítání vlastních dat do aplikace například z internetového obchodu, nebo databáze. Siena navíc dovoluje aplikacím získat na interaktivitě díky jednoduchému programování uživatelských akcí, například objednání zboží z katalogu a odeslání objednávky k vyřízení. App Studio oproti tomu slouží spíše pro jednodušší aplikace, které si nekladou za cíl takovou míru interaktivity s uživatelem.

Představme si jednotlivé generátory seřazené od nejjednoduššího až po ten nejsložitější.

1. App Studio – Pro jednoduché aplikace tvořené pomocí intuitivního průvodce.
2. Project Siena – Pro interaktivní aplikace při základních znalostech programování.
3. Visual Studio – Pro složité a interaktivní aplikace vyžadující značné znalosti programování.

Výhodou prvních dvou je možnost exportu generovaného zdrojového kódu do formátu, který snadno otevřete právě ve Visual Studiu. Můžete tak provést úpravy, které generátor neumožňuje. Existují samozřejmě i jiné možnosti nepocházející z dílny společnosti Microsoft, zaměřené například i na kompatibilitu s ostatními platformami.

A my se dnes podíváme právě na App Studio. To usnadňuje vývoj aplikace nejen samotnou formou průvodce, ale i podrobnou nápovědou s vysvětlenými příklady.

1. Typ aplikace

Pro použití App Studia budete potřebovat svůj účet Microsoft. Není potřeba firemní nebo vývojářský účet, výsledný zdrojový kód si můžete stáhnout a publikovat i pod jiným účtem.

Na výběr je z několika typů aplikací:

• Prázdná aplikace – U ní plně využijete svoji tvůrčí povahu. Průvodce vytvoří zcela prázdnou a nijak neupravenou aplikaci, kde můžete jednotlivé prvky a vizuální styl upravovat dle své libosti a potřeb.
• Šablona aplikace – Průvodce vám poskytne několik předem připravených aplikací, u kterých jsou již rozmístěny jednotlivé funkční prvky, nastaven vzhled a chování aplikace i její grafické prvky v podobě ikon aplikace. Postačí vám jen přepsat základní nastavení, ale můžete samozřejmě upravovat i předem nastavené hodnoty.
• Šablona webové aplikace – Poslední typ je určen pro případy, kdy již máte připravenu například plně responzivní verzi vašeho webu a potřebujete jej jen doplnit o vhodné ovládací prvky a dát o ní vědět světu.

Při vytvoření nové aplikace zadáte její název a vyberete typ zařízení, pro který je aplikace vyvíjena. Zda jako univerzální aplikace pro Windows 10, či pro mobilní telefony s Windows Phone 8.1 nebo počítače s Windows 8.1.

Pokud využijte připravenou šablonu, na výběr je několik jednoduchých od firemní prezentace, hudební skupiny, informací o městě, nebo o fotbalovém klubu a další. Nemusíte se ovšem držet šablonou definované struktury, obsah můžete změnit, stejně jako grafickou úpravu použité šablony v dalších krocích průvodce.

Obrázek 1 – Vybíráme šablonu a typ aplikace

Průvodce vám nabízí náhled na výslednou aplikaci pro jednotlivé typy a rozměry zařízení. Získáte tak snadno představu, jak bude vaše aplikace vypadat po stránce vizuální i obsahové.

Obrázek 2 – Náhled na šablonu aplikace

2. Datové zdroje a ovládací prvky aplikace

Do aplikace můžete umístit několik rozličných datových zdrojů, které reprezentují obsah, který aplikace zobrazí uživatelům. Ten může být plně statický, nebo dynamický. Podporovány jsou například:

• HTML – Stránka umožňující jednoduché formátování textu a obsahu pomocí HTML značek.
• RSS – Informace načítání z RSS kanálu vždy při spuštění aplikace.
• YouTube – Přehratelná videa s popisem i náhledem z kanálu, který specifikujete.
• Facebook – Seznam příspěvků ze zdi Facebook stránky.
• Twitter – Seznam příspěvků na Twitter profilu.
• Instagram – Seznam obrázků z Instagram profilu.
• Flickr – Seznam obrázků z Flickr účtu.
• Xbox Music – Informace o vybraném interpretovi.
• Bing – Seznam zpráv o tématu nebo výsledky vyhledávání na dané slovo.
• Kolekce – Seznam položek, který si definujete.

Kolekce

Z uvedených si zaslouží blíže popsat právě kolekce. Kolekce je obdobou databáze. Může se tedy jednat například o statický seznam položek menu restaurace s obrázky, popisem a cenou. Data specifikujete ve formě podobné tabulce v Microsoft Excel. Zde zadáte typy jednotlivých sloupečků a vepíšete do řádků potřebná data. Sloupce mohou nabývat například hodnot Adresa, Název, Umělec, Obrázek, Telefonní číslo, E-mail, Text.

Můžete ale také specifikovat, že celá kolekce a její data budou dynamická. Kolekce je bude načítat ne ve formě statických dat, která zadáte jednorázově, ale z dat uložených právě v App Studiu online, kde je můžete kdykoliv aktualizovat. Což lze dobře využít právě u informací o cenách nebo denní nabídce restaurace. Jednotlivé prvky Kolekce pak připojíte k prvkům zobrazeným na stránce.

Menu

Celý obsah aplikace můžete skládat do jednotlivých sekcí a stránek, na které můžete odkazovat z hlavního menu aplikace. App Studio automaticky zakládá stránky pro jednotlivé typy obsahu a na vás bude je jen vhodně seřadit a spojit na základě potřeby. Bez nutnosti dalšího programování získáte posuvné panorama a strukturu, jaké znáte z dalších moderních univerzálních aplikací Windows.

Akce

Pro ovládací prvky i jednotlivé obsahy můžete specifikovat akce, které nastanou po interakci uživatele. Pokud zvolíte pole typu e-mail, může být akcí odeslání e-mailu. V případě telefonního čísla pak jeho vytočení. Možné je vybírat z následujících typů akcí:

• Zavolat na telefonní číslo (Phone)
• Odeslat e-mail (Mail)
• Přehrát píseň interpreta (Music)
• Přehrát mix písní interpreta (Music)
• Vyhledat interpreta (Music)
• Najít na mapě adresu (Here Maps)
• Navigovat na zadanou adresu (Here Maps)

Externí datové zdroje

Pro stažení dat z Facebooku, YouTube, Twitteru a dalších budete potřebovat vlastnit účet na těchto sítích a vygenerovat vaší aplikaci speciální klíče, pomocí kterých se ke službě ověří a ta ji dovolí stáhnout si potřebná data. Tyto klíče jsou většinou zdarma, pokud se udržíte v limitech dané služby. Pokud hovořím o limitech, nemusíte se bát jejich překročení, pokud vaší aplikaci nebude používat naráz tisíce uživatelů. Návody pro získání jednotlivých klíčů a nastavení spojení datových zdrojů naleznete podrobně popsané v nápovědě App Studia.

Obrázek 3 – Přidání obsahu a sekcí obsahu

Tím možnosti nekončí, možné je integrovat i TouchDevelop skripty, které jste vytvořili vy, nebo někdo jiný. TouchDevelop je v podstatě další zjednodušení již složitějšího vývoje a logiky aplikací. Lze v něm vytvářet jednoduché hry, nebo interaktivní ovládání a funkce.

3. Vzhled aplikace

Nyní jsme dokončili obsah naší aplikace. A obsah je král. Ale bez líbivé grafiky se uživatelům prostá data líbit na pohled nebudou. V dalším kroku průvodce se tedy můžeme zaměřit na grafickou úpravu.

Vybírat můžeme z předem připravených grafických stylů, které kombinují vhodné rozvržení kontrastních barev pro jednotlivé ovládací prvky i obsah. Pustit se ovšem můžeme do vlastních úprav nastavení.

Nahrát můžete pozadí pro celou aplikaci i ovládací prvky, hlavní menu, vybrat barvu písma prvků.

Obrázek 4 – Nastavení vzhledu a grafického stylu aplikace

4. Dlaždice a ikony aplikace

Aby uživatelé vaši aplikaci snadno identifikovali v obchodě s aplikacemi a mohli si ji připnout na startovní obrazovku telefonu či počítače, můžete nastavit interaktivní dlaždici a ikonu vaší aplikace. Specifikovat můžete několik velikostí, z nichž má uživatel na výběr. Použít můžete jednoduché statické dlaždice, nebo dlaždice oboustranné s jednoduchým textovým popiskem, nebo kolekcí obrázků. Nastavit můžete i také startovní obrazovku aplikace, která se zobrazí před jejím plným načtením či aktualizací dat z Internetu.

Obrázek 5 – Výběr dlaždice a ikon aplikace

5. Nastavení aplikace

Posledním krokem průvodce je drobná konfigurace aplikace za účelem jejího publikování v obchodu s aplikacemi nebo zobrazení v seznamu instalovaných aplikací.

Můžeme nastavit jazyk, název aplikace a její popis. Aplikaci můžeme připojit k obchodu s aplikacemi pomocí vývojářského účtu, definovat napojení na App Insights ve Visual Studio Online, které mohou poskytnout statistiky o použití aplikace jejími uživateli, nebo přidat automaticky generovanou stránku s informacemi o aplikaci. Můžeme také zapnout integraci s reklamním systémem společnosti Microsoft. V tom případě se bude na úvodní stránce aplikace zobrazovat placená reklama.

Pokud uvažujete o publikaci aplikace a jejím prodeji (i v případě publikace zdarma) v obchodě s aplikacemi, měli byste již na tomto místě uvažovat o tom, aby vaše aplikace splňovala podmínky, které pro aplikace platí. Pravidla jsou poměrně obsáhlá, ale při zachování rozumného přístupu je jistě snadno dodržíte, aplikace by měla být unikátní, neporušovat ochranné známky třetích stran či neposkytovat nelegální obsah v dané zemi a podobně dále.

Společnosti Microsoft jednotlivé aplikace při jejich publikaci kontroluje a pouze aplikace, které projdou schvalovacím procesem, se objeví uživatelům ke koupi či stažení. Druhou možností, jak dostat aplikaci k uživatelům, je pro vás distribuce aplikace pouze na vývojářská a odemknutá zařízení, z interního firemního obchodu s aplikacemi, nebo přes nástroje jako je například SCCM.

Obrázek 6 – Nastavení publikace aplikace

6. Publikování a distribuce aplikace

V posledním kroku průvodce pak získáte kompletní balíček s vaší aplikací. Ten je možné nahrát do certifikačního procesu pro publikaci aplikace do obchodu s aplikacemi. Pokud si ovšem vystačíte s provozem aplikací na omezeném počtu firemních zařízení, postačí vám nainstalovat do nich potřebný certifikát vydavatele, odemknout vývojářským účtem u telefonů s Windows Phone, nebo nainstalovat pod účtem administrátora pod plnými Windows. Aplikaci můžete také distribuovat například přes SCCM obdobným způsobem. Vše je opět plně popsáno v nápovědě App Studia a to pro oba scénáře distribuce aplikace.

Tak a vaše aplikace je hotova a její vývoj nezabral ani jeden celý večer. Gratuluji. Pochlubte se odkazem zde v komentářích.

- Petr Vlk (KPCS CZ)