一、部署 E-Bikes 示例应用
本单元设置环境并把 E-Bikes 示例应用部署到 Trailhead Playground。
学完本项目，你将能够：部署 E-Bikes 示例应用、了解应用用例、探索示例应用的实现。
介绍 E-Bikes 示例应用
E-Bikes 是一个虚构的电动自行车制造商，这个示例应用帮助它用 Salesforce Platform 管理产品与经销商订单。你会探索一个与 Experience Cloud 集成的 Lightning 应用，并学习如何用 Lightning Web Components 结合不同数据访问策略构建丰富的用户体验。
这个 Quick Start 项目从 Trailhead Sample Gallery 安装示例应用——其中有可用来学习 Lightning Web Components 的示例，以及开发自己组件时的起步代码。开始前需先完成 Quick Start: Lightning Web Components，它会带你设置 Salesforce DX 开发环境（含 Salesforce CLI、Visual Studio Code 与 Salesforce Extension Pack）。
新建 Trailhead Playground
为本项目创建一个全新的 Trailhead Playground：点击 Launch 旁的下拉箭头，选择 Create a Trailhead Playground，通常需 3-4 分钟。为什么必须是新的？因为用现有 org 或 playground 可能在完成挑战时遇到问题，所以一个干净的 playground 值得短暂等待。这个 playground 就是你要部署 E-Bikes 示例应用的地方。
获取 Playground 用户名与密码
部署需要你的 playground 登录凭据。用 Playground Starter（或 Get Your Login Credentials 标签）记下用户名，点击 Reset My Password 触发一封邮件，点击邮件中的链接，设置新密码并确认。保存好这些凭据——后续要用它们授权 org 并从 CLI 部署应用。
获取 Git 命令行
要克隆示例应用仓库，需要 Git（版本控制系统）。从 git-scm.com 安装 Git、接受默认设置，然后在 Terminal（macOS）或 Command Prompt（Windows）输入 git 确认安装——输出一串 git 命令即表示就绪。之后按示例应用 readme 的说明克隆并部署。
部署应用
工具就绪后，用 Visual Studio Code 部署 E-Bikes 示例应用：打开 VS Code，打开命令面板（View → Command Palette），打开新终端（Terminal → New Terminal），粘贴项目 readme 中的命令，把应用安装到 Trailhead Playground。完成后 E-Bikes 示例应用就部署好了，下一步即可探索它。
二、认识 E-Bikes 示例应用
本单元游览部署好的应用——浏览产品、创建经销商订单、探索 Experience Cloud 站点。
探索 Product Explorer
E-Bikes 客户经理可用 Product Explorer 浏览自行车型号及其技术规格。从 App Launcher 打开带红色自行车 logo 的 E-Bikes 卡片（Lightning 应用），点击 Product Explorer 标签。这个 Lightning 页面由自定义 Lightning Web Components 构建，包含三个顶层组件：一组过滤器、一个分页的产品列表、以及产品详情。试着应用不同过滤器看列表动态更新，选择一个自行车看它的详细描述。
页面显示的信息来自产品记录。选中一个自行车型号后，点击详细产品视图打开记录页。
该记录页包含一个自定义组件，显示来自同一产品系列的类似产品列表。
创建经销商订单
E-Bikes 客户代表可为零售商创建经销商订单。点击 Reseller Orders 标签 → New → 选择 Northern Trail Cycling 账户 → Save。经销商订单就像购物篮：把 Dynamo X4 自行车拖到带 E-Bike logo 的灰色占位符上，再把 Electra X4 拖到同一位置，可调整价格与各尺寸数量，点产品块右上角的灰色勾图标保存更改。
若要移除订单项，悬停产品时点击出现的垃圾桶图标。
探索站点
自行车爱好者可在专门的 Experience Cloud 站点浏览 E-Bikes 产品线。从 App Launcher 打开不带红色 logo 的 E-Bikes 卡片。
注意这个媒体丰富、含自定义布局与视频的站点——它由自定义 Lightning Web Component 代码与 Experience Builder 等声明式功能结合创建。
客户可浏览产品并在需要帮助时创建案例。探索不同标签页时注意组件被复用——Lightning 应用中的 Product Explorer 与站点使用相同的组件。
三、深入 E-Bikes 示例应用组件
本单元深入示例应用的代码——Product Explorer 背后的组件、组件间通信与 Jest 测试。
学完本单元，你将能够：理解 Product Explorer 组件、了解 LWC 组件如何通信、理解用 Jest 做 LWC 测试。
Product Explorer 代码要点
Product Explorer 是应用中最复杂的组件集，暴露三个 Lightning Web Component 到 Lightning App Builder：productFilter、productTileList、productCard。它们用 Lightning Message Service（LMS） 相互通信：过滤器变化时 productFilter 发布 ProductsFiltered 消息更新列表；列表中选择产品时 productTileList 发布 ProductSelected 消息更新产品卡片。
LMS 让兄弟组件通过消息通信，也支持跨 Visualforce、Aura 与 Lightning Web Components 通信。
Product Filter 组件
productFilter 组件从 UI API 导入 getPicklistValues，检索 category、material、level 产品字段的选项列表值。这个做法有意思之处在于：无需 Apex 检索记录数据，且即使选项列表值以后变化（例如 E-Bikes 发布新产品类别），UI 也无需改代码即可保持最新。每当过滤器值变化，productFilter 就发布带当前过滤值的 ProductsFiltered 消息，由 productTileList 组件处理。
Product Tile List 组件
productTileList 组件一加入 DOM 就订阅 ProductsFiltered 消息，用 handleFilterChange 函数跟踪过滤器。它通过从 ProductController Apex 类的 getProducts 方法导入的 wire adapter，用应用的过滤器与页码检索产品列表。该 Apex 方法运行 SOQL 查询，把过滤后的产品记录封装成 PagedResult 对象，按 PAGE_SIZE 常量每批九条分页。分页限制了返回项数，确保产品目录增长时性能保持稳定。
Product Tile List 测试
示例应用为 productTileList 组件提供了 Jest 测试（在 productTileList.test.js 中）。因为测试在平台外隔离运行，所有平台依赖都要 mock：Lightning Message Service、MessageContext 与 getProducts wire adapter。团队用自定义 LMS mock 获得额外能力，用 data 文件夹中的简单 JSON 文件替换服务端返回的产品列表。测试"displays one c-product-tile per record"挂载列表、传入 mock 记录、验证渲染的 tile 数量与 mock 记录数匹配。
下一步
E-Bikes 示例应用的导览到此结束，但探索仍可继续：看看其他组件及其测试，花时间体验 Experience Cloud 站点，浏览 Salesforce Sample App Gallery 及其源码，用其他专门的 Quick Start 项目继续学习如何构建优秀的 Lightning Web Components。
文章来源：Trailhead - Quick Start: Explore the E-Bikes Sample App