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" />
                 </application>
                 <bindings>
                     <binding protocol="http" bindingInformation="*:8181:daniellaptop" />
                 </bindings>
             </site>
• 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:
  CACHE MANIFEST
  icon.png
  index.html
  index.js
  phone_startup.png
  tablet_startup.png
  ../../resources/css/ext-touch.css
  ../../ext-touch-debug.js
• 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.