Day 10： PhoneGap —— 开发手机应用如此简单
今天又是“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 的一些事實：
為什么我關心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 cordovaGitHub 倉庫
今天的demo應用的代碼在github上。
創建PhoneGap應用
phonegap命令行提供了使用模板創建新phonegap項目的命令：
phonegap create reader --id io.reader --name Reader30上面的命令會創建一個reader目錄。
io.reader和Reader30是可選的：io.reader提供了一個類似反域名的識別符，而Reader30提供了應用的顯示文本。
應用的文件結構如下：
讓我們看下這些生成的目錄：
運行下列命令即可在android上運行應用：
phonegap run android這是我們的android平臺閱讀器應用的第一次構建。如果有真實設備連接，應用會跑在真實設備上。如果沒有設備，會啟動Android虛擬器，應用會被部署到虛擬器上。
注意：Android虛擬器的性能相當差勁，所以我建議你總是連接上你的真實手機設備。Grant Shipley的博客提供了一些加速Android虛擬器的信息。
開發手機應用
如上所述，我們的應用有兩個頁面。我們先開發第一個。
博客列表
初始頁面列出所有已發布文章的列表。我們修改下index.html，請從我的github倉庫中復制css和javascript資源。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>Learn 30 technologies in 30 days</title><link rel="stylesheet" href="css/vendor/jquery.mobile-1.3.1.min.css"> <link rel="stylesheet" href="css/vendor/jquery.loadmask.css"></head> <body><div data-role="page" id="mainPage"><div data-role="header" data-position="fixed"><h1>30Technologies30Days</h1><a href="#feeback" data-icon="edit" data-theme="b" class="feedback ui-btn-right" data-role="button" data-inline="true" data-ajax="false">Feedback</a><div data-role="navbar"><ul><li><a href="#home" class="home ui-btn-active" data-icon="home">Home</a></li></ul></div></div><div id="main" data-role="content"></div><div data-theme="a" data-role="footer"><h3>? Shekhar Gulati 2013</h3></div> </div><script type="text/x-mustache-template" id="home-template"><ul id="blogs" data-role="listview" data-filter="true" data-filter-placeholder="Search blogs..." data-inset="true"></ul> </script><script type="text/x-mustache-template" id="blog-template"> <li><a href="{{url}}" target="_blank"><h3>{{title}}</h3><p><strong>{{publishedOn}}</strong></p></li> </script><script src="phonegap.js"></script> <script src="js/vendor/jquery-1.9.1.min.js"></script> <script src="js/vendor/jquery.mobile-1.3.1.min.js"></script> <script src="js/vendor/jquery.ui.map.js"></script> <script src="js/vendor/jquery.loadmask.min.js"></script> <script src="js/vendor/jquery.timeago.js"></script> <script type="text/javascript" src="js/vendor/mustache.js"></script> <script type="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); });function renderHomeView(event){event.preventDefault();homeView(); }function homeView(){$('#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');}function template(name) {return Mustache.compile($('#'+name+'-template').html()); }function showNotification(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插件提供了原生的設備視覺提醒。參閱文檔了解更多信息。
反饋提交表單
第二個屏幕允許用戶提交反饋。
我們增加了一個反饋表單，來記錄用戶的反饋。
<script type="text/x-mustache-template" id="feedback-form-template"><form action="" id="feedbackForm"><div data-role="fieldcontain"><label for="name">Describe</label><input type="text" name="name" id="name" placeholder="Full Name eg. Shekhar Gulati "></div><div data-role="fieldcontain"><label for="description">Describe</label><textarea name="description" id="description" placeholder="Message for author.."></textarea></div><div id="checkboxes1" data-role="fieldcontain"><fieldset data-role="controlgroup" data-type="vertical"><legend>Share my location</legend><input id="sharemylocation" name="sharemylocation" type="checkbox" value="true"><label for="sharemylocation">Share</label></fieldset></div><button id="create-button" data-inline="true">Feedback</button></form> </script>修改app.js文件，監聽tap事件。
$(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); }}); }當反饋表單提交后，我們從表單獲取了數據。如果用戶勾選了“分享我的位置”，我們會使用geolocation插件來獲取用戶的位置。最后，我們將POST請求提交到我們的REST服務。一旦成功提交，我們顯示一個提醒。
運行應用
現在我們可以在設備上安裝和運行應用了。使用如下命令：
phonegap run android今天就到這里了。多多回饋。
原文 Day 10: PhoneGap--Mobile Development for the Dummies
翻譯 SegmentFault
總結
以上是生活随笔為你收集整理的Day 10： PhoneGap —— 开发手机应用如此简单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Day 9: TextBlob——对文本
- 下一篇： Day 11: AeroGear 推送服