Hvordan lage en vellykket WP7 applikasjon

1,014
-1

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,014
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • SpareBank 1 MobilbankPosten PakkesporingWordfeudVG SnarveiTelenor UtlandTelenor FakturaAvinor Flytider
  • Hvordan lage en vellykket WP7 applikasjon

    1. 1. 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
    2. 2. LITT OM MEG Jonas Follesø Scientist & Manager BEKK Trondheim Microsoft MVP Silverlight
    3. 3. AGENDA Metro Design Språk Implementering av Metro 3 måter å lage Live Tiles Testing og publisering Spørsmål
    4. 4. APPS VI HAR JOBBET MED
    5. 5. Metro design er viktig
    6. 6. 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!”
    7. 7. SLUTTBRUKERE LIKER METRO “Nyttig applikasjon, fint utseende også med Metro.” “Fungerer svært bra og ser delikat ut.”
    8. 8. SLUTTBRUKERE LIKER METRO “Meget ambisiøs og vel gjennomført app. Innholder alle tenkbare features og alt er pent og føles skikkelig solid.”
    9. 9. SLUTTBRUKERE LIKER METRO “Bra design. Oversiktlig app som gir rask tilgang til de viktigste banktjenestene. Farvel til telefonbank :-D”
    10. 10. “Etter å ha lekt oss litt med Mango noen dager, kan vi fastslå atMicrosoft har lykkes med å lage et virkelig brukervennligmobiloperativsystem som på mange områder overgår Apples iOS –samtidig som det er enklere og mer brukervennlig enn Android.”PC Worldhttp://www.idg.no/pcworld/tester/programvare/operativsystemer/article222108.ece?curPage=3
    11. 11. HVA ERMETRO?
    12. 12. PRINSIPPER VS SPRÅKThe Metro Design The Metro DesignPrinciples Languagethe pillars (usually abstract set of concrete userconcepts) that guide the interaction, visual design,creation of experiences for motion and application flowWindows Phone. elements and rules.
    13. 13. Hvordan viimplementerte Metro
    14. 14. POSTEN SPORING
    15. 15. SPAREBANK 1 MOBILBANK
    16. 16. TELENOR FAKTURA
    17. 17. WORDFEUD
    18. 18. AVINOR
    19. 19. 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
    20. 20. BenyttLive Tiles
    21. 21. 3 MÅTER Å IMPLEMENTERE LIVE TILES1. Secondary Tiles2. Live Tiles using Background Agents3. Live Tiles using Push Notifications
    22. 22. 3 WAYS TO IMPLEMENT LIVE TILES1. Secondary Tiles2. Live Tiles using Background Agents3. Live Tiles using Push Notifications
    23. 23. 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.
    24. 24. CREATING SECONDARY TILESprivate 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);}
    25. 25. LIVE TILES 1 – SECONDARY TILES • Mulig å dynamisk generere grafikken til tile på telefonen.
    26. 26. 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); }
    27. 27. DYNAMIC TILE GRAPHICS var data = new StandardTileData { Title = "Week Number", BackgroundImage = GenerateWeekNumberTile() };
    28. 28. 3 WAYS TO IMPLEMENT LIVE TILES1. Secondary Tiles2. Live Tiles using Background Agents3. Live Tiles using Push Notifications
    29. 29. 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.
    30. 30. 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
    31. 31. UPDATING PRIMARY TILE FROM BACKGROUND AGENTprotected 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();}
    32. 32. LIVE TILES 2 – UPDATING TILES USING BACKGROUND AGENTS • Kan og oppdatere sekundær tiles fra bakgrunnsagent.
    33. 33. 3 WAYS TO IMPLEMENT LIVE TILES1. Secondary Tiles2. Live Tiles using Background Agents3. Live Tiles using Push Notifications
    34. 34. WP7 PUSH NOTIFICATIONSYour WP Application Your Web Application Push Library 3 PUSH CLIENT Microsoft Push Notification Services
    35. 35. 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.
    36. 36. 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.
    37. 37. 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!”
    38. 38. Panorama & Pivot
    39. 39. PANORAMA VS PIVOTPivot Panorama• Effektiv • Omfattende• Fokus • Eksplorativ• Tilbakevendende og vane • Dynamisk• Samme type informasjon • Forskjellig informasjon i i hvert panel hvert panel
    40. 40. WORDFEUD PIVOT
    41. 41. AVINOR FLIGHTS PIVOT
    42. 42. Test tidlig & ofte
    43. 43. WORDFEUD TEST OG UTVIKLING 22. Nov Daglige bygg 23. Des 08. Jan 14. Jan 22. Jan 30. JanFørste commit delt via Dropbox Beta 1 Beta 2 Beta 3 Beta 4 & Lansering publisering som skjult app
    44. 44. Tips tiltesting
    45. 45. 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.
    46. 46. Oppsummering
    47. 47. OPPSUMMERINGUtnytt 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.
    48. 48. Spørsmål?

    ×