Creating the Sensis Showdown app

Recently I was at a developer camp. In attendance was a developer evangelist from Sensis who was encouraging devs to create an app for their search API http://developers.sensis.com.au/about. There was a cash prize for whoever wrote the best app by the end of the hackathon.

Long story short, I came in 1st place Nerd smile.

The API

Sensis are a directory services company (White Pages, Yellow Pages, Business directories, etc.). Their search API allows you to search for local businesses based on key words and locations. It was a REST based API and they provided some legacy .Net 4.5 sample code to interact with the service. However this didn’t work with the new asynchronous apis in WinRT. So I spent an hour trying to very roughly convert it over to a WinRT compatible sample which I then shared with the entire group in attendance, to help everyone else get a head start on entering this competition https://gist.github.com/DavidBurela/5069136. The interaction code could have been my “secret sauce”, but that is no fun. Everyone at the event was there to have fun hacking away at WinRT and WinPhone apps. I wanted to see what everyone else could come up with once they had the API access code out of the way.

The idea

After spending a few hours helping everyone else in attendance, I realised I only had 2 hours left to build something. I’d done a bunch of work with the Bing Maps control recently, so it made sense to start there. A generic “search for a term and display it” app seemed boring, and is the same functionality as their own website.

After a bunch of brain storming I realised I could increase it to two search terms and compare the two. This idea expanded into a competitive comparison for the ultimate argument decider. You always have random arguments when in a bar “Chinese food is more popular”, “No way pizza is”.

This led me to a “Red vs. Blue” comparison. Search for two terms, have it mapped as Red vs Blue push pins, and then display the final numbers

 Pizza Vs PastaSushi Vs Fries

Downloading the app:

Windows 8 marketplace

Within 72 hours of creating the app, it had already gone through marketplace certification. Microsoft is getting VERY speedy in the approval process now. You can download the app onto your Windows 8 machine at http://apps.microsoft.com/windows/app/sensis-showdown/5d96dec3-ce11-4164-8b2a-b6b97a59cce5

Source code

As I do with most apps I create for fun, I have thrown the full source code up onto BitBucket https://github.com/DavidBurela/SensisShowdown

By David Burela

Advertisements

Summary of Melbourne AppFest

This month saw the first Melbourne AppFest, it all went without a hitch.
The facilities were perfect and the catering was the usual good Cliftons standard.

We had a lot of mentor support there on the day (Nick Hodge, Frank Arrigo, David Glover, Shane Morris, and a few members from the community).

There were a good number of developers there. Many of them had general development questions about Windows Phone & Windows 8, as well as a few people there interested in Windows Azure.

There was a competition on the day for the best app of the day. This was won by Lars Klint for his “Picture of the day” application. It allows you to connect to a feed (such as the National Geographic) and it will change your Window Phone’s lock screen each day.

Lars won a Xbox & Kinect package!

image

The app can be downloaded from the Windows Phone app store http://www.windowsphone.com/en-au/store/app/image-of-the-day/84848ebd-6ce3-4617-b89f-83ec4f093a54
There are more details about the winning app by Lars’ employer http://blog.kiandra.com.au/2013/03/image-of-the-day-wins-appfest/

By David Burela

Windows 8 development–Certification failed due to bytecode generation

I was working on a WinJS application and added a 3rd party JavaScript library. However every time I tried to run the WACK certification tool I kept coming across this issue.

Performance test – FAILED Bytecode generation

  • Error Found: The bytecode generation test detected the following errors:

    • File … has JavaScript syntax or other problems.
  • Impact if not fixed: As a performance optimization to accelerate JavaScript execution time, JavaScript files ending in the ".js" extension generate bytecode when the app is deployed. This optimization significantly improves start-up and ongoing execution times for JavaScript.

  • How to fix: You may need consider one or more of these steps to fix the issue:
    – Ensure that event logging is enabled
    – All JavaScript files are syntactically valid; otherwise exclude the respective files from the package
    – Please note that you should uninstall all previous versions of the app before deploying
    Otherwise exclude the respective files from the package.

 

How to solve it

The issue I had was due to the encoding on the JavaScript file. This can be easily fixed by changing the encoding to Unicode UTF-8.

Do this by opening the JavaScript file, then select File –> Advanced Save Options. In the dialog, select Unicode (UTF-8 with signature) – Codepage 65001

image

By David Burela

Melbourne & Sydney Appfest for Windows 8 / Windows Phone / Azure

There are 2 big events happening in Australia over the next few weeks.

The first is a three day Sydney Appfest from Friday February 15th – Sunday February 17th.
Details of it can be found on the Lalaninja website http://www.lalaninja.com.au/2013/01/21/appfest-sydney-february-2013/

As there was only a Sydney event being organised, I worked with the Microsoft DPE team to help organise a secondary event to be hosted in Melbourne.
The Melbourne event will be a 1 day event on Saturday 2nd March. Space is limited so you NEED to register quickly
http://wp.msdeveloper.com.au/Pages/Events.aspx

By David Burela

Sorted lists in Windows 8 applications

While developing Windows 8 applications I have come across the requirement to have my list of items sorted on my screen, sometimes in a <ListBox>. Unfortunately the base WinRT controls make this really difficult to achieve.

After a few hours of searching for an easier way to do it, I finally discovered a way of sorting the items. Rather than having the controls automatically sort for me (as I was used to doing in Silverlight, etc.), but instead by sorting the underlying list itself. It makes total sense in hindsight.

A blog post from Andrea Boschin explains how to do it: http://www.xamlplayground.org/post/2010/04/27/Keeping-an-ObservableCollection-sorted-with-a-method-override.aspx

The sorting can be achieved automatically by overriding a method in the ObservableCollection. The final step is to add the IComparable interface to the class you want to sort.

Here is an example IComparable implementation that will sort alphabetically

public int CompareTo(object obj)
{
var person = obj as Person;
return string.CompareOrdinal(this.Name, person.Name);
}

By David Burela
Reblogged from my 
Infragistics blog

Adding a privacy policy to your Windows 8 application

One aspect of Windows 8 app development that I have seen a lot of developers get tripped up on has been the inclusion of a “privacy policy”. The certification requirements document explains why it is needed:
http://msdn.microsoft.com/en-au/library/windows/apps/hh694083.aspx#ACR_4_0

But to sum the article up, if you even have the “can access the internet” capability checked then you MUST have a privacy policy. I (incorrectly) thought that since I was just accessing a XML feed and not sending any data that I would be excluded from the requirement. But Microsoft have no idea what you may be sending in your GET/POST requests.

Examples of privacy policies

The first step is to write a privacy policy, however it is probably easier to just base yours off of someone else’s. Here is my current privacy policy https://davidburela.wordpress.com/windows-apps-privacy-policy/

Here are links to a few other privacy policies:

The next hurdle is finding somewhere to host your privacy policy. You could use a free Windows Azure website account, post it onto your blog (like I have done), or perhaps put it onto skydrive/dropbox and make it public.

Code

Once you have your privacy policy, the last step is to add it to the settings charm. The easiest way is to add it to the settings charm from App.xaml.cs, this way the privacy policy is available on every page of your application.

Below I have included the code snippet I use in my own code. First you add an event handler for when the commands are requested. Then you add your new privacy policy option to the settings screen. Finally you add logic for what happens when your new option is clicked (launch the web browser).

App.xaml.xs:

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// …

SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;
}

void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
args.Request.ApplicationCommands.Add(new SettingsCommand(“privacypolicy”, “Privacy policy”, OpenPrivacyPolicy));
}

private async void OpenPrivacyPolicy(IUICommand command)
{
var uri = new Uri(“https://davidburela.wordpress.com/windows-apps-privacy-policy/”);
await Launcher.LaunchUriAsync(uri);
}

I hope this helps simplify your app development!

By David Burela
Reblogged from my
Infragistics blog.

Easy to use icons in Windows 8 applications by using Segoe UI Symbol font

When creating your “Windows Modern Style UI applications” (read: Metro), one difficult aspect of the creation can be finding great icons to help keep a consistent look.

One little known trick is that Microsoft have already created a collection of icons that you can use in your applications. You simply need to use the “Segoe UI Symbol” font and know the character code for the icon.
An additional advantage of using an icon font, is that the icons are vector based and will scale crisply.

To browse the icons that are available open the Character map (search for it on the start screen). Change the font to Segoe UI Symbol, then scroll to the bottom for the really good ones.
Take note of the hex value of the character you want (E0EB in the sample image below).

image

 

From within your Windows 8 application, set the FontFamily to “Segoe UI Symbol”. Then tell the XAML that you are using the hex value of a character by putting it in the format &#x1111;  The ampersand escapes the string, the #x defines it as a hex value, the semicolon then closes the character escape off.

So our aeroplane icon would be defined in XAML like this: 
The full line of XAML would be: <TextBlock FontSize="72" FontFamily="Segoe UI Symbol" Text="" />

The screenshot below shows the icons being displayed in the Visual Studio designer.

image

Start exploring with the character map, you may save yourself a heap of time by using the predefined icons Microsoft have created!

Reblogged from my Infragistics blog

By David Burela