自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何利用HTML5與MongoDB創(chuàng)建位置感知Web應(yīng)用程序

譯文
開發(fā) 前端 MongoDB
在日常生活中,我們都離不開位置識別類應(yīng)用程序。Foursquare、Facebook等應(yīng)用程序幫助我們和我們的家人朋友分享當(dāng)前位置(或者正在參觀的景點)。而像Google Local這樣的應(yīng)用則幫助我們找到當(dāng)前位置附近有哪些自己需要的服務(wù)設(shè)施或業(yè)務(wù)場所。

在日常生活中,我們都離不開位置識別類應(yīng)用程序。Foursquare、Facebook等應(yīng)用程序幫助我們和我們的家人朋友分享當(dāng)前位置(或者正在參觀的景點)。而像Google Local這樣的應(yīng)用則幫助我們找到當(dāng)前位置附近有哪些自己需要的服務(wù)設(shè)施或業(yè)務(wù)場所。如此,如果我們需要找到一家離自己最近的咖啡廳,完全可以通過Google Local快速獲取建議并立刻動身前往。這不僅大大方便了日常生活,還能夠幫助企業(yè)將自己的產(chǎn)品推銷給更理想的受眾群體。無論是對消費者還是對企業(yè),這都堪稱完美的雙贏局面。

要創(chuàng)建這樣一款應(yīng)用程序,大家首先需要獲取用戶的地理位置信息。根據(jù)維基百科的解釋,“地理信息是指某個對象所處的現(xiàn)實地理位置”。就目前來看,Web應(yīng)用程序中還沒有出現(xiàn)標(biāo)準(zhǔn)化的用戶地理位置獲取方式。雖然Google Gears這樣的開源庫能夠從用戶處獲取位置信息,但這套庫已經(jīng)停止發(fā)展、只能運(yùn)行在舊版本瀏覽器當(dāng)中而且不支持W3C地理位置API。W3C GeoLocation API提供了一套規(guī)范,能夠通過標(biāo)準(zhǔn)化腳本訪問與托管設(shè)備相關(guān)的地理信息。Geo Location并不提供對HTML 5的官方支持,但這仍然無法阻止人們的熱情,而且我們經(jīng)常聽說開發(fā)人員將GeoLocation API與HTML 5相對接。該API以用戶所收集的地理信息為基礎(chǔ)建立抽象層,從而保證所有瀏覽器都支持地理定位API。大家可以訪問??http://caniuse.com/#feat=geolocation??獲取下列圖表。

?

應(yīng)用程序用例——找工作應(yīng)用

在本文中,我們將創(chuàng)建一款能夠感知地理位置的找工作應(yīng)用。應(yīng)用程序?qū)⒏鶕?jù)用戶的特定技能(例如Java、Scala以及MongoDB等)尋找最近的求職地點。應(yīng)用將利用W3C GeoLocation API實現(xiàn)用戶定位。接下來,應(yīng)用程序?qū)⒂脩粑恢美L制在谷歌地圖當(dāng)中。大家可以訪問??http://localjobshtml5-cix.rhcloud.com/??獲取這款應(yīng)用。用戶圖標(biāo)對應(yīng)用戶當(dāng)前地理位置,公文包圖標(biāo)則對應(yīng)目標(biāo)求職地點。 

如果大家點擊任何公文包圖標(biāo),地圖會如下圖所示自動放大。而當(dāng)我們關(guān)閉信息窗口,畫面會再次縮小。另外,大家可以在標(biāo)記中查看求職場所與當(dāng)前位置之間的距離、對應(yīng)職務(wù)以及其它相關(guān)資料。用戶位置與工作位置之間的距離由MongDB的地理空間功能所支持,我們會在后面的文章中進(jìn)一步討論這個話題。

?

應(yīng)用程序技術(shù)堆棧

這款應(yīng)用的創(chuàng)建需要使用以下技術(shù)堆棧:

Java EE 6 : 我們將使用數(shù)項Java EE 6規(guī)范——JAX-RS以及CDI。JAX-RS屬于針對Restful Web服務(wù)的Java API,其作用在于根據(jù)REST架構(gòu)模式為網(wǎng)絡(luò)服務(wù)創(chuàng)建提供Java API。CDI則是Context and Dependency Injection(背景與關(guān)聯(lián)性注入)的縮寫。CDI允許開發(fā)者將Java EE組件與生命周期背景進(jìn)行綁定、注入,而后通過事件觸發(fā)與觀察機(jī)制以松散的耦合方式實現(xiàn)交互。

MongoDB : MongoDB是一套面向文檔的NoSQL數(shù)據(jù)存儲機(jī)制。我們將把工作數(shù)據(jù)保存在MongoDB當(dāng)中并在應(yīng)用程序中使用其地理空間功能。

HTML 5 : 我們將利用HTML 5創(chuàng)建應(yīng)用程序客戶端,并利用W3C GeoLocation API獲取用戶的當(dāng)前位置。

谷歌地圖 : 應(yīng)用程序?qū)⒗霉雀璧貓D來處理用戶位置以及求職信息。

OpenShift : 應(yīng)用程序?qū)⒈徊渴鸬絆penShift公共PaaS當(dāng)中。

應(yīng)用程序源代碼

這款應(yīng)用程序的源代碼被發(fā)布在GitHub當(dāng)中,地址為:??https://github.com/shekhargulati/localjobshtml5??

前續(xù)條件

在我們著手創(chuàng)建應(yīng)用程序之前,首先需要進(jìn)行以下幾項設(shè)置任務(wù):

1. 注冊一個OpenShift賬戶。賬戶注冊完全免費,而且紅帽將為每位用戶免費提供三套Gear用于運(yùn)行應(yīng)用程序。截至本文截稿時,該賬戶可以獲得1.5GB內(nèi)存容量與3GB磁盤存儲空間。

2. 在設(shè)備上安裝rhc客戶工具。rhc是一套ruby gem包,因此大家需要在設(shè)備上安裝ruby 1.8.7或者更高版本。要安裝rhc,大家需輸入:

sudo gem install rhc

如果當(dāng)前已經(jīng)安裝過ruby,請確保其處于最新版本。要更新rhc工具,請執(zhí)行如下所示命令:

sudo gem update rhc

如需其它相關(guān)rhc命令行工具設(shè)置說明,請點擊下列網(wǎng)址查看相關(guān)資料:??https://openshift.redhat.com/community/developers/rhc-client-tools-install??

1 利用rhc setup命令設(shè)置OpenShift賬戶。這條命令將幫助大家創(chuàng)建一個命名空間并將自己的ssh密鑰上傳至OpenShift服務(wù)器。

#p#

開始創(chuàng)建應(yīng)用程序

現(xiàn)在我們已經(jīng)完成了全部前續(xù)設(shè)置工作,現(xiàn)在開始創(chuàng)建應(yīng)用程序。我們將從創(chuàng)建OpenShift應(yīng)用程序開始。在與PaaS協(xié)作時,大家首先需要明確一點:PaaS是用來創(chuàng)建應(yīng)用程序的。因此,現(xiàn)在我們要擺脫過去以虛擬機(jī)或者服務(wù)器為中心的理念,將全部精力集中在應(yīng)用程序身上。

創(chuàng)建JBossEAP MongoDB OpenShift應(yīng)用程序

要創(chuàng)建名為“l(fā)ocaljobs”且使用JBossEAP與MongDB的應(yīng)用程序,我們首先要執(zhí)行以下命令:

rhc app create localjobs jbosseap mongodb-2.2

這將為我們創(chuàng)建一套應(yīng)用程序容器,也就是所謂gear,并為其配置全部必要的SELinux政策以及cgroup配置。OpenShift還將為我們設(shè)置一個私有g(shù)it庫,并將該庫克隆到本地系統(tǒng)當(dāng)中。最后,OpenShift會將DNS發(fā)送至外部環(huán)境。大家可以通過??http://localjobs-domain-name.rhcloud.com??訪問該應(yīng)用。將其中的域名替換為您自己的獨特域名即可。

上述命令將創(chuàng)建一套標(biāo)準(zhǔn)化Maven項目模板。有趣的是,在pom.xml文件中存在一段名為openshift的配置信息,如下所示。因此,當(dāng)大家將自己的源代碼推送至OpenShift時,該Maven配置文件將付諸執(zhí)行。該配置文件不會引發(fā)任何影響——而只是創(chuàng)建一個名為ROOT的war文件,從而保證我們的應(yīng)用程序可用于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庫中移除——它們的歷史使命已經(jīng)完成。如果大家不太熟悉git的運(yùn)作方式,請點擊此處閱讀由Lars Vogel撰寫的上手指南。

git rm -f src/main/webapp/index.html src/main/webapp/snoop.jsp
git commit -am "deleted template files"

添加MongoDB Java驅(qū)動程序關(guān)聯(lián)性

由OpenShift創(chuàng)建的pom.xml文件已經(jīng)擁有全部與Java EE 6相關(guān)的關(guān)聯(lián)性。為了使用MongoDB,我們還需要添加MongoDB Java驅(qū)動關(guān)聯(lián)性。我使用的是MongoDB Java驅(qū)動的最新版本。將下列關(guān)聯(lián)性內(nèi)容添加到pom.xml文件當(dāng)中。大家可以點擊此處在github上查看完整的pom.xml文件。

<dependency>
<groupId>org.mongodb</groupId>
<artifactId>mongo-java-driver</artifactId>
<version>2.10.1</version>
</dependency>

啟用CDI

CDI代表背景與關(guān)聯(lián)性注入。之所以在應(yīng)用程序中使用CDI,是因為我們需要利用關(guān)聯(lián)性注入來代替手動創(chuàng)建對象。CDI容器將管理bean生命周期,這樣我們作為開發(fā)者只需要編寫業(yè)務(wù)邏輯即可。為了讓JBossEAP應(yīng)用程序服務(wù)器了解到我們正在使用CDI,我們需要在WEB-INF文件夾下創(chuàng)建一個beans.xml文件。該文件可以保持空白,但它的存在會使容器了解到需要加載CDI框架。Beans.xml文件的內(nèi)容如下所示:

<?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數(shù)據(jù)庫連接類

接下來,我們將創(chuàng)建一個應(yīng)用程序作用域bean,用于管理MongoDB數(shù)據(jù)庫連接。該連接類同時起效于本地系統(tǒng)與OpenShift端。大家可以點擊此處在github中查看該類的完整內(nèi)容。

@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;
}

}

在應(yīng)用程序運(yùn)行過程中,@ApplicationScoped bean將始終存在,并在應(yīng)用程序關(guān)閉的同時被刪除。這正是我們希望通過MongoDB驅(qū)動所達(dá)到的連接池對象保留效果。

編寫RESTful后端

現(xiàn)在我們開始利用JAX-RS為自己的應(yīng)用程序編寫RESTful后端。我們將通過創(chuàng)建一個用于擴(kuò)展javax.ws.rs.ApplicationPath的類激活JAX-RS。大家需要指定一條基礎(chǔ)url,并將其作為網(wǎng)絡(luò)服務(wù)的訪問地址。要實現(xiàn)這一目的,我們需要利用ApplicationPath注釋為這個類添加注釋。如下列代碼所示,我利用“/api”作為基礎(chǔ)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之后,我們現(xiàn)在可以編寫自己的REST服務(wù)。大家可以訪問http://localjobs-domain-name/api/jobs/{skills}?longitude={longitude}&latitude={latitude}以查看REST端點。該REST端點將搜尋周邊經(jīng)緯度范圍內(nèi)全部與求職者技能相符的工作崗位。

@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;
}
}

上面所示的代碼會創(chuàng)建一條MongoDB附近位置查詢,其結(jié)果文件數(shù)量被限制為10個。MongoDB返回的結(jié)果將作為數(shù)據(jù)中的數(shù)值。由于我們利用經(jīng)度與緯度進(jìn)行定位,返回的數(shù)據(jù)也以經(jīng)緯度為基礎(chǔ)。不過MongoDB還提供一套距離換數(shù)選項,允許我們將經(jīng)緯度結(jié)果換算成更易理解的公里或者英里。在上面的代碼中,我將經(jīng)緯度結(jié)果轉(zhuǎn)換為111公里。最后,我們將數(shù)據(jù)轉(zhuǎn)換為一個名為Job的域?qū)ο蟛⑵浞祷?。@Produces注釋將負(fù)責(zé)將數(shù)據(jù)轉(zhuǎn)換至JSON當(dāng)中。

#p#

將數(shù)據(jù)載入至MongoDB當(dāng)中

執(zhí)行下列命令將數(shù)據(jù)載入至運(yùn)行在OpenShift gear中的MongoDB。

在本地設(shè)備上,運(yùn)行rhc app show。這條命令將返回應(yīng)用程序的詳細(xì)信息,如下所示:

$ 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文件復(fù)制到我們的應(yīng)用程序gear當(dāng)中。大家可以點擊此處下載jobs-data.json文件。

$ scp jobs-data.json <ssh url>:app-root/data

接著將SSH插入到應(yīng)用當(dāng)中,使用如下所示的rhc app ssh命令:

$ rhc app ssh -a localjobs

將ssh導(dǎo)入至應(yīng)用程序gear中后,將目錄變更為app-root/data,也就是我們復(fù)制jobs-data.json文件的目錄。

$ cd app-root/data

下面運(yùn)行mongoimport命令將數(shù)據(jù)導(dǎo)入至MongoDB數(shù)據(jù)庫當(dāng)中。

$ 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對象導(dǎo)入至MongoDB當(dāng)中。

最后,我們需要在工作集合中創(chuàng)建地理位置索引。MongoDB只支持二維地理位置索引。大家只能為每個集合匹配一套地理位置索引。在默認(rèn)情況下,二維地理位置索引假設(shè)經(jīng)度與緯度數(shù)值在-180(含180)到180(不含180)之間(即[-180,180])。要創(chuàng)建地理信息索引,需要執(zhí)行下列命令:

$ mongo

$ use localjobs

$ db.jobs.ensureIndex({"location" : "2d"})

測試RESTful服務(wù)

下面,我們將提供源代碼并向OpenShift推送變更內(nèi)容,即創(chuàng)建項目、創(chuàng)建新的war文件并將其部署到運(yùn)行在OpenShift上的JBossEAP當(dāng)中。

$ git add .
$ git commit -am "RESful backend done"

$ git push

在代碼創(chuàng)建與war文件部署工作完成后,我們就可以利用curl命令對REST服務(wù)進(jìn)行測試了。

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}
.....
]

美化應(yīng)用程序

現(xiàn)在我們已經(jīng)證實了應(yīng)用程序的REST服務(wù)工作正常,接下來要做的是構(gòu)建應(yīng)用的用戶界面。在本文中,我們只需創(chuàng)建一套非常簡單的應(yīng)用用戶界面,即提供一套表單,用戶可以借助它輸入個人技能,并通過div承載谷歌地圖渲染完成的求職場所與用戶位置。如下所示在src/main/webapp文件夾中創(chuàng)建一個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的文檔類型。我們的應(yīng)用使用Twitter Bootstrap,這是一款免費工具集合,用于創(chuàng)建網(wǎng)站以及web應(yīng)用程序。它包含了以HTML以及CSS為基礎(chǔ)的設(shè)計模板,提供全套排版、表格、按鈕、圖表、導(dǎo)航、其它界面組件以及備選JavaScript擴(kuò)展。大家可以點擊此處從本項目的github庫中獲取全部相關(guān)css.js文件。

檢查GeoLocation支持

由于我們的應(yīng)用程序以用戶位置為基礎(chǔ),因此在進(jìn)一步調(diào)整應(yīng)用程序之前需要首先檢查GeoLocation API。為了檢查用戶瀏覽器對GeoLocation API的支持效果,需要將如下所示記錄準(zhǔn)備函數(shù)添加進(jìn)來。如果用戶瀏覽器支持GeoLocation,那么導(dǎo)航對象中將具有g(shù)eolocation對象。大家還可以利用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#

在提交表單中查找工作

現(xiàn)在我們已經(jīng)確認(rèn)用戶瀏覽器能夠支持GeoLocation API,接下來要做的就是根據(jù)用戶的個人技能為其查找理想工作。此項目利用Backbone.js為我們的客戶端代碼添加結(jié)構(gòu)。如果大家對backbone.js不太熟悉,可以點擊此處查看我之前發(fā)表的博文《利用Backbone.js、JaxRS、MongoDB以及OpenShift創(chuàng)建單頁面Web應(yīng)用程序》,那里提供了與利用backbone.js創(chuàng)建應(yīng)用有關(guān)的詳細(xì)說明。請將app.js文件考慮到src/main/webapp目錄下的js文件夾當(dāng)中。下面展示的是經(jīng)過精簡的app.js文件內(nèi)容,這是為了適當(dāng)縮減本文的篇幅。

// 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. 上面展示的代碼旨在創(chuàng)建一個backbone路由實例,并將其作為root DOM的主div。下面我們點擊基礎(chǔ)url,路由機(jī)制會調(diào)用映射HomeView的showHomePage函數(shù)。渲染函數(shù)中的HomeView用于通過id map-canvas清空div。

2. 在HomeView當(dāng)中,我們擁有一套針對表單提交的事件偵聽器。因此,當(dāng)用戶輸入個人技能并按下“提交”按鈕后,findJobs函數(shù)將被調(diào)用。

3. findJobs函數(shù)是一切運(yùn)行的基礎(chǔ)。

3.1 我們首先利用技能名稱獲取輸入值,然后利用逗號將內(nèi)容分割,這樣就構(gòu)成了一套技能數(shù)組。

3.2 我們接著創(chuàng)建一個谷歌地圖對象并為其設(shè)置一些默認(rèn)值。

3.3 下面我們調(diào)用navigator.geolocation對象上的getCurrentPosition方法。此方法只有一項必要參數(shù)success_callback與兩項可選參數(shù)error_callback,外加可選對象PositionOptions。

3.4 如果getCurrentPosition被調(diào)用成功,則繼續(xù)調(diào)用success_callback。這條回調(diào)函數(shù)擁有一項參數(shù)——position。這個position對象負(fù)責(zé)保留用戶的經(jīng)偉度結(jié)果,并在地圖上繪制用戶的當(dāng)前位置。

3.5 在用戶位置繪制完成之后,則通過jQuery進(jìn)行獲取調(diào)用。

3.6 最后所有結(jié)果都將經(jīng)過迭代并顯示在地圖之上。

推送代碼

現(xiàn)在大家可以將代碼推送至OpenShift處并查看應(yīng)用程序在云中的運(yùn)行效果。

git add .
git commit -am "localjobs app with UI"
git push

按照我所羅列的提示內(nèi)容,應(yīng)用程序?qū)⑦\(yùn)行在https://localjobs-domain-name.rhcloud.com/位置。大家可以將具體域名替換為自己的命名空間。

總結(jié)

在本篇博文中,我們共同探討了如何利用HTML 5 GeoLocation API以及MongoDB Geo位置索引功能創(chuàng)建位置感知類應(yīng)用程序。希望文章內(nèi)容能給大家的開發(fā)工作帶來啟示,感謝閱讀。

原文鏈接:??https://www.openshift.com/blogs/how-to-build-location-aware-web-applications-using-html5-and-mongodb??

責(zé)任編輯:林師授 來源: 51CTO
相關(guān)推薦

2015-02-05 10:11:44

HTML5Application

2012-05-24 15:49:35

HTML5

2014-03-20 10:50:44

HTML5 定位技術(shù)

2012-09-04 10:15:00

IBMdw

2009-01-19 11:07:42

C#Web.NET

2009-07-29 17:42:47

ibmdwWeb2.0

2009-08-27 11:53:45

ibmdw云計算

2012-01-01 22:07:28

jQMjQuery MobiHTHL5

2016-05-27 15:44:12

H5LeanCloudWex5

2012-06-11 09:37:41

2009-09-03 17:36:13

C#創(chuàng)建Web應(yīng)用程序

2011-05-25 09:34:30

HTML5cssjavascript

2009-09-15 23:40:52

2015-07-03 11:07:39

HTML5移動Web

2013-11-19 15:35:01

2015-11-20 17:09:36

jsWeb應(yīng)用程序

2013-06-24 10:21:47

面向?qū)ο?/a>Web應(yīng)用JavaScript

2024-09-06 10:46:04

2012-06-07 09:15:14

ibmdw

2013-09-03 15:45:50

點贊
收藏

51CTO技術(shù)棧公眾號