双语web阅读器+书城设计与实现

背景：

前段日子心血来潮，突然想做个小说阅读器，带翻译功能的。

原因大概来之已久了，主要是我本人是一个超级大书虫，特别喜欢看网络小说、经典小说、名著、心理学等“有意思”的书。

从接触这类书籍开始，按短的算，我书龄大概已经有9年了，不知不觉已经完成无数类型的阅读，近来对网络小说尤其着迷。

许多年来一直在追起点小说（网络小说），然而兴趣是有限的，书籍也是有限的。不知不觉我的书架已经塞满了各种小说，一直往下滑能滑好久。

可能这就是书荒吧：随着上百本的小说过去，整个小说世界变的索然无味。无限流、系统流、开荒流、洪荒流、高智商型、反人类型、种田文、老爷爷文、龙傲天文、虐主文、扮猪吃虎文......等等类型的文章，现在一眼看过去就知道什么套路，后面可能怎么发展。于是随着惊喜渐渐减少，乐趣也在在减少。于是我就书荒了-_-! 现在想找一本能带给我智慧或者乐趣的感觉的书真的太难找了。

然后起点国际的出现让我看到了新的曙光！（当然起点国际的运营我们就不吐槽了，我们主要关注小说翻译）

除了看小说，我还喜欢看一些“能看懂的”英语文章。（大概是征服英语的感觉）

当英语和小说结合在一起，新的乐趣就出现了：又能看小说，又能学英语！小说套路还不太容易一眼看到头~

eg:

但是现在又出现了一个新的问题：what?有的句子和单词看不懂= =！这怎么办，起初我是一个一个的查的，但读书体验很差：

1.查单词很费时费事，很多时候你刚看到了“爽点”，结果一个单词不懂你要去查，那肯定能不查就不查了，但万一不得不查呢？就会很烦，很碍事，不方便。

2.各别单词不懂也就罢了，一个句子你要是都没看懂几句怎么办？看2个小时的小说，1个半小时都在查单词，很烦吧？

3.词不对意，很多单词放在句子里就不是那么一回事了，看几个国外的经典小说翻译你们就知道了，翻译其实是门艺术，是很难很高深的，有些翻译是真的经典，不是简单的一个词一个词连接起来就可以的。生硬的（机器）翻译会失去小说的美感，失去读书的快乐。这就不是你查单词能得到的了。

4.缺乏学习效果，毕竟如果只是为了看小说，还不如去看中文版。选择英文版本身也是为了能够学习英语，可除非一个单词经常出现，否则很难从小说里学到新的单词。总不能每次查一个单词都写一遍吧？于是这样顶多对英语阅读更加熟悉，对词汇的积累反而不如直接背单词。

于是根据以上需要，一款至少是能够在阅读器里现场给出翻译（不用再切APP查单词），并带有单词记录本，提醒复习等功能的APP/阅读器，就很符合我的需要了。

类似需求的知乎提问：

然后我就在APP市场上开始找我需要的这种双语阅读器，结果。。。

基本没有我需要的这种功能聚齐的app。

滴答双语阅读：翻译功能设计的不错，但界面和UI都惨不忍睹。且停止了更新，书城打不开，还不能导入本地书。但就体验来说，这个效果我已经比较满意了！让我用它我觉得我完全可以接受，基本功能齐全。所以这里单独列出来，做一个标杆！

网友评价也还是不错的：

Anyview阅读：目前是所有能用的双语阅读器里面最好用的了，可以说界面精美，功能齐全。然而，这是本主要为汉语小说服务的APP（实际就是一个阅读器加了一个翻译功能）。英语翻译（虽然能用但）只是装装样子——书城里面完全没见英语小说，且全是网络小说，一些经典英语名著、文学小说都没有。且翻译功能比较僵硬，完全的机器翻译。且翻译界面设计的很糟糕，不能自动分段翻译，且显示框只有底下一行真使用起来看着都很难受。更重要的是，不支持单个词的标注，翻译，查一个词只能get一种中文翻译，we->我们。不像滴答：important->ɪmˈpɔ:tnt  adj.重要的，骄傲的，大量的；本地翻译结果不满意还可以网络释义：连接有道词库给出大量例句，典例等。更别说单词句子存到单词本上来复习。

我需要它至少能达到这个效果：

TXT英语小说：只能看书城里的，有的你看，没的就别看了，这一下子就不能接受了。排除这点，整个APP勉强能用——且这个完全就是把一篇文章+其翻译整合在了一起，保证了比机器翻译更好的效果点赞，但这是不管你需要不需要翻译都会自动显示出来的。且完全的按段落翻译，体验起来比较死板——我想看这句的翻译得一直往后滑，找到相应的中文翻译，再在一整段里面找到当前这句话，看完了在往前滑找到刚才看的地方，万一没看好还得重新回去再看一遍——不能即时的在同一个页面里面翻译，这点真的很难受，体验比起滴答差远了。另外整个APP运行的时候有明显延迟。查句功能倒是值得点赞，不过也需要来回切页面，倒是每次查句都会在历史记录里显示很方便。书城上，虽然不全，但假如不挑食就想看个英语小说，基本够用，虽然分类，检索，历史这些体验起来还是很不方便。远远不如起点小说APP，在我不知道书名的时候，我都不知道该看什么书，书籍检索，推荐系统体验很差。

还有很多就不一一介绍了，诸如看小说学英语，云词英语，可可英语，免费小说-读书看小说学英语....不是功能不全就是体验特差，反正各种惨不忍睹，上面3个基本是我体验最好的阅读器了，哦，如果不是限制在英语翻译功能，大概起点小说APP，掌阅，QQ阅读什么的这些都会有不错的体验。

经过寻找、考察，结论就是：要不找个凑合的用，要不就别用了。

这怎么能行？据说所有程序猿都是偏执狂——要用就用最好的！！！于是，一个想法产生了：既然都不合适，那我自己做一个吧。

双语web阅读器+书城设计与实现：

嘛，想要开工，自然先要设计。

就过程上至少有市场分析（不需要了我就是市场，计划是自用），功能分析（常见的···），界面设计（制作产品设计图、交互图），技术选型，然后才写代码，测试。

需求功能分析：
————————————基本需求
基本阅读功能。
记忆阅读进度功能
字体，行距，页距，背景设置功能
（分页，排版功能）
（智能断章功能）（考虑服务器上实现？）
返回目录功能
书架管理（阅读、修改、上传、共享）
句翻译、词翻译功能（字典库数据库设计）（最好是分段对照阅读）
书签功能
单词/句本功能
————————————优化设计
搜索功能（书架/全局）
展示模式（列表、图墙模式，排序，浏览记录）
进度条功能
亮度进度条功能
自动滚屏翻页功能
阅读时间功能
英语朗读功能（+听书功能）
机器翻译（英汉）功能-goole
字体
翻页优化（左右，仿真，滚屏，音量键翻页等）


————————————扩展设计
账户管理（+数据库设计） （金币，签到，充值，消息等）
书城管理（+数据库设计）（爬虫，计划连接起点国际/粉丝网站，暂时没有版权问题）
下载功能
......

界面设计:

我一个程序员，搞艺术有点难，再者我考虑也是自用，感觉直接拿市场上比较流行的APP界面，交互效果，来作为我这边的产品设计结果就可以了。

主要关注的有两点：一个是阅读器本身要有优秀的体验效果，一个是翻译功能强大，简洁，符合我的需求。

第一点上可以直接参考很多APP：Android实现上比如起点APP，掌阅等等。HTML5实现上：http://dushu.xiaomi.com/#page=main&tab=0

这点上基本大家都一样，也没什么好讨论的。

第二点上，我想参考滴答双语阅读，我个人感觉它的翻译功能体验不错。手机上备一个，随时参考，随时调整。

技术选型：

移动端开发技术选型原则：轻量化、高性能、维护简单、快速开发。

就这个项目本身，无非是两种实现，一种原生Android开发nativeApp，一种现在的HTML+JS等前端的思维来实现webApp。

本来我考虑是原生Android来设计开发。正好我电脑上Android Studio都装好了，不需要麻烦的调环境。

不过转念一想，好像现在搞Android都烂大街了，再者我未来也不想去搞安卓开发（可能这是重点- -），虽然现在是心血来潮的做这个项目，但肯定也会花我一些时间和精力，如果能对我未来发展有帮助那自然是最好了？虽然我也没打算搞前端吧，不过比起搞安卓要好一点，而且我有基础，学习起来也不是很难。

不过现在好像安卓+JS设计模式更多了？无所谓，能不Android我就不安卓了。SO， GO  webAPP~

其实webAPP还是比较符合我的需要的：跨平台、轻便、更新即用，且阅读器本身比较轻量，体验也不会太差。

书城部分得要用框架来搭，每个界面之间都有一定关联，不过基本阅读器和书城部分完全可以分开，可以单独拉出来设计。

那么就先从阅读器来入手设计。

考虑阅读器上可以把JS和HTML合在一个文件里面，这样可以优化性能，阅读时加载的就比较快了。

研究发现阅读器这部分交互很多，真实现起来也不简单，甚至很麻烦，尤其涉及到了数据交互，我还得在服务器那边进行一些工作，工作量可能不算小。

尽量去做咯，不会的地方就查就百度咯，正好学习咯~！

Coding：

目前只完成了阅读器部分的开发，在开发书城，和数据交互这方面遇到了困难，目前在用功学习。

主要还是之前没怎么接触nodejs，更别说koa这些框架，类型vue的JS框架也是刚接触。

目前效果：

不定期更新

源码等这部分完成考虑放在github上分享。大概到时候会架构在我的服务器上来上线供大家体验交流。