在本教程中，我们将教你如何将真实世界的数据无缝整合到你的设计项目中。了解 ProtoPie 强大工具组合的能力，例如 API plugins 和 self-hosted media。我们将一步步引导你使用电影数据库 API 创建一个电影评论网站，并以 The Movie Database（TMDB）作为灵感模型。
准备好行动了吗？让我们一起创造电影魔法吧！
概览
什么是 The Movie Database API？
获取 TMDB API 密钥
如何设置你的 API 插件
提供实时搜索建议
使用 API 拉取电影元数据
为什么在设计中使用真实数据
加入我们的视频流与电视 UI 设计大师课
什么是 The Movie Database API？
TMDB（The Movie Database）API 以其易用性和全面覆盖而脱颖而出。一个显著优势是 TMDB 的 API 免费，这使其成为希望将真实数据集成到原型中的设计师和开发者的理想选择。TMDB 提供从演员与剧组信息到评论和评分等多样化数据，并拥有友好的界面与详尽文档，是探索数据集成的理想平台。
虽然 IMDB API 也提供有价值的数据并在行业内享有长期声誉，但需要注意的是，它通过 AWS Data Exchange 访问，需要 AWS 账户并采用付费计划。为了本次探索，我们将使用文档完善且可免费访问的 TMDB API。
获取 TMDB API 密钥
要获取你的个人 API 密钥，只需按照本指南中的分步说明操作。完成后，你的访问凭据可在 API link 页面查看。
TMDB 提供两种身份验证方式，各有优势：
使用查询参数：在 URL 中使用名为
api_key的单个查询参数，例如：https://api.themoviedb.org/3/movie/11?api_key=API_KEY**请求头中的 Bearer Token：**将访问令牌作为 Bearer token 放在 Authorization 请求头中发送，如 API 插件配置示例所示：
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }
具体选择哪种方式取决于你的需求。例如在 ProtoPie 中，如果你主要与可信同事协作，使用 URL 方式可将密钥保存为原型变量，自动传递 API 调用，分享更简便。相反，对于不希望暴露凭据的外部干系人，第二种方式更安全。务必让每位成员在 API 插件配置中获取并设置各自唯一的凭据。
如何设置你的 API 插件
下载原型并保存到设备上。完成后，启动 ProtoPie Connect，并将该项目拖入 Connect 界面。
接下来：配置我们的 API。在下拉菜单右上角找到插件图标，并选择第一个标有“API”的选项。这是你连接 TMDB API 的入口。如果你是第一次使用 ProtoPie 的 API plugin 功能，建议先阅读这些教程：
我们的示例涉及多个 API 端点。请注意，如果你使用的是 Pro 计划，一次只能使用一个 API 插件；如果你使用的是 Enterprise 计划，则可以灵活创建多个插件，体验与上方演示视频相同的完整功能。
提供实时搜索建议
启用此功能需要使用 Search > Movie 端点。该端点会根据查询中的关键词检索电影信息，包括翻译标题和别名标题。
实时电影搜索功能。
在我们的原型中，底层逻辑通过 Detect trigger 运行，用于监测搜索框中的变化。每当检测到变化时，我们会迅速将搜索框内容作为查询参数传递给 TMDB API。API 会立即响应，使我们能够利用返回数据实时展示相关搜索建议。
以下是设置实时搜索建议插件的简明指南：
方法：GET
请求头：将 "ACCESS_TOKEN" 替换为你的唯一访问令牌。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }来自 Pie 的消息：SEARCH
确保勾选“Override URL with msg value”复选框。
发送到 Pie 的消息：SEARCH RESULT
配置完成后，点击“Activate”按钮。现在在搜索框中输入内容，即可看到基于输入的实时建议。
使用 API 拉取电影元数据
TMDB API 拥有丰富的电影相关信息，涵盖从演员与剧组细节到评论和评分的一切内容。若要深入了解该 API 可提供的海量电影数据，请访问详细文档页面。在页面左侧“MOVIES”分类中，你会发现该 API 提供的详尽条目列表。
如何请求电影元数据。
在我们的示例中，你有两种方式查看电影详情：点击首页展示的任意电影，或选择一条搜索建议。进入电影详情页后，会展开多个区域：
包含电影标题、海报和详情的页头区域。
Header 区域：该部分提供电影的基础信息，包括标题、上映日期、简介、评分以及吸引人的电影海报。
电影主要演员区域。
**“Top Billed Cast” 区域：**在这里你可以看到电影演职员信息，包括主要人员姓名、饰演角色以及头像。
展示电影的宣传图片
“Media” 区域：该区域展示与电影相关的一组精选视觉图片，带来沉浸式观感体验。
推荐电影区域。
“Recommendations” 区域：这里汇总与当前电影相似的推荐影片，帮助你探索更多相关内容。
为了在示例项目中实现这一点，我们接入了四个 API 端点
Movies > Details 用于 Header 区域
Movies > Credits 用于“Top Billed Cast”区域
Movies > Images 用于“Media”区域
Movies > Recommendations 用于“Recommendations”区域
现在，让我们来设置 API 插件。正如前文所述，Enterprise 计划用户可以灵活地同时使用多个 API，获得与我们的演示接近的完整体验。不过，如果你使用的是Pro 计划，也不用担心——仍可通过一次运行一个插件来理解数据如何填充到设计中。
Header 区域
方法：GET
请求头：将 "ACCESS_TOKEN" 替换为你的唯一访问令牌。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }来自 Pie 的消息：DETAILS
确保勾选“Override URL with msg value”复选框。
发送到 Pie 的消息：DETAILS RESPONSE
“Top Billed Cast” 区域
方法：GET
请求头：将 "ACCESS_TOKEN" 替换为你的唯一访问令牌。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }来自 Pie 的消息：CREDITS
确保勾选“Override URL with msg value”复选框。
发送到 Pie 的消息：CREDITS RESPONSE
“Media” 区域
方法：GET
请求头：将 "ACCESS_TOKEN" 替换为你的唯一访问令牌。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }来自 Pie 的消息：MEDIA
确保勾选“Override URL with msg value”复选框。
发送到 Pie 的消息：MEDIA RESPONSE
“Recommendations” 区域
方法：GET
请求头：将 "ACCESS_TOKEN" 替换为你的唯一访问令牌。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }来自 Pie 的消息：RECOMMENDATIONS
确保勾选“Override URL with msg value”复选框。
发送到 Pie 的消息：RECOMMENDATIONS RESPONSE
为什么在设计中使用真实数据
体验完这个出色的原型后，让我们深入看看为什么以数据为核心的 ProtoPie 工作方式会带来颠覆性改变。
在构建电影评论网站、电视流媒体服务或内容管理系统这类平台时，沉浸于真实数据并非可选项，而是必需项。当细节至关重要时，仅靠想象远远不够。这正是使用真实数据对设计师至关重要的原因。利用真实数据有诸多优势：
**让你的原型经受考验：**真实数据就像原型的现实检验器。它能构建真实场景，暴露隐藏问题并探索不同情况。比如电影数据没有缩略图或评分怎么办？你的设计能否在不同内容长度下不破坏布局地自适应？
**让所有人都被吸引：**真实数据会让原型更有说服力，让干系人和用户惊叹“哇，这很酷！”当他们看到设计在真实数据下如何运作，就能更好理解它的潜力和实际表现。
**节省时间与精力：**在设计流程中引入真实数据，可以避免你编造内容或手动更新。ProtoPie 的 API 插件就像魔法棒，让你能将各种实时数据源直接接入原型，无需额外繁琐工作。
**优化性能与结果：**示例项目体积仅 4.4 MB，非常轻量，且只包含两个带数据占位符的模板场景。这种策略不仅有助于更好地管理素材，也能优化项目体积并显著提升性能。控制项目大小可确保更顺畅的功能表现和更好的性能，这对你的设计实践至关重要。
电影元数据占位符模板。
加入我们的视频流与电视 UI 设计大师课
如果你渴望深入探索如何打造一个功能丰富、类似你刚体验过的原型，那么不用再找了。我们的 ProtoPie 大师课专为像你这样的爱好者打造——你不仅希望无缝整合真实数据，还希望掌握在设计中处理并优雅展示数据的艺术。准备开启一段旅程，解锁一系列前沿原型设计技巧，确保你始终走在前沿。
不要错过！立即报名 ProtoPie School 的 Prototyping for Smart TV and Video Streaming 课程，开启一场突破传统设计边界的冒险之旅。
