Developing and Deploying Windows 10 Apps
79
Developing and Deploying Windows 10 Apps Fons Sonnemans Reflection IT @fonssonneman s www.storeappsug.nl @StoreAppsUG
-
Upload
fons-sonnemans -
Category
Technology
-
view
2.597 -
download
0
Transcript of Developing and Deploying Windows 10 Apps
Developing and Deploying Windows 10 Apps
Fons Sonnemans Reflection IT
@fonssonnemans
www.storeappsug.nl @StoreAppsUG
Topics• Developing Windows 10 Apps• Universal Windows Apps• Blend 2015• What’s new in XAML• Adaptive UI
• Break
• Deploying Windows 10 Apps
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 & 10)
• Databases• MS SQL Server, Oracle
• Role• Trainer, Coach, Advisor, Architect, Designer, App Developer
• More info: www.reflectionit.nl
Universal Windows AppsIntroducing the Universal Windows Platform (UWP)
Easy for users to get & stay current
Unified core and app platform
The convergence journey
Windows Phone 7.5
Windows Phone 8Windows Phone 8.1
Windows 8
Xbox One
Windows on Devices
Xbox 360
Windows 8.1
Windows 10
ConvergedOS kernel
Convergedapp model
Phone Small Tablet2-in-1s
(Tablet or Laptop)Desktops
& All-in-OnesPhablet Large TabletClassic Laptop
Xbox IoTSurface Hub Holographic
Windows 10
Multiple device families
PC XBoxMobile Surface Hub
HoloLensDevices +IoT
Universal Windows Apps
One Store +One Dev Center
Reuse Existing Code
One SDK + Tooling
Adaptive User Interface
NaturalUser Inputs
One Universal Windows Platform
Universal Windows Platform• A single API surface• A guaranteed API surface• The same on all devices
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Universal Windows Platform• One Operating System• One Windows core for all devices
• One App Platform• Apps run across every family
• One Dev Center• Single submission flow and dashboard
• One Store • Global reach, local monetization
Consumers, Business & Education
Adaptive code• A compatible binary across devices• Universal API with device-specific implementation
• Light up our app with capabilities• Testing for capabilities and namespaces
UAP
Windows Core Windows Core Windows Core Windows Core
UAP UAP UAP
Desktop Mobile Xbox More…
Adaptive codePlatform extensions (capabilities)
Platform extensions (capabilities)• Device-specific API• Family-specific capabilities• Compatible across devices• Unique update cadence
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Windows App
Phoneextension
Xboxextension
Desktopextension
Test capabilities at runtime• Use Adaptive Code to light-up your app on specific
devices
var api = "Windows.Phone.UI.Input.HardwareButtons";if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api)){
Windows.Phone.UI.Input.HardwareButtons.CameraPressed += CameraButtonPressed;}
Blend 2015What’s new
Blend 2015• Rebuilt from the ground up using VS technologies• IntelliSense, GoTo Definition, Peek, Debugging, Window Layouts,
Reloading, Customizing
• File reload experiences when switching between VS and Blend
• Inconsistent shell & project system experiences with VS• Git and TFS• Expand/collapse of project nodes
• Performance and scalability of large solutions
Blend 2015
Live Visual Tree - UI Debugging for XAML• Visual tree inspection and manipulation• Live tracking of tree and property changes• Fully integrated into debugging
• Upcoming• Serializing edits back into source• Edit-n-continue• Data debugging visualizations
Live Visual Tree - UI Debugging for XAML
What’s new in XAMLNew Universal ControlsNew PropertiesOther Changes
24
The Border control is “Dead”• Panels• New properties in Win10 makes ‘Border’ obsolete
<StackPanel Orientation="Horizontal" BorderBrush="#FF0B77FD" BorderThickness="2" Padding="5"> <Button Content="Button1" FontSize="30" /> <Button Content="Button2" FontSize="30" Margin="5,0" /> <Button Content="Button3" FontSize="30" /></StackPanel>
New Properties in Win10makes ‘Border’ obsolete
25
Nested StackPanels – the old way<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal" Margin="0,0,0,12"> <TextBlock Text="Username" FontSize="26.667" Width="240" TextAlignment="Right" Margin="0,0,20,0"/> <TextBox FontSize="26.667" Width="300"/> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,12"> <TextBlock Text="Password" Margin="0,0,20,0" FontSize="26.667" Width="240" TextAlignment="Right"/> <PasswordBox Margin="0" FontSize="26.667" Width="300"/> </StackPanel> <Button Content="Login" HorizontalAlignment="Left" Margin="260,0,0,0" FontSize="26.667"/></StackPanel>
26
RelativePanel• Decrease Tree size<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="labelUsername" Text="Username" RelativePanel.LeftOf="inputUsername" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" />
<TextBox x:Name="inputUsername" RelativePanel.AlignRightWithPanel="True" Width="300" FontSize="26.667" />
<TextBlock x:Name="labelPassword“ Text="Password" RelativePanel.LeftOf="inputPassword" RelativePanel.AlignVerticalCenterWith="inputPassword" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" />
<PasswordBox x:Name="inputPassword" RelativePanel.Below="inputUsername" RelativePanel.AlignRightWithPanel="True" Width="300" Margin="0,10" FontSize="26.667" />
<Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
27
RelativePanel• Vertical layout<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="labelUsername“ Text="Username“ Margin="0,0,20,0" FontSize="26.667" /> <TextBox x:Name="inputUsername" RelativePanel.Below="labelUsername" Width="300" Margin="0,0,0,10" FontSize="26.667" /> <TextBlock x:Name="labelPassword" Text="Password" RelativePanel.Below="inputUsername" Margin="0,0,20,0" FontSize="26.667" /> <PasswordBox x:Name="inputPassword" RelativePanel.Below="labelPassword" Width="300" Margin="0,0,0,10" FontSize="26.667" /> <Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
28
Adaptive UI• Responsive Design
29
Adaptive UI<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="labelUsername" Text="Username" RelativePanel.LeftOf="inputUsername" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" /> <TextBox x:Name="inputUsername" RelativePanel.AlignRightWithPanel="True" Width="300" FontSize="26.667" /> <TextBlock x:Name="labelPassword“ Text="Password" RelativePanel.LeftOf="inputPassword" RelativePanel.AlignVerticalCenterWith="inputPassword" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" /> <PasswordBox x:Name="inputPassword" RelativePanel.AlignRightWithPanel="True“ RelativePanel.Below="inputUsername" Margin="0,10" Width="300" FontSize="26.667" /> <Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="labelUsername“ Text="Username“ Margin="0,0,20,0" FontSize="26.667" /> <TextBox x:Name="inputUsername" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="labelUsername" Margin="0,0,0,10" Width="300" FontSize="26.667" /> <TextBlock x:Name="labelPassword" Text="Password" RelativePanel.Below="inputUsername" Margin="0,0,20,0" FontSize="26.667" /> <PasswordBox x:Name="inputPassword" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="labelPassword" Margin="0,0,0,10" Width="300" FontSize="26.667" /> <Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
30
Adaptive UI<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="labelUsername" Text="Username" RelativePanel.LeftOf="inputUsername" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" /> <TextBox x:Name="inputUsername" RelativePanel.AlignRightWithPanel="True" Width="300" FontSize="26.667" /> <TextBlock x:Name="labelPassword“ Text="Password" RelativePanel.LeftOf="inputPassword" RelativePanel.AlignVerticalCenterWith="inputPassword" TextAlignment="Right" Margin="0,0,20,0" FontSize="26.667" /> <PasswordBox x:Name="inputPassword" RelativePanel.AlignRightWithPanel="True“ RelativePanel.Below="inputUsername" Margin="0,10" Width="300" FontSize="26.667" /> <Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
<RelativePanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="labelUsername“ Text="Username“ Margin="0,0,20,0" FontSize="26.667" /> <TextBox x:Name="inputUsername" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="labelUsername" Margin="0,0,0,10" Width="300" FontSize="26.667" /> <TextBlock x:Name="labelPassword" Text="Password" RelativePanel.Below="inputUsername" Margin="0,0,20,0" FontSize="26.667" /> <PasswordBox x:Name="inputPassword" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="labelPassword" Margin="0,0,0,10" Width="300" FontSize="26.667" /> <Button x:Name="buttonLogin" Content="Login" RelativePanel.Below="inputPassword" RelativePanel.AlignLeftWith="inputPassword" FontSize="26.667" /></RelativePanel>
31
Visual States – Setters & StateTriggers
32
Visual States – Setters & StateTriggers<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="VisualStateGroup"> <VisualState x:Name="Horizontal"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="600" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="labelUsername.(RelativePanel.LeftOf)" Value="inputUsername" /> <Setter Target="labelUsername.(TextBlock.TextAlignment)" Value="Right" />
<Setter Target="inputUsername.(RelativePanel.Below)" Value="" /> <Setter Target="inputUsername.(FrameworkElement.Margin)" Value="0" />
<Setter Target="labelPassword.(RelativePanel.Below)" Value="" /> <Setter Target="labelPassword.(RelativePanel.LeftOf)" Value="inputPassword" /> <Setter Target="labelPassword.(RelativePanel.AlignVerticalCenterWith)" Value="inputPassword" /> <Setter Target="labelPassword.(TextBlock.TextAlignment)" Value="Right" />
<Setter Target="inputPassword.(RelativePanel.Below)" Value="inputUsername" /> <Setter Target="inputPassword.(FrameworkElement.Margin)" Value="0,10" /> </VisualState.Setters> </VisualState> </VisualStateGroup></VisualStateManager.VisualStateGroups>
33
WindowsStateTriggers
34
WindowsStateTriggers
35
Adaptive design
Phone (portrait)
Tablet (landscape) / Desktop
36
Tailored design
Phone (portrait)
Tablet (landscape) / Desktop
37
DeviceFamily specific Content• Pages• UserControl
s• Images• Resources
http://igrali.com/2015/08/02/three-ways-to-set-specific-devicefamily-xaml-views-in-uwp/
Deploying Windows 10 apps
Fons Sonnemans Reflection IT
@fonssonnemans
www.storeappsug.nl @StoreAppsUG
39
Topics• How to deploy your app to the Store?• How to get rich from app development?• How to write a successful app?
40
How to deploy your app to the Store?1. Register as an app developer https://
dev.windows.com/en-us/programs/join
• No yearly renewals any more2. Create App Packages3. Submit your app to the Store
41
Create App Packages
42
Create App Packages
44
How to get rich from app development?
45
Ways to become “Rich”• Write an app for a client
• Write an app and publish it in a Store
• Write an app and sell it
• Affiliate marketing
46
Write an app for a client• Price• Time & Material• Fixed Price • Price for every download
• Find projects on AppGoeroes • http://www.appgoeroes.nl/
47
Write an app and publish it in a Store• Which platform• iOS, Android, Microsoft, ?
• Which device• Phone, Tablet, PC/Laptop, XBox, HoloLens, Watch, Car, ?
• Price• Paid • Free
49
Paid Apps• Apple & Google • 30% commission
• Microsoft• 30% commission • 20% after you pass $25.000 revenue
• Choose Price• From $0.99 to $999,-
50
Free Apps• 90% of all installed apps are free
• Income• Ads• Trial (= Paid)• In-app purchases
51
Ads• iAd (Apple)• AdMob (Google)• PubCenter (Microsoft)• Others: AdFonic, AdDuplex, InMobi, Smaato, etc
• Show ads for your other apps• Rotate ad providers using Ad Mediation
• Use in-app purcharse to remove ads
52
Windows Dev Center (replaces PubCenter)• https://dev.windows.com/en-us/monetize/ads
<UI:AdControl ErrorOccurred="ad160_ErrorOccurred" UseStaticAnchor="True" Height="600" Width="160" ApplicationId="7ab712c7-7510-ba9e" AdUnitId="60025155" />
53
Ad Sizes
54
Free with Trial• 70x more downloads• 10% conversion rate• 7x higher sales!• Explain the trial in the store description
55
In-app purchases• IAP enables you to sell digital goods in your apps
and games
%Of top grossing iOS apps use
in-app purchase -- Business Insider
$ In-App revenue in 2011,
expected >$ in 2016 - eMarketer
93 1B4B
56
In-app purchases• IAP enables you to sell digital goods in your apps
and games
57
What can you sell?• Game items (swords, levels, characters)• Functionality (more features, new graphics, maps, levels)• Accelerated gameplay (unlock items, powerups)• eBooks and eMagazines• Digital images, music and videos• Virtual Currency that can be shared across all your apps (gold,
tokens, gems)• Postcards from photos taken on the phone• A DVD of a video captured and edited on the phone• Digital services (backup data to cloud, rent-a-map)
• Donations
58
Windows Dev Center - IAP
59
In-app purchases• Code samples• Product purchases
• https://msdn.microsoft.com/en-us/library/windows/apps/mt219684.aspx
• Consumable in-app product purchases• https://
msdn.microsoft.com/en-us/library/windows/apps/mt219683.aspx
60
In-app purchases
61
Covers
62
Write an app and sell it
63
Affiliate marketing • Krijg een commissie over de
opbrengst die een andere partij verdient via je app (1% - 8%)
• Zanox/M4N: Zalando, KPN, Centraal Beheer
• Bol.com Partnerprogramma: Boeken, DVDs, etc.
How to write a successful app?
64
65
How to write a successful app?• Create A Great Product • The best apps only do one thing, but they do it very, very
well. • It’s important that the app is original, improves on
another app, solves a problem or entertains. • If the app is good, everything that follows will be easier.
66
How to write a successful app?• Built In-Virality• Incorporate some viral mechanism into the core
functionality of the app, so each user that enjoys the app can potentially attract a network of new users. It means the app is better or more engaging when users invite friends to use it.
67
How to write a successful app?• Design• We live in a visual society. With the app store competition
growing daily, having good code and a great feature set isn’t enough. How your app looks matters
69
How to write a successful app?• Development• Innovate• Analytics and Event Tracking
• Microsoft Application Insight, Google Analytics, ?• Updates• Localize the app
70
How to write a successful app?• Presentation & Marketing
• App Store • Title
• http://channel9.msdn.com/Blogs/DevRadio/Microsoft-DevRadio-Part-1-A-Developers-Guide-to-Marketing-Your-App-Naming-Your-App
• Text• Pictures (Logo & Screenshots)• Keywords• Category
• http://blogs.windows.com/windows/b/appbuilder/archive/2014/02/27/windows-store-trends-feb-2014-update.aspx
• Get More Ratings• Social Integration• Spread the word
• Website, Facebook fan page, Twitter Channel, YouTube movies• Analyze Statistics
71
Search: Title + Keywords
72
Category – Game vs Education
73
Get More Ratings
74
Analyze Reviews & Send Response
75
Analyze Statistics - Application Insights
76
Analyze Statistics - Application Insights
77
Analyze Statistics - Application Insights• Upgrade NuGet Packages
78
Application Insights – TrackEvent()
79
Promote your Apps
Recap & Questions
81
Lessons Learned• A good Design is essential• Writing an app is “easy” and fun• Promoting an app is very difficult• Effort & Budget
Promotion
40%Development
40%Design
20%
82
@fonssonnemans [email protected] fonssonnemans reflectionit.nl/blog
