软硬件交互
ProtoPie和Blokdots：无代码Arduino原型制作指南
了解ProtoPie和Blokdots如何利用硬件和软件集成，通过无代码原型制作打造更美好的未来。
Khonok Lee, Head of Customer Learning
January 3, 2024
简介
可重新编程和专业设备技术的出现模糊了软件和硬件 如何共同工作的界线。这对界面设计产生了深远的影响，重新定义了现代时代消费者数字体验的方式。
在ProtoPie ，我们的使命之一是不仅帮助产品设计师节省时间和成本，还帮助Maker社区内的创意人士。这就是为什么我们与blokdots 携手开发全新协作功能的原因。本指南将帮助你入门，学习如何在原型中创建你的第一个软件和硬件实现，而无需编写一行代码！
ProtoPie和Blokdots：相同的理念（但用于不同的应用）
ProtoPie 是一款适用于移动、Web、仪表板、数字屏幕等的高保真原型制作工具。另一方面，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板连接到你的笔记本电脑/PC。在blokdots的实时视图中，你将看到你的板已准备就绪。
单击实时视图顶部的“连接新组件”按钮，打开向导，并在列表中选择要连接的组件。在此示例中，我们将使用以下模块：
- ProtoPie Player
- D4: LED
- D5: 蜂鸣器
- D6: 按钮
- A0: 旋转电位器
完成设置后，你现在可以在板上测试一些组件，你应该能够在线视图中相应地看到数字变化。
那么这里到底发生了什么呢？
我们知道你迫不及待地想要创建你的交互，但在继续之前，让我们先解释一件事。为了让blokdots能够与ProtoPie“交流”，你需要利用ProtoPie的
Send / Receive 功能。这使不同的原型能够发送和接收消息，这意味着ProtoPie和Arduino将能够相互通信。因此，你将能够在ProtoPie Studio和Arduino 之间创建并实验发送/接收自己的消息。将blokdots视为你设置两者之间如何通信条件的环境。
💡 记住：
选择“ProtoPie Studio”作为通道
在ProtoPie Studio和blokdots中设置如何发送和接收消息。 然而，最终的交互发生在ProtoPie Player和Arduino之间。
设置发送和接收
在ProtoPie Studio中，接收触发和发送反应将启动设备之间的通信。你需要做的就是将通道设置为ProtoPie Studio，并将消息设置为你希望的任何内容。
💡 小贴士：最好保持消息简短，例如，“ToggleLED”比“切换LED灯开关”更好。
如果你还希望保留来自blokdots的值以供将来使用，请勾选“赋值给变量”并在ProtoPie中创建一个变量来存储此值。
了解有关变量 的更多信息。
创建你的第一个交互
用户通过在blokdots中添加和配置卡来原型制作硬件。在blokdots中有两种类型的卡**：If This Then That卡和Mapping卡。在我们的示例中，我们只需要使用If This Then That**卡。
从blokdots到ProtoPie
你将看到一个条件卡，类似于以下内容：
- 如果**
the action of any input hardware component** - 那么
ProtoPie Player应该sendmessage
尝试按照下面的示例卡进行操作。例如，如果你想要旋转电位器，你需要从blokdots发送以下详细信息的消息到ProtoPie：
- 消息：degree
- 值：1~1023
从blokdots到ProtoPie发送信息
为了在ProtoPie中接受信息，可以如下使用接受触发动作。
在ProtoPie中接收消息
- 通道：ProtoPie Studio
- 消息：degree
- 创建一个名为“degree”的变量。将值赋值给这个degree变量。
从ProtoPie到blokdots
使用ProtoPie Studio中的“发送”功能发送你的消息。
从ProtoPie发送消息
- 通道：ProtoPie Studio
- 消息：power
- 可选：你可以同时发送一个值
要接收消息，请转到blokdots并添加另一张卡。使用一个If This Then That卡。一般的结构通常如下：
- 如果ProtoPie Player正在接收消息
- 那么[任何输出硬件组件的操作]
你ProtoPie接收一条消息以及该值。
💡 小贴士：如果你想使用来自ProtoPie的值来使LED淡入淡出，你可以使用Map...onto卡将传入的值映射到blokdots中的硬件组件。
请参考以下卡片作为示例。如果blokdots从ProtoPie接收到一个名为“power”的消息，那么蜂鸣器组件将触发鸣叫300毫秒。
你还可以下载blokdots和pie文件以进行自己的调整。
运行你的项目
你差不多就要完成了。通过扫描QR码或手动输入地址连接ProtoPie Player ()。一旦设置好，你的线视图应该看起来像下面的图片。ProtoPie图标左下角的小连接指示器应该变成绿色。
扫描QR码连接ProtoPie Player
💡 小贴士：如果您不确定是否成功，请双重检查连接。您应该在ProtoPie Player中看到一个成功的消息。
在ProtoPie Player中的成功消息
要在ProtoPie Player中预览您的原型，请在ProtoPie Studio中扫描QR码。确保Player和Studio通过相同的网络连接。如果它们没有连接，你还可以使用USB将它们连接。
了解有关将ProtoPie Player连接到ProtoPie Studio的更多信息。
现在你已经连接了所有内容，让我们看看你的交互是什么样子的！在blokdots中，按下项目视图左上角的“运行项目”按钮。
你成功了
恭喜你！通过逐步添加、拖放句子，你成功地让你的第一个硬件和软件集成原型运行起来了。
在你的项目中使用blokdots和ProtoPie，可以让你快速测试设计，而不受编码知识和编程约束的限制。ProtoPie和blokdots都热衷于认为任何人都应该能够建立、测试和完善他们的想法，以创造现实中的产品和服务。或者，帮助富有想象力的创作者尽情发挥创意。
希望你找到这个指南有帮助！我们很期待看到你实验并推动原型设计的界限。
了解更多关于ProtoPie
如果你想了解更多关于ProtoPie无尽原型可能性的信息，点击下方免费下载ProtoPie并开始使用。