Aplicație Win 8 în 10 zile – #7 Online Leaderboard

Ieri am văzut cum ne logăm în aplicația noastră cu ajutorul Facebook și Twitter, azi o să facem ceva mai mult. Bazându-ne pe informațiile pe care le culegem din timpul logării o să stocăm HighScore-urile și o să postăm și pe Twitter/Facebook de câte ori avem un nou highscore.

Disclaimer: tutorialul de azi este foarte apropiat și inspirat de cel făcut de Nick Harris, evanghelist Microsoft, dar are câteva modificări pe parcurs.

Logica

Începem cu ziua de ieri, ieri noi ne-am logat în aplicație cu ajutorul Facebook / Twitter, avem un id unic pe care-l vom primi de la cele două rețele de socializare. O să am nevoie de o clasă Result care va pregăti obiectul pe care-l voi trimite la fiecare final de rundă către MobileServices împreună cu id-ul unic specific serviciului pe care l-am folosit pt logare. Azure o să verifice dacă id-ul este veritabil și abia după se va ocupa de preluarea datelor prin Javascrip, deserializarea lor și trimiterea lor într-o bază de date SQL.

Azure time

Întrăm în portalul Azure la MobileServices și căutăm serviciul creat de noi în ziua precedentă. Dăm click pe Data și creăm două tabele noi pe care le vom denumi Leaderboard și Result.

Dăm click pe tabelul Result, mergem la Script și căutăm blocul care se ocupă de introducerea datelor, Insert, ștergem ceea ce scrie acolo și introducem următoarele linii de cod:

Timpul pentru explicații: Toate datele mele se vor duce în tabelul Results, dar nu toate vor ajunge în tabelul Leaderboard. În primul rând primesc obiectul serializat pe care l-am primit de la utilizator împreună cu datele acestuia și codul unic (request) pentru confirmare.

Visual Studio time

Ok, am specificat că vom avea nevoie de o clasă Result (atenție! Microsoft au făcut modificări la modul cum trimitem obiecte în cloud, le notez cu “!” ):

(!) Specific înainte de numele clasei [DataContract] și, înainte de fiecare proprietate, [DataMember(Name=”XX”)], unde XX este forma sub care o să găsesc eu coloana în SQL.
Practic o să am nevoie de numele jucătorului, scorul lui, să văd dacă s-a făcut update la leaderboard și un id unic, (!) Id-ul trebuie să fie neapărat de forma string și nu mai este acceptat sub forma int.

În ziua a doua am avut metoda registerScore(), dar nu am completato decât cu MakeToast, azi o să introducem mai multă logică:

Am creat un obiect Result care are ca proprietăți numele utilizatorului și scorul pe care l-am obținut, le introduc în tabelul Result creat în Azure și navighez către noua pagină topscore.xaml pe care o vom crea imediat.

topscores.xaml este un basic page și are câteva elemente de care ne vom folosi. Vom adăuga în interiorul tagului :

XAML-ul se va ocupa de modul cum va arăta exact gridview-ul meu pe care-l voi introduce înainte de ultimul închis:

O să postez în viitor (Ianuarie 2014) un exemplu mai ușor de digerat decât acesta și o să explic atunci exact ce face fiecare proprietate pe care o vedeți în următorul cod. Până atunci, credeți și cercetați pe propria răspundere 🙂

Când ajung la pagina topscores.xaml în topscores.xaml.cs la metoda on navigated prind (așa cum am învățat în prima zi) parametrul e și îl trimit în metoda RefreshLeaderboard care arată cam așa:

După foarte mult trial and error am ajuns la următoarea concluzie: O să țin un Progressring pe ecranul aplicației cât timp se descarcă scorurile din Azure, în momentul în care scorul a fost luat și nu a durat mai mult de 5 secunde pentru asta ascund progress ring-ul și afișez GridView-ul meu populat cu informațiile din Cloud (top 5 rezultate). De-asemenea despre introducerea în grid dacă vreți o să intru în detalii când o să discut de template-ul gridView-ului într-un tutorial viitor.

By: Adrian Coman