小窍门
用ProtoPie API集成功能接入真实数据设计电影资讯站
了解如何用 ProtoPie 的 API 集成功能与 TMDB 电影数据库相结合，来制作一个具有真实电影和电视节目数据的电影数据资讯动态网站。
Khonok Lee, Head of Customer Learning
April 11, 2024
在这篇教程里，我们将会把现实生活中的数据无缝融入到设计项目中。我们会一步步地指导大家通过访问电影数据 API 来创建一个电影资讯网站，并在这一过程中探索 ProtoPie 里强悍如斯的功能——譬如 API 插件以及自托管媒体等。在这次探索性的设计中，The Movie Database （TMDB，电影数据库网站）正是我们的灵感之源。
准备好了吗？下面，我们来共同体验电影般的奇幻时刻！
内容概览
- 什么是 The Movie Database API
- 获取 TMDB API 密钥
- 设置 API 插件
- 制作实时搜索建议功能
- 使用 API 提取电影基础信息
- 为什么要在设计中使用真实数据
- 快来加入视频流与电视 UI 设计大师班
什么是 The Movie Database API？
The Movie Database （TMDB）是一个久负盛名的电影资讯网站，为了便于外部访问及引用其公开数据，该网站提供了 API 接入功能，称为 TMDB (The Movie Database) API 。这一 API 以其覆盖范围之广、可达数据之全，使得其在一众竞品中脱颖而出。尤为值得一提的是，TMDB 的 API 是免费的，这对意欲将真实数据融入原型的设计师和开发者们而言无疑是上上之选。TMDB 提供了极为丰富的电影关联信息——从演职员表到探班花絮，从影评吐槽到评级打分，TMDB 有着尽显诚意的用户界面以及汗牛充栋的关联文档，这些因素都使得 TMDB 成为了数据集成探索上的理想平台。
可能有读者还会留意到另一个电影资讯网站 IMDB ，该网站也提供相应的 API 功能（IMDB API ）、提供有价值的数据，并在业界中已经久负盛名。但需要留意，对该 API 的访问需要通过 AWS（亚马逊云） 的 Data Exchange（数据交换）来进行，这就需要先开通 AWS 帐户并处于一定的付费模式下才能进行操作。在这次的教程中我们主要是要进行探索，因而我们选择了具备丰富文档且可以免费访问的 TMDB API 。
获取 TMDB API 密钥
TMDB提供了两种各有利弊的鉴权方式：
- 通过查询参数鉴权：在所访问的 API 网址中附加一个名为
api_key的参数，其值为你的 API 密钥，如：https://api.themoviedb.org/3/movie/11?api_key=你的API密钥
- 放置在请求 Header 中的访问令牌：将你的访问令牌放在请求 Header 中的 Authorization 字段中，以便与请求一并发出。如以下例子所示，这是 API 插件中所需要填写的 Header 配置内容：
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
对于这两种方法的取舍与选择，应取决于具体的使用需求。例如在使用 ProtoPie 来调用这一 API 的过程中，如果使用场景上主要是为了与相互信任的同事进行协作，那么就可以将密钥保存为原型中的一个变量，然后采用网址中带上密钥的方式来访问，如此在 API 调用时，密钥就会被自动传递到网址上，从而简化共享过程。而与此相反，当不希望暴露自己的访问凭据给外部干系人时，就可以采用第二种方式来获得更高的安全性。对于所有的第三方独立责任人而言，为了保障安全，关键的一步是应该让他们自行获取自身的访问密钥，并将密钥自行应用到他们自有的 API 插件内相关配置项中。
设置 API 插件
先将以下原型文件下载保存到电脑上，下载完成后，运行 ProtoPie Connect并将这一原型文件拖拽到 Connect 的界面中。
下一步：配置 API。在右上角点开插件的下拉菜单，选择第一项——“API”，这就是你迈向 TMDB API 的第一步。如果此前还没有接触过 ProtoPie 的 API 插件功能，那么可以先看看下面这两个教程：
电影资讯网站浏览演示
在此，我们的示例中用到了多个 API 接口。需要注意的是，在专业版中一次只能使用一个 API 插件，即只能连接到一个 API 接口上；而使用企业版则可以灵活地创建多个 API 插件，从而能体验到与上面的视频演示同样的丰富功能。
制作实时搜索建议功能
制作这一功能需要使用 Search > Movie 这个接口。这个接口根据查询中提供的关键字来检索电影信息，包含翻译后的电影名称以及电影别名等。
电影名称实时搜索功能
在我们的原型中，ProtoPie 通过一个监听触发动作来监测搜索框中内容的变化。一旦检测到内容有所改变，即刻将搜索框中的内容作为查询参数传给 TMDB API，而 API 则立即作出响应，答复相关的搜索结果给我们，这样的机制使我们得以从响应中提取到所需的数据，并实时地将相关信息作为搜索建议来展现给用户。
以下是这一实时搜索建议功能在 API 插件设置上的简明指引：
- Method：GET
- Header：将以下的 "访问令牌" 替换为你自己的访问令牌。
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
- Message from Pie：SEARCH
- 确保已经勾选 “Override URL with msg value” 选项。
- Message to Pie：SEARCH RESULT
设置完成后，点击 “Activate” 按钮，即可在输入框中键入内容来进行测试，如果运行正常，则可以看到基于输入内容的实时搜索建议。
使用 API 提取电影基础信息
TMDB API 拥有丰富的电影相关信息，囊括了从演职员表到探班花絮、从影评吐槽到评级打分等等林林种种的内容。如想深入了解通过这一 API 可以获取到电影相关的哪些数据，可以访问这一页面，页面中 TMDB API 官方给出了详细的文档说明。在左侧的 “MOVIES” 类别中可以看到这一 API 所能提供的信息列表，可谓包罗万象。
如何请求电影基础信息
如何请求电影基础信息
在我们的范例中，有两种方式可以进入电影详情页：一是直接点击主页上的任意电影，一是选择某项搜索建议。一旦进入到详情页后，就可以看到几个栏目的内容：
首栏中的电影名称、海报及详情
首栏：这一栏给出了电影的基本信息，包括名称、上映日期、内容描述、评级以及引人注目的电影海报。
主演栏
主演栏：在这一栏中，可以查看到电影中出现的知名人物、他们各自饰演的角色，以及他们的肖像照片。
精彩剧照
剧照栏：这一栏展示了电影相关的精彩剧照，为用户提供身临其境的视觉体验。
电影推荐栏
电影推荐栏：展示一系列基于相关性建议结果的电影索引，帮助用户探索相似或相关的其他内容。
为了在示例项目中实现以上这些内容，我们用到了四个 API 接口：
- Movies > Details 获取首栏所需数据
- Movies > Credits获取主演栏所需数据
- Movies > Images 获取剧照栏所需数据
- Movies > Recommendations 获取电影推荐栏所需数据
现在，我们来设置 API 插件。如前所述，企业版用户可以灵活地同时访问多个 API 接口，获取到如同示例中所展示的全面体验。而如果你是专业版用户，那也不必担心——你仍然可以通过一次运行一个 API 插件来掌握数据在设计中的流转方式。
首栏
- Method：GET
- Header：将以下的 "访问令牌" 替换为你自己的访问令牌。
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
- Message from Pie：DETAILS
- 确保已经勾选 “Override URL with msg value” 选项。
- Message to Pie：DETAILS RESPONSE
主演栏
- Method：GET
- Header：将以下的 "访问令牌" 替换为你自己的访问令牌。
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
- Message from Pie：CREDITS
- 确保已经勾选 “Override URL with msg value” 选项。
- Message to Pie：CREDITS RESPONSE
剧照栏
- Method：GET
- Header：将以下的 "访问令牌" 替换为你自己的访问令牌。
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
- Message from Pie：MEDIA
- 确保已经勾选 “Override URL with msg value” 选项。
- Message to Pie：MEDIA RESPONSE
电影推荐栏
- Method：GET
- Header：将以下的 "访问令牌" 替换为你自己的访问令牌。
{"Authorization": "Bearer 访问令牌","accept": "application/json"}
- Message from Pie：RECOMMENDATIONS
- 确保已经勾选 “Override URL with msg value” 选项。
- Message to Pie：RECOMMENDATIONS RESPONSE
为什么要在设计中使用真实数据
体验完这个令人叹为观止的原型之后，让我们来深入探讨一个议题：为什么在 ProtoPie 中以数据为核心的玩法可以颠覆原型设计的游戏规则。
在打造影评网站、电视流媒体服务，或是内容管理系统等平台时，让用户沉浸在真实数据中并不只是一个可有可无的选项——这是十分必要的。当错综复杂的各类细节融贯交汇时，所能展现的图景几乎完全依赖于用户的想象力，这一点决定了对设计师而言，深入研究真实数据是至关重要的。 利用真实数据来进行表达和呈现能体现出大量优势：
- 寓型于测：采用真实的数据来呈现，就如同对原型进行了在现实中的检查。原型被置于各类现实生活的情形中，从而暴露出潜在的问题，并遇到不尽相同的各种场景。假设电影数据中缺失缩略图或评分——你应如何处理？对于需要呈现的内容中，如果存在长度不一的情形，你的设计是否可以自行适应而不会打乱布局？
- 身临其境：真实数据使原型变得生动，使干系人和用户为之惊叹。当他们亲见设计成果与真实数据相融合，他们就可以更全面地把握到设计所蕴含的潜力以及所体现的实际效用。
- 降本创效：将真实数据融入设计过程后，即可免去手动更新数据的繁冗操作。ProtoPie 的 API 插件如同吸星大法一般，无需额外的复杂操作就可以让你将各处的实时数据抓取汇聚到原型中。
- 精益产出：这篇教程中的示例项目是一个仅有 4.4 MB 的轻量级项目，项目中只放入了两个带数据占位符的模板场景。 这种战略方法不仅有助于更好地进行数字资产管理，还优化了项目规模、显著提升了绩效。 有效控制项目规模可以确保功能更流畅、执行性能更优，而这不正是设计工作上孜孜以求的一大关键点吗？
电影基础数据占位符所形成的模板
快来加入视频流与电视 UI 设计大师班
如同刚刚展示过的，如果你渴望探索特色满满的原型中眼花缭乱的功能，发掘原型背后潜藏的底层奥义，那就不用再往下看了——我们的 ProtoPie 大师班就是为你这样的爱好者量身打造的！我们知道，像你这么优秀的设计师，不仅希望无缝集成真实数据，还渴望掌握在设计中处理数据并优雅呈现的艺术。整装待发迎接一系列尖端原型技术的旅程吧，矗立锋线，挺立潮头！
精彩不容错过！注册 ProtoPie School 智能电视与视频流原型制作 课程，开启超越传统设计边界的挑战之旅！