调研

拓展的需求

HackPad

实时或者异步地记录协作笔记，共享数据和文件，或用评论分享你们的想法
细致的隐私许可让你可以邀请单个朋友、一个十几人的团队或者上千的 Twitter 粉丝
智能执行
直接从流行的视频分享网站上插入视频
表格
Etherpad
简单的格式化文本功能
“滑动时间轴”—— 浏览一个工程历史版本
可以下载纯文本、 PDF、微软的 Word 文档、Open Document 和 HTML 格式的文档
每隔一段很短的时间就会自动保存
可个性化程度高
有客户端插件可以扩展编辑的功能
几百个支持 Etherpad 的扩展，包括支持 email 提醒，pad 管理，授权
可访问性开启
可从 Node 里或通过 CLI（命令行界面）和 EtherPad 的内容交互
OwnCloud Documents
协作编辑，多个用户同时进行文件编辑
在 ownCloud 里创建文档
上传文档
在浏览器里分享和编辑文件，然后在 ownCloud 内部或通过公共链接进行分享这些文件
有类似 ownCloud 的功能，如版本管理、本地同步、加密、恢复被删文件
通过透明转换文件格式的方式无缝支持微软 Word 文档
网站：owncloud.org
源代码： github.com/owncloud/documents
Gobby
成熟的文本编辑能力包括使用 GtkSourceView 的语法高亮功能
实时、无需锁定、通过加密（包括 PFS）连接的协作文本编辑
整合了群聊
本地组撤销：撤销不会影响远程用户的修改
显示远程用户的光标和选择区域
用不同颜色高亮不同用户编写的文本
适用于大多数编程语言的语法高亮，自动缩进，可配置 tab 宽度
零冲突
加密数据传输包括完美的正向加密（PFS）
会话可被密码保护
通过 Access Control Lists (ACLs) 进行精密的权限保护
高度个性化的专用服务器
自动保存文档
先进的查找和替换功能
国际化
完整的 Unicode 支持
onlyoffice
文档可以在浏览 / 编辑模式下分享
文档嵌入
电子表格和电子幻灯片编辑器
协作编辑
评论
群聊
甘特图
时间管理
权限管理
Invoicing 系统
日历
整合了文件保存系统：Google Drive、Box、OneDrive、Dropbox、OwnCloud
整合了 CRM、电子邮件整合器和工程管理模块
邮件服务器
邮件整合器
可以编辑流行格式的文档、电子表格和电子幻灯片：DOC、DOCX、ODT、RTF、TXT、XLS、XLSX、ODS、CSV、PPTX、PPT、ODP
技术方案
文档编辑
这就是一个非常传统的界面开发了。这方面的技术和框架非常多，目前 Web 比较流行的解决方案就是 React/Redux 或者 Vue/Vuex 这样的类 Flux 架构，也就是单向数据流（当然用别的类似框架也无所谓）。文档编辑器使用类 Flux 架构之后，整个应用的状态（或者叫 Model 层）可以切分为三大块：文档的状态，即文档自身的内容，包括样式；编辑器的状态，比如富文本编辑器的光标位置、选中状态、编辑器菜单等等；应用自身的状态，比如登录状态、用户数据、权限管理等等。切分成这三大块之后，要做的事情就非常清晰了：

写 UI，并且把这些 Model 状态映射到 UI 上，这里完全不需要考虑输入，就是很纯净地把一堆 Model 映射到 UI 上。比如文档对象的渲染、编辑器各种状态的实现等等，比如你可以写代码把下面这个对象
1
2
3
4
5
6
7
8
{
type: 'text',
content: 'Hello World!'
style: {
color: '#aaa',
fontWeight: 'bolder'
}
}
映射为一段颜色是 #aaa 的加粗文本。
处理用户的输入，修改相应的状态，这里完全不需要考虑 UI 的渲染，只要用户的输入能正确地改变相应的 Model 即可。比如用户在界面空白处点击了鼠标右键，我们需要打开右键菜单，具体做法就是把编辑器状态里的右键菜单设置为打开，并且设置好位置即可。具体这个菜单怎么在 UI 上展示，第一步已经做了，我们这里完全不需要关心。

语言：

typescript

参考:

Etherpad
wangEditor

核心算法：

Operational Transformation（下面简称 OT）技术正是 Google Docs 中所采用的方案，因此是经过验证的，值得研究。
Conflict-Free Replicated Data Type（下面简称 CRDT）技术是一种新兴的技术，它的优势在于不需要 OT 那样复杂的算法，但是 CRDT 的缺点在于它的实现比较复杂，而且 CRDT 也不是万能的，有些情况下还是需要 OT 的。

数据库：

MySQL？

分工

前端：
后端（含数据库）：
后续服务器部署、其他参赛物料准备：
项目网页、文档等。
开发时间轴
第一周（4.8~4.10）
团队会议确定项目目标、范围和核心功能。
调研其他竞品，制定用户故事和需求文档。
了解相关技术算法等，确定技术栈和系统架构。
第一周（4.11~4.12）
设置开发环境，包括前端开发环境和后端开发环境。
搭建基础架构，包括项目目录结构和基本文件。
第二周（4.13~4.17）
开发最基础的本地编辑器
第三周（4.18~4.24）
在线协作功能
第四周（4.25~5.1）
其他拓展功能
第五周（5.2~5.8）

调研

拓展的需求

HackPad

Etherpad

OwnCloud Documents

Gobby

onlyoffice

技术方案

文档编辑

语言：

参考:

核心算法：

数据库：

分工

开发时间轴

第一周（4.8~4.10）

第一周（4.11~4.12）

第二周（4.13~4.17）

第三周（4.18~4.24）

第四周（4.25~5.1）

第五周（5.2~5.8）