演示应用程序

在本节课中，我们将展示一个集成 Eventbrite API 多个端点的 React 演示应用。系统包含两类用户：组织者 和 普通用户。我们在应用中使用了以下端点：

1. 查看活动
2. 创建活动
3. 创建票务
4. 发布活动
5. 使用 Eventbrite 的结账组件购买门票

工作流程

1. 启动应用后，将显示用户的页面。该页面会展示当前正在进行的活动，并可通过点击“购买门票”来购票。点击“运行”按钮下方的链接可打开用户页面。

1. 接下来，可通过运行环境的基础 URL 打开组织者的主页，查看所有活动。导航栏提供三个选项：创建活动、创建票务、发布活动。

2. 点击“创建活动”选项后，将打开新页面。组织者可在页面中输入活动详情并创建活动。

3. 点击“创建票务”选项后，将打开新页面。组织者可输入票务信息并为某个有效活动创建票务。

4. 点击“发布活动”选项后，将打开新页面。组织者可查看所有草稿活动，并选择其中任意一项进行发布。

通过下方代码工具中的“运行”按钮启动演示应用，然后点击工具末尾提供的 URL 链接，即可与应用进行交互。

代码说明

下面我们深入分析代码，了解如何将不同的 Eventbrite API 端点集成到我们的 React 应用中。可以在演示应用的 components 文件夹下查看 Home.jsx、CreateTicket.jsx、CreateEvent.jsx、PublishEvents.jsx 以及 BuyTickets.jsx 文件的内容。

注意：上方代码工具仅展示了用于解释 Eventbrite API 端点所需的关键文件。每个组件都接收 PRIVATE_TOKEN 和 ORGANIZATION_ID，以与 API 进行交互。

• Home.jsx 组件（第 6–23 行）通过活动获取端点获取实时活动数据，并在页面上展示。同时，可通过导航栏中的选项跳转至其他页面。
• CreateEvent.jsx 组件允许组织者创建活动。
  • 第 9–15 行：声明了若干状态变量，用于从用户界面获取输入值。
  • 第 48 行：调用自定义钩子 useFetch 发起 API 请求。
  • 第 50–60 行：已实现 handleSubmit 函数，当点击“创建活动”按钮时触发。该函数获取界面输入值并保存至状态变量，随后调用 useFetch 钩子完成请求。
• CreateTicket.jsx 组件允许组织者为任意有效活动创建票务。
  • 第 10–12 行：声明了用于获取界面输入值的状态变量，以及用于在界面上显示成功或错误信息的消息变量。
  • 第 30 行：调用自定义钩子 useFetch 发起 API 请求。
  • 第 31–37 行：已实现 handleSubmit 函数，点击“创建票务”按钮时触发。该函数获取界面输入值并保存至状态变量，随后调用 useFetch 钩子完成请求。
  • 第 62 行：调用 EventsList 组件，返回活动列表。
• PublishEvents.jsx 组件展示所有草稿活动，组织者可点击“发布活动”按钮发布指定活动。
  • 第 19 行和第 27 行：使用了两次 useFetch 调用。第一次用于获取所有活动并在界面中展示，第二次用于发布组织者选定的特定活动。
• BuyTickets.jsx 组件展示所有正在进行的活动，用户可点击“购买门票”按钮进行购票。
  • 第 6–19 行：runScript 函数在用户点击“购买门票”按钮时，显示结账组件。