“There’s an old Wayne Gretzky quote that I love. ‘I skate to where the puck is going to be, not where it has been.’ And we’ve always tried to do that at Apple. Since the very very beginning. And we always will.” – Steve Jobs
First a little background
Several years ago I was brought on to a project to test an ActiveX component on Windows. This was no simple little component. This was a medical transcription component that wrapped the Dragon NaturallySpeaking speech recognition engine, had advanced voice and text editing capabilities and could trade files with a back end Web server using a hidden SOAP communication layer. You could compile it into your project and interact with it using a large number of API calls – or, since it was ActiveX, you could drop it into a Web page (as long as you were going to use it on IE because of the ActiveX dependency) and interact with it through JavaScript.
At first I started testing it using C++ and C#. But then I discovered that most of our clients were using it in Web-based apps. So I switched my focus and decided to build a Web-based test harness in JavaScript. I was rather worried about this strategy. Even though I liked JavaScript, in the past I had learned the hard way that scripting languages are usually what I call “toy languages.” You can do simple little things with them – but don’t push it. Well over the course of a six year project I kept piling things on and had built up a rather extensive framework – and JavaScript never caved. Remember, this was IE and before the push to build new and better JavaScript engines. So I have no fear that todays engines can handle whatever I can throw at them.
Fast forward
You know how it is with computer languages. You grow apart. You move on. I’ve been spending a lot of my spare time since that project getting to know Objective-C, and rekindling my romance with Java to explore the Android side of things (as well as a ton of Java in my day job). I’ve also been spending a lot of time with Lua lately. Because of my interest in game programming I’ve also been spending a lot of time with the Cocos2D game engine as well as the Corona SDK (hence my involvment with Lua).
This aint your father’s JavaScript
I want to write mobile games. My original thoughts were that you had to go native. Get your code as close to the metal as possible. But then I started seeing all these stories of people writing games in HTML5 using new and improved JavaScript engines. So I decided to shelve my current projects and see just what mobile JavaScript can take (it’s the testing background).
What I have now are just hideous experiments, because I always leave the artwork to the end. So I have no elegant screenshots or videos to show. But trust me – I’ve built a prototype game using nothing but HTML5 and JavaScript and have been testing it on an iPhone 3GS, iPhone 4, a later model iPod Touch and both versions of the iPad. Since I’m developing on a Mac I also happen to test things on Safari and Chrome. Trust me – it can take it.
Development
For development all I’m using is Eclipse. I’ve mapped my workspace to a folder used by my laptops Web server and point my mobile devices to it.
To get the apps to act like a native app, I add an icon for the site to my mobile devices home screen (browse to your app, then from the popup menu option select “Add To Home Screen“).
For debugging on an iOS device (only works in the browser – not from the home screen) set Settings [app] -> Safari -> Developer -> Debug Console = ON.
Distribution
There are a number of ways to distribute an HTML5 mobile app.
- Host it on your Web server (all the latest browsers support some form of HTML5)
- Host it on your Web server, but wrap it up inside Facebook as an app
- Use PhoneGap (http://phonegap.com) to bundle it for app store distribution
- Create your own bundle using a WebKit controller (I have an old example here: https://github.com/mitchallen/TestWebApp01)
Resources
Besides searching your favorite book store for books on HTML5 and WebKit, here are some Web sites to explore:
The video above is from the article: Multitouch remote for a robot: 200 lines of JavaScript & Python.
Be sure to also check out his post: HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
A robot that flies like a bird
The video above is from the SparkFun tutorial WiFly Wireless Talking SpeakJet Server.
My day job involves automated software testing. One aspect of that job is testing Web Services.
What are Web Services?
Think of Web Services as a set of function calls (like an API or an SDK). But instead of calling a function within your program or a local library, you are calling a function on a Web Server. Just like with a function, you can specify parameters to be passed to a Web Service. You can also get a return value or multiple return values in the form of a response from the server. The response could be in any format, like JSON or XML which you could parse.
So you could design services like this:
http://myrobot/?action=forward&distance=5
That might generate a response like this:
{
“response”: “OK”
}
By taking this approach, you can control a robot from a Web browser on any device (laptop, smartphone, etc.). But you can also control a robot from with an application that wraps the Web service calls behind a UI.
For an example of how to do it, click the link in the video caption above.
You may also want to checkout the book Arduino Cookbook which covers this topic in more detail.
Free QR Code Generator
Besides building mobile apps, I also do Web site development. I gave myself a challenge to build a simple one page Web site that actually does something. Think of it as a Web-based app. Part of the challenge was to keep time and investment to a minimum.
To keep costs down, I used Google Sites. Since Google Sites don’t allow Javascript, I created a Google Gadget and embedded it. I could have kept the cost to zero if I didn’t use a domain mapping. But since I did, that made the total financial investment $11.75 (1 year domain registration + privacy).
You can find the site here: http://www.qrcodeqrcode.com
Mobile Game Workflow
I’ve noticed design themes in some popular mobile games that I’m incorporating into my own game engine. If you look at some of those games, such as Angry Birds, Cut The Rope, etc., you will see that they have a very basic structure:
1. Episode Menu
2. Level Menu
3. Level
The games are broken up into individually themed episodes, which contain multiple levels.
The levels are consistent with the theme of their parent episode. New episodes can appear free with updates, or purchased as an add-on.
The levels themselves also have a basic structure, which includes score displays, pause, level complete and episode complete menus as well as controllers which I will discuss later.