65.9K
CodeProject 正在变化。 阅读更多。
Home

Intel XDK 文档 - 入门教程

2016年1月14日

CPOL

26分钟阅读

viewsIcon

24599

本教程涵盖了一系列 Intel XDK 核心功能,旨在帮助您学习应用程序开发工作流程。

Intel® 开发人员专区提供用于跨平台应用开发的工具和操作指南、平台和技术信息、代码示例以及同行专业知识,以帮助开发人员创新并取得成功。加入我们的 Android物联网英特尔® 实感™ 技术Windows 社区,下载工具、访问开发工具包、与志同道合的开发人员分享想法,并参与编程马拉松、竞赛、路演和本地活动。

关于本教程

Intel® XDK 是一个全面的跨平台开发环境,用于经济高效地创建、测试、调试、构建和部署基于 HTML5 的 Web 和混合移动应用。

本 15 到 20 分钟的教程将引导您完成典型的端到端工作流程,最终您可以将其应用于自己的应用开发过程,从而帮助您开始使用 Intel XDK。

完成本教程后,您应该能够

  • 创建您的新应用。

  • 使用内置的 Brackets* 代码编辑器编辑您的应用文件。

  • 在各种虚拟设备上预览应用功能。

  • 使用内置的 Google Chrome* 开发者工具 (CDT) 调试器调试您的应用,并执行设备调试。

  • 评估您的应用在真实物理移动设备上的外观和性能。

  • 配置构建选项,准备您的应用提交到各种应用商店和/或托管在网络上,并将其构建为打包的捆绑包。

本教程涵盖了一系列 Intel XDK 核心功能,旨在帮助您学习应用程序开发工作流程。它不包括 Web 服务、性能分析、物联网 (IoT) 嵌入式应用或 HTML5 游戏开发。

准备教程并访问 Intel XDK

要求

  • 在 Linux*、Microsoft Windows* 或 Apple OS X* 开发机器上安装 Intel XDK

  • 在您想要运行本教程结果的测试移动设备(例如智能手机或平板电脑)上安装 App Preview

在您的开发机器上安装 Intel XDK

如果您的开发机器尚未安装 Intel XDK,请从 http://xdk.intel.com 下载。

在您的测试移动设备上安装 App Preview

App Preview 允许您在真实的物理移动设备上运行 Intel XDK 项目文件,而无需执行完整构建。

如果您的测试移动设备尚未安装 App Preview 工具,请从 Apple* App StoreGoogle* Play StoreWindows Phone* Store 下载此免费的 Intel 应用。

访问 Intel XDK

  1. 在您的开发机器上启动 Intel XDK。

  2. 如有必要

    • 登录。

    • 注册一个帐户。您可以使用您的电子邮件地址作为您的用户名。

从演示开始新应用

一个典型的 Intel XDK 项目对应一个应用程序,并为您的项目文件和相关设置提供一个容器。主要有三种项目类型:

  • HTML5 + Cordova - 此项目代码库使用 HTML5 和 JavaScript* 代码,并支持使用 Apache Cordova* API(通过 Cordova 插件)。它可以作为打包的混合移动应用程序构建和部署到 Android*、Android Crosswalk*、Apple iOS* 和 Windows Phone* 8.1 或 Windows 8 设备。

  • 标准 HTML5 - 此项目代码库使用 HTML5 和 JavaScript* 代码,可能使用 W3C* 标准 API,但不支持使用 Cordova API(又名 Cordova 插件)。它可以作为打包的混合移动应用程序部署到许多平台(Android、Android Crosswalk、Apple iOS 和 Windows 8),或者作为托管 Web 应用程序部署到某些基于 Web 或操作系统的平台。

  • 物联网嵌入式应用(仅限 Intel® XDK IoT Edition)- 此项目代码库由嵌入式 JavaScript* 组成,旨在 Node.js 运行时上执行。此项目类型仅由 Intel XDK IoT Edition 识别。它需要一个物联网创客板,并且不像用于手机和平板电脑的移动 Web 应用那样构建。

让我们使用一个可用的 HTML5+Cordova 演示应用作为新应用的基础,来快速开始本教程。

If

  • 这是您在 Intel XDK 中的第一个项目 - Intel XDK 在项目选项卡中显示开始新项目面板,并在项目设置完成后提供快速导览的机会。

  • 您已在 Intel XDK 中有活动项目 - 单击项目选项卡下拉箭头以显示您的 INTEL® XDK 项目仪表板。然后单击开始新项目按钮以显示开始新项目面板。

了解“项目”选项卡上的“开始新项目”面板

1

模板 - 用于基于不同类型的应用用户界面构建应用。您还可以选择一个简单的空白模板来启动一个基本为空的项目。

2

示例和演示 - 用于打开一个完整的、可工作的项目,以快速启动您自己的应用,了解 HTML5 应用的工作原理,或了解 Intel XDK 的工作原理。(这正是我们将在本教程中做的。)

3

导入您的 HTML5 代码库 - 用于通过导入现有的 HTML5 应用(例如使用 Adobe PhoneGap* 或 Apache Cordova API、HTML5 API 或 Intel XDK 设备 API 创建的应用)来创建 Intel XDK 项目。

选择 Hello Cordova 演示应用

  1. 在“项目”选项卡上的“开始新项目”面板中,展开示例和演示选项以显示通用库的标准 HTML5 演示。

  2. 在库区域上方,单击HTML5 + Cordova以显示 HTML5 + Cordova 演示的通用库。

  3. 点击 Hello Cordova 演示图片。

  4. 点击继续按钮开始设置您的新项目。

创建 XDKTutorial 项目

  1. 将您的项目命名为 XDKTutorial,将其保存在 C:\Users\[userid]\XDKTutorial 中,然后单击创建按钮以创建您的项目。

  2. 恭喜!对话框中,单击开始吧按钮以进行快速导览,该导览提供了 Intel XDK UI 的基本解释。

  3. 快速导览完成后,Intel XDK 会显示开发选项卡,这是您执行大部分应用开发的地方。

编辑你的应用

了解开发选项卡

让我们为您的 XDKTutorial 应用添加一些功能。如有必要,单击开发选项卡以显示类似于以下的窗口。

1

使用开发选项卡编辑文件并向您的项目添加文件。您可以使用内置的代码编辑器或您喜欢的代码编辑器。

2

使用文件树查看与活动项目相关联的文件,包括图像文件,并选择要编辑的文件。

3

使用菜单选项(或等效的快捷键)执行常见的代码编辑器功能。

4

使用代码编辑器视图编辑文件内容。上下文菜单也可用。

5

使用 Intel XDK 工具栏按钮(所有选项卡上都有)访问显示选项卡和通用帮助信息的帮助信息、启动快速导览、显示和更改 Intel XDK 设置、查看有关 Intel XDK 的最新 Twitter 推文*,以及显示和更改帐户设置。

6

使用实时开发任务面板在浏览器、真实移动设备或虚拟设备上预览您的代码。请注意,XDKTutorial 应用仍在 Intel XDK 模拟器浮动窗口中运行,并设置为在您保存对项目文件的更改后重新启动。通过实时编辑布局,代码更改会在您使用内置代码编辑器进行编辑后立即显示,或者在您使用外部编辑器保存项目文件后立即显示。

7

使用 WEB 服务面板探索内置的第三方 Web 服务 API(云服务),以及集成其他第三方 Web 服务 API。本教程不涉及 Web 服务。有关更多信息,请参阅开发概述

更多实用信息

  • 内置代码编辑器基于 Brackets* 编辑器,因此您可以轻松添加 Brackets* 扩展(文件 > 扩展管理器)。

  • 如果您使用 Intel XDK 外部的代码编辑器,则返回模拟器时必须单击工具栏上的 重新加载应用图标以更新所有文件并重新启动您的应用。

  • 如果您使用 App Designer 创建应用程序(Hello Cordova 演示文件不是使用 App Designer 创建的),Intel XDK 会在开发选项卡中提供代码设计视图,以便您可以在内置代码编辑器和拖放 HTML5 布局编辑器之间来回切换

  • App Designer GUI 布局编辑器仅在您编辑使用 App Designer 创建的 HTML5 文件时可用。

  • App Designer 是一个往返编辑器。例如,您可以开始在 App Designer 中创建您的应用程序,切换到代码编辑器查看与您的布局工作相对应的代码,在代码编辑器中修改代码,然后切换回 App Designer 查看这些修改——只要您不更改 App Designer 的 class="uib*" 标签(uib 代表用户界面构建器)。

在虚拟设备上预览您的应用

  1. 在“开发”选项卡中的实时开发任务面板中,单击“实时布局编辑”以显示实时开发任务
  2. 点击运行我的应用以显示预览选项
  3. 点击 模拟器启动按钮 在模拟器中运行图标以显示类似于以下内容的 Intel XDK 模拟器浮动窗口

了解模拟器浮动窗口

1

使用 Intel XDK 模拟器浮动窗口,在实际移动设备上测试您的应用之前,快速识别并修复缺陷。您可以使用这个基于 Apache Ripple* 模拟器的设备模拟器,在各种虚拟设备上模拟应用功能。您还可以从这个浮动窗口启动内置的 CDT 调试器来调试应用功能。(我们将在本教程后面进行此操作。)

2

使用工具栏按钮重新加载您的应用程序源文件并重新启动您的应用程序,在另一个浮动窗口中启动内置调试器,显示和更改模拟器设置,以及停止在模拟器中执行应用程序。

3

使用 自动缩放图标将设备视觉表示缩放到完全适合窗口的最大尺寸,并使用滑块手动调整设备视觉表示的大小。

4

使用手风琴式列中的调色板配置各种虚拟设备,帮助您快速确定您的应用程序在不同方向以及各种屏幕尺寸和宽高比下的工作效果。您可以打开和关闭每个调色板,隐藏和显示列,移动列,以及在列中移动调色板。

5

使用设备视觉表示视图并测试您的应用。

玩转你的应用、虚拟设备和面板

试试

  • 运行您的 XDKTutorial 应用 - 尝试点击蜂鸣和振动按钮,看看会发生什么。

  • 选择不同的虚拟设备 - 单击设备面板下拉箭头并从列出的设备中选择。

  • 改变虚拟设备方向 - 点击设备面板中的方向图标。

  • 打开和关闭每个面板 - 点击面板标题栏。

  • 隐藏和显示每个面板列 - 点击 控件。

  • 移动面板 - 单击并拖动面板标题栏以在面板列中向上或向下移动它,或移动到另一列。

更多实用信息

  • Intel XDK 模拟器浮动窗口也可以通过点击模拟选项卡标签右上角的 取消停靠图标来访问。

  • Intel XDK 模拟器浮动窗口显示时,模拟选项卡标签右上角的 取消停靠图标会变为 停靠图标,并且模拟选项卡会被禁用。要重新启用模拟选项卡,请关闭浮动窗口或单击模拟选项卡标签右上角的 停靠图标。

  • 模拟器实际上是一个在 Node WebKit 中运行的 Web 应用。您的应用在内部 HTML 框架中运行。

  • 在模拟器中渲染您的 HTML5 代码的运行时引擎基于 Chromium 开源浏览器。这个最新的 Web 运行时引擎可能比真实移动设备上的 Web 运行时更正确地实现 HTML5 功能,特别是如果该移动设备具有旧操作系统版本。

  • 模拟器不支持使用 *.mp3*.mp4 音频文件。

在真实设备上测试和调试您的应用程序行为之前,使用模拟器快速调试和测试您的应用程序逻辑。虽然模拟选项卡大致模拟了您的应用程序在虚拟设备上运行的情况,但它并非没有局限性。有关更多详细信息,请参阅设备模拟器局限性

请参阅这篇更全面的教程,了解模拟选项卡的模拟功能,例如运动、地理定位和指南针。

调试您的应用

在“模拟”选项卡中使用内置 CDT 调试器

  1. 单击 Intel XDK 模拟器工具栏上的 启动调试器图标 启动调试器图标,在浮动窗口中打开内置版本的 CDT 调试器。

  2. 点击来源按钮打开一个文件

  3. 按 Ctrl+O 并从列表中选择一个文件。

  4. 它应该显示一个类似于以下的窗口:

  5. 修正应用代码

    • 注意:如果您认为有必要修改代码,可以通过调试器窗口进行。但是,在调试器窗口中修改代码只会影响模拟器中未来的应用程序行为。它不会修改实际的源代码。因此,请在开发选项卡中修改您的源代码。

    • 关闭开发者工具浮动窗口。
    • 如有必要,点击开发选项卡。
    • 在文件树中,打开需要修改的文件。
    • 选择文件 > 保存
  6. 模拟选项卡上重新测试您的应用,看看您的更改是否已反映。如果没有,请单击工具栏上的 重新加载应用图标,然后重试。
  7. 更多实用信息
    • 您实际调试的是一个使用 Chromium 桌面引擎增强 Cordova 和 Intel XDK API 模拟真实移动设备。此模拟旨在提供您的应用程序在各种设备和外形尺寸上如何渲染的概览。您的应用程序的某些视觉方面在真实设备上可能会有所不同,特别是如果真实设备具有旧操作系统版本。
    • 使用内置的 CDT 调试器,您可以设置断点、单步执行、显示 JavaScript* 代码中的变量、进行完整的 DOM 调试,并查看 CSS 对 DOM 的影响。您还可以访问 CDT JavaScript* 控制台,在该控制台中,您可以查看您的应用程序 console.log 消息,并通过手动检查属性和执行方法与您的应用程序 JavaScript 上下文进行交互。

有关如何在模拟选项卡上进行调试的更多信息,请单击此处

使用调试选项卡

请参阅本教程,了解如何使用 Intel XDK 调试选项卡在真实移动设备上调试您的应用程序。

在真实的移动设备上运行您的应用

基于 Cordova-iOS 3.8 的 iOS 版 App Preview 中,Cordova 蜂鸣通知无法正常工作。截至本说明,App Preview 的当前 iOS 版本为 2.5.0,它使用 Cordova CLI 5.1.1。此功能在构建时使用 CLI 4.1.2 或更高版本时可在已构建应用中正常工作。

您可能需要增加 Android 设备的通知音量才能听到蜂鸣声。在某些 Android 设备上,通知蜂鸣声可能会被静音。通知蜂鸣声是系统通知,这意味着您的 Android 设备和 Android 系统设置决定了蜂鸣声的响度以及蜂鸣声的音效。

既然您确信您的 XDKTutorial 应用在虚拟设备上运行正常,是时候在真实移动设备上运行它了。

  1. 点击测试选项卡。

  2. 点击我已安装 APP PREVIEW按钮 - 因为您已经安装了,对吧? ;-)

  3. 首次为项目单击测试选项卡时,您的开发机器会显示一条请与我们的测试服务器同步消息。单击关闭按钮,以便我们先探索测试选项卡。

了解测试选项卡

1

使用测试选项卡通过网络评估您的应用程序在真实物理移动设备上的外观和性能,而无需执行完整构建。

2

使用移动按钮通过云中的测试服务器进行测试。优点:所需设置最少;避免潜在的防火墙和网络拓扑问题;您可以随时随地从云中拉取文件。

使用WIFI按钮通过本地 Wi-Fi 网络进行测试,您的开发机器和测试移动设备都连接到该网络。优点:设置后通常更快;不消耗移动数据;直接从您的开发机器拉取文件。

3

使用说明作为通过移动或 Wi-Fi 进行测试的参考,无论是否使用 App Preview 二维码阅读器。

4

使用推送文件按钮将开发机器上最新的项目文件推送到云中的测试服务器。

5

使用 App Preview 二维码阅读器(可从相机图标访问)扫描二维码,在测试移动设备上启动您的应用。

提示:或者,您可以从 App Preview 工具上的服务器应用列表(移动模式)或本地应用列表(WIFI模式)启动您的应用。

6

您还可以使用测试选项卡和 weinre*(即Web 检查器远程)调试控制台,在您的应用程序在真实物理移动设备上运行时对其进行远程调试。本教程不涵盖设备上或远程调试。有关更多信息,请参阅测试选项卡调试选项卡

在真实物理移动设备上更新、启动和测试您的应用

步骤

在你的开发机器上

在你的测试移动设备上

1.

单击推送文件按钮,将您的 XDKTutorial 应用推送到云中的测试服务器。上传完成后,正在上传捆绑包消息消失。

 

2.

 

确保测试移动设备已连接到互联网。

3.

 

启动 App Preview 工具。如有必要,使用与 Intel XDK 相同的用户名和密码登录。

4.

 

使用 App Preview 工具中的相机图标(右上角)扫描测试选项卡上的二维码,并显示您的 XDKTutorial 应用的测试服务器 URL。

5.

 

在启动确认对话框中选择确定以启动您的 XDKTutorial 应用。

6.

 

尽情地发出哔哔声!

更多实用信息

  • App Preview 会跟踪您上传到测试服务器的所有应用。

  • 您在真实的物理移动设备上实际测试的是您的应用加载到一个特定平台容器应用中,该容器应用代表了您构建应用时包含的本机包装器。

  • Android* 移动设备:如果您无法访问 Google* Play 商店,请单击 信息图标,将 App Preview 下载链接通过电子邮件发送到您的移动设备,或将 App Preview 下载链接复制到剪贴板。

配置您的应用构建选项

既然您确信 XDKTutorial 应用在真实移动设备上运行正常,是时候构建您的应用了。但我们先检查您的应用构建选项。单击项目选项卡以显示类似于以下的窗口。

了解项目选项卡

1

使用项目选项卡管理项目和项目信息,包括打包您的应用以提交到应用商店的选项。

2

您的 INTEL® XDK 项目仪表板列出了您的开发机器上所有已知的 Intel XDK 项目。

Intel XDK 一次只能操作一个项目。当前活动的项目始终在您的 INTEL® XDK 项目仪表板中标记,并且是所有其他选项卡操作的项目。

3

您的所有项目文件都存储在您的开发机器本地。

源目录是您的源文件的根位置,包括 index.html 文件,它是您项目的主要入口点。源目录项目路径可能引用或不引用相同的目录位置,但根源目录必须在项目路径的同一级或其下方。

4

注意:在构建您的应用以使用 Cordova 4.x/5.x API 之前,请在项目选项卡中选择插件、构建设置选项和图形资产。

使用CORDOVA 混合移动应用设置在您将应用上传到构建服务器进行打包时生成特定平台的 intelxdk.config.<platform>.xml 配置文件。这些配置文件存储在您的项目目录中。

插件提供了一种扩展应用 JavaScript* API 的方式,从而使您的应用与移动设备软件和硬件之间实现更紧密的集成。使用插件管理指定标准 Cordova CLI 插件、特色和自定义 Cordova 插件、Intel XDK 插件、额外的第三方插件以及除所选插件所需的权限之外的任何平台特定权限。使用构建设置指定通常在为应用商店构建应用时所需的详细信息。使用启动图标和启动画面选择方向、图标和启动画面。有关更多信息,请参阅项目概述

探索您的应用构建选项

花点时间查看您的应用构建选项。

当您准备将自己的应用提交到各种应用商店时,您需要提供一些值,例如应用 ID应用名称应用描述。默认值对于本教程来说已经足够。

更多实用信息

  • 每个项目在根目录中都有一个 <project-name>.xdk 文件。此文件不包含任何应用程序代码,并且您的应用程序在真实移动设备上执行时不需要它。

  • 从项目列表中删除项目不会从您的开发机器中删除项目文件或目录。您稍后可以重新打开您的项目,并使用项目选项卡上您的 INTEL® XDK 项目仪表板上的打开 INTEL® XDK 项目按钮将其重新添加到您的项目列表中。

  • 模拟器会记录在项目选项卡中选择的核心 Cordova 插件,并在您的应用在模拟器中运行时,向您的应用提供与这些核心 Cordova 插件对应的 API。模拟器会向您的应用提供 Intel XDK 插件提供的完整 API 集,无论在项目选项卡中选择了什么。

  • 目前,除了 Android 移动设备外,只有构建选项卡使用项目选项卡中指定的第三方插件。

构建你的应用

是时候构建您的应用了!点击构建选项卡以显示类似于以下的窗口。

了解构建选项卡

注意:如果您的应用程序是标准 HTML5 项目类型而不是 HTML5 + Cordova 项目类型,则构建选项卡还将包含一个构建为 Web 应用程序区域,其构建磁贴已启用。

1

使用构建选项卡来

  • 打包您的应用并将其部署为本地安装的混合移动应用,从而实现与原生移动应用相同的分发和变现渠道,以及相同的应用下载、安装和启动体验。

  • 创建一个 HTML5 捆绑包,您可以提交到某些应用商店(例如 Google Play* 商店、Apple App Store*、Windows 商店或 Google Chrome* Web 商店)或放置(托管)在 Web 服务器上。

2

使用以前的构建面板查看(并刷新)以前构建的列表。您还可以隐藏/显示整个以前的构建面板。

3

使用CORDOVA 混合移动应用平台创建适合提交到应用商店的原生应用包。软件包支持 Cordova CLI 5.x 核心 API 和选定插件,以及 Intel XDK API。有关更多信息,请参阅项目概述

Crosswalk 是一个基于各种开源项目的 HTML5 应用程序运行时。Intel XDK 分发的 Crosswalk 运行时还支持 W3C* 组织正在考虑标准化的许多尖端 API。有关更多信息,请参阅Crosswalk 概述

4

使用构建为 Web 应用创建适合用作 Web 托管应用或提交到 Chrome Web Store* 的 Web 应用包。有关更多信息,请参阅构建选项卡概述

将您的应用打包为 Android* 商店的移动应用

  1. 点击CORDOVA 混合移动应用平台区域中的Android 构建按钮,连接到构建服务器,将您的 XDKTutorial 应用上传到云端,并显示一个类似于以下的窗口。

  2. 请注意,所有打包配置都已完成(在项目选项卡中);没有什么能阻止您立即构建您的 XDKTutorial 应用。点击立即构建应用按钮,将 XDKTutorial 应用构建为 Android 移动应用,并最终显示一个类似于以下的窗口。

    如果构建失败,请单击链接查看更详细的构建日志。

    Intel XDK 不提供您应用程序的实际商店提交服务;但是,它会解释各种可能的下一步(我们显然不会对这个 XDKTutorial 应用程序执行)。

  3. 点击关闭构建页面按钮。

更多实用信息

  • 构建在云端执行,因此您无需在开发系统上为每个目标平台安装和配置 SDK、Cordova CLI 或原生开发环境。

  • 您必须获得适当的开发者凭证才能将应用程序提交到大多数应用商店。

  • 除了 Android 的 Crosswalk 包,所有包都使用目标移动设备固件中内置的 WebView(嵌入式浏览器)来执行(渲染)您的应用程序。例如,Android 包使用 Android 移动设备中内置的 Android 浏览器 WebView,iOS 包使用 iOS 移动设备中内置的 Apple Safari* 浏览器 WebView。

Intel XDK:教程总结

本教程引导您了解如何开始使用 Intel XDK。

步骤

教程回顾

教程要点

准备教程并访问 Intel XDK

启动 Intel XDK。如有必要,注册一个帐户。

如果出现提示,请登录您的 Intel XDK 帐户。

从演示开始新应用

打开“项目”选项卡中的开始新项目面板。选择示例和演示选项。选择HTML5 + Cordova项目类型。选择 Hello Cordova 演示应用作为您的 XDKTutorial 应用的基础。设置 XDKTutorial 项目。

Intel XDK 项目对应一个应用程序,并为您的项目文件和相关设置提供一个容器。主要有三种项目类型:标准 HTML5、HTML5 + Cordova 和物联网嵌入式应用(仅限 Intel® XDK IoT Edition)。您可以通过从模板(包括空白模板)开始、从示例或演示代码开始,或导入 HTML 项目来创建应用程序。

编辑你的应用

转到开发选项卡。使用内置代码编辑器编辑 XDKTutorial 应用代码。

您可以使用基于 Brackets* 编辑器的内置代码编辑器或您喜欢的代码编辑器(即使在 Intel XDK 打开时)编辑项目文件。如果您在使用 实时开发任务/运行我的应用 进行开发时预览代码,代码更改会在您保存编辑后显示。如果您使用 实时开发任务/实时编辑布局 进行预览,代码更改会在您使用内置代码编辑器进行编辑后立即显示,或者在您使用外部编辑器保存项目文件后立即显示。如果您使用 App Designer 创建应用程序,您还可以在拖放 UI 设计视图中编辑项目 HTML5 文件,并随时在代码设计视图之间切换。

在虚拟设备上预览你的应用

转到模拟选项卡。玩转您的 XDKTutorial 应用、虚拟设备和调色板。您可以模拟应用程序的多种功能,包括运动、地理定位和指南针。

基于 Apache Ripple* 模拟器的模拟器可在 Intel XDK 的多个位置访问。使用它在各种虚拟设备上模拟应用程序功能。模拟器旨在提供您的应用程序在各种移动设备上渲染的总体概念;在构建之前,请务必在真实的移动设备上运行您的应用程序。

调试你的应用

使用调试选项卡,除了可以访问 CDT 调试器之外,您还可以在设备上运行和调试 XDKTutorial 应用。

您的开发机器上的处理器可能比真实移动设备上的处理器快,因此性能问题通常在模拟器中不可见。使用模拟器或调试选项卡工具栏上的调试图标访问内置的 CDT 调试器。在调试器窗口中修改代码会影响模拟器中未来的应用程序行为;但是,它不会修改实际的源代码。在开发选项卡中编辑实际的源代码。

在真实的移动设备上运行您的应用

在您的开发机器上:打开测试选项卡;将您的 XDKTutorial 应用推送到云中的测试服务器。在测试移动设备上:启动 App Preview 工具;扫描测试选项卡上的二维码;测试 XDKTutorial 应用。

使用开发机器上的 Intel XDK 和测试移动设备上的 App Preview 工具,通过网络评估您的应用程序在真实物理移动设备上的外观和性能,而无需执行完整构建。您可以通过云中的测试服务器或通过连接到您的开发机器和测试移动设备的本地 Wi-Fi 网络来测试您的应用程序。

配置您的应用构建选项

探索项目选项卡。

您的所有项目文件都存储在您的开发机器本地。每个项目的根目录中都有一个 <project-name>.xdk 文件。您项目的主要入口点必须是根源目录中的 index.html 文件。所有其他文件必须位于根目录下的文件夹集中。插件提供了一种扩展应用 JavaScript* API 的方式,从而使您的应用与移动设备软件和硬件之间实现更紧密的集成。使用插件和权限指定标准 Cordova CLI 5.x 插件、特色和自定义 Cordova 插件、Intel XDK 插件、额外的第三方插件以及除所选插件所需的权限之外的平台特定权限。使用构建设置指定应用商店通常需要的详细信息。使用启动图标和启动画面选择方向、图标和启动画面。

构建你的应用

打开构建选项卡。将您的 XDKTutorial 应用打包为适用于 Android 应用商店(如 Google Play 商店)的 Cordova 混合移动应用。

使用 Intel XDK 打包您的应用程序,以便提交到各种应用商店和/或托管在网络上。构建在云端执行,因此您无需为每个目标平台安装和配置 SDK 或原生开发系统。使用项目选项卡选择您的 Cordova 构建包选项,并在构建选项卡中选择 Google Chrome 打包应用程序的构建包选项。Intel XDK 不提供实际的商店提交服务。

下一步:将这些知识应用于使用 Intel XDK 编写代码、调试、测试和构建您自己的 HTML5 应用程序。

关键术语

以下术语贯穿整个 Intel XDK 教程

  • 移动应用:在真实移动设备上执行的应用。它与用户和板载传感器交互。

  • 板载传感器:真实移动设备上可用的内置传感器,例如加速度计、地理位置和类似功能。

  • 插件:支持 JavaScript* API 的 JavaScript* API 和原生代码模块。本质上,当您的应用程序调用插件的 JavaScript* API 时,它会被重定向到设备上实现该 API 的底层插件原生代码。

  • 真实设备:实际的物理移动设备,例如智能手机或平板电脑。

  • 虚拟设备:模拟真实移动设备的软件环境。它便于测试应用程序在实际物理移动设备上的外观和功能。

  • Web 应用:在 Web 服务器上执行的应用。要使用此类型的应用,移动设备需要使用 Web 浏览器和互联网访问。

更多资源

有关 Intel XDK 和 HTML5 开发的更多信息,请访问 Intel® 开发人员专区

© . All rights reserved.