简介
可重编程与专用设备技术的出现，模糊了软件与硬件协同工作的边界。这对界面设计以及其在现代重新定义消费者数字体验的方式产生了变革性影响。
在 ProtoPie，我们的使命之一是不仅为产品设计师，也为 Maker 社区中的创作者带来时间与成本节省。因此我们与 blokdots 携手开发了全新的协作功能。本指南将帮助你开始创建第一个软硬件结合的原型实现——无需编写一行代码！
ProtoPie 与 Blokdots：同一理念（但应用不同）
ProtoPie 是一款用于移动端、网页、仪表盘、数字屏幕等的高保真原型工具。另一方面，blokdots 是一款用于 Arduino 原型开发的无代码工具。两者在短时间内构建复杂、高质量硬件交互的无代码方式上非常相似。将 ProtoPie 与 blokdots 结合使用，你将获得两者优势：ProtoPie 负责软件交互，blokdots 负责硬件交互。
你完全可以自己轻松完成。不过首先，让我们快速了解这次协作所需的关键工具：
ProtoPie Studio 用于创建交互。
ProtoPie Player 用于在智能设备上运行原型。
blokdots 用于硬件原型开发。
Pie 与 blokdots 通过 socket.IO 通信。
这意味着，你可以像下方这样通过一个简单的 Arduino 搭建，轻松且动态地实现软硬件连接。
继续阅读，了解如何使用智能家居原型自行搭建这套方案。
现在开始施展魔法
你需要准备：
💡 提示：我们将使用 blokdots 推荐 的 Arduino Grove 开发板来完成连接。它使用起来非常简单，而且组件无需额外布线。Seeed Studio 的 Grove Arduino 开发板预接好了 10 个模块，其中大多数都受 blokdots 支持。
Arduino 到 Blokdots
打开 blokdots，并将 Arduino 开发板连接到你的笔记本/台式机。在 blokdots 的 Live View 中，你会看到开发板已就绪。
点击 Live View 顶部的 Connect A New Component 按钮打开向导，并在列表中选择你要连接的模块。本示例中我们将使用以下模块：
ProtoPie Player
D4: LED
D5: Buzzer
D6: Button
A0: Rotary Potentiometer
完成设置后，你就可以测试开发板上的一些组件——你应该会在 Line View 中看到数字相应变化。
这里到底发生了什么
我们知道你已经迫不及待想创建交互了，但在继续之前，先说明一件事。为了让 blokdots 能与 ProtoPie“对话”，你需要使用 ProtoPie 的 Send / Receive 功能。它可以让不同原型发送和接收消息，这意味着 ProtoPie 与 Arduino 能彼此通信。因此，你可以在 ProtoPie Studio 与 Arduino. 之间创建并实验你自己的消息收发。
你可以把 blokdots 理解为设置两者通信条件的环境。
💡 请记住：
在 ProtoPie Studio 和 blokdots 中设置如何
Send与Receive消息。不过，最终交互发生在 ProtoPie Player 与 Arduino 之间。
设置 Send 与 Receive
在 ProtoPie Studio 中，Receive Trigger 和 Send Response 将发起设备间通信。你只需把 Channel 设为 ProtoPie Studio，并把 Message 设置为你希望的内容。
💡 提示：消息尽量简短，例如“ToggleLED”比“Toggle the LED light on or off”更好。
如果你还想保留来自 blokdots 的值以供后续使用，勾选 Assign to Variable，并在 ProtoPie 中创建变量来存储该值。
进一步了解变量。
选择“ProtoPie Studio”作为通道。
创建你的第一个交互
用户通过添加和配置卡片在 blokdots 中进行硬件原型开发。blokdots 中有两类卡片：If This Then That 卡片和 Mapping 卡片。在本示例中，我们只需要使用 If This Then That 卡片。
blokdots 到 ProtoPie
你会看到如下条件卡片：
如果
任意输入硬件组件的动作那么
ProtoPie Player应该发送消息
试着参考下面的示例卡片。比如你想旋转电位器，就需要按以下细节从 blokdots 向 ProtoPie 发送消息：
Message: degree
Value: 1~1023
从 blokdots 向 ProtoPie 发送消息
要在 Protopie 中接收消息，请使用如下的 Receive 触发器。
在 ProtoPie 中接收消息。
Channel: ProtoPie Studio
Message: degree
创建一个名为“degree”的变量。将该值赋给这个 degree 变量。
ProtoPie 到 blokdots
使用 ProtoPie Studio 中的 Send 功能发送消息。
从 ProtoPie 发送消息
Channel: ProtoPie Studio
Message: power
可选：你也可以同时发送一个值
要接收消息，前往 blokdots 并添加另一张卡片。使用 If This Then That 卡片。其通用结构通常如下：
如果
ProtoPie Player正在接收消息那么 [任意输出硬件组件的动作]
你将接收到来自 ProtoPie 的消息及其对应数值。
💡 提示：如果你想使用 ProtoPie 的值让 LED 渐亮渐暗，可以使用 Map…onto 卡片，将输入值映射到 blokdots 中的硬件组件。
请看下面的示例卡片：如果 blokdots 收到来自 ProtoPie、名为“power”的消息，那么蜂鸣器组件会被触发鸣叫 300 毫秒。
blokdots 接收来自 ProtoPie 的消息
你也可以下载 blokdots 和 pie 文件，并进行你自己的调整。
运行你的项目
马上就完成了。通过扫描二维码或手动输入地址连接 ProtoPie Player。设置完成后，你的 Line View 应该与下图类似。ProtoPie 图标左下角的小连接指示灯随后应变为绿色。
扫描二维码以连接 ProtoPie Player
💡 提示：如果你不确定是否生效，请再次检查连接。你应当会在 ProtoPie Player 中看到成功消息。
ProtoPie Player 中的成功消息
要在 ProtoPie Player 中预览你的原型，请扫描 ProtoPie Studio 中的二维码。确保 Player 与 Studio 连接在同一网络下。如果不在同一网络，也可以使用 USB 连接它们。
进一步了解如何将 ProtoPie Player 连接到 ProtoPie Studio。
现在你已完成全部连接，来看看交互效果吧！在 blokdots 中，点击 Project View 左上角的 Run Project 按钮。
你做到了
恭喜！只需逐步添加拖放式语句，你就已成功让第一个软硬件集成原型运行起来。
在项目中使用 blokdots 与 ProtoPie，可以让你不受编码知识与编程限制影响，快速测试设计。ProtoPie 与 blokdots 都坚信，任何人都应该能够构建、测试并完善自己的想法，从而创造真实世界的产品与服务。或者帮助富有想象力的创客尽情尝试，激发创意灵感。
希望这份指南对你有帮助！我们很期待看到你不断实验并突破原型设计的边界。
了解更多 ProtoPie
如果你想了解 ProtoPie 的无限原型可能性，请在下方免费下载 ProtoPie 并开始体验。
