Sovelto Aamiaisseminaari 3.5.2013 Heikki Raatikainen

1. Store Apps -sovelluskehityksen
aloittaminen
Heikki Raatikainen
heikki.raatikainen@sovelto.fi

2. Käyttöliittymämurros
• Käyttöliittymät ovat murrosvaiheessa aina, muutossykli kuitenkin
kiihtyy joka asettaa lisävaatimuksia designereille, koodaajille ja
myös liiketoiminnoista vastaaville.
• merkkipohjaiset järjestelmät
• graafinen (ikkunoituva) käyttöliittymä
• Web-sovellukset
• javascript ja Ajax
• mobiilisovellukset (ja pienet selaimet)
• mobiili ja kosketusnäytöt
• kosketusnäytöt (tablet/slate)
• Millä tekniikalla sovellukset kannattaa tehdä?
• Client-sovellus, ilmaisuvoimaisin mutta vain rajoitettu laite/KJ-valikoima
• Web-sovellus, toimii kaikkialla (jos selain tukee) mutta perinteisesti
rajoitetummat ominaisuudet
• Edellisten yhdistelmä?
2

3. Windows 8
Windows 8
Windows 8 WinRT
3

4. Kaksi käyttöjärjestelmää samassa paketissa
Sininen puoli
• Käytetään nimeä: Desktop
• Perinteinen Windows
• Kaikki nykyiset Windows 7 –sovellukset toimivat
• Osassa tablet-koneita (ARM-prosessoriset tabletit) sinistä puolta ei ole
Vihreä puoli
• Käytetään nimiä: Store Apps, Modern UI Style, WinRT
• Uusi, sormilla käytettävä maailma
• Toki näppäimistö ja hiiri toimii, mutta...
• Mikään nykyinen sovellus ei täällä toimi, kaikki on tehtävä uudelleen

5. Mitä uutta Windows 8:ssa Vihreä puoli
• Kaikki sovellukset ovat uusia
• Sovellukset käyttävät WinRT API:a
• Käyttöliittymämalli ja –ohjeisto on Design guidance for Windows
Store apps (aikaisemmin Modern UI Style ja Metro UI)
• Sovellusta voi ajaa vain full screenillä
• Toinen sovellus voi olla ankkuroitu "tiileksi"
• Käyttöliittymän moniajoa ei ole, mutta korvaavia tekniikoita kyllä
• Ei kehyksiä, ei valikoita – eikä varsinkaan Ribbonia
• Sovelluksia voi asentaa (vain) Windows Store:n kautta
• WinRT-sovellus ei voi tehdä pahaa
• Sama fiilis kuin puhelinsovelluksilla – helppo ja turvallinen asentaa, helppo
ottaa pois
• IE 10 (eri versio kuin sinisellä puolella)

6. Windows 8 versiot ja Windows EcoSystem
Windows Ecosystem
EditionsProducts
• Windows 8 Pro
• All Editions
• Windows RT
• Windows 8 Enterprise
• Xbox
• Microsoft SkyDrive
• Windows Store

7. Store App –ohjelmointi, vaadittavat taidot
1. Välineet: Visual Studio 2012
2. WinRT API
3. UI-kuvauskieli ja ohjelmointikieli: XAML/C# tai HTML5/Javascript
4. Rinnakkaisuus
5. Kommunikointimenetelmät
6. Pilvi ja se mahdollisuudet
7. Design Guidelines
8. Gestures, Charms, contracts
9. App Manifest – sovelluksen ominaisuudet
10. Validointi/sertifiointi eli kauppapaikalle siirto
7

8. 1 - Välineet
• Windows 8 käyttöjärjestelmä
• Visual Studio 2012
• Windows 8 SDK
• Developer License (voimassa 30pv, ilmainen, VS:n kautta, vain
paikallinen kehitys/testaus)
• Windows Store developer account (maksullinen, vaatimus
sovelluksen julkaisemiseen Windows Storeen)
https://appdev.microsoft.com/StorePortals/en-us/Account/Signup/Start/
• Windows App Certification Kit
• ja mahdollisesti muutama muu työkalu tarpeen mukaan:
http://msdn.microsoft.com/en-us/windows/apps/br229516.aspx
• Kehitys/testaaminen ei vaadi välttämättä kosketusnäytöllistä
konetta, voidaan simuloida emulaattorissa
8

9. 2 - WinRT API != .NET 4.5
• .NET –osaamisesta on paikoitellen hyötyä mutta sen perusteella ei
pysty tekemään yhtään WinRT-sovellusta
• WinRT API on huomattavasti suppeampi ja erilainen
• XAML on lähellä WPFää, muuten paljon opeteltavaa
• WinRT API Reference:
http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx
9
Lukumäärä WinRT .NET 4.5
assembly 15 120
nimiavaruus 60 400
tyyppi ~1k ~14k
Propertyt/metodit/tapahtumat ~10k ~110k

10. 3 - UI-kuvauskieli ja ohjelmointikieli
• Store Apps sovelluksien ohjelmointimallit
• XAML ja C# (tai VB)
• XAML ja C++
• HTML5 ja JavaScript
• Käytettävä ohjelmointikieli on tietenkin hallittava mahdollisimman
hyvin
• XAML, lähellä WPF/Silverlight –versioita, täysin erilainen kuin
Windows Forms
• MVVM Design Pattern (Model-View-ViewModel)
• HTML5/JS ei ole sama kuin perinteisten web-sovelluksen HTML/JS
10

11. Windows 8 rakenne
11
Windows 8 Platform Architecture
Win32
Desktop Apps
HTML C/C++
C# /
VB.NET
Internet
Explorer
.Net CLR/
Silverlight
Windows Store apps
C++/
CX
C# /
VB.NET Javascript
Comm. &
Data
XAML
HTML
CSS
WinRT APIs
Graphics &
Media
Devices
&
Others

12. 4 – Rinnakkaisuus
• WinRT APIssa on kaikki palvelut jotka voivat kestää 'pitkään'
toteutettu asynkronisesti
• Sovelluksen pitää pystyä reagoimaan kaikkiin käyttäjän
toimintoihin joten käyttöliittymäsäie ei voi odottaa mitään pitkään
• Metodit ovat …Async –päätteisiä ja palauttavat Taskin
• C#:n async ja await –varatut sanat on syytä osata, sekä käyttö että
niiden takana oleva toiminnallisuus
• Edellisen ymmärtämiseksi pitää osata myös Task- ja Task<T> -
luokkien käyttö
12

13. 5 – Kommunikointimenetelmät ja palvelut
• Store App ei pääse suoraan kytkeytymään yrityksen tietokantaan
 väliin on rakennettava palvelukerros, esimerkiksi:
• Web Service
• WCF
• Web Api
• Samalla kannattaa miettiä miten datan tarjoaa käytettäväksi
sovellukselle, tehdäänkö mahdollisimman geneerinen ja
yleiskäyttöinen palvelu ja hyvin rajoitettu vain Store App-
sovellusta varten
13

14. 6 - Pilvi
• Azure ja muut pilvipalvelut tarjoavat lisää mahdollisuuksia Store
Appsien käyttöön
• Tietokanta Azuressa
• Palvelu sovelluksen käyttöön
• Azure Storage
• Skaalautuu helpommin ja paremmin kuin omat palvelimet
• Luotettavuus
14

15. Esityksessä on nyt kalvon mittainen väliaika
Miksikö?
… koska kohta tulee niin tärkeää asiaa ettei kaikki edes
ymmärrä että se on tärkeää!
15

16. 7 – Desing Guidelines
• Windows-käyttöliittymän tyyli/suunnitteliopas on ollut olemassa
ainakin 20 vuotta, valitettavan harva on vain lukenut sitä
• Store Apps –sovelluskehitys muuttaa tilanteen koska Design
Guidelinesiin on käytännössä pakko tutustua
http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx
• Sovelluksen tehdään tiettyjen pelisääntöjen mukaan
• Sovellukset hyödyntävät KJ:n palveluita eri tavalla kuin
aikaisemmin, esimerkiksi tiedoston valinta tai tiedon jakaminen
• Homma alkaa jo olemassa oleviin sovelluksiin tutustumalla,
Storesta löytyy ilmaiseksi hyviä esimerkkejä (ja valitettavasti
huonojakin ja kehnosti toimivia)
16

17. Store App - uusia tekniikoita
Sovelluksen elinkaari, käyttöliittymän moniajoa ei ole
Tiles
Notifications, Toast
Charms: Share, Search
Contracts
Zoom, Semantic Zoom

18. Milloin sovellus on suorituksessa
Käyttäjä valitsee foreground-
sovelluksen
System hallitsee
sovelluksen elinkaaren
Käyttäjä käynnistää
useita sovelluksia
Käyttäjä hallitsee
sovelluksen elinkaaren

19. Prosessin suoritustilat
Running
App
Suspended
App
suspending
Terminated
App
Low
Memory
Code gets to run
No code
runs
App not running
resuming
App gets 5s to
handle suspend
App is not
notified before
termination
Apps are notified
when they have
been resumed
User
Launches
App
Splash
screen

20. Windows 8 touch language
Press and hold to learn Swipe to selectSlide to dragTap for primary action
Pinch to zoom Rotate to rotate
Swipe from edge for
system and app UI

21. Zoom ja Semantic zoom
• Semantic Zoom ei ole pikseleiden suurentamista vaan datan
suurentamista, siirtyminen kahden erilaisen näkymän välillä
• Zoom

22. Tile sekä Share, Search ja muut Charms:it
Tiles
Sharing
Searching in context

23. Live Tiles, sovellus on suorituksessa 'aina'
• Sovellus voi esittää informaatiota, vaikka ei ole foreground:ssa
• Sovellus voi "hälyttää" käyttäjän
• Kaksi mekanismia päivittämiseen
• Local
• Push Notifications

24. Local Updates
• Foreground-sovellus päivittää Tile:ä
• Esim:
• Kohdalla oleva sivu, kuva jne.
• Viimeksi downloadattua dataa
Running App
Call Local Notification
API

25. Push Notifications
• "elävä Start screen"
• Päivittää Tile:ä vaikka sovellus ei
ole suorituksessa
App Cloud Service
Windows Push Notification
Service (WNS)
HTTP
POST
Notification
Delivered

26. Toast Notifications
• Välitön huomautus käyttäjälle
• Käyttäjä voi kieltää sovelluksen Toastit
• Käyttäjä voi siirtyä välittömästi sovelluksen haluttuun kohtaan
• Toastit voivat olla lähtöisin sovelluksen lokaalista tilasta tai
notifikaatiosta

27. Share ja Search
• Share
• Clipboard++
• Helppo, käyttäjän ohjaama tapa jakaa dataa sovellusten välillä
• Search
• Käyttöjärjestelmän palvelu
• Sovelluksen julkaisevat, millaista dataa ne kykenevät etsimään
• Devices
• tulostin yms laitteet
• Settings
• sovelluskohtaiset astetukset aina samasta kohtaa kaikissa sovelluksissa

28. 8 - Gestures, Charms, contracts
• tulikin jo esiteltyä…

29. 9 – App Manifest
• VS 2012 valikko: Project | Store | Edit App Manifest
• Application UI
• Nimi, kuvausteksti, tuetut laitteen asennot, logot ja Tile-kuvat
• Capabilities
• mitä ominaisuuksia sovellus käyttää, esim. Internet, Location, WebCam
• Declarations
• esim File Open Picker, Search
• Packaging
• sertifikaatit, julkaisija, versionumero

30. 10 – Upload Package
• Sovellus testataan koodin osalta 'perinteisesti'
• Windows App Certification Kit
• Create App Package
• Upload Package (siirto Storeen tarkistettavaksi ja tämä vaatii
Developer Accountin)

31. Sovellus toimii sellaisenaan
Koodia voi hyödyntää jossain määrin
Osaaminen siirtyy – koodi ei
Osaamista voi hyödyntää – koodia ei
Siirtyminen 7  8

32. Modern UI edut ja haitat operatiivisissa sovelluksissa
+ Data luku ja selailu toimii todella nätisti
+ Esittäminen ja vaikuttaminen
• Dashboard
+ Mobiilisuus ja kosketuskäyttö
• Satunnaiseen ja tilapäiseen käyttöön myös data-entry -sovelluksissa
- Datan syöttäminen
- Window, ei Windows
• toki on telakointi, mutta sekin on vain "isompi tile"
• Multimonitor-tuen rajoitukset
- Työvälineistön käyttö sormella
• Toolbar ja Ribbon –kontrollien puute, keksittävä omia ratkaisuja
32

33. Store App, haasteita ja mahdollisuuksia
• Kuinka saada monimutkainen, laaja käyttöliittymä
yksinkertaistettua sormikäyttöiseksi?
• Jolla kuitenkin voi tehdä "kaikki mitä aikaisemminkin"
• Joka sopii aloittelijan lisäksi myös tehokäyttäjälle
• Mietittävä useimmat asiat uudelleen
• Vaatii huimasti käyttöliittymän suunnittelua
• Sovellus ohjaa käyttäjää
• Eikä niin, että käyttäjälle tarjotaan kaikki työkalut
• Näyttää minimalistisen valikoiman toimintoja
• Mahdollisesti pettymyksiä mutta myös aivan uusia
mahdollisuuksia
• Toisaalta: voi olla vain kyse vain pienistä viilauksista, esim. Outlook 2013
sormikäyttö
33