Sencha Inc. | HTML5 Apps

Blog

Sencha Touch App Contest 2010: An Interview with TravelMate

January 20, 2011 | James Pearce

Our Sencha Touch App Contest brought to life some of the most beautiful and innovative web-based mobile apps we’ve ever seen.

But if you’re like us, sometimes you want to get behind the curtains and find out how things were built. We’ve been interviewing each of the finalists to find out what was going through their minds as they developed their applications, and how they used Sencha Touch to bring these services to life.

http://jag.gr/tm Our silver medallist app was TravelMate, built by Mike Hardaker of Jag.gr. The application is an indispensable tool for travelers, providing both language translations and currency conversions, with the option to save the results to the phone’s local storage for frequent reference. (Check out TravelMate on your compatible handset or use the QR-code to the right to navigate directly to it.)

The judges felt this application demonstrated many of the strongest aspects of the Sencha Touch framework (including web service API access, local storage, and flexible theming) — as well as being just a downright useful application, and a great demonstration of what can be done with web technologies alone.

Mike Hardaker

Building a full product to a tight deadline is, for me, the perfect way to learn a new technology.”

Mike is busy preparing TravelMate for deployment in the Apple App Store. He kindly spent some time telling us about how the app was pulled together for the contest.

Q: Mike, what motivated you think about building the TravelMate mobile service in the first place?

To be honest, it was the Sencha Touch app contest itself. I’d been evaluating various cross-platform mobile technologies and had decided that Sencha Touch looked much the best of the bunch for my needs — the only problem was that I needed to learn the framework from scratch! The contest came along at just the right time: building a full product to a tight deadline is, for me, the perfect way to learn a new technology.

I’ve been a keen user of Google’s translation tools for some years (and have used the API before) but wasn’t that impressed by Google’s own mobile implementation — and that’s where the idea for the actual app started. Its evolution then had two driving forces: “What will I find useful in the app?” and “Which bits of Sencha Touch do I most want to learn?”.

Sencha Touch app TravelMate, screenshot in iPhoneQ: Was it easy to decide between using native or web-based technologies for your mobile projects?

Two words: “cross-platform”. Given the choice between total re-coding or a minor re-write to port an iPhone app to Android (or other platforms), the decision gets very simple — for apps that don’t really depend on device-specific functionality, anyway.

Q: How did you find Sencha Touch to work with?

I was attracted to the use of web-based technology in a genuine application framework. Although you can dress up a website to look quite like an app, application development really benefits from a different approach to web development: life’s a lot easier if your toolkit has an application-centric approach even if the languages and underlying are the same as those used in a web environment.

On the whole, Sencha Touch was great to work with. The only real issues came from having to deal with the framework prior to its official release: rapidly-changing versions of the library, and documentation that didn’t always quite keep pace with the code. But I’m working with Sencha Touch 1.0 on a daily basis on several new projects, and I’m very happy with the results.

Q: How do you source the data? Do you provide any server logic at all?

For the translation, Google’s JavaScript language API is used in a pretty standard manner. For the currency conversion, the data comes from the European Central Bank. However, the ECB data is an XML feed, so I wrote a little bit of PHP on the server that consumes the XML (and caches it, since it’s only updated daily on weekdays so there’s no point in making unnecessary calls) and then spits it back out as JSONP in a form that Sencha Touch can process.

Initially, I had the actual conversion logic on the server, but I rapidly moved that down to the client for performance reasons — so the app grabs the raw exchange rate data in JSON format via a simple API (and, again, caches it locally in a localstorage Ext.data.Store), and then does the calculations using that data store.

Sencha Touch app TravelMate, screenshot in iPhone

Q: So tell us about the app itself. How is it structured, and what components did you need to use?

Structurally, it’s pretty simple, although there’s a little more in it than meets the eye. There are four panels managed via an Ext.TabBar — translation, currency conversion, saved items and “More?”. A shared Ext.ToolBar runs along the top.

The translation panel includes a custom text-entry field, necessary because I needed the field-clear icon to have some custom behavior that wasn’t possible with the standard item.

With the currency converter I had some fun managing orientation changes and ended up with two distinct keypads that swap in and out — only on small screens, it’s not necessary on an iPad — depending on whether the display is landscape or portrait.

The saved items panel has its own nested Ext.TabBar (and uses a local SQL database), while the More? page includes an Ext.Carousel. Then there’s a bit of browser-sniffing to deliver different content to iOS devices (including some iPad-specific code), Android devices and desktop browsers. And a lot of kludges! When you’re working with beta-level tools and you’re in a hurry you just have to code around any bugs rather than waiting for a fix…

Sencha Touch app TravelMate, screenshot in iPhone

Q: TravelMate has a distinctive look and feel. Was it easy to theme?

Pretty much. The elegant approach would, obviously, have been to use SASS, but I wanted to keep the custom elements separate from the Sencha-supplied CSS (because that was being replaced by a new version every few days as the late betas rolled out). So I used a brute-force approach of subclassing the existing CSS classes.

The trickiest bits involved trying to emulate a native iOS look-and-feel, where that involves layers of transparency on top of each other — such as using an Ext.Msg pop-up to look like a native alert, or getting the look of the TabBar icons ‘just so’. You can spend a lot of time messing around with rgba -webkit-gradient variations and a lot of time looking at iPhone screenshots in PhotoShop at maximum magnification.

On the whole, though, I got the look-and-feel that I wanted: “native with a twist”.

Q: So what’s next for the app?

Well, TravelMate has actually got quite a number of regular users now, and the feedback is that they find it genuinely useful, so I am looking to improve it. The first job is to tidy it up and filter out all the kludges imposed by the beta versions of the framework (and the rush to hit a deadline).

Then, wrapping it up as a native app using PhoneGap — with some new code to handle the multitasking that comes with that — and seeing how it performs on the App Store.

Excellent news, Mike — maybe we need to get you back to tell us about your App Store experiences! Well done on your success in the contest, and good luck for the future of TravelMate.

Be sure to visit http://jag.gr/tm on a compliant touch screen mobile device or desktop WebKit browser to see this terrific app for real.

There is 1 response. Add yours.

nagaraju

3 years ago

i want sencha touch total describtaion and example applications.


thank u.
nagaraju

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.