Saturday, July 10, 2010

How A Microsofty Writes iPad Apps

I’ve just spent a few hours writing my first iPad app, without a Mac, and without Objective-C.  The app itself is nothing special, but the process let me play with a couple new toys.

Sencha Touch is an HTML 5 Application Framework just for developing HTML 5 applications that look and feel like native iPhone, iPad, and Android apps.  It’s based on ExtJS, a jQuery-like JavaScript library, so if you’re familiar with JavaScript and HTML, you can pick this up fairly easily.

WebMatrix was recently announced, and is a great, lightweight website editor that’s perfect for this sort of thing.  I use Visual Studio 2010 for most development I do, but WebMatrix offers a simple, get-out-of-the-way-and-let-me-play UI that’s perfect for hacking away at new code.  At some point, I probably will migrate to Visual Studio – WebMatrix offers a handy ‘Visual Studio’ button for just this occasion.  It ships with IIS Express, a lightweight version of IIS that allows you to quickly serve up folders with many of the bells and whistles of IIS. 

So, with those in hand, I was able to fairly quickly get a proof-of-concept iPad app running. Here’s how to get started yourself:

  • Install the new WebMatrix and IIS Express
  • Download Sencha Touch and copied all of the files into a WebMatrix site.
  • Modify IISExpress’s applicationHost.config to enable off-box requests.
    • Open C:\Users\{YOU}\Documents\IISExpress8\config\applicationHost.config
    • Comment out the binding element for your site
    • Add a new binding element using your machine’s name and a port of your choosing.  Here’s what mine looks like:
            <site name="Empty Site" id="386908880">
                     <application path="/">
                         <virtualDirectory path="/" physicalPath="%IIS_SITES_HOME%\Empty Site" />
                         <binding protocol="http" bindingInformation="*:8181:daniellaptop" />
  • Modify IISExpress’s applicationHost.config to enable the cache manifest mime type
    • Comment out the .manifest mime type (sorry ClickOnce!)
    • Add the following line: <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />
  • Restart WebMatrix, run as admin (This is required if you allow off-box access)
  • Turn off your firewall or open up the port you set above.
  • Add a cache.manifest file to one of the examples
    • Follow the instructions here to build the file
    • Here’s what mine, for the tabs example looks like:
  • Run the app to get IIS Express cranked up
  • Browse to the site on your iPad
  • Click the  “Plus button” and add to homepage
  • Stop the server or turn off the iPad wifi
  • Run the app from the homepage offline!

That’s it!  I have a few ideas for how I want to put this to use, so stay tuned for some real-world examples.

No comments: