Web 开发入门作 - 带关键词的 Reeder 网页版

2016-01-06 06:38:58 +08:00
 edfward

已经研究僧了,想来自己还没做过什么 web 相关项目于是把上学期的某课程作业延伸一下当自己的 side project 。

这是什么

...没看错,这就是我照着 Reeder for Mac 默认 Reeder 主题像素级拷贝的一个网页简化版。很多贴心细节都没实现目前也就是看看像那么个样子(颜色确实是我从 Reeder 上取出来的...)。大大的勾勾是用来 mark as read 的,另外要说和 Reeder 有什么不一样的话是第二栏每篇文章标题下的不是概要,而是提取的关键词

为什么做这么个东西

  1. 学习 web 开发。认真接触 javascript 也就是最近两学期内的事情,而且是一入门就接触大框架 angular 啊 react 啊,自己反而对基础的 js 都不太熟悉。所以这次就没用什么框架——好吧其实还是用了 jQuery 。顺便稍微系统地学习一下 CSS 相关(比如这次稍微了解了 flexbox 和 animation )。后端自己有经验,不过没有从零开始写过东西,这次也是来打怪升级的。
  2. 我是 Reeder 脑残粉, mac 版和 iOS 版都在用。但是比较恼火的是在 mac 上很难快速的 mark 掉不怎么感兴趣的文章(特别是订阅了一些更新很频繁的站点的时候)。所以有个想法是如果每篇文章有自己的关键词(或者文章总结)的话,我也许一眼望过去就能划掉那些自己觉得没什么意思的文章。这也是做这么一个东西的初衷。

技术栈

附上了 github 链接,求加星星交友。

ReadKeyRSS,页面前端, ES6 + babel + webpack 。用了 jQuery 。

ReadKeyServer,后端, repo 里介绍比较详细, golang ,用 gin 作服务器,go-pkg-rss 处理 RSS/Atom 。存储层是 Redis 。

ReadKeyWord,关键词提取服务器,目前就支持中文和英文。中文是 HanLP 自带的基于 TextRank 的关键词提取算法(也是我老老实实选择 Java 开发的原因),英文是一个叫 RAKE(Rapid Automatic Keyword Extraction) 的算法的 python 实现,当成 Jython 程序整合进了这个服务器。基于 Spark web framework(此 spark 非彼 spark )。

之所以用关键词而不用文章总结是觉得后者更难吧...

网址在哪儿

自己本来有个 512MB 的 digitalocean 机器,部署了发现好慢啊...忽然发现 AWS 里自己有上学期老师送的 100 刀 credit ,但是 1 月底就过期了。于是架了一台 m4 large ,争取花完钱。所以这次就当是内测,也希望大家提意见(因为问题肯定很多...)。

地点是 54.172.65.245:8080,用户系统是直接用的 Auth0 ,要不然感觉自己写起来会很麻烦说不定还会写错...支持 google github 和用户名密码登录。

以及添加 RSS/Atom 的时候需要具体 RSS/Atom 的地址,比如 http://zhihu.sellmoe.com/feed http://www.engadget.com/rss-full.xml 可以, http://www.engadget.com 就不行...这也是个 todo 。

比较紧急的 Todo

3498 次点击
所在节点    分享创造
10 条回复
edfward
2016-01-06 06:41:13 +08:00
以及添加 RSS/Atom 的时候需要具体 RSS/Atom 的地址,比如 http://zhihu.sellmoe.com/feed http://www.engadget.com/rss-full.xml 可以, http://www.engadget.com 就不行...这也是个 todo 。
jucelin
2016-01-06 08:40:23 +08:00
RSS 里有 html ,但显示就直接显示了 HTML ,然后就是一大团
edfward
2016-01-06 08:48:08 +08:00
@jucelin 诶你指的是?我的确是直接把 RSS 的内容直接当 HTML 显示了
heaton_nobu
2016-01-06 09:00:23 +08:00
提个建议:按钮如果用 span 的话, css 里起码要把 cursor 设为 pointer
edfward
2016-01-06 09:05:46 +08:00
@jucelin 大概明白你的意思了,是内容显示为转义后的 HTML 了是吧(比如 <p&rt; 这种)。不过我手动试了试一些 blog (随机抽自 [Quora - What are the best programming blogs?]( https://www.quora.com/What-are-the-best-programming-blogs) 和 [知乎 - 优秀程序员的博客有哪些?]( https://www.zhihu.com/question/19934502) 发现并没有这样的问题)。
edfward
2016-01-06 09:07:52 +08:00
@heaton_nobu 好神奇!学习了...! CSS 简直博大精深!(感觉自己是个乡巴佬...
jucelin
2016-01-06 11:55:15 +08:00
edfward
2016-01-06 13:17:59 +08:00
@jucelin 检查了一下发现是 go-pkg-rss 在处理用 RSS1.0 Content Module http://purl.org/rss/1.0/modules/content/ 的 feed 的时候会把 content 那个 XML 节点转义然后存下...
https://github.com/jteeuwen/go-pkg-rss/blob/31df4852b3d06032f59342013e6362526be0cd72/rss.go#L199

大概我得用个 adhoc 的手段反转义回来...
edfward
2016-01-06 13:58:41 +08:00
@jucelin 用 regular expression 修了一下貌似可以了...



判断 content 是不是满足那个 XML 节点的格式然后反转义。晚点再部署回服务器:)
谢谢你找的这个 bug !
movtoy
2016-01-06 19:07:57 +08:00
额,这个主题我打算抄袭了。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/248660

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX