Protopie 连接

6

阅读时间

ProtoPie Connect 入门 1/7:在 Studio 中使用 Send 和 Receive 让多个 Pie 相互通信

了解如何在您的 Pies 之间使用“发送”和“接收”,打造真正的多屏体验。

杰夫·克拉克, 用户体验设计师与 ProtoPie 培训师

简介

ProtoPie 使用一种名为 Send and Receive 的消息系统,你可以用它在原型中传递数据。你可能已经熟悉使用 Send and Receive 在场景与组件之间来回传递命令和信息。

但你知道吗,你还可以在原型之间使用 Send and Receive?这是一个独特的杀手级功能,让构建多屏体验变得轻而易举!

Studio 已内置支持

在一定程度上,这项能力已经直接内置在 ProtoPie Studio 中。仅使用 Studio,就可以让两个独立的 Pie 相互通信,但有以下限制:

  • Studio 必须在你的桌面端运行

  • 你不能让超过两个 Pie 相互交互。

  • 它只能在你的电脑本地运行——不能在云端运行。

  • 仅限 Pie 与 Pie 之间通信。仅使用 Studio 无法与物理设备集成。

有了 ProtoPie Connect 会更强大!

当你把 ProtoPie Connect 加入其中,以上所有限制都会消失。想用三个或更多 Pie?没问题! 想同时使用笔记本、手机和平板?没问题! 想把所有 Pie 放在同一块屏幕上?没问题! 想与物理硬件交互?没问题! 如果你是企业版订阅用户,这一切还可以在云端运行!

听起来很棒,对吧?确实如此! 继续阅读,了解这一切是如何运作的。

你将学到什么

在本教程中,我们将涵盖以下内容:

完成时间:≤30 分钟

Send and Receive:ProtoPie 沟通的基石

我们先来复习一下 Send and Receive你可能已经熟悉它的工作方式,但请继续看下去。彻底理解 Send and Receive 对于构建多屏体验,以及后续使用 Connect 至关重要。

Send and Receive 的概念非常简单。你使用 Send Response 发送任意消息。你发送的消息还可以选择附带一些信息。然后你在其他地方使用 Receive Trigger 监听该消息并作出相应响应。

例如,Send and Receive 的一个常见用途是将组件重置到初始状态。由于组件是自包含的,如果你仅在主场景中对组件副本使用 Reset response,它们并不会被完全重置——只有主场景中组件的外部尺寸、位置、不透明度等会被重置,但组件内部的图层不会。为了解决这个问题,你可以将组件设置为监听某个命令,当接收到该命令时,执行一系列 responses,使组件恢复到初始状态。


The main scene sends a message, and the component receives it and acts accordingly

通道很重要

当你发送消息时,会通过特定通道发送。配置为监听该消息的 Receive trigger 必须 使用相同通道。否则,消息将无法被“听到”。


The channels must match

下表显示了任意给定 Receive 通道对应匹配的 Send 通道。


Matching Send and Receive channels

还有一个通道将在本教程剩余部分重点介绍——它是多个 Pie 彼此通信的主要机制。它叫作 “ProtoPie Studio”。


ProtoPie Studio Channel

当你通过“ProtoPie Studio”通道发送消息时,另一个 Pie 可以“听到”并作出响应。使用 ProtoPie Connect 时,这些消息还可以被转发到物理设备以及其他 Pie,从而实现完整沉浸式的软硬件体验。

让我们看看实际效果!

两个 Pie 的故事

我们的第一个示例将展示:不使用 ProtoPie Connect,也可以让两个 Pie 相互通信。我们将模拟一个智能家居体验:例如,一个基于平板的控制面板带有户型图,另一个是模拟控制灯光亮度的移动应用。


Separate tablet and mobile Pie files

起始 Pie

你将使用两个 Pie。请将它们都下载并在 ProtoPie Studio 中打开:

[平板应用 Pie] [移动应用 Pie]

教程

请跟随下方视频操作。

现在,加入 Connect!

目前我们只能在 Studio 运行时体验这个项目。不过,如果我们在 Connect 中加载这两个 Pie,就可以用多种不同方式预览体验,并且还能向体验中加入更多 Pie。

在本次演示中,我们将继续使用上面操作过的 Pie,并在演示中途加入第三个 Pie。你可以在这里下载:

[桌面应用 Pie]

请跟随下方视频操作。

视频

这只是冰山一角!继续学习,看看如何在 ProtoPie Connect 入门 7 篇中的第 2 篇:你与 IFTTT 的首次集成 中使用 ProtoPie Connect 将你的 Pie 与各种事物集成!

完成版 Pie

以下是本教程中使用的所有 Pie 文件(完成状态)。