通过Intel XDK进行探索

• 下载 Geolocation.rar - 6.3 KB
• 下载 Abhishek3.rar - 425.1 KB
• 下载 Abhishek3.crosswalk.x86.20140824201436.rar - 19.6 MB
• 下载 Geolocation.android.20140824193305.rar - 1.1 MB
• 下载 Abhishek.android.20140824204443.rar - 2.6 MB
• 下载 Abhishek.android.20140824204443.zip - 2.7 MB
• 下载 Abhishek3.crosswalk.x86.20140824201436.zip - 19.6 MB
• 下载 Abhishek3.zip - 434.9 KB
• 下载 Geolocation.android.20140824193305.zip - 1.1 MB
• 下载 Geolocation.zip - 6.5 KB

引言

本文介绍如何使用 GPS、触摸和运动传感器构建应用程序。我使用 Intel XDK 作为 IDE，并使用 HTML 5 和 JavaScript 来构建应用程序。这里构建的应用程序使用了 Intel XDK 中提供的不同演示项目。

背景

这是一项尝试，旨在将 Three.js、Crosswalk 和 WebGL 触摸示例引入 Android 平台。此应用程序还使用 Geolocation API 来访问用户的位置。此外，它还涵盖了一个简单的 Accelerometer 示例。

将涵盖的内容

 使用跨平台 IDE 的方式，然后为 Android 定制应用程序

HTML 5

使用 HTML 5 探索针对运动传感器和其他设备创建应用程序的机会。

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

由于我已经介绍过 Intel XDK，我将简要回顾一下。它是一款来自 Intel 的跨平台 IDE，可以免费使用，并可用于构建不同平台的应用程序。Intel XDK 允许您模拟应用程序，然后进行最终构建。

本教程将使用的内容

• JavaScript 库
• Three.js：用于展示触摸示例
• 内置的 CrossWalk 应用程序，用于扩展 Android 应用程序
• Geolocation API：Intel XDK 中用于 Android 的内置 Accelerometer 演示，并进行扩展

地理定位

从 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 对象

保存项目并在模拟器中检查它，这有助于我们了解它的行为。

 

 

 

 

 

 

 

接下来，我们需要为项目创建构建。

 

 

 

 

 

 

 

在构建页面上，点击“立即构建应用程序”。

 

 

 

 

 

 

应用程序将被构建。

生成了构建日志。

 

 

 

 

 

 

技巧

使用 Intel XDK，我们发现可以使用空白模板轻松为 Android 平台构建地理位置应用程序。此外，我们还能够模拟应用程序，然后构建 APK（将在云端创建，然后我们下载）。

对于 HTML 5 开发者来说，无需做任何额外的事情就能创建一个 Android 应用程序，这是一个很容易实现的愿望。

 

触摸

对于触摸示例，我将使用 Intel XDK 以及来自演示应用程序的 CROSSWALK 构建来定制应用程序。这里的关键在于我将使用 Three.JS 库为项目创建良好的 GUI 体验。Android 的 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 设备）。

 

 

 

 

 

 

 

 

技巧

我们在这里学到的是，要让 WebGL 在 Android 上运行，我们需要为应用程序进行 crosswalk 构建。我可以使用演示应用程序作为基础，然后根据喜好对其进行扩展，以增加应用程序的功能。Intel XDK 允许我们快速、轻松地创建支持触摸的应用程序，同时保持 HTML 5 的基本功能。

运动传感器

对于这个项目，我将使用 Intel XDK 中提供的 Accelerometer 演示并进行一些修改。我将使用 Accelerometer 示例中的滚动球演示来构建应用程序。

我将更改目录中的图像图标，以营造 Bob（Codeproject 框架）的感觉。

在文件夹中添加图片后，我们在模拟器中可以看到以下结果。

 

 

 

 

 

 

 

 

 

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

 

技巧

我们轻松地更改了简单的图片，得到了一个外观完全不同的应用程序。因此，使用 HTML5 和 JavaScript API 创建基于加速度计或运动传感器的应用程序非常容易。

参考文献

• http://aerotwist.com/tutorials/getting-started-with-three-js/
• http://threejs.org/docs/
• http://xdk-software.intel.com/
• http://learningthreejs.com/
• http://code.tutsplus.com/tutorials/webgl-with-threejs-basics--net-35688
• http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
• http://www.johannes-raida.de/tutorials/three.js/tutorial02/tutorial02.htm
• http://en.wikipedia.org/wiki/Main_Page
• https://github.com/mrdoob/three.js/
• http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/

 

历史

第一次更新