Writeathon：從0開始實現的一個side project

世界上99%的需求都已經有人想到了，但只有多想一步，才能轉化爲產品。

在國外，人們將各種業餘時間打造的產品或項目稱爲“side project”。這些side project的靈感都來自於生活，一開始均爲興趣使然，有的逐漸走向商業，有的歸於平靜，但每個創造者都能從中獲得快樂與滿足。

作爲互聯網/IT從業者，會有更多機會接觸新鮮事物，相信大家一定會有很多奇思妙想。這篇文章，就是關於一個side project-Writeathon從0到1的過程，同時，也會分享遇到的各種技術坑和產品開發經驗，希望能夠給各位參考，實現自己的side project。

產品構想，從0到1

Side project的初始需求，往往來源於自己或身邊人。年初的時候，我計劃寫一個關於幾年前到新西蘭進行Working Holiday的系列文章。從最基本的word，到最專業的scivener，還有獲得無數好評的ullyses，和後起之秀bear，typroa，byword等等，從上手難度，寫作體驗，使用便捷性，專業性等綜合考慮，均難以讓我趁手。

於是，作爲一個技術出身的產品，對寫作工具/平臺做了一番研究。

世界上99%的需求都已經有人想到了，但只有多想一步，才能轉化爲產品。

上文提到的產品，均可以歸爲專業寫作工具，核心是輔助寫作者組織、輸出內容。除此之外，還有寫作社區，像國外的medium，國內的簡書（這裏不得不插一句，簡書從一開始的高質量內容社區，到如今充斥着各類雞湯營銷軟文，非常可惜），讓作者分享、交流有深度的內容。

還有就是最近興起的AI寫作工具，通過AI對文章進行分析，以及相關素材的收集，甚至根據給定的主題和關鍵字自動創作內容。

最後，是比較少接觸到的，我稱之爲創意寫作工具，雖然也屬於寫作工具，但核心不在於寫作，而在於寫作靈感激發，例如：http://dailypage.co，http://twords.2lch.com，http://blankpage.io等。這些工具的寫作功能往往比較簡單甚至簡陋，但專注於提供一系列激發靈感的服務，例如寫作話題推送，寫作進度分析等等。

回到最開始的需求，我是想找一個各方面達到平衡的產品。一個side project最開始只要滿足自己或者最小的需求就足夠了，而這樣的需求究竟是大衆的痛點還是癢點，則可以通過MVP方法交由用戶和市場去驗證。

MVP（Minimum Viable Product），最小可用產品，從產品的核心功能開始構建產品。

那麼，如何從這些信息和需求中構思一個產品？

首先要確定的是產品定位，它決定了要做什麼。對於專業寫作工具，我認爲現有的產品已經足夠多且優秀，暫時沒有更好的切入點。而寫作社區，則對後期的運營能力有極高的要求。

AI寫作是趨勢，但有相當的技術門檻。創意寫作工具目前比較缺少，是一個可行的切入點。所以初步的定位是融合了專業與創意寫作工具的特點，一款能滿足基本寫作需求的，能夠激發作者靈感與創作熱情的產品。

同時，微信、微博、短視頻等各種應用造成的碎片化時間，讓人很難靜下心去做一件事，這款產品的理念也是希望提供純粹的寫作體驗，讓人專注於寫作。

writeathon的名稱，來源於編程馬拉松（hackathon），也寓意着寫作就像馬拉松。

然後，則是要考慮資源，它決定了能做什麼。大部分side project開始往往都只有一個人，而且只能利用業餘時間。這就決定了必須要從最核心的部分開始，對於writeathon來講，作爲一款寫作工具的核心則是編輯器。所以現階段，主要精力都應該放在如何實現一個簡單而高效的編輯器上。

明確了定位和資源，剩下就是怎麼做，也就是產品計劃。對於大部分side project來說，一個完整而長遠的計劃並不是必須的，只要明確了核心訴求，其它部分都可以靈活安排。但出於產品的職業習慣，還是爲writeathon安排了一個分3步走的計劃：

實現一個簡單、高效的編輯器，並提供基本的寫作統計功能，讓人能專注於寫作；
提功寫作靈感激發功能，激發創作熱情，讓人愛上寫作；
通過AI等技術，提高寫作效率與質量，讓人寫得更好。

產品技術選型，穩定與可擴展

除非你的side project涉及到前沿領域，否則應該選擇穩定可擴展的技術框架，穩定是指產品的迭代無需過多考慮其變化，而可擴展是指相關的生態圈能夠支持產品的擴展。

是產品爲技術服務，還是反之，取決於產品的定位和用戶的需求，以及產品的發展階段。

writeathon首先滿足的是自己的需求，對於中長篇的寫作我還是習慣在傳統電腦上完成，同時考慮到通用性，所以優先以web的方式展現。

在三大前端庫react、vue和angular中，我選擇了vue，其生態社區非常活躍，而且相關的文檔也很完善，同時配合Nuxt實現SSR（這裏其實對SSR沒有強烈的需求，只是借side project作爲試驗）。

樣式框架採用了bulma，與bootstrap相比，其column佈局更爲靈活，自定義也很方便。後端接口基於阿里團隊推出的eggjs，雖然阿里的開源產品經常無疾而終，甚至被稱爲KPI產物，但不得不說eggjs從目前的發展來看還是很穩健的，非常適合小團隊的快速開發。數據庫選擇了mongodb，配合mongoosejs作爲ODM。而基礎服務部分，選用的是阿里雲。

整體技術框架如下：

產品開發，快速迭代

我們經常提到產品的快速迭代，但快速迭代並不是隻求速度，還要把握好質量和速度之間的平衡，多久迭代一次，每次迭代多少內容。

writeathon由兩個項目構成：writeathon-web和writeathon-api，截止至寫這篇文章，斷斷續續2個月，writeathon-web經歷了70次的迭代，writeathon-api也有30次。

目前的產品版本爲1.0.2，實現了以下功能：

在開發過程中，遇到了大大小小的難題，相信做過開發的同學都知道程序員的十大謊言之首：“我這裏是正常的啊”，開發中遇到的問題只是開始，處理生產環境及用戶環境產生的問題，纔是最耗費精力的。

這裏列舉一部分爬過的坑：

編輯器的開發；
基於jwt的校驗；
passport庫的瀏覽器兼容性問題；
目錄層級及其呈現方式；
NodeBB論壇系統的單點登錄；
zen模式的設計考量；
移動端適配；
夜間模式的樣式設計；
markdown語法提示；
通過Let’s Encrypt獲取ssl證書及配置。
……

限於篇幅，這裏先分享編輯器的開發，其它話題有機會再單獨展開。

爲了避免重複造輪子，編輯器是基於codemirror來打造的。Codemirror的功能十分強大，github上的很多編輯器項目，都有它的身影，其豐富程度足以打造一個線上的IDE。編輯器主要用到了codemirror的markdown語法模式，自定義主題，自定義插件等特性，與vue結合成了一個名爲zeneditor的組件，後續會考慮將其開源。

在格式支持上，得益於codemirror，除了基本的markdown格式，還支持github推出的GFM（Github Flavored Markdown），GFM擴展了表格、圖片和複選列表等特性。在預覽功能上，使用了marked這個庫，並通過hightlight-js進行語法高亮。

同時，爲zeneditor設計了zen主題及配套的夜間主題zen-dark，其中夜間主題的背景及字體顏色是反覆優化得出的。zen主題還提供了zen模式支持，在該模式下編輯器的高度會固定爲半屏，同時非當前編輯的段落會弱化視覺效果，類似於其它開源編輯器中的打字機模式。

此外，還專門開發了markdown語法提示插件，通過輸入‘@’快捷插入markdown語法。爲了提高效率，zeneditor的主要功能如新建、切換夜間模式、zen模式、保存、導出等均設置了鍵盤快捷鍵。

當前版本zeneditor呈現的效果，就像一張白紙，讓用戶最大程度地專注於寫作，後續會在細節如字體、顏色、格式支持、zen模式2.0等持續優化。