如何使用Notion API用JavaScript创建一个测验

Notion是一个具有多种功能的应用程序，用于组织各种内容，从笔记到日历和提醒事项。在上一篇文章《Notion API及其JavaScript SDK入门》中，我们深入探讨了如何使用Notion的API，并创建了一个与之交互的小界面。本文将探讨Notion API的另一个用例：创建一个JavaScript测验。

虽然跟随这篇文章不需要任何知识（我会提供所有必要的步骤），但我们将处理前端和后端代码，因为涉及到一些Node.js和Express的设置，所以需要一些JavaScript技能。

JavaScript测验项目的设置

我们将把我们的设置分成两个部分。在第一部分中，我们将通过Notion方面的必要设置，在第二部分中，我们将使用我们的代码。

要跟上进度，你需要一个Notion账户（下面会有更多介绍），以及在你的机器上安装一个最新的Node副本。与以往一样，本教程的最终代码可以在GitHub上找到。

Notion设置

如果你还没有一个Notion账户，请通过以下链接创建一个。创建账户并登录后，选择 "添加页面"创建一个新的页面，并给它起个名字。在本教程中，我们将使用一个Table 数据库。尽管它不是建立一个测验的理想数据库，但它是我们用Notion所能实现的最接近的数据库。

向表中插入信息

现在我们有了空的Table ，我们需要弄清楚如何正确地将我们的信息插入其中。
我们为我们的测验准备的模式是如下。

{
  "1": {
    "Question": "Which is the purpose of JavaScript?",
    "Answers": {
      "1": "To style HTML Pages",
      "2": "To add interactivity to HTML pages",
      "3": "To perform server side scripting operations"
    },
    "Correct": "To add interactivy to HTML pages"
  },
  "2": {
    "Question": "To insert a JavaScript into an HTML page, which tag is used?",
    "Answers": {
      "1": "<script='java'>",
      "2": "<javascript>",
      "3": "<script>"
    },
    "Correct": "<script>"
  },
  "3": {
    "Question": "Which of the following is correct to write “Hello World” on the web page?",
    "Answers": {
      "1": "print('Hello World')",
      "2": "document.write('Hello World')",
      "3": "response.write('Hello World')"
    },
    "Correct": "document.write('Hello World')"
  }
}

Notion并不是为这种类型的数据库而建立的，所以我们需要对它进行创造性的处理!💡 所以我们的Question 列将只是一个Title （这很好用），我们的Correct 列将是Text （这也是按计划进行的）。不过，对于我们的多个选项，我们需要做一些不同的事情我的方法是使用Multi-select 字段类型，这样我就可以在同一个单元格中写入多个结果（我们会看到从这里面检索出来的数据是什么样子）。因此，我们的Table ，最终结果应该如下图所示。

创建我们的Notion API集成

现在我们需要去Notion API网站创建我们的集成。按右上角的My Integrations按钮，然后点击Create new integration。我们需要填写我们的标题，并确保选择我们的关联工作区（它将被默认选择，但要确保这一点）。如果我们按提交，我们将被引导到一个新的页面，上面有一个内部集成令牌（我们将在我们的代码中使用这个令牌），并有两个选项框供我们在哪里使用我们的集成。我们不需要在这个页面上做任何事情，只是复制我们的令牌并按下保存更改。

现在我们回到我们的Notion工作区。在我们新创建的Notion数据库中，我们要按共享，然后按邀请。然后我们就可以选择我们新创建的集成。如果我们选择它并按下邀请，我们的Notion设置就完成了。做得很好!🙌

代码设置

对于我们的代码设置，我们将使用一个Notion模板库（然后我们可以在任何Notion API项目中使用！），它已经有了与Notion的API一起工作所需的初始代码。这个仓库可以在这里找到，所以一定要fork它并克隆它，以配合我们的项目。如果你对所有代码的作用感兴趣，请参考 "Notion API和它的JavaScript SDK入门"，因为我们对每一个代码的细节都做了详细的介绍（该版本也有一个README ，应该能解释它的作用！）。

安装依赖项

在分叉和克隆我们的Notion模板 repo之后，我们的第一步是安装我们的依赖，所以确保在我们的终端上运行yarn 或npm install 在文件夹内。在这个项目中，我们有三个依赖项：@notionhq/client、dotenv和Express。我们将使用dotenv来管理我们的变量并保持它们的安全（比如我们在集成上看到的那个），而Express则为我们的应用程序创建后端和服务器。

为了用dotenv管理我们的变量，在我们项目的根部创建一个.env 文件并在那里粘贴以下内容。

NOTION_API_KEY = YOUR_TOKEN_HERE
NOTION_API_DATABASE = YOUR_DATABASE_ID_HERE

我们的NOTION_API_KEY 是我们可以在我们的集成中找到的关键，我们的NOTION_API_DATABASE 可以通过进入创建的Notion页面并在浏览器的URL栏中找到。它在你的工作空间名称（如果我们有的话）和斜线（myworkspace/ ）之后，问号（? ）之前。ID的长度为32个字符，包含数字和字母。

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|

如果我们担心Notion的API密钥在我们的 repo里面的文件上，注意在我们的.gitignore ，我们有.env 文件在那里；.gitignore 允许我们把不同的文件/文件夹名称放在里面，这意味着当我们推送代码时，这些文件/文件夹不会被添加到我们的 repo中。

现在我们有了最初的仓库，并且从Notion获得了所需的证书，我们就可以开始做我们的测验了!

抓取JavaScript测验数据

我们首先应该检查我们是否成功连接到Notion数据库，所以我们将导航到我们的.index.js 文件并记录我们的reponse 变量（看到我们如何从我们的.env 文件中抓取我们的databaseId 并在我们的数据库查询中使用它？）

如果我们运行yarn start ，我们应该在终端上看到类似下面的屏幕截图。

在我们的终端上看到这个意味着我们已经正确地连接到我们的Notion数据库，我们现在可以获得我们所需要的数据。我们的getDatabase 函数将看起来像这样。

exports.getDatabase = async function () {
  const response = await notion.databases.query({ database_id: databaseId });

  const responseResults = response.results.map((page) => {
    return {
      id: page.id,
      question: page.properties.Question.title[0].plain_text,
      answers: page.properties.Answers.multi_select,
      correct: page.properties.Correct.rich_text[0].plain_text,
    };
  });

  return responseResults;
};

通过responseResults ，我们把我们的results （与我们数据库中的条目相匹配）映射过来，我们把不同属性的路径映射到我们选择的名字上（在这种情况下，id,question,answers 和correct ）。注意到对象的路径是多么具体。这是设计好的，这意味着，在开发和使用你自己的数据库时，你应该不断地调查返回的属性，直到你找到你要找的信息（这真的是一个试验和错误的问题）。

有了这段新代码，我们几乎是在调用我们的API，挑选我们想在代码中使用的属性，这意味着我们已经准备好在我们的界面上使用它们了

在浏览器中显示我们的数据

让我们从处理我们的HTML和CSS开始，因为它们是非常直接的！我们不会对HTML和CSS做任何改动。我们不会对模板中的HTML做任何改动，在我们的style.css ，我们可以在现有的代码下面粘贴下面的代码。

.questionContainer {
  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 10px;
}

.numberElement {
  margin: 0px auto 10px;

  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.question {
  margin: 0px auto 40px;
}

.answersDiv {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.answerOption {
  padding: 20px;
  margin: 0px;

  font-size: 18px;
  text-align: center;

  cursor: pointer;

  border: 1px solid rgb(42, 43, 44);
  border-radius: 40px;
}

我们现在还看不到这些风格上的变化，但我们现在可以把注意力放在功能上，这是本教程中更重要的部分。

如果我们现在进入public 文件夹内的main.js 文件，我们会看到我们已经在用getDataFromBackend 函数从后端抓取我们的数据。如果你对此感到困惑，"Notion API及其JavaScript SDK入门"有一个较长的解释，但基本上在我们的server.js ，我们创建了一个获取数据库的路由，而在getDataFromBackend ，我们正在为这个路由创建一个fetch ，它将为我们获取数据。

请注意，在addData ，我们已经有了const data = await getDataFromBackend(); 。这意味着我们已经准备好开始处理我们的数据了，我们可以实际检查一下！log 这个data 变量，我们应该在控制台看到我们的数据库条目的数组。

继续阅读：在SitePoint上使用Notion API来创建一个测验。