hvordan lage en vellykket wp7 applikasjon
DESCRIPTION
Erfaringer rundt hva som skal til for å lage en vellykket WP7 applikasjon.TRANSCRIPT
HVORDAN LAGE EN VELLYKKET WINDOWS
PHONE 7 APP
Erfaringer fra 7 forskjellige appsutviklet høsten 2011 og vinteren 2012
MVP Live 2012, Trondheim
Jonas Follesø
23/02/2012
LITT OM MEG
Scientist & Manager BEKK Trondheim
Microsoft MVP Silverlight
Jonas Follesø
AGENDA
Metro Design Språk
Implementering av Metro
3 måter å lage Live Tiles
Testing og publisering
Spørsmål
APPS VI HAR JOBBET MED
Metro designer viktig
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!”
SLUTTBRUKERE LIKER METRO
“Nyttig applikasjon, fint utseende også med Metro.”
“Fungerer svært bra og ser delikat ut.”
SLUTTBRUKERE LIKER METRO
“Meget ambisiøs og vel gjennomført app. Innholder alle tenkbare features og alt er pent og føles skikkelig solid.”
SLUTTBRUKERE LIKER METRO
“Bra design. Oversiktlig app som gir rask tilgang til de viktigste banktjenestene. Farvel til telefonbank :-D”
“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 Worldhttp://www.idg.no/pcworld/tester/programvare/operativsystemer/article222108.ece?curPage=3
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.
Hvordan viimplementerte
Metro
POSTEN SPORING
SPAREBANK 1 MOBILBANK
TELENOR FAKTURA
WORDFEUD
AVINOR
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
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
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications
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.
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);}
LIVE TILES 1 – SECONDARY TILES
• Mulig å dynamisk generere grafikken til tile på telefonen.
DYNAMIC TILE GRAPHICSprivate 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);}
DYNAMIC TILE GRAPHICS
var data = new StandardTileData { Title = "Week Number", BackgroundImage = GenerateWeekNumberTile()};
3 WAYS TO IMPLEMENT LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications
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
public abstract class BackgroundAgent{ protected internal BackgroundAgent(); protected void NotifyComplete(); protected void Abort(); protected internal virtual void OnCancel();}
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();}
LIVE TILES 2 – UPDATING TILES USING BACKGROUND AGENTS
• Kan og oppdatere sekundær tiles fra bakgrunnsagent.
3 WAYS TO IMPLEMENT LIVE TILES
1. Secondary Tiles
2. Live Tiles using Background Agents
3. Live Tiles using Push Notifications
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!”
Panorama& Pivot
PANORAMA VS PIVOT
Pivot
• Effektiv
• Fokus
• Tilbakevendende og vane
• Samme type informasjon i hvert panel
Panorama
• Omfattende
• Eksplorativ
• Dynamisk
• Forskjellig informasjon i hvert panel
WORDFEUD PIVOT
AVINOR FLIGHTS PIVOT
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
Tips tiltesting
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.
Oppsummering
OPPSUMMERING
Utnytt mulighetene i Metro – og husk at det er lov å være kreativ.
Ta Live Tiles på alvor og finn lure måter å bruke disse.
Test tidlig og ofte.
Spørsmål?