1. 项目设置
5m

准备好了驾驶你的下一个任务了吗？

lunar rover drive

在这个以项目为重点的活动中，你将用到从我们的升空系列一二三部分中所学到的一切！

在继续之前，请确保你知道

  • 如何使用 和 构建查询
  • 如何使用useQuery来自

你还需要使用以下技术

  • NodeJS
  • React
  • React （路由概念）

如果你对这些技术很熟悉，那就太好了！你将能够继续在我们的学习平台上为太空猫探索者工作。

你将深入服务器端更新架构，将方法连接到 REST API，并实现. 你还将在客户端显示返回的数据，方法是向服务器发送.

这个项目从升空 III 结束的地方继续，但是如果你有能力的话，你当然可以直接跳进去！

到目前为止的应用程序...

Catstronauts 应用程序目前显示了一个学习轨迹列表。点击一个轨迹会显示有关该轨迹的更多详细信息，包括其模块列表。

你的任务是为该应用程序添加一个新页面，该页面显示该模块的内容，以及在学习轨迹的所有模块之间导航的方法，以便有抱负的猫航天员最终可以阅读、观看和学习他们需要的一切！

项目设置

本项目接着此部分继续第 3 部分升空结束的后续部分。如果您已完成该课程，可将您的代码用作起点。

注意：本实验可使用 JavaScript 和 TypeScript。继续进行前，请确认课件顶部您的选择语言。

如果您尚未完成课程，请使用以下命令克隆项目入门 repo

git clone https://github.com/apollographql/odyssey-lift-off-lab

项目结构

我们的项目是一个全栈应用程序，后端应用程序位于 server/目录中，而前端应用程序则位于 client/目录中。

您还将找到一个 final/文件夹，其中包含您完成此项目后的项目的最终状态。欢迎将其用作指南！

以下是文件结构

📦 odyssey-lift-off-lab
 ┣ 📂 client
 ┃ ┣ 📂 public
 ┃ ┣ 📂 src
 ┃ ┃ ┣ 📂 assets
 ┃ ┃ ┣ 📂 components
 ┃ ┃ ┣ 📂 containers
 ┃ ┃ ┣ 📂 pages
 ┃ ┃ ┣ 📂 utils
 ┃ ┃ ┣ 📄 index.js
 ┃ ┃ ┗ 📄 styles.js
 ┃ ┣ 📄 README.md
 ┃ ┣ 📄 package.json
 ┣ 📂 server
 ┃ ┣ 📂 src
 ┃ ┃ ┣ 📄 index.js
 ┃ ┃ ┣ 📄 schema.js
 ┃ ┣ 📄 README.md
 ┃ ┣ 📄 package.json
 ┣ 📂 final
 ┃ ┣ 📂 client
 ┃ ┣ 📂 server
 ┗ 📄 README.md

现在，在您最喜欢的 IDE 中打开代码库。

注意：本课程的范例使用 npm，但如果您愿意，也可以使用纱线。

让我们从服务器应用程序开始

在终端窗口中，导航到 repo 的 server目录，然后运行以下命令以安装依赖项并运行应用程序：

npm install && npm start

如果一切顺利，您将看到安装完成，并且控制台中会显示一条消息，指示服务器正在运行。

任务！

设置 Explorer

为测试我们 上的查询，我们可以在 在 studio.apollographql.com/sandbox 处打开。加载后，它应该连接到 https://127.0.0.1:4000。

任务！

让我们尝试一个 来获取曲目标题列表。复制下面的查询，将其粘贴到 Explorer 的 操作面板中，然后运行它。你应该在右侧的响应中获取一个曲目标题列表。

query getTrackTitles {
  tracksForHome {
    title
  }
}

你还可以通过手动输入或使用左侧边栏上的 + 按钮来逐个添加每个 ，自己构建 。

任务！

接下来，客户端应用程序。

在一个新的终端窗口中，导航到仓库的 client目录并运行以下命令来安装依赖项并启动应用程序：

npm install && npm start

控制台应该会显示大量输出，以及一个指向运行的应用程序的链接 localhost:3000。你可以 localhost:3000在浏览器中导航，看看我们的主页，其中显示了包含音轨的主页。

任务！

如果你单击卡片，你将看到音轨页面，其中包含有关音轨的更多信息。尝试单击 开始音轨按钮。会发生什么？它会带你到一个完全空白的页面！

你的任务是将此空白页面转变为功能齐全的模块页面。好运！

下一个