【項目總結】饑人谷前端作品庫開發心得

饑人谷前端作品庫

目前開發的第一階段已經結束,項目也已經上線。小組團隊要求寫一篇開發心得,相互交流,以饗后生。那么在這里我先打一個草稿。
項目作品請見:饑人谷前端作品庫
【注:本項目支持手機端瀏覽】

項目的起止歷程

團隊的QQ討論組歷史記錄最遠能追溯到4.22,項目也就是那天開始正式立項運作的。截止到6.6,項目1.0版正式上線。總歷時45天,期間產品需求討論與設計出圖10天,項目開發15天,自測聯調15天,上線、線上測試、bug修復 5天。

參加項目的初衷

自己所在的公司目前的前端技術有很多地方并沒有和互聯網前沿技術接軌。一方面,以庫的易維護性,安全性,代碼混雜性為理由,將jquery庫棄之門外,使用的是內部框架,給前端js代碼與外部接軌帶來困難。另一方面,npm包管理模式還沒有建立,工程化,模塊化等領域相對較弱。所以一來是實地接觸一下互聯網的web開發模式,更好地參與技術實踐,考慮將一些優秀的東西吸納進公司內部。二來是自己剛剛接觸nodejs后端開發,希望能一試身手。

項目所采用的技術

  • 項目管理工具
    公司之前使用的svn版本管理,git雖然使用過但二者的差異并不真正清楚。
    個人同意這樣的觀點:SVN中文化圖形界面做的很好上手快,思路很清楚,更適用于項目管理,很多公司仍然用的都是SVN。Git有它的優勢比如分支概念,offline使用。感興趣可以看看以下內容。
    話說Svn與Git的區別
  • 前端
    HTML CSS規范寫法、CSS3特效、BootStrap的使用、響應式頁面、常見組件的封裝、RequireJS模塊化寫法
  • 后端
    nodejs的使用、Express 搭建網站的方法、常用中間件的使用、七牛圖片上傳處理、數據庫的構思與操作、MongoDB的使用。

本次項目自己負責的部分

本項目后端基于nodejs的express模塊搭建,自己負責的主要是上傳作品后端編碼。修改頁由于當時公司項目正緊,迫使交給了別人去做,后期的完善自己也并沒有跟進,感覺很遺憾。
具體流程是用戶從瀏覽器端上傳作品后將作品信息傳到后臺,后臺將提交的數據保存到數據庫。其中的難點是我們將圖片保存到七牛云存儲平臺而并非是自己的服務器上。七牛云存儲平臺的API是一套新的API體系,如何使用,需要自己去研究。之所以采用上傳七牛原因有二:①七牛的圖片處理非常便捷,提供了一整套圖片處理的API,并且可以用queryString加后綴參數的形式直接改變圖片大小,以適應我們縮略圖封面圖等同一圖片不同剪裁大小的需求。②節省自身的服務器壓力。


圖片云存儲和用戶、開發者之間的關系

項目中吃到的虧——吃一塹長一智

  • 先談一下當時我的狀態,我當時周一到周五一直在上班。有時候甚至還要加班,但即使這樣到家依然要敲兩個小時代碼,為了趕上項目進度。(但實際上最終我還是給項目拖了后腿)。后期實在頂不住了,回家就睡,早上6點起來敲代碼,敲到8點上班。所以當時QQ里6點多我總會發一堆消息,和前端,后端負責人,產品,導師進行溝通。當時感覺非常疲倦,這個我在后面會繼續談到。
  • 起初自己對于技術的理解,對于自身的認識非常淺薄,覺得自己就是負責技術實現就好了,至于產品長什么樣,怎么做用戶會更喜歡,并不怎么關心,因為我感覺我的成就感更多來源于解決問題本身,而不是顧客的一個贊賞。(當然也可能是用戶從來沒有直接贊賞過我_)。在這次項目中,這種錯誤的認識導致了很嚴重的后果。因為一開始的項目需求大會我遲到了,只聽了一半,竟然覺得這也沒關系,后面肯定會有人告訴我去做什么的。我只管到時候再聽一遍,然后實現就好了。
    后來吃了大虧。
    因為自己根本不知道項目需求是什么!哪些內容需要校驗,先上傳到本地服務器還是先上傳到七牛服務器?修改信息需要改哪些數據庫的內容?完全沒有對上。前后端數據對接完全瞎眼了,一團亂麻,到了第二周感覺自己還完全在團隊之外徘徊。即使后來對自己負責部分清晰了之后,也很難再從整體上把握項目,感覺自己只能是牽強地說成是項目的一員,不能算是主導者,連推動者都不算。
    也正是從這一次,我開始重視了產品需求,用戶體驗上的東西,不再是一個盲目的隨從,開始考慮合理性,意義,開發效率,界面設計的邏輯等內容,不再是一個簡單的技術實現者了。

項目中的前后端交接

我們的流程是這樣的,每3~4天開一次技術會,前后端各自匯報一下目前的進展情況以及下一階段的任務。
一開始要么是沒有文檔,要么是總是各干各的,互相不通氣。后來經過若愚老師調教,開始重視文檔,群里常常是寫了什么然后@相關人員來看看,開始重視討論,當時我感覺到大家的空前熱情。
整體前后端開發流程是后端或者前端先給出數據接口,然后相關人員確定后敲定,如果后續有需要再添加或修改相應的字段。然后就是溝通,溝通,溝通。
前后端基本對接完成之后,然后出了開發機,大家利用測試用戶賬號登錄一起在線上聯調測試。

項目中遇到的問題與收獲

其實我們平??傉勈斋@,比如聽講座受到了啟發覺得有收獲,比如去旅游拍到了好照片有收獲。其實個人認為收獲的本質是由0變1,也就是原來你沒有而現在你有了。那么在研發領域,真正能有收獲的方式有兩點:
①他山之石,可以攻玉。多逛技術社區論壇,多看別人的技術博客,讀讀別人的代碼,勤翻點技術書籍。之前我遇到過一陣不爽期,感覺自己每天做的事情差不多,成長開始變緩慢。我請教過之前在實習公司奢集遇到的鵬哥(很多時候去問問過來人總是好的)。他說都有這么一段期間,你覺得成長不大了。這會就需要自己主動去逛逛社區,論壇,了解別人在做什么,不懂就去研究。
②解決問題就是收獲。我個人覺得這點相當重要。解決問題應該是工程師的天職。一個工程師的強與弱,不是會多少套語言,會多少個API,也不是做過多少個作品,寫過多少行代碼,最重要的是解決實際問題的能力。當然解決問題的基礎是得有扎實的基本功以及相應領域的基礎知識。所以有一些老工程師,寫代碼不一定有年輕工程師溜,但他們能夠作為年輕人的導師來指導年輕人寫代碼,是因為他們葆有解決問題的視野、思路、能力。

  • 項目中自己處理的問題
    自己主要處理的是作品截圖上傳七牛的操作,起先采用老師推薦的node-qiniu模塊進行API,做到一半的時候發現他的API過于陳舊,好幾年沒有更新,七牛自己的API也已經改版了實際上。所以后來我去嘗試了官網上給的原生API,發現好麻煩。然后用去npmjs.com調研,最終選用qn模塊來完成和七牛的對接。
    在和ajax的交互上,由于數據涉及到圖片信息,所以form上必須通過enctype="multipart/form-data"設置form表單的上傳數據格式。表單中enctype="multipart/form-data"的意思,是設置表單的MIME編碼。默認情況,這個編碼格式是application/x-www-form-urlencoded,不能用于文件上傳;只有使用了multipart/form-data,才能完整的傳遞文件數據。但是我在處理這種編碼格式數據時總是轉換格式不正確,后來利用connect-multiparty中間件將這種格式轉換為對象形式,才順利解決問題。后面有必要研究一下connect-multiparty源碼學學人家是怎么轉換的。
    期間遇到很多不懂的問題,諸如七牛的空間存儲的概念,key的概念,二進制流的概念都要去讀文檔,查資料。

感悟:七牛的js原生API寫的真爛,都沒有封裝回調函數,但是七牛的客服團隊是真靠譜!每個問題問了20分鐘以內必有人回答,而且可以看出人家是懂技術的。并且周六周日客服都有人坐班。后期七??头藛T還電話找到我(我都不知它是怎么找到我電話的==)問我體驗怎么樣,有什么建議,項目是做什么的?很nice,很周到。以下是一些答疑實錄。

七??头鹨?

七??头鹨?

七??头鹨?

體會與其他

干兩個項目很容易分心,或者會身心疲勞,哪個都做不好。常常感覺兩個項目都沒有發揮自己的全部水平。畢竟人的經歷是有限的。有了這一次經歷,以后自己也不會輕易參與項目了。還是干好本職工作為好。

附錄

doc1.png
doc2.png
項目簡介.PNG
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容