As readers of this blog know, I’m a pretty big Sencha fan. I <3 ExtJS…seriously, I love pretty much everything about it, from how great the default UI is, to how ridiculously easy it is to build awesome applications in zero time. So when I heard a while back that Sencha was combining ExtJS, jQTouch, and Raphael to create a mobile framework (Sencha Touch), I knew it was something I’d have to try.

And try I did…well, really, it was more like dabbling. I had ideas that I wanted to test out, so over the last few months I’ve been experimenting in between life and other projects. But no matter how hard I tried or how good my ideas were, I couldn’t really find the motivation to bring anything to completion…or even to a real start. Until this weekend.

The Catalyst

You see, my darling 5-year old daughter is valiantly learning to read. But like a lot of kids (I think), she has trouble staying motivated and gets frustrated easily when she’s not able to hit a home run with the new things that she tries.

As I’ve been working with her on reading, I have reflected on my own experiences. While I’ve always loved to read, I can distinctly remember the good ol’ Pizza Hut “Book It!” program–you know, read X number of books and get free pizza?  Yeah, it’s a brilliant idea, and I’m definitely not above incentivizing (read bribing!) my daughter to commit more time and energy to reading.

But pizza is, well, kind of lame. And it’s only one thing. So I thought to myself, if crappy pizza can motivate a child to read books, what if the prizes were more diverse…and better?

The App Idea

Now of course, there are a billion-and-one websites out there with reading incentive programs, and I’m sure there are an equal number of App Store apps that do the same thing. However, I saw in this a great opportunity to really try something out with Sencha Touch–put a personal and customized stamp on a tried and tested method of encouraging children to read.

The app I developed is pretty simple. Here’s a break down of the more interesting features:

  • Customizable Goals: My wife and I can create “Goals” which are basically just targets for page or book counts that are tied to rewards: e.g., “read 7 books and get a small ice cream cone from McDonalds”
  • Google Book Search: Basically, my daughter can type in the name of the book she has completed reading (see, even some covert teaching in there…I’m sneaky :)). A list of search results will display from Google’s giant repository of books, and she can select the correct book (has image of book cover) and add it to her “library” of read books
  • Reward Notifcations: After adding books, a reward notification occurs (pop-up message and sound…when it works…) and my daughter can cash in the reward. A list of completed rewards is available for her to look through whenever she wants
  • Statistics: The library section has some simple stats that show how many books and total pages my daughter has read
  • Pink, Pink, Pink: My daughter loves pink, so I made the app pink. Sencha Touch makes that stupidly simple to do :)

If you’re interested in trying it out, check it out here on your webkit-based smart device:

Ashlyn Reads

***Disclaimer***

If you decide to try this out, be warned: it’s quite bare-bones at the moment. All information is saved to your device exclusively, so trying to use this as some kind of reading journal across devices won’t work :). Besides, there are much more robust apps out there for that anyway, and they probably have less-specific names than “Ashlyn Reads.”

Also, there’s no way (currently) to delete books or goals, nor can you even edit goals (I’m going to fix that soon, but am being lazy at the moment).

Finally, there are probably a billion little bugs here and there, so…there it is.

The Sencha Touch Experience

On the whole, my first real experience creating an app with Sencha Touch was pretty awesome. Like developing regular web apps with ExtJS, creating mobile web apps with Sencha Touch is a fairly intuitive process that lends itself to rapid application development.

Things I Love

  • It’s Easy to Do: Like ExtJS, Sencha Touch is a pretty intuitive framework for creating mobile web apps. In regards to total development, I’ve only invested about 8 hours in this app so far. There’s a TON of polish and features that probably need to be added, but for a working app, that amount of time is not bad…not bad at all.
  • Aesthetics Are Easy: Borrowing from ExtJS, the “default” aesthetic of Sencha Touch is very sleek, clean and appealing. While this app looks a lot like a generic iPhone UI, that’s okay–I didn’t have to spend any time whatsoever getting it to do THAT, so I’m very pleased with that aspect. The small amount of theming that I did do was super-simple to pull off, so going for a full-on custom aesthetic is certainly doable if I ever want to sink more time into this.
  • Works in a Lot of Places: Unlike developing a native device app, Sencha Touch apps are designed to be compatible on a number of devices (iPhone, iPad, Android, Blackberry). While they aren’t as robust as native apps (they are, after all, still just web apps), it’s nice to be able to use my web app development skills and have them behave similarly to native touch device apps. Plus, there’s no need to hassle with deploying these to various application stores–users can simply save a bookmark of the app to their device’s homescreen, and they’re good to go.

A Work in Progress

Sencha Touch is awesome, no doubt. There are a few weird quirks with the layout rendering (could be my code), and my app is a little finicky when switching between orientations. But it works more or less *as-an-app on a smart phone/device*, so I’m am very pleased overall, and am looking forward to the great new features that the Sencha team will continue to implement as development continues on this mobile framework.

If you’re a web developer who wants to develop mobile apps, but doesn’t have the time or energy to learn the ins and outs of native device application development, check out Sencha Touch…I bet you’ll like it!