Hvordan lage en vellykket Windows Phone 7 App

Hvordan lage en vellykket Windows Phone 7 APP

Erfaringer fra 7 forskjellige appsutviklet høsten 2011 og vinteren 2012

Mobile Meetup Oslo

Jonas Follesø & Dan Robert Ekrem

28/03/2012

Om oss

Scientist & Manager BEKK Trondheim

Microsoft MVP Silverlight

Jonas Follesø

UX Designer, BEKK Oslo

Metro 8 Trainer

Dan Robert Ekrem

agenda

Bakgrunn

Metro Design Språk

Implementering av Metro

Tiles, testing og publisering

Spørsmål

Bakgrunn

Apps vi har jobbet med

Sluttbrukere liker Metro

“Nyttig applikasjon, fint utseende også med Metro.”

“Fungerer svært bra og ser delikat ut.”

“Meget ambisiøs og vel gjennomført app. Innholder alle tenkbare features og alt er pent og føles skikkelig solid.”

“Bra design. Oversiktlig app som gir rask tilgang til de viktigste banktjenestene. Farvel til telefonbank :-D”

HVA ER METRO?

Prinsipper vs Språk

The Metro Design Principles

the pillars (usually abstract concepts) that guide the creation of experiences for Windows Phone.

The Metro Design Language

set of concrete user interaction, visual design, motion and application flow elements and rules.

INTERACTION AWARDShttp://awards.ixda.org/entry/2012/windows-phone-75-mango

Hvordan viimplementerte

Metro

Posten Sporing

SpareBank 1 Mobilbank

Telenor Faktura

Wordfeud

Avinor

Verktøy

C# SOM SPRÅK, XNA FOR GAMES, SILVERLIGHT FOR APPS

RIKTIG VERKTØY – BLEND + VISUAL STUDIO

TILGANG TIL ALLE API’ENE VI TRENGTE

• Tilgang til adressebok (SpareBank 1 Venneregnskap, Wordfeud)

• SMS (SpareBank 1 Venneregnskap)

• Lokasjon (Telenor Utland, Posten Sporing)

• Push Notifications (Wordfeud)

• Kamera (VG Snarvei, Wordfeud)

• SQLite Database (Posten Sporing)

• ... Og alt av «basis» funksjonalitet som nettverk, web tjenester, filaksess osv.

BenyttLive Tiles

3 Måter å implementere Live Tiles

1. Secondary Tiles

2. Live Tiles using Background Agents

3. Live Tiles using Push Notifications

3 ways to implement live tiles

1. Secondary Tiles



Live Tiles 1 – Secondary Tiles

• Mulig for en app å ha flere tiles på startskjermen.

• Kan lenke til et bestemt område i appen.

• Kan oppdateres programatisk til å vise ny informasjon.

Live Tiles 1 – Secondary Tiles

• Mulig å dynamisk generere grafikken til tile på telefonen.


1. Secondary Tiles



Live Tiles 2 – Updating Tiles using Background Agents

• Mulig å oppdatere både primær og sekundær tile fra kode.

• Kan bruke en Background Agent til å oppdatere en Live Tile.

Background Agents

app logic

UI instance

app logic

agent instance

6 MB minne25 sekunder kjøretid

Live Tiles 2 – Updating Tiles using Background Agents

• Kan og oppdatere sekundær tiles fra bakgrunnsagent.


1. Secondary Tiles



WP7 PUSH NOTIFICATIONS

Microsoft Push

Notification

Services

Your Web Applicatio

n

PUSH CLIENT

Push Library

Your WP Application

1Open Channel

2 Hand off channel

URL

3 Pushmessage

4Push

message

Tile Notification Payload

<?xml version="1.0" encoding="utf-8"?><wp:Notification xmlns:wp="WPNotification"> <wp:Tile> <wp:BackgroundImage>Background.jpg</wp:BackgroundImage> <wp:Count>3</wp:Count> <wp:Title>Title</wp:Title> <wp:BackBackgroundImage>BackBackground.jpg</wp:BackBackgroundImage> <wp:BackTitle>Back Title</wp:BackTitle> <wp:BackContent>Back Content</wp:BackContent> </wp:Tile></wp:Notification>

• XML pushes til telefonen for å oppdatere Tile.

• Støtte for både eksterne og lokale URL-er for bilder.

Live Tiles 3 – Using Push Notifications

• Standard tile.

• Tile med antall aktive spill og indikasjon om ulest melding.

• Profilbilde og navn på motstander på baksiden av tile, i tillegg til informasjon om siste trekk.

Sluttbrukere elsker Live Tiles

“Love this game! Awesome with the live tile.”

“Dejligt tidsfordriv spil og cool det kom lidt tidligere end forventet. Udnytter live tiles godt”

“Fungerer perfekt, og udnyttelsen af 'live tile' og 'notification' er lige i skabet.”

“Love it! It runs great, has a nice interface and the live tile and push are excellent!”

Test tidlig& ofte

Wordfeud test og utvikling

30. JanLansering

22. Nov Første commit

23. DesBeta 1

08. JanBeta 2

14. JanBeta 3

22. JanBeta 4 &

publiseringsom skjult app

Daglige byggdelt via Dropbox

Framtiden?

Oppsummering

Oppsummering – WP7 og Metro design

Karakteristikk

Lett, font, typografi, bevegelse/animasjon, fokus på innhold og digitalt

Tiles – mer enn forventningsstyring

Teknisk implementasjon

Test

Hvordan lykkes

Ny struktur og presentasjon av innhold og data

Klare oversette “hurtig, gjenvendende og praktisk” med “lek, underholdning og fryd for øyet”?

Pass på – totalfølelse og avveiing!

Utforsk og utfordre!

Technology

Hvordan lage en vellykket Windows Phone 7 App