发布于

OmniReader 介绍

作者
  • avatar
    名称
    宋元平
    Twitter

背景

在过去的这个假期，我终于有了一个足够长的学校假期，可以开始考虑做一个属于我自己的有趣副业项目了！在连续两个学期学习了高阶计算机科学课程之后，我也很好奇我的技术能力是否已经达到了可以真正创造出一些有用的东西的水平……首先是对我自己有用，然后希望能对更多人有用。

我知道我想创建一个 Web 应用，因为我希望我所有的朋友都能使用我的产品，无论他们用的是 iPhone 还是 Android。另外，我一直听到人们谈论一个叫做 React 的框架（我最终没有使用它 XD），它似乎正在风靡全球。

我很幸运地在网上找到了非常有用的教育材料。这些材料 настолько好，以至于我会向任何想开始 Web 开发的人推荐斯坦福大学慷慨地在线发布的课程 CS 193X：Web 编程基础。课程幻灯片制作精良。它使用最新的方法教授 Web 开发的核心知识，我可以从个人经验中说，在学习了这门课程之后，我理解参考资料（MDN、框架文档等）再也没有问题了。

回想起来，与该课程内容同样有价值的是各种指向其他优秀 Web 开发资源的指针，以及一种普遍的鼓励，即让你自己去探索广阔的 Web 生态系统。关于 Web 的有趣东西实在太多了，任何一门课程都无法容纳。

我非常喜欢的一些其他资源包括：

动机

作为一名长期的学生和英语学习者（从幼儿园开始，已经15年多了），并且目睹了身边许多人为掌握一门外语而苦苦挣扎，我一直对创造能使外语学习更有效的工具抱有浓厚的兴趣。

我设计 OmniReader 是为了解决我认为外语学习中的一个痛点：用外语阅读是提高熟练程度的绝佳方式。只要材料有趣，阅读既引人入胜又有效。然而，如果遇到一个不认识的单词，学习者就会面临一个严重的困境：要么停下来查字典，从而减少阅读乐趣，要么继续读下去，冒着错误猜测单词含义的风险。

在现实生活中，看到许多不认识的单词会让我不愿继续阅读小说，即使故事情节可能很好。（例如，我小学第一次读《哈利·波特》的经历）我记得当时很难一次集中注意力超过30分钟。不停地查字典实在太累了。

因此，一个能够轻松查阅词典的阅读环境对外语学习者来说将大有裨益。另一个重要的功能是单词卡，它能让学习者有针对性地练习他们最不熟悉的单词。

这些功能是 OmniReader 的核心。此外，还实现了从给定 URL 提取内容和多功能阅读器界面的功能，我们将在下一节中看到。

功能演示

本节将逐步演示 OmniReader 的功能。欢迎您访问 OReader.app 一起体验！

OReader 主页
  1. 第一张图片是 Web 应用的着陆页。用户可以在文本框中输入一段文字或一个 URL。如果是后者，内容会自动从 URL 中提取。提交按钮会跳转到阅读器视图，我们将在接下来看到。
OReader 阅读器视图
  1. 这是阅读器视图的截图。因为我们之前在文本框中输入了一篇关于英国脱欧的华尔街日报文章的 URL，所以我们在阅读器中找到了这篇文章，去除了导航、广告等内容。除了在右上角提供一些控制选项外，阅读器视图还允许用户划线标记可能希望查找的单词。浏览器会自动检测到这一点，并显示黄色按钮。如果用户点击此按钮，则会弹出词典视图，如下所示。
OReader 词典视图
  1. 词典模态框为所选单词提供英英释义。词性用颜色清晰标示。每个释义都是一个可展开的抽屉，点击后会显示用法示例。“英英释义？如果释义中有我不认识的单词怎么办？”有人可能会问。别担心！释义中的所有单词都是可以点击的。查找那个单词就像点击它一样简单！面包屑导航（未显示）提供了一种返回的方式。
OReader 添加到卡片组功能
  1. 想把你查过的单词保存下来以后再看吗？没问题！只需点击词典模态框右下角的“添加到卡片组”，该单词就会保存在你的账户下。切换到左侧导航栏中的“单词卡”界面，你就可以查看所有已保存的单词卡了！
OReader 注册界面
  1. 还没有账户？现在就提供一些基本信息来创建一个账户吧 xD！

技术细节

OmniReader 是使用 MEVN 技术栈创建的。即：MongoDB、Express.js、Vue.js 和 Node.js。后端技术的选择受到了 CS 193X 采用的方法的影响。我对前端框架没有特别的偏好，在 React 和 Vue 之间几乎是平分秋色的。最终，我选择了 Vue，因为它是一个较新的框架，而且我认为它会有“后发优势”，因为它观察了 React 的优缺点。

回想起来，这个决定是幸运的。我后来在暑期实习期间对 React 有了更深入的了解，发现 React 需要对 ES6 有更深的理解才能发挥作用，这意味着如果我一开始就使用 React，我的效率可能不会那么高。

Vue.js 前端是一个相当典型的 SPA（单页应用）。我使用了组件库 Vuetify 来获得我非常喜欢的 Material Design 外观和感觉。

Express 后端主要对 MongoDB 执行 CRUD 操作。此外，我努力将几个很酷的功能（以及以前的绊脚石）集成到应用程序中。其中包括会话（session）、密码学（cryptography）、TLS、ODM (Mongoose) 等。

未来工作

由于学校开学，我在 2019 年 1 月部署初始版本后暂时搁置了这个项目的工作。但我确实计划充实更多功能，因为我相信这个项目潜力巨大！我想要实现的功能包括：

  1. 增强型、类似 Quizlet 的单词卡界面，支持间隔学习。
  2. 文章库，用户可以检索以前查看过的文章。
  3. 词典中提供来自最新新闻源的单词用法示例。
  4. 能够上传各种文件格式（PDF、EPUB、Word 等）。
  5. 词汇测试
  6. 利用 (5) 来预测用户不认识的单词并自动显示释义。

结论

我们的 OmniReader 简要介绍到此结束。如果您有兴趣了解更多关于该应用程序的信息，或者想与我一起让它变得更好，请随时给我发邮件！

分享