Browse and debug an Azure web role website running locally on a mobile device

So, you’re developing an Azure website using a Web role, and now you want to see what that website looks like on a mobile device.

First, follow my instructions here to set up port forwarding for your website.

Once you’ve done that, assuming your mobile device is on the same network as your PC running the Azure web role, you should just be able to open the URL for the website in your mobile web browser – in my case this https://10.200.34.201:800/

If you need to debug the traffic between your Azure web role and the mobile device, you can do that using Fiddler or Charles proxy. Fiddler instructions here. Charles instructions here. And SSL instructions for Charles here, if your site runs on SSL.

If you need to manipulate the traffic between Azure and the mobile browser, you can use Fiddler’s custom rules to do that – in my case I had to inject a “IsMobile=true” header. Fiddler -> Rules -> Customize Rules. Locate “static function OnBeforeRequest” and add the following line to it. oSession.oRequest["IsMobile"] = “true”;

A custom tool ‘PublicResXFileCodeGenerator’ is associated… compiler warning

If you ever have a compiler warning saying

A custom tool ‘PublicResXFileCodeGenerator’ is associated with file ‘blah’, but the output of the custom tool was not found in the project. You may try re-running the custom tool by right-clicking on the file in the Solution Explorer and choosing Run Custom Tool.image001

To remove the compiler warning you can just remove the Custom Tool by clicking on the Resource file, pressing F4 to bring up the Properties and then removing the entry for Custom Tool. Easy.

image003

Browse a local Azure Web role from another computer

So, you’re developing an Azure website that runs as a web role, which means you use the Azure Compute Emulator when running it locally. And now you want to test or debug that local website in an older browser, such as IE8.

In this situation I have IE8 running on another computer (or maybe a VM), so I need to open up access to my website which is running locally.

Step 1. Find out your IP address – ipconfig. Mine is 10.200.34.201 (NB. I’ve highlighted the wrong field in the screenshot).
image002

Step 2. Find out which IP address and port the compute emulator is running on, by looking in the System Tray at the IIS Express icon. Note that even though I access the website locally on https://127.0.0.2:447 in my browser, it runs on a different IP and port in the emulator, https://127.255.0.4:448. I don’t know/care why.
image001

Step 3. Download and install Pass Port from http://sourceforge.net/projects/pjs-passport/. Yes it’s old but it does the job of forwarding ports nicely, which is what we need to do.

Step 4. Set up a Pass Port port forwarding rule with your IP address and any port (I’m using 800) to the IP address and port of the emulator. N.B. you may need to run PassPort as an Administrator if it doesn’t seem to be working.

image004Step 5. Open up that port (800) in the Windows Firewall:

image003

That should be it. Now you can connect on the remote computer to your Azure Emulator running locally. Obligatory screenshot of my site running in IE8:

image005

Beginner’s guide to add a toolbar to an iOS iPhone app with a Storyboard

I’ve been playing around with iPhone apps a little bit. I’m certainly no expert though, I’m still a beginner myself.

A basic task is to add a toolbar with buttons to your application using XCode.

Lots of samples online are using old versions of XCode. Allow me to demonstrate how to add a toolbar to an app, using XCode 4.2 with Storyboards.

Create a new Project

In Xcode, File -> New Project. Choose Single View Application. I named my application com.mattfrear.toolbars.

Add a toolbar

If you can’t see it, choose View -> Navigators -> Show Project Navigator.

If you can’t see it, choose View -> Utilities -> Show Object Library.

Open the MainStoryboard_iPhone.storyboard. Click on the View.

In the Object Library (which should be in a window at the bottom right of your screen), scroll to the bottom and choose Toolbar. Drag it onto the View. Your screen should look like this:

Screen Shot 2013-08-29 at 16.05.42

Wire up the button

Now we need to add some code which will be fired when the button is clicked.

Open ViewController.m. At the end of the file, before the last @end, paste the following:

-(IBAction) buttonClicked
{
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello world"
                                                    message:@"You clicked the button"
                                                   delegate:nil
                                          cancelButtonTitle:@"OK"
                                          otherButtonTitles:nil];
    [alert show];
}

This is the code which will execute when the button is clicked, and it will display a simple Hello World popup.

Our final step is to wire up the button to this method. To make this easier we can use the Assistant Editor.

In Xcode, go View -> Assistant Editors on Right. Then View -> Show Assistant Editor.

If your screen is small, you might want to go View -> Utilities -> Hide Utilities.

The Assistant Editor should have ViewController.h open. In the Assistant Editor toolbar at the top, it should say Automatic > ViewController.h > No Selection. In that toolbar, click on ViewController.h and choose ViewController.m from the dropdown.

Screen Shot 2013-08-29 at 16.30.55

In the main window, click on the toolbar we added to our View, then on our “Item” toolbar button. Now right click it to bring up the “Bar Button Item – Item” menu.
Under Sent Actions, next to selector there is a + button. Click that and then drag it to the buttonClicked method in ViewController.m.

Screen Shot 2013-08-29 at 16.34.40 (2)

Hooray! Now our toolbar button is wired up to the method. Let’s run our app to test it.

In XCode’s toolbar, next to the big Run and Stop button you should see a drop down. Choose iPhone Simulator, then click the Run button.

Screen Shot 2013-08-29 at 16.40.16

Woop!

Book review – Instant Meteor Javascript Framework Starter

Last year I started playing around with Meteor, a new javascript framework. I didn’t get much further than playing with and tweaking sample applications.

When it came time to start creating my own app in Meteor though, I was a bit lost. I didn’t really know where to start.

I was given a copy of Instant Meteor Javascript Framework Starter which I read over the weekend. The book was a good read – I especially enjoyed the opening chapters which covered what Meteor is and why it’s cool, better than the official Meteor docs cover.

It covered all the Meteor basics well, and I would recommend the book to anyone who wants to get started building their own app with Meteor. Reading it has gotten me excited about Meteor again!

RavenDB – Input string was not in a correct format

In a RavenDB ASP.NET MVC app I was recently working on, I was constantly seeing good ol’ System.FormatException – “Input string was not in a correct format”.

My entities all use ints for their Ids.

After a while I noticed (via the RavenDB Management Console) that my entities had Ids like “tab/123″, but previously the Ids were like “tab-123″.

The problem turned out to be that I had accidentally removed this line while doing some refactoring:


documentStore.Conventions.IdentityPartsSeparator = "-";

Once I put that back in I stopped seeing the System.FormatException and all was right in the world.

 

Retrieve child items with an integer ID in a many-to-many with RavenDB

I have a many to many relationship, like so

public class Movie
{
   public int Id { get; set; }
   public string Title { get; set; }
   public int[] ActorIds { get; set; }
   // etc
}

public class Actor
{
   public int Id { get; set; }
   public int Name { get; set; }
   // etc
}

When I load a Movie, I also want to load all of the Actors associated with that Movie.

This can be done using Raven’s Load<T>(IEnumerable<System.ValueType> ids) method, and casting the int[] to an array of ValueType, like so:

var movie = RavenSession.Load<Movie>(movieId);
var actorIds = movie.TabIds.Cast<System.ValueType>();

var actors = RavenSession.Load<Actor>(actorIds).OrderBy(x => x.Name);