Matrix 首页推荐 

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。 

文章代表作者个人观点,少数派仅对标题和排版略作修改。


相信经常健身的朋友们都有记录打卡的习惯,虽然有很多健身类的APP都提供了这类功能,但有时候在电脑端更方便进行回顾和复盘。如果有一个工具既可以支持移动端和PC端同步,又有类似于日历看板的功能就好了,于是平时经常使用且日渐丰富强大的Notion映入眼帘。

今天我们就来一起通过 Notion 的各种能力从 0 开始实现一个健身记录看板。

注:本文不包含 Notion 的基础使用教学,您至少需要了解 Notion 各种区块的使用方式。

记录打卡

需求

首先来整理一下我所需要的功能:

  • 可以方便地记录每一次锻炼的部位、动作、次数和组数
  • 将每月的健身记录体现在日历上,方便查看训练的频率和间隔时间
  • 生成月度打卡总结,统计月打卡次数
  • 搜索历史训练内容
  • 里程碑记录

Notion 最具特色的数据库(database)功能恰好可以满足以上需求。

数据库

Notion 中的数据库是页面的集合,我们在数据库中新建的每一个打卡记录既是一条数据,也是一个子页面。数据库有很多视图模式,有日历、表格、看板、画廊、时间轴、图表,多维度满足不同使用场景。

我们先创建一个日历数据库。

模板

点击新建按钮会创建一个子页面,可以添加各种属性或是区块。为了方便用户能够根据自己的习惯快速预设一些内容,数据库提供了模版功能。

为训练通用的数据如时间、训练部位、体重、消耗卡路里、臂围等新增属性进行记录,由于每次训练会有许多动作和组,我们继续在子页面中新建数据库统计。

配置训练部位
配置常用动作

加入常用的训练动作、重量等属性并预设适合自己的选项方便快速选取。将刚才编辑好的模版设为默认,否则新建的是空页面。如此一个快捷的打卡页就做好了。

通过按钮快捷创建

模版可以新增多个,你可以将力量训练按部位进一步拆分,或是根据运动的类型如骑行、跑步、打球分别创建。默认模版只能选取一个,当模版较多的时候通过下拉选取有些许不方便,我们可以利用可执行操作的按钮为各种类型模版设置创建入口。

将需要展示的属性勾选,使日历的展示更加清晰。

试一试

接下来我们一起来试一下效果吧!

PC 端操作
手机端操作

问题

到这一步我们基本完成了记录的功能,也可以直观地在日历上查看自己的运动频次。然而当我尝试搜索某一个训练动作想看一下过往使用的重量时却发现数据库非文本类型(比如单选、多选)的属性内容无法被搜索到。要是为了满足查询的需要改成手动输入就太低效了,坚持使用单选的话就要想办法获取数据库中的选项内容再生成文本供检索使用,要实现这种功能,要么爬虫,要么通过 API 进行对应操作。好在 Notion 提供了 Notion API,通过集成与 Notion 用户关联,进而获取和更新页面内容。

Notion API

创建集成

在使用 Notion API 之前,需要先创建集成,你可以理解为我们创建了一个机器人,通过赋予它访问页面的权限来帮助我们改写页面。

打开集成管理页面,新建集成并且将密钥保存下来。

添加集成

回到我们想要操作的主页面为其添加权限,这样我们才可以通过 API 访问到页面的内容。

下载样例

官方提供了 curl 命令行和 JavaScript SDK 两种方法来创建、获取及修改页面,本文采用 JavaScript SDK 的方式来实现各种功能。

首先在你的电脑上安装 npm 以及 Node.js,然后将 SDK 项目下载下来。

git clone https://github.com/makenotion/notion-sdk-js.git

SDK 目录结构

项目下的 examples 文件夹下提供了多个样例,其中 web-form-with-express 项目运行起来后是一个 web 表单网页,通过它你可以更加直观的了解到 Notion API 是怎样工作的,具体操作可以参阅文档

表单中的 Page ID 和 DB ID,它们代表页面的 ID 和数据库的 ID,只有明确了二者之一才能通过 Notion API 操作对应的页面和数据库。

找到页面 ID 和数据库 ID

如何找到页面 ID?很简单。看浏览器的地址栏,加粗的部分即是。https://www.notion.so/workspace/1641c710114c80c8a8dbeb94bc59e78a

获取数据库 ID 的话则可以通过拷贝视图链接,同样是加粗的部分。

获取的链接示例:https://www.notion.so/xxxxx/1651c710114c806ab333f87ed65a612f?v=91bba66630634d1dad0692770b93db7d&pvs=4

代码实现

Notion 提供了诸多 API 方便开发者使用,涵盖了有关页面、区块、数据库等各种增删改查的操作,并且贴心地为常用的功能提供了完整的代码示例,简单浏览过后足以了解该怎么使用。

接下来我们就利用它一步一步实现功能。回顾下我们的需求,我们需要访问到每一次训练创建的数据库,读取训练相关的属性,然后将内容写入到当前页面以供后续搜索。

使用 Notion API 的遍历方法,我们可以获取到某一数据库中所有子页面信息,由于每一次打卡页面都会创建一个新的数据库,因此我们首先需要遍历主数据库获取到子页面中的数据库 ID,进而对目标数据库做进一步操作。

你可以基于上面的示例代码进行改造,也可以创建一个新的项目——新建文件夹,在根目录下执行npm init && npm install @notionhq/client 生成package.json文件并安装Notion API客户端,新建index.js文件开始编写代码。

常用的数据操作相关的 API 都可以在官方文档中找到。

我们先来遍历数据库获取页面 ID:

遍历数据库

执行执行node index.js

得到的返回体数据结构大致如下。

"results": [
    {
      "object": "page",
      "id": "59833787-2cf9-4fdf-8782-e53db20768a5",
      "created_time": "2022-03-01T19:05:00.000Z",
      "last_edited_time": "2022-07-06T20:25:00.000Z",
      "created_by": {
        "object": "user",
        "id": "ee5f0f84-409a-440f-983a-a5315961c6e4"
      },
      "last_edited_by": {
        "object": "user",
        "id": "0c3e9826-b8f7-4f73-927d-2caaf86f1103"
      },
    },
    ...
}

拿着获取到的页面 ID 读取页面上的所有区块:

读取区块

获取到最终需要的数据库 ID 一切就好办了。

编辑生成小结

最终,执行过脚本的页面结果如图:

也可以在 Notion 中按搜索到记录了。

Github Actions

到这一步我们实现了生成每日总结的脚本,但是每次需要手动执行脚本,如果能把脚本托管起来,定时自动执行就好了。作为程序员的老朋友,Github 不就免费送给我们一个这样的工具吗?

GitHub Actions 是一个持续集成和持续交付 (CI/CD) 平台,可以让你自动化构建、测试和部署流程。我们需要做的很简单——帮我们定时运行脚本。

工作流配置

将代码上传到 Github 上,并且创建一个自动执行的工作流文件。

新增工作流配置

这段配置有三个关键点:

首先是定时任务执行时间,通过 cron 表达式来设置,不知道怎么配没关系,我找到了一个cron 在线工具,简单操作一下,原理非常直观易懂。

配置环境变量

第二个是我们之前直接将集成秘钥和主数据库 ID 暴露在代码中,显然不够安全,这里我们通过 github 的 secret 进行管理并作为环境变量使用。

管理环境变量

改造一下我们之前的代码。

最后就是最重要的 node 命令——安装依赖并运行脚本。

配置完成后,记得点击右上角提交上去,之后当定时节点到来时即可触发工作流执行代码。

工作流自动执行记录

结语

经过了一番折腾,我们终于实现了这个相对定制化的打卡功能,当然你可以在此基础上做进一步的优化和改造,例如增加完成小结的勾选属性,在查找页面时过滤掉已经操作过的打卡记录,增加不同的数据库视图模式,或是利用双向关联关系增加月度统计面板以及里程碑记录。Notion 的强大为我们提供了各种的可能,自己动手的体验也是很美妙的。

> 关注 少数派小红书,感受精彩数字生活 🍃

> 实用、好用的 正版软件,少数派为你呈现 🚀