Mobile First Cloud First

A blog by Geert van der Cruijsen on Apps, Cloud & ALM

Tag: UWP

Session videos to watch from Build 2017 for Mobile developers

It’s been 2 weeks since we had a great week at Build 2017 in Seattle. In the weeks after Build all recorded sessions came online on Channel 9. I’ve created a list of all things relevant for (Xamarin) mobile developers ranging from the new Xamarin announcements that made the headlines to some other sessions that you might have missed but can be relevant for mobile developers.

build

Lets start with the basics:

Keynotes of day 1 & 2

Although the first day didn’t have that much mobile stuff in it it did a good job on displaying where Microsoft is aiming for in the future. AI is a big part in this and AI can also be big on Mobile so it might still inspire you to build great new innovations. The Second day was the day of Windows and also contained all the mobile stuff.

https://channel9.msdn.com/Events/Build/2017/KEY01 & https://channel9.msdn.com/Events/Build/2017/KEY02

20170510_080708

“With great power comes great responsibility – Satya Nadella –  build 2017”

 

Xamarin

Xamarin had a bunch of sessions where they announced new things and showed their roadmap.

Xamarin: The future of mobile app development

When i first looked at the Build sessions i was about to skip this session. Sure James + Miguel are great presenters so that’s almost worth to watch but i expected this to be some Xamarin introduction. Luckily Miguel mentioned that this wasn’t the case so i was there. In this session Miguel explains what Microsoft is trying to achieve for mobile developers and they show all the new cool tools & bits for developers. a must watch! i especially like the bit where they demo the live player and the fastlane integration.

https://channel9.msdn.com/Events/Build/2017/B8103

 

Visual Studio for Mac

20170510_152836

During the keynote Visual Studio for Mac was already announced but in this session Miguel and Joseph go through more of the details of Visual studio for the Mac and what the future for this IDE will look like.  Joseph and Miguel were clearly having fun on stage. Bunch of Hackers!

https://channel9.msdn.com/Events/Build/2017/B8095

20170510_160818

 

What’s new in Xamarin.Forms

The third and last session held by Xamarin folks was about Xamarin Forms. Nobody less than Jason Smith explains about what is to come in Xamarin Forms 3.0 such as performance improvements,  and the FlexLayout which is an awesome feature for building apps across multiple device sizes. Some other things Jason mentioned were css like styling, one time binding and improvements in the listview

https://channel9.msdn.com/Events/Build/2017/B8099

 

Mobile Center & Visual Studio

Mobile center is a new product that together with VSTS should cover most devops teams in a full devops solution for mobile developers. Here are the key sessions to watch regarding mobile center:

Visual Studio Mobile Center: Ship mobile apps faster

The major session by the Mobile Center team is a must watch if you are thinking about using mobile center.  Thomas Dohmke and Keith Ballinger explain all the new features of mobile center like UWP support, Push notifications and store deployments

https://channel9.msdn.com/Events/Build/2017/B8072

 

Visual Studio Mobile Center and Visual Studio Team Services: Better together for your Mobile DevOps

This session by Simana Pasat explains what mobile center does and how this fits together with VSTS.

https://channel9.msdn.com/Events/Build/2017/T6079

 

General C# & .Net

Build is not only about mobile development. There are several other sessions that are not specific for mobile developers but can be really useful for mobile developers since we still code in C# and .Net right?

20170510_114637

Three Runtimes, one standard… .NET Standard: All in Visual Studio 2017

Scott Hanselman and Scott Hunter gave a great presentation on .Net Standard and .Net core. important changes coming to .Net in the coming year. If you’re not up to date with what .Net standard is all about this session has your covered. Next to that the 2 Scotts are just generally funny so worth a watch even if you’re already an expert on .Net Core and .Net Standard 2.0

https://channel9.msdn.com/Events/Build/2017/B8001

 

The future of C#

This session is a classic Build session that Mads and Dustin do every year. When i read the session abstract it made me laugh: “We’re Back!” it stated as this is a Build classic i remembered back from when i was at Build in 2012. This year they showed all the new features of C# 7 but also the road ahead of C# 7.1, 7.2 and C# 8!!

https://channel9.msdn.com/Events/Build/2017/B8104

 

SignalR .NET Core: Realtime cross-platform open web communication

Damian Edwards and David Fowler explain the future of SignalR. SignalR was already a way of building real time communication between several devices but this was always a bit unreliable and wonky, especially on Mobile devices. With SignalR Core they are focussing on a complete rebuild from the ground up and looks really promising. I think this will be used a lot after it’s GA somewhere later this year

https://channel9.msdn.com/Events/Build/2017/B8078

 

Cognitive Services

Cognitive services and AI were a major topic at build.  Here are some videos (next to the keynote) that might inspire you to use cognitive services in your apps

Computer vision made easy: From pre-trained models to Custom Vision, Microsoft Cognitive Services has you covered

Computer vision is a super cool topic and it’s so easy to implement. In this session Anna Roth shows you the possibilities of cognitive services related to computer vision

https://channel9.msdn.com/Events/Build/2017/B8020

 

Using Microsoft Cognitive Services to bring the power of speech recognition to your apps

Next to computer vision speech recognition is another cognitive service that really blows my mind how far we’ve come with technology in the past few years. Watch this session for everything about speech recognition in your apps

https://channel9.msdn.com/Events/Build/2017/B8092

Project Rome

Project Rome is a really interesting project for mobile developers and most mobile dev’s i’ve spoken at Build or after Build still didn’t have any knowledge about it. Project Rome focusses on inter device experiences for apps which is something that is going to be huge in the future is my prediction.

bill buxton

Cross-device and cross-platform experiences with Project Rome and Microsoft Graph

This session gives a good overview of what is possible by using Project Rome. Vikas and Carmen gave lots of demo’s and explained the why, the what and how of project rome

https://channel9.msdn.com/Events/Build/2017/B8025

 

App engagement in Windows Timeline and Cortana with User Activities and Project Rome

Project Rome goes hand in hand with the Microsoft Graph and the addition of User Activities and Devices to the Microsoft Graph. In this session Shawn and Juan describe how you can engage users cross device by using the features of Cortana and the new Windows Timeline.

https://channel9.msdn.com/Events/Build/2017/B8108

 

Bots

“Bots are the new apps”. it’s a sentence i’ve heard quite often in the past year which was unofficially called “the year of the bots”. Is this mobile tech?  I’m still not convinced this will replace native mobile apps but it’s a great addition to cover certain mobile moments.

bot framework

Bot capabilities, patterns and principles

I visited this session and i have to say i really liked it.  Mat Velloso and Ryan Volum give some real life examples of how you could set up a bot and what design patterns you can use to set up a good bot. Even if you’re not a bot developer this might inspire you to build some small bots or integrate them in your apps.

https://channel9.msdn.com/Events/Build/2017/B8010

 

Windows

UWP was a big topic at Build as it is every year. although i haven’t focussed on this much during this year of Build since i was at all sessions above here focussing Xamarin and other Mobile or Azure related topics there is still quite a big list of videos worth watching is you’re building UWP apps.

The first major announcement that i really liked was the Fluent design system. Although i’m a dev i really love good design and these kind of systems really help me to build great stuff. I absolutely loved Metro (back when it was announced) but Microsoft didn’t upgrade this design language that much up until now.

 

fluent design system

Introducing Fluent Design

https://channel9.msdn.com/Events/Build/2017/B8066

Build Amazing Apps with Fluent Design

https://channel9.msdn.com/Events/Build/2017/B8034

 

Other sessions on UWP development:

What’s new and coming for Windows UI: XAML and composition

https://channel9.msdn.com/Events/Build/2017/B8100

Windows Store: Manage and promote apps your way

https://channel9.msdn.com/Events/Build/2017/B8098

App Model evolution

https://channel9.msdn.com/Events/Build/2017/B8004

Nextgen UWP app distribution: Building extensible, stream-able, componentized apps

https://channel9.msdn.com/Events/Build/2017/B8093

Ten things you didn’t know about Visual Studio 2017 for building .NET UWP apps

https://channel9.msdn.com/Events/Build/2017/B8096

XAML custom controls for UWP: Start to finish

https://channel9.msdn.com/Events/Build/2017/B8035

 

 

These sessions should cover quite some of your spare time to get you fully up to date of current mobile development in the Microsoft space. I really like listening to some of them during my commute. Did i miss any important sessions? please let me know in the comments.

20170512_151116

I had a great time at Build in Seattle so hopefully to see you next time.

Happy Coding!

Geert van der Cruijsen

Improved Hockeyapp publishing from VSTS for Windows 10 UWP apps

In my last blogposts that  showed a tutorial on how to do automated builds in VSTS and continuous deployments to Hockeyapp. For UWP the support wasn’t that good and we couldn’t use the Hockeyapp Build steps from VSTS because Hockeyapp could not handle zip files containing the files from your app package such as the appx or appxbundle file, the powershell install script etc. I made a workaround using powershell but that is not needed anymore because the Hockeyapp team made some changes to the Hockeyapp build step.

This has changed last week although it wasn’t announced anywhere. I asked the question on the Hockeyapp slack group when the Hockeyapp team would implement this feature and they told me they just did it before the Microsoft Build conference started.

So if you’ve used my Powershell script before to publish your app to Hockeyapp you can now change it back to the  Hockeyapp build step and leave the rest of the steps the same. the zip file should contain all your files from the AppPackages folder. I’ve also updated the tutorial post for anyone who’s using it in the future to use the correct way right away.

image_thumb62.png

Hockey app UWP deployment

If there is an .appxsym file in the zip file as well the symbols will also be used within Hockeyapp.

I’m really glad that UWP apps are on the same level of maturity again as Android and iOS apps are regarding Continuous deployments in Hockeyapp.

The Hockeyapp team also announced in the public Hockeyapp Slack group that they are working with the Windows product team to improve installation of apps so more to come in the future. I can’t wait!

Happy Coding!

Geert van der Cruijsen

Continuous deployment of Windows 10 UWP apps to Hockeyapp using VSTS

In yesterdays post I’ve shown you how to set up Continuous deployments of Xamarin Android apps to Hockeyapp. Today we’ll focus on Windows 10 UWP apps since this process is a bit more complex.

This post is part of a series of 3 blogposts:

The basic process of setting up the continuous deployments is the same for all platforms: first build the sources, create a release and send that to Hockeyapp. However building the UWP app and sending it to hockey app require a few steps that aren’t so obvious. so lets start deploying

windows10uwphockeyapp2

Context: the app we are going to deploy

We’re going to deploy the same app as yesterday in the Xamarin Android post. I’ve created a simple solution in Visual Studio containing an average Xamarin project. 1 PCL, 1 Android app, 1 iOS app and 1 Windows 10 UWP app.

image_thumb1

This solution is checked into my GIT repository stored in VSTS so lets move to there to start building the UWP app today. please note that this also works for regular UWP apps that do not have any Xamarin involvement. it’s actually easiest to create a new solution containing only your class libraries (can be PCL) and your UWP project leaving out the Android and iOS specific projects (if you have any)

image

Setting up the build in VSTS

in VSTS open your team project and go to the BUILD tab. in here we’re going to create a new build definition by clicking the green + sign.

image_thumb3

Choose the Universal Windows Platform build template and click next.

image

Select the  repository containing the solution and select the branch you want to deploy. you can even choose to build apps that are stored in different sources such as GitHub or remote Git repositories.

After everything is set click on Create

image_thumb7

A build definition will be created and several build steps are generated for you. We’ll go over them one by one.

but first we need to set some other things up. UWP apps can run on both Mobile devices and tablets or pc’s. this will need different builds focussing on either ARM or the x86 architecture. We’ll set up 1 build definition that will handle both.

To make sure the build runs for each platform we go into the options tab of our build definition and select “Multi-configuration”. set the multipliers to “BuildPlatform” so the build will run for each different build platform we select.

image

Next go to the “Variables” tab and set the “BuildPlatform” variable to both x86 as ARM

image

Back to the build steps. We’ll start with restoring all nuget packages. this step was automatically generated and we only need to set the correct solution. set this to the .sln file that only contains the UWP related projects.

image

Next step is building the projects in the Visual Studio build step that is already created for us. Set the solution to the solution containing the UWP projects and set the platform to the $(BuildPlatform) variable

image

If you’ve read the Xamarin Android guide as well you might expect what is the next step: publishing the artifacts. but here is when Windows 10 UWP apps start to be different from the Xamarin Android guide.

Hockeyapp does not have any option to upload .appxbundles that contain both ARM ad x86 sources. we need to split them up into 2 packages and then send them to Hockeyapp separately. for Windows 10 Mobile we can still upload an .appxbundle file but for Windows 10 tablet/desktop (x86) we need to send a .zip file containing the .appxbundle, the .cer file and the .ps1 file to install the app on the pc or tablet (installing is currently still manually running the .ps1 file for Windows 10. I hope and expect this will become better in the near future.

To be able to publish both the artifacts: .appxbundle as the zip file we need to remove the predefined step called “publish build artifacts” and replace it with another. We’ll also be removing the “Index sources & publish symbols” step.

image

Now it’s time to add 3 new steps. 2 powershell tasks (1 at the top of the build and 1 at the bottom) and after that a “copy and publish build artifacts”

image   image

Wait! Powershell? You would expect for Windows 10 UWP that everything would work out of the box. Well it isn’t currently so we have to do some parts manually.

The First powershell script we will add to the top will increase the version number of the Windows package to a unique number so Hockeyapp will understand new incoming versions. The version number always contains 4 digits:X.X.X.X where I would like to keep the first 3 digits up to the development team to clearly define their releases. the last digit we’re going to use for our release number. This version number is stored within an XML file in the project so we’ll open it, increase the number and save it so the build will use this new number. We’ll insert the BuildID as the last number since this is a unique number and an integer.

You’ll need to store the powershell code below in a .ps1 file and store it somewhere in your repository.

to make it easier I’ve already created all 3 powershell scripts you are going to need during this guide and stored them on Github. so you can also download them from there so you always have the newest version. Check them in to your own repository so you can use them in the powershell task.

UpdateAppVersion.ps1

In the powershell step select the UpdateAppVersion.ps1 and for arguments make sure you set 2 parameters. –projectFolder pointing at the directory where your AppxPackages will be created and the –buildId that points to $(Build.BuildId) image So now this powershell script will change to build number and the Visual studio Build step will take this number into account and will version your appxpackage folder. next step is to create a .zip file of Appxpackage directory. again with powershell. ZipAppxPackage.ps1Select the ZipAppxPackage.ps1 as the script filename and pass a parameter called –dir to the script that has $(Build.BinariesDirectory) as its value.

image

so now everything is build and zipped and we can send it to the drop folder. our last step of the build.

Set the copy root to the $(Build.BinariesDirectory)\ and set the contents to copy to both *.zip files as *arm*.appxBundle files. The artifact name and type are set to drop and Server.

image

This was the final step of our build. you can run the app and everything should work. on to the next step: deploying to Hockeyapp

image

Setting up Hockeyapp

I assume you’ve already created an account at Hockeyapp otherwise just sign up at www.hockeyapp.net (It’s free for 2 apps or less) once you’ve logged in go and create your first app by pressing the New App Button

image_thumb38

Hockeyapp will ask you to upload a build. we’re not going to do that since we’re setting up automatic deployments. choose to add the app manually

image_thumb40

Choose  Windows as a platform and fill in your release type and title of the app. Note that this is only the tablet/pc (x86) release of the app and not the ARM version.

image

Repeat the steps above for the Windows 10 mobile (ARM) version but then select Windows Phone as plataform

image

Copy the AppID of both apps and save them:

image

To be able to deploy from VSTS we need to set up an API token we can use in VSTS. If you already followed the Android guide you might have already taken these steps so you can skip these steps and move to the chapter of deploying the app.

Click on your user icon in the top right and select API Tokens from the menu on the left.

Create a new API token and call it VSTS. Copy this API token. we’ll need it in VSTS

image_thumb46

Move back to VSTS and  open up the marketplace (top right next to your name) and click manage extensions. browse the marketplace and install the Hockeyapp extension

image_thumb49

After installing the extension go back to your VSTS team project and navigate to the settings window. in the settings menu go to Services and add a new service Endpoint of type “Hockeyapp”

Give the endpoint a proper name and copy in the API token you’ve generated earlier. now save the service endpoint.

image_thumb51

Now all the plumbing with Hockeyapp is done we can actually start deploying our app to hockeyapp

Deploying your automated build to Hockeyapp

Go back to your team project in VSTS and navigate to the Release tab

image_thumb53

Choose an Empty deployment template and press OK.

image_thumb56

First go to the Artifact tab and select the build we’ve created earlier as supplier of the artifacts we’re going to release to hockeyapp.

image_thumb66

image

Go back to Environments, name your deployment template and add a new Task

image_thumb60

This list should now contain a Hockeyapp step since we installed that as our extension

image_thumb62

This hockeyapp step will only work for Windows 10 Mobile (phone) and not for the pc/tablet (x86) version because sending .zip files is not supported by this step. we’ll cover this again by a custom powershell script.

Update: Hockeyapp made some changes to the Hockeyapp step in our deployment script so it can be used for both Windows 10 Mobile and Windows 10 Desktop/Tablet (x86/x64)

Windows 10 Mobile

To set up the hockeyapp step select the Hockeyapp connection you’ve set up earlier and enter your App ID. for the binary file path click on the … and select your ARM.appxbundle file

image

This step should do the trick. Schedule a release and you should be able to see a new version pop up in Hockeyapp.

Windows 10 (x86) Tablet/PC

For the Windows 10 (x86/x64) Tablet/PC version of the app we can now also use the hockey app build step so add another task of type Hockeyapp but let this one point to the other App ID for the Windows 10 desktop/tablet app and as Binary File path select the Zip file we created during the build instead of the appxbundle. Hockeyapp will see if there is already a version created and otherwise it will create a new version and upload it.

Now save the release definition and test it. press the green + to create a new release to see if everything works. if everything works fine go to triggers and set the build to continuous deployments so it will fire every time a new build is created.

image

Hopefully this guide helps you into creating higher quality apps and will save you time by not having to manually create releases all the time.

If you have any questions contact me on twitter @geertvdc or leave a comment below.

Happy Coding & deploying!

Geert