New Discovery
The only 2 viable mobile platforms right now are Android and iOS. (OK - maybe Windows mobile, maybe). Of course, what that means is to write an app for both platforms means writing an app in Java for 'Droid and porting it to ObjectiveC (or the other direction).There are ways to avoid this - Monotouch lets you write your code in C# and compile to your target platform. Monotouch is not cheap - $1000 for each platform! Yikes!
I recently discovered another tool that allows people to write once and run everywhere - PhoneGap.
PhoneGap lets a developer create HTML5 pages, add them as the content to their phone app, compile and run. Wow.
This has so many advantages:
1. We already know HTML and Javascript
2. Did I mention that PhoneGap is FREE?
3. Testing is a breeze now - in fact, you can write your HTML/Javascript code once, and test it in a mobile browser, desktop browser, and in your apps.
There are very clear directions on how to write an app using PhoneGap, so I won't bore you by re-writing a how-to. I wrote a very simple app using jQuery Mobile and Google maps.
All this app does is get your current location and create a 'pin' in a Google map.
Below is the HTML5 code I wrote. Give it a shot! :-) I think PhoneGap is a great tool that really simplifies creating mobile apps. By the way - I also took advantage of the jQuery Mobile layout tool to generate the HTML and CSS. What it generates is pretty generic (for example, I had to completely rewrite the code that communicates with Google Maps), but it's a good starting point.
<title>
</title>
<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet"></link>
<link href="my.css" rel="stylesheet"></link>
<style>
#mapcontainer {
height: 300px;
width: 95%;
border:3px solid #eaeaea;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="http://www.google.com/jsapi">
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script charset="utf-8" src="cordova-1.8.1.js" type="text/javascript">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>
<script src="modernizr.js" type="text/javascript">
</script>
<script type="text/javascript">
$().ready(function(){
if ( Modernizr.geolocation ) {
navigator.geolocation.getCurrentPosition(
function(pos) {
$("#lat_field").val(pos.coords.latitude);
$("#long_field").val(pos.coords.longitude);
var coords = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var mapOptions = {
//zoom level, between 0 to 21.
zoom: 15,
//center to the user location
center: coords,
//add map type controls.
mapTypeControl: true,
//navigation control options
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
//default map type
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the mapContainer div
map = new google.maps.Map(
document.getElementById("mapcontainer"), mapOptions
);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
);
}
else{
alert("Error");
}
});
</script>
<div data-role="page" id="page1">
<div data-role="header" data-theme="a">
<h3>
Where Am I
</h3>
</div>
<div data-role="content" id="mapcontainer" style="padding: 15px;">
</div>
</div>
