Presentasjon fra Oslo

1. Hvordan lage en vellykket Windows
Phone 7 APP
Erfaringer fra 7 forskjellige apps
utviklet høsten 2011 og vinteren 2012
Mobile Meetup Oslo
Jonas Follesø & Dan Robert Ekrem
28/03/2012

2. Om oss
Jonas Follesø
Scientist & Manager BEKK Trondheim
Microsoft MVP Silverlight
Dan Robert Ekrem
UX Designer, BEKK Oslo
Metro 8 Trainer

3. agenda
Bakgrunn
Metro Design Språk
Implementering av Metro
Tiles, testing og publisering
Spørsmål

4. Bakgrunn

6. Apps vi har jobbet med

7. 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”

8. HVA ER
METRO?

9. Prinsipper vs Språk
The Metro Design The Metro Design
Principles Language
the pillars (usually abstract set of concrete user
concepts) that guide the interaction, visual design,
creation of experiences for motion and application flow
Windows Phone. elements and rules.

10. INTERACTION AWARDS
http://awards.ixda.org/entry/2012/windows-phone-75-mango

20. Hvordan vi
implementerte
Metro

21. Posten Sporing

22. SpareBank 1 Mobilbank

23. Telenor Faktura

24. Wordfeud

25. Avinor

29. Verktøy

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

31. RIKTIG VERKTØY – BLEND + VISUAL STUDIO

32. 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.

33. Benytt
Live Tiles

34. 3 Måter å implementere Live Tiles
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

35. 3 ways to implement live tiles
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

36. 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.

37. Live Tiles 1 – Secondary Tiles
• Mulig å dynamisk generere
grafikken til tile på telefonen.

38. 3 ways to implement live tiles
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

39. 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.

40. Background Agents
app logic
agent instance
6 MB minne
25 sekunder kjøretid
app logic
UI instance

41. Live Tiles 2 – Updating Tiles using Background Agents
• Kan og oppdatere sekundær tiles
fra bakgrunnsagent.

42. 3 ways to implement live tiles
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

43. WP7
PUSH
NOTIFIC
Your WP
Applicatio
n
2 Hand
off
chan
ATIONS Your
n
el U Web
RL
Appli
catio
n
Push
Library
4 Push
Pu 3mess
PUSH 1 mes sh
O s age
CLIENT Ch pe ag
e
an n
Micro
l ne
soft
Push
Notifi
catio
n
Servi
ces

44. 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.

45. 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.

46. 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!”

47. Test tidlig
& ofte

48. Wordfeud test og utvikling
22. Nov Daglige bygg 23. Des 08. Jan 14. Jan 22. Jan 30. Jan
Første commit delt via Dropbox Beta 1 Beta 2 Beta 3 Beta 4 & Lansering
publisering
som skjult app

49. Framtiden?

53. Oppsummering

54. Oppsummering – WP7 og Metro design
Karakteristikk Hvordan lykkes
Lett, font, typografi, Ny struktur og presentasjon av
bevegelse/animasjon, fokus på innhold og data
innhold og digitalt
Klare oversette “hurtig,
Tiles – mer enn gjenvendende og praktisk” med
forventningsstyring “lek, underholdning og fryd for
øyet”?
Teknisk implementasjon
Pass på – totalfølelse og avveiing!
Test
Utforsk og utfordre!