目前開發(fā)的第一階段已經(jīng)結(jié)束，項(xiàng)目也已經(jīng)上線。小組團(tuán)隊(duì)要求寫一篇開發(fā)心得，相互交流，以饗后生。那么在這里我先打一個草稿。
項(xiàng)目作品請見：饑人谷前端作品庫
【注：本項(xiàng)目支持手機(jī)端瀏覽】
項(xiàng)目的起止歷程
團(tuán)隊(duì)的QQ討論組歷史記錄最遠(yuǎn)能追溯到4.22，項(xiàng)目也就是那天開始正式立項(xiàng)運(yùn)作的。截止到6.6，項(xiàng)目1.0版正式上線?？倸v時45天，期間產(chǎn)品需求討論與設(shè)計出圖10天，項(xiàng)目開發(fā)15天，自測聯(lián)調(diào)15天，上線、線上測試、bug修復(fù) 5天。
參加項(xiàng)目的初衷
自己所在的公司目前的前端技術(shù)有很多地方并沒有和互聯(lián)網(wǎng)前沿技術(shù)接軌。一方面，以庫的易維護(hù)性，安全性，代碼混雜性為理由，將jquery庫棄之門外，使用的是內(nèi)部框架，給前端js代碼與外部接軌帶來困難。另一方面，npm包管理模式還沒有建立，工程化，模塊化等領(lǐng)域相對較弱。所以一來是實(shí)地接觸一下互聯(lián)網(wǎng)的web開發(fā)模式，更好地參與技術(shù)實(shí)踐，考慮將一些優(yōu)秀的東西吸納進(jìn)公司內(nèi)部。二來是自己剛剛接觸nodejs后端開發(fā)，希望能一試身手。
項(xiàng)目所采用的技術(shù)
- 項(xiàng)目管理工具
公司之前使用的svn版本管理，git雖然使用過但二者的差異并不真正清楚。
個人同意這樣的觀點(diǎn)：SVN中文化圖形界面做的很好上手快，思路很清楚，更適用于項(xiàng)目管理，很多公司仍然用的都是SVN。Git有它的優(yōu)勢比如分支概念，offline使用。感興趣可以看看以下內(nèi)容。
話說Svn與Git的區(qū)別 - 前端
HTML CSS規(guī)范寫法、CSS3特效、BootStrap的使用、響應(yīng)式頁面、常見組件的封裝、RequireJS模塊化寫法 - 后端
nodejs的使用、Express 搭建網(wǎng)站的方法、常用中間件的使用、七牛圖片上傳處理、數(shù)據(jù)庫的構(gòu)思與操作、MongoDB的使用。
本次項(xiàng)目自己負(fù)責(zé)的部分
本項(xiàng)目后端基于nodejs的express模塊搭建，自己負(fù)責(zé)的主要是上傳作品后端編碼。修改頁由于當(dāng)時公司項(xiàng)目正緊，迫使交給了別人去做，后期的完善自己也并沒有跟進(jìn)，感覺很遺憾。
具體流程是用戶從瀏覽器端上傳作品后將作品信息傳到后臺，后臺將提交的數(shù)據(jù)保存到數(shù)據(jù)庫。其中的難點(diǎn)是我們將圖片保存到七牛云存儲平臺而并非是自己的服務(wù)器上。七牛云存儲平臺的API是一套新的API體系，如何使用，需要自己去研究。之所以采用上傳七牛原因有二：①七牛的圖片處理非常便捷，提供了一整套圖片處理的API，并且可以用queryString加后綴參數(shù)的形式直接改變圖片大小，以適應(yīng)我們縮略圖封面圖等同一圖片不同剪裁大小的需求。②節(jié)省自身的服務(wù)器壓力。
項(xiàng)目中吃到的虧——吃一塹長一智
- 先談一下當(dāng)時我的狀態(tài)，我當(dāng)時周一到周五一直在上班。有時候甚至還要加班，但即使這樣到家依然要敲兩個小時代碼，為了趕上項(xiàng)目進(jìn)度。（但實(shí)際上最終我還是給項(xiàng)目拖了后腿）。后期實(shí)在頂不住了，回家就睡，早上6點(diǎn)起來敲代碼，敲到8點(diǎn)上班。所以當(dāng)時QQ里6點(diǎn)多我總會發(fā)一堆消息，和前端，后端負(fù)責(zé)人，產(chǎn)品，導(dǎo)師進(jìn)行溝通。當(dāng)時感覺非常疲倦，這個我在后面會繼續(xù)談到。
- 起初自己對于技術(shù)的理解，對于自身的認(rèn)識非常淺薄，覺得自己就是負(fù)責(zé)技術(shù)實(shí)現(xiàn)就好了，至于產(chǎn)品長什么樣，怎么做用戶會更喜歡，并不怎么關(guān)心，因?yàn)槲腋杏X我的成就感更多來源于解決問題本身，而不是顧客的一個贊賞。（當(dāng)然也可能是用戶從來沒有直接贊賞過我_）。在這次項(xiàng)目中，這種錯誤的認(rèn)識導(dǎo)致了很嚴(yán)重的后果。因?yàn)橐婚_始的項(xiàng)目需求大會我遲到了，只聽了一半，竟然覺得這也沒關(guān)系，后面肯定會有人告訴我去做什么的。我只管到時候再聽一遍，然后實(shí)現(xiàn)就好了。
后來吃了大虧。
因?yàn)樽约焊静恢理?xiàng)目需求是什么！哪些內(nèi)容需要校驗(yàn)，先上傳到本地服務(wù)器還是先上傳到七牛服務(wù)器？修改信息需要改哪些數(shù)據(jù)庫的內(nèi)容？完全沒有對上。前后端數(shù)據(jù)對接完全瞎眼了，一團(tuán)亂麻，到了第二周感覺自己還完全在團(tuán)隊(duì)之外徘徊。即使后來對自己負(fù)責(zé)部分清晰了之后，也很難再從整體上把握項(xiàng)目，感覺自己只能是牽強(qiáng)地說成是項(xiàng)目的一員，不能算是主導(dǎo)者，連推動者都不算。
也正是從這一次，我開始重視了產(chǎn)品需求，用戶體驗(yàn)上的東西，不再是一個盲目的隨從，開始考慮合理性，意義，開發(fā)效率，界面設(shè)計的邏輯等內(nèi)容，不再是一個簡單的技術(shù)實(shí)現(xiàn)者了。
項(xiàng)目中的前后端交接
我們的流程是這樣的，每3~4天開一次技術(shù)會，前后端各自匯報一下目前的進(jìn)展情況以及下一階段的任務(wù)。
一開始要么是沒有文檔，要么是總是各干各的，互相不通氣。后來經(jīng)過若愚老師調(diào)教，開始重視文檔，群里常常是寫了什么然后@相關(guān)人員來看看，開始重視討論，當(dāng)時我感覺到大家的空前熱情。
整體前后端開發(fā)流程是后端或者前端先給出數(shù)據(jù)接口，然后相關(guān)人員確定后敲定，如果后續(xù)有需要再添加或修改相應(yīng)的字段。然后就是溝通，溝通，溝通。
前后端基本對接完成之后，然后出了開發(fā)機(jī)，大家利用測試用戶賬號登錄一起在線上聯(lián)調(diào)測試。
項(xiàng)目中遇到的問題與收獲
其實(shí)我們平?？傉勈斋@，比如聽講座受到了啟發(fā)覺得有收獲，比如去旅游拍到了好照片有收獲。其實(shí)個人認(rèn)為收獲的本質(zhì)是由0變1，也就是原來你沒有而現(xiàn)在你有了。那么在研發(fā)領(lǐng)域，真正能有收獲的方式有兩點(diǎn)：
①他山之石，可以攻玉。多逛技術(shù)社區(qū)論壇，多看別人的技術(shù)博客，讀讀別人的代碼，勤翻點(diǎn)技術(shù)書籍。之前我遇到過一陣不爽期，感覺自己每天做的事情差不多，成長開始變緩慢。我請教過之前在實(shí)習(xí)公司奢集遇到的鵬哥（很多時候去問問過來人總是好的）。他說都有這么一段期間，你覺得成長不大了。這會就需要自己主動去逛逛社區(qū)，論壇，了解別人在做什么，不懂就去研究。
②解決問題就是收獲。我個人覺得這點(diǎn)相當(dāng)重要。解決問題應(yīng)該是工程師的天職。一個工程師的強(qiáng)與弱，不是會多少套語言，會多少個API，也不是做過多少個作品，寫過多少行代碼，最重要的是解決實(shí)際問題的能力。當(dāng)然解決問題的基礎(chǔ)是得有扎實(shí)的基本功以及相應(yīng)領(lǐng)域的基礎(chǔ)知識。所以有一些老工程師，寫代碼不一定有年輕工程師溜，但他們能夠作為年輕人的導(dǎo)師來指導(dǎo)年輕人寫代碼，是因?yàn)樗麄冚嵊薪鉀Q問題的視野、思路、能力。
- 項(xiàng)目中自己處理的問題
自己主要處理的是作品截圖上傳七牛的操作，起先采用老師推薦的node-qiniu模塊進(jìn)行API，做到一半的時候發(fā)現(xiàn)他的API過于陳舊，好幾年沒有更新，七牛自己的API也已經(jīng)改版了實(shí)際上。所以后來我去嘗試了官網(wǎng)上給的原生API，發(fā)現(xiàn)好麻煩。然后用去npmjs.com調(diào)研，最終選用qn模塊來完成和七牛的對接。
在和ajax的交互上，由于數(shù)據(jù)涉及到圖片信息，所以form上必須通過enctype="multipart/form-data"設(shè)置form表單的上傳數(shù)據(jù)格式。表單中enctype="multipart/form-data"的意思，是設(shè)置表單的MIME編碼。默認(rèn)情況，這個編碼格式是application/x-www-form-urlencoded，不能用于文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數(shù)據(jù)。但是我在處理這種編碼格式數(shù)據(jù)時總是轉(zhuǎn)換格式不正確，后來利用connect-multiparty中間件將這種格式轉(zhuǎn)換為對象形式，才順利解決問題。后面有必要研究一下connect-multiparty源碼學(xué)學(xué)人家是怎么轉(zhuǎn)換的。
期間遇到很多不懂的問題，諸如七牛的空間存儲的概念，key的概念，二進(jìn)制流的概念都要去讀文檔，查資料。
感悟：七牛的js原生API寫的真爛，都沒有封裝回調(diào)函數(shù)，但是七牛的客服團(tuán)隊(duì)是真靠譜！每個問題問了20分鐘以內(nèi)必有人回答，而且可以看出人家是懂技術(shù)的。并且周六周日客服都有人坐班。后期七?？头藛T還電話找到我（我都不知它是怎么找到我電話的==）問我體驗(yàn)怎么樣，有什么建議，項(xiàng)目是做什么的？很nice，很周到。以下是一些答疑實(shí)錄。
七牛客服答疑1
七?？头鹨?
七?？头鹨?
體會與其他
干兩個項(xiàng)目很容易分心，或者會身心疲勞，哪個都做不好。常常感覺兩個項(xiàng)目都沒有發(fā)揮自己的全部水平。畢竟人的經(jīng)歷是有限的。有了這一次經(jīng)歷，以后自己也不會輕易參與項(xiàng)目了。還是干好本職工作為好。
附錄
