构建混合 Apple Watch 应用程序的 7 个步骤

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

我们已经进入了第一代可穿戴设备的时代,虽然它的成功还没有定论,但 Apple 正在通过 Apple Watch 帮助引领潮流。虽然可穿戴运动才刚刚开始(而且我们还远未拥有大量有用的应用程序),但你们中的某个人可能会有下一个伟大的可穿戴应用程序创意。

如果你今天想学习如何构建你自己的 Apple Watch 应用程序——使用 Telerik 平台和你熟悉和喜爱的网络技能——请坐好,因为我们将这样做。

有关什么是优秀的 Apple Watch 应用程序(以及哪些东西不能很好地工作)的良好讨论,请查看我的同事 TJ VanToll 的文章 You Might Not Need an Apple Watch App

准备好?让我们开始吧!

第 1 步:获取(免费)Telerik 平台帐户

如果您还没有, 请注册 Telerik 平台 的 30 天免费试用。

为什么选择 Telerik 平台?简而言之,它有助于简化移动开发。通过提供一组可与您喜爱的 IDE 配合使用的强大的以移动为中心的工具和服务,Telerik 平台使您能够仅使用 HTML、CSS 和 JavaScript 创建混合 本机跨平台移动应用程序。

注册后,准备好后返回这里!

第 2 步:我们可以用 Apple Watch 做什么?

在我们开始构建应用程序之前,我们需要了解我们今天可以使用 Apple Watch 做什么和不能做什么。利用 Telerik 自己的适用 于 Apple Watch 的 Cordova 插件 ,我们可以处理浏览、通知和各种 UI 小部件。

扫视

一目了然是您应用程序中一些基本信息的快速摘要。这些只读片段是通过在设备上向上滑动来调用的。您可能希望向用户显示他们的当前位置、天气预报或他们需要与之交互的其他数据的简短预览。点击一目了然打开相应的手表应用程序。

通知

我们都知道推送通知是什么,Apple Watch 也有同样的概念。如果您的 iPhone 已解锁,您将在 iPhone 上收到推送通知。否则,您会在 Apple Watch 上收到这些通知。在 Apple Watch 上向下轻扫以查看未读通知。

应用程序页面和 UI 小部件

在撰写本文时,Apple Watch SDK (WatchKit) 不允许我们动态创建 UI 元素。 Telerik 插件通过使用各种 UI 小部件预填充一系列应用程序页面来解决这个问题——您可以根据需要轻松显示和隐藏它们!

以下是我们可以自定义和使用的所有 UI 小部件的可视化摘要:

转变

滑块

地图

上下文菜单

图像和标签

桌子

用户输入按钮

操作按钮

导航按钮

在尝试构建混合 Apple Watch 应用程序时,最简单的方法是将该应用程序纯粹视为现有 iOS 应用程序的扩展。您在手表上看到的一切都将来自使用 HTML、CSS 和 JavaScript 构建的标准混合 Cordova 应用程序。

现在我们知道我们可以做什么,让我们构建一个应用程序吧! 今天我们将克隆一个现有的 Apple Watch 演示应用程序,向我们展示如何:

  1. 在手表上创造各种外观。
  2. 允许用户点击 glance(将它们发送到应用程序)。
  3. 显示应用程序中允许用户与手表交互的 UI 小部件的一些示例。

第 3 步:克隆并配置我们的 Apple Watch 应用程序

我将使用 Telerik AppBuilder (Telerik 平台的一部分)来创建这个应用程序。 AppBuilder 利用 Cordova(又名 PhoneGap)让您可以使用您的 Web 技能创建移动应用程序,这些应用程序可以本地安装在您的 iOS、Android 和 Windows Phone 设备上。 这意味着您无需编写任何本机代码即可编写 Apple Watch 应用程序!

我将使用 Visual Studio 2015(以及 Visual Studio 的 AppBuilder 扩展 )进行开发,但如果您使用的是 AppBuilder In-Browser Client 本机 Windows Client 命令行界面, 则可以遵循这些相同的基本说明与 崇高的文字

步骤 3a:克隆示例应用程序

在 Visual Studio 中,打开 团队资源管理器 面板,单击 管理连接 按钮,然后单击 克隆 链接。完成后,系统会提示您使用这样的最终窗口:

在我们的其他 AppBuilder 客户端中克隆 GitHub 存储库甚至更容易——创建新项目时只需选择“克隆存储库”并输入下面指定的 URL。

注意:您 不必 克隆此示例应用程序,您可以随时创建一个新的 AppBuilder 项目并自行 查阅插件文档

接下来,在黄色阴影输入字段中输入以下 URL: https://github.com/Telerik-Verified-Plugins/AppleWatch-DemoApp 并单击 Clone

一旦 repo 被克隆,只需转到 文件 -> 打开 -> 项目/解决方案 并选择克隆目录中的 .abproject 文件。这将打开该目录作为 AppBuilder 项目:

步骤 3b:启用 Apple Watch 插件并配置 iOS 属性

在克隆示例应用程序时,大多数与配置相关的步骤都会为我们处理。但是,最好仔细检查它们并验证一切是否正确。

首先,我们需要启用 Apple Watch 插件。使用 APPBUILDER 菜单,单击 Manage Packages

AppBuilder Package Manager 也可以通过右键单击所有 AppBuilder 客户端中的项目名称来找到。

导航到 插件市场选项 卡并单击以安装 Apple Watch 插件(如果尚未安装):

接下来,让我们确保我们的 iOS 属性是有序的。双击解决方案中的 属性 并导航到 iOS 选项卡。确保选择 iOS 8.2 或更高版本的 部署目标版本

返回 General 选项卡,确保您还针对 Apache Cordova 3.5.0 或更高版本。您还会注意到,在 “资产” 选项卡中,您甚至可以从一个 1024×1024 源 png 为您的 Apple Watch 应用程序创建图标!

这就是配置 AppBuilder!如果您在使用 Visual Studio 时遇到困难或遇到问题,一个简单的快捷方式是 单击此处并将此示例应用程序加载到 AppBuilder Web 客户端中

第 4 步:设置 iOS 配置文件

为 iOS 配置配置文件和证书对于移动开发人员来说可能是一种地狱。话虽这么说,我是来牵着你的手度过这个艰难的过程的!

Apple Watch 捆绑包由三个组件组成:在您的 iOS 设备上运行的主机应用程序、负责 iOS 设备和 Apple Watch 之间通信的手表扩展程序,以及在 Apple Watch 上运行的手表应用程序。

您必须为每个组件配置应用程序 ID 和配置文件。 配置文件必须属于同一类型(开发与分发)并且必须共享相同的证书。

步骤 4a:注册您的 Apple Watch 设备 ID

要在 Apple Watch 上安装应用程序,您需要在 iOS 会员中心 注册其 UDID(是的,这需要您拥有一个每年 99 美元的 Apple 开发者帐户)。

另一个“陷阱”是,为了发现您的手表的 UDID,您必须将它连接到运行 Xcode 的 Mac。确保您的 Watch 已与您的手机配对,将其连接到 Mac,打开 Xcode,浏览至 Window,然后浏览至 Devices。点击您的手机,配对的手表就会出现,您可以像这样复制完整的 UDID:

获得 UDID 后,只需在 iOS 会员中心将其添加为新设备即可。

步骤 4b:创建新的 App ID

仍然在 iOS 会员中心,继续创建一个新的 App ID。 App ID 需要进行以下设置:

  • 明确的应用程序 ID(捆绑包 ID)。以“com.mycompany.mywatchapp”的形式输入一些独特的东西。
  • App Services 下,确保选中以启用 App Groups 。我们将在一分钟内回到应用程序组。

重要的! 回到您的应用程序的 AppBuilder 属性中,确保输入此 bundle id 作为 应用程序标识符

步骤 4c:创建一个新的应用程序组

返回 iOS 会员中心,转到 App Groups 并创建一个新的。应用组的 ID 必须 使用您刚刚在创建新应用 ID 时使用的 bundle id,例如:“group.com.mycompany.mywatchapp”。

现在,返回到您刚刚在上一步中创建的 App ID。编辑它,然后编辑 App Groups,并选择刚刚创建的 App Group。

步骤 4d:创建更多应用程序 ID 和供应配置文件

我知道,这很荒谬,但您必须再创建两个 App ID:

  • 创建一个应用程序 ID,例如“com.mycompany.mywatchapp.watchkitextension”,并将其链接到您刚刚创建的同一个应用程序组。
  • 创建另一个 App ID,例如“com.mycompany.mywatchapp.watchkitapp”。这不需要应用程序组,但添加它也无妨。

接下来,配置文件!

对于您创建的 每个 App ID(总共三个),您需要创建一个新的 开发 Provisioning Profile。 对于每个配置文件,请务必在要求设备时至少包括您的 Apple Watch 和配对的 iPhone!

完成后,导出/下载所有配置文件。

步骤 4e:在 AppBuilder 中导入配置文件

在 Visual Studio 中,访问 APPBUILDER 菜单并选择 Options 。单击 移动 选项卡并展开 iOS 选项。选择 移动配置 并导入所有三个配置文件。完成后,它应该看起来像这样:

如果您在此步骤中的任何时候遇到困难,请务必 查阅我们关于为 Apple Watch 捆绑包配置代码签名的文档

痛苦?是的。但是我们已经完成了凌乱的配置,现在可以将我们的应用程序部署到 Apple Watch 上了!

第 5 步:部署和测试 Apple Watch 应用程序

使用当前版本的 AppBuilder,您必须将 Watch 应用程序部署到物理 Apple Watch 才能对其进行测试。将来如果您没有手表,我们将允许您 部署到 iOS 模拟器

继续将您的 iOS 设备连接到您的 PC,以确保 Visual Studio 可以将应用程序直接部署到它。从 APPBUILDER 菜单中,选择 Build and Deploy 。这将在云端构建您的应用程序,并神奇地将其部署到您的 iPhone 和 Apple Watch!

还有……成功!?!?

如果一切正常,你应该能够在你的 iPhone 上打开应用程序并与你的 Apple Watch 互动(就像在我一直有用的 iPhone 3GS 上录制的这段录音一样!):

第 6 步:有效吗?从别人犯过的一些错误中吸取教训……

如果您遇到问题,错误很可能与您必须创建的所有应用程序 ID、应用程序组和/或配置文件有关。将应用部署到 Apple Watch 时最常见的错误是:

  • 无法安装 [app],错误:应用程序验证失败。 这可能意味着很多事情,但很可能意味着您忘记将 iPhone 和 Apple Watch 设备分配给所有三个配置文件。您可能还忘记了将应用程序组分配给应用程序 ID。或者您可能只是缺少 AppBuilder 中的一个配置文件。再次运行上面的第 4 步,只是为了确定。
  • 如果您使用的是 Visual Studio,AppBuilder 会在构建应用程序时尝试为您选择正确的配置文件。如果您有冲突的配置文件(即像“com.telerik.*”这样的通配符配置文件与您的“com.telerik.applewatch”的 Apple Watch 配置文件匹配),请务必删除冲突的配置文件。
  • 无效的捆绑包——没有 Apple Watch 二进制文件。 通常这只是意味着您必须重新启动 Apple Watch,然后尝试从 iPhone 上的 Apple Watch 应用程序中安装该应用程序。

第 7 步:获利!

当您准备好将您的应用程序发布到 iOS 应用程序商店时,您需要创建一组新的 分发 配置文件并将它们导入 AppBuilder。 我们的文档中提供了 有关直接发布到应用商店的更多信息。

现在您已经掌握了创建 Apple Watch 应用程序的基本技能! 可穿戴设备的淘金热才刚刚开始,所以成为第一个创建下一个出色的可穿戴应用程序的人吧。在评论中说出你的结果,祝你好运!