Skip to content

02-javascript.md

Latest commit

 

History

History
169 lines (117 loc) · 6.57 KB

02-javascript.md

File metadata and controls

169 lines (117 loc) · 6.57 KB
Raw

02: JavaScript 前端开发

场景

Contoso 是一家销售各种户外活动产品的公司。Contoso 的市场部门希望启动一个微型社交媒体网站，为现有客户和潜在客户推广他们的产品。

作为 JavaScript 开发人员，您将使用 React 构建与 Python 后端 API 应用程序通信的 JavaScript 前端应用程序。

先决条件

请参考 README 文档进行准备。

入门指南

检查 GitHub Copilot 代理模式

  1. 点击 GitHub Codespace 或 VS Code 顶部的 GitHub Copilot 图标，打开 GitHub Copilot 窗口。

    打开 GitHub Copilot Chat

  2. 如果要求您登录或注册，请执行操作。这是免费的。

  3. 确保您使用的是 GitHub Copilot 代理模式。

    GitHub Copilot 代理模式

  4. 选择模型为 GPT-4.1 或 Claude Sonnet 4。

  5. 确保您已配置了 MCP 服务器。

准备自定义指令

  1. 设置 $REPOSITORY_ROOT 环境变量。

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. 复制自定义指令。

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \
      $REPOSITORY_ROOT/.github/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* `
          -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force

准备应用程序项目

  1. 确保您使用的是带有 Claude Sonnet 4 或 GPT-4.1 模型的 GitHub Copilot 代理模式。

  2. 确保 context7 MCP 服务器正在运行。

  3. 使用如下提示构建 React Web 应用项目。

    我想构建一个 React Web 应用。请按照以下说明操作。

- 确保这是 Web 应用，而不是移动应用。
- 您的工作目录是 `javascript`。
- 首先确定您要执行的所有步骤。
- 使用 ViteJS 作为前端应用框架。
- 初始化项目时使用默认设置。
- 初始化时使用 `SimpleSocialMediaApplication` 作为项目名称。
- 使用端口号 `3000`。
- 只初始化项目。不要再往下做。

  4. 点击 GitHub Copilot 的 保留按钮图片 按钮接受更改。

准备 Figma MCP 服务器

  1. 确保您已配置 MCP 服务器。
  2. 从 Figma 获取个人访问令牌 (PAT)。
  3. 通过按 F1 或在 Windows 上按 Ctrl+Shift+P 或在 Mac OS 上按 Cmd+Shift+P 打开命令面板，然后搜索 MCP: List Servers。
  4. 选择 Framelink Figma MCP，然后点击 Start Server。
  5. 输入您从 Figma 获得的 PAT。

从 Figma 生成 UI 组件

  1. 确保您使用的是带有 Claude Sonnet 4 或 GPT-4.1 模型的 GitHub Copilot 代理模式。

  2. 确保您正在运行 Figma MCP 服务器。

  3. 将 Figma 设计模板 复制到您的账户。

    Figma 设计模板页面

  4. 右击每个部分 - Home、Search、Post Details、Post Modal 和 Name Input Modal 👉 选择 Copy/Paste as 👉 选择 Copy link to selection 获取每个部分的链接。记录所有五个链接。

运行 FastAPI 后端应用

  1. 确保 FastAPI 后端应用正在运行。

    运行位于 `python` 目录的 FastAPI 后端 API。

    注意：您可以使用 complete/python 示例应用替代。

  2. 如果您使用 GitHub Codespaces，确保端口号 8000 设置为 public 而不是 private。否则，从前端应用访问时会出现 401 错误。

构建 React 前端应用

  1. 确保您使用的是带有 Claude Sonnet 4 或 GPT-4.1 模型的 GitHub Copilot 代理模式。

  2. 确保 context7 MCP 服务器正在运行。

  3. 确保您拥有从上一节检索到的 5 个 Figma 部分链接。

  4. 将 product-requirements.md 和 openapi.yaml 添加到 GitHub Copilot。

  5. 使用如下提示基于需求和 OpenAPI 文档构建应用程序。

    我想构建一个 React Web 应用。请按照以下说明操作。

- 您的工作目录是 `javascript`。
- 首先确定您要执行的所有步骤。
- 有一个后端 API 应用运行在 `http://localhost:8000`。
- 使用描述所有端点和数据架构的 `openapi.yaml`。
- 使用端口号 `3000`。
- 创建此链接中定义的所有 UI 组件：{{FIGMA_SECTION_LINK}}。
- 不要添加与 UI 组件无关的任何内容。
- 不要添加 `openapi.yaml` 中未定义的任何内容。
- 不要修改 `openapi.yaml` 中定义的任何内容。
- 当后端 API 因任何原因不可用或无法访问时，给出可视化指示。

  6. 对其余四个 Figma 设计链接重复四次。

  7. 点击 GitHub Copilot 的 保留按钮图片 按钮接受更改。

验证 React 前端应用

  1. 确保 FastAPI 后端应用正在运行。

    运行位于 `python` 目录的 FastAPI 后端 API。

  2. 验证是否构建正确。

    运行 React 应用并验证应用是否正常运行。

如果应用运行失败，请分析问题并修复它们。

  3. 打开 Web 浏览器并导航到 http://localhost:3000。

  4. 验证前端和后端应用是否正常运行。

  5. 点击 GitHub Copilot 的 [keep] 按钮接受更改。

好的。您已经完成了"JavaScript"步骤。让我们继续 步骤 03：从 Python 迁移到 Java。

免责声明: 本文档由 GitHub Copilot 本地化。因此，可能包含错误。如果您发现任何不当或错误的翻译，请创建一个 issue。