如何利用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服务器。

  开始创建应用程序

  现在我们已经完成了全部前续设置工作,现在开始创建应用程序。我们将从创建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背景之下。

  openshift localjobs maven-war-plugin 2.1.1 deployments ROOT

  接下来,我们将把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文件。

  org.mongodb mongo-java-driver 2.10.1

  启用CDI

  CDI代表背景与关联性注入。之所以在应用程序中使用CDI,是因为我们需要利用关联性注入来代替手动创建对象。CDI容器将管理bean生命周期,这样我们作为开发者只需要编写业务逻辑即可。为了让JBossEAP应用程序服务器了解到我们正在使用CDI,我们需要在WEB-INF文件夹下创建一个beans.xml文件。该文件可以保持空白,但它的存在会使容器了解到需要加载CDI框架。Beans.xml文件的内容如下所示:

  sun.com/xml/ns/javaee" NS = "http://java.sun.com/xml/ns/javaee" />

  编写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 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 jobs = new ArrayList(); for (Object obj : results) { Job job = new Job((BasicDBObject)obj); jobs.add(job); } return jobs; } }

  上面所示的代码会创建一条MongoDB附近位置查询,其结果文件数量被限制为10个。MongoDB返回的结果将作为数据中的数值。由于我们利用经度与纬度进行定位,返回的数据也以经纬度为基础。不过MongoDB还提供一套距离换数选项,允许我们将经纬度结果换算成更易理解的公里或者英里。在上面的代码中,我将经纬度结果转换为111公里。最后,我们将数据转换为一个名为Job的域对象并将其返回。@Produces注释将负责将数据转换至JSON当中。

  将数据载入至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 :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文件:

时间: 2024-09-21 00:03:27

如何利用HTML5与MongoDB创建位置感知Web程序的相关文章

利用Geronimo 2.2创建安全的Web Service应用

随着 Web Service 应用越来越广泛, 如何保证服务能够安全的访问和传输,也逐渐引起开发人员和用户的关注.Web Service 的安全可以从两方面考虑:访问安全和传输安全 ..前者主要指只有授权用户可以访问应用, 而后者侧重于在消息传输过程中如何保证消息的私密性和完整性.本文介绍了如何在 Apache Geronimo 开发和部署安全的 Web Service 应用,以确保信息交互的安全,将侧重介绍如何基于 HTTP/HTTPS 协议保护 Web Service 应用访问和传输的安全.

使用Apache Lucene和Solr进行位置感知搜索

不管是通过支持 GPS 的智能手机查找最近的咖啡馆,还是通过社交站点查找附近的朋友,或是查看特定城市中运输某种商品的所有货车,越来越多的人和企业都使用位置感知的搜索服务.创建位置感知搜索服务通常属于昂贵的专用解决方案的一部分,并且一般由地理空间专家完成.不过,很流行的开源搜索库 Apache Lucene 和强大的 Lucene 搜索服务器 Apache Solr 最近添加了空间位置功能. 地理位置在空间搜索中至关重要!地理位置不仅在地产中至尊为王,将其用在搜索中还能帮助位于特定位置的用户快速找

HTML5移动应用开发第1章:用HTML5、地理定位API和Web服务来开发移动应用

HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.不仅如此,最流行的移动浏览器甚至已经采用并实现了 HTML 5 规范中很多重要部分.在这个由五个部分组成的系列里,您将仔细了解 HTML 5 中的一些新技术,它们对移动 Web 应用程序开发具有重大影响.在本系列的每一部分中,您将动手开发一个展示 HTML 5 新特性的移动 Web 应用程序,这些特性可用于最新的移动 Web 浏览

使用HTML5 和CSS3创建现代Web站点

开始之前本教程假定您具有 HTML.CSS 和 JavaScript 的一些基本经验.假定您知道什么是 HTML 元素或标记.属性表示什么.HTML 标记的基本语法.Web 页面的常规结构等等.关于 CSS,您应该熟悉元素.类.以及基于 ID 的选择器.CSS 特性的语法以及如何使用内嵌或外部样式表在您的 Web 页面中包括 CSS.最后,假定您具有一些 JavaScript 的工作知识,例如什么是变量.函数.if 语句和 for 循环以及如何在您的 Web 页面中包括 JavaScript 代

利用HTML5做网页

利用HTML5做网页 首先,我们要声明并创建文档类型,我们不再HTML 4或XHTML 1.0 那样 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....声明,我们可以这样写: <!DOCTYPE html> 看看吧,简单而明显,不区分大小写.它可以更容易向后兼容.至少可以节省你一些打字的时间. 我们现在已经为HTML 5文档定义了类型.到目前为止一切顺利.现在,这们看看HTML5的新标签.在我们浏览新标签之前,先看看我们平常是怎么写的: &

javascript使用百度地图api和html5特性获取浏览器位置

 本文介绍了javascript使用百度地图api和html5特性获取浏览器位置的小功能,大家参考使用吧 代码如下: <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的位置:</p> <button onclick="getLocation()">试一下</button> <script src="http:/

利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

利用html5调用本地摄像头拍照上传图片

原文:利用html5调用本地摄像头拍照上传图片 xmlns="http://www.w3.org/1999/xhtml">    html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以

Kataspace:用HTML5和WebGL创建基于浏览器的虚拟世界

源自斯坦福的创业公司Katalabs发布了一个用于创建基于浏览器的虚拟世界的开源框架. 名叫KataSpace的软件,利用了新兴的HTML5技术,以及WebGL和WebSockets,允许用户无需安装任何插件,直接在浏览器的3D环境中展开互动.Katalabs已经推出了一个演示用的DEMO,它推荐使用Firefox 4 Beta7浏览器.在输入一个用户名,选择一个虚拟化身后,玩家就能进入3D世界,可以看到3D地形和其他用户的化身,用户之间可以用聊天窗口聊天. 原文链接:http://news.c