Latest Mobile app - WTFRU

This post is more than 2 years old.

Today I held an open meeting over connect to discuss some interesting issues I ran into while building my latest mobile application. Thank you to all who attended. The recording link is at the very end of this blog post. For every one else, here is a quick look at what I built and why I built it.

A few weeks back, my wife and I were eating dinner at a restaurant when a patron stood up to call a friend of his. I could hear him try to describe to his friend where he was. Something along the lines of...

"Ok, you're where?"
"Yeah, I'm at Burger Smith." "Let's see - you want to take the road down the way a bit..."
"No, not that road, the other one."
"Yeah then make a right at the light, come down 3 or 4 blocks, I forget..."
"Yeah, then I'm on the corner there."

It occurred to me that while there were apps to share your location with your friends, there wasn't an easy way (not that I knew of) to help get your friend to yourself. What I called a "tractor beam" application. It should be simple. An application can know where you are. It can easily send that information to someone else. That person can then use some other tool to figure out how to get back to you. That's where I ran into a problem though. By what process would the friend get back to you? Most likely they would not have my suber cool application on their device. It's there that I decided upon a hybrid approach.

My application would run on your phone and send a SMS to the friend.
The SMS would include a link to a web page where HTML/JS would be used for the other parts.

Here's an example of the application running on my device. It begins by finding where you are. This happens rather quickly so in the screen shot it's asking you to pick a friend.

And yes - the name is WTFRU. I figured Tractor Beam was already taken by a game. Credit goes to my boss Greg Wilson for the name. To handle contact selection, I used the ContactView plugin instead of PhoneGap's Contact API. While PhoneGap supports a "Find" interface, and in theory you could search for *, I wanted something closer to the native look.

This plugin returns information about the contact, including their email and contact information. This allows me then to offer two choices for contacting them:

At this point, I could send a SMS using a SMS based URL, ala:

var body = "Find me by cliking here: "+beaconURL; var theUrl = "sms:"+contactOb.phone+"?body="+escape(body); window.location.href=theUrl;

But this leaves the user on the SMS page. Instead I used yet another plugin, SMSPlugin. This brings the act of sending an SMS down to...

window.plugins.sms.send(contactOb.phone, body, function () { alert("Message sent!"); resetUI(); }, function (e) { alert('Message failed: ' + e); } );

So, what happens next? I mentioned that this was a hybrid solution. The back end uses ColdFusion and ORM to record what I call "beacons." On the native side, my application sends my longitude and latitude to the remote server:

x$(window).xhr("http://wtfru.coldfusionjedi.com/service/remote.cfc?method=registerBeacon&returnFormat=plain&longitude="+position.coords.longitude+"&latitude="+position.coords.latitude, {

Where ColdFusion records this and returns a URL that can be sent to the friend. The friend gets a URL in the SMS that looks a bit like so...

If you click on it, you end up at a ColdFusion page that does a few cool things:

  • First, it uses HTML5 geolocation to find your location.
  • Second, it uses Google Maps to create a new map. Did you know that you can draw a map and not specify a center? By using a "bounds" object, you can add N markers to a map and let Google worry about centering it nicely around your markers. So my code then just becomes a simple matter of adding two markers and being done.
  • Third, it uses the Directions service to get directions. I've blogged about this before. (See my blog entry here where I demonstrated how a hotel site could tell you how to get to it.) What I didn't know was that their service supported automatic rendering. You can literally get directions and have Google write them out into a div for you. Seriously - that's it.

Here is the top of the page you see on the mobile device.

Scrolling down gives you the driving directions:

All in all, a pretty simple idea, but I think it works well. I've included a zip that has my entire Android project as well as the ColdFusion code. I'm not sure if I'll release this to the market. I think it's useful, but it's not very pretty. Any way, let me know what you think.

Recording URL: http://experts.adobeconnect.com/p4axu674iwr/

For folks looking for buzzwords - here is a list of the technologies used:

  • PhoneGap
  • xui.js
  • ColdFusion
  • jQuery
  • Hibernate
  • MySQL
  • Eclipse
  • Android SDK
  • Bootstrap

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Eduardo posted on 11/5/2011 at 1:29 PM

Nice and useful idea. I think it would be cheaper to implement if you could somehow just send the html for the page to your friend, without the need of a server. Otherwise, you would have a running cost that can only be financed in the long run with ads, subscriptions, etc. It wouldn't work with sms, of course, but maybe by email?

Comment 2 by Salvatore Fusto posted on 11/5/2011 at 3:19 PM

Ray, this is a nice idea, but suppose that your friend does not have a smartphone, but only a simple ancient phone(only text sms) you could send to him only your exact address, evaluated with the first part of your app.
regards

Comment 3 by Raymond Camden posted on 11/5/2011 at 4:02 PM

@Eduardo - I think - most likely - a person _always_ knows where they are. If not the location,the name at least.

Comment 4 by Eduardo posted on 11/5/2011 at 7:11 PM

Sorry Ray, but I don't understand your reply. My point was that, instead of sending your location to a server, and then a link to your friend so he can get the location + a map from the server, you could just produce the same web page in your smartphone and then send that to your friend, without the need to have a server in between.

Comment 5 by Raymond Camden posted on 11/5/2011 at 10:02 PM

How would you "send a web page" though? You mean an html-based email?

Comment 6 by Eduardo posted on 11/5/2011 at 10:28 PM

Yes, or as an attachment. It would take a little bit of experimenting to see what's possible and has better usability. I think the running costs of having a server would make real-life massive use of this app unsustainable. However, you don't "really" need one. The only absolute-must server-side processing (the map) is done by Google. What your ColdFusion server does is just to compile an HTML page that mashes up the maps based on your geographical coordinates; this can also be done in your phone.

Comment 7 by Raymond Camden posted on 11/5/2011 at 10:34 PM

Ok, but how would my phone generate an HTML email that includes your address? I don't know where you are. And html email is -severly- limited on most clients. I don't believe you can do any JS at all.

Comment 8 by Eduardo posted on 11/5/2011 at 10:45 PM

Yes, that's why I think you might need to send it as an attachment that opens in their browser, which would also allow you to pull their location.

Comment 9 by Raymond Camden posted on 11/5/2011 at 10:51 PM

Um... well.... I don't know. I honestly think that is more convoluted then not. ;)

Comment 10 by Leigh posted on 11/8/2011 at 5:58 AM

That's a nice idea Ray.

I've deployed my first ever apps to iOS using PhoneGap/CF/jQuery and your blog posts. Now for something a bit more complex

I can't see the zip download? I want to checkout your CFC.

Cheers

Comment 11 by Raymond Camden posted on 11/8/2011 at 6:04 AM

Shoot. I thought I had posted it all up. There is now a zip attached. It has the relevant CF code. Requires 901.

Comment 12 by Pete posted on 11/14/2011 at 2:06 PM

Not that this changes the awesomeness of this app, but you've got a typo in one of your screen shots

On the Beacon Retrieved screen "You're friend" should be "Your friend".

Sorry... but just in case you do release it, might want to change that.

Comment 13 by Raymond Camden posted on 11/14/2011 at 7:32 PM

Thanks - fixed!

Comment 14 by Patrick Whittingham posted on 12/7/2011 at 7:07 PM

Ray,

Have you ever got the following error at run time (android emulator 2.3.3)?

* Eclipse 3.7.1 (MDS plugin)
=====================================
Application error
The connection to the server was unsuccessful.
( file:///android_asset/www/index.html)

Comment 15 by Raymond Camden posted on 12/7/2011 at 7:09 PM

Hmm, nope. I do get errors from time to time - rarely - and I normally just disconnect/reconnect my phone.

Comment 16 by Patrick Whittingham posted on 12/7/2011 at 11:11 PM

I changed my phonegap.xml to the following and that error when away.

It use to be this origin:

<access origin="http://127.0.0.1* "/>

To a different access:
<?xml version="1.0" encoding="utf-8"?>
<phonegap>
<access origin="http://*.phonegap.com"/>
<log level="DEBUG"/>
</phonegap>