GitHub 入门：使用 GitHub Copilot 构建 React 应用

跟着步骤，使用 React 和 Copilot Chat 构建一个前端客户端。

欢迎来到我们的 GitHub 入门系列视频的下一集，我们将深入探索GitHub Copilot的世界。这是我们的第六集，内容相当丰富。您可以在我们的博客或视频中查看之前的所有剧集。

今天我们将使用 GitHub Copilot 来帮助我们构建一个基于React 的前端项目。在上一集中，我们为旅行行程规划工具 Planventure 创建了一个后端 API。我们将继续这项工作，创建一个利用该 API 与 Planventure 交互的 React 客户端。要查看我们将要构建的内容的完整描述，请访问此仓库并切换到 client-start 分支以开始。

在本系列演示中，我们将使用 Visual Studio Code 中的 GitHub Copilot。

Copilot 也可在其他 IDE 中使用，但可用功能可能因环境而异。

你需要准备什么

开始之前，你需要准备以下物品： 

• 类似VS Code 的代码编辑器
• 最新版本的Node.js 
• 像npm这样的包管理器
• 访问GitHub Copilot — 免费注册！ 

或者，您可以使用GitHub Codespace在云端构建——如果您使用 Codespace，仍然需要 Copilot 访问权限。您可以点击仓库中的“在 GitHub Codespace 中打开”按钮。

我们正在构建什么

我们将创建一个前端应用程序，连接到我们在上一集中创建的后端 API。我们将使用 React 库，因此建议您熟悉如何使用 React 构建客户端应用程序。更具体地说，我们将使用：

• 使用 Vite 作为客户端 React。
• Material UI作为组件库。

我们的目标是构建一个具备以下功能的前端应用程序：

• 验证用户身份
• 添加受保护路由
• 添加行程和行程信息
• 编辑现有行程

我们开始吧！

解决错误

由于 Copilot 是一款生成式 AI 助手，即使多次发送相同的提示，也可能得到不同的结果。因此，无法预测何时会出现错误或错误的具体内容。如果在操作过程中出现任何错误，请使用 Copilot Chat 来帮助您调试和解决问题。

要解决这个问题，请复制错误信息，打开 Copilot Chat，输入@workspace /fix，然后粘贴错误信息。Copilot 将尝试查找针对该错误的建议解决方案。查看建议的更改，然后重试。

步骤 1：初始设置

在开始之前，我们需要创造合适的工作环境。

1. 在代码编辑器中打开终端并运行以下命令，克隆Planventure 存储库。

git clone https://github.com/github-samples/planventure

2. 导航至planventure-client目录并切换到该client-start分支。

cd planventure-client
git switch client-start

3. 安装必要的依赖项。

npm install

4. 启动服务器。

npm run dev

5. 打开浏览器访问http://localhost:5173以验证应用程序是否正在运行。

6. 通过查看现有文件熟悉代码。请注意，一些基本组件已经安装和配置完毕。打开 Copilot Chat 并发送以下提示，即可获取现有代码的基本摘要：

@workspace Tell me about the configuration setup in the react app.

现在初始设置已经完成，请查看GitHub 问题以了解有关我们需要构建的内容的详细信息。

步骤二：创建登录和注册表单

首先，我们需要添加身份验证功能。我们将通过构建登录和注册表单来实现这一点。但首先，我们需要创建一个 AuthLayout 组件，用于所有需要身份验证的路由。

1. 打开 Copilot Chat 并使用型号选择器选择Claude Sonnet 3.5型号。
2. 向副驾驶发送以下提示。

@workspace Create AuthLayout component with navigation and centered content.

3. 将鼠标悬停在建议的解决方案上，单击…，然后选择“插入到新文件中”。
4. 检查添加的代码并保存文件。您应该始终检查 Copilot 提供的代码，以便了解其功能并确保它能解决您的问题。

1. 向 Copilot Chat 发送以下提示。

@workspace Build a LoginForm component with email/password fields and validation.

2. 在src/components文件夹下创建一个名为auth的新文件夹。
3. 返回 Copilot Chat，将鼠标悬停在建议的解决方案上，单击…，然后选择“插入到新文件中”。
4. 检查添加的代码，并将文件保存到auth文件夹中。

5. 返回副驾驶聊天窗口，从下拉菜单中选择“编辑”。
6. 如果以下文件尚未列在工作集中， 请使用“添加文件”按钮添加它们：
   • AuthLayout.jsx
   • 登录表单.jsx
   • Routes.jsx
7. 向副驾驶编辑发送以下提示。

Create a new loginPage. Update route and authLayout as needed.

8. 请审核并接受 Copilot Edits 的所有更改。别忘了保存文件。
9. 向 Copilot Edits 发送以下提示以更新 Home 组件。

Update the navbar to use the new loginpage and add a get started button to the home page that routes to the login page.

10. 检查代码并进行必要的修改。然后保存所有更新后的文件。 
11. 返回浏览器页面并刷新以查看最新更改。 

12. 将更改提交到代码仓库。您可以使用 Copilot 自动生成提交消息，只需点击提交消息框右上角的闪光按钮即可。

现在用户界面上已经有了“开始使用”按钮和登录页面。接下来我们需要创建一个注册页面，以便新用户可以注册。

1. 打开 Copilot Chat 并向其发送以下提示。

@workspace Create SignupForm component matching the login form style and a new SignUpPage. Be sure to update routing.

2. 将鼠标悬停在建议的解决方案上，在auth文件夹中添加 SignupForm 组件，单击…，然后选择“插入到新文件中”。
3. 将鼠标悬停在建议的解决方案上，在pages文件夹中添加 SignupPage 组件，单击…，然后选择“插入到新文件中”。
4. 对于每个已提出更改建议的文件：
   1. 在编辑器中打开相关文件。
   2. 将鼠标悬停在建议的文件更改上，然后单击“在编辑器中应用”按钮。
   3. 请审核并接受更改。
   4. 保存文件。
5. 刷新浏览器并测试新页面。
6. 提交更改。

1. 在编辑器中打开AuthContext.jsx文件。它位于context文件夹中。
2. 打开 Copilot Chat 并向其发送以下提示。

Setup authentication context and token management #file:ProtectedRoute.jsx

1. 对于每个已提出更改建议的文件：
   1. 在编辑器中打开相关文件。
   2. 将鼠标悬停在建议的文件更改上，然后单击“在编辑器中应用”按钮。
   3. 请审核并接受更改。
   4. 保存文件。
2. 提交更改。

步骤 3：使用 API 进行身份验证

现在我们已经有了必要的表单，接下来需要向后端服务器发送请求，以便用户可以注册和登录。为此，我们需要同时编辑三个文件。幸运的是，Copilot Chat 支持同时编辑多个文件！

1. 向 Copilot Chat 发送以下提示。

@workspace Setup api service functions for login and register routes. Update login and signup forms to use api service. #file:SignupForm.jsx

2. 对于每个已提出更改建议的文件：
   1. 在编辑器中打开相关文件。
   2. 将鼠标悬停在建议的文件更改上，然后单击“在编辑器中应用”按钮。
   3. 请审核并接受更改。
   4. 保存文件。
3. 创建一个新的终端窗口，并切换到 planventure-api 目录，然后运行以下命令启动服务器：

flask run --debug

4.刷新浏览器并尝试登录应用。如果遇到错误，请尝试使用 GitHub Copilot 进行调试。观看本集视频，了解一些可能需要调试的示例。

5.尝试注册一个新用户，并调试出现的任何错误。

既然我们已经验证了可以登录和创建新用户，我们想在导航栏中添加注销功能。

1. 向 Copilot Chat 发送以下提示。

@workspace update navbar to include the logout function

2. 对于每个已提出更改建议的文件：
   1. 在编辑器中打开相关文件。
   2. 将鼠标悬停在建议的文件更改上，然后单击“在编辑器中应用”按钮。
   3. 请审核并接受更改。
   4. 保存文件。
3. 返回浏览器，刷新页面，然后测试“注销”按钮。请注意，您需要登录才能看到“注销”按钮。
4. 将所有这些更改提交到您的代码仓库。

恭喜！您已成功添加用户身份验证！

步骤 4：添加仪表盘和侧边栏导航

为了确保用户能够轻松访问常用功能，我们希望创建一个带有侧边栏导航的仪表盘。

1. 点击窗口顶部的“Copilot”按钮，然后选择“打开 Copilot 编辑”。
2. 如果以下文件尚未列在工作集中， 请使用“添加文件”按钮添加它们：
   • App.jsx
   • AuthContent.jsx
   • AuthLayout.jsx
   • 登录表单.jsx
   • 导航栏.jsx
   • SignupForm.jsx
3. 向副驾驶编辑发送以下提示。

Build a dashboard layout component with sidebar navigation

 4.请审核并接受建议的代码更改，然后保存文件。
 5.刷新浏览器即可查看新的仪表盘。

现在我们已经有了布局，我们需要创建一个 TripCard 和 TripList 组件来展示用户的行程。

1. 向 Copilot Edits 发送以下提示以创建必要的组件。

Create TripCard and TripList components for displaying trips with loading states.

2. 请审核并接受建议的代码修改。
3. 发送以下提示以添加显示用户行程的仪表盘组件。

Create a dashboard component that displays the trips that users are routed to on login.

4. 请审核并接受建议的代码修改。
5. 如果用户没有任何行程，则应收到欢迎消息。如果登录时出现任何错误，也应收到消息。要添加这些元素，请发送以下提示：

Update the dashboard coponent to show a welcome message to users if they have no trips. If there is an error receiving trips, display the image with a message that's quirky and apologetic.

6. 请审核并接受建议的代码修改。
7. 现在让我们从 API 获取用户行程。向 Copilot Edits 发送以下提示：

Update to fetch trips from the flask api.

8. 请审核并接受建议的代码更改，然后保存文件。
9. 返回浏览器并刷新页面。
10. 登录测试新功能。您应该会看到您的行程记录、欢迎信息或一条有趣且略显怪异的错误信息。请尝试测试所有三种情况。
11. 验证这些更改是否有效后（在调试出出现的任何错误后），将更改提交到存储库。

一旦这部分功能正常，我们就快要成功了！

步骤 5：启用行程管理

现在我们需要添加用户管理行程的功能。为此，我们首先需要创建一个新表单，允许用户添加行程并将其保存到仪表盘。然后，我们需要向路由发送一个 POST 请求/trips/new。

1. 打开终端并安装必要的依赖项。

npm install dayjs @mui/x-date-pickers

2. 打开 Copilot Edits 并向其发送以下提示。

Create NewTripForm with destination and date inputs. Use the dayjs library.

3. 请审核并接受建议的代码更改，然后保存文件。 
4. 返回浏览器并刷新页面。 
5. 点击“添加新行程”按钮并测试表单。 
6. 提交更改。

1. 向副驾驶编辑发送以下提示。 

Create ItineraryDay and TimeSlot components for managing daily activities with editing capabilities.

2. 请审核并接受建议的代码更改，然后保存文件。
3. 向 Copilot 发送以下提示，鼓励用户提供行程安排。

If the user doesn't have an itinerary for their trip, prompt them to add an itinerary. Also include a default itinerary template.

4. 请审核并接受建议的代码更改，然后保存文件。
5. 返回浏览器并刷新页面。
6. 点击行程的“查看详情” ，然后点击“行程安排”选项卡。您应该会看到一个提示，鼓励您为此次行程创建行程。尝试添加行程，并确认应用是否提供了默认模板。
7. 返回 Copilot 编辑页面，并发送以下提示，以便用户能够编辑他们的行程。

Allow users to edit their trip details.

8. 请审核并接受建议的代码更改，然后保存文件。
9. 返回浏览器并刷新页面。
10. 尝试编辑行程并验证是否可以更改详细信息。
11. 提交更改。

最后，我们再添加用户添加住宿地点和出行方式等附加信息的功能。

1. 请将以下提示发送给 Copilot Edits。

Allow users to add their accommodations and transportation details to the Overview page.

2. 请审核并接受建议的代码更改，然后保存文件。
3. 返回浏览器，刷新页面，然后测试这项新功能
4. 别忘了提交你的更改！

下一步

太棒了！多亏了 GitHub Copilot，你才能在短时间内构建出一个功能齐全的应用程序 MVP。这就是一款真正好用的 AI 工具的强大之处。

别忘了，您可以免费使用 GitHub Copilot！如果您有任何疑问，请在GitHub 社区论坛发帖，我们一定会回复。敬请期待本系列的下一部分，我们将使用我们创建的这个 API 构建一个完整的应用程序。 

祝您编程愉快！