Deze presentatie heeft Fons Sonnemans tijdens de Lowlands Windows Phone Developer Day verzorgt. Hij heeft aan de hand van 12 uiteenlopende onderwerpen geleert apps beter te maken. Hierin komen technische onderwerpen, design en marketing aan bod. Een presentatie vol met do’s en dont’s voor je eigen apps

1. Twelve ways to make your apps suck less
Fons Sonnemans
@fonssonnemans
© Reflection IT BV. All rights reserved.

2. Fons Sonnemans
•Software Development Consultant
•Programming Languages
•Clipper, Smalltalk, Visual Basic, C#
•Platforms
•Windows Forms, ASP.NET (Web Forms, MVC), XAML (WPF, Silverlight, Windows Phone, Windows 8)
•Databases
•MS SQL Server, Oracle
•Role
•Trainer, Coach, Advisor, Architect, Designer, Developer
•More info: www.reflectionit.nl
2

3. My Phone Apps
•> 775K downloads
3

4. My Windows Apps
> 1.8 million downloads
4

5. Topics
1.Create Universal Apps
2.Start with a Design not Code
3.Design proper Visual Assets
4.Create custom themes
5.Be mobile
6.Reviews are important
7.Use Vectors and Fonts
8.Performance is key!
9.Localize your app
10.Use Data Binding and MVVM
11.Learn Blend
12.Cache your first page
5

6. 1. Create Universal Apps
•Be prepared for Windows 10
•Connect your Windows Phone app with the Windows 8 app
•Share Roaming data across platforms
•Share code
•Portable Class Libraries (PCL)
•Shared projects
•File linking
6

7. IsTextScaleFactorEnabled <StackPanel Margin="10"> <Button Content="Button 1" /> <TextBlock Text="Hello World 1" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 1" /> <Button Content="Button 2" IsTextScaleFactorEnabled="False" Margin="0,40,0,0" /> <TextBlock Text="Hello World 2" IsTextScaleFactorEnabled="False" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 2" IsTextScaleFactorEnabled="False" /> </StackPanel>
8

8. 2. Start with a Design not Code
http://design.windows.com
•Modern Design
•RTFM (Principles, Guidelines, UX Patterns)
•Vision and process
•Discover your best idea
•Identity
•Create a beautiful visual identity
•Gallery
•Learn (“steal”) from the best/competition
9

9. 3. Design proper Visual Assets
•Visual Assets
•Tiles, SplashScreen, Icons, etc
•All Scale Factors
•Windows 80, 100, 140, 180
•Phone 100, 140, 240
•Use vectors
•Expression Design (Free), Adobe Illustrator
10

10. 3. Design proper Visual Assets
•Expression Design Demo
11

11. 4. Create Custom Themes
12

12. 4. Create Custom Themes
•Windows
•C:Program Files (x86)Windows Kits8.1IncludeWinRTXamlDesignGeneric.xaml
•Windows Phone
•C:Program Files (x86)Windows Phone Kits8.1IncludeabiXamlDesignGeneric.xaml
•Use the ThemeManager of Dave Smits
•http://www.familie-smits.com/theming-in-a-universal- app
•Use HAMMER.Pants for Windows
•https://github.com/Code52/HAMMER
13

13. 5. Be Mobile
•HttpClient
•Resolve the correct type
•System.Net.Http.HttpClient is slightly different in the most basic use, and quite different when you get into advanced work.
•Always make sure you’re using Windows.Web.Http
•System.Net.Http shows up first
14

14. 5. Be Mobile
•Mobile devices are often connected to poor quality network connections
•Best chance of success in network data transfers achieved by:
•Keep data volumes as small as possible
•Use the most compact data serialization available (use JSON instead of XML)
•Avoid large data transfers
•Avoid transferring redundant data
•Design your protocol to only transfer precisely the data you need and no more

15. Network Awareness in your apps
•Making Decisions based on Data Connections
•Mobile apps shouldn’t diminish the user experience by trying to send or receive data in the absence of network connectivity
•Mobile apps should be intelligent about performing heavy data transfers only when the appropriate connectivity is available
•Use the NetworkInterfaceType object to detect network type and speed
•Subscribe to the NetworkChange event to detect when network state changes
Make your app aware of its networking environment and state!

16. 17
Network Information in Windows Runtime private bool IsOnWiFi() { ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile == null) return false; return InternetConnectionProfile.IsWlanConnectionProfile; } private bool IsConnectedtoDataRoaming() { bool isRoaming = false; ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null && internetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); isRoaming = cc.Roaming; // See if user is currently roaming } return isRoaming; } private void AddEventHandlers() { // NetworkStatusChanged fires when the network status changes for a connection NetworkInformation.NetworkStatusChanged += OnNetworkStatusChanged; }

17. What is Data Sense?
•Data Sense is a set of components designed to help:
•End users: understand and manage data consumption
•Mobile Operators: reduce cellular consumption & optimize connectivity
•3rd party developers and ISVs: Build smart data consuming applications
18

18. What Makes Up “Data Sense”?
The Data Sense platform
Data Sense (UI)
Browser Optimization Service
WiFi hotspot Mapping

19. Content Streaming Scenario - 1 of 2 ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null) { if (internetConnectionProfile.IsWlanConnectionProfile) { // connected on WiFi interface; double check it is not a metered WiFi hotspot ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } } else if (internetConnectionProfile.IsWwanConnectionProfile) { ...

20. 22
Content Streaming Scenario – 2 of 2 else if (InternetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = InternetConnectionProfile.GetConnectionCost(); // check the type of data plan - make sure user is not currently roaming if (!cc.Roaming) { if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } else if (NetworkCostType.Fixed == cc.NetworkCostType) { // make sure user not currently over limit or near limit if ((!cc.OverDataLimit) && (!cc.ApproachingDataLimit)) { // connect and start streaming content } } } }
Source: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/WIN-B326

21. 6. Reviews are important
23

22. 6. Reviews are important
24

23. 6. Reviews are important
25

24. 6. Reviews are important
26

25. 7. Use Vectors and Fonts
•Use Bitmaps for Images
•JPG for large photos
•PNG for perfect quality
•Scale 100, 140, 180
•Use Vectors and Fonts for “Icons”
•Use <Path data=“” /> for Vector
•Use FontIcon or TextBlock for Fonts
•AppBarButton supports FontIcon & PathIcon
27

26. Font
28

27. Vector
•ArtBoard 40x40
•Icon Max Width or Height 24
•Select All -> Export – XAML Silverlight 4 / WPF Canvas
•Open .xaml & copy Path

28. Demo <Page x:Class="VectorAndFontDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VectorAndFontDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar Background="#FFFFB900" IsOpen="True"> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="d" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <PathIcon Data="F1 M20.0017,8 C21.6588,8 23.0021,9.34333 23.0021,11.0004 C23.0021,12.111 22.3987,13.0807 21.5018,13.5995 L21.5018,27.3629 C23.9769,26.8976 26.155,25.2984 27.6868,23.0021 L25.7525,23.0021 L29.0029,16.5013 L32.0033,23.0021 L30.3772,23.0021 C28.8669,27.6635 24.7918,31.0032 20.0017,31.0032 C15.2115,31.0032 11.1364,27.6635 9.62615,23.0021 L8,23.0021 L11.0004,16.5013 L14.2508,23.0021 L12.3166,23.0021 C13.8483,25.2984 16.0263,26.8975 18.5014,27.3629 L18.5014,13.5994 C17.6046,13.0806 17.0013,12.111 17.0013,11.0004 C17.0013,9.34333 18.3446,8 20.0017,8 z M20.0017,10.0003 C19.4493,10.0003 19.0015,10.4481 19.0015,11.0004 C19.0015,11.5528 19.4493,12.0006 20.0017,12.0006 C20.554,12.0006 21.0018,11.5528 21.0018,11.0004 C21.0018,10.4481 20.554,10.0003 20.0017,10.0003 z" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Viewbox Height="200" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="c" /> </Viewbox> </Grid> </Page>
30

29. Links
•Vectors
•http://modernuiicons.com
•http://materialdesignicons.com/
•http://thenounproject.com
•http://www.thexamlproject.com
•http://www.syncfusion.com/downloads/metrostudio
•Fonts
•http://msdn.microsoft.com/en- us/library/windows/apps/jj841126.aspx
•http://www.geekchamp.com/icon-explorer/introduction
•http://www.fontello.com/
•http://fontastic.me

30. 8. Performance is Key
32

31. 9. Localize your app
•Offering your app in English only will only cover about 25% of Windows Phone customers, though it covers a larger percentage of tablets and PCs users. Adding Spanish, French, Mandarin, Russian and German increases coverage to more than 75% of the base.
http://blogs.windows.com/buildingapps/2014/09/29/windows-and-windows- phone-store-trends-september-2014-update/
33

32. 10. Use Data Binding and MVVM
•Motivations:
•Reduces complexity with Model to UI integration
•Separation of concerns
•Clear Designer-Developer separation
•Makes code more Unit testable
•Approach:
•Split the UI architecture into Model, View and View- Model
•Model: Represents the data
•View : UI defined declaratively in XAML
•View Model: Specialization of the Model that View uses for data binding

33. Model View ViewModel
View
(XAML UserControls + CodeBehind)
ViewModel
(State + Operations)
DataBinding
Commands
Events /
Messages
Model
("Data")
DataBinding

34. 11. Learn Blend
•Layout
•Animations
•Styling
•Templating
•Resources
•Data Binding
•Sample Data
•Visual States
•Behaviors
36

35. 12. Cache your first page public sealed partial class HubPage : Page { private readonly NavigationHelper navigationHelper; private readonly ObservableDictionary defaultViewModel = new ObservableDictionary(); private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources"); public HubPage() { this.InitializeComponent(); // Hub is only supported in Portrait orientation DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait; this.NavigationCacheMode = NavigationCacheMode.Required; this.navigationHelper = new NavigationHelper(this); this.navigationHelper.LoadState += this.NavigationHelper_LoadState; this.navigationHelper.SaveState += this.NavigationHelper_SaveState; }
37

36. @fonssonnemans
fons.sonnemans@reflectionit.nl
fonssonnemans
reflectionit.nl/blog
38

37. Copyright
•Copyright © by Reflection IT BV. All rights reserved.
•Some parts quote Microsoft public materials.
•This presentation, its workshops, labs and related materials may not be distributed or used in any form or manner without prior written permission by the author.
39