Sharelist（分享清单）开发后记

2019独角兽企业重金招聘Python工程师标准>>>

从2017年下半年到2018年初，我使用vue-cli脚手架，结合移动端的cordova，桌面端的electron，后端的express+socketio，构建了一个TODO类的应用，英文名叫sharelist，中文名叫分享清单，体验了一把MVVM设计模式和全栈JS开发，总结一下开发经验。

• （介绍网页）项目地址
• （web客户端的）项目地址
• （桌面端的）项目地址
• （移动端的）项目地址
• （后台服务端的）项目地址

分享清单的特性

• 渐进的用户体验
• 基于电子邮件的帐号体系
• 跨平台(Win/OSX/Linux/Android/iOS)
• 统一的用户界面，能适应不同的屏幕尺寸
• 针对不同平台的操作体验 (桌面)完善的快捷键支持
• 多人分享特性
• 国际化支持
• 基本的通知机制
• 基于百度语音识别

发现的坑

• 不同平台的不同表现太难统一，即使都是HTML5
• 旧平台兼容太麻烦
• 移动版浏览器的触控操作支持不太好

写这个应用也是想自己做一个像样的应用出来，也见过用过不少TODO类的应用，感觉不是太简单就是太复杂，或者平台缺失。我自已想做的应用，应让用户感受渐进式的使用体验，够简单，易上手，随着逐步熟悉"解锁"更多功能，同时受一些编辑器的启发，也做了一些命令式的功能，体现程序员的特色。

项目使用了Bootstrap，结合我那一点可怜的UI知识，设计了一个界面，我感觉还可以了。

项目的数据库采用MySQL，比较传统一点，因为我对这种数据库比较属性，不希望在数据存储上花费太多时间，数据库的结构比较简单，只有几张表。

• users 用户表
• projects 项目表
• tasks 任务表
• shares 分享关系表
• verifycodes 验证码表

Project就是项目，Task就是任务，一对多的关系。

使用了Socket.IO后发现不少有点，服务器到客户端的推送实现起来非常简单了，还能通过服务器实现不同客户端的即时通讯，不再需要每次从客户端发起请求了。

本来打算用手机号码，奈何发验证码都要钱，最后只能采用这种比较老式的账号体系，不过我也借此研究了一下验证码机制。

跨平台支持并不完整，因为我没有M ac电脑和iPhone，electron的Mac版本是在虚拟机里一打包的，挺麻烦，不过理论上Cordova编译到iOS平台也是没问题的，可能有些插件要调整一下。

自适应界面不难处理，唯一的遗憾是为了保证兼容性，使用了jQuery而不是纯CSS来做动画效果，左侧Drawer收放不流畅。

桌面端和移动端的操作模式不太相同，移动端支持触摸操作，桌面端则支持鼠标和快捷键操作（包括利用方向键导航）。

既然有了电子邮件做账号，就可以分享内容了，所以我添加了基本的邮件支持，当分享给一个不存在的用户时，后台就会发送一封邮件到这个新用户，引导他下载并注册软件，如果两个用户共享一个Project，用户A对Task的操作会提醒用户B，包括增删改。本来还想添加更多的邮件特性，没想到电子邮件使用上也有诸多限制，个人邮箱用来发送这样的邮件不妥当，后来项目发布到heroku上，竟然不能用SMTP发送邮件，应该是heroku限制了，它本来就有发邮件的插件，后来找到了sendgrid这个插件，每个月有免费额度，勉强可以用了。

国际化支持包含了中文+英文的自由切换，以及推送时间会按用户设置的时区的不同而自动调整。

没想到看似简单的推送功能，实际上写起来相当复杂，为了减少数据库的访问次数，服务器后台程序设定在每次启动时扫描一遍数据库，将需要推送的Task统一设定setTimeout，到时间在检测一遍哪些关联的客户端在线，推送过去，同时在Task的操作（增删改）过程中，随时对推送任务进行修正，编写过程中发现不管是桌面端还是移动端，都无法保证socket连接不中断，桌面端还好，断开后离开就能重连，移动端就比较麻烦，有可能程序会被管家类程序杀死，所以我找到了cordova的通知插件，原生支持Android的提醒机制，每次连接成功后立即获取所有Task，需要提醒的Task都保存好，这样即使掉线，手机也能到时候正常通知，如果中间有变更，下次连上后又能立即重新调整。

我没有域名，也没有证书，项目本身也没有考虑加密传输，后来让我发现了heroku这个好地方，每月都有免费的额度可以使用，终于可以顺利部署了，只是国内访问有点慢。

转载于:https://my.oschina.net/antipro/blog/1634818