A Windows 8 megjelenésével egy időben adta ki a Microsoft Press Kraig Brockschmidt Programming Windows Store Apps with HTML, CSS and JavaScript c. könyvét ingyenes e-book formájában. A 8.1 verzió megjelenésével a könyv kissé elavult, de szerencsére Kraig nem csüggedve tovább dolgozott rajta.
Most jelent meg a könyv második kiadása, amely 478 oldallal kibővítve immár a Windows 8.1 újdonságait is lefedi, sőt jelentős része alkalmazható Windows Phone 8.1 fejlesztéseknél is. A teljes könyv így 1311 oldalas lett, és szerencsére továbbra is ingyenesen tölthető le a Microsoft Virtual Academy oldaláról a kapcsolódó példakódokkal együtt.
Könnyen előfordulhat, hogy amikor meglátogatunk a telefonunkon egy HTTPS-es weboldalt, az alábbi hibaüzenettel találkozunk:
Ahogy a hibaüzenetben egyértelműen olvasható, az a gond, hogy a tanúsítvány kiadójában nem bízik meg a telefon. Egy asztali böngésző segítségével könnyen kideríthetjük, hogy pontosan melyik tanúsítvánnyal is van gond:
A View Certificates gombra kattintva megnézhetjük a teljes kiadói láncot:
Ilyenkor a klasszikus megoldás, hogy ha tényleg megbízható a kiadó, akkor importáljuk a tanúsítványát. Netlock esetén például így:
Látogassunk el a telefonon a https://www.netlock.hu/html/cacrl.html oldalra. Mivel még a telefon nem bízik meg a kiadóban, ezért itt hibával fogunk találkozni, de a Continue to website (not recommended) segítségével továbbléphetünk (katt a teljes képért).
Tappintsunk a telepíteni kívánt kiadó nevére:
Nyomjunk rá a középen található Hitelesítés szolgáltató tanúsítvány gombra, aminek hatására a böngésző letölti a tanúsítvány és elindul az importáló varázsló:
Install, mi más:
Nálam még kellett egy böngésző újraindítás és máris hibaüzenet nélkül nyílt meg az oldal.
De mi a helyzet akkor, ha nem sikerül megtalálnunk a kiadó tanúsítványát vagy a Continue nem segít? Ez esetben exportálhatjuk a desktop gépünkről. Indítsunk egy Management Console-t (mmc.exe), majd töltsük be a Certificates snap-int. A Trusted Root Certification Authorities kategóriából keressük ki a tanúsítványt, majd a helyi menüből indítsuk el az export varázslót, amivel exportálhatjuk a tanúsítványt.
A végeredmény .cer fájlt küldjük el magunknak e-mailben és a levél mellékletét nyissuk meg a telefonon, ami ugyanúgy elindítja az import varázslót. Persze kitehetjük webszerververre is a fájlt, de IIS esetén ne felejtsük el felvenni a MIME type-ok közé az application/x-x509-ca-cert típust, különben az IIS 404.3 hibával nem fogja leküldeni a fájlt:
Ez a blogbejegyzés 2 hete fekszik publikálatlanul, ha végigolvasod, kiderül, miért. IdőközbenScott Hanselmanpublikált egy nagyon hasonló cikket, azt is érdemes elolvasni.
Az egész úgy kezdődött, hogy a tanszékünk január 25-én szervezett egy Windows Phone fejlesztői konferenciát (melynek az előadásai már megtekinthetők a devPortalon), én pedig elhatároztam, hogy azt a napot rászánom a Windows Phone fejlesztésre. A cél annak kiderítése volt, hogy a meglévő .NET, Silverlight, XAML tudásomat mennyire hatékonyan tudom alkalmazni WP környezetben. Mindezt azonban nem a konferencián akartam felmérni, hanem inkább egy Outlook-Skype-telefon-mentes napon, a saját bőrömön érezve, Visual Studioban kódolva. A végeredmény a cikk végén letölthető, addig pedig azt írom le, milyen úton sikerült odáig eljutni, hiszen a másodlagos cél ezeknek az első tapasztalatoknak a megosztása volt.
Adott volt tehát az 1 napnyi határidő, már csak egy konkrét cél kellett, ami értelmesebb alkalmazás, mint egy Hello World, de nem túl bonyolult. Egyszer régen, még a Windows Mobile idejében, készítettem egy .NET Compact Frameworkös programot, amely segítségével a magyarországi autópályákkal kapcsolatos forgalmi információkat lehet lekérni SMS-ben. Elképesztő GUI-t kapott:
Mivel az alkalmazás bevált a régi Windows Mobile-os telefonomon és nagyon hamar elkezdtem hiányolni Windows Phone-on, kézenfekvő volt, hogy ez legyen az állatorvosi ló.
Ezzel indultam neki:
.NET tapasztalat, elsősorban webfejlesztési területen.
Tapasztalat .NET Compact Frameworkös mobil alkalmazás, Silverlight és XAML területen.
A Windows Phone-nal kapcsolatos hírek követése a termék életének kezdete óta.
Pár egyszerűbb fejlesztési demó és a devPortalon lévő Windows Phone-os előadássorozat végigmozizása.
Kéznél volt a devPortalos fiúk által írt WP7 könyv, amiben nagyon jól lehet CTRL+F-fel keresni.
Letöltöttem és kb. 15 perc alatt telepítettem a Windows Phone SDK-t.
Egy HTC HD7 készülék Mangoval a teszteléshez.
Első lépések
Ennyi elég is volt ahhoz, hogy Visual Studioban File – New – Project – Windows Phone Application varázslóval létrehozzam az első WP7-es alkalmazásomat. A sablon kiváló, azonnal futtatható, elindul az emulátor és máris kipróbálható. Pont ennyit tud:
Nem tudom, ki hogy van vele, én új környezetben mindig először egy interaktív Hello Worldöt szoktam készíteni: egy szövegdobozba beírt szöveg gombnyomásra megjelenik egy címkén. Ez pont olyan egyszerűen ment, mint ahogyan előre elképzeltem, Toolboxról behúzhatók a vezérlők, vagy a WPF/Silverlightos XAML kód pont ugyanúgy írandó, sőt az eseménykezelőkkel kapcsolatban sincs igazán újdonság.
A tesztelés már egy kicsit furmányosabb, tudni kell, hogyan lehet a hoszt billentyűzetét használni az emulátorban: a kulcs a PageUp.
A WP7-es alkalmazások felhasználói felületének gyakori eleme az alsó Application Bar. A Studio által generált kódban erre is van minta, csak ki van kommentezve, és szinte kiált az uncomment után. A gombra persze ikont kell rakni, szerencsére van pár a C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons mappában. Elég a Dark ikont használni, ha a felhasználó átvált a telefonon világos témára, akkor ez az ikon automatikusan invertálódni fog. Az ikont bárhova be lehet rakni a forráskódba, de a megszokottal ellentétben a Build Actionjét nem Resource-ra, hanem Content-re kell állítani. Bevallom, ez meglepett. Az appbar eseménykezelői klasszikus gomb eseménykezelők, akár debuggerrel, akár MessageBox-szal könnyű kipróbálni őket.
Szerencsére nem ez az egyetlen WP7-es projekt sablon van a Studioban, érdemes végignézni mindet. A Windows Phone Databound Application már adatkötésre és navigációra is mutat példát. Van benne egy talán feleslegesen elbonyolított MVVM és példa az oldalak közötti navigálásra, ami ugyanúgy a NavigationService segítségével történik, mint WPF-ben. Ez a példa használ beépített Windows Phone-os stílusokat, amikről itt található bővebb információ: http://msdn.microsoft.com/en-us/library/ff769552(v=vs.92).aspx. Aki csinált már adatkötést, például WPF-ben vagy akár ASP.NET-ben, annak itt nem lesz újdonság.
Ezek után még létrehoztam egy Windows Phone Panorama Application és egy Pivot Application projektet. Kód szinten a Panorama és a Pivot is pont olyan, mint egy Tab control, futási időben viszont máshogy viselkednek. Érdemes megnézni a devPortalos videókat, ott kiderül, mikor melyiket célszerű használni.
A projekt sablonok megismerése kb. 40 percbe telt, ideje volt nekiállni a saját alkalmazásomnak.
Tervezés
A Windows Mobile és a Windows Phone megjelenése közötti időben nagyon sokat változtak az alkalmazások és a felhasználói igények is, ezért kódolás előtt futottam egy kört azzal kapcsolatban, hogy mit kellene másként csinálni. Ami jó volt a régiben:
hálózati adatkapcsolat nélkül is tökéletesen működött, mert csak SMS-ben kommunikált
az egyszerű felhasználói felületnek köszönhetően akár vezetés közben is nagyon kényelmes volt a használata
Mivel a hálózati adatkapcsolat nélküli működés nagyon praktikus, maradtam az SMS-es megvalósításnál. Biztos voltam benne, hogy az SMS-t nagyon egyszerű lesz elküldeni, de voltak kételyeim afelől, hogy a válasz SMS-t meg tudom-e jeleníteni az alkalmazásban. Hosszas guglizás után arra jutottam, hogy WP7-en nemcsak hogy nem lehet elkapni a bejövő SMS-t, de még a kimenő SMS-ek elküldését sem lehet teljesen automatizálni. A kódból összerakott SMS-t csak a felhasználó tudja elküldeni az SMS szerkesztőből. Ez akár baj is lehetne, de mivel a válasz amúgy is ott fog megjelenni, ezért nem nagy gond. Sőt, mivel a szolgáltatás gyakran több SMS-ben válaszol és azok ott egyszerre lesznek láthatóak, úgy döntöttem, ezzel a kompromisszummal együtt lehet élni. Plusz egy tappintás, még belefér.
A második pont a felhasználói felület. A régi, egy képernyős, fix elrendezés tökéletesen működött az akkori kevés autópályára, de ma már sokkal több főútról lehet információkat kérni. Hogy pontosan melyekről, azt nem tudtam kideríteni. Az autopalya.hu oldalon találtam ugyan térképet, de az nem egészen fedte a Wikipedián található listát, és próbálgatás közben semmi logikát nem találtam abban, hogy melyikről jött válasz és melyikről nem. Így GUI tervezési szempontból arra jutottam, hogy akárhány elemű listát kell tudnom megjeleníteni.
A következő lépés a mockup rajzolás szokott lenni, amihez mi általában Balsamiqot használunk, amihez szerencsére lehet letölteni Windows Phone-os sablonokat. Nem volt türelmem az egész alkalmazást megrajzolni, de azt sikerült megsaccolni vele, hogy egy listában három egymás melletti ikon még elég nagy ahhoz, hogy ujjal pontosan megnyomható legyen. A mockupból kiderült az is, hogy a görgetés és a sok elem közötti keresgélés valószínűleg nem kényelmes például vezetés közben, ezért nem árt a programba egy Kedvencek lista egy másik Panorama képernyőn.
Ez a tervezgetés kicsit több, mint 45 percet vett el, de mindenképp megérte.
File – New – Project
A Studio projekt sablonjainak megismerése után gyerekjáték volt a projekt létrehozása és a felhasználói felület átszabása. Az egyetlen érdekesség az volt, hogy WP7-en alapból nincs WrapPanel, ahhoz már a Silverlight for Windows Phone Toolkit kell. Ez persze letölthető a CodePlexről is (mint ahogy sokan javasolják), de szerintem a NuGet csomag sokkal egyszerűbb.
Az adatmodellel már egy kicsit meggyűlt a bajom. Először is a template által generált view-modelben a PropertyChanged implementáció nem tetszett. Valami sokkal egyszerűbbet akartam, így átírtam az egészet singletonra. Annál viszont nem sikerült megoldanom, hogy dummy adatok megjelenjenek a dizájnerben, ha valaki tudja, hogyan kell, kérem írja meg. Egy óra kínlódás után vissza az egész.
Az SMS küldés gyerekjáték volt, meg is osztom veletek a hihetetlenül komplex üzleti titkot:
SmsComposeTask sms = new SmsComposeTask
{
To = App.Settings.PhoneNumber,
Body = speedwayDisplayName
};
sms.Show();
Délelőtt 10 órára készen is volt az alkalmazás első verziója, ami annyit tudott, mint a régi.
Első futtatás a telefonon
De jó, hogy megnéztem a devPortalos videókat arról, hogyan kell áttölteni egy alkalmazást a telefonra! Kösz, fiúk, sok időt spóroltatok meg! Hibaüzenetek ugyanis vannak, de nem éppen bőbeszédűek:
Failed to connect to device as it is pin locked.
Frászt! Csak épp bekapcsolt a képernyővédő. Bekapcs, felhúz és már megy is.
Ez akár értelmes hibaüzenet is lehetne, ha nem az AppHub kezdőlapját hozná be, ahonnan fogalmam sincs, hogyan tovább, túl sok link van rajta. A megoldás a Start menüből a Windows Phone Developer Registration alkalmazás elindítása, ami az SDK-val kerül fel. Beírtam neki a Live ID-mat és a jelszavamat, és azonnal megvolt az unlock, pedig előtte nem is regisztráltam az AppHubra.
Hetességek
Feltűnt, hogy a telefon forgatására a program nem reagál. Azt hittem, hogy ez megy magától, hiszen a layout vezérlők ezt kezelhetnék. Szerencsére tényleg megy magától, amint azt engedélyeztük XAML-ben:
Az eseménykezelő azért kellett, hogy fekvő helyzetben a Panorama címét el tudjam rejteni, mert nagyon sok helyet foglal. Erre csak ezt a megoldást találtam, vajon van egyszerűbb?
Mindenképp ki akartam használni, hogy a Start képernyőre egyedi lapkák tűzhetők, mert így még egyszerűbben lehet a gyakran használt autópályához tartozó információkat lekérdezni. Mínusz egy tappintás. A lapkák elég furcsa lények, mielőtt az ember belecsap, mindenképp érdemes elolvasni, hogyan működnek és mire képesek. A könyvben nagyon jól össze van foglalva, tudom ajánlani. A lehetőségek megértése után a kód nagyon egyszerű:
StandardTileData tile = new StandardTileData
{
Title = String.Format( CultureInfo.InvariantCulture, "{0} infó", speedway ),
BackgroundImage = new Uri( "/ApplicationTileIcon.png", UriKind.Relative )
};
ShellTile.Create(
new Uri( "/MainPage.xaml?info=" + speedway, UriKind.Relative ), tile );
Ez az a pont, ahol az ember szembesül azzal, hogy ikont kell rajzolni az alkalmazáshoz, ami nem kimondottan programozónak való feladat. Azért "a maga módján" az is élmény. Mindezt rápakolni a Toolkitben található ContextMenu-re már semmiség volt.
Természetesen a program elmaradhatatlan része az About ablak, amin belül WP7-en szinte kötelező, hogy legyen link a Piactéren lévő oldalra, ahol értékelni lehet az alkalmazást. Ehhez mindössze ennyi kód kell. Jó, nem?
MarketplaceReviewTask task = new MarketplaceReviewTask();
task.Show();
Ugyanoda került egy e-mail küldési lehetőség is, amit szintén nem bonyolult elkészíteni:
EmailComposeTask task = new EmailComposeTask
{
To = "balassy@aut.bme.hu",
Subject =
"Visszajelzés az Autópályán Windows Phone alkalmazással kapcsolatban"
};
task.Show();
A főoldal és a névjegy oldal közötti váltás nagyon fapadosnak tűnt, ezért elhatároztam, hogy feldobom a Toolkitben lévő animációval. Ezzel kapcsolatban a legtöbb leírás arról szól, hogyan lehet egy A és egy B oldal között megcsinálni az animációt jó sok kód bemásolásával, de kis keresgélés után találtam egy WindowsPhoneGeek cikket arról, hogyan lehet ezt központosítani.
Kora délutánra el is készült a program. Nem maradt más hátra, mint publikálni.
Piactér élmények
Elindítottam a jól eldugott helyéről (Solution Explorerben a projekten jobb klikk) a Marketplace Test Kitet, majd eltöltöttem jó sok időt a sokféle felbontású és rendeltetésű kép megrajzolásával. Szerencsére az emulátorból nagyon egyszerű képernyőképeket készíteni, egy kattintás és már menthető is. Lefuttattam az automatizált teszteket, és nagyjából átfutottam a 49 manuális tesztet (kinek van ehhez türelme?). Miután megfogalmaztam a programhoz tartozó leírást Wordben, minden készen volt ahhoz, hogy feltöltsem az alkalmazást a Piactérre.
Azt még tavaly sikerült elintéznem, hogy a Dreamspark program elfogadja a bme.hu végű e-mail címeket, így most simán regisztráltam magam Dreamspark tagként a create.msdn.com oldalon a Piactérre – természetesen ingyen. A “simán” persze egy kis túlzás, ha az embert “Balássy György”-nek hívják. Azt merte mondani a fránya regisztrációs űrlap, hogy ez a név már foglalt. Eeeeez? Nem hittem neki, de mit lehet tenni. Jól van, akkor legyen “György Balássy”. Abban meg nem megengedett karakterek vannak. Kérdem én, akkor a fordítottja hogy lehet foglalt, abban megengedettek ugyanazok a karakterek? Végül maradtam “Balassy Gyorgy”, de az e-mail cím megerősítő levélben valamilyen oknál fogva már így szerepeltem:
Bár az e-mailben lévő linkre azonnal rákattintottam, még sokáig “We are verifying your account” üzenet szerepelt a profil oldalamon, máshol meg az, hogy “Account Status: Active”. Hm. A Devices oldalon a korábban ugyanezzel a Live ID-val unlockolt készülék nem jelent meg azóta se, ami éppenséggel engem nem zavar, de érdekes anomália.
Szóval kicsit furcsa a Piactér a kofák oldaláról, de működik. Csont nélkül be tudtam küldeni az alkalmazásomat.
Két munkanap után jött meg az eredmény egy e-mail és egy PDF formájában (érdemes megnézni nagyban, milyen készülékeken tesztelték):
Az egyetlen hiba pedig:
Fail 5.5.1 The product description and UI text of your application must be localized to each language the application supports.
Hát igen, a program magyarul beszél, de a publikálásnál ezt senki nem kérdezte! A megoldás: a Studioban a projekt tulajdonságai között az Assembly Information ablakban kell helyesen beállítani a Neutral Language értékét. A helyesen nagyon fontos, ugyanis csak “ország” formátumút szabad választani, “ország (nyelv)” formátumút a fórumok alapján ugyanúgy nem fogad el a Piactér. Így aztán kiválasztottam a Hungariant, majd ismét beküldtem az alkalmazást a Piactérre. Annyit változtattam még, hogy a leírásban a sortöréseket üres sorokra cseréltem, mert úgy tűnt, azokra nincs tekintettel a megjelenítő oldal. Utólag úgy tűnik, hogy a nyilvános oldal majd tekintettel lesz rá, mert az egész leírást egy HTML <pre> tag-ben jeleníti meg.
Azt tudni kell, hogy az összes beküldés olyan, mintha első lenne, tehát bármilyen apró módosítás esetén újra végigmegy a program a teljes tesztelési és jóváhagyási folyamaton. Ez ismét két munkanapba telt, és az eredmény ismét Certification Failed:
Ez aztán a követelmény, próbáld csak meg magyarra lefordítani:
The title of the applications pin-to-start icon appears to be a generic title, "sdkLocalDatabase" and is not representative of the application named "1, 2, 3 Learn!"
Egyébként igaz, valóban nem teljesen egyéni ez az ikon:
De ez az előző tesztelőnek tényleg nem tűnt fel? Tényleg csak az első hibáig tesztelik a programot? Ez igazán bosszantó volt. Sok órányi rajzolgatás és az összes grafikusi képességem bevetése után ezt mind sikerült kihoznom belőle:
Aki szívesen rajzolna nekem egy jobbat, jelentkezzen nálam a pályázatával
Ezzel a csoda ikonnal, amit persze négy méretben kellett megrajzolnom, ismét beküldtem az alkalmazást.
Két munkanap után ezúttal megtörtént a váratlan fordulat:
Mivel a beküldésnél a varázsló végén azt állítottam be, hogy jóváhagyás után azonnal jelenjen meg, a “publish” elvileg meg is volt. Még jó, hogy Bandi az egyik előadásában elmesélte a SurfCube kapcsán, hogy kell még pár óra, míg az alkalmazás megjelenik a kereshető katalógusban. Ez a pár óra nálam ismét másfél napba telt. Addig sokszor a közvetlen link sem működött, hol megtalálta a kereső autocomplete, hol nem, teljesen kaotikusan lehetett rátalálni a programra. Magyarul újabb másfél napig nem volt publikálva az alkalmazás, ezzel összesen 2+2+2+1,5 munkanapig tartott kitenni az appot a Piactérre, de persze legközelebb remélhetőleg csak a fele lesz.
Azóta az alkalmazást több készülékre is letöltöttem a Piactérről, mégis nulla maradt a Download Count a tulajdonosi oldalon. Így kicsit érdekes a Crash Count számláló is Hasonló érdekességet találtam az értékelésekkel kapcsolatban is (arról majd egy későbbi cikkben írok), de ott szerencsére az AppTracker segítségével sikerült könnyen átlátni a visszajelzéseket.
A végeredmény
A végeredmény az Autópályán nevű alkalmazás, amely immár letölthető a Piactérről (ugyanott találhatók képernyőképek is) az alábbi linkekre kattintva, vagy a QR kód szkennelésével:
Aki esetleg letölti és kipróbálja, kérem küldjön róla értékelést és visszajelzést.
Értékelés
Egy nap alatt persze nem lettem Windows Phone guru (ez nem is volt cél), de azt hiszem, sikerült alaposan belekóstolni az új mobil operációs rendszer programozásába. Aki látott már valaha XAML-t, annak egyáltalán nem fog gondot okozni ez a platform, a fejlesztőeszközök (emulátor, debugger stb.) is sokkal jobbak, mint a Windows Mobile idejében. Egy nap alatt sikerült eljutni az ötlettől a publikálásig, ami szerintem nem is rossz, és ez az egy napnyi tapasztalat elég ahhoz, hogy sokkal határozottabban tudjak nekifogni a következő alkalmazás fejlesztésének. A Piactérnek vannak sajátosságai, de ezek idővel biztosan meg fognak javulni (vagy megtanulunk együtt élni velük). Szerintem már csak két kihívás marad:
Kitalálni olyan alkalmazásokat, amik még nincsenek WP7-re, de valóban kellenek.
Olyan felhasználói felületet kialakítani, ami ergonomikus, és nem csak hogy passzol a WP7 Metro stílusához, de maximálisan ki is használja azt.
A Windows 8 megjelenésével egy időben adta ki a Microsoft Press Kraig Brockschmidt Programming Windows Store Apps with HTML, CSS and JavaScript c. könyvét ingyenes e-book formájában. A 8.1 verzió megjelenésével a könyv kissé elavult, de szerencsére Kraig nem csüggedve tovább dolgozott rajta. 
Balássy György szakmai blogja 
