store app -kehityksen aloittaminen

Store Apps -sovelluskehityksen aloittaminen

Heikki Raatikainen heikki.raatikainen@sovelto.fi

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

Windows 8

Windows 8 Windows 8 WinRT

3

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

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)

Windows 8 versiot ja Windows EcoSystem

Windows Ecosystem

Editions Products

• Windows 8 Pro

• All Editions

• Windows RT

• Windows 8 Enterprise

• Xbox

• Microsoft SkyDrive

• Windows Store

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

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

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

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

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

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

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

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

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

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

Store App - uusia tekniikoita

Sovelluksen elinkaari, käyttöliittymän moniajoa ei ole Tiles Notifications, Toast Charms: Share, Search Contracts Zoom, Semantic Zoom

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

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

Windows 8 touch language

Press and hold to learn Swipe to select Slide to drag Tap for primary action

Pinch to zoom Rotate to rotate

Swipe from edge for

system and app UI

Zoom ja Semantic zoom

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

• Zoom

Tile sekä Share, Search ja muut Charms:it

Tiles

Sharing

Searching in context

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

Local Updates

• Foreground-sovellus päivittää Tile:ä

• Esim: • Kohdalla oleva sivu, kuva jne. • Viimeksi downloadattua dataa

Running App Call Local Notification

API

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

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

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

8 - Gestures, Charms, contracts

• tulikin jo esiteltyä…

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

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)

Sovellus toimii sellaisenaan Koodia voi hyödyntää jossain määrin Osaaminen siirtyy – koodi ei Osaamista voi hyödyntää – koodia ei

Siirtyminen 7 8

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

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