Phone App Development: Windows Phone 7

I attended a presentation at GLUG.net East Lansing & Flint last night on the Seven Deadly Sins for Windows Phone Developers presented by Samidip Basu. Thank you GLUG.net and Samidip for the great introduction to Windows Phone development.

Windows Phone 7 has some really great features. If you are a .Net developer, it doesn't take much to build a WP7 application. But that's not what blew my mind last night.

It's all about the infrastructure!

I've been teaching myself hybrid phone development for a couple of months. Since I cannot learn everything at once, I've focused on the phone application itself. I really want to have a single code base that is cross platform so I've been looking at hybrid development with PhoneGap. I know that eventually I'll bump into limitations this way and end up writing native applications. But you've got to start somewhere.

The throw-away application I'm using to learn is an "X Shop" application (where X is a coffee shop, pizza store, bakery, ...). It would give customers a mobile app to view the shop menu, select favorites, and place orders. The shop owner could push information like the coffee flavor of the day or other promotions to the customer. While brainstorming the features I'd like, I've started to consider how I'm going to implement the needed infrastructure for these features. Eventually, the mobile app would need to be part of an integrated solution. I think my code base just grew rather large.

The actual phone application has become the easiest piece of the puzzle. How am I going to interface with the point of sale application? Should I offer one? What about inventory?

Microsoft has created a really great enterprise infrastructure behind their phone. In future posts, I'll flesh out how this can be used to support my "throw-away" coffee shop experiment.

iOS App Development with PhoneGap and Spine Mobile: Coffee Shop App

After looking at several mobile application frameworks I’ve finally decided to use Spine Mobile and PhoneGap to build an application.


Most first applications should be tossed out. I'm learning new stuff and whatever I create in this first application is guaranteed to have, at best, a whiff of code smell (if not reek of it). I don’t want to be saddled with an application that will most likely be mangled by the time I’m done. It’s a proof of concept prototype, or at least it should be. This also takes away the pressure to make it perfect.


I need something more than a sample application, but nothing too complex. It should be something I can start small and build on while still being somewhat useful. I’d like it to perform at least the following functions:

• CRUD operations
• Navigation between modules
• Local data storage
• Auto-magic data updates from the "cloud"
• Some form of membership or identity

I think a simple coffee shop application should fit the bill. It can start out small, a simple menu for users to browse what’s available. Then I’ll add features as I go.

Version 0.1

• A home page with a logo
• A menu of available beverages
• Location and hours of operation information

Version 0.2

• A list of “my favorite” beverages
• Loyalty punch card
• Build a beverage (size, to go, flavors, etc.) 

Version 0.3

• Order a beverage and update my loyalty card

Version 0.4

• Coupons and/or promotions
• Management of coupons and/or promotions

and so on...

New Year Resolutions

It's that time of year again...


What is my quest: To update my software development skills.
What to study: Phone app development
What kind of apps: Eventually games, but let's start with something simple... 
Possible technologies: Native, Web, Cross platform?


Where to start? Well, I started by poking around the web for a few weeks looking at possible development frameworks and stacks. 


I have an iPod Touch and a Macbook so native Xcode was an obvious starting point. Although I still want to develop native apps with Objective-C, I'd also like to update my web development skills.


HTML5 web apps look pretty good. The cross platform issue is solved by using a web based app, but you run into issues with offline use. Client side HTML5 solves this, but how do you market it?


PhoneGap to the rescue. I can wrap client side HTML5 into a native app wrapper that can target iOS, Android, Windows Phone, etc.


There are a lot of frameworks available. SpineJS is still in the running but I think it needs a bit more work on the mobile side. I really like coffeescript, but as a "classically" educated developer (code for "get off my lawn") I feel it's necessary to understand the foundation layers. So, I'm starting with javascript.


To learn javascript, I'm going to follow a great series written by Alan Young at DailyJS.com called "Let's Make a Framework". 


Here's what my preliminary framework looks like. It's subject to change of course.

• PhoneGap/Apache Callback - native cross platform phone wrapper
• Javascript/Coffeescript - code
• BackboneJS/UnderscoreJS - MVC framework
• Jasmine - TDD/BDD
• Eco - coffeescript template markup
• Stylus - CSS markup
• Brunch - scaffolding (possibly)

iOS App Development with PhoneGap and Spine Mobile: iOS Example App

In my prior post, I made a simple modification to Alex MacCaw's mobile contacts example. Today I'll walk through the steps to wrap it with PhoneGap as an iOS application.

Detailed directions are available for setting up PhoneGap for iOS using Xcode. You'll also want to read Alex MacCaw's documentation on integrating Spine Mobile with PhoneGap. It's in the early stages of development so there is a bit of manual tweaking necessary.

Setup an Initial PhoneGap Project

Open a terminal and change to your spine mobile application directory. 

$ cd ~/Documents/spine.mobile.contacts

Create a subdirectory for your Xcode project. Alex suggests using ./build/ios within your spine project directory (e.g. ~/Documents/spine.mobile.contacts/build/ios).

Start Xcode and select the PhoneGap-based application template.

Enter your Product Name and Company Identifier. I chose MyContacts. Not very original, eh? 

Change the Scheme to iPhone 5.0 Simulator and run the application. You'll get a warning indicating the www folder is missing from your project and the iPhone Simulator will display an error message that index.html was not found.

Quit the iOS Simulator. Drag the www folder created in the project directory onto the project folder in Xcode. This will add a reference to it in your Xcode project. 

In the dialog box that pops up, make sure you check the Create folder references for any added folders option.

Run the project again and you'll get a default sample PhoneGap application with an alert in the iOS Simulator. It works!

Tweak your Spine Mobile Application for PhoneGap

You need to add phonegap.js to your spine mobile application. The current version is named phonegap-1.2.0.js. Make a new directory in the spine project directory called lib (~/Documents/spine.mobile.contacts/lib). Copy phonegap.js from the www directory (~/Documents/spine.mobile.contacts/build/ios/MyContacts/www) into the new lib directory. You also need to add phonegap.js to the libs section of the slug.json file.

{
  "dependencies": [
    "es5-shimify",
    "json2ify",
    "jqueryify",
    "gfx",
    "spine",
    "spine/lib/local",
    "spine/lib/ajax",
    "spine/lib/route",
    "spine/lib/tmpl",
    "spine/lib/manager",
    "spine.mobile"
  ],
  "libs": [
    "./lib/phonegap-1.2.0.js"
  ]
}

I also needed to modify the spine.mobile.contacts index.html page slightly. Change href="/application.css" and src="/application.js" to href="./application.css" and src="./application.js".

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8>

  <title>App</title>

  <link rel="stylesheet" href="./application.css" type="text/css" charset="utf-8">

  <script src="./application.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript" charset="utf-8">

    var jQuery  = require("jqueryify");

    var exports = this;

    jQuery(function(){

      var App = require("index");

      exports.app = new App({el: $("body")});

    });

  </script>

  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>

  <meta name="apple-mobile-web-app-capable" content="yes" />

  <meta name="format-detection" content="telephone=no" />

</head>

<body>

</body>

</html>

Compile your application with hem from the spine project directory.$ hem build

At this point you could test your spine mobile application using a browser. Just run hem server and browse to http://localhost:9294/. You can even use your iPhone/iPod Touch if your computer firewall will allow it. Run a command like ifconfig or look in your network preferences for your ip address (e.g. http://192.168.1.112:9294).

$ hem server

You need to copy the contents of the spine mobile project public directory (~/Documents/spine.mobile.contacts/public) to the www directory in the Xcode project (~/Documents/spine.mobile.contacts/build/ios/MyContacts/www). You'll need to do this after each hem build. I added a step to the build phase to automate this. You could also add a command to build your spine mobile project before it's copied. For now, just copy application.css, application.js, cache.manifest, favicon.ico, and index.html manually. 

Run the Xcode project again... Voila!

You now have a working iOS application. Future posts will include setting up icons, syncing data with a server, etc.

iOS App Development with PhoneGap and Spine Mobile: Example App

Alex MacCaw, the creator of Spine and author of O'Reilly's JavaScript Web Applications, has a simple example of a mobile contact application. We'll set this application up, add a little functionality, and eventually wrap it in PhoneGap as a iOS app for the iPhone.

There's an explanation on spinejs.com you can follow for a thorough explanation of the application. 


Let's get it setup and running locally.

1. Download the app from github.com. My copy is under ~/Documents/spine.mobile.contacts/.
2. Open a terminal and change to the spine.mobile.contacts directory.
   $ cd ~/Documents/spine.mobile.contacts
3. Install the local npm modules
   $ npm install .
4. Start the hem server
   $ hem server
   
5. Browse to the application at http://localhost:9294/

You should now see this...

Go ahead and add a few contacts. HTML5 local storage is used to persist the data.

Now, let's add a way to delete contacts. Open contacts.coffee located in the ~/Documents/spine.mobile.contacts/app/controllers/ directory with a text editor. We want to add a delete button to the ContactsShow class. ContactsShow is the controller for the panel that displays an individual contact when you click on a contact in the list view.

The changes are pretty simple.

class ContactsShow extends Panel

  className: 'contacts showView'

  constructor: ->

    super

    Contact.bind 'change', @render

    @active @change

    @addButton('Back', @back)

  

    # Delete button placed to the right with a callback 

    # to a delete function

    @addButton('Delete', @delete).addClass('right')

  render: =>

    return unless @item

    @html require('views/contacts/show')(@item)

  change: (params) ->

    @item = Contact.find(params.id)

    @render()

  # Delete callback function

  # Confirm the delete, then navigate back to the list view

  # If they change their mind, stay here

  delete: (params) ->

    if confirm('Are you sure?')

      @item.destroy() 

      @navigate('/contacts', trans: 'left')

  back: ->

    @navigate('/contacts', trans: 'left')

Save your changes. There's no need to restart the hem server. Just reload the site in the browser, hem dynamically picks up the changes with each request.

Click on a contact, the item view displays with the delete button on the top right.

Click the delete button. You should see a confirmation dialog...

Click cancel and you'll see the item view. Click ok, the contact is deleted and the list view is redisplayed.

In my next blog post I'll finish wrapping the app in PhoneGap.

iOS App Development with PhoneGap and Spine Mobile: Setup

You need to setup your development environment. 


Since I'm targeting iOS I'm obviously using a Mac with OSX Lion and Xcode 4.2. You can find help with installing Xcode at developer.apple.com. Done? Good.

Here's a summary of the setup. The various web sites have more details.

Install Homebrew
If you're familiar with Linux's apt-get you'll love Homebrew. Simplifies installation and update of the Unix-y bits and bytes for OS X. Homebrew installs to the user's local space so sudo isn't required.

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

Install node.js via brew

$ brew install node

Install npm
For some reason, npm has been removed from brew. Use curl to download and install it.

$ curl http://npmjs.org/install.sh | sh

Install Spine, Spine.app, and Hem via npm


$ npm install -g spine spine.app hem

iOS App Development with PhoneGap and Spine Mobile: Introduction

A friend of mine recently asked me if I knew how to write iOS applications. She has an idea for an app (don't we all). Well, iOS development is something I've wanted to do since I picked up an iPod Touch a couple of years ago, I just haven't made the time to do it. 

I recently started learning Node.js and the Spine MVC framework for HTML5 web application development. The last website I worked on was several years ago (ASP.Net 1.1) and I want to try something that's not in the Microsoft stack. I've done PHP in the past but didn't really want to try it again. Javascript is hot and CoffeeScript has a lot of bleeding-edge attention right now. Maybe I can get ahead of the curve.

Spine also has a mobile framework that supports HTML5 web sites targeting mobile devices. I finally got a on of the simple demo apps working this week. Pretty darn easy once the sample app and the current Spine framework were in sync. 

Once I got that working I noticed a doc describing integration between Spine and PhoneGap. PhoneGap wraps your HTML5/JavaScript app into a mobile device native application with access to the device API. You can also deploy the application to multiple platforms. It's also open source. Sounds winning to me.

In future posts I will describe how to develop an iOS native application using PhoneGap, Spine Mobile, and CoffeeScript. Since the frameworks are constantly changing, I intend to keep an up to date working copy.