Building apps? This is the stuff about that
15 Nov 2012

English to Afrikaans to English

image

South Africa, the amazing country I live in, has 11 official languages including the language of Afrikaans which I can muddle my way through speaking. However often I struggle and that inspired me to create an app to help with a phrase book that helps you translate English to Afrikaans & back again!

I see some real value in this on a tablet, when people come to South Africa on holiday as they will be able to quickly find out what “jou ma se…” means and take the required action (ducking is generally the required action at that point).

While I did some planning for this app before hand (finding content, prototyping UI’s etc…) the app was mostly built at the recent WowzApp event, which is an event aimed at students (although we had professionals & even a 13 year old).

This app is also in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

Video

Screen shots

screenshot_11112012_221229screenshot_11112012_221241screenshot_11112012_221250screenshot_11112012_221321screenshot_11112012_221636

08 Nov 2012

Windows Store app Development Snack: The vastness of CPU time

For more posts in this series, see the series index.

I have written in a previous post (What do you get from being a lock screen app?) about how your background processing has a limited amount of time to do it’s processing in, what the odd unit of measurement used (the CPU second) and the overflow bucket. Even with the thinking it is hard to understand what you can accomplish in the time available, so help let’s look at what an app I built (Bing my lockscreen) does in it’s time.

In short what I hope you take away from this, is that you do get a decent amount of time and that with careful planning you can do a lot!

The Process

First off, Bing my lockscreen since it uses a timer requires lock screen permissions which means it gets at least 2 CPU seconds every fifteen minutes, plus overflow from the bucket.

First thing that happens is we get a deferral object (similar to what was explained in Async & Sharing) since we need to use async in the background task. Now we go to the RoamingSettings values to get a boolean (which needs to be cast, since RoamingSettings is a Dictionary of string & object) to see if the user has disabled automatic updates. Now assuming the user hasn’t disabled automatic updates, we connect to a web site using the HttpClient & HttpClientHandler classes and pull down some JSON as a string and convert it to an object using Windows.Data.Json.JsonObject.

Aside: if I felt too tight on CPU, I may swop to the AWESOME Json.NET, which has a better parsing performance.

If all that worked (and there is minimal logging and status checks happening in here too), I use a touch of Linq to get the first image from the IEnumerable collection that it is stored in internally. I then check the URL of the image against a value stored in LocalSettings, as I do not wish to update the lock screen with the same image multiple times. If the image is different, I download the image from Bing to the TemporaryFolder, check the file size is greater than 0. If it is, then I call the SetImageFileAsync method to change the lock screen, else I delete the damage file. Downloading is far more complex than it first appears as I need to handle proxies, handle scenarios where I can’t get the 1920x1200 resolution and need to fall back to the 1366x766 resolution image, ensure everything is written to disk BEFORE the lockscreen is set (I had some issues with I/O buffers in earlier versions that caused a minor corruption on images because they were not flushed to disk!).

Aside: Important to remember that CPU seconds, is time the CPU works – when the CPU is idle say because you are doing something I/O bound like a download, it doesn’t count!

Next I store the result of this to the log, which is just a container in LocalSettings (so that means the first time this is run we create the container too!) and store the URL of the newly changed image too. Now the process continues in a similar way for the live tile! We check if the last live tile update is the same based on the URL for the image (again comparing to a value stored in LocalSettings). I then use the TileNotification and the TileUpdateManager to send the tile update. I do not need to download the tile image in this case, as tiles do support remote URL’s for the images. Lastly I update the LocalSettings for the updated tile!

Line count

If you count the lines of code executed for this, and I am excluding blank lines, namespace declarations, comments – really just the code that actually runs it is approx. 190 lines of C# code! Far more than you may think.

More stats!

I used the always amazing NDepend to generate some more stats on the assembly which does all the background processing:

  • IL instructions: 2 092
  • lines of code (LOC): 80
  • lines of comment: 9
  • Percentage Comment: 10%
  • Methods: 99
  • Fields: 75
  • Types: 18
  • Namespaces: 2
  • Assembly Level: 1
  • Abstractness: 0.11111
  • Instability: 1
  • Dist from main seq: 0.078567
  • Normalized dist from main seq: 0.11111
  • Relational cohesion: 2.3333
  • Afferent coupling (AsmCa): 0
  • Efferent coupling (AsmCe): 17

LOC is different here since NDepend uses the compiled assembly and works back, while I counted lines in Visual Studio. Same is true for methods, which NDepend works out from the compiled assembly and thus includes all anonymous methods - where if I counted that in VS, it would be 8 or 9 methods.

26 Oct 2012

Image Grabber

svg2raster - pink-190x190This is really a simple app, find images on a website and pull them down to your machine so you can browse them, save them or share them. There is some special logic for some websites – such as Tumblr blogs where it will pull down using the API rather than raw scraping of the pages.

This was the very first app I built and tried to publish – it took numerous attempts to get through certification and in the process I learnt a lot.

You can get the app from the store using the download link below!

Download

This app is also in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

Video

Screen shots

22 Oct 2012

Windows Store app Development Snack: Side loading apps for development purposes!

For more posts in this series, see the series index.

One of the things you need to think of when you are going through your development cycle is how the decision makers are going to test your app? 

Likely the best solution is to get it to their hands via a device, but how do you load your application onto that other device? Well there are TWO options!

Building the app

Before you do that however you need open your project in Visual Studio, right click on the project and go to the Store option, then client the Create App Packages option.

image

Since you are creating them for side loading you do not need to associate them with the store.

image

Once done you will have a folder (called the output location) with both a .appxupload & another folder in it – we will call this the deployment folder.

image

PowerShell

imageRegardless of the machine, if it has Windows 8 on it – it has PowerShell too so this option works FANTASTICALLY for everyone.  Step one is to load a developer license onto the machine, you can do this by typing: Show-WindowsDeveloperLicenseRegistration

You will now get the prompt for your Live ID to register the device unlocked for three months.

Next you need to ensure you can run PowerShell scripts, this is done using: Set-ExecutionPolicy unrestricted

Now copy the deployment folder to the device and using PowerShell run the Add-AppDevPackage.ps1 – This will prompt you about installing it and installing the required certificates. Say yes to those and the app will install on the device!

Visual Studio Debuggable Package Manager

If the device has has Visual Studio on it there is another option you can use which just requires the .appx package. That is the Debuggable Package Manager

image

When you launch that you can use the Add-AppxPackage command to install any appx you have. You can find the .appx file in the deployment folder.

AppXUpload

if you only have an .appxupload file – you can still use that too! Just remain it to a zip file, open it up in your favourite compression tool and extract the appx file from there!

18 Oct 2012

Windows Store app Development Snack: Dealing with Async warnings

For more posts in this series, see the series index.

In this post I am going to look at a side effect you find a lot with when using the new async modifiers: compiler warnings. While this post is in my Windows Store app dev series, it applies equally well to development on .NET 4.5 with ASP.NET, WCF, WPF etc… really anywhere you use Async.

CS1998

warning CS1998: This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.

Cause: You have specified the async modifier on a method, but you are not using the await keyword anywhere in the method.

This is a warning you should be investigating because it is there for one of two reasons:

  • You have async on the method, but do not need it – so remove it.
  • You have async on the method, because you need it & you forgot to use the await keyword! So time to fix up the code.

CS4014

warning CS4014: Because this call is not awaited, execution of the current method continues before the call is completed. Consider applying the 'await' operator to the result of the call.

Cause: You are calling a method which has the async modifier & returns a task – yet you are not awaiting on that method call.

This maybe be showing you a place where you forgot the await keyword so very important to check these out too. However these can come up when you intentionally do not use the await keyword. For example, you have decided to call a method and you know it will run async and none of the code following it needs to work with the result.

Microsoft has a great page on this compiler warning which goes into far more detail, especially regarding Exceptions that is worth reading.

You may think the solution here is to suppress this warning:

#pragma warning disable 4014
            AwesomeAsync();
#pragma warning restore 4014

Which I think is not a bad solution, as it does show clear intent by the author of the code that they are aware of the issue and are intentionally ignoring it. However it is not a good solution either, forget to restore it or get the warning number wrong in the restore and you have unintentionally suppressed large parts of your code base.

The better solution is just to assign the result (a task) of the method to a variable:

var ᛘ = AwesomeAsync();

You may not like these extra variables lying around – but remember the compiler is pretty smart, it will remove them for you at compile time if they are not needed. The following images are firstly the code I used in one of my apps, and then the code as it was compiled to (I used the awesome Reflector to see the compiled code) and note the t variable is gone!

Clipboard01=3Clipboard01=2

Lastly you maybe wondering why I am using ᛘ as my variable name – because it is hard to type. I want to ensure that no one starts using that variable unless they have a good reason and so this odd character means that the moment you need that variable you will likely give it a good name and use it properly with thought. It also is one character so takes up minimal code space. Lastly because it is so unique it does make it easy to identify the purpose when reading code (meta data in the letters) so no comment is needed. If you have feedback on this usage, I would love to hear it in the comments below!

17 Oct 2012

Windows Store app Development Snack: Debugging Share Target experiences

imageFor more posts in this series, see the series index.

The debugging experience for Windows Store apps is FANTASTIC – you have all these great tools in Visual Studio when you are running your application, but what about for scenarios where you need to debug when your app isn’t running.

For example when you are a Share Target, as the Share Source is the running application while the Share Target is launched by Windows when the user selects the target – and if you need to debug the target how do you do that?

The trick is hidden in the project settings, under the Debug section. There is an option called Do not launch, but debug my code when it starts which if you enable and then press F5, Visual Studio will jump into debug mode but not run any code. Then when Windows launches your code, say in the share target Visual Studio will attach to it automatically and enable that FANTASTIC debugging experience!

16 Oct 2012

Windows Store app Development Snack: Changing the application theme from dark to light

For more posts in this series, see the series index.

imageYou may have seen in Visual Studio & Blend the option to change the Windows Theme from dark (the default) to light. The problem is that is a runtime it seems to make zero difference and there is no way in Windows 8 to change it (like we had with Windows Phone).

The solution to this is to change it in the App.xaml file – but going to the Application node (the very first one) and adding RequestedTheme="Light" to switch to the light theme or RequestedTheme="Dark" to switch to the dark theme.

image

This will have a massive impact on the overall appearance of your application!

image

A word of warning – you may also see the runtime property for this under App.Current.RequestedTheme and assume you can change it at runtime, however that will raise a NotSupportedException. What you can do is set it on start-up, so if you want to change it “dynamically” the user will need to restart the app for the change to be applied (Microsoft has a sample to show this).

image

Lastly an interesting tidbit from the documentation on this:

This property is ignored if the user is running in high contrast mode.

15 Oct 2012

Windows Store app Development Snack: Simulator tips & tricks

imageFor more posts in this series, see the series index.

The Windows Simulator is a great tool for developing Windows Store apps but you maybe missing out on some great features of it.

Resolution

imageThere is a little screen on the toolbar which is used to change the resolution & size of screen. It is important to test on different sizes of screens & resolution combinations as that will influence the DPI of the screen and that will have impacts on your application (Microsoft has a good post on those).

However you may want to just work with a bigger simulator sometimes – well you can but placing the mouse on the any corner and dragging the simulator bigger or smaller!

Screenshots

image

One of the best features of the tool is the built in screen shot capabilities which you can access by pressing the camera button on the toolbar. This will capture the entire screen and and place the file (by default) into C:\Users\<username>\Pictures\Windows Simulator. It does not capture any of the simulator chrome so it is perfect for using when uploading to the store.

However sometimes you do not want a specific file, you just want to capture the screenshot to memory (say to paste into a presentation) you can click on the simulator and then press ALT+Print Screen. It will produce the same screenshot as if you used the toolbar button but place it into the clipboard, rather than a file.

Finally the resolution of the screenshot is based on the resolution of the simulator.

Windows Key

image

On the bottom of the simulator (by default) is the Windows hardware key and if you rotate the simulator the key moves to the relevant location. You may find that it tends to disappear when it is placed on the left hand side (counter clockwise rotate from the start location) – because that is where the toolbar is. 

The Windows key is there still, it has just merged with the toolbar itself and can be found now in the last position under the question mark button: image

Pages