Alati koji vam mogu olakšati kreiranje Windows Phone aplikacija

Article name: Tools that can help you create a Windows Phone application

This article has published in Info released in November 2012, number 178 (BH IT magazine –http://info.ba).

Tekst je izašao u Novembarskom broju Info (Informatički magazin) – http://info.ba broj 178:

naslovna-178

Kako raste broj korisnika koji posjeduju Windows Phone telefone, kreiranje Windows Phone aplikacija postaje sve aktuelnija tema. Sama činjenica da mobilna aplikacija ima vrijednost za korisnika jer mu radi posao ili ga zabavlja a uz to postoji mogućnost i da se zaradi od prodaje aplikacije, sve te činjenice daju dovoljno argumenata autoru aplikacija da uz što manje manje muke kreira što kvalitetniju Windows Phone aplikaciju.

Kao i u svakom poslu, određene stvari se mogu odraditi na lakši ili teži način. Ukoliko budete koristili neki od narednih savjeta prilikom procesa izrade Windows Phone aplikacija, siguran sam da ćete mnogo brže i jednostavnije kreirati Windows Phone aplikaciju a koja će imati funkcionalnosti aplikacije koja slijedi najbolje preporuke.

Dizajn

Kao prvo, pravilo je da ukoliko postoje dvije aplikacije koje imaju sličnu ili istu funkcionalnost, korisnik će izabrati onu aplikaciju koja ima bolji vizuelni identitet ili tačnije rečeno bolji dizajn. Prilikom kreiranja aplikacija veliki dio vremena koje ćete upotrijebiti za kreiranje aplikacije  će biti upotrijebljen upravo za ovaj veoma bitan segment. Microsft je izdao smjernice za dizajn aplikacije za Windows Phone i jedna od veoma bitnih stavki je poravnanje elemenata na stranici kao i rastojanje između elemenata. Klasa koja vam zaista može mnogo pomoći u ovom procesu je MetroGridHelper od autora čuvene aplikacije 4th & Mayor-Jeff Wilcox.

Da bi najjednostavnije postavili ovu korisnu klasu koristićete alat NuGet koji će odraditi skoro sav posao za vas. Ukoliko nemate instaliran NuGet alat, potrebno je da ga instalirate putem Tools/Extension Manager u okviru Visual Studio alata. U okviru Online Gallery kartice pronađite putem polja za pretragu NuGet Package Manager, odradite Download i potom Install. Kada imate NuGet vrlo jednostavno možete instalirati bilo koji dodatni alat za Visual Studio (naravno, ukoliko taj alat ima podršku za NuGet). MetroGridHelper ćete instalirati tako što u okviru stavke menija Tools/Library Package Manager/Package Manager Console izvršite sledeću komandu:

Install-Package MetroGridHelper

Da bi dobili komandu za instalaciju bilo kog alata na http://nuget.org pokušajte pronaći željeni paket po nazivu. Kao rezultat pretrage za MetroGridHelper dobijamo situaciju kao na slici 1:

NuGet

Slika 1. Paket MetroGridHelper na NuGet.org

Ono što NuGet alat uradi je da odradi skidanje svih neophodnih fajlova (MetroGridHelper.cs), odradi postavljanje referenci u References (u konkretnom slučaju to nema potrebe da se odradi) i odradi dodavanje stavki using u okviru cs klase na pojedine klase (takođe nema potrebe jer je ova klasa  statička). Na kraju, da bi uključili funkcionalnost MetroGridHelper, potrebno je u Loaded metodi stranice koja se prva pokreće (MainPage.xaml.cs) dodati programski kod za aktiviranje MetroGridHelper prilikom pokretanja aplikacije:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
MetroGridHelper.IsVisible = true;
}

Programski kod za aktiviranje MetroGridHelper se može postaviti i u konstruktoru glavne stranice MainPage(). Kao rezultat, prilikom pokretanja aplikacije na telefonu ili Emulatoru će se na svakom od stranica aplikacije pojaviti mreža crvenih kvadrata veličine 25x25px čije je međusobno rastojanje 12px i rastojanje od ivica stranice 24px. Pomoću ove mreže ćete lako uočiti koji elementi nisu poravnati kao i koliko bi trebalo da je rastojanje između elemenata da bi aplikacija izgledala korektno. Moguće je podešavati boju kvadrata u mreži kao i providnost kvadrata (opacity). Parametar IsVisible je moguće isključiti u toku izvršavanja programa ali je u tom slučaju i dalje prisutna u okviru Visual Tree aplikacije što će uticati na perfomanse aplikacije te je preporuka da se MetroGridHelpse isključi prilikom završetka aplikacije.

MetroGridHelper

Slika 2. Primjer upotrebe MetroGridHelper klase za poravnanje i međusobno rastojanje elemenata na stranici aplikacije.

Snimanje ekrana

Kada imate gotovu aplikaciju, često ćete imati potrebu da kreirate Screenshot određene stranice. Kako Windows Phone 7.x nema ugrađenu mogućnost ove funkcionalnosti, potrebno je da koristimo dodatne alate. Jedan od takvih alata koji se mogu instalirati pomoću NuGet je Screenshot.cs (autor Jeff Wilcox). Dodatak možete instalirati pomoću NuGet alata putem komande:

Install-Package ScreenShots.cs

Nakon instalacije, alat aktiviramo u okviru klase App.xaml.cs u okviru metode public App() sa linijom koda:

ScreenShots.BeginTakingPictures();

Tačno mjesto postavljanja programskog koda za aktiviranje alata je prikazano na slici 3.

Screenshot

Slika 3. Mjesto postavljanja aktiviranja Screenshot funkcionalnosti

Možete se pitati, a zašto ne bi koristili Screenshot u okviru Emulatora? Istina je, da nije uvijek moguće dobiti svaku funkcionalnost Windows Phone aplikacije u okviru Emulatora te je jedini način kako doći do slike aplikacije postavljanje aplikacije na telefon i preuzimanje slike sa telefona. Podešavanje klase Screenshot je takvo da će generisati sliku svake 2 sekunde u Isolated Storage. Da bi došli do slika koje se nalaze u Isolated Storage, možete koristiti Windows Phone Power Tool koji je opisan u nastavku teksta.

Napomena: pomoću Screenshot.cs nije moguće dobiti i dio vizuelnog dijela aplikacije koji se nalazi u Application Bar. Takođe, postoje varijacije Screenshoot klase koja omogućava snimanje direktno u Picture Hub telefona što značajno olakšava preuzimanje slika.

Drugi način dobijanja slike iz aplikacije je korišćenje alata koji se nalazi u okviru Emulatora koji se zove Screenshot. Preporuka je da se prije uzimanja trenutnog stanja aplikacije pomoću Screenshot opcije poveća  Zoom Emulatora na 100% kako bi dobili sliku maksimalne veličine 480×800 px.

Windows Phone Power Tool

Alat koji vam omogućava funkcionalnosti koje ne možete odraditi pomoću standardnog Windows Phone SDK kao što su:

  • postavljanje update za vaš XAP instalacioni fajl kao i deinstalacija XAP fajla sa telefona
  • vizuelni pregled Isolated Storage kao i manipulacija sa fajlovima (preuzimanje i postavljanje fajlova, kreiranje foldera i brisanje fajlova ili foldera)

WindowsPhonePowerTools

Slika 4. Windows Phone Power Tools povezan na telefon

Detaljnije o alatu možete pronaći na Codeplex (link: http://wptools.codeplex.com/).

Windows Phone Toolkit

Nezaobilazni skup alata kreiran od strane Microsofta kojeg čini veliki broj kontrola koje možete koristiti u Windows Phone aplikacijama. Skup alata Windows Phone Toolkit (bivši naziv alata je Silverlight for Windows Phone Toolkit) možete instalirati pomoću NuGet (za WP8 neophodna verzija NuGet 2.1):

Install-Package WPtoolkit

Kontrole koje ćete rado koristiti su DataTime Picker, Progress, Pivot Control, LongListSelector, DataTimeConverters, TogleSwitch, Tilt, Transitions, HubTile i mnoge druge. Detaljnije na adresi: http://phone.codeplex.com/

Coding4Fun Toolkit

Sadrži skup kontrola, konvertera i helpera koju su veoma korisni za upotrebu u okviru Windows Phone aplikacije. Coding4Fun skup alata se može instalirati pomoću NuGet:

Install-Package c4fcontrols.complete

Detaljnije na adresi: http://coding4fun.codeplex.com

Coding4Fun

Slika 5. Coding4Fun Toolkit

About – opis aplikacije

Svaka aplikacija bi trebalo da ima i stranicu u kojoj je opisano šta predstavlja ta aplikacija, ko je autor, kontakt podaci, mogućnost davanja ocjena aplikaciji, pregled verzija aplikacije, uputstvo za korištenje kao i uslovi korišćenja aplikacije. Primjer dobre stranice ovog tipa je YLAD (Your Last About Dialog) od autora Peter Kuhn koja se može instalirati pomoću NuGet sa komandom:

Install-Package YLAD

Kao rezultat instalacije se dobija jedan dll fajl u kome se nalazi sva poslovna logika alata. Podešavanje teksta koji treba da se prikaže na stranici About se vrši u fajlu Content/About/Data.xml. Stranica About se pokreće pomoću naredbe:

NavigationService.Navigate(new Uri(“/YourLastAboutDialog;component/AboutPage.xaml”, UriKind.Relative));

Dio podataka koji YLAD preuzima prilikom prikaza podataka u toku rada aplikacije je ne samo iz fajla Data.xaml nego i iz fajla WMAppManifest.xml u kome se nalaze podaci generalno za cijelu aplikaciju (Description i Version) i koji će biti prikazani na stranici About kreiranoj od strane YLAD. Na primjer, na vrlo jednostavan način se dobija stranica sa istorijom aplikacije gdje se automatski na osnovu praznog reda vrši stilizovanje osnovne verzije na izlazu. Primjer realizacije History strane:

<Item Title=”history”
Type=”text”>
1.0
Inicijalna verzija aplikacije.

1.1
Izmjena dizajna aplikacije.
Promijenjeni termini početka predavanja.
Dodata informacija o User Grupama u BiH
</Item>

Izgled stranica prikazan je na slici 6. Veoma je jednostavno odraditi lokalizaciju About stranice izmjenom Data.xaml ili dodavanjem novih konfiguracionih fajlova za svaki od jezika kao na primjer Data.de.xaml. Detaljnije o YLAD možete pronaći na adresi: http://ylad.codeplex.com

About-YALD

Slika 6. Pregled stranica kreirani pomoću YLAD

Veličina slika

Prilikom razvoja Windows Phone aplikacija često ćete raditi sa slikama (png ekstenzije) te je od velikog značaja veličina tih fajlova. Veličina utiče na perfomanse aplikacije kao i na konačnu veličinu XAP fajla (fajl koji nastaje kao rezultat Build operacije u okviru Visual Studio alata i koji služi za postavljanje na Microsoft Dev Store). Alat koji uspješno radi kompresiju png fajlova bez gubitka kvaliteta je PNGGountlet kojeg možete pronaći na adresi http://pnggauntlet.com/. Nivo kompresije je u desetinama procenata i ukoliko imate veći broj fajlova možete značajno umanjiti konačnu veličinu zauzeća prostora.

PNGGauntlet

Slika 7. PNGGountlet za kompresiju fotografija

Rad sa slikama

Ukoliko imate potrebe za manipulacijom sa slikama u okviru vaše aplikacije tada je nezaobilazni OpenSource projekat koji ćete koristi WriteableBitmapEx. Paket instalirate pomoću NuGet sa komandom:

Install-Package WriteableBitmapEx

Biblioteka WriteableBitmapEx predstavlja kolekciju metoda za rad sa klasom WriteableBitmap koja omogućava izmjene bitmape i pruža mogućnost crtanja direktno po bitmapi uz veoma visoke perfomanse prilikom korišćenja ove biblioteke. Praktična primjena ove bibilioteke bi mogla bila u situacijama kada želite primjeniti određeni filter nad slikom, da izvršite određene transformacije sa slikom kao što je isjecanje slike ili rotacija, crtanje linija i zatvorenih krivulja bilo kog tipa po slici, snimanje slike na telefon i mnoga druge mogućnosti. Detaljnije o biblioteci WriteableBitmapEx možete pronaći na adresi: http://writeablebitmapex.codeplex.com/

Augmented Reality

Augmented Reality (izmjenjena realnost) je termin koji kada se upotrebljava u kontekstu korišćenja mobilnih aplikacija upotrebljava za situacije kada okom kamere vašeg telefona posmatrate okolinu oko vas a sam program prikazuje objekte koji se nalaze u vašem vidokrugu (program nadopunjuje realnost sa virtuelnim podacima koji predstavljaju korisne informacije). Ovaj vid prikaza postaje sve popularniji u svijetu i predstavlja fantastičan način otkrivanja informacija o stvarima koji vas okružuju. Scenario upotrebe aplikacija sa ovakvim mogućnostima je zaista veliki a jedan od njih bi mogao biti:

  • turista ste u nepoznatom gradu i želite da pronađete objekte određenog tipa koji se nalaze u vašoj bližoj ili daljoj okolini. Aplikacija sa ovim mogućnostima vam omogućava pregled objekata različitog tipa (hoteli, restorani, pozorišta, prodavnice, javni transport i slično) sa osnovnim podacima kao što su udaljenost i prosječni rejting objekta od strane korisnika. Nadalje, ukoliko želite, možete dobiti i detaljne informacije o svakom objektu koji je prikazan pomoću aplikacije kao što su radno vrijeme, kontakt telefon i način kako da dođete do željenog objekta.

OpenSource projekat kojeg možete koristiti za jednostavno kreiranje Windows Phone Augmented Reality aplikacija je GART (Geo Augmented Reality Toolkit). Alat omogućava postavljanje informacija nad objektima iz realnog prikaza onoga što vas okružuje. Jedino što je potrebno obezbijediti aplikaciji su podaci o geo koordinatama objekata (Latitudes i Longitudes). Podatke možete dobiti u okviru vaše aplikacije pomoću pretrage na netu putem Bing pretraživača, Wikipedije ili koristeći Flickr za fotografije ili da kreirate svoju vlastitu kolekciju sa podacima o objektima. Alat potom prikazuje podatke o objektima u odnosu na trenutni položaj korisnika aplikacije na mapi ili u 3D pogledu putem kamere na vašem telefonu sa prikazom korisnih informacija o objektima.

Dateljnije o GART biblioteci možete pronaći na adresi: http://gart.codeplex.com/

NokiaCityLens

Slika 8. Upotreba Augmented Reality aplikacije pomoću Nokia City Lens

Zaključak

Na kraju, kao poslednji korak prije postavljanja aplikacije na Microsoft Dev Store (Marketplace za Windows Phone aplikacije) potrebno je obavezno provjeriti ponašanje aplikacije za obije pozadine (Background): Dark i Light. Moguće je da određeni tekst ili objekti na strani vaše aplikacije uopšte neće biti ispravno prikazani (npr. bijela boja na bijeloj pozadini).

Pomoću prikazanih alata ćete sigurno biti efikasniji i moći ćete na brži i efikasniji način kreirati Windows Phone aplikacije koje će imati profesionalni izgled i  imaće dobre perfomanse.

About Spaso Lazarevic

Spaso Lazarevic is Senior Software Developer working with Microsoft technologies. Leader of .NET User Group Bijeljina, speaker at Microsoft events, writter and blogger. Microsoft MVP for Visual C#.
This entry was posted in IT Magazine, Windows Phone and tagged . Bookmark the permalink.

One Response to Alati koji vam mogu olakšati kreiranje Windows Phone aplikacija

  1. Pingback: Alati koji vam mogu olakšati kreiranje Windows Phone aplikacija - Spaso Lazarevic blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s