I am continuing my series on using Twitter’s Bootstrap CSS and JavaScript library with the Asp.Net Mvc 4 Framework. Here’s the rest of the series, and today’s instalment of the video is here:

User “arun” wrote in on my previous post, asking about a problem with the rendering of the navbar when the responsive design elements kicked in. I fired up the project to see what was amiss.  What I found when I made the browser more narrow was this:

What’s with that white space?  Here’s what we _really _want:

Yay! No whitespace! How did we make it happen? Turns out it’s quite easy, just make your layout header look like this:

    <style>
        body { padding-top: 60px; / 60px to make the container go all the way to the bottom of the topbar / }
        .aligntobottom { bottom:0; position:absolute; }
    </style>

@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/Bootstrap")</pre>

Notice that we’re moving the Bootstrap library below the body padding style so that we can get around a CSS conflict.

Don’t forget to watch the video above for a gem in there on getting the authentication bits going!

What’s Next?

For next steps, here’s some things to try out:

• Check out the other instalments in this series
• Download the RTM version of the Mvc 4 Framework and build the site out with posts from the series
• Follow me @CanadianJames to find out when new articles/videos are posted in this series

 

Catch you on the next post, thanks all for your comments and questions!

I’ve been presenting for over a year now and I can honestly say that one of my favourite sessions to have taken part in so far was this past week at the Prairie IT & Developer Conference in Regina.  Chad McCallum, a regular contributor to the tech scene in Regina, was presenting his web services session, and I was to present a talk on Web API. We realized before the conference that there was going to be a lot of conceptual overlap, so we made the call to merge the sessions and deliver some awesome.

The Setup

So here’s how we did it: Chad’s talk normally revolves around him demonstrating how easy it is to build out web services in the .NET world, not only with Microsoft tech, but with libraries available through the open source community as well. Other times he’s presented, Chad demonstrated a console app where he consumed whichever service he was building so that the audience could see the service in action.

For our tandem presentation, we decided on a twist: while he was writing the service, I would use a copy of the pre-built service and build a client or a service call through some kind of tooling.  The catch? The audience got to pick what I would be using.  As he was about to start building his service, the audience picked from a list of possible clients that I would build, and I had anywhere from 4-10 minutes to consume the service.

Here’s the client list the audience got to choose from:

• WinForms
• Asp.Net MVC
• Console App
• Windows Phone App
• Browser Request
• Fiddler Request

And the services Chad was building were:

• Asp.Net ASMX Web Service
• Asp.Net MVC 3 (JSON result)
• Asp.Net MVC 4 Web Api
• WCF
• WCF REST
• WCF AJAX
• Nancy
• ServiceStack

I’m intentionally not linking to documentation on the first two because if you are starting a new project, there are very few reasons why you would start there. If you’re already building in those spaces, you’ll know how to get the resources.

The fun part was that with almost 50 permutations there was no way we were going to build these out ahead of time, so this was all live-in-front-of-the-audience coding.  Chad built the services, I built the clients, all in front of almost 50 sharp and scrutinizing devs. It was awesome.

The Result

For the most part, everything turned out great!  We had a couple of glitches as I’ll describe below, and we geeked out a little too much in some areas so we only got through 7 of the services, just 1 short of our goal.  Here’s what didn’t go quite as expected:

• The pre-built services used a simple ECHO method, but during the presentation Chad decided to go all rogue on me and use a .ToUpper in his service method.  Even though I finished the client in time – and it worked – the audience picked up real quickly that the text returned and displayed on my client was not converted to upper-case. There was no slight of hand here, just a crossed wire. Full credit to Chad for going further on demonstrating a more interesting method, and even more to the gentleman who picked up on it!
• When I built the Windows Phone app and tested quickly before showing the result, I had tested with the word “Regina”, and it worked a treat. But when I demo’d the client for the audience, I punched in “Hello, Regina…”. Unfortunately, I didn’t URL-encode the request, so the punctuation threw off the request/service/response love and it errored out on me.   I quickly found the mistake and reran the app to show it was working, but it’s worth pointing out that even in simple scenarios you’ll need to test with more than a simple “Hello” string.

What’s Next?

Well, Chad and I really didn’t dive too deep into the daily practical uses of these, or what scenarios the project types could be used in, but we did give the group a few things to chew on:

• Are you building something for internal use, or public use?
• Do you intend to open up your API?
• Do you plan on making mobile apps?
• What are your security considerations, and what do users authenticate against?
• What have you worked with in the past, and what do you plan on working with down the road?

Those are five simple questions that will help determine the approach to take for your project. Chad and I are both of the mind that JSON/REST services are probably what you are going to be looking for, but if you can disqualify this approach we presented a myriad of options and alternatives.

The Most Important Thing

What we really wanted to show is that someone comfortable with programming on the .NET stack can easily try these things out. If you count both our times, Chad building the service and me building the client, we took from 8 to 20 minutes to build BOTH sides of the equation. In less than half an hour you could be exploring any one of these service approaches with pretty much any kind of client.  So, go File –> New Project yourself some service love!

Want a Little More?

• Check out our slide deck that we used
• Check out the service code on GitHub (the client codes will be posted there too)

No Really, It Works!

Today I had the pleasure of presenting on Windows Azure Mobile Services at the Prairie IT and Developer Conference (known as Prairie Dev Con) here in Regina. It was great to see so many people out with such diverse backgrounds. We had people who develop on Android, Windows Phone, iOS and lots of .Net folks who are interested in building apps for Windows 8. 

I had a blast presenting…and getting an app up and running with a cloud-backend for the services side of things with a fully functional Windows 8 client is pretty great.  But I ran into one major snafu when I tried to get Push Notifications running and, subsequently, Windows Account authentication.

What Went Wrong

Preparing for the conference I had built out the demo app several times as I dove into WAMS and examined what was going on at each level.  Each time I would reset the environments by deleting the application and database and removing it from Live Connect Developer Center.  Things were fairly clean.

When I started the presentation things were going fine until I realized that I had forgot to reset after my last run through the night before.  When I logged into the management portal, I saw the app was still there, so I deleted the app (and database) and carried on with my demo. 

Unfortunately, when I got to enabling push notifications, the Live Connect Developer Center let me go about creating an app with the same name, and it did so without warnings or errors. Though I didn’t have time to solve it during the session (what a great group of attendees though, giving me some space to explore!), what I nailed down was this:  when I created a new app – with the same name – I think very simply that I ended up confusing Live Connect as to which app was which.

Further to that, authentication wouldn’t work either. Even though I discovered and deleted the second (well, I guess first) rogue app in Live Connect and verified that my app secret and package ID was correct, I still wasn’t able to authenticate. In the log files for the app in the WAMS portal, I was simple getting a message similar to “invalid client” without further explanation.

I was able to finish out the presentation and give them a sense of how things would have worked, and from the feedback in talking with some devs afterwards, it seems they were fairly forgiving

And So?

Do not create a second app in Live Connect Developer Center with the same name as an existing app.  This is bad and will break your stride.

I got back to my hotel room, deleted the leftover pieces from the demonstration and started again from scratch – this time giving a unique name to my app – and everything worked from end-to-end without hassle or hesitation – push notifications, Windows Account authentication and the whole like.  It took me 8 minutes.

There really should be appropriate error messages here so that you can make sense of what’s going on. Or, better yet, the Live Connect Developer Center should slap your wrist and tell you that there is already an app on your account with the same name.

But this one is easy to avoid. Just don’t duplicate your app names!

If you want to see for yourself how easy it is to get started, head over to the WAMS site and get started!

Thanks again to everyone who came out and please remember to fill in those evaluations!

Yesterday I had the pleasure of participating in HackRegina, an event organized by Chad McCallum and supported by HackDays.ca with a ton of sponsors.  There were about 40 people who came out to build apps and hack together solutions to solve the world’s problems.

Coming with neither a solid idea, nor a team, I was lucky enough to partner up with Johannes Lindenbaum. I think we actually ended up going with the first idea that we threw out there and just pushed through on a “this train must stay on the rails or we will not finish our project” track. 

And the end of the day, Johannes and I put together a complete geo-location based game called DiscovR, focused on the City of Regina, and ended up winning the prize for “Best Windows Phone”. We took home some loot to boot.  If you didn’t read that last sentence too carefully, I’m fully geeking out over the fact that we built a whole game in about 6.5 hours.

The Idea

Here is the basic idea: players compete for points, awarded for being the first to explore part of Regina. Each day, a new “goal” is posted to the game’s backend, and the race is on to check in at the new location and capture the most points.  After you’ve checked in, you get a chance to see all the local restaurants and pubs (based on your location).  Each check in reduces the points left for the next person who checks in, so the fastest onsite gets to climb the leaderboard the fastest.

All of this in the name of exploring the City of Regina.

The Build

In a nutshell, here’s all the APIs, SDKs, libraries and tools that we used to get the game running:

• Windows Azure Mobile Services

  *   This is how we got up and running quickly with our backend. We were saving game information within 30 minutes of starting our project.&nbsp; All our REST end points were automatically generated for us and WAMS takes care of all the CRUD operations for us. <li>[Eclipse IDE](http://www.eclipse.org/downloads/moreinfo/java.php)
  *   The best native app development environment for building Android apps. <li>[Android SDK](http://developer.android.com/sdk/index.html)
  *   Used to build the game client (used to play the game). Provides development libraries, an emulator and deployment tools for Android devices. <li>[Visual Studio 2010](http://www.microsoft.com/visualstudio/eng/whats-new)
  *   Building apps for .Net, Windows or Windows Phone, this is just what you use. <li>[Windows Phone SDK](http://www.microsoft.com/en-ca/download/details.aspx?id=27570)
  *   Helped us build the game manager, used to set new goals for the game players. Provides development libraries, an emulator and deployment tools for Windows Phone. <li>[Node.js](http://nodejs.org/)
  *   I wrote the game rules on the cloud, hosted on Azure. There's a layer to Azure Mobile Services that lets you intercept the CRUD operations to incorporate security, push notifications, dynamic model composition and more. All your server side scripts get to leverage Node. <li>[SQL Azure](http://www.windowsazure.com/en-ca/)
  *   This is the data store that backs Windows Azure Mobile Services. For the most part, we didn't even need to remember it was there, but when it came to resetting the database before our presentation, we were able to connect with SQL Management Studio and just execute the appropriate queries to clean things up. <li>[City of Regina Open Data API](http://openregina.cloudapp.net/)
  *   A municipal government that gets it – or is at least starting to.&nbsp; Great on them for making a ton of data available for free, public consumption. <li>[Yellow API](http://www.yellowapi.com/)
  *   This is where we got our data for exploring the neighbourhood after you've checked in for your points. <li>[Fiddler2](http://www.fiddler2.com/fiddler2/)
  *   A comprehensive tool that lets you compose and deconstruct HTTP messages.&nbsp; We used this – paired with dynamic schema in WAMS – to build out our first JSON messages and layout our data model. <li>[Silverlight Toolkit for Windows Phone](http://silverlight.codeplex.com/)
  *   A great little suite of components that help to make great looking apps for Windows Phone. 
  

 

Whew. Looking at that list, it’s hard to believe we built the game in less than a day. But it sure validates my statement about having no room for things going wrong!

What Went Wrong

We made smart choices early and spent some time thinking about the path of least resistance, and for the most part this served us well.  There were a few hiccups along the way.

• Android not playing nicely with HTTPS
• Windows Phone not reporting back meaningful error messages related to networking
• City of Regina “Point of Interest API” is a great start, but it provides no rich content about why the point is interesting
• Yellow Pages API gives you data like it’s 1999.  Seriously. Like, they wrote some XML in 1999 and then just wrapped curly braces around it and called it JSON.
• OAuth. I don’t need to say any more than that.
• OData web services wrap results in a “d” property…so you if want to deserialize the data you have to create an object representing the response, then have a property called “d” which is an array of the actual model. Blog post with samples are coming.

 

There was one other challenge.  Windows Azure Mobile Services provides this great wrapper for CRUD operations that allows you to use JavaScript (Node.js) and manipulate requests and responses. It’s a great model, but it’s not mature and the documentation is not at the level it needs to be at yet.  This wasn’t a problem with WAMS or Node, just a challenge in early adoption.  A big shout out to Tommy Lee and Jonathan Rozenblit of Microsoft for helping throughout the day to get me info, docs and articles.

The Android Client

The screenshots above are from the WP7 app that we considered to be the “game master”. It was capable of reading information from the Regina API and then – through authenticated REST calls to Windows Azure Mobile Services – set new goals for the players.

As for the Android shots below, I have no claim to these…the Android client was put together by Johannes and he was kind enough to send along the screenies. I’m certain that if there was an award for “best Android app” we would have won that as well.  Here they are! From left to right, you have the check in point where you reach the goal, the confirmation of your points, the tie in of activities to “check out” and finally the leaderboard.

   

A few more days and I should be able to catch up to Johannes!

World Peace and Other Take-Aways

Folks, a German boy and a Ukrainian boy worked side by side to build an Android game (with a Windows Phone admin console) running on Windows Azure.  There is Shalom in Regina.

I was surprised by the number of APIs that are out there, freely available. I was equally jarred by the diversity of apps that teams concocted at the event given that we were mostly working from the same APIs.  And this is really why these events shine; the exposure to other people’s creative process is quite valuable.

This was a great experience that I am going to do again. If you haven’t done a hack event before – and chances are you haven’t – I really recommend breaking down some barriers (or excuses) and just go out and do it. You get to work with interesting people and if you want to you get to explore some new tech at the same time.

Have a look at HackDays.ca or search for local hackathons to find an event near you.

Hey everyone in Saskatchewan!

I’m stoked to be running my Asp.Net Mvc Framework Dojo. We are going to be covering some great topics and diving deep into the development of a database-backed, membership-enabled, fully functioning web app.

This is a hands on session – I need you to bring your laptop along, and I highly recommend that you have the tools installed before you come. We have about 150 minutes, and if you spend the first 45+ minutes installing tools, you just won’t get as much out of it!

D’Arcy Lussier, director, general manager and philosophical guidance counsellor for Praire IT/Dev Con is graciously providing a Dojo prep area where you will be able to download the bits. But for you keeners, grab a copy of the following so you don’t have to miss any sessions and you can dive right in:

Visual Studio 2012 – This has everything you need. You can either grab a free 90 day trial edition or a completely free Express Web edition.

- or -

Visual Studio 2010 – But, you’ll need to add some “fresh” if you want to hang out with the cool kids. Make sure you have the following:

• Visual Studio 2010 SP1
• The latest version of NuGet
• Asp.Net MVC 4 _RTM Version _IMPORTANT – the project templates and tooling have changed. To get the most out of this dojo, I need you to have the final version of MVC4 running on your machine.

 

Just a quick note…while I am a totally huge Windows 8 fan and encourage you to try it out, for the purpose of this Dojo session I highly recommend running from Windows 7 (or boot to a VHD from Win8 to Windows 7). I will be demoing a tool that has not yet been updated to work with the new version of PowerShell on Windows 8.  If you are already running Windows 8 full time (like me!) then I will be able to help you out and we can work around it.

Really looking forward to meeting everyone and working through as much code as possible in 2.5 hours. See you there!

Home on the prairies! PrDC is the first event that I spoke at and have been doing so regularly since.  It’s great to be invited again to speak in my home province of Saskatchewan, and I’m looking forward to reconnecting with some folks I’ve met at previous sessions, talks, conferences and meet-ups.

This year promises to be a blast with two days of hacking before the conference even starts.  Make sure you bring a laptop (or a friend who has one!) and get ready to dive into some great tech with some great folks:

• Saturday September 29th

  *   Yuep! I’m getting up early (like 4am early) and making the hike out to Regina to be a part of the all day Hackathon. We’ll get together in groups of people smarter than me, then take advantage of APIs, open data sets and whatever we can get our hands on to make The Next Big Thing, or at least have a little fun trying to. <li>**Sunday, September 30th**
  *   I’ll be helping out at the Windows 8 Workshop and labs from 1-5pm.&nbsp; We will be taking over the Delta with the biggest ever Windows 8 coding session _**ever**_ to be held between Pilot Butte and Moose Jaw! You won’t want to miss out on this! 
  

 

During the conference I will be presenting a few times and running an MVC 4 Dojo. I’ve had a lot of fun in the past working with 5 to 45 people in the Dojo dating all the way back to when people still used MVC 3…my how time flies!   I’ve diversified a little this year…I’m covering Windows 8, Azure, Windows Phone and some web technologies that I’ve been doing for years. Here’s a run down of my sessions:

A Cloud-Based Backend for Your Apps – Integrated in Minutes (Really!)

Azure, Data-BI-Cloud, Windows 8, SoftwareDev

The best apps need a backend, and the best backends are Cloud-based. In this session, you’ll learn how you can leverage the new Windows Azure Mobile Services to add structured storage, integrated authentication, and even Push Notifications in literally minutes to your Windows 8 Store apps. > #### Application Design for Windows Phone > ##### Mobile, .NET, Windows Phone

In the past year, we’ve worked with hundreds of developers and designers interpreting the “Metro” design system for their own purposes. We’ve seen great interpretations, and others that aren’t so great. In this session, we’ll share with you the foundations of great Metro application design for Windows Phone, and how to use them to build outstanding applications that will stand out and get noticed… for good reasons. We will also be providing some general best practices for building great mobile experiences.

A Tour of the ASP.NET Web API

Web, ASP.NET MVC, SoftwareDev

Join us for an overview of the Web API on the Asp.Net stack and find out why developers from several disciplines - web, server, and mobile - are jumping on board. We’ll take a look at the difference between RPC-style web services and approaches that are RESTful, talk about why the Web API is important and where you can use it, and cover the differences (and similarities!) between MVC-style and Web API-style routing, authorization and authentication. We’ll have examples of model binding and serialization as well as content negotiation and media formatters and we’ll try to have a little fun along the way.

ASP.NET MVC 4 100mph Dojo

Web, ASP.NET MVC, Dojo, SoftwareDev

Fear not, tireless web warriors, you too can get started in the MVC Framework, it’s as simple as File -> New -> Project! Bring your laptop and take a break from Web Forms while we walk through the key components and add them to your battle arsenal. Know Ruby? Great! Cross train for a bit and get a good feel for what your .NET brethren are up to. A hands-on lab that will walk you through Razor, routing, model binding, filters, authentication and authorization, the MVC tool chain (including NuGet) and complimentary bits (like jQuery) to make your . We’ll build a site with all of the above. Come for the pattern, stay for the framework!

I look forward to seeing everyone out!  As always, I’ll share my slides, code and contact details at the end of the sessions, so you can dive in and start learning right away and always connect afterwards if you have any questions. It’s not too late to register if you haven’t already, you can do that here.