[译] 第十天： PhoneGap - 手机开发入门

前言

今天的30天挑战，我决定学习手机开发。长期以来，我对手机开发心存疑虑，认为大部分的应用没有手机市场，实际上，我一直对手机开发提不起兴趣。然后，在移动方面的大力发展，事实上越来越多的人选择用手机上网，我决定试试手机开发。我将用PhoneGap开启我的移动开发之旅。

在这篇博客里，我们先看看PhoneGap的基础，然后用它开发一个手机应用。

$(document).ready(function(){
homeView();
$('.home').on('tap', renderHomeView);
$('.feedback').on('tap', renderFeedbackFormView);

});
function renderFeedbackFormView(event){
event.preventDefault();
$('#main').empty();
$('#main').html(template("feedback-form"));
$('#main').trigger('create');
$('#create-button').bind('tap',shareFeedback);
}
function shareFeedback(event){
event.preventDefault();
$('#feedbackForm').mask();
var name = $('#name').val();
var description = $('textarea#description').val();
var sharemylocation = $("#sharemylocation:checked").val() === undefined ? "false" : "true";
var data = {name:name , description:description , lngLat :[]};
if(sharemylocation === "true"){
navigator.geolocation.getCurrentPosition(function(position){
var lngLat = [position.coords.longitude , position.coords.latitude];
data.lngLat = lngLat;
postFeedback(data);

} , function(error){
alert('code: '    + error.code    + '\n' +
'message: ' + error.message + '\n');
$('#feedbackForm').unmask();
});
}else{
postFeedback(data);
}
}
function postFeedback(data){
$.ajax({
type : 'POST',
url : 'http://30technologiesin30days-t20.rhcloud.com/api/v1/feedback',
crossDomain : true,
data : JSON.stringify(data),
dataType : 'json',
contentType: "application/json",
success : function(data){
$('#feedbackForm').unmask();
$('#feedbackForm')[0].reset();
showNotification('Received your feedback', 'Info');
homeView();
},
error : function(XMLHttpRequest,textStatus, errorThrown) {
$('#feedbackForm').unmask();
alert("Error status :"+textStatus);
alert("Error type :"+errorThrown);
}
});
}

View Code

提交feedback表后我们可以从表里得到数据，如果用户勾选了sharemylocation，我们就用geolocation API获取用户位置。最后，我们给REST web服务器提交POST, 对一个成功的反馈提交，可以给用户提示。

运行程序

现在可以输入以下命令安装和运行程序。

$ phonegap run android

这是今天的内容，继续给反馈吧。

原文：https://www.openshift.com/blogs/day-10-phonegap-mobile-development-for-the-dummies