编者注：我们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。下面是第10天的内容。
今天又是“30天学习30种新技术”的一天。长期以来，我觉得手机开发很恐怖，大部分应用都没有商业模式。事实上，编写手机应用从来都不能让我兴奋。然而，考虑到手机领域的飞速发展，以及更多的人通过手机而不是桌面访问互联网，我决定尝试下手机开发。我的手机开发之旅将从PhoneGap 起步。
本文首先介绍 PhoneGap 的基本情况，接着我们使用 PhoneGap 开发一个手机应用。
手机应用
我们将为是“30天学习30种新技术”开发一个手机阅读器。用户可以将该应用安装在Android、Symbian、webOS或Windows设备上。该手机应用可以在 https://build.phonegap.com/apps/635001/share 下载。
这个应用可以做到：
给出所有已经发布的系列文章的列表。用户点击列表中的条目则调用浏览器打开链接。
读者可以使用该应用回馈想法。
什么是 PhoneGap？
PhoneGap是一个自由开源的手机开发框架，可以使用标准的 web 技术，即 HTML，CSS 和 JavaScript 进行手机应用开发。
它将应用的web资源封装在原生应用中，这些应用可以提交到各大应用商店。更重要的是，我们可以通过 PhoneGap 进行跨平台的手机应用开发。这意味着，在理想情况下，我们只需编写一次手机应用，就可以将该应用移植到多个平台。例如，我为Android设备编写了这个应用，然而使用 PhoneGap build，我同时为其他设备打包了应用。大多数标准的设备特性，例如照相、地理位置、存储等都由JavaScript API提供了。取决与目标设备，PhoneGap提供的JavaScript API会有所不同。
关于 PhoneGap 的一些事实：
- 2009年，Nitobi开发了PhoneGap框架。
- 2011年10月，Adobe 购买了 Nitobi（PhoneGap）背后的公司。
- Adobe 将 PhoneGap 贡献给 Apache 基金会。
- 此开源项目被命名为 Apache Cordova.
- PhoneGap 是 Adobe 完成的 开源项目 Apache Cordova 的实现。 PhoneGap的核心使用 Apache Cordova.
- PhoneGap使用基于插件的架构。所有设备的特性以插件方式提供。本文中，我们将使用一些插件。
为什么我关心PhoneGap？
- 没有必要为每个平台学习一种原生的开发环境。如果开发者打算针对多个平台，那么PhoneGap的跨平台特性可以节约开发者大量的时间和精力。我了解HTML、CSS和JavaScript，可以很平滑地进入手机世界。
- 对于开发基于REST API的CRUD手机应用，PhoneGap很好用。
- 它不强迫开发者选择特定的CSS库。开发者可以使用任何他们喜欢的移动端的库。本应用中我使用jQuery mobile。
PhoneGap Prerequisites
PhoneGap依赖NodeJS，我们需要使用npm来安装PhoneGap。Npm是NodeJS的包管理器，新版的NodeJS自带npm。你可以从官网下载最新版的NodeJS。
你需要同时安装目标机器的SDK。例如，如果我们创建Android程序，我们需要在操作系统上安装 Android 开发者工具。PhoneGap 使用 SDK 为目标平台构建包。
PhoneGap起步
使用如下命令安装PhoneGap：
sudo npm install -g phonegap
以上命令将全局安装 phonegap 包，这样任何目录下都可以使用 phonegap。
安装插件需要安装Cordova.
使用如下命令安装Cordova。
sudo npm install -g cordova
GitHub 仓库
今天的demo应用的代码在github上。
创建PhoneGap应用
phonegap命令行提供了使用模板创建新phonegap项目的命令：
phonegap create reader --id io.reader--name Reader30
上面的命令会创建一个reader目录。
io.reader和Reader30是可选的：io.reader提供了一个类似反域名的识别符，而Reader30提供了应用的显示文本。
应用的文件结构如下：
让我们看下这些生成的目录：
merges文件夹存放专门针对某个特定平台的资源。例如，我们可能使用merges来为Android设备改变字体大小。platforms目录存放平台构建文件。plugins存放应用使用的插件。当我们安装一个插件的时候，插件会被存放在这个目录下。www目录存放应用资源，例如html、css、js和img。这是我们要花最多时间的目录。config.xml包含了生成和分发应用所需的元信息。元信息也包括应用名称、描述、作者详情、应用权限等信息。在这里可以看到一个完整的列表。
运行下列命令即可在android上运行应用：
phonegap run android
这是我们的android平台阅读器应用的第一次构建。如果有真实设备连接，应用会跑在真实设备上。如果没有设备，会启动Android虚拟器，应用会被部署到虚拟器上。
注意：Android虚拟器的性能相当差劲，所以我建议你总是连接上你的真实手机设备。Grant Shipley的博客提供了一些加速Android虚拟器的信息。
开发手机应用
如上所述，我们的应用有两个页面。我们先开发第一个。
博客列表
初始页面列出所有已发布文章的列表。我们修改下index.html，请从我的github仓库中复制css和javascript资源。
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<title>Learn 30 technologies in 30 days</title>
<linkrel="stylesheet"href="css/vendor/jquery.mobile-1.3.1.min.css">
<linkrel="stylesheet"href="css/vendor/jquery.loadmask.css">
</head>
<body>
<divdata-role="page"id="mainPage">
<divdata-role="header"data-position="fixed">
<h1>30Technologies30Days</h1>
<ahref="#feeback"data-icon="edit"data-theme="b"class="feedback ui-btn-right"data-role="button"data-inline="true"data-ajax="false">Feedback</a>
<divdata-role="navbar">
<ul>
<li><ahref="#home"class="home ui-btn-active"data-icon="home">Home</a></li>
</ul>
</div>
</div>
<divid="main"data-role="content">
</div>
<divdata-theme="a"data-role="footer">
<h3>
© Shekhar Gulati 2013
</h3>
</div>
</div>
<scripttype="text/x-mustache-template"id="home-template">
<ulid="blogs"data-role="listview"data-filter="true"data-filter-placeholder="Search blogs..."data-inset="true">
</ul>
</script>
<scripttype="text/x-mustache-template"id="blog-template">
<li>
<ahref="{{url}}"target="_blank">
<h3>{{title}}</h3>
<p><strong>{{publishedOn}}</strong></p>
</li>
</script>
<scriptsrc="phonegap.js"></script>
<scriptsrc="js/vendor/jquery-1.9.1.min.js"></script>
<scriptsrc="js/vendor/jquery.mobile-1.3.1.min.js"></script>
<scriptsrc="js/vendor/jquery.ui.map.js"></script>
<scriptsrc="js/vendor/jquery.loadmask.min.js"></script>
<scriptsrc="js/vendor/jquery.timeago.js"></script>
<scripttype="text/javascript"src="js/vendor/mustache.js"></script>
<scripttype="text/javascript"src="js/app.js"></script>
</body>
</html>
上面的html导入了所需的css和javascript文件。它使用jQuery mobile达到原生效果。我们同时定义了一个mustache模板来呈现列表。
应用相关的javascript代码放在 app.js文件中：
$(document).ready(function(){
homeView();
$('.home').on('tap', renderHomeView);
$('.feedback').on('tap', renderFeedbackFormView);
});
functionrenderHomeView(event){
event.preventDefault();
homeView();
}
functionhomeView(){
$('#main').empty();
$('.home').addClass("ui-btn-active");
$('#main').html(template("home"));
var url = 'http://30technologiesin30days-t20.rhcloud.com/api/v1/blogs';
$.mobile.loading( 'show',{});
$.ajax({
url : url,
dataType : 'json',
success : function(data){
$.mobile.loading( 'hide',{});
$.each(data , function(i , obj){
var template = $("#blog-template").html();
obj.publishedOn = $.timeago(obj.publishedOn);
$("#blogs").append(Mustache.to_html(template,obj));
$('#blogs').listview('refresh');
});
},
error : function(XMLHttpRequest,textStatus, errorThrown) {
$.mobile.loading( 'hide',{text:"Fetching blogs.."});
alert("Something wrong happended on the server. Try again..");
}
})
$('#main').trigger('create');
}
functiontemplate(name) {
returnMustache.compile($('#'+name+'-template').html());
}
functionshowNotification(message , title){
if (navigator.notification) {
navigator.notification.alert(message, null, title, 'OK');
} else {
alert(title ? (title + ": " + message) : message);
}
}
上面的app.js做了这些事：
- 绑定了文档的就绪事件。一旦就绪，将渲染初始页面。
- 初始页面进行REST调用以获取所有博客。我们使用jQuery来调用REST。
- 接受信息后，我们创建一个列表。最后刷新下。
允许访问REST服务
PhoneGap默认不允许应用访问远程资源。这就意味着应用无法进行REST调用。为了允许应用进行REST调用，我们需要允许它访问。我们可以通过通配符*允许应用访问一切资源。请参阅文档了解更多信息。
在config.xml下修改访问控制信息：
<access origin="*" />
安装插件
应用使用一些插件来访问特定设备的特性。
cordova plugin add org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.dialogs
- 第一个命令安装了
geolocation插件。Geolocation提供了设备位置的信息，例如经度和纬度。我们稍后将使用此特性。参阅文档 了解更多信息。 - 第二个命令安装了
dialogs插件。dialogs插件提供了原生的设备视觉提醒。参阅文档了解更多信息。
反馈提交表单
第二个屏幕允许用户提交反馈。
我们增加了一个反馈表单，来记录用户的反馈。
<scripttype="text/x-mustache-template"id="feedback-form-template">
<formaction=""id="feedbackForm">
<divdata-role="fieldcontain">
<labelfor="name">
Describe
</label>
<inputtype="text"name="name"id="name"placeholder="Full Name eg. Shekhar Gulati ">
</div>
<divdata-role="fieldcontain">
<labelfor="description">
Describe
</label>
<textareaname="description"id="description"placeholder="Message for author.."></textarea>
</div>
<divid="checkboxes1"data-role="fieldcontain">
<fieldsetdata-role="controlgroup"data-type="vertical">
<legend>
Share my location
</legend>
<inputid="sharemylocation"name="sharemylocation"type="checkbox"value="true">
<labelfor="sharemylocation">
Share
</label>
</fieldset>
</div>
<buttonid="create-button"data-inline="true">Feedback</button>
</form>
</script>
修改app.js文件，监听tap事件。
$(document).ready(function(){
homeView();
$('.home').on('tap', renderHomeView);
$('.feedback').on('tap', renderFeedbackFormView);
});
functionrenderFeedbackFormView(event){
event.preventDefault();
$('#main').empty();
$('#main').html(template("feedback-form"));
$('#main').trigger('create');
$('#create-button').bind('tap',shareFeedback);
}
functionshareFeedback(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);
}
}
functionpostFeedback(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);
}
});
}
当反馈表单提交后，我们从表单获取了数据。如果用户勾选了“分享我的位置”，我们会使用geolocation插件来获取用户的位置。最后，我们将POST请求提交到我们的REST服务。一旦成功提交，我们显示一个提醒。
运行应用
现在我们可以在设备上安装和运行应用了。使用如下命令：
phonegap run android
