Start Conference i razvoj Metro aplikacija

Kao fotograf, osećam dužnost da prvo pomenem Vukašina Jeremića koji je bio fotograf na ovom događaju, i čije sam fotografije upotrebio u tekstu.

Start Conference, događaj koji je prethodnih nekoliko nedelja grandiozno najavljivan, najzad je održan ovog vikenda na Fakultetu organizacionih nauka. Za neupućene, konferencija se zapravo sastojala iz tri dela — radionica, sâme konferencije (predavanja) i takmičenja — i verujem da su sve njene komponente zadovoljile očekivanja organizatora i učesnika, pritom opravdavši gore pomenuto grandiozno najavljivanje. S obzirom da je konferencija organizovana po prvi put, i da je trajala (bukvalno) dva dana bez prestanka, za organizatore koji su verovatno spavali i manje od takmičara imam samo reči hvale.

Kao što sam već napomenuo u prethodnom tekstu, studenti iz organizacije FONIS, koji su idejni tvorci i organizatori ovog događaja, i koje poznajem već neko vreme zahvaljujući događijama “Blogeri studentima” i “Kompanije studentima”, su me pozvali da održim predavanje/prezentaciju o svojoj praksi u Facebooku i iskustvima sa praksama uopšte. Ovo je došlo kao veoma zgodna tema, pošto već nekoliko meseci planiram da napišem tekst pod nazivom “Od srednje škole do Silicijumske doline” — u ovom slučaju sam doduše pričao na temu “Od fakulteta do Silicijumske doline”, pošto zaista nije bilo smisla da govorim ljudima šta je trebalo da rade u srednjoj školi :) Dakle, svojevrsni transkript predavanja će usledeti kada se zaista nakanim da napišem taj tekst.

Drugi deo konferencije u kojem sam odlučio da uzmem učešće, i koji je glavni razlog za pisanje ovog teksta, jeste takmičenje u razvoju Windows 8 Metro aplikacija. Sa dvojicom kolega sa fakulteta napravio sam tim koji ranije nije imao nikakvog iskustva u razvoju Windows 8 aplikacija, ali smo zato imali raznovrsno iskustvo za koje smo mislili da će nam biti dovoljno.

Ispostavilo se da to i jeste bio slučaj. Iako smo dosta vremena proveli pokušavajući da razumemo razne aspekte Windows 8 Metro aplikacija, tokom druge polovine takmičenja smo se zahuktali, i napravili aplikaciju kojom smo bili (tj. i dalje jesmo) veoma zadovoljni. Obraćajući pažnju na stvari koje se boduju, ispunili smo većinu uslova, i tako smo u konkurenciji od 8 timova osvojili drugo mesto. Borba za top 3 je bila veoma tesna (195, 198 i 205 poena), ali je prva nagrada u svakom slučaju otišla u dobre ruke — Lenovo tablet su osvojili naši dobri prijatelji Vladimir Dimić, Vlado Pajić (administrator sajta dubstep.rs koji su i inkorporirali u svoju aplikaciju) i Boris Perović.

Da bih ispoštovao prvenstveno tehničku prirodu ovog bloga, ostatak teksta ću posvetiti razvoju Metro aplikacija i našim iskustvima koja smo stekli tokom dvadeset i četiri sata, koliko je trajalo takmičenje.

Tema takmičenja

Neposredno pred početak takmičenja objavljena je i tema aplikacije — rešavanje nekog problema iz okruženja. Tema je “podrazumevala društveno-odgovornu aplikaciju koja direktno rešava problem korisnika”. Nakon nešto više od sat vremena napornog istraživanja, fokusirali smo se na nekoliko problema prisutnih u Srbiji. Jedan od njih, problem pasa lutalica, smo odbacili, pošto je nošenje desktop računara i zvučnika radi emitovanja visokofrekventnih zvukova koji bi rasterali pse lutalice krajnje nepraktično. Šalu na stranu, ideja ipak nije bilo u izobilju, tako da smo završili sa tri ideje: problem gradskog prevoza, problem parkinga, i problem nezaposlenosti. Prve dve ideje smo ubrzo odbacili, pošto nismo uspeli da nađemo dobar slučaj korišćenja gde bi takva aplikacija bila korisna na desktopu ili tabletu, već pretežno na mobilnim uređajima. I tako smo ostali sa problemom nezaposlenosti.

Kao što sam već rekao, mi smo se prvenstveno fokusirali na funkcionalnost aplikacije, pa smo nakon prezentacija rešenja drugih timova videli ozbiljnu konkurenciju što se tiče ideje. Moj favorit je bila aplikacija Genus koja se bavila problemom doniranja krvi (i na kraju osvojila treće mesto), dok su se druge aplikacije bavile problemima zlonamernih web lokacija, podizanja društvene svesti, sitnim problemima pojedinaca, kao i gde izaći u provod.

Osnovna implementacija

Način na koji smo se mi odlučili da pomognemo korisniku da reši problem (svoje) nezaposlenosti jeste da mu olakšamo potragu za poslom. Srećom, živimo u doba Interneta, pa je ova pretraga znatno olakšana sajtovima na koje se kače razni konkursi, gde je moguće i prijaviti se za iste. Mi smo otišli korak dalje, i zamislili aplikaciju koja će agregirati podatke sa više ovakvih sajtova, pritom izvlačeći korisne informacije i prikazivati ih na intuitivan i jasan način — bez ostatka interfejsa sajta, a posebno bez reklama i ostalih elemenata koje ometaju vršenje osnovne funkcije.

Osnovni problem naše implementacije bio je kako dovući podatke sa sajtova. Kako se time bavi backend aplikacije, ovaj problem nije bio specifičan za Windows 8, pa smo ga rešili dobrim starim parsiranjem HTML stranica (uz pomoć regularnih izraza). Implementirali smo 3 sajta, i izvlačili informacije poput naziva konkursa (tj. radnog mesta), firme, roka, grada itd. Na zahtev korisnika smo prikazivali i tekst konkursa, ali smo omogućili i prikaz samog konkursna na originalnoj web stranici, kao i link do stranice za prijavljivanje — sve u okviru aplikacije.

Metro “dizajn”

U duhu takmičenja, trudili smo se da aplikacija što više prati Metro dizajn. Zbog toga se ona svela na jedan prikaz podeljen na dva dela:

1. Deo sa listom poslova
2. Deo sa prikazom posla

Za prikaz liste korišćen je ListView, dok je prikaz detalja realizovan TextBlock-ovima smeštenim u StackPanel. Pored toga smo imali i (još jednu jednostavnu) stranu za pretragu, koja se oslanjala na GridView, kao i “popup” sa podešavanjima, koji je koristio StackPanel-e, TextBlock-ove i dva ListView-a. Pored ovoga, tu se nalazio i jedan jednostavan logo, koji je po potrebi zamenjivan ProgressRing-om, tokom učitavanja podataka sa Interneta. Radi bolje predstave, prilažem nekoliko screenshotova.

Integracija sa Windowsom 8

Jedan od aspekata kojem smo tokom razvoja naše aplikacije posvetili najviše pažnje jeste integracija sa Windowsom 8, tj. iskorišćavanje raznih opcija koje on nudi. Prva od tih opcija koju bih pomenuo jeste upotreba charm-ova u sopstvenoj aplikaciji.

Charmovi su onih pet ikonica koja se nalaze u “taskbaru” sa desne strane desktopa — Search, Share, Start, Device i Settings — i specifične su po tome što mogu da se integrišu sa svakom aplikacijom i da olakšaju njeno korišćenje. Mi smo u našoj aplikaciji našli za shodno da implementiramo Share (za deljenje zanimljivih konkursa), Search (za pretragu konkursa) i Settings (za biranje sajtova i kategorija koji se pretražuju). Međutim, iako je ovo jedan od boljih aduta Windowsa 8, nisu se toliko potrudili da olakšaju njihovu implementaciju, pa je potrebno iskucati dosta kôda da bi se sve lepo implementiralo.

Settings charm, recimo, ne omogućava direktnu implementaciju podešavanja u sidebar, već samo dodavanje linka koji dalje poziva neki metod u okviru aplikacije. Nakon toga je metod zadužen da, kako zna i ume, prikaže podešavanja i barata prozorom/kontrolom u kojem su ta podešavanja prikazana. Dakle, integracija sa operativnim sistemom se svodi na dodavanje tog linka i vezivanja metode za njega. Tačnije:

public MainPage()
{
    this.InitializeComponent();
    SettingsPane.GetForCurrentView().CommandsRequested += commandsRequested;
}

void mySettings(IUICommand command)
{
    // Metod koji se poziva nakon otvaranja dodatog linka
}

void commandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs)
{
    UICommandInvokedHandler handler = new UICommandInvokedHandler(mySettings);

    // Pravljenje linka i povezivanje sa metodom

    SettingsCommand generalSettings = new SettingsCommand("generalSettings", "Podešavanja", handler);

    // Dodavanje u Settings charm

    eventArgs.Request.ApplicationCommands.Add(generalSettings);
}

Search charm se isto svodi na ručno dodavanje kôda, ali je sâmo povezivanje sa charmom automatizovano dodavanjem Search Contract-a u okviru aplikacije. Ovo će napraviti i stranicu za prikazivanje rezultata, ali bez logike za pretragu. Stranica koja se na taj način pravi ima dve bitne metode – LoadState u kojoj se formiraju rezultati pretrage, i Filter_SelectionChanged gde se implementiraju filteri (tj. kategorisanje rezultata). U LoadState-u je kôdu dostupan tekst koji je korisnik uneo, i potrebno je postaviti vrednosti određenim promenljivama da bi se rezultati prikazali:

// Lista objekata koji predstavljaju filtere
// Ovi objekti su instanca internet klase Filter
this.DefaultViewModel["Filters"] = listaFiltera;

// Boolean promenljiva koja određuje da li treba prikazati filtere
this.DefaultViewModel["ShowFilters"] = prikazatiFiltere;

// Lista objekata koji predstavljaju rezultate
this.DefaultViewModel["Results"] = rezultati;

Poslednji charm koji smo implementirali, Share charm, je bio najjednostavniji za implementaciju, jer je imao najbolje objašnjenje, i to nas je prijatno iznenadilo. Pritom, moguće je share-ovati sadržaj u više različitih oblika, kao što je na onoj stranici i objašnjeno. Mi smo koristili samo naslov konkursa, i ovo je bila sva potrebna logika:

DataTransferManager dtm = DataTransferManager.GetForCurrentView();

// Dodavanje metoda koji podešava parametre za deljenje
dtm.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.shareLinkHandler);

private void shareLinkHandler(DataTransferManager sender, DataRequestedEventArgs e)
{
    // Podešavanje parametara

    DataRequest request = e.Request;
    request.Data.Properties.Title = tekstZaSahre;
    request.Data.SetUri(linkZaShare);
}

Osim charm-ova, Windows takođe nudi i sinhronizaciju između različitih računara na kojima je korisnik ulogovan — pod uslovom da je ulogovan sa Windows Live nalogom. Podešavanja koja smo mi odlučili da čuvamo na ovaj način su sajtovi i kategorije koje je korisnik izabrao za pretragu, pod logičnom pretpostavkom da će u većini slučajeva želeti da pretražuje iste kategorije. Ovo je izvedeno upotrebom roaming settings-a, koji omogućavaju aplikaciji da sačuva podešavanja u cloud-u. Upotreba je jako jednostavna, i svodi se na korišćenje asocijativne mape RoamingSettings, kako se podacima i pristupa

Windows.Storage.ApplicationData.Current.RoamingSettings.Values[“ItemsPerPage”] = podatak;

Da bismo što bolje pokazali naše poznavanje Windowsa 8 (ili, u ovom slučaju, snalažljivost kod guglanja), u aplikaciju smo uključili i app bar. U pitanju je deo aplikacije koji se pojavljuje na vrhu/na dnu pritiskom na desni taster miša i, logično, služi za smeštanje opcija koje bi se kod običnih aplikacija nalazile u context meniju. Za ovo nije potrebna nikakva posebna logika, već je dovoljno “stilizovati” app bar XAMLom, kao i napisati odgovarajući C# kôd.

Najzad, i to u poslednjim satima takmičenja, uspeli smo da implementiramo i live tile, odnosno dinamičku ikonicu programa na Start delu Windowsa (ne znam ni kako bih nazvao taj deo). Ukoliko ikada budete pravili Windows 8 aplikaciju, i ako bude imalo smisla, obavezno uključite live tile — bez toga, Start se ni po čemu ne razlikuje od desktopa, pa onda ni sâm Windows 8 koncept nema smisla. U našem slučaju, ikonica (tj. tile) je prikazivala naslove konkursa, i za to smo koristili biblioteku NotificationsExtensions. Ona omogućava jednostavno kreiranje live tile-ova, toast notifikacija i badge-eva, a uputstvo za upotrebu se može naći ovde.

Neostvarene ideje

Pored svega što smo uspeli da implementiramo, mnogo toga je ostalo samo ideja na tabli. Na primer, prva sledeća stvar koju smo planirali da implementiramo jeste integracija sa SkyDrive-om koja bi korisniku omogućila da čuva svoja bitna dokumenta, kao što je CV, u cloud-u. Sledeća ideja, koja je zapravo bila pokretač prethodne, jeste bila da se proces prijavljivanja za poslove ne obavlja preko sajtova, već da bude jednostavnije implementiran u sâmu aplikaciju. Na ovaj način bi se izbegla konfuzna navigacija po sajtovima, a u kombinaciji sa SkyDrive-om korisnik ne bi morao svaki put da dodaje CV, već bi se to vršilo automatski. Za lenje korisnike hteli smo da ubacimo i generisanje CVa i motivacionog pisma, a na osnovu podataka koje bi korisnik uneo, i koji bi se takođe čuvali u cloud-u.

Druga stvar koju smo hteli da unapredimo jeste pretraga, i to dodavanjem opcija kao što su “pretraga u krugu od N kilometara”, gde bi kao početna lokacija mogla da se koristi određena adresa/grad, ali i trenutna lokacija korisnika.

Last but not least, razmišljali smo se o pravljenju centralizovanog web servisa koji bi čuvao parsirane podatke, što bi ubrzalo rad aplikacije, kako zbog dovlačenja manje količine podataka, tako i zbog izbacivanja parsisranja web stranica.

Krajnji utisci

Kada se sve sabere, sva trojica smo bili prezadovoljni. Sa ne toliko iskustva uspeli smo da razvijemo aplikaciju za koju zaista mislimo da olakšava neke stvari, a da pritom posle 24 sata razvoja sve mogućnosti budu u potpunosti funkcionalne (što je na takmičenju, nažalost, bila retkost). Jedina stvar koja nas je zaista sputala jeste izbor obične teme, jer nismo uspeli da postignemo određeni “wow efekat” tokom prezentacije koji bi nam za uzvrat sigurno doneo više bodova. Međutim, nikako nismo obeshrabreni — pokušaje nastavljamo na ovonedeljnom Nordeusovom hackathonu, ali i na sledećem Start Conference hackathonu, ukoliko se organizuje. A nema razloga da se to ne desi.