Erfaringer rundt hva som skal til for å lage en vellykket WP7 applikasjon.

2. HVORDAN LAGE EN VELLYKKET
WINDOWS PHONE 7 APP
Erfaringer fra 7 forskjellige apps
utviklet høsten 2011 og vinteren 2012
MVP Live 2012, Trondheim
Jonas Follesø
23/02/2012

3. LITT OM MEG
Jonas Follesø
Scientist & Manager BEKK Trondheim
Microsoft MVP Silverlight

4. AGENDA
Metro Design Språk
Implementering av Metro
3 måter å lage Live Tiles
Testing og publisering
Spørsmål

6. APPS VI HAR JOBBET MED

7. Metro design
er viktig

8. SLUTTBRUKERE LIKER METRO
“Great game. Love the looks, utilizing the
Metro UI to the max, very clean looking.”
“Mycket bra spel kul att se Metro tänk
även i ett sånt här spel.”
“Riktigt snyggt gjort med bra metro
tema”
“Nice game, great Metro UI. Thanks!”

9. SLUTTBRUKERE LIKER METRO
“Nyttig applikasjon, fint utseende også
med Metro.”
“Fungerer svært bra og ser delikat ut.”

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

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

12. “Etter å ha lekt oss litt med Mango noen dager, kan vi fastslå at
Microsoft har lykkes med å lage et virkelig brukervennlig
mobiloperativsystem som på mange områder overgår Apples iOS –
samtidig som det er enklere og mer brukervennlig enn Android.”
PC World
http://www.idg.no/pcworld/tester/programvare/operativsystemer/article222108.ece?curPage=3

13. HVA ER
METRO?

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

40. Hvordan vi
implementerte
Metro

41. POSTEN SPORING

42. SPAREBANK 1 MOBILBANK

43. TELENOR FAKTURA

44. WORDFEUD

45. AVINOR

46. BRUK THEME RESOURCES
<TextBlock Text="Large text"
Style="{StaticResource PhoneTextLargeStyle}" />
<TextBlock Text="Normal text"
Style="{StaticResource PhoneTextNormalStyle}" />
http://mindre.net/Article/windows_phone_7_theme_resources

48. Benytt
Live Tiles

49. 3 MÅTER Å IMPLEMENTERE LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

50. 3 WAYS TO IMPLEMENT LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

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

52. CREATING SECONDARY TILES
private void OnAddTileClick(object sender, RoutedEventArgs e)
{
var tileUri = new Uri("/WeekNumberPage", UriKind.Relative);
var data = new StandardTileData {
Title = "Week Number"
};
var tile = ShellTile.ActiveTiles.FirstOrDefault(
x => x.NavigationUri == tileUri);
if(tile == null) ShellTile.Create(tileUri, data);
else tile.Update(data);
}

53. LIVE TILES 1 – SECONDARY TILES
• Mulig å dynamisk generere
grafikken til tile på telefonen.

54. DYNAMIC TILE GRAPHICS
private Uri GenerateWeekNumberTile()
{
Rectangle background = CreateBackground();
TextBlock weekNumber = CreateWeekNumberTextBlock();
string tileImage = "/Shared/ShellContent/WeekNumber.jpg";
var isoStoreTileImage = "isostore:" + tileImage;
using (IsolatedStorageFile store =
IsolatedStorageFile.GetUserStoreForApplication())
{
var bitmap = new WriteableBitmap(173, 173);
bitmap.Render(background, new TranslateTransform());
bitmap.Render(weekNumber, new TranslateTransform {Y=32});
var stream = store.CreateFile(tileImage);
bitmap.Invalidate();
bitmap.SaveJpeg(stream, 173, 173, 0, 100);
stream.Close();
}
return new Uri(isoStoreTileImage, UriKind.Absolute);
}

55. DYNAMIC TILE GRAPHICS
var data = new StandardTileData {
Title = "Week Number",
BackgroundImage = GenerateWeekNumberTile()
};

56. 3 WAYS TO IMPLEMENT LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

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

58. BACKGROUND AGENTS
public abstract class BackgroundAgent
{
protected internal BackgroundAgent();
protected void NotifyComplete();
protected void Abort();
protected internal virtual void OnCancel();
}
app logic
agent instance
6 MB minne
25 sekunder kjøretid
app logic
UI instance

59. UPDATING PRIMARY TILE FROM BACKGROUND AGENT
protected override void OnInvoke(ScheduledTask task)
{
var data = new StandardTileData {
Title = "My App",
BackTitle = "Updated",
BackContent = "Something interesting..."
};
var tile = ShellTile.ActiveTiles.First();
if(tile != null) tile.Update(data);
NotifyComplete();
}

60. LIVE TILES 2 – UPDATING TILES USING BACKGROUND AGENTS
• Kan og oppdatere sekundær tiles
fra bakgrunnsagent.

61. 3 WAYS TO IMPLEMENT LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications

62. WP7 PUSH
NOTIFICATIONS
Your WP Application
Your Web
Application
Push Library
3
PUSH CLIENT
Microsoft
Push
Notification
Services

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

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

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

66. Panorama
& Pivot

69. PANORAMA VS PIVOT
Pivot Panorama
• Effektiv • Omfattende
• Fokus • Eksplorativ
• Tilbakevendende og vane • Dynamisk
• Samme type informasjon • Forskjellig informasjon i
i hvert panel hvert panel

70. WORDFEUD PIVOT

71. AVINOR FLIGHTS PIVOT

76. Test tidlig
& ofte

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

78. Tips til
testing

79. REMEMBER TO TEST:
• Mørkt og lyst theme.
• Flight Mode ON.
• Data Network OFF.
• GPS slått av. Sjekk og at brukeren kan deaktivere lokasjon i appen din.
• Trykk «Win»-knappen, så«Back»-knappen og sjekk resume.
• Vis progressbar når data lastes.
• Test med både Norsk og Engelsk språk.

80. Oppsummering

81. OPPSUMMERING
Utnytt mulighetene i Ta Live Tiles på alvor Test tidlig og ofte.
Metro – og husk at det og finn lure måter å
er lov å være kreativ. bruke disse.

82. Spørsmål?