My first attempt at a mobile web app

German-English Dictionary Web App
Is this thing on? So it’s been a forever since I’ve blogged, but we’ll see if I still can. Happy Thanksgiving at least! Anyway, I’ve been wanting to build stuff for my iPhone. While I’ve been experimenting with Objective C for a native app, I wanted to actually build and publish something. So I have abandoned my Objective C code snippets for now and decided to go with things I know and build a Ruby on Rails site. There are various libraries to let you style a site for mobile browsers. I went with jQTouch, which is covered pretty well by these Railscasts and Peepcode screencasts. I like using the German-English dictionary site Beolingus, but I wanted to use it more easily on my iPhone. It turns out the data is downloadable, so I decided to build a web application with mobile front-end. Here it is:

Denglisch (that’s a term for English and German mixed together) I really wanted to build the site in Rails 3, but most of my stuff is hosted on Dreamhost, and I’ve read about various problem getting those apps running right now. So it’s done in Rails 2.3.10 instead. The Rails side is pretty simple, just one model for the data, a rake script to import the textfile into the database, one controller and two actions. Then there’s a little bit of jQuery Javascript code to handle the Ajax form submission.

Home Screen Icon
I knew how to do a lot of these bits, but I learned things along the way too. For one, I didn’t know that the iPhone could make a native-looking app out of a website. The website can include icons and a splash screen, and when you add the bookmark to your home screen, the icon will show up there. The splash screen shows up when the website is loading, and then the web app uses the full screen without the Safari toolbars. Cool. I found jQTouch to be fairly easy to use, but the download from their home page is a good bit older than the code they have on Github. I ran into an issue with the latest version that I had to look for a solution from the bug list. They don’t have much documentation either. The Peepcode screencast was very helpful, but it isn’t free, and jQTouch has changed a bit since it was published (e.g. the new “jqt” div).

Anyway, I’ve tested this on my iPhone…I’m curious to hear if it works for the iPad and other mobile devices. It was a good hobby project anyway. Have fun!

Update 2016-01-17: I eventually rewrote this code with Sinatra instead of Rails. I stopped hosting either version, but here’s the Sinatra-based source code.