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 5 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 quickly add the ability to implement push notifications for his GameLeader Service using Azure Mobile Services. Check out the full article here. Watch Part 1 | Part 2 | Part 3 | Part 4 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 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)
This put a smile on my face today: void App_UnhandledException(object sender,
UnhandledExceptionEventArgs e)
{
throw new NotImplementedException();
}
.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; }
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.
Never too late to post! Here’s an episode of DevRadio Peter and I did on TFS Projects in Azure! Abstract: Peter Laudati and Brian Hitney are back for today’s show as they show us how we can integrate TFS (Team Foundation Server) projects with Windows Azure Web Sites. They also discuss Windows Azure’s latest price reduction for Storage as well as tee up new features in Windows Azure Mobile 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 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 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)
Lots of great events coming up in the Carolinas: 1/18/2013 Charlotte, NC: We’re hosting a Windows 8 “Office Hours” at the Microsoft Office. More info here. Essentially, if you’re looking for time to hack on a Windows 8 solution, work on ideas, test some stuff out, enlist some testers – we’re there for you. 1/19/2013 Columbia, SC: Windows 8 DevCamp. This event is really shaping up to be great! Interesting sessions, and hands-on time in the labs. If you’re in the area and want to get up to speed on Windows 8, or finally get around to starting or finishing that idea, be sure to come out. 1/22/2013 Charlotte, NC: The developers guild is hosting Phil Japikse, in town for the Columbia Win8 DevCamp. Phil will talking about ASP.NET MVC4 – from mobile features, the Web API, templates, and more.
First, many thanks to Chris Risner for the assistance on this solution! Chris is part of the corp DPE team and has does an extensive amount of work with Windows Azure Mobile Services (WAMS) – including this session at //build, which was a great resource for getting started. If you go through the demo of getting started with WAMS building a TodoList, the idea is that the data in the todo list is locked down to each user. One of the nice things about WAMS is that it’s easy to enforce this via server side javascript … for example, to ensure only the current user’s rows are returned, the following read script can be used that enforces the rows returned only belong to the current user: function read(query, user, request) {
query.where({ userId: user.userId });
request.execute();
}
If we crack open the database, we’ll see that the userId is an identifier, like the below for a Microsoft Account:
MicrosoftAccount:0123456789abcd
When the app connects to WAMS, the data returned includes the userId … for example, if we look at the JSON in fiddler:
The app never displays this information, and it is requested over SSL, but it’s an important consideration and here’s why. What if we have semi-public data? In the next version of Dark Skies, I allow users to pin favorite spots on the map. The user has the option to make those points public or keep them private … for example, maybe they pin a great location for stargazing and want to share it with the world:
… Or, maybe the user pins their home locations or a private farm they have permission to use, where it might be inappropriate to show publically.
Now here comes the issue: if a location is shared publically, that userId is included in the JSON results. Let’s say I launch the app and see 10 public pins. If I view the JSON in fiddler, I’ll see the userId for each one of those public pins – for example:
Now, the userId contains no personally identifiable information. Is this a big deal, then? It’s not like it is the user’s name or address, and it would only be included in spots the user is sharing publically anyway.
But, if a hacker ever finds a way to map a userId back to a specific person, this is a security issue. Even my app doesn’t know who the users really are, it just knows the identifier. Still, I think from a best practice/threat modeling perspective, if we can scrub that data, we should. Note: this issue doesn’t exist with the todo list example, because the user only, and ever, sees their own data.
Ideally, what we’d like to do is return the userId if it’s the current user’s userId. If the point belongs to another user, we should scrub that from the result set. To do this via a read script in WAMS, we could do something like:
function read(query, user, request) {
request.execute( {
success: function(results) {
//scrub user token
if (results.length > 0)
{
for (var i=0; i< results.length; i++)
{
if (results[i].UserId != user.userId)
{
results[i].UserId = 'scrubbeduser';
}
}
}
request.respond();
}
});
}
.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; }If we look at the results in fiddler, we’ll see that I’ll get my userId for any of my points, but the userId is scrubbed if it’s another user’s points that are shared publically:
[Note: these locations are random spots on the map for testing.]
Doing this is a good practice. The database of course has the correct info, but the data for public points is guaranteed to be anonymous should a vulnerability ever present itself. The downside of this approach is the extra overhead as we’re iterating the results – but, this is fairly minor given the relatively small amounts of data.
Technical point: In my database and classes, I use Pascal case (as a matter of preference), as you can see in the above fiddler captures, such as UserId. In the todo example and in the javascript variables, objects are conventionally camel case. So, if you’re using any code here, just be aware that case does matter in situations like this:
if (results[i].UserId != user.userId) // watch casing!
.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; }
Be sure they match your convention. Since Pascal case is the standard for properties in C#, and camel case is the standard in javascript, properties in .NET can be decorated with the datamember attribute to make them consistent in both locations – something I, just as a matter of preference, prefer not to do:
[DataMember(Name = "userId")]
public string UserId { get; set; }
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.