Category: Emerging Tech

Skadoo: PhoneGap-based app now in iTunes

Skadoo is a PhoneGap based application that is now available in the iTunes store. The app should be considered very beta… though (developers take note!) Apple doesn’t allow you to include the word “beta” in any graphics, description or application meta-data.

In short, say its “Phonegap-based” means that this app was built using HTML, CSS and Javascript, and then wrapped up in a native binary iPhone application. I’ve blogged about this before, when I showed how to turn a blog into a native iPhone app in 10 steps.

The full server app is still under development (server queries are VERY slow), but in short, it is a “people” search engine, for finding various profiles of someone online based on searching for their name. I, through my work with Oliver+Coady, was hired to build the iPhone App and get it into the App Store ASAP. PhoneGap was the best solution to get the job done quickly.

Skadoo in iTunes

Development time was < 1 week... .it took longer to get the app into the store than it did to build it! The app uses JQuery for server interaction and the UI was built in Dashcode. Another quick interesting thing about this app, is that it uses HTML 5 Database to persist search results and Safari/Webkit extensions for CSS translation and transitions. Both working pretty well, though the translations are about 4x faster on the iPhone Simulator than on my iPod Touch. Get Skadoo for your iPhone today!

Palm webOS on the Palm pre: PLEASE let it be WebKit

Just a few minutes ago, Palm announced their new pre device (that’s the name “pre”, I don’t mean it as in “preview” or beta). The device looks solid, like any state of the art mobile handset in the 21st century should. They’ve managed to innovate on the hardware, so it doesn’t look like a cookie cutter rebrand of HTC (cough..G1….cough).



courtesy of http://arvino.posterous.com

The big news for me was the Palm webOS… though its a bit like “Back to the Future”… Back in 1999, the Palm VII device launched with something known as Palm Query Applications (PQAs) – little compiled bits of HTML and images, as front-end local forms for submitting to remote web applications. It was a brilliant hack for the extreme low bandwidth of the Mobitex network.

Quick aside on my areas of expertise: I developed ThinAirMail, a POP/IMAP/Hotmail client for the Palm VII, that was the #1 PQA application for a long time, and eventually included in the box. This led to the acquisition of ThinAirApps, the mobile software company I helped found in 2001 by Palm. I worked there for about two years, until someone decided (probably correctly) that Palm shouldn’t be in the server software development business.

This new webOS echoes this approach, but is much more forward looking, and in fact completely inline with my own personal view of the world… it is a Mobile Web Client Stack. If you read this blog at all, you’ll have seen my previous posts on using PhoneGap to build “native” client applications for iPhone and Android using nothing more than XHTML, CSS and Javascript wrapped in a simple launcher. While I am happy that all the great Obj-C, Cocoa and Java developers have work in this mobile world, there is no need for mobile device development to be so difficult and proprietary.

The four zillion billion dollar question for Palm is, have you chosen wisely in the foundation of your Web OS? Pleeeeeaase, let the answer be “Yes, my son, WebKit is thy name.” At the least, tell me Gecko or Opera… I know standards are standards, but if this Web OS is built on yet another hacky mobile browser whose ancestry traces back to Access or Blazer, I am not going to be as thrilled as I am right now. WebKit is leading the way in amazing standards support, as well as adding the latest and great enhancements from HTML 5 (database, animations, transitions, etc). These are already shipping with iPhone OS 2.2, and lemme tell you – the things you can do with them will blow you away.

SVG makes your iPhone webapps more "flash"-y

I’ve been doing some work on a iPhone webapp (natively deployed, wrapped in PhoneGap naturally) and decided to incorporate some advanced visualizations using Scalable Vector Graphics. Achieving robust SVG support in browsers has been a long struggle, and the good news is that the latest builds of both Firefox and Safari, desktop and mobile, do it well. Safari’s support comes from the excellent Webkit project – read more about the status of their SVG support. On the desktop, SVG hasn’t gained much popularity, mostly due to the presence of Flash and Java, the incumbents when it comes to advanced visualization.

However, the reason SVG should matter to iPhone developers is that, since there is no Flash or Java support, it is difficult to achieve rich, dynamically rendered interfaces – think charts, clocks, gauges and other visualizations, through CSS alone.

The application I am developing required a working classic clock with semi-transparent wedges overlaid on top of it showing different upcoming events. The implementation is nearly done, so you will be able to see it in action soon, but for now here’s a screenshot:

working clock rendered with SVG on mobile safari

And for those of you looking to do some rad geo-hacking and break out of the bonds of Google, how about moving towards OpenLayers based SVG maps? There are some links to great SVG map demos at the end of this article. Also check out James Fees GIS Blog for a whole thread on this topic.

Not sure if this works yet in WebKit on iPhone, but have you seen this cool demo of combining SVG with the new HTML video element? Perfect for the multitouch capability of the iPhone, no?

All in all, just food for thought, and an example of a great technology that might have finally found its niche!

Here are some great SVG demos, samples, tools that should all will work in the iPhone Safari browser… and hopefully the Android version of WebKit, as well!

Turn Your Blog Into a Native iPhone App in 10 Steps

I’m going to get down to business here without too much editorializing. The only prereq is that you have an Intel-based Mac and a medium level of skills with text editors or visual web page designers. You don’t need to know how to write Objective C or any other complex “Native App” skills. I’ll take you step-by-step through a simple process for putting together a number of free tools and technologies in order to bring your blog (or any other RSS-based feed of content) to the iPhone or iPod Touch in a super cool and quick way.

1) Download and install the iPhone Development SDK: http://developer.apple.com/iphone/

2) Launch the Dashcode application and select the “RSS” template option.

dashcode-chooser.png

3) Edit the RSS parameters, setting the feed URL to your blog feed (or any feed you’d like!)

dashcode-settings.png

4) Customize the look and feel of the blog display using the type of fancy visual editor… you can change the entire color scheme, fonts, spacing and more.

dashcode-designer.png

5) Press play to preview and test your blog app in the iPhone Simulator

headlines.png

6) Export your dashcode project to disk and/or publish it to a public web server. Since my blog lives at OpenIdeals.com, I placed my iPhone web app at http://openideals.com/iphone

7) Download the super sweet PhoneGap application framework via http://phonegap.com or just get the ZIP Archive directly

8) Open the archive, navigate to the “iPhone” folder and then run the “Glass.xcodeproj” xcode project (duh?) file. It should be the only “blue” file in the folder.

9) Find the “url.txt” file in the “Groups & Files” explorer. Change the url link in this file to the location of your Dashcode blog app (again, mine is at http://openideals.com/iphone)

xcodephonegap.png

10) Press the “Build and Go” green button in Xcode to launch your native application in the iPhone Simulator

launcher.png
(see the “OpenIdeals” icon with my face on it?!)

From here, you can modify the icon.png and Default.png (splash screen) until you are satisifed with the outcome of how your app looks. Also the “Info.plist” file controls the name of your application in the iPhone launcher.

splash.png
(this is my splash screen that stays up for a few seconds upon app launch…)

At this point, you should have your blog running as a native application in the iPhone Simulator. To actual get this application out to the world, you’ll need to pay Apple $99 to join their Developer Program, as well as jump through many hoops to get all the security keys and permissions to distribute your application.

Otherwise, you can also just point people with iPhones or iPod Touches directly to your mobile application URL… that would work, too!

Final note on the amazing PhoneGap – they also support native application web wrapping for Android and Blackberry, as well as a bunch of other features like determining the device GPS location via Javascript calls.

That is all for this post… I hope you found it useful and to the point. I may do a similar one for Android + Eclipse, especially for all the non-Mac OS users out there.

VoteReport for Android 0.9.4

I hate calling things 1.0, so I didn’t – VoteReport for Android 0.9.4 is released and available in the Android Marketplace (like the iPhone App Store). If you have a T-Mobile G1, just open the Market application and search for “votereport” or simply browse under the Productivity category. You can also download it direct at: http://openideals.com/android/VoteReport.apk (and you don’t even have to jailbreak anything!).

Splash screenFilling out the formSubmitting the reportLatest reports from the web
view full set slideshow

The application is free to download, obviously. The code will be shortly, as well. All in all the entire effort took < 10 hours, albeit with lots of prep and design inherited from the iPhone app effort.

What is this mysterious TwitterVoteReport project? Read on…

Twitter Vote Report is an all-volunteer network of software developers, designers, and other collaborators have teamed up with the award-winning blog techPresident to launch this effort. The only resources contributed to this project are the participants’ time and expertise!

Millions of Americans will be voting this Election Day. Many of these voters will have terrific experiences and we’d love to hear about those. But many voters will experience voting problems that we have been hearing about for years: long lines, broken machines, and registered voters who can’t vote because their names aren’t showing up on the registration rolls.

Using Twitter Vote Report, voters will be able to share their experiences and resources with one another to solve problems quickly (e.g. “don’t come now, the line is too long”). These messages will then be aggregated and mapped so that we can “see” voting problems around the country in real-time.

I am hoping to make some improvements on it in the coming day or two, but know there are more important tasks at hand, and just wanted to makes sure the core functionality was out there.

Now get out there and let’s keep this election clean!