WatchBench Builds Fully Functional Apple Watch Apps In Javascript

Alpha Software intends to release a product for quickly building small apps for the Apple Watch called Alpha WatchBench. WatchBench will be free and runs entirely on the iPhone; no external computer is needed. The tool was created by Alpha Software’s CTO, a man you know of but might not know by name. Dan Bricklin, who created WatchBench, is also the inventor of the first spreadsheet software called VisiCalc in 1979.  While Bricklin has given ProgrammableWeb an exclusive pre-release preview of WatchBench, developers must know that, as an iOS app, it is still pending Apple's approval for release in the App Store (update 6/5/15: Bricklin notified ProgrammableWeb that WatchBench is now listed in the Apple App Store). The outcome of that process could yield changes to WatchBench's final feature set.
WatchBench screenshot
The apps you build with WatchBench are essentially prototype apps — but they are indeed fully functional apps. You can’t sell them on the Apple Store however, because they’re not native apps; you need Watchbench running to be able to run your apps. You develop your app as simple JSON configuration files and JavaScript code that you edit right on the iPhone itself. You can then save your apps as projects. You can have multiple projects, and WatchBench even comes with several sample apps.

All watch apps — whether developed on WatchBench or not — need to run in conjunction with an app on an iPhone that the watch is paired with via Bluetooth. Apple designed the watch architecture such that the watch itself doesn’t run the apps; the code that responds to events, for example, runs on the paired iPhone. The part that runs on the watch is called the app, while the part that runs on the iPhone is called the extension. Indeed, Scott Stein at CNET called the relationship symbiotic.

WatchBench takes care of this behind-the-scenes aspect to Apple Watch development. The IDE includes a text editor on your phone where you enter your JSON and JavaScript code. The text editor has a row of buttons at the bottom that provides shortcuts to insert code snippets and special characters that are hard to get to on the keyboard. (You’ll probably want an external keyboard since the on-screen keyboard leaves you with less room for the editor.) A button at the top of the editor syncs your code to the paired watch so you can try it out.

The IDE splits the screen in half, with the editor on the left, and a help screen on the right. When you create a new project, the IDE creates a set of skeleton code for you that provides an easy starting point.
WatchBench screenshot
As you build your code, the right half of the screen shows a help page that guides you along. One page of the help includes several controls such as pages and buttons you can add to your app: tap on one of these and it inserts JSON code that defines the UI element. The code gets inserted at the point in the code editor where your blinking cursor is. So, for example, to add a button to your code, you open up a JSON configuration file that describes your app; then you click a button in the help file, and the code for the button gets inserted in your JSON code. Then, when you run your app, you’ll see the button appear on your watch. There are elements for pages, labels, buttons, menus, switches, sliders, and tables.

The code that gets inserted is a member of a configuration object. Here’s some example JSON code for the button that gets inserted:

{

           "button1root": {
           }   

}

The outer object is the configuration object for your app. The inner object is the UI element, which has been given the member name button1root. This inner object can have several members that describe the UI element; you can add any of them yourself. The help file lists them all, such as:

name: "MyButton",
text: "Tap here"

These would give your button a name MyButton; you then use this name to refer to the button in other parts of your code. The text member gives your button the text “Tap here.”

At any time, you can save your code and test it out. The editor will first do a scan looking for syntax errors and notify you of errors.

Like any good UI framework, you can include code that gets called in response to events. For example, if you want to add code that runs in response to clicking a button, you can do something like this:

AWB.buttonAction = function(buttonname) {
   AWBlib.log("Button " + buttonname + "tapped");
};

This is the button action code, which runs in response to a button. This code in particular calls the log function, which is part of the AWBlib object in the WatchBench API. When you run your app, you can open a log window on the iPhone that displays these log messages.

WatchBench includes an entire API for building UI elements, as well as for fetching data from remote servers via a URL. There are also functions for reading local files, obtaining the current GPS coordinates, and, of course, getting the current time. For example, you can fetch JSON data from a remote website and then use that data in your app. WatchBench includes a sample app that reads customer order data from a web server, and displays a list of customer orders on the watch. You can tap on a customer right on the watch and the watch will display details for the order.

Conclusion

History has shown that the only way a personal computer can survive is if there are plenty of developer tools readily and easily available. Although Microsoft and Apple took different paths on how software was developed for their PC operating systems, they made sure not only that developers had easy access to development tools, but also that developers were well aware of the opportunities and encouraged to create software. The same is now true with phones, such as the Android and the iPhone. When there are lots of developers, there are lots of apps, and the hardware sales will flourish. If there isn’t much software, the hardware won’t survive.

The Apple Watch has received a huge amount of coverage over the past couple of months that has focused on what the watch can presently do. But what about its potential? As with other devices, Apple has created a developer kit for the watch, although Apple’s encouragement to develop for the watch hasn’t been as active yet as with previous devices. However, the tools are there; they’re just not necessarily the easiest tools to use.

Is this the ultimate tool for developing for Apple Watch? No, and that wasn’t Alpha Software’s motivation in creating WatchBench. The team built WatchBench initially for themselves so they could get a feel for the needs of business customers who might need Apple Watch software; then, after feedback from their customers, they could enhance their flagship product, Alpha Anywhere, to support the Apple Watch. But because this tool is so useful, they decided to release it as a free app. So at present, if you want full functionality and the ability to build watch apps that you can sell in the app store, you’ll need another tool. Apple’s official IDE, xCode, is the tool you’ll need. There are also other options starting to appear out there. Telerik, for example, provides a tool for writing cross-platform JavaScript applications that run natively on several different devices; the apps you build can then be sold in the app stores. Although they haven’t officially released a version for developing for Apple Watch, they have indicated in their blogs that they intend to do so. Also, Apache Cordova now has a plugin that allows you to extend your iPhone apps built with Cordova to display messages on the Apple Watch.

Meanwhile, if you need a tool that lets you quickly test out some ideas without much trouble and see immediate results on the Apple Watch, WatchBench is a great way to go.

Jeff Cogswell

Comments

Comments(2)

rrabins

The app is now in the Apple App Store