感动!繠䴧大人为了写学校作业还特地做了一个网页!

Author: R.W.Flurando

Tags: 作业, markdown, browser

场景

学校老师接受电子版或打印版作业,不想手写,多数时间是碎片化拿着手机度过,无法用电脑完整的做完作业。

需求

  1. 在手机上也能方便的写作业
  2. 手机和电脑的作业进度可以同步
  3. 手机上可直接导出PDF
  4. 在导出PDF前就能预览效果,如数学公式。

策略

手机和电脑都要能用,那么最好是PWA,网页原生应用,说白了就是对手机屏幕优化过布局的网页。

作业进度要同步,肯定需要数据库,同步+数据库+个人项目=PouchDB/CouchDB组合。

可直接导出PDF,可以用html2pdf.js来做,反正网页本来就是html。

导出前能预览,我们用markdown写作业,实时的用commonmark.js或marked.js渲染出来并在一边显示,数学公式就让mathJax渲染。

调研

注意,以上策略是根据个人经验和大量搜索得出的解决方案,并不是一拍大腿就晓得的。

至于为什么不另起炉灶,纯属我水平有限,因此给出的解决方案是我自己投入一些时间就比较可能实现的,而不是最好的或最快速的。

经过查阅文档,我找到了相关示例,确认了这些库的的确确能达到我的需求。

开动

确认方向后,需要将这些库组合到一起。

幸运的是,我本来就有一个fork可用,那是一个运行在浏览器的极简markdown编辑器,包含实时渲染功能。

于是我基于它开始了再一次的加工。

首先,我对着mathJax的文档教程给实时渲染添加了对数学公式的处理。

然后,我添加了几个按钮并修改了本地缓存的内容,这次需要额外存储文件名和远程数据库链接。

继而,我给一个按钮添加了将预览区下载为PDF的句柄。

接着,我按PouchDB的说明写出本地缓存与PouchDB的交互,用文件名当成id。

随即,我做了一些额外的修饰,比如点击文件名可重命名等等。

最后,我进行了一些检查。

到此为止,开发就告一段落了。大多数功能都测试过,除了和远程数据库的互动(拉取/推送)完全没有验证过。

主要是这个远程测试需要服务器,而我手上还没有可以长期跑CouchDB服务的机器,我又懒得在没有作业要做的假期为了测试这个并不急用的功能而专门改手上机器的配置。

因此我只做了可用性推理,比如链接用 https://username:password@domain:port/dbname ,机器配置反代服务和CouchDB并对我的Github Page域名启用CORS等等。

成果

就这么东抄抄西抄抄,缝合胶粘,最后成果请前往这个项目的Github Page查看。

目前除了已经提过的远程同步功能没有经过测试外所有功能都被我本人测试过,且本项目除了初始根项目据原作者说使用了AI外,我提交的代码均为一个字母一个字母手敲的。

欢迎大家使用,也希望想在浏览器里写作业的同需们参与到开发中来,区域性渲染、本地局域网同步、多人协同编辑、AI助手等等都是我想用的功能,可惜完全不知道怎么下手。