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