MSCommunity sastanak: Universal Windows Platform + Adaptive UI [Objašnjen]

Monday, January 18, 2016


Prije svega bih želio naglasiti da ovaj blog post pišem kao kratki sadržaj, pomoć i priprema za predhodni MSCommunity sastanak F5 SQL/Dev Mostar grupe u Mostaru održan u petak 15.1.2016.godine, gdje sam održao predavanje na temu Universal Windows Platform + Adaptive UI.

Šta je Universal Windows Platform?

Jedan od noviteta je to da Windows 10 se može koristiti od Xboxa do malih IoT uređaja. Stoga jako koristan nam je i Universal Windows Platform koji je Microsoftova tehnologija za razvoj Aplikativnog softvera koji se može izvoditi na Desktop računarima, mobilnim smart uređajima, tabletima, Xbox-u uskoro i na HoloLens-u. Universal Windows Platform se prvi put pojavio sa Windows-om 8 u WinRT izdanju. Kada imamo ovaku situaciju postavlja se pitanje ako smo u mogućnosti da razvijamo App za Windows 10 to znači da se naša App može koristiti na svim platformama.

Glavna ideja je da vaše aplikacije nude isto iskustvo korištenja na svim Microsoft Windows uređajima, na različitim rezolucijama i na uređajima različitih procesorskih snaga.

U sklopu Universal Windows Platforme Microsoft vam nudi alate i API-je koji vam omogućavaju kreiranje aplikacija koje se izvršavaju "univerzalno" na predhodno nabrojanim uređajima. Najbolji i ujedno najzvažniji dio toga svega je da vi jednom pišete kod koji se bez ikakvih dodataka izvodi na svim uređajima. Uz alate koje nudi Microsoft u sklopu Universal Windows Platforme na svim uređajima aplikacija se izvršava bez ikakvih problema u performansama.

Sve UWP aplikacije se distirbuiraju putem AppX paketa, putem Windows Store-a koji vam nudi sigurnost i pouzdanost da će vaše aplikacije biti dostupne i updejtovane u najbržem mogućem vremenu.

Ključna riječ sa Universal Windows Platformu je "One" a to je:

  • Jedan Operativni sistem koji je jezgra za sve uređaje
  • Jedna App platforma na kojoj se aplikacije izvršavaju
  • Jedan Dev Centar, dashboard za upravljanje objavljenim aplikacijama
  • Jedan Store, globalni market za distribuciju i monetizaciju nasih aplikacija

Važno za napomenuti je da je samo jedan App Store koji pokriva sve uređaje tako da kada kreirate vašu app i distribuirate je putem tog store-a, na svim uređajima ćete moći izvršiti instalaciju sa jednog mjesta.

Šta je potrebno za kreiranje UWP Aplikacija?

Prije svega najbitnije je da posjedujete Windows 10 operativni sistem, od razvojnih okruženja preporučeno i najbolje je da to bude Visual Studio 2015, za studente i mala poduzentištva do 5 članova mogu da koriste Community verzija koja je potpuno free. Mogu se naravno koristiti i druge verzije Visual Studija, ali na predhodnim verzijama (2013, 2012 ...) to nije moguće. PC ili laptop moraju podržavati Hyper V tehnologiju virtualizacije za testiranje aplikacija na emulatorima. Hyper V nam nije toliko bitan u kreiranju ali jeste u testiranju naših App na različitim emulatorima.

Također jako bitna stvar je da moramo uključiti Developer mode na slijedeći način:

  • Settings -> Update and Security -> For developers -> Developer mode
Ako ovo uradimo, Visual Studio će nas opomenuti da prihvatimo ovu opciju za dalje razvijanje aplikacija.


Koji programski jezici se koriste?

Programski jezici za kreiranje Universal Windows Platform aplikacija su: C# i Visual Basic sa XAML-om, JavaScript sa HTML-om ili C++ sa DirectX-om. Velika prednost je ta da je moguće koristiti i implementirati komponente napisane u različitim jezicima bez ikakvih problema. Pa tako ako imamo UWP App napisanu u C# i XAML-u, ako iz nekog razloga trebamo bolje performanse možemo iskoristit neku našu mini "biblioteku" napisanu u C++ programskom jeziku i bez problema će raditi...

UWP aplikacije koriste Windows Runtime, nativni API ugrađen u operativnom sistemu. WinRT je implementiran u C++-su i podržava C#, Visual Basic, C++ i JavaScript.

Visual Studio Community 2015

Microsoft Visual Studio 2015 nudi templejte za svaki nabrojani programski jezik, tako da nemate potrebu za prevelikim podešavanjima, pored templejta važna pomoć je i distribucija na Windows Store izravno iz Visual Studija.

Adaptive UI Design

Bitno za naglasiti je razliku između Responsive i Adaptive design-a. U responzivnom dizajnu imamo pojavu da se elementi ponašaju zavisno od veličine ekrana, dok kod adaptivnog dizajna elementi se također prilagođavaju veličini ekrana kao i uređaju na kojem se nalazi, tj. ako naša App se izvršava na smartfonu, kada pređemo na desktop moramo biti svjesni da naš PC ne može obavljati telefonske pozive kao što je to smatfon mogao tako da imamo obavezu da taj dio isključimo kada naša app ide na desktop.

Adaptivni dizajn na dopušta da poredamo određene elemente po ekranu onako kako to nama odgovara tj. kako želimo da se ponaša na određenoj veličini ekrana i na određenim uređajima. A sve to radimo kako bismo korisniku pružili najbolji moguće iskustvo korištenja.

Dva načina kako to izvesti je sa:

- Visual States i Adaptive Triggers
- Specifičnim XAML fajlovima za specifične uređaje.

Jako dobar alat za to je Blend, Blend je jako moćan alat koji nam pomaže pri kreiranju UI-a i djeluje odvojeno od Visual Studija ali u potpunosti su kompaktibilni tj. jedan drugom su na pomoći. Bolje se snalazi u registrovanju različitih stanja i okidača kada kreiramo Adaptivni UI.

Šta su Visual State i Adaptivni Triggeri, oni nam dopuštaju da definišemo kako će se naša app i dizajn od app ponašati kada se upali jedan od trigera. To sve definišemo unutar XAML fajla...

Demo Adaptive UI moja mini App:

I na kraju evo kako izgleda moja mini App kreirana na sastanku, kao što se na slici i vidi na različitim veličinama ekrana izgled naše stranice se mjenja u zavisnosti od platofrme i veličine ekrana na kojoj se aplikacija koristi.

Ovo je bio moj kratki blog post, kao što sam i naveo na početku ... ovo je bio moj draft i priprema za prezentaciju na MS Community sastanku F5 SQL/Dev Mostar grupe u Mostaru. Pošto sam napisao i sastavio solidan text o ovoj temi odlučio sam i da objavim ovaj blog post.

Pozdrav! Almir Vuk | AV Development

You Might Also Like

0 comments