Most az általam készített kísérletből webszervízt csinálok, és felhasználnom azt egy Universal Windows Platform programban, majd kipróbálom – telefonon és asztali számítógépen is.

A már korábban megcsinált Balance scale kísérletet fogom felhasználni, amelyről itt írtam.
Röviden arról szól, hogy egy mérleg két karára változó távolságra tehetünk súlyokat, majd a program megpróbálja kitalálni, hogy merre fog hajlani a mérleg. Természtesen egy egyszerű számítással is megkaphatnánk a megoldást, de most a szemléltetés kedvéért ez is megteszi. A fent említett posztból meg lehet csinálni a kísérletet és a webszervízt, és a URL/API KEY beillesztésével működni kell majd a programmal, amit most megcsinálunk.

A program fejlesztéséhez a Visual Studiot használtam. Először egy új Universal Windows Platform projektet kell létrehozni, és nevet adni neki. Ha ezzel megvagyunk, a VS legenerálja a projekt szerkezetét:

• A References tárolja a külső források referenciáit
• Az Assets mappa tartalmazza képeket, és egyéb médiafájlokat
• Az App.xaml az alkalmazás leírója, és a hozzá tartozó C# kód indítja a programot
• A MainPage.xaml pedig a kezdőképernyő, ami jelenleg teljesen üres

Ha megnyitjuk a MainPage.xaml-t, akkor elkezdhetjük megvalósítani a kezelőfelületet. Bal oldalt a Toolbox-ot megnyitva be tudjuk a húzni a kellő dolgokat: címke, beviteli mező, töltés jelző, stb…

Alul látható a xaml kód, ami a felület leírója, ezt is lehet szerkeszteni, és a VS egyből mutatja a változásokat felette. Megcsináltam a kísérlethez kellő adatok bevitelét: 4db Slidert, illetve a hozzá tartozó feliratokat. Csináltam egy gombot, amivel majd lekérjük az eredményt, és alulra még egy töltés jelzőt tettem, ami alapértelmezetten nem látható. És természetesen van még egy láthatatlan mező, amibe majd beírjuk a kapott eredményt. Igény szerint lehet persze csinosítani a kinézetet, rengeteg lehetőség van (animációk, színek, elrednezések..), most igyekeztem minimális dolgot módosítani, mert nem ez lesz a lényeg.

Ha készen van a felület, akkor most meg kéne csinálni azt, hogy a gomb lenyomására kapcsolódjon a szervízünkhöz, és küldje el a kiválasztott adatokat, majd jelenítse meg a választ. A felhasználói felületen kétszer kattintva a gombra, a VS automatikusan létrehoz egy függvényt, amit a gomb lenyomásakor fog meghívni. Ebbe a függvénybe kell implementálnunk a kódot. Szerencsére egyszerűen, egy HTTP kéréssel meg tudjuk oldani a kommunikációt. Példányosítunk a HttpClient osztályt, majd a headerbe beállítjuk a kapott API kulcsot, hogy tudja a Studio, hogy illetékesek vagyunk, és nem más próbálja használni a munkánkat. Aztán aszinkron módon POST-olunk a Studio-ból kimásolt URL-re, a Content pedig egy json string lesz, ami megadja a paramétereket. Egy változóba lementjük a választ, majd ezt feldolgozzuk, és ez alapján véghezvisszük a felhasználói felületen a változásokat. Az alábbi képen látszik a teljes kód, a pirossal bekeretezett rész a lényeg, az adatok elküldése, és a válasz elkapása.

Ha megvagyunk, próbáljuk ki amit csináltunk! Az F5 gombbal lefordítja, és Debug módban elindítja a programot a VS. Állítsuk be a 4 értéket, majd nyomjuk meg a Send data gombot! Előjön a Windowsos töltő karika, majd amint megkapta a választ, eltűnik, és előjön az eredmény.

Próbáljuk ki telefonon is! A projektre jobb egérrel kattintva a Store > Create app packages… menüpont legenerálja a csomagot, amit fel tudunk telepíteni a telefonra is. (vagy USB-vel a gépre kötve csomagolás nélkül is telepíthetjük, de azt nem tudjuk másnak is megmutatni) 🙁
Amint elkészült, másoljuk át a projekt mappájából az AppPackages mappát a telefonunkra, és bökjünk az appx fájlra, ami feltelepíti az alkalmazásunkat.
Mivel ez egy fejlesztői változat, előfordulhat, hogy fel kell telepíteni a tanusítványunkat (.cer) és a függőségeket (Dependencies mappa tartalma). Ha minden jól ment, akkor megjelenik a program a listában, és el tudjuk indítani. Itt is szépen megjelenik, és működik.

Ha nincsen Windowsos telefonunk, akkor is ki lehet próbálni, a VS rendelkezik emulátorral, csak fent a Local Machine helyett ki kell választanunk egyet:A program teljes kódja elérhető a GitHub-on.