构建具有GPS、触摸和运动传感器的应用程序

本文将介绍如何使用Intel XDK作为集成开发环境(IDE),结合HTML5JavaScript来构建应用程序。这些应用程序使用了Intel XDK中不同的演示项目。

这是一次尝试,将Three.js、Crosswalk和WebGL触摸示例引入到Android平台。这个应用程序还使用了Geolocation API来获取用户的位置,同时还涉及了一个简单的加速度计示例。

将要介绍的内容

使用跨平台IDE的风格,然后为Android平台完成应用程序的最终构建。

使用HTML5来探索创建针对运动传感器等的应用程序的机会。

主要部分将展示如何使用HTML和Intel XDK来设置和编译针对Android平台的应用程序。

由于已经介绍过Intel XDK,让再次简要讨论它。它是一个来自Intel的跨平台IDE,可以免费使用,并且可以用来构建不同平台的应用程序。Intel XDK允许模拟应用程序,然后为其构建。

将为这个教程使用什么

JavaScript库:

  • Three.js:用于展示触摸示例。
  • 内置的CrossWalk应用程序,用于扩展Android应用程序。
  • Geolocation API:Intel XDK中内置的Android加速度计演示,并对其进行扩展。

Geolocation

从Intel XDK开始一个新项目,然后从一个空白模板开始。

命名项目。需要修改index.html页面以访问GeoLocation API。已经使用了一个已经在(http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/)中描述的项目。

让看看作者是如何实现Geolocation API的,以及如何在index.html页面中集成它。

使用的Geolocation API来自(http://dev.w3.org/geo/api/)。这个API允许找到用户的位置,并且是了解Geolocation如何工作的简单方法。

检查Geolocation对象。保存项目并在模拟器中检查它,有助于了解它的行为。

接下来,需要为项目创建构建。在构建页面上点击“立即构建应用程序”。应用程序将被构建。构建日志将被创建。

TIPS

使用Intel XDK,发现可以轻松地为Android平台构建一个Geolocation应用程序,使用空白模板。进一步地,能够模拟应用程序,然后构建APK(将在云中创建,然后下载它)。

对于HTML5开发者来说,创建一个Android应用程序而不做任何超出范围的事情是一个简单的愿望。

TOUCH

对于触摸示例,将使用Intel XDK加上CROSSWALK构建来自演示应用程序的最终应用程序。这里的基本事情是,将使用Three.JS库为项目创建良好的GUI体验。Crosswalk构建允许将基于WebGL的应用程序构建到Android平台。

通过使用Intel XDK中已经存在的演示(即Crosswalk演示)来开始项目创建,然后按照喜好命名它。

使用两个Three.js库(stats.min.js和three.min.js),正如在之前关于Intel XDK的文章中已经看到的,使用相同的理解来声明Java Script。

现在需要对项目进行模拟,以查看触摸行为。模拟允许检查当apk创建时项目将如何表现。在这里,可以检查Three.JS库的有效使用。

现在在构建菜单上,将会出现一个弹出窗口,说构建应该是针对Android的Crosswalk平台。下一个菜单将询问是否选择了所有Cordova插件。然后点击构建。项目将有两个构建(一个针对X86设备,另一个针对ARM设备)。

TIPS

在这里学到的是,要将WebGL带入Android生活,需要有应用程序的Crosswalk构建。可以使用一个演示应用程序作为基础,然后根据喜好扩展它,以增加应用程序的功能。Intel XDK允许快速创建一个触摸启用的应用程序,而无需任何麻烦,并保持HTML5的基础知识。

MOTION SENSOR

对于这个项目,将使用Intel XDK中给出的演示,并对它进行一些修改。将使用加速度计示例滚动罐演示作为应用程序。

将更改目录中的图像图标,以给Bob(Codeproject框架)的感觉。

在文件夹中添加图像后,在模拟器中得到以下结果。

现在构建。构建将是普通的Android应用程序。准备好使用加速度计滚动了。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485