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 .

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

 

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

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!

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

Community report: How to be authentically digital with Shane Morris

At the last Melbourne XDDN meeting, Shane Morris (@ShaneMo) did a great session on “How to be authentically digital”. In it he covered off what the Microsoft Metro design language is and what the principals of it are. He gave a great insight into how the Metro design language pulled in influences from a number of design styes, such as Bauhouse and motion design.

Shane talks about how using the content itself to provide form and structure to the content can be combined with typography hierarchy. He gives examples using his own applications and shows that not all Metro designed applications need to look the same. There is a lot of room for personalisation as long as you keep the core principals in mind.

I highly recommend watching his session if you have the time.

https://vimeo.com/47223423

By David Burela

Community report-Melbourne Azure UG May

Last month during the Windows Azure user group there were 2 main presentations.

The first one gave a quick 15minute overview of the latest news in the Windows Azure community

https://vimeo.com/44444090

The 2nd talk by Aidan Casey (@aidanjcasey) talked about how you can build Node.js apps on top of Windows Azure.

• He gives an introduction on what Node.Js is
• Reviews the tooling that is provided by Windows Azure
• Demonstrates how to build and deploy a simple chat application
• And finally explains in what situations Node.Js should be used

https://vimeo.com/44452495

By David Burela

My involvement with the 2012 imagine cup

For the last few months I have been helping out behind the scenes as the Imagine Cup game design sub-captain for the Windows/Xbox division. Translated into English, it means that I have been in charge of organising the allocation of games to judges, and sorting out any issues the judges may have.

The games have all been judged and gone through 3 rounds so far. There has been some fierce competition throughout the entire competition! It is with great pleasure that I can announce that the finalist

Xbox / Windows finalists

The finalists announcement http://blogs.msdn.com/b/andrewparsons/archive/2012/05/23/imagine-cup-2012-game-design-finalists-xbox-windows.aspx
Video trailers of the finalists http://www.youtube.com/playlist?list=PLDCFF2F3BE654B049&feature=view_all

Windows Phone 7

The finalists announcement http://blogs.msdn.com/b/andrewparsons/archive/2012/05/23/imagine-cup-2012-game-design-finalists-phone.aspx
Video trailers of the finalists http://www.youtube.com/playlist?list=PLFE775CF63073F5D1&feature=view_all

Australian software design finals

I also attended the Australian finals of the software design category. There were lots of impressive presentations, each team obviously had spent a lot of time on their software and their slide decks.

World wide finals in Sydney!

In July, the world wide finals will be hosted in Sydney, Australia. I’ll be attending the entire event, helping out and getting blown away by the student participation. I’m looking forward to see what the students bring!

By David Burela

Community report–Victoria.Net May

At this month’s Victoria.net usergroup, Cristian Prieto (@cprieto) discussed Websockets in HTML 5. He covered which browsers support it, which server technologies support it (Windows 8 server is the only Windows operating system that supports it natively), which frameworks you can use to assist you in programming it, etc.

The most useful framework that was mentioned was http://signalr.net/. It helps you write Javascript client side code that will interact with the server via websockets if available, otherwise it will fall back to long polling.

The video of the presentation can be viewed below:

https://vimeo.com/42809208

By David Burela

Community report–XDDN Melbourne May

Alex Knight (@agkdesign) presented on what it is to design Metro apps and what sets them apart from other user interfaces. He gave a lot of high level information on how to approach the design, and gave some ideas about keeping the UI “Authentically digital”. It is a very good session to watch in your spare time.

Alex has provided me with the slides Which you can download.
And the video is available for you to watch at any time

https://vimeo.com/42385951

By David Burela

Windows 8 demo-Toast notifications

I have had requests to share the Windows 8 demos that I gave at the Windows 8 Developer camp. The source code for this blog post is available on Github at https://github.com/DavidBurela/Win8Demo-Notifications

Toast notifications allow your application to prompt your users when something has happened in your application that may not be currently viewable on the screen. An example being an auction application. The user flags to watch an item. The user than navigates away and looks at other items. Later the application can show a toast notification warning the user that there is only 5 minutes of bidding remaining.

IMPORTANT

Ensure that go into your application manifest and set Toast Enabled to Yes. If you are submitting a ToastNofication to the ToastNotificationManager and see no error messages, but toasts are failing to show. Then you have probably not enabled toasts in your application.

Simple text toast notification

Notification toasts in your application can be created by sending a formatted XML message to the ToastNotificationManager. The easiest way to achieve this is to get a base template for the notification style that you want (Text only, Image, Image and Text, etc) then modifying the Text or Image elements of the XML template. The code below shows how a XML template can be taken and updated with custom text. The XML document is then used to create a ToastNotification which is then sent to the ToastNotificationManager.

/// <summary>
/// Raises a text toast notification locally.
/// IMPORTANT: if copying this into your own application, ensure that “Toast capable” is enabled in the application manifest
/// </summary>private void NotificationTextButton_Click(object sender, RoutedEventArgs e)
{
// Toasts use a predefined set of standard templates to display their content.
// The updates happen by sending a XML fragment to the Toast Notification Manager.
// To make things easier, we will get the template for a toast iwth text as a base, and modify it from there
var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);

// Find the ‘text’ element in the template’s XML, and insert the text “A sample toast” into it.
var elements = toastXml.GetElementsByTagName(“text”);
elements[0].AppendChild(toastXml.CreateTextNode(“A sample toast”));

// Create a ToastNotification from our XML, and send it to the Toast Notification Manager
var toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

Toast notification with a local image and text

Images can be shown in the toast notification easily by create a Image element in the XML document. The templates can be used again as a base to start with, but this example will construct the XML document from scratch by creating a ToastImageAndTest01 toast. The image and text elements are created, finally the XML document is chained together. The XML is used to create a ToastNotification which is passed to the ToastNotificationManager

private void NotificationImageButton_Click(object sender, RoutedEventArgs e)
{
// It is possible to start from an existing template and modify what is needed.
// Alternatively you can construct the XML from scratch.
var toastXml = new XmlDocument();
var title = toastXml.CreateElement(“toast”);
var visual = toastXml.CreateElement(“visual”);
visual.SetAttribute(“version”, “1″);
visual.SetAttribute(“lang”, “en-US”);

// The template is set to be a ToastImageAndText01. This tells the toast notification manager what to expect next.
var binding = toastXml.CreateElement(“binding”);
binding.SetAttribute(“template”, “ToastImageAndText01″);

// An image element is then created under the ToastImageAndText01 XML node. The path to the image is specified
var image = toastXml.CreateElement(“image”);
image.SetAttribute(“id”, “1″);
image.SetAttribute(“src”, @”Assets/DemoImage.png”);

// A text element is created under the ToastImageAndText01 XML node.
var text = toastXml.CreateElement(“text”);
text.SetAttribute(“id”, “1″);
text.InnerText = “Another sample toast. This time with an image”;

// All the XML elements are chained up together.
title.AppendChild(visual);
visual.AppendChild(binding);
binding.AppendChild(image);
binding.AppendChild(text);

toastXml.AppendChild(title);

// Create a ToastNotification from our XML, and send it to the Toast Notification Manager
var toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

More toasts

Images from remote web servers can be used. This can be done easily by specifying a remote URI instead of the local path within the application.

To get the XML required for other templates, download the official SDK sample, run the application, click the type of notification you would like, and take note of the outputted XML on the screen http://code.msdn.microsoft.com/windowsapps/Toast-notifications-sample-52eeba29

By David Burela

Community report – XDDN Melbourne April

Ian Randal (@kiwipom) spoke at the XDDN Melbourne April meeting.

He lightly touched on what IoC is, in the context of how Caliburn.Micro uses it. He then went on to show some demos of  Caliburn.Micro. He demonstrated how a XAML page can be created which binds to a ViewModel, without requiring any “UI glue code” to stick it all together. It made for a simple application that had a higher percentage of the code being business logic, rather than scaffolding.

A recording of the talk can be found below

https://vimeo.com/41073059/

By David Burela

Windows 8 demo–Updating application tiles

I have had requests to share the Windows 8 demos that I gave at the Windows 8 Developer camp. The source code is available on Github at https://github.com/DavidBurela/Win8Demo-Tiles

Text tile

Application tiles in your application can be updated by sending a formatted XML message to the TileUpdateManager. The easiest way to achieve this is to get a base template for the tile style that you want (Text only, Image, Image and Text, etc) then modifying the Text or Image elements of the template. The code below shows how a XML template can be taken and updated with custom text. The XML document is then used to create a TileNoficitacion which is then sent to the TileUpdateManager.

/// <summary>
/// Set the application's tile to display text content.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileTextButtonClick(object sender, RoutedEventArgs e)
{
    // Tiles use a predefined set of standard templates to display their content.
    // The updates happen by sending a XML fragment to the Tile update manager.
    // To make things easier, we will get the template for a square tile with text as a base, and modify it from there
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText01);

    // Find the 'text' element in the template's XML, and insert the text "Hi  " into it.
    var elements = tileXml.GetElementsByTagName("text");
    elements[0].AppendChild(tileXml.CreateTextNode("Hi  "));

    // Create a TileNotification from our XML, and send it to the Tile update manager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Image tile from local image file

It is also possible to create the XML from scratch and send it to the TileUpdateManager. The code below updates the application tile with an image tile. It starts by instantiating a XmlDocument, creating each of the XML elements, and then chaining the elements together to form the final XML document.

The path to the image is given as being a local application resource through the convention ms-appx:///Assets/DemoImage.png

/// <summary>
/// Set the application's tile to display a local image file.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileImageButtonClick(object sender, RoutedEventArgs e)
{
    // It is possible to start from an existing template and modify what is needed.
    // Alternatively you can construct the XML from scratch.
    var tileXml = new XmlDocument();
    var title = tileXml.CreateElement("title");
    var visual = tileXml.CreateElement("visual");
    visual.SetAttribute("version", "1");
    visual.SetAttribute("lang", "en-US");

    // The template is set to be a TileSquareImage. This tells the tile update manager what to expect next.
    var binding = tileXml.CreateElement("binding");
    binding.SetAttribute("template", "TileSquareImage");
    // An image element is then created under the TileSquareImage XML node. The path to the image is specified
    var image = tileXml.CreateElement("image");
    image.SetAttribute("id", "1");
    image.SetAttribute("src", @"ms-appx:///Assets/DemoImage.png");

    // All the XML elements are chained up together.
    title.AppendChild(visual);
    visual.AppendChild(binding);
    binding.AppendChild(image);
    tileXml.AppendChild(title);

    // The XML is used to create a new TileNotification which is then sent to the TileUpdateManager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Image tile from remote image

A remote image can be used by again using a template (or hand crafting the XML from scratch as in the previous example), but this time providing a URI to an image hosted on a remote web server, rather than a local application resource.

/// <summary>
/// Set the application's tile to display a remote image on the internet.
/// After clicking, go back to the start screen to watch your application's tile update.
/// </summary>
private void SetTileRemoteImageButtonClick(object sender, RoutedEventArgs e)
{
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

    // Find the 'image' element in the template's XML. Change the src attribute to a remote URL
    var elements = tileXml.GetElementsByTagName("image");
    var imageElement = elements[0] as XmlElement;
    imageElement.SetAttribute("src", @"http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft.png");

    // Create a TileNotification from our XML, and send it to the Tile update manager
    var tileNotification = new TileNotification(tileXml);
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
}

Again, this source code is available as a working example on Github at https://github.com/DavidBurela/Win8Demo-Tiles

By David Burela