Can you really just take a template, change the data source and have a useful app? If you find the right data source, then the answer is yes.

OpenData is an amazing concept. Organizations (especially municipal, provincial, and federal government) give the public access to their data so it can be used for websites and apps.

That’s how we get apps that tell us stuff like how did this restaurant do on the health inspection, or find the hockey arena. I was very excited when I saw the Finder App Template developed by Mark Arteaga because it claims to be a template that allows you to use Open Data to create a useful Windows 8 app.

The promise: A template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store. It allows a developer to easily pull existing point of interest data into the app to visually display on a map.

The reality: It works, but there is  little extra homework for the app developer. You have to get a Bing Maps Key so your app can use Bing Maps (details in the section “Creating a Bing Maps developer account”.) It will take you a little while to find a suitable Open Data set (details in the section “finding a data source”), and you’ll have to edit the code to add a privacy policy (details in the section “Adding a privacy policy”) but once you overcome those hurdles, you have an app with very good functionality!

• Map displaying the points of interest
• Ability to show detailed information for a particular point
• Ability to search the data using the search charm
• Ability to share a particular point of interest on the map with the Share Charm
• Ability to get directions from current location to a selected point of interest on the map

What will you need before you start?

• The Windows 8 SDK installed on your PC (which includes Visual Studio 2012 Express)
• The Bing Maps SDK installed on your PC (since this app template uses Bing Maps)
• An Open Data Source, in JSON format, that contains latitude and longitude information (more information on that and how to find it in the explanations below
• A name for your application

Downloading the template

The template is available on github it’s called Win8_FinderApp_Client

You download it by selecting the Zip button from the toolbar

Then you just unzip the file and you will have an Project that shows you a map representing flu data.

Running the project the first time

If you are like me you will want to run the project as is to make sure it works before you start making any changes.

To open the project in Visual Studio, go the folder where you extracted the zip file. Go to the subfolder Win8_Finder_App_Client-master | FinderApp and you will find a file called FinderApp.sln. Double click on the FinderApp.sln file to open it in Visual Studio.

As always happens when you try to open an open-source project in Visual Studio, you are warned that Visual Studio has no way of knowing if you can trust this source code, you will have to select OK to continue and open the solution.

Debu

After the project is open in Visual Studio, launch it by selecting the Debug button on the top menu.

If you have not already installed the Bing Maps SDK the app will not run and you will get the following error message.

You can download the Bing Maps SDK here

The app will launch and ask permission to access your location (that enable the app to provide directions to the locations on the map). But when the app launches you get an error message on the screen

“The specified credentials are invalid. You can sign up for a free developer account at http://www.bingmapsportal.com”

You see this app template uses Bing Maps, and in order to use the Bing Maps API in an app you have to sign up for a Bing Maps developer account. Creating an account is free, so don’t let this stop you from continuing.

Creating a Bing Maps Developer Account

Okay so let’s create a Bing Maps Developer Account and then maybe we’ll be able to get rid of that error message, besides which we’ll need it for our app!

Go to www.bingmapsportal.com and select Create a Bing Maps Account

You will be prompted to log in with a Microsoft account (e.g. live.com account, outlook.com account). If you don’t have one you can create one now by selecting Sign Up Now from the bottom right corner of the log in screen. You will need a Microsoft account to publish your app to the store anyway.

Then you will be asked if you want to use this Microsoft account as your Bing Maps Account.
Select Continue to continue and access your Bing Maps Account.

Now you specify the account details for your Bing Maps Account

Okay you have an account, now what!

Getting a Bing Maps Key

Bing maps offers some great services, and if you start using their services a lot, at some point you end up paying for them, but don’t worry, you won’t reach that point building one Windows 8 app!

For each app that you build that will access the Bing Maps APIs you have to have key. So the next step is to Create a key. Select Create or view keys from the left hand menu.

If you read the notes under the heading My keys, it says you can create two keys (Trial or Basic) for most application types and one additional Windows Store app Trial key under this account. Trial keys expire after 90 days. If you are just exploring you can create a trial key, but I want to publish my app so I am going to create a Basic Key that will not expire.

So I specify the name of the application I am creating, key type Basic, and Application Type Windows Store App, then I enter the captcha (that’s what they call those combinations of characters used for security), and select submit.

NOTE: If you aren’t sure what app name you want to use, don’t worry. You can come back and change the app name later.

After you hit submit you should see a message Key created successfully and at the bottom of the screen you will see your Key, along with the associated app name and expiry date. If you selected a Basic Key type Expiration Date should be None.

Updating the Finder App to use your Bing Maps account

Now you have a Bing Maps account and a key, we can return to Visual Studio to update the code with our key and get rid of that error message!

In Visual Studio go to the Solution Explorer window, expand the js folder and double click the config.js file to open it in the code editor window.

Now Search through your config.js file <CTRL><F> can be used for search, or you can just scroll down and find bingMapsKey

Change the string “SET-YOUR-KEY-HERE” to the key you just created in your Bing Maps account

bingMapsKey: "SET-YOUR-KEY-HERE"

becomes something like the following

bingMapsKey: "CjPXec5-PjxGZYbhyroKJlNr-eGxSNnB1MG5j-QtvhRYhvxlj7Go67zqnUiMoKiI"

NOTE: Yes you can cut and paste the key from the screen in your browser!

Now run the program again, you should no longer see the error message and you can now try out the app, click on one of the pushpins, choose directions or details, try bringing up the Charms ( <Windows><C> ) and try Search or Share.

Congratulations you now have a valid Bing Maps account, so now all we need to do is change the data displayed in the app!

Finding a data source to display in your app

If you scroll through the config.js file you will find the following code, this is the code that defines what data will be displayed on the map.

/**

Sample Flu Data from server

**/

appName: "Sample Server Flu Data",

staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

pathToArray: "",

latitudeField: "latitude",

longidudeField: "longitude",

nameField: "location",

secondaryField: "address",

detailField: "location",

If you read Mark Arteaga’s Finder App quick start guide, when he describes the point of interest data, he mentions that you have to have JSON data.

NOTE: If you are a coder and comfortable with data, you can of course update the code to read other data formats. But if you are not a coder, I would suggest you find a data source that provides the JSON format to keep it simple for now.

So where do I find Open Data in JSON format that would be good for a Windows 8 app?

There are LOTS of Open Data Catalogues out there, so now it’s time to have some fun doing some pouring through web sites and see what you can find.

Try search terms such as “your city name” “Open data” you may discover your hometown has an open data catalogue ready to use. You can also search for open data for a particular country or region.

I grew up in Fredericton, New Brunswick, so let’s see what I can find for Freddy Beach…

Instantly you see an Open Data Home page for the City of Fredericton, further down there is another promising link called Open Data Sites which appears to provide a catalogue of open data for the government.

Once you select a link, try to look for a list of all the different open data available, it’s often referred to as a Data Catalogue.

Once you find that list, keep an eye out for the Format! You are looking for data that is in JSON format.

Some data catalogues will even let you search by format, which is helpful since we are looking for a specific format.

Unfortunately Fredericton has lots of great data, but none of it is JSON, so let’s try somewhere else!

The City of Vancouver has some JSON, this is interesting, how about data about local playing fields and their status. I might well use an app that I could quickly use to see if my soccer or softball field was open the day after a big rain storm or early in the spring when the snow is still melting.

If I click on the Lync to see the JSON Data, I see the following data for each park:

{

"json_featuretype":"WeekendPlayfieldStatus"

,"weekend_status":"User discretion"

,"park_name":"Adanac Park"

,"closure_notes":"Summer field"

,"site_area":"NW"

,"park_id":65

,"last_updated":"May 3 2013"

}

If you look back at the flu data currently being displayed in the app, you will notice it has a latitude and a longitude field. If I want to display pushpins on a map for each location, I need latitude and longitude data. So Although this data about parks in Vancouver is in the correct format, it doesn’t have the fields I need to use it in this template.

So I’ll keep looking…If I visit the City of Toronto, their Green P Parking data is JSON

Let’s check out the data, at the link

http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json

{"carparks":[{"id":"1","address":"20 Charles Street","lat":"43.668997","lng":"-79.385093","rate":"$2.00 \/ Half Hour"

BINGO! We have a winner, the lat & lng fields look like co-ordinates to me!

So you can see part of the challenge when using this template is finding suitable data. It’s out there, you just have to do a little digging to find useful data in the right format.

I do think an app to help someone find a parking lot in Toronto would be useful!

Updating the app to point to your chosen Open Data source

Now I go back to Visual Studio and edit the config.js file. You can find additional instructions in Mark Arteaga’s Quick Start guide in the customization section for these steps as well.

Remember that code we saw for specifying the flu data?

appName: "Sample Server Flu Data",

staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

pathToArray: "",

latitudeField: "latitude",

longidudeField: "longitude",

nameField: "location",

secondaryField: "address",

detailField: "location",

We need to change that to point to our data!

Let’s update the values

• appName should be our app name, in this case “Toronto Parking”
• staticURL should be the URL that points to the JSON data we found in the open data catalogue.
• pathToArray is going to depend on what your JSON data looks like. You see at the start of my data before the open bracket where it starts listing the data for each individual parking lot? Where you see the string “carparks” that is the pathToArray. Here’s another examples, so you can see the pattern. Go to splash parks in Milton JSON, you will see a pathToArray of “items”.
• LatitudeField – should be the label for the field that contains the latitude, for my data that is lat
• longitudeField – should be the label for the field that contains the longitude, for my data that is lng
• nameField – is the field that appears in the table on the left hand side of the screen under the column heading Name. the parking lots don’t have a name field, so I think in my case the address would be useful to display in the table
• secondaryField – is the additional field that appears in the table on the left hand side of the screen. I don’t really have a name field, but I think it might be helpful to indicate if parking is a surface lot or a garage (in winter a garage means you don’t have to brush the snow off your car), so I will choose the carpark_type field to display in the table.
• detailField – this is the extra information displayed when someone selects details for a particular lot. I think the most useful information to display from my data set would be the rate for the parking lot.

So when I update the code to point to my new fields (and update the comments to indicate that this is parking lot data not flu data, my code looks like this.

/**

Toronto Parking Lots

**/

appName: "Toronto Parking",

staticUrl: "http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json",

pathToArray: "carparks",

latitudeField: "lat",

longidudeField: "lng",

nameField: "address",

secondaryField: "carpark_type",

detailField: "rate",

When I am done and I run my app it looks like this

If I select a pin on the map and choose details you can see the detail pane with the parking rate

So now I have a working app that displays the location and information about parking lots in Toronto. Now I just have a little tidying up.

I don’t like the title Location for my garage type, so I want to change that header.

I did a quick search of all the files in the project for the word “Location” using <CTRL><SHIFT><F> or you can go to Edit | Find and Replace | Find in Files. I found a declaration of the table header in the file home.html.

<thead>

<tr>

<th class="hidden"></th>

<th><span id="distanceHead" class="header">Distance</span></th>

<th><span id="nameHead" class="header">Name</span> <span id="nameFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

<th><span id="addressHead" class="header">Location</span> <span id="addressFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

</tr>

You can change the string “location” to “type” to change the column heading.

Updating the messages and text in the app

Okay now back to Mark’s starter guide to see what other messages I should customize so the app better represents the data I selected. Scroll down to the Config.JS section where he mentions Helper Text. These are messages that would be displayed to the user, so I should make sure they are suitable for my data.

/***************************************************

* Various helper text

***************************************************/

waitText: "Finding parks near you ...",

poiDataAvailable: "Found {0} parks!",

noPoiData: "Unable to find parks :(",

noPoiDataMessage: "We could not locate any parks near your location.",

noPoiDataMessageTitle: "Parks Unavailble",

includeUserLocationOnPoiSelected: false,

includeUserLocationOnPoiDisplayed: false,

Here’s a description of the above data

• waitText – the text to display while a search is in progress
• poiDataAvailable – text to display when data is found
• noPoiData – text to display when no data is found
• noPoiDataMessage – text to display in message box when no data is found
• noPoiDataMessageTitle – the title of the message box for noPoiDataMessage
• includeUserLocationOnPoiSelected – determines if the users current location should be included in the map bounds when a POI item is selected
• includeUserLocationOnPoiDisplayed – determines if the users location should be included in the map bounds when all the POI data is displayed on the map

Let’s update the values for our data

/***************************************************

* Various helper text

***************************************************/

waitText: "Finding parking lots near you ...",

poiDataAvailable: "Found {0} parking lots!",

noPoiData: "Unable to find parking lots :(",

noPoiDataMessage: "We could not locate any parking lots near your location.",

noPoiDataMessageTitle: "Parking lots Unavailble",

includeUserLocationOnPoiSelected: false,

includeUserLocationOnPoiDisplayed: false,

Mark also mentions that the config.js file allows you to configure the information that is shared from your app if a user selects the share charm for a particular location. You can configure the data that will be shared.

/**************************************************

* SHARING CONFIGURATION

*

* available tokens:

* nameField: this is the nameField element of the given point.

***************************************************/

shareTitle: "Finder App",

shareText: "I'm at {{nameField}}",

shareDescription: "Finder Share Description",

Since the nameField contains the address of my parking lot, and I think that’s useful information to share, I only need to update the wording.

shareTitle: "Find a Toronto Parking Lot",

shareText: "I'm parking at {{nameField}}",

shareDescription: "Sharing selected parking lot",

Below you can see how the shared data appears if you choose to share it by email.

Next I should update the text that appears if someone brings up the About page under the Settings Charm

/***************************************************

* About Flyout text

***************************************************/

aboutText: "This application is built on top of the <b>Finder App Template</b>",

copyright: "RedBit Development © {0}".format(new Date().getFullYear()),

version: RedBit.Utilities.appVersion(),

versionFriendly: RedBit.Utilities.appVersionFriendly(false),

contactUsText: 'If you have any comments or suggestions for {0}, email us at <a href="mailto:support@redbitdev.com">support@redbitdev.com</a>'.format('Finder.Config.appName'),

So if I update the fields

aboutText: "This application is built on top of the <b>Finder App Template</b>",

copyright: "HockeyGeekGirl © {0}".format(new Date().getFullYear()),

version: RedBit.Utilities.appVersion(),

versionFriendly: RedBit.Utilities.appVersionFriendly(false),

contactUsText: 'If you have any comments or suggestions for {0}, email me at <a href="mailto:xyz@microsoft.com">HockeyGeekGirl</a>'.format('Toronto Parking Lots'),

Now my About page looks like the screenshot below.

Customizing logos and the splash screen

Setting logos

If you expand the images subfolder you will see the files used for the logos and splash screen. If you replace these files with new images with the sizes specified below, you can display your logo for the tiles and splash screen.

• Logo.png - 150x150 pixels - displays on the tile on the start screen
• Smalllogo.png – 30x30 pixels – displays on the tile on the start screen if you zoom out
• Splashscreen.png – 620x300 pixels – displays on the screen when you start up your app
• Storelogo.png – 50x50 pixels – displays in the windows store when someone is looking for your app
• Pin.png is the image used for the pushpin, you can change this if you want, or leave it as is.

You can use a tool like Paint or Paint.NET to resize your logo. Paint .NET will keep transparency.

Setting names and colors

If you open the file package.appxmanifest in Solution explorer.

Navigate to the tab called Application UI and specify your own values for fields that affect the appearance and name of the application.

Display Name – the name you want displayed in the store for your app

Description – the description of your app

Scroll down to the Tile fields and specify a Short name for your app to display on the Start Screen tile.

You can also specify a background color for the tile and whether you want the text on the tile to be dark or light.

Scroll down to the splash screen fields, you can change the background color here so it better matches the image you selected for your splash screen.

Navigate to the Packaging Tab

Set the Package Display name to the name you have given your app

Set the Publisher Display name to the name of your Windows 8 store account

Adding a privacy policy to the app

Because your app accesses used location and connects to the internet you require a privacy policy. The privacy policy explains to the user what data your app collects and how the data is used.

The easiest way to support privacy policy is to create a web page with your privacy policy and then navigate to the folder js and open the file default.js

Find the code that defines the settings page for the application

app.onsettings = function (e) {

e.detail.applicationcommands = {

"settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

"about": { href: "/pages/about/aboutflyout.html", title: "About" },

"privacyDiv": { href: "/pages/privacy/privacy.html", title: "Privacy Policy" },

};

Now comes the fun part, because you need to create a page in your app for the privacy policy. You can do a little cut and paste and create a page based on the files used for the About page (AboutFlyout.html) and so on. Then update the HTML to contain text that describes your privacy policy. You will also need to make sure the <div> tag in your HTML page matches the <div> tag after the <body> statement of your HTML file. There is a blog that explains where this code is located here.

Here is the code after I added the privacy policy flyout to my app.

app.onsettings = function (e) {

e.detail.applicationcommands = {

"settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

"about": { href: "/pages/about/aboutflyout.html", title: "About" },

"priv": { href: "/pages/privacy/privacyflyout.html", title: "Privacy Policy" },

};

Here is the relevant code from inside my HTML page showing the div tag that matches the label I specified in the javascript code.

<body>

<!-- BEGINPRIVACYFLYOUT -->

<div id="priv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Privacy settings flyout">

I wasn’t exactly sure what to put in my privacy policy, so I looked at a few similar apps in the store and used their privacy policies as a starting point.

NOTE: When you publish your app to the store, in the Decription section you will be asked for a URL to your privacy policy. So you will need to set up a web page with the same privacy policy you included in your app and provide the URL that points to that page when you submit your app to the store. I had a wordpress blog so I just added an extra page to my blog with the privacy policy. You can also create a free website using Azure if you don’t have a site set up already. Tim Heuer wrote a blog post about how to do it http://timheuer.com/blog/archive/2012/09/26/use-azure-free-web-site-for-windows-store-app-content.aspx

Now I can publish my app to the store!

So in summary, the template works, and creates an app with very good functionality, you don’t have to be an experienced programmer, but you do have to be comfortable opening up and editing the code in the files. An experienced programmer could do a lot more in terms of customizing the data displayed and the types of data sources supported.

NOTE: The WACK test told me my launch time was too slow for some devices. So in order to pass I was unable to support ARM devices. I selected x86 and x64 packages instead. Disappointing because I think this sort of app would be popular on the smaller tablets. I will pass this along to the team who built the template in case it can be fixed. It is also possible that this performance issue varies depending on the data source you select for your app.

Having never used Blend before I was amazed how fast and easy it was to create my simple app.

 

The source code for this Windows 8 app and many others can be found on my GitHub (http://bit.ly/17NwuAw)

After joking with a friend of mine, we came up with a fun little app that would tell you your fortune, we called it “Cookie fortune”. This oracle disguised as a chocolate chip cookie was something I thought would be easy to implement and would be a fun app to make.

• Why I built my app with Blend (instead of Visual Studio)
• Adding the artwork
• Adding the Fortune cookie logic
• Adding Share
• Adding Snap view

 

Why I built my app with Blend (instead of Visual Studio)

After deciding on a language, C#, my next step was research. I was looking for the fastest way to create the XAML layout I wanted for my app. This is where I bumped into Blend. I remembered briefly looking at Blend a few years ago but never really sat down and used it. Reading through the documentation I quickly discovered that it had some awesome features that should really speed up the design process. One of the biggest ones that jumped out at me was the fact that it’s a visual editor, what you see is what the user will see. I loved this because it means less compiling and running just to see simple changes. Another feature that also helps in this regard is Interactive mode. Interactive mode lets you design your apps in states that would normally only be available at runtime. No more guessing how snap view would make my app look. Add in the ability to drag and drop Windows app controls onto the design surface and I was falling in love. I was even more delighted when I realized Blend for 2012 was already installed (It’s comes with Visual Studio 2012 including Express for Windows 8 and free trial versions). To get a better feel for the tool I decided to follow along with the example “Design your first Windows Store app in Blend” (http://bit.ly/FirstWindowsApp) on the Windows Dev Center website. Within 30 minutes I had completed it. This made my confidence soar. I was ready to create my Cookie Fortune app with Blend.

Below are some highlights from the development of my app, but in no way is it meant to be a step by step guide. Feel free to download the code for a more complete picture.

I started by creating a new project and selected the blank app, because of the simple nature of my app it seemed like the best fit.

 

 

Adding the artwork

My next step was to change the background image to one that I had created. I imported it as an existing item Project>Add Existing Item or Ctrl+i. Then I placed the newly imported asset in the design view, the image below shows the result.

 

 

I then added three more images, one of the cookie whole and the two pieces of the cookie when it was broke.

My plan was to hide the two broken pieces when the cookie was being shown then to hide the cookie image and show the broken cookie pieces when the user clicked or tapped. This gives the illusion that the cookie breaks in two on the user’s input. The image below shows the cookie in its whole state.

 

 

 

Adding the Fortune cookie logic

I completed the cookie’s breaking ability by writing some basic lines of code. One big thing to note here is I never had to leave Blend to write the code, I actually wrote it right inside of Blend’s code editor.

Below is the code I used to make this happen.

 

 private void Grid_Tapped(object sender, RoutedEventArgs e)
        {
            if (isFirstTap)
            {
                if (ApplicationView.Value != ApplicationViewState.Snapped)
                {
                    //Hide the whole cookie
                    CookieWhole.Visibility = Visibility.Collapsed;
                    //Display the broken pieces of the cookie
                    CookieBrokenLeft.Visibility = Visibility.Visible;
                    CookieBrokenRight.Visibility = Visibility.Visible;
                    isFirstTap = false;
                }
            }            
            else
            {
                //Display the whole cookie
                CookieWhole.Visibility = Visibility.Visible;
                //Hide the broken pieces of the cookie
                CookieBrokenLeft.Visibility = Visibility.Collapsed;
                CookieBrokenRight.Visibility = Visibility.Collapsed;
                isFirstTap = true;
            }
        }

 

At this point I was on a roll I had dragged a dropped a few images wrote a few lines of code and in extremely little time I had a pretty cool breakable cookie. Next it was time to make the cookie dispense some wisdom. I quickly gathered together some fortunes from lists I had found on the web. I picked XML as my method of storing these fortunes and found a great example and information on how to parse the XML file using the XmlReader Class on the MSDN library website (http://bit.ly/KE9Ges). Below is a sample of the code I wrote to parse the fortune XML and add it to a the “fortune” list.

            string fortuneString = null;

            // Create an XmlReader
            using (XmlReader reader = XmlReader.Create("Assets//Fortunes.xml"))
            {
                while (reader.Read())
                {
                    switch (reader.NodeType)
                    {
                     
                        case XmlNodeType.Text:
                            fortuneString = reader.Value;
                            fortunes.Add(fortuneString);
                            break;
                       
                    }
                }   
            }

Adding Share

After writing a few more lines of code to make the fortune text appear when the cookie was in its broken state and disappear when the cookie was whole, I now had a fully functioning fortune telling cookie. I could hardly believe how quick I managed to get to this point. Since it was moving along so quickly I decided to add a feature. I thought wouldn’t it be great if you could share your fortune with others. With Windows 8’s share feature this was a snap. While still in Blend I added the following code to easily add the share function to my app.

 

        private void RegisterForShare()
        {
            DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
            dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,
                DataRequestedEventArgs>(this.ShareTextHandler);
        }

        private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)
        {
            DataRequest request = e.Request;
            request.Data.Properties.Title = "Cookie Fortune";
            request.Data.Properties.Description = "Share your fortune with your friends.";
            request.Data.SetText(FortuneDisplay.Text);
        }

 

 

Adding Snap view

My app was almost ready for the store it only needed one more feature to be complete and to pass the Windows Application Certification Test, snap view. Again to my delight Blend made this unbelievably easy. Like I said in the beginning, Blend has a very useful feature called Interactive mode. With interactive mode you are able to design your application in various states like snap, filled and full screen. Check out this link if your would like to know more about how to use Interactive mode (http://bit.ly/11xje4d). The image below is a screen shot of Blend while in the app is in the “snap” state.

 

 

As you can see creating a simple app is very fast using this powerful tool. In under 24 hours I was able to create my application, add custom layouts for the various states and even add the share contract feature. Blend can truly speed up your development time, I know I will be using it for designing my future applications.

Check out this great documentation for more information on getting started with Blend(http://bit.ly/18ESHSH) and as an extra challenge why not try using this as a starting point for creating a “Magic 8-ball” style application.

Happy Coding!

How do you submit a new version of an app to the Windows store after you have made updates to the code?

You’ve submitted your app, and now you’ve made some improvements based on comments or feedback from users, or maybe just because you had some time to improve it. Let’s see how you submit an update for your app!

I recently submitted an app to the store and I had to remove a feature because it wasn’t working. Later I had time to go back and finish up that feature, so now I want to update my app in the store. Here’s how you do it.

Log in to the Windows Store at dev.windows.com and go to the Dashboard.

Select Details for the app you want to update

When you get to the Details page, select Create New Release

You will need to upload a new package to the store containing your new code.

Go to Visual Studio, open the .appxmanifest file, go to the Packaging tab and increase the Version number, so it indicates this is a new version of your app.

You decide how you want to increment the version numbers, but here is some general guidance:

• Increment the Major number if you are adding significant functionality
• Increment the Minor number when minor features or significant fixes are added
• Increment the Revision number when minor bugs are fixed.

Now go to the menu and choose Project | Store | Create App Package and follow the prompts to build your new app package. It’s always a good idea to launch the Windows Application Certification Kit on your updated app to make sure it still passes the tests with your updates.

After you have built your new package, return to your app submission screen, select Packages, and upload the new package from your Visual Studio project AppPackages folder (REMINDER: the package is the file with the extension .appxupload).

When you submit a new version of an app, you must indicate the contents of your update in the Description section.

Enter a description of the update in the Description of Update field.

 

Although it is not required, if you are adding new functionality to your app, consider updating other fields that describe your functionality to users. You want to ensure potential users are aware of the full functionality of your application when browsing the store. Attributes you might want to updated include the Description, the App features list, or the Screenshots.

If you wish you may change other attributes of your app such as price, age ratings, but that is not required to submit the update.

After you have uploaded your new package, completed the description of update and made any additional changes you wish to make, select Submit for Certification to submit your updated app to the store.

Congratulations you have just submitted an updated version of your app to the store!

Take pride in your work, talk to your users, find out what they would like to see improved. Learn more about the capabilities of Windows 8 apps, could you create a live tile that shows current information on the start screen. Are you leveraging Search? Share? Could you improve the snap view? Check out Azure Mobile Services. Now that you have a handle on creating and updating apps the sky is the limit!

There have been a few really creative videos out there for Windows 8, when you want a smile and distractions, check out my favorite Windows 8 videos

I have no idea who created these or which ones are official, I just know each of them made me smile :)

If you know of any others let me know, I love creativity like this!

A Small Demonstration

 

The Live Tile Experiment

 

The Windows 8 Training Camp series

And to their credit, the first time I saw the Surface commercials I got a kick out of those as well

Surface Pro

 

I first saw this on a business strip in my hotel room, and when I got in the elevator to go out for dinner, and on the next floor a group of girls in school uniforms got in, I kept expecting them to start dancing around with a Surface.

The Imagine Cup is about giving students with great ideas a chance to shine! Meet the winner of the 2013 Canadian Imagine Cup who will represent us at world finals in St Petersburg Russia!

The Imagine Cup challenges students to use technology to do amazing things! This year there were three categories in the Canadian Imagine Cup Finals:

• Games – always interesting in Canada given our thriving community of game developers
• Innovation – somewhere out there is a student with a brilliant idea that could change an industry
• World Citizenship – using the technology we have available today to help others

The judges had a difficult task, review the best entry in each category and select one team to represent Canada at the world Imagine Cup finals in Russia this July. This task was made even more difficult by the caliber of the entries. Each team had already won a great Windows 8 phone from our sponsors HTC (check out the sleek HTC 8X) by taking first place in their respective categories.

The Contenders

The top games entry was a fun Windows Phone Game called Grumpy Tree. Mother Nature is tired of doing all the work to save the environment and has given up. You have to help the animals complete different tasks to help save the earth. The game has attractive graphics, lots of levels with different challenges, and great gameplay! Developed by team Greensource made up of students from Carleton University and University of Ottawa. I hope they put it in the store soon so you can download and play it yourself!

The top Innovation entry was a new twist on  the app to help you plan your shopping trip called YouSave. You chose the priority: environment, time, price? You enter your shopping list, the app compares prices, routes, and locations of stores and makes suggestions on where you should shop. This app was developed by a team from the University of Calgary

The top World Citizenship entry helps you stay healthy with Sano. Sano is a Kinect system that can either be used by physiotherapists to assign and track completion of exercises remotely, or can be used to give all of us who spend long days sitting in front of a computer simple exercises to complete to improve our health.

and the winner is…

Team Sano!

Omar Zaarour, Omar Addam, Tamer Jarada, Fatemeh Keshavarz from the University of Calgary along with their mentor Reda Alhajj, a professor at the University of Calgary, will all be flying to St Petersburg in July for the world Imagine Cup Finals.

What impressed the judges about Team Sano’s entry was not just what it can do right now, but also it’s future potential. Team Sano not only built an application using Kinect that can be used to review and track exercises, they also built a second application which can be used by physiotherapists or other health or fitness professionals to create and assign exercises. Admit it, when you have physio exercises you are diligent for the first few days, but then you start to forget. Imagine if your physiotherapist knew exactly how often you had completed your exercises and whether you had done them correctly! Imagine your mom being able to assign the kids 20 jumping jacks if they want to keep their video game privileges. 

See the entries and the keynotes online

Instead of describing the application, why don’t you see the applications in action, presented by the teams from the finals! You can view all the presentations from the Imagine Cup online here! (You will need to specify an email address and create a password to access the content). You can see the team presentations and more!

• Microsoft Canada president Max Long talks about the importance of Imagine Cup!
• Bryan Griffiths of Phantom Compass gives us a sneak peek into the mind and lair of a professional game developer and some insights on where game designers can find inspiration.
• Careerify CEO Harpaul Sambhi describes Homer Simpson as the ultimate entrepreneur
• Michael Furdyk, co-founder of Taking IT Global, a worldwide non profit with over 400,000 members talk about how his path from starting a business in high school, to the Oprah Winfrey show, to helping youth succeed around the world with Taking IT Global.
• Meet our amazing panel of judges in the Imagine Cup Kick-off: Bill Buxton advocate for innovation and design and principal researcher at Microsoft Research, Bruce Firestone entrepreneur and founder of the Ottawa Senators, Bryan Griffiths professional game developer at Phantom Compass, and Etienne Tremblay former worldwide Imagine Cup Finals judge and associate director and leader of excellence in charge of the Microsoft technologies center at Fujitsu Canada.
• And of course you can watch the presentations by each of our amazing teams!

Good luck in St Petersburg, Team Sano!

Congratulations team Greensource and team YouSave for winning the Gaming and Innovation categories!

Congratulations to all the competitors who entered Imagine Cup 2013 you did amazing work! Canada truly is a center of talent and innovation! You have great ideas, bring them to life! Remember, at Imagine Cup All dreams are welcome!