如何利用HTML5與MongoDB創建位置感知Web應用程序
譯文在日常生活中，我們都離不開位置識別類應用程序。Foursquare、Facebook等應用程序幫助我們和我們的家人朋友分享當前位置（或者正在參觀的景點）。而像Google Local這樣的應用則幫助我們找到當前位置附近有哪些自己需要的服務設施或業務場所。如此，如果我們需要找到一家離自己最近的咖啡廳，完全可以通過Google Local快速獲取建議并立刻動身前往。這不僅大大方便了日常生活，還能夠幫助企業將自己的產品推銷給更理想的受眾群體。無論是對消費者還是對企業，這都堪稱完美的雙贏局面。
要創建這樣一款應用程序，大家首先需要獲取用戶的地理位置信息。根據維基百科的解釋，“地理信息是指某個對象所處的現實地理位置”。就目前來看，Web應用程序中還沒有出現標準化的用戶地理位置獲取方式。雖然Google Gears這樣的開源庫能夠從用戶處獲取位置信息，但這套庫已經停止發展、只能運行在舊版本瀏覽器當中而且不支持W3C地理位置API。W3C GeoLocation API提供了一套規范，能夠通過標準化腳本訪問與托管設備相關的地理信息。Geo Location并不提供對HTML 5的官方支持，但這仍然無法阻止人們的熱情，而且我們經常聽說開發人員將GeoLocation API與HTML 5相對接。該API以用戶所收集的地理信息為基礎建立抽象層，從而保證所有瀏覽器都支持地理定位API。大家可以訪問??http://caniuse.com/#feat=geolocation??獲取下列圖表。
?
?
應用程序用例——找工作應用
在本文中，我們將創建一款能夠感知地理位置的找工作應用。應用程序將根據用戶的特定技能（例如Java、Scala以及MongoDB等）尋找最近的求職地點。應用將利用W3C GeoLocation API實現用戶定位。接下來，應用程序將用戶位置繪制在谷歌地圖當中。大家可以訪問??http://localjobshtml5-cix.rhcloud.com/??獲取這款應用。用戶圖標對應用戶當前地理位置，公文包圖標則對應目標求職地點。
如果大家點擊任何公文包圖標，地圖會如下圖所示自動放大。而當我們關閉信息窗口，畫面會再次縮小。另外，大家可以在標記中查看求職場所與當前位置之間的距離、對應職務以及其它相關資料。用戶位置與工作位置之間的距離由MongDB的地理空間功能所支持，我們會在后面的文章中進一步討論這個話題。
?
?
應用程序技術堆棧
這款應用的創建需要使用以下技術堆棧：
Java EE 6 : 我們將使用數項Java EE 6規范——JAX-RS以及CDI。JAX-RS屬于針對Restful Web服務的Java API，其作用在于根據REST架構模式為網絡服務創建提供Java API。CDI則是Context and Dependency Injection（背景與關聯性注入）的縮寫。CDI允許開發者將Java EE組件與生命周期背景進行綁定、注入，而后通過事件觸發與觀察機制以松散的耦合方式實現交互。
MongoDB : MongoDB是一套面向文檔的NoSQL數據存儲機制。我們將把工作數據保存在MongoDB當中并在應用程序中使用其地理空間功能。
HTML 5 : 我們將利用HTML 5創建應用程序客戶端，并利用W3C GeoLocation API獲取用戶的當前位置。
谷歌地圖 : 應用程序將利用谷歌地圖來處理用戶位置以及求職信息。
OpenShift : 應用程序將被部署到OpenShift公共PaaS當中。
應用程序源代碼
這款應用程序的源代碼被發布在GitHub當中，地址為：??https://github.com/shekhargulati/localjobshtml5??
前續條件
在我們著手創建應用程序之前，首先需要進行以下幾項設置任務：
1. 注冊一個OpenShift賬戶。賬戶注冊完全免費，而且紅帽將為每位用戶免費提供三套Gear用于運行應用程序。截至本文截稿時，該賬戶可以獲得1.5GB內存容量與3GB磁盤存儲空間。
2. 在設備上安裝rhc客戶工具。rhc是一套ruby gem包，因此大家需要在設備上安裝ruby 1.8.7或者更高版本。要安裝rhc，大家需輸入：
sudo gem install rhc
如果當前已經安裝過ruby，請確保其處于最新版本。要更新rhc工具，請執行如下所示命令：
sudo gem update rhc
如需其它相關rhc命令行工具設置說明，請點擊下列網址查看相關資料：??https://openshift.redhat.com/community/developers/rhc-client-tools-install??
1 利用rhc setup命令設置OpenShift賬戶。這條命令將幫助大家創建一個命名空間并將自己的ssh密鑰上傳至OpenShift服務器。
#p#
開始創建應用程序
現在我們已經完成了全部前續設置工作，現在開始創建應用程序。我們將從創建OpenShift應用程序開始。在與PaaS協作時，大家首先需要明確一點：PaaS是用來創建應用程序的。因此，現在我們要擺脫過去以虛擬機或者服務器為中心的理念，將全部精力集中在應用程序身上。
創建JBossEAP MongoDB OpenShift應用程序
要創建名為“localjobs”且使用JBossEAP與MongDB的應用程序，我們首先要執行以下命令：
rhc app create localjobs jbosseap mongodb-2.2
這將為我們創建一套應用程序容器，也就是所謂gear，并為其配置全部必要的SELinux政策以及cgroup配置。OpenShift還將為我們設置一個私有git庫，并將該庫克隆到本地系統當中。最后，OpenShift會將DNS發送至外部環境。大家可以通過??http://localjobs-domain-name.rhcloud.com??訪問該應用。將其中的域名替換為您自己的獨特域名即可。
上述命令將創建一套標準化Maven項目模板。有趣的是，在pom.xml文件中存在一段名為openshift的配置信息，如下所示。因此，當大家將自己的源代碼推送至OpenShift時，該Maven配置文件將付諸執行。該配置文件不會引發任何影響——而只是創建一個名為ROOT的war文件，從而保證我們的應用程序可用于root背景之下。
<profiles>
<profile>
<id>openshift</id>
<build>
<finalName>localjobs</finalName>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.1.1</version>
<configuration>
<outputDirectory>deployments</outputDirectory>
<warName>ROOT</warName>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
接下來，我們將把index.html與snoop.jsp兩個文件從自己的git庫中移除——它們的歷史使命已經完成。如果大家不太熟悉git的運作方式，請點擊此處閱讀由Lars Vogel撰寫的上手指南。
git rm -f src/main/webapp/index.html src/main/webapp/snoop.jsp
git commit -am "deleted template files"
添加MongoDB Java驅動程序關聯性
由OpenShift創建的pom.xml文件已經擁有全部與Java EE 6相關的關聯性。為了使用MongoDB，我們還需要添加MongoDB Java驅動關聯性。我使用的是MongoDB Java驅動的最新版本。將下列關聯性內容添加到pom.xml文件當中。大家可以點擊此處在github上查看完整的pom.xml文件。
<dependency>
<groupId>org.mongodb</groupId>
<artifactId>mongo-java-driver</artifactId>
<version>2.10.1</version>
</dependency>
啟用CDI
CDI代表背景與關聯性注入。之所以在應用程序中使用CDI，是因為我們需要利用關聯性注入來代替手動創建對象。CDI容器將管理bean生命周期，這樣我們作為開發者只需要編寫業務邏輯即可。為了讓JBossEAP應用程序服務器了解到我們正在使用CDI，我們需要在WEB-INF文件夾下創建一個beans.xml文件。該文件可以保持空白，但它的存在會使容器了解到需要加載CDI框架。Beans.xml文件的內容如下所示：
<?xml version="1.0"?>
<beans xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://jboss.org/schema/cdi/beans_1_0.xsd"/>
編寫MongDB數據庫連接類
接下來，我們將創建一個應用程序作用域bean，用于管理MongoDB數據庫連接。該連接類同時起效于本地系統與OpenShift端。大家可以點擊此處在github中查看該類的完整內容。
@ApplicationScoped
public class DBConnection {
private DB mongoDB;
@PostConstruct
public void afterCreate() {
System.out.println("just see if we can say anything");
String host = System.getenv("OPENSHIFT_MONGODB_DB_HOST");
if (host == null || "".equals(host)) {
// Create Local MongoDB Connection
} else {
String mongoport = System.getenv("OPENSHIFT_MONGODB_DB_PORT");
String user = System.getenv("OPENSHIFT_MONGODB_DB_USERNAME");
String password = System.getenv("OPENSHIFT_MONGODB_DB_PASSWORD");
String db = System.getenv("OPENSHIFT_APP_NAME");
int port = Integer.decode(mongoport);
Mongo mongo = null;
try {
mongo = new Mongo(host, port);
} catch (UnknownHostException e) {
System.out.println("Couldn't connect to Mongo: "
+ e.getMessage() + " :: " + e.getClass());
}
mongoDB = mongo.getDB(db);
if (mongoDB.authenticate(user, password.toCharArray()) == false) {
System.out.println("Failed to authenticate DB ");
}
}
}
@Produces
public DB getDB() {
return mongoDB;
}
}
在應用程序運行過程中，@ApplicationScoped bean將始終存在，并在應用程序關閉的同時被刪除。這正是我們希望通過MongoDB驅動所達到的連接池對象保留效果。
編寫RESTful后端
現在我們開始利用JAX-RS為自己的應用程序編寫RESTful后端。我們將通過創建一個用于擴展javax.ws.rs.ApplicationPath的類激活JAX-RS。大家需要指定一條基礎url，并將其作為網絡服務的訪問地址。要實現這一目的，我們需要利用ApplicationPath注釋為這個類添加注釋。如下列代碼所示，我利用“/api”作為基礎URL：
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;
@ApplicationPath("/api")
public class JaxRsActivator extends Application {
/* class body intentionally left blank */
}
在成功激活了JAX-RS之后，我們現在可以編寫自己的REST服務。大家可以訪問http://localjobs-domain-name/api/jobs/{skills}?longitude={longitude}&latitude={latitude}以查看REST端點。該REST端點將搜尋周邊經緯度范圍內全部與求職者技能相符的工作崗位。
@Path("/jobs")
public class JobsRestService {
@Inject
private DB db;
@GET
@Path("/{skills}")
@Produces(MediaType.APPLICATION_JSON)
public List<Job> allJobsNearToLocationWithSkill(
@PathParam("skills") String skills,
@QueryParam("longitude") double longitude,
@QueryParam("latitude") double latitude) {
String[] skillsArr = skills.split(",");
BasicDBObject cmd = new BasicDBObject();
cmd.put("geoNear", "jobs");
double lnglat[] = { longitude, latitude };
cmd.put("near", lnglat);
cmd.put("num", 10);
BasicDBObject skillsQuery = new BasicDBObject();
skillsQuery.put("skills",
new BasicDBObject("$in", Arrays.asList(skillsArr)));
cmd.put("query", skillsQuery);
cmd.put("distanceMultiplier", 111);
CommandResult commandResult = db.command(cmd);
BasicDBList results = (BasicDBList)commandResult.get("results");
List<Job> jobs = new ArrayList<Job>();
for (Object obj : results) {
Job job = new Job((BasicDBObject)obj);
jobs.add(job);
}
return jobs;
}
}上面所示的代碼會創建一條MongoDB附近位置查詢，其結果文件數量被限制為10個。MongoDB返回的結果將作為數據中的數值。由于我們利用經度與緯度進行定位，返回的數據也以經緯度為基礎。不過MongoDB還提供一套距離換數選項，允許我們將經緯度結果換算成更易理解的公里或者英里。在上面的代碼中，我將經緯度結果轉換為111公里。最后，我們將數據轉換為一個名為Job的域對象并將其返回。@Produces注釋將負責將數據轉換至JSON當中。
#p#
將數據載入至MongoDB當中
執行下列命令將數據載入至運行在OpenShift gear中的MongoDB。
在本地設備上，運行rhc app show。這條命令將返回應用程序的詳細信息，如下所示：
$ rhc app show -a localjobs
localjobs @ http://localjobs-newideas.rhcloud.com/ (uuid: 5195d8fe5973ca386f000083)
-----------------------------------------------------------------------------------
Created: 12:45 PM
Gears: 1 (defaults to small)
Git URL: ssh://5195d8fe5973ca386f000083@localjobs-newideas.rhcloud.com/~/git/localjobs.git/
SSH: 5195d8fe5973ca386f000083@localjobs-newideas.rhcloud.com
jbosseap-6.0 (JBoss Enterprise Application Platform 6.0)
--------------------------------------------------------
Gears: Located with mongodb-2.2
mongodb-2.2 (MongoDB NoSQL Database 2.2)
----------------------------------------
Gears: Located with jbosseap-6.0
Connection URL: mongodb://$OPENSHIFT_MONGODB_DB_HOST:$OPENSHIFT_MONGODB_DB_PORT/
Database Name: localjobs
Password: qySukKdKrZQT
Username: admin
記錄下SSH URL并利用scp命令將jobs-data.json文件復制到我們的應用程序gear當中。大家可以點擊此處下載jobs-data.json文件。
$ scp jobs-data.json <ssh url>:app-root/data
接著將SSH插入到應用當中，使用如下所示的rhc app ssh命令：
$ rhc app ssh -a localjobs
將ssh導入至應用程序gear中后，將目錄變更為app-root/data，也就是我們復制jobs-data.json文件的目錄。
$ cd app-root/data
下面運行mongoimport命令將數據導入至MongoDB數據庫當中。
$ mongoimport -d localjobs -c jobs --file jobs
data.json -u $OPENSHIFT_MONGODB_DB_USERNAME -p
$OPENSHIFT_MONGODB_DB_PASSWORD -h
$OPENSHIFT_MONGODB_DB_HOST -port
$OPENSHIFT_MONGODB_DB_PORT
上面顯示的代碼將把159個job對象導入至MongoDB當中。
最后，我們需要在工作集合中創建地理位置索引。MongoDB只支持二維地理位置索引。大家只能為每個集合匹配一套地理位置索引。在默認情況下，二維地理位置索引假設經度與緯度數值在-180（含180）到180（不含180）之間（即[-180，180]）。要創建地理信息索引，需要執行下列命令：
$ mongo
$ use localjobs
$ db.jobs.ensureIndex({"location" : "2d"})
測試RESTful服務
下面，我們將提供源代碼并向OpenShift推送變更內容，即創建項目、創建新的war文件并將其部署到運行在OpenShift上的JBossEAP當中。
$ git add .
$ git commit -am "RESful backend done"
$ git push
在代碼創建與war文件部署工作完成后，我們就可以利用curl命令對REST服務進行測試了。
curl -i -H "Accept: application/json" http://localjobs-newideas.rhcloud.com/api/jobs/java,scala?longitude=-121.894955&latitude=37.339386
HTTP/1.1 200 OK
Date: Fri, 17 May 2013 08:39:11 GMT
Server: Apache-Coyote/1.1
Content-Type: application/json
Vary: Accept-Encoding
Transfer-Encoding: chunked
[{"companyName":"CyberCoders","jobTitle":"Embedded Java Applications Engineer","distance":4153.025944882882,"skills":["java"],"formattedAddress":"1400 North Shoreline Boulevard, Mountain View, CA, United States","longitude":-122.078488,"latitude":37.414198},{"companyName":"CyberCoders","jobTitle":"Embedded Java Applications Engineer","distance":4153.025944882882,"skills":["java"],"formattedAddress":"1400 North Shoreline Boulevard, Mountain View, CA, United States","longitude":-122.078488,"latitude":37.414198}
.....
]
美化應用程序
現在我們已經證實了應用程序的REST服務工作正常，接下來要做的是構建應用的用戶界面。在本文中，我們只需創建一套非常簡單的應用用戶界面，即提供一套表單，用戶可以借助它輸入個人技能，并通過div承載谷歌地圖渲染完成的求職場所與用戶位置。如下所示在src/main/webapp文件夾中創建一個index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>LocalJobs : Find jobs near to you</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
body {
padding-top: 60px;
padding-bottom: 100px;
}
#map-canvas {
height: 500px;
width: 100%;
}
.job_info {border: 1px solid #000;padding: 15px;width: 300px}
.job_info h3 {margin-bottom: 10px}
</style>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />
<link href="css/jquery.loadmask.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="brand" href="#">LocalJobs</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div id="main" class="container">
<form id="jobSearchForm" class="form-horizontal">
<div class="control-group">
<div class="controls">
<input type="text" id="skills" name="skills" class="input-xlarge"
placeholder="Enter skills for which you want to search jobs"
required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="findJobsButton" type="submit" class="btn btn-success">Find
Jobs</button>
</div>
</div>
</form>
</div>
<div id="map-canvas"></div>
<script type="text/x-mustache-template" id="job-template">
<div class="jobBox">
<h3>{{jobtitle}}</h3>
<p> {{company}} </p>
<address> {{address}} </address>
<p> {{skills}}</p>
<p> {{distance}} </p>
</div>
</script>
<script src="js/jquery.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script type="text/javascript" src="js/jquery.loadmask.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="js/bootstrap.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/mustache.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$('#skills').tagsInput({
defaultText : "add skills"
});
});
</script>
<script src="js/app.js"></script>
</body>
</html>
上面顯示的index.html是一個HTML 5文件，而且使用HTML 5的文檔類型。我們的應用使用Twitter Bootstrap，這是一款免費工具集合，用于創建網站以及web應用程序。它包含了以HTML以及CSS為基礎的設計模板，提供全套排版、表格、按鈕、圖表、導航、其它界面組件以及備選JavaScript擴展。大家可以點擊此處從本項目的github庫中獲取全部相關css.js文件。
檢查GeoLocation支持
由于我們的應用程序以用戶位置為基礎，因此在進一步調整應用程序之前需要首先檢查GeoLocation API。為了檢查用戶瀏覽器對GeoLocation API的支持效果，需要將如下所示記錄準備函數添加進來。如果用戶瀏覽器支持GeoLocation，那么導航對象中將具有geolocation對象。大家還可以利用Modernizr等開源庫檢測HTML 5功能。如果用戶瀏覽器不支持geolocation，大家需要禁用表單提交按鈕。
<script type="text/javascript">
if(!navigator.geolocation){
alert('Your browser does not support geolocation. Please download latest browser version.');
$("#findJobsButton").attr("disabled", "disabled");
}
</script>
#p#
在提交表單中查找工作
現在我們已經確認用戶瀏覽器能夠支持GeoLocation API，接下來要做的就是根據用戶的個人技能為其查找理想工作。此項目利用Backbone.js為我們的客戶端代碼添加結構。如果大家對backbone.js不太熟悉，可以點擊此處查看我之前發表的博文《利用Backbone.js、JaxRS、MongoDB以及OpenShift創建單頁面Web應用程序》，那里提供了與利用backbone.js創建應用有關的詳細說明。請將app.js文件考慮到src/main/webapp目錄下的js文件夾當中。下面展示的是經過精簡的app.js文件內容，這是為了適當縮減本文的篇幅。
// app.js
(function($){
var LocalJobs = {};
window.LocalJobs = LocalJobs;
var template = function(name) {
return Mustache.compile($('#'+name+'-template').html());
};
LocalJobs.HomeView = Backbone.View.extend({
tagName : "form",
el : $("#main"),
events : {
"submit" : "findJobs"
},
render : function(){
console.log("rendering home page..");
$("#map-canvas").empty();
return this;
},
findJobs : function(event){
event.preventDefault();
$("#map-canvas").empty();
$("#jobSearchForm").mask("Finding Jobs ...");
var skills = this.$('input[name=skills]').val().split(',');
console.log("skills : "+skills);
var self = this;
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
navigator.geolocation.getCurrentPosition(function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
console.log('longitude .. '+longitude);
console.log('latitude .. '+latitude);
$("#jobSearchForm").unmask();
self.plotUserLocation(new google.maps.LatLng(latitude, longitude),map);
$.get("api/jobs/"+skills+"/?longitude="+longitude+"&latitude="+latitude , function (results){
$("#jobSearchForm").unmask();
self.renderResults(results,self,map);
});
}, function(e){
$("#jobSearchForm").unmask();
// handle error
},
{ timeout: 45000 }
);
},
plotUserLocation : function(latLng , map){
},
renderResults : function(results,self,map){
var infoWindow = new google.maps.InfoWindow();
_.each(results,function(result){
self.renderJob(result,map , infoWindow);
});
},
renderJob : function(result , map , infoWindow){
}
});
LocalJobs.Router = Backbone.Router.extend({
el : $("#main"),
routes : {
"" : "showHomePage"
},
showHomePage : function(){
console.log('in home page...');
var homeView = new LocalJobs.HomeView();
this.el.append(homeView.render().el);
}
});
var app = new LocalJobs.Router();
Backbone.history.start();
})(jQuery);
下面我們一起來解讀代碼的具體含義。
1. 上面展示的代碼旨在創建一個backbone路由實例，并將其作為root DOM的主div。下面我們點擊基礎url，路由機制會調用映射HomeView的showHomePage函數。渲染函數中的HomeView用于通過id map-canvas清空div。
2. 在HomeView當中，我們擁有一套針對表單提交的事件偵聽器。因此，當用戶輸入個人技能并按下“提交”按鈕后，findJobs函數將被調用。
3. findJobs函數是一切運行的基礎。
3.1 我們首先利用技能名稱獲取輸入值，然后利用逗號將內容分割，這樣就構成了一套技能數組。
3.2 我們接著創建一個谷歌地圖對象并為其設置一些默認值。
3.3 下面我們調用navigator.geolocation對象上的getCurrentPosition方法。此方法只有一項必要參數success_callback與兩項可選參數error_callback，外加可選對象PositionOptions。
3.4 如果getCurrentPosition被調用成功，則繼續調用success_callback。這條回調函數擁有一項參數——position。這個position對象負責保留用戶的經偉度結果，并在地圖上繪制用戶的當前位置。
3.5 在用戶位置繪制完成之后，則通過jQuery進行獲取調用。
3.6 最后所有結果都將經過迭代并顯示在地圖之上。
推送代碼
現在大家可以將代碼推送至OpenShift處并查看應用程序在云中的運行效果。
git add .
git commit -am "localjobs app with UI"
git push
按照我所羅列的提示內容，應用程序將運行在https://localjobs-domain-name.rhcloud.com/位置。大家可以將具體域名替換為自己的命名空間。
總結
在本篇博文中，我們共同探討了如何利用HTML 5 GeoLocation API以及MongoDB Geo位置索引功能創建位置感知類應用程序。希望文章內容能給大家的開發工作帶來啟示，感謝閱讀。
