Aaron's Thoughts

I've been hit up recently for a lot of freelance work for mobile app development. Most are simple apps, needing a quick turn around and a cross-platform solution. I told a friend of mine a few months ago who was relaying one of these freelance gigs "It used to be that you had to hire a developer if you wanted to make even a simple website. Now there are a ton of tools that let people make their own sites. It seems like whomever figures that same thing out for mobile apps is going to make a pretty penny." I even contemplated and sketched out what a simple drag-and-drop jQueryMobile-based (with the new jQueryMobile Theme Roller) tool might look like. Well, I'm glad I didn't invest too much time in to that, because other people saw the exact same thing and went for it. Here are 4 mobile app building sites that I've come across just in the last month. Feel free to add more if you come across them.

UPDATE 11/9/2011: I've added Mobjectify to the list having been introduced to it by the creator.

iBuildApp - The first I came across but probably the most constrained to a template. They offer their service for free actually and seems like they make money if you need the assistance getting the app on to the iTunes store, of if it is a mobile web app they charge for hosting. Some how they are also able to build out native apps, again, you have to do the leg work getting your app on to the app store

Application Craft - They have an interesting take on this space by trying to be the simplest, all-in-one application development tool. The apps created in Application Craft are designed to work on all screens, desktop, tablet, and mobile using what I assume is CSS progressive enhancement techniques. In addition, they also let developers get in there and modify the underlying web code. The thing is, I think in an attempt to completely simplify, they sacrifice the UI experience on mobile, which is the hard to reach itch that most people have. I'm not really a fan of jQueryMobile on desktop screens, the UI feels wrong. The development tool reminds me of Visual Studio or Dreamweaver, which are not particularly inviting to non programmers. That being said, I'd consider using it and just design for the mobile and possibly tabled screens only.

Tiggr is another web-based IDE app obviously constructing a UI using jQueryMobile. They seem to be trying to tackle the whole app development experience even trying to tackle data service consumption. So often when people ask about creating an app, they are really asking for an app that connects to a web service of some kind. That's the same evolution that "websites" went through. First it was a company needing a 5-page, static content site, then everyone seemed to want rich data-driven capabilities. Tiggr is trying to pounce on that space first.

Proto.io - Ironically, it would seem like some of their UI controls are the most polished / most native-looking of the bunch. Yet, they are calling their finished products "prototypes". Go figure. From what I can tell, it's  a really polished experience from start to finish designing and testing an app.

Mobjectify is another tool aimed at the prototype space and provides a hosted space for a prototype to be edited by multiple people and shared via link. I followed the tutorial and also played with the tool free form and found it to be intuitive for someone like me, who knows about jQueryMobile and how that all works. I think a non-techy could build a prototype, but to accomplish the demo tutorial the user is getting their hands dirty with links, HTML5 storage, JSON stringification, and form tag posting. At that point, I don't see the user who could deal with that needing a web-based tool for the easy stuff, so I'd suggest Mobjectify try to either make those tasks easier for normal users, or emphasize the drag-n-drop capabilities more to the target audience (non-programmers or people collaborating with programmers).

On a side note, they did take the initiative to create a custom theme tool before jQueryMobile rolled out their own that looks great and is no more complicated than it needs to be.

Any others I missed worth taking a look at? What do you think of do-it-yourself app creator tools for consumers?

The iPhone has a great feature which lets web apps live side-by-side with native apps on the launcher. The user just has to visit the site once in their Safari browser and click the "Add to Homescreen" button. There are even some slick bubble popup frameworks that point the user to the right place:

http://code.google.com/p/mobile-bookmark-bubble/	http://cubiq.org/add-to-home-screen

However, once in fullscreen mode anchor tag links between screens might force the user in to Safari mode. To prevent this, do the page change in javascript, like so:

location.href = '../Home/';

This even works for links that go to a different domain, for instance if you are doing an OAuth to the facebook mobile login screen.

I recently launched Food Buster (www.foodbustergame.com) as part of the Apps For Healthy Kids competition. It's a web game that utilizes jQuery, Ajax, and JSON based web services to send information to and from the web server and the web database. When players come back to the game they pick up where they left off, logging back in to their account and seeing how many points they have.

I decided to check out the PhoneGap project in the hopes of reusing some of the code I had already done. A lot of people know and love web technologies,. I much prefer building my iPad app in HTML5, jQuery, and local storage databases using SQLite. The beauty of this all is Webkit. Phonegap is basically a full-screen web engine, and if you include the Phonegap.js file in your html page, you get access to phone hardware, native dialog boxes, some native UI elements, and on phones you get some of the phone functionality.

Before starting your phonegap app it's important to think through the strategy. It's a little bit of a paradigm shift to move an app from a server/client setup to it all built in to the device.

Here was my strategy for conversion:

Ultimately you'll have to decide how you break up your app, not all scenarios map the way I've done it. 

A couple more tips I'll share:

• the iOS devices implement their own action events, not onmousedown, etc. If you want a quick trick to map the touch events to the mouse events so you can use your favorite (jQuery drag-n-drop) UI frameworks, check out this code: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
• By default PhoneGap apps will scroll when you drag them around even if they don't fill the area. It's a dead give away that you are doing a web app. To lock your app in place: http://phonegap.pbworks.com/Preventing-Scrolling-on-iPhone-Phonegap-Applications
• Another dead give away is that the selectable copy / paste functionality. To disable this put this style on your parent div: -webkit-user-select: none;
• If you are having issues with your splash screen appearing twice, here's the fix: http://groups.google.com/group/phonegap/browse_thread/thread/9395413c85ce0618
• Use Safari to debug. Turn on the developer tools. The app appeared exactly on the iPad as it did in Safari
• Store static commonly used objects in .js files as JSON. They'll be globally available in your code and you get a clean object notation like foodData[i].Calories

That's it! enjoy iOS developing using the latest and greatest of web technologies and javascript frameworks!

In a surprise move, Apple has relaxed their restrictions on which tools and languages developers can use to build apps for iPad and iPhone they previously disallowed in section 3.3.1:

"In particular, we are relaxing all restrictions on the development tools used to create iOS apps, as long as the resulting apps do not download any code," Apple said in a statement released to the press. "This should give developers the flexibility they want, while preserving the security we need."

http://arstechnica.com/apple/news/2010/09/apple-relaxes-restrictions-on-ios-app-code-iad-analytics.ars

I'm now intrigued at the propsect of the following code-reuse possibility using the Mono framework in addition to Microsoft C#. With Apple easing this restriction, C# works on:

• iPhone / iPad - C# using MonoTouch (produced by Novell) - http://monotouch.net/
• Android - C# using MonoDroid (produced by Novell) - http://monodroid.net/
• Web Development - C# backend for websites (Microsoft/IIS) or Mono/Apache  - http://www.asp.net/mvc /  www.mono-project.org
• Windows Phone 7 - C# codebase for new phones. - http://developer.windowsphone.com/windows-phone-7/

With all of these tools, the goal is to reuse the functional (backend) code, and use the native UI (user interface) toolsets. For instance, on iPhone you still use Apple's user interface builder, but instead of combining that with backend code in Objective-C, you combine it with C# and the MonoTouch Framework(open-source .NET implementation). Same for Android, you combine it with Android's native UI builder, same with Phone 7. For the web, we use the MVC pattern which keep our functional code separate from our view (presentation code). Moving from the web to phones isn't a 1-to-1 switch, but some of our code could be cut / pasted.

But why C#? Aren't we playing in to the hands of the evil empire? Well, not really. I've said it before, C# is a great language that is as powerful as anything out there but lets developers write fewer lines of code. Like Java, we don't concern ourselves with low-level memory allocation and we get access to a powerful, tried and true tested framework for almost every web, client, server scenario you can find yourself in.

But C# isn't "free" as in "freedom", I hear. Well, more than you'd think. Microsoft released C# in a way that you, I, or for instance, Novell could freely implement the language and it is now a free ECMA standard language: http://port25.technet.com/archive/2009/07/06/the-ecma-c-and-cli-standards.aspx

As Microsoft's release explains it:"Under the Community Promise, Microsoft provides assurance that it will not assert its Necessary Claims against anyone who makes, uses, sells, offers for sale, imports, or distributes any Covered Implementation under any type of development or distribution model, including open-source licensing models such as the LGPL or GPL."

They even went so far as to apply these rules to their MVC framework, ASP.NET MVC.

Most businesses have to pick and choose to support more than one phone, which means a different code base and developer skillset. Web-based mobile apps are one approach, but are limited in capability so sometimes don't fit the need. I hope to see C# grow as a broader solution to cross-platform development.