-- “捕捉稍纵即逝的灵感”
- 简介
- 组件
- 服务器部署指南
- 浏览器插件部署指南
- 注意事项
“汤圆笔记”是笔者(waychan23@github)于2017年出于个人需要,利用当时新学习的 NodeJs、MongoDB,OAuth2 等技术开发的一个笔记管理应用,包括 Chrome 浏览器插件及配套的服务器。
“捕捉稍纵即逝的灵感”是笔者开发汤圆笔记的动机。如果读者您跟我一样,喜欢在浏览器上阅读各种文档,那么您很可能也经常在面对某一段话、某一个词给了你灵感的时候,会有一种冲动——“记笔记”。我们想就在这段话、这个词旁边写下我们的理解、我们的思考或者是我们的困惑,就像上学的时候,我们会忍不住在课本上划线标记、在纸张空白处写下我们自己的思考。
这种记笔记的冲动,强烈却短暂,常常在我们在考虑记在什么地方,或者当我们终于决定记在某个外部的笔记软件上、并打开软件时,我们已经没有了这种冲动;就算成功地在某个软件记录下来了,当你阅读量比较大时,频繁的切换浏览器和笔记软件,也会慢慢磨灭我们的耐心。就像我们不能在纸书上动笔,例如书是借的,我们不得不另外找个本子,把这些灵感记录下来,而我们可能最终因为找本子和笔,磨灭了我们记录的热情。
灵感,很多时候是零散的,并不能马上被结构化并在我们的知识体系中找到安放它的位置,它很可能需要在较长的时间内处于这种零散的状态。使用“外置”的笔记本来存储这样零散的信息,显得很无力。我们会纠结于将这些信息点安放在哪个文件夹、是一个文档记录所有的信息点还是每个文档记录一个信息点、每个信息点怎么跟看到的它所在网页关联起来、怎么快速找到这个信息点在网页中的位置、这个网页中还有哪些相关的信息点、还有哪些来自其他网页的信息点跟它相关?我们对于思考、对于记录的热情就是这样被磨灭在这样的纠结中。
对于解决上面提到的问题,也许,汤圆笔记就是我们需要的。
汤圆笔记浏览器插件,可以让你在任意网页上发现有趣的文字的1秒钟内开始记录你的灵感,还能帮你记住文字所在的网页和在网页中位置。更方便的是,你还可以在任意页面上打开笔记列表对当前网页的、其他网页记过的笔记进行浏览、搜索并直接跳到笔记所在的页面并定位到标记所在的位置。汤圆笔记不仅仅是浏览器插件,它提供了一个基于OAuth2认证授权的笔记资源管理服务器。有需要的开发者可以自行开发客户端接入。
-
关于名称,“汤圆笔记”这个名称是一个灵感,如有雷同,纯属巧合。"Docgaga" 是另外一个灵感,意为“文档狂人”,笔者取之作为汤圆笔记代码库的名称。
-
浏览器插件演示视频:https://v.qq.com/x/page/t0554z80wdv.html
-
浏览器插件演示截图:
- 汤圆笔记认证授权与资源服务器
- 代码库:https://github.com/waychan23/docgaga-server
- 功能特性:
- 注册服务
- 登录服务
- 找回密码服务
- 笔记管理服务
- 关键词管理服务
- OAuth2 认证授权
- 汤圆笔记浏览器插件应用服务器
- 代码库:https://github.com/waychan23/docgaga-crx-server
- 功能特性:
- 为浏览器插件提供笔记管理API
- 为浏览器插件提供关键词管理API
- 汤圆笔记 Chrome 浏览器插件
- 代码库:https://github.com/waychan23/docgaga-crx
- 功能特性:
- 标注网页上的文字
- 为网页上的文字做注解
- 创建一个与网页关联的笔记
- 在任意网页上查看笔记列表,笔记详情,编辑,删除笔记
- 从笔记列表、笔记详情跳转到指定笔记所在页面和标注的位置
- 支持配置使用该插件的网页/网站黑白名单
- 支持配置笔记列表随页面自动打开、加载
- 支持在当前网页上临时/永久关闭该插件
为了方便部署,汤圆笔记提供了基于 docker stack 的整栈部署方案,可以实现一键部署。
-
Docker stack 部署组件清单:
- docgaga-server:0.0.1:需要从 Git 代码库构建
- docgaga-crx-server:0.0.1:需要从 Git 代码库构建
- mongo:3.6.15
- nginx:latest
- mongo-express:latest:MongoDB Web管理工具(可选,默认关闭)
-
准备材料
- 1个域名以及对应的 SSL 证书(Chrome强制要求插件使用HTTPS请求服务器资源),域名可以指向局域网地址或公网地址
- Docker 环境(笔者使用的是 18.09.7)
- 一定的磁盘空间供 MongoDB 存储数据
-
部署步骤
- 创建一个汤圆笔记专用的工作目录(下文用 $WORKDIR 指代)
- 拉取 docgaga-server, docgaga-crx-server, docgaga-devops 放在 $WORKDIR 下
cd $WORKDIR git clone https://github.com/waychan23/docgaga-server git clone https://github.com/waychan23/docgaga-crx-server git clone https://github.com/waychan23/docgaga-devops
- 构建 docgaga-server Docker 镜像
cd $WORKDIR/docgaga-server docker build . -t docgaga-server:0.0.1
- 构建 docgaga-crx-server Docker 镜像
cd $WORKDIR/docgaga-crx-server docker build . -t docgaga-crx-server:0.0.1
- 编辑运行配置
cd $WORKDIR/docgaga-devops # 打开 conf/docker-server/runtime-conf.js,编辑域名、端口、秘钥、数据库连接等信息 # 打开 conf/docker-crx-server/runtime-conf.js,编辑域名、端口、秘钥、数据库连接等信息 # 打开 nginx.conf,编辑域名、证书等 # 打开 stack.yaml,编辑数据库初始化账号等参数,!!!注意修改 MongoDB 数据目录的挂在配置,将其挂在到主机上为它准备的持久化目录上
- 使用 docker stack 整栈部署
cd $WORKDIR/docgaga-devops docker stack deploy -c stack.yaml docgaga # 可以使用如下命令查看组件部署的进度和情况 docker stack ps docgaga # 如果部署成功,应该能在 docker stack ps 的输出中看到所有组件处于 Running 状态,并且能在 docker ps 中看到所有的组件对应的容器 # 如果部署出现问题
- 数据库索引初始化
本仓库的 init/db 目录下有两个 MongoDB JavaScript 脚本,第一次初始化 MongoDB 镜像时,会自动执行。如果使用已有的 MongoDB,请自行到数据库上执行这两个脚本。
- 服务器部署完成
-
所需环境: NodeJS 8+
-
步骤:
- 拉取 docgaga-crx 代码到工作目录(下文用 CRX_WORKDIR 指代)
cd $CRX_WORKDIR git clone https://github.com/waychan23/docgaga-crx
-
修改
src/js/conf/config.js
文件中的服务器配置 -
安装依赖并进行构建
cd $CRX_WORKDIR/docgaga-crx npm install npm run build # 如果是开发,可以使用 npm run watch,该命令会持续监控文件的修改,并自动重新构建
-
构建完成,$CRX_WORKDIR/docgaga-crx/build 即为插件的安装目录,该目录可以复制到其它位置
-
打开 Chrome 浏览器,打开插件管理页面,开启“开发者模式”,加载未打包(Unpack)目录,选择 $CRX_WORKDIR/docgaga-crx/build,确定即可
-
安装完成后,已打开的页面需要刷新才能加载汤圆笔记
-
温馨提示:该项目代码主体是2年半以前完成的,受笔者当时水平的限制,代码质量不高,如有意见或建议请在 Issue 中提出,也欢迎自行动手优化,甚至重写
-
开源之前的版本采集用 Redis 作为 Session 的存储,当时更多的是处于学习使用 Redis 的目的,所以在开源的版本中删除了 Redis 相关的使用,使用了本地内存作为 Session 存储,以简化部署。
-
开源之前的版本集成了阿里云的邮件和短信服务,在开源的版本中删除了这些第三方服务的依赖。目前在注册和找回密码的步骤,页面上显示发送的短信验证码并不会真的发送,只会在 docgaga-server 的控制台信息打印,可以使用 docker logs -f <docgaga-server容器ID> 查看。