Pebble智能手表自2012年非常成功的Kickstarter活动以来就一直存在，并且是智能手表用户中的热门选择。 这是由于其出色的电池寿命，低廉的价格，多种型号可供选择以及与iOS和Android的兼容性。

从第一天开始，Pebble就拥有了开发人员SDK，鼓励开发人员为Pebble平台构建有趣且创新的应用程序。 SDK始终保持最新状态，随着时间的推移增加了新功能。

Pebble应用程序传统上是用C编码的，但是最近，Pebble采用了JavaScript，并向更多开发人员开放了其平台上应用程序开发的世界。 在有关Pebble开发的简介中，我将通过构建应用程序并将其提交给Pebble应用程序商店，向您介绍使用SDK和Pebble.js库进行Pebble开发入门的一些基础知识。

本教程不需要拥有Pebble或任何以前的C语言知识。

1.设置项目

当前，您可以在两种环境中构建Pebble应用程序。 CloudPebble使在浏览器中开发Pebble应用成为可能。 如果您使用的是Windows或功能较弱的计算机，则非常好。

另一个选项以及本教程将要遵循的选项是将开发工作流程本地化。 这使您可以脱机工作并使用自己选择的编辑器。 首先让我们安装Pebble工具和SDK。

当前，Windows上没有对Pebble工具和SDK的官方支持，因此以下部分将引导您完成在OS X和Linux上安装Pebble工具和SDK的步骤。 Pebble建议您将CloudPebble用于Windows上的开发，但是您也可以使用Linux虚拟机。

在OS X上安装Pebble工具最简单的方法是通过Homebrew 。 如果您尚未安装Homebrew，则可以在Homebrew网站上获得安装说明。 安装Homebrew后，可以使用以下命令安装Pebble工具：

brew install pebble/pebble-sdk/pebble-sdk

要在Linux上安装Pebble工具和SDK，还需要采取一些其他步骤。 Pebble有可用的详细指南 。 一旦安装了Pebble工具，便可以从命令行使用pebble命令。 运行pebble --version显示版本信息。

$ ~ pebble --versionPebble Tool v4.2.1

pebble命令行界面包括几个方便的命令。 您可以通过运行pebble --help或pebble -h列出这些命令。 其中一个命令使用一些样板代码设置了一个新项目。 创建一个新目录，并在新目录的根目录中运行以下命令：

pebble new-project hello-pebble

如果这是您首次创建Pebble应用程序，则会提示您接受使用条款和Pebble开发人员许可。 接受这些内容后，将下载并安装最新的Pebble SDK（在撰写本文时为3.11.1）。

安装Pebble SDK后，将在当前目录中设置一个基本的Pebble项目。 要构建，安装和运行您的应用，您需要执行以下操作。 首先，确保您位于Pebble项目的根目录。 在这种情况下，我们位于hello-pebble目录的根目录中。

接下来，运行pebble build命令。 编译代码后，您应该看到消息'build' finished successfully ，并且build目录中有许多新文件。 我们现在唯一需要担心的文件是hello-pebble.pbw 。 这是将安装在手表上的应用程序。

要运行该应用程序，我们使用Pebble SDK随附的Pebble模拟器。 Pebble使用开源QEMU仿真器。 当前，有三代Pebble可供开发。 Pebble和Pebble Steel是Pebble的原始一代。 Pebble Time支持64种颜色，并使用稍新的3.x版本的操作系统。

卵石时间回合与卵石时间几乎相同，只是圆形和更大的显示除外。 Pebble使用平台名称来区分三代Pebble智能手表。

• Aplite是用于Pebble和Pebble Steel的平台名称。
• 玄武岩是卵石时间的平台名称。
• 而Chalk是Pebble Time Round的平台名称。

我们可以在pebble install命令之后使用--emulator标志启动这些仿真器中的任何一个，从而传递我们要定位的平台。 例如，如果要在Pebble Time的平台上运行我们的应用程序，则可以在Pebble项目的根目录中运行以下命令：

pebble install --emulator basalt

此命令将启动仿真器，启动所选平台，并安装存储在构建目录中的.pbw文件。 这是您应该在模拟器中看到的内容：

Pebble手表没有触摸屏，并带有四个按钮： 上 ， 下 ， 选择和返回 。 这些分别用键盘上的上 ， 下 ， 右和左键模拟。 通过按这些键，您可以浏览创建的应用程序。

如果我们打开该项目的源代码，则会看到它是用C编写的。为了对该项目使用Pebble.js，我们将使用一个模板 ，该模板可使我们更快地入门。 在撰写本文时，Pebble.js仍处于测试阶段，因此将来某些事情可能会更改。

离开项目目录，创建一个新目录，然后克隆GitHub存储库，如下所示。

mkdir hello-pebblejscd hello-pebblejsgit clone https://github.com/pebble/pebblejs .

克隆存储库后，请在文本编辑器中将其打开，然后环顾四周。 该应用程序的源代码可以在src目录中找到。 在该目录中，您还有其他三个目录， js ， simply ， util和main.c文件。

js目录是我们放置应用程序代码的位置。 简单目录是JavaScript函数访问本机代码的地方，而util目录包含我们不需要接触的更多本机代码。 该应用程序的入口点将存在于js / app.js中 。 如果我们构建并运行此应用程序，则应在模拟器中看到以下结果：

打开js / app.js ，环顾四周，然后删除该文件。 我们将从头开始。

2.让我们构建一个应用程序

我们需要学习的第一件事是如何在屏幕上显示文本。 Pebble.js具有用于实例化Elements的用户界面框架。 使用此框架，您可以创建元素，例如文本，矩形和图像。 将以下行添加到app.js以需要框架。

var UI = require('ui');

我们将在本教程中使用的第一个Element是Window 。 Windows是Pebble应用程序的主要构建块。 共有三种类型的窗口。

• Card可以用于以预格式化的方式显示文本，例如顶部的标题，其下方的字幕以及某些文本的正文区域。
• Menu用于显示选项列表。
• Window是最灵活的，并允许您向其中添加各种元素。

为了向窗口中添加文本，我们还需要Vector2，这是一个用于绘制2D矢量的模块，如果您对three.js或任何其他矢量绘制库进行过任何操作，您将熟悉该模块。

我们的首要目标是创建一个窗口，在该窗口中创建文本并将其添加到该窗口，然后将其显示给用户。 以下代码段是在屏幕上显示文本的最低要求。

var UI = require("ui");
var Vector2 = require("vector2");
// This is our main window
var main = new UI.Window();// This is our text content
var textfield = new UI.Text({size: new Vector2(144, 60),text: 'Hello PebbleJS'
});//add the text to the window
main.add(textfield);//show the window
main.show();

生成项目并安装应用程序以查看结果。 与其将两个步骤分开，不如将命令链接在一起并运行以下命令：

pebble build && pebble install --emulator basalt

如果要同时在所有三个平台上进行测试，则可以为每个仿真器添加安装命令：

pebble build &&
pebble install --emulator basalt &&
pebble install --emulator aplite &&
pebble install --emulator chalk

您会注意到， 尖晶石和玄武岩看起来几乎相同，而粉笔看起来不太好。 这是因为圆形屏幕和屏幕的尺寸。 我们将在稍后讨论平台检测。 现在，我们继续一些基本功能。

在上面的代码片段中，我们使用Text()方法创建一个Text元素。 Text()的实例化将一个对象作为其参数来配置Text元素。 size键定义绘制Text元素的矩形（由Vector2实例定义）的大小。 text键的值包含我们要显示的字符串。 然后，我们在窗口上调用show()进行show()之前，将Text元素添加到Window中 。

到目前为止，您的应用程序使用的是Window和Text的默认设置。 但是，我们可以选择自定义它们。 我们可以控制更改位置，颜色和字体大小。 有一些系统字体可用 ，您甚至可以选择加载可在应用程序中使用的自定义字体。

我们的应用程序将倒计时到某个日期。 当应用启动时，我们希望它采用今天的日期，并计算到将来某个特定日期为止的天数。 比方说，举例来说，我想要一个应用程序，该应用程序告诉我直到《星球大战》第八集将要出现多少天。

我知道我想在应用启动时创建我的主窗口 ，计算到2017年12月15日为止的剩余天数，然后将该数字添加到我中间的屏幕中。 没什么好看的。

让我们从显示一个静态数字开始，该数字与我们编写的当前“ Hello PebbleJS”代码没有太大区别。 相反，我们使用一个变量作为text键的值，并添加一个新键textAlign ，以使文本居中。

var UI = require('ui');
var Vector2 = require('vector2');
var daysRemaining = "400";var main = new UI.Window();var text = new UI.Text({size: new Vector2(144, 168),text:daysRemaining,textAlign:'center'
});//add the text to the window
main.add(text);//show the window
main.show();

运行该应用程序将为您显示以下输出。

如前所述，有许多可用的系统字体。 在本教程中，我们将使用一种系统字体Bitham 42 Bold ，并将其在水平和垂直方向上都更靠近屏幕中心。 font选项采用文档中引用的要使用的字体的字符串。 该位置由另一个Vector2实例确定，该实例定义了Text的水平和垂直位置。

更改文本的配置，如下所示：

var text = new UI.Text({size: new Vector2(144, 168),text:daysRemaining,textAlign:'center',position: new Vector2(0, 50),font:'BITHAM_42_BOLD'
});

您现在应该看到如下内容：

让我们用正确的天数替换硬编码的值。 当我们从GitHub克隆项目时，我们获得了访问设备API和各种其他实用程序以使用JavaScript创建Pebble应用程序所需的所有必需文件。 这些实用程序之一是moment.js库，您可以在供应商目录中找到该库。 这将使计算更加容易。

在应用程序中需要moment.js ，并通过以下实现将daysRemaining变量设置为一个函数：

var moment = require('vendor/moment');var daysRemaining = function(){var eventdate = moment("2017-12-15"); // This is the date we're counting down to - December 15var todaysdate = moment(); // A moment instance of todaysdatereturn eventdate.diff(todaysdate, 'days'); // calculate the difference in days.
}

接下来， daysRemaining的引用更改为daysRemaining的函数调用：

var text = new UI.Text({size: new Vector2(144, 168),text:daysRemaining(), // This is now a function calltextAlign:'center',position: new Vector2(0, 50),font:'BITHAM_42_BOLD'
});

如果您编译并运行应用程序，则应该看到发布《星球大战》第八集之前的正确天数。 我们可以将其保留在此处，并拥有一个仅显示要跟踪事件的天数的应用程序，但是为什么不趁机向该应用程序添加一些功能。

首先，让我们更改“ 窗口”的背景色和文本的颜色，以使背景为白色，文本为深色。

var main = new UI.Window({backgroundColor:'white'
});var text = new UI.Text({size: new Vector2(144, 168),text:daysRemaining(),textAlign:'center',position: new Vector2(0, 50),font:'BITHAM_42_BOLD',color:'black'
});

让我们添加另一个Text元素以指示数字所代表的含义。 我们创建一个新的Text元素，并为其传递大小，位置，字体等选项。

var eventDetail = new UI.Text({size: new Vector2(144, 168),text:'Episode VIII',textAlign:'center',position: new Vector2(0, 15),font:'GOTHIC_24',color:'black'
});

接下来，在添加text对象之后，将Text元素添加到主窗口。

main.add(text)
main.add(eventDetail);

最后，让我们添加第三个Text元素以指示倒数以天为单位。

var daysText = new UI.Text({size: new Vector2(144, 168),text:'days',textAlign:'center',position: new Vector2(0, 100),font:'GOTHIC_24',color:'black'
});main.add(daysText);

为了进行导航，Pebble使用硬件按钮而不是大多数其他智能手表上的触摸屏。 我们可以添加功能，使用户可以使用这些输入来更深入地研究我们的应用程序。 举例来说，例如，我们还希望显示《星球大战》系列其他即将上映的电影的发行日期。 《侠盗一号》已于今年发行， 第IX集的发行日期已经确定。

与按钮的交互触发了我们可以订阅的事件。 检测到事件后，我们可以决定需要采取什么措施。 如果用户单击，我们可以建立一个新窗口来保存Rogue One的发行日期，并显示直到该电影发​​行为止的天数。

让我们订阅向下按钮并构建一个新Window 。 on()方法采用三个参数，即动作，按钮和处理程序。 如前所述，第二个参数的可能值为up ， down ， select或back 。 该操作通常是click ，但您也可以选择使用longClick 。

main.on('click', 'down', function(){var ro = new UI.Window();console.log('Down Clicked');ro.show();
});

运行该应用程序，当您单击鼠标时，您会发现黑屏。 您可能会问自己，如何访问控制台以查看Pebble日志。

当应用程序运行时，我们可以将另一个控制台附加到该控制台，并通过运行pebble logs --emulator basalt获取日志。 如果要使用其他仿真器之一，请替换仿真器名称。 现在，您可以看到单击向下按钮时，控制台将日志记录为Down Clicked 。

pebble logs --emulator basalt
[06:33:11] javascript> Down Clicked
[06:33:11] javascript> (+) [window 2] : [window 1],[window 2]

像以前一样，让我们​​计算发布之前的天数，并将此信息显示给用户。 为了利用日期计算功能，我将传递日期作为参数。 我们不想重复代码。

var daysRemaining = function(dateString){var eventdate = moment(dateString);var todaysdate = moment();return eventdate.diff(todaysdate, 'days');
}

main.on('click', 'down', function(){var ro = new UI.Window();console.log('Down Clicked');var ro = new UI.Window();var roCount = new UI.Text({size: new Vector2(144, 168),text:daysRemaining("2016-12-16"),textAlign:'center',position: new Vector2(0, 50),font:'BITHAM_42_BOLD',color:'white'});var eventDetail = new UI.Text({size: new Vector2(144, 168),text:'Rogue One',textAlign:'center',position: new Vector2(0, 15),font:'GOTHIC_24',color:'white'});var roDays = new UI.Text({size: new Vector2(144, 168),text:'days',textAlign:'center',position: new Vector2(0, 100),font:'GOTHIC_24',color:'white'});ro.add(roCount);ro.add(roDays);ro.add(eventDetail);ro.show();ro.show();
});

如果愿意，也可以为第IX集添加一个屏幕。 我会把它留给您尝试挑战。

我们应该为Pebble Time Round用户解决显示问题。 为此，我们需要检测它们所在的平台并相应地更新用户界面。

在您的应用程序中，您可以访问全局对象Pebble 。 该对象具有一些我们可以使用的功能，其中之一是getActiveWatchInfo() ，该函数返回带有平台运行时信息的对象。

我们可以使用platform密钥获取平台名称。 如果平台等于chalk ，我们需要对用户界面进行一些调整。

在app.js的顶部，我们获取动作监视信息，并检查当前平台名称是否等于chalk 。

var info = Pebble.getActiveWatchInfo(); // Returns watch info
var platform = info.platform; // Returns a string of the platform name
var isChalk = platform === 'chalk';

如果您在Chalk平台上运行应用程序，则应看到以下内容：

无论我们在大小和位置上调整用户界面元素的位置，我们都需要进行少量更改以适应Chalk平台的圆形屏幕。 首先，我们创建一个保存屏幕宽度的变量。

var sWidth = isChalk ? 180 : 144;

卵石时间回合显示180px x 180px。 这意味着我们需要修改Vector对象的X坐标。 我们创建三个变量来帮助我们。

var countPosition = isChalk ? 65 : 50;
var daysPosition = isChalk ? 120 : 100;
var titlePosition = isChalk ? 25 : 15;

最终的代码如下所示：

var UI = require("ui");
var Vector2 = require("vector2");
var moment = require("moment");var info = Pebble.getActiveWatchInfo();
var platform = info.platform;
var isChalk = platform === "chalk";
var sWidth = isChalk ? 180 : 144;
var countPosition = isChalk ? 65 : 50;
var daysPosition = isChalk ? 120 : 100;
var titlePosition = isChalk ? 25 : 15;var daysRemaining = function(dateString) {var eventdate = moment(dateString); // This is the date we"re counting down to - 24th Aprilvar todaysdate = moment(); // A moment instance of todaysdatevar difference = eventdate.diff(todaysdate, "days");return difference
};var main = new UI.Window({backgroundColor: "white"
});var text = new UI.Text({size: new Vector2(sWidth, 168),text: daysRemaining("2017-12-15"),textAlign: "center",position: new Vector2(0, countPosition),font: "BITHAM_42_BOLD",color: "black"
});//Event Detail Textvar eventDetail = new UI.Text({size: new Vector2(sWidth, 168),text: "Episode VIII",textAlign: "center",position: new Vector2(0, titlePosition),font: "GOTHIC_24",color: "black"
})//Event Detail Textvar daysText = new UI.Text({size: new Vector2(sWidth, 168),text: "days",textAlign: "center",position: new Vector2(0, daysPosition),font: "GOTHIC_24",color: "black"
})//add the text to the window
main.add(text);
main.add(eventDetail);
main.add(daysText);//show the window
main.show();//ROGUE 1 windowmain.on("click", "down", function() {var ro = new UI.Window();var roCount = new UI.Text({size: new Vector2(sWidth, 168),text: daysRemaining("2016-12-16"),textAlign: "center",position: new Vector2(0, countPosition),font: "BITHAM_42_BOLD",color: "white"});var eventDetail = new UI.Text({size: new Vector2(sWidth, 168),text: "Rogue One",textAlign: "center",position: new Vector2(0, titlePosition),font: "GOTHIC_24",color: "white"})var roDays = new UI.Text({size: new Vector2(sWidth, 168),text: "days",textAlign: "center",position: new Vector2(0, daysPosition),font: "GOTHIC_24",color: "white"});ro.add(roCount);ro.add(roDays);ro.add(eventDetail);ro.show();ro.on("click", "down", function() {var nine = new UI.Window({backgroundColor: "white"});var nineCount = new UI.Text({size: new Vector2(sWidth, 168),text: daysRemaining("2019-05-24"),textAlign: "center",position: new Vector2(0, countPosition),font: "BITHAM_42_BOLD",color: "black"});var eventDetail = new UI.Text({size: new Vector2(sWidth, 168),text: "Episode IX",textAlign: "center",position: new Vector2(0, titlePosition),font: "GOTHIC_24",color: "black"})var nineDays = new UI.Text({size: new Vector2(sWidth, 168),text: "days",textAlign: "center",position: new Vector2(0, daysPosition),font: "GOTHIC_24",color: "black"});nine.add(nineCount);nine.add(nineDays);nine.add(eventDetail);nine.show();});});

我相信您同意仍有足够的改进空间。 我们在不同的地方复制代码，这不是一个好习惯。 就是说，我希望您现在对如何使用JavaScript和Pebble SDK为Pebble创建应用程序有基本的了解。

在本教程的最后一部分中，我想向您展示如何将我们的应用程序上载到Pebble应用程序商店。

3.上传到Pebble App Store

在上传应用程序之前，我们需要注意一件事。 当我们从模板启动此应用程序时， appinfo.json （我们的应用程序清单）中有一些细节需要更改。 您可以在项目的根目录中找到此文件。 打开appinfo.json并更改companyname ， shortname和longname值。

我们需要的最后一件事是UUID（通用唯一标识符）。 清单已经包含一个，但是当您尝试将.pbw文件上传到应用商店时，您会收到一条错误消息，因为此UUID已被使用。

最简单的获取方法是从本教程开始时创建的原始hello-pebble应用程序中获取该应用程序，因为我们不会将该应用程序上载到应用程序商店。 如果删除了该项目，请创建一个新项目并从该项目中复制UUID。 完成后，创建一个新版本。

现在，我们有了一个可以上传到Pebble应用商店的应用程序。 转到Pebble开发人员门户并注册一个帐户，或者如果已经有一个帐户，则登录。 登录后，点击“ 发布Pebble应用程序 ”链接。

在下一页上，选择底部的“ 创建Watchapp ”。

下一页的表格看起来有些令人生畏，但这些字段很容易解释。 要完成提交，您需要至少上传两个资产，这两个资产都是您应用程序的图标。

完成此步骤后，您将进入右侧的一些应用程序数据的应用商店预览。 要求您为应用添加发布日期。 为此，请单击添加版本并上载.pbw文件，您可以在项目的build文件夹中找到该文件。

完成此操作后，您将返回到概述屏幕并验证.pbw文件。 通常只需要几秒钟。 验证后，该应用即可发布。 如果您在此处遇到任何问题而验证失败，则会显示一条有用的消息，说明验证失败的原因。

在继续并单击“ 发布”按钮之前，您可能需要为自己添加一些屏幕截图，以便人们可以在安装后看到期望的内容。 这些图像显示在应用商店预览中。

Pebble CLI工具提供了一种非常简单的截图方法。 运行中的pebble screenshot FILENAME截取当前正在运行的模拟器的屏幕快照，并将其保存在当前目录中。

在上传了截图并填写了各个平台的描述之后，您就可以发布您的第一个Pebble应用了。

结论

在本文中，您学习了如何安装和设置Pebble SDK，如何使用一些基本的Pebble CLI命令以及如何使用JavaScript构建基本应用程序。 毋庸置疑，在本教程中我们只是从头开始。 还有很多要学习的知识，不仅是有关使用JavaScript编写Pebble应用程序的知识，而且还有关于Pebble开发的一般知识以及可供您使用的工具的知识。

翻译自: https://code.tutsplus.com/tutorials/how-to-build-a-pebble-application--cms-26174