We’re coming up on the annual Carolina Code Camp here in Charlotte and this year we thought it would fun to hold a hackathon leading up to the code camp, rather than simply run an all-day event at the code camp. Here’s your chance to develop a great app for Windows 8, elev8 your skillset, and potentially win some cool stuff Here are the details: The short version: develop a Windows 8 app, optionally attend some of our workshops, and submit it to the challenge. At some point you need to be in person -- either at one of the workshops, or at the code camp -- as we need to prepare the demos and verify you are human. Winners will be determined at the Carolina Code Camp. The details: This app challenge is open to all Developers Guild members and members from the local community. Download the free Visual Studio 2012 Express tools and other related SDKs here to begin developing your app. Apps entered will be voted upon at the Carolina Code Camp on Saturday, May 4, 2013 by the attendees and organizers. While it is strongly encouraged you attend the Carolina Code Camp to demo your application, you do not need to be present to win (you will need to arrange to pick up your prize, if you win). However, you must attend one of the Charlotte Windows App Developers workshops to demo and showcase your app prior to the code camp so we can have it loaded and ready for review. All apps must be original and new (published after 3/26) and must be submitted to the Windows store. In the event it’s not approved yet and publically available, send some screenshots to show the app’s current progress. The package files can be copied over to a demo machine, or you can bring your own machine the code camp to demo the application. Want some help developing your app? Attend one of the Charlotte Windows App Developers meetups. Prizes: 1st Place: Lenovo IdeaPad Yoga 11 and Nokia Lumia 820 Windows Phone. 2nd Place: $250 Visa Gift Card, Wedge Mobile Keyboard and Wedge Touch Mouse. 3rd Place: $250 Visa Gift Card As an additional incentive, the first 10 entries will receive a 4,000 XBOX Live Points card valued at $50! Also, don’t forget about the Keep The Cash offer from Microsoft. Earn $100 for every qualified app you enter. See site for more details.
Abstract: In Part 4 of of their “Using Windows Azure to Build Back-End Services for Windows 8 apps” series Peter Laudati, Brian Hitney and Andrew Duthie show us how to build the same game leaderboard service on top of Windows Azure Mobile Services. Tune in as Andrew demos for us how to get started as well as lays out what some of the +/- are for using Azure Mobile Services for this kind of service. Check out the full article here. Watch Part 1 | Part 2 | Part 3 After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)
Abstract: Back for part 3 in their series for “Using Windows Azure to Build Back-End Services for Windows 8 apps”, Peter Laudati, Brian Hitney and Andrew Duthie show us how easy it is to host services built with the ASP.NET Web API using the new Windows Azure Web Sites feature. Check out the full article here. Part 1 | Part 2 After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)
I’ve gotten a few requests about how to do a mashup in Dark Skies … so, thought I’d do a blog post on how it was put together.
First, what’s a mashup? A mashup is an application that combines data from multiple sources into what is, hopefully, a more useful or interesting way to view the data. They are often done as web applications because the data is often pulled from online sources. But, mashups are ideal for Windows 8 and Windows Phone apps, too.
Dark Skies is simply a mashup that combines 3 main sources of data. maps (from Bing), light pollution data (from sources like these: Save The Night, NOAA, and P. Cinzano), and favorite astronomy viewing locations and looks like so:
What makes this interesting is the level of zooming, so you get really specific:
Specific is good, but add in data sharing and you, hopefully, have an ideal mashup experience.
Overlaying pins is easy as the map. In fact, there’s a small sample on putting pins on a map here. The harder part is storing the data, and for this, Windows Azure Mobile Services works really well. I’ve talked about that in previous posts.
The light pollution data is available from a variety of sources but in this case, a high res version with a color that can be made transparent (black) is ideal.
Credit: P. Cinzano, F. Falchi (University of Padova), C. D. Elvidge (NOAA National Geophysical Data Center, Boulder). Copyright Royal Astronomical Society. Reproduced from the Monthly Notices of the RAS by permission of Blackwell Science.
There are two fundamental problems in overlaying the two: first, the image should be sliced into small tiles to make it bandwidth sensitive (the uncompressed TIF file is 200MB). The second is that the image doesn’t exactly line up. It’s close, but there are subtle errors that get introduced despite both maps appearing to be Mercator projections.
There are a number of tools that can help you solve this problem, but in this case, I used MapCruncher. It’s from Microsoft, and it hasn’t been updated since 2007, but … it works.
The idea is that MapCruncher can both transform/skew an image to fit the projection of the map, and carve it up into nice, little tiles. Let’s take the following image:
If I want to overlay this image at a specific point on the map. Let’s say that the two eyes should be where Lake Superior and Lake Huron are. In MapCruncher, we’d bring in the image as an asset, and start defining matching points in the image, like so:
It’s not until we hit the lock button near the bottom left that the image is scaled/skewed/transformed to fit. The closer an image is to being the same scale, the better/few points are required to get it look right. Once you hit the Render button in the bottom left, it will go to town and slice and dice the image up, based on the zoom depth requested. More on that in a second.
In this case, it generated some 92 tiles. When we preview the results, we can see the data is overlaid nicely:
The tiles produced are laid out and named format known as quadkeys. You can read a lot more about it here, but in short, each tile is scaled to fit the appropriate dimensions based on the current zoom level:
The pattern to this approach makes it very easy to know exactly what tile you need, and at what zoom level (detail). Additionally, all of these files can be stored in a flat data structure (like a folder) which makes storage quite simple. The best part is, Bing maps already knows how to build a quad key, so all you have to do is create a tile layer, and specify the quadkey as a parameter by putting it in curly braces, like so:
MapTileLayer pollutionTileLayer = new MapTileLayer();
pollutionTileLayer.TileSource = "myurl.com/{quadley}.png";
But, this isn’t quite ideal. One problem that I ran into is that if there are a large number of quad keys you don’t have (which is the case even in my app), there are a HUGE number of 404’s because the app has no way of knowing there isn’t a tile available for a specific quad key. While the user doesn’t directly see this, it’s a lot of wasted traffic and just not clean. The way to solve that is to roll your own GetTileUri handler.
In my next post, I’ll detail the steps involved in setting that up!
Abstract: Peter Laudati, Brian Hitney and Andrew Duthie are back for part 2 of their series and in today’s episode Andrew shows us how to deploy the OData Service for his Windows 8 app to Windows Azure as well as outlines the advantages and disadvantages to building back-end services via this approach. After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)
Abstract: Peter Laudati and Brian Hitney welcome fellow Developer Evangelist, Andrew Duthie to the show as they kick off their series on how to build back-end services for their Windows 8 apps using Windows Azure. Tune in for part 1 as Andrew gives an overview of the series and introduces some potential techniques you could incorporate as you build your back-end services. After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)
At the Columbia Windows 8 DevCamp this weekend, the topic of side-loading apps came up in a few different scenarios, but it was particularly appropriate during the app showcase. We had a number of developers working in the lab room, all competing to come up with the coolest app at the end of the day. During the showcase where developers pitch their apps to the audience, it works best to have all the apps on the same machine. Here’s the best way to do it without having to copy source code/solution files: From within Visual Studio, select Project > Store > Create App Packages: In one situation, where there happened to be multiple projects in the solution, these options were disabled. Why I’m not exactly sure, but you can also create the app packages by right clicking on the project in solution explorer, and selecting Create App Packages in a similar way: On the dialog windows that pops up, select No to build packages to upload to the store, as we’re not doing that: On the next screen, configure any path/build options (defaults are usually ok) and click Create: Once the packages are created, you’ll see the following folders: We can ignore the .appxupload files for now. For loading on another machine, we’ll need to copy either the x86 or ARM (or both) to the target machine (for the devcamps, we just pass around a USB key and have everyone copy the files there). On the machine you’d like to install the apps, run the PowerShell script (right click file, select Run with PowerShell). Of course, if you’re on a Surface or other ARM device, you’d need to run the PowerShell script from the ARM folder, otherwise use the x86: Once running, you may be prompted to install a certificate and need to accept a UAC prompt. You’ll then see the app install: Viola! The app should be installed on the Windows 8 Start Screen.
I’m happy to finally have the next update to Dark Skies in the Windows 8 store! In the initial release, I used Bing Maps to display light pollution data. In this version, I allow users to display and share favorite viewing spots, and spruced up the live tile with some cool info. The main page can display information about a pin on the map: Admittedly, there aren’t too many pins just yet, but it will grow over time. It’s not just favorite viewing locations – astronomy shops, user groups and clubs, and events can all be added. Also, the live tile now displays some useful moon info: The tile displays the current phase of the moon, as well as the rise and set times (if location services is enabled). The little + (or –) signs indicates the set or rise occurs on the next or previous day, so for me, the moon rises at 1:14 p.m. and sets tomorrow at 3:45 a.m. Technical Info This is a developer blog, after all. Everything in this release relies on Windows Azure Mobile Services (WAMS). The service for the live tiles is hosted in Windows Azure Web Sites, and Windows Azure Mobile Services does the authentication and single-sign on, and also serves notifications when new sites are added. For example, if there’s a new site added near any of the user’s home locations, a new tile with a Bing map is sent down as a notification, while the badge displays the total number of new nearby points since last run: It’s been a lot of fun to develop, and really, it would’ve been too much work without having WAMS to power everything. The bulk of the work was getting things to look just right, rather than fiddling with authentication code and developing a back end system. I’ve also been using TFS in the cloud to store source code, and do continuous integration with the Windows Azure Web Site (an ASP.NET MVC 4 controller that serves XML as tiles.)
What’s this? Another Windows Azure Mobile Services (WAMS) post?! In the next version of my app, I keep a record of the user’s Channel in order to send down notifications. The built in todo list example does this or something very similar. My table in WAMS looks like: Not shown are a couple of fields, but of particular interest is the device Id. I realized that one user might have multiple devices, so the channel then is tied to the device Id. I still haven’t found a perfect way to do this yet – right now, I’m using a random GUID on first run. In my WAMS script, if the point that is submitted is “within range” of another user, we’ll send a notification down to update the tile. I go into this part in my blog post: Best Practices on Sending Live Tiles. But what do you do if the channel is expired? This comes up a lot in testing, because the app is removed/reinstalled many times. I stumbled on this page, Push Notification Service Request and Response Headers, on MSDN. There is a lot of great info on that page. While I should have more robust solution for handling all these conditions, the one in particular I’m interested in is the Channel Expired response, highlighted below: HTTP response code Description Recommended action 200 OK The notification was accepted by WNS. None required. 400 Bad Request One or more headers were specified incorrectly or conflict with another header. Log the details of your request. Inspect your request and compare against this documentation. 401 Unauthorized The cloud service did not present a valid authentication ticket. The OAuth ticket may be invalid. Request a valid access token by authenticating your cloud service using the access token request. 403 Forbidden The cloud service is not authorized to send a notification to this URI even though they are authenticated. The access token provided in the request does not match the credentials of the app that requested the channel URI. Ensure that your package name in your app's manifest matches the cloud service credentials given to your app in the Dashboard. 404 Not Found The channel URI is not valid or is not recognized by WNS. Log the details of your request. Do not send further notifications to this channel; notifications to this address will fail. 405 Method Not Allowed Invalid method (GET, DELETE, CREATE); only POST is allowed. Log the details of your request. Switch to using HTTP POST. 406 Not Acceptable The cloud service exceeded its throttle limit. Log the details of your request. Reduce the rate at which you are sending notifications. 410 Gone The channel expired. Log the details of your request. Do not send further notifications to this channel. Have your app request a new channel URI. 413 Request Entity Too Large The notification payload exceeds the 5000 byte size limit. Log the details of your request. Inspect the payload to ensure it is within the size limitations. 500 Internal Server Error An internal failure caused notification delivery to fail. Log the details of your request. Report this issue through the developer forums. 503 Service Unavailable The server is currently unavailable. Log the details of your request. Report this issue through the developer forums. Obviously getting a new channel URI is ideal, but the app has to do that on the client (and will) next time the user runs the app. In the mean time, I want to delete this channel because it’s useless. In my script which sends the notifications, we’ll examine the result on the callback and either delete the channel if expired, or, if success, send a badge update because that’s needed, too. (Future todo task: try to combine Live Tile and badges in one update.) push.wns.send(channelUri, payload, 'wns/tile',
{
client_id: 'ms-app://<my app id>',
client_secret: 'my client secret',
headers: { 'X-WNS-Tag' : 'SomeTag' }
},
function (error, result) {
if (error)
{
//if the channel has expired, delete from channel table
if (error.statusCode == 410){
removeExpiredChannel(channelUri)
}
}
else
{
//notification sent
updateBadge(channelUri);
}
}
);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Removing expired channels can be done with something like:
function removeExpiredChannel(channelUri)
{
var sql = "delete from myapp.Channel where ChannelUri = ?";
var params = [channelUri];
mssql.query(sql, params,
{
success: function(results) {
console.log('Removed Expired Channel: ' + channelUri)
}
});
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
On my todo list is to add more robust support for different response codes – for example, in addition to a 410 response, a 404 would also want to delete the channel record in the table.
I was surprised, yet delighted, that Windows Azure Mobile Services uses a SQL database. Schema-less table storage has its place and is the right solution at times, but for most data driven applications, I’d argue otherwise. In my last post, I wrote about sending notifications by writing the payload explicitly from a Windows Azure Mobile Service. In short, this allows us to include multiple tiles in the payload, accommodating users of both wide and square tiles. In my application, I want to execute a query to find push notification channels that match some criteria. If we look at the Windows Azure Mobile Services script reference, the mssql object allows us to query the database using T-SQL and parameters, such as: mssql.query('select top 1 * from statusupdates', {
success: function(results) {
console.log(results);
}
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }In my case, the query is a bit more complicated. I want to join another table and use a function to do some geospatial calculations – while I could do this with inline SQL like in the above example, it’s not very maintainable or testable. Fortunately, calling a stored procedure is quite easy.
Consider the following example: every time the user logs in, the Channel URI is updated. What I’d like to do is find out how many new locations (called PointsOfInterest) have been modified since the last time the user has logged in. To do that, I have a stored procedure like so:
create procedure [darkskies].[NewLocationsForChannel]
(
@channelUri as nvarchar(512) = null
)
as
select c.ChannelUri, count(1) as NumNewLocations
from darkskies.Channel c
inner join darkskies.PointOfInterest p
on c.UserId = p.UserId
where p.LastUpdated > c.LastUpdated
and c.ChannelUri = @channelUri
group by c.ChannelUri
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Writing something like that inline to the mssql object would be painful. As a stored procedure, it’s much easier to test and encapsulate. In my WAMS script, I’ll call that procedure and send down a badge update:
function updateBadge(channelUri)
{
var params = [channelUri];
var sql = "exec darkskies.NewLocationsForChannel ?";
mssql.query(sql, params,
{
success: function(results) {
if (results.length > 0) {
for (var i=0; i< results.length; i++)
{
if (results[i].ChannelUri !== null &&
results[i].ChannelUri.length > 0)
{
push.wns.sendBadge(results[i].ChannelUri,
results[i].NumNewLocations);
}
}
}
}
});
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }This section of code only updates the badge of the Windows 8 Live Tile, but it works out nicely with tile queuing:
Note: this app is live in the Windows 8 Store, however, at the time of this writing, these features have not yet been released. In the next few posts, we’ll look at the notifications a bit more, including how to pull off some geospatial stuff in WAMS.