利用“腾讯云+遗忘算法API” 打造自己的闪卡工具

做了一个小Demo，演示如何利用“腾讯云CloudBase”与“拾忆笔记遗忘算法API” 用不到300行代码做一个简单的闪卡小工具。

具备以下功能：
1）Vue单页面程序，数据云端存储，支持多端访问
2）可定制性强，改造潜力大（其实就是功能简陋…

演示：flashcard

源码：github

第一步：后端配置

后端仅用于存储数据，这里使用了免费的腾讯云Cloudbase，也可以采用其它后端~

1. 注册腾讯云，并在“云开发 Cloudbase”中创建一个新环境：

   环境模板选择“空模板”即可，环境名称任意，记得勾选“开启免费资源”
   

   创建完毕后，在“登陆授权”设置中打开"匿名登陆"与“未登陆”功能：

   

2. 在“数据库”中点击“新建集合”，创建一个名为“items”的集合：
   

   设置集合权限为 “所有用户可读，仅创建者及管理员可写”

   

第二步：关键代码分析

这个html文件中包含了全部代码：https://github.com/myaisv/flashcard/blob/main/flashcard.html

1.初始化

在页面打开时连接服务器：

const backend = tcb.init({
  env: "test-4gn3sgio58b74112" //你的环境ID
});
//登陆后端
await backend.auth().signInAnonymously()

注意将“环境ID”配置为你自己的环境ID，这个ID可以在“环境总览”中找到：

随后从items集合中查询出所有卡片内容，并按next_rev_at字段（下次复习时间）过滤，得到当前应复习的卡片：

//查询所有卡片
const db = backend.database()
const collection = db.collection("items")
this.collection = collection
const {data} = await collection.get()
this.all_items = data

//过滤今日需要复习内容
const now = new Date().getTime()
this.rev_list = this.all_items.filter(i => i.next_rev_at < now)
console.log("卡片总数:", this.all_items.length, "今日复习:", this.rev_list.length)

2.添加新卡片

卡片对象的字段定义如下：

字段	含义
front	卡片正面内容
back	卡片背面内容
last_rev_at	上次复习日期
next_rev_at	下次复习日期
history	复习历史数组

在创建新的卡片时，合理情况是：

last_rev_at 设置为卡片的学习日期，如果是新学的卡片，则应设置为当前时刻。
next_rev_at 设置为下一次复习的日期，一般可设置为1天后。
history 初始化为空数组。该数组的元素格式为[时间间隔，记忆保留率]

这里为了演示方便，将last_rev_at 设置为了昨天，将next_rev_at 设置为当前时刻。

//创建新的条目
const item = {
  "front": this.new_front,
  "back": this.new_back,
  "history": [],
  //为方便演示，将next_rev_at设置为当前时刻,last_rev_at设置为昨天
  "last_rev_at": new Date().getTime() - ONE_DAY_MS,
  "next_rev_at": new Date().getTime()
}

//存储到数据库
this.is_saving = true
const result = await this.collection.add(item)
item._id = result.id
this.all_items.push(item)

3.复习卡片

在复习时定义了三个复习按钮，分别表示当前的记忆保留率为30%、60%、80%，你也可以根据需要补充更多的按钮，提供更精细的评分选项：

<div v-show="isAnswerShowing" class="mark_btn_wrapper">
  <van-button type="warning" @click="onMark(0.3)">忘记</van-button>
  <van-button type="default" @click="onMark(0.6)">记得</van-button>
  <van-button type="primary" @click="onMark(0.8)">熟悉</van-button>
</div>

在复习时的计算逻辑是：

1）用当前时刻减去上次复习时间，得到”间隔时间“

//计算复习间隔天数
const now = new Date().getTime()
const real_interval = (now - item.last_rev_at) / ONE_DAY_MS

2）结合评分按钮代表的记忆保留率，构成一个复习日志：

const new_log = [real_interval, recall]

3）将“所有的复习日志”（hisotry）与“目标记忆保留率” 作为参数传入遗忘算法API

item.history.push(new_log)
const the_form = {
  "logs": item.history,
  "aim_recall": 0.8,
}
const response = await axios.post("https://srapi.huacishu.com/m1/next_interval", the_form)
const interval_day = response.data.interval

目标记忆保留率（aim_recall ）反应了对记忆程度的要求，其含义是：假定API调用时刻的记忆保留率为100% （即1.0），返回记忆率降低到该值时所经过的时间；aim_recall为0.8，即表示返回记忆保留率降低到80%时所经过的时间。aim_recall数值越小，返回的时间间隔越长。如果目标是对记忆材料保持较高的熟悉度，就应输入比较大的值（比如0.8）；如果目标只是”混个眼熟“，那么就可以输入较小的值，例如0.4。

API返回内容中的"interval_day" 即为计算下次的复习间隔，根据这个间隔更新next_rev_at、last_rev_at 字段，然后更新数据库内容。

//更新卡片复习信息
item.next_rev_at = now + interval_day * ONE_DAY_MS
item.last_rev_at = now

//更新到数据库
await this.collection.doc(item._id).update({
  "history": item.history,
  "last_rev_at": item.last_rev_at,
  "next_rev_at": item.next_rev_at
})

关于API的更多细节可参考开发文档：拾忆笔记遗忘算法API

第三步：本地测试与线上部署

安装cloudbase命令行工具

npm i -g @cloudbase/cli

在终端中执行以下命令登录账户

tcb login

调试

在index.html目录下执行：

npx serve

然后打开http://localhost:5000/进行本地调试

npm i -g @cloudbase/cli

部署

执行“tcb hosting:deploy index.html -e 你的环境ID”，例如：

tcb hosting:deploy index.html -e test-4gn3sgio58b74112

部署后会显示访问链接