AC學生的共同回憶：Alpha Camp畢業專案Simple Twitter
全端網頁開發課程的最後驗收，持續學習6個月後的成果展現，就是這個3~4人為一組，花費短短兩週進行的復刻Twitter，Simple Twitter專案協作開發。在這邊紀錄一下心路歷程！
這次我們是３人一組以全端開發模式進行。成員中其中一人有全職工作。拿到的設計稿和UI/UX(User Interface/User Experience)規格說明，有必須要做的17個頁面，一開始我們是以這17個頁面做分工，較相似的UI頁面分在同一組，然後各自認領想做的。這樣的分工有蠻大的問題，就是合併的時候，常常會衝突(conflict)，因為不同頁面可能有功能是歸在同一個Controller裡。不過這只是一個小專案，每位組員都知道專案的全貌，所以影響不大，就是會多花些時間在解決衝突的部分。
我負責做了哪些部分？
我自己則負責了註冊、登入、登出的頁面及功能以及後台管理者的所有頁面和功能開發。除此之外，在上述部分大致完成之後，我就開始支援前台的開發。主要是優化前台所有頁面使呈現一致還有添加RWD，使排版能支援小螢幕呈現、彈跳視窗的切版、個人資料設定和更新的功能開發。另外，也花了蠻多時間在review組員們的code，還被說成是糾察隊隊長，但也只是把前６週從助教那學來的觀念現學現賣，以此來維護整體專案code的品質而已！
實際開發紀實與亂七八糟心聲
整體專案結束後，我覺得有一點是如果能在一開始就大致知道一下組員們的程度，應該更能幫助分工進行還有時間分配。不過，這也挺難做到的，因為大家都是新手上路，可能也不好抓自己能力到哪。
Ａｎｙｗａｙ
總之，專案開始開發的2~3天，從review組員的code就大概知道大家比較擅長的部份，我的組員有Dennis跟KOU，Dennis 比較擅長後端，他自己也有說自己前端切版完全不行，有待補坑XDD
=> 所以一開始照頁面分工，dennis 負責的頁面，功能都沒問題，但畫面完全不行！我在繳交期限的前一天晚上看到前台首頁時，是真的有傻眼一秒，除了我優化切版的sidebar好好呈現外，怎麼貼文和跟隨者列表都...
而KOU 的前端就比較好，但因為是在職學習的關係，從他的code看的出來有些觀念學的不紮實(後端)，而且可能是怕趕不上進度，加上一邊工作一邊進修寫code很累的關係(我完全可以想像)，他的code需要修改的狀況比較多。
＝＞ 但這也沒什麼關係，反正全職學習的我和Dennis時間運用比較彈性，只要大家對專案要完成的程度和分工都有共識就沒問題，而我希望大家都能從協作這個專案的經驗學習獲得更多經驗就好！
關於測試檔
我們這組在專案最一開始其實沒有特別注意到這是一個以通過測試檔規格為第一優先的專案開發，所以我們在最先開會討論分工時，完全沒有看測試檔內容，直接以拿到的UI/UX規格和設計稿，自己定義資料庫ERD，然後就開工了…
開發中途雖然有試跑測試檔，也知道會沒過，但判斷實在不是短時間能解決的，怕功能基本面做不完，就先不管測試檔了
一直到交作業前兩天的Twitter Q&A工作坊，討論到測試檔問題，才卯起來處理測試檔，而Dennis在這部分貢獻很大，還幫忙改了全部不符合測試檔的資料庫attributes命名，也多虧了Dennis，我們這組的測試檔通過才能多些項目，沒有差其他組太多。
技術上的收穫學習
- 即時計算呈現input欄位的字數
這部分其實單純使用javascript進行DOM操作馬上就能寫好了，說實話不難，重點是離2-1, 2-2有點遠了，一時不太熟悉，所以一開始沒想到，反而是研究了一下怎麼用jQuery達成。 - 即時驗證當下輸入的帳號可不可以使用
Ｄｅｍｏ ｗｅｂｓｉｔｅ
在帳號(account)具有獨一性，不能跟任何一位使用者重複的情況下，希望使用者或是管理員在進行註冊帳戶時，或是想重設帳號時，能在輸入時立即知道目前輸入的帳號可不可以使用，還是已經有人使用了！
就是比即時呈現字數多了個需要跟後端資料庫進行比對的過程。
不過一開始研究時，並沒有發現自己一直沒有要把抓到的資料傳至後端，而是一直想怎麼在前端取得資料庫的資料來比對。因此，一直研究怎麼發送ajax取得資料(get method)，但一直沒成功，所以就因為時間因素先擱置這個功能的開發。
後來是因為黑客松挑戰題接觸了socket.io套件，而這個套件的特色就是一次連線後，能很簡單的運用.emit()跟.on() 進行前後端資料的監聽傳輸。
所以就突然靈光一閃，覺得即時驗證帳號的功能似乎很適合運用這個套件來做。因為功能上希望達成只要input有任何鍵入或刪除字元就能即時比對資料庫給予提示語句，所以其實是需要一直反覆request, response的。
若是不使用socket的話，運用ajax先將input資料用post method到後端，在後端作資料庫比對後，將結果response回前端，再依結果進行DOM操作應該也是能順利完成功能。 - 上傳檔案的button，如何客製化
了解html label標籤的特性，用label包住input的話，點按label區域也可觸動input button，再運用CSS美化，就能使上傳檔案button不再是html預設的樣式，且能自由度較高的去修改。 - multer及imgur的多張圖片上傳
教案只示範了upload.single上傳單張圖片的方式，而要多張一起上傳的話，也不難，稍微查一下document其實就能知道怎麼寫了。
倒是imgur的部分，教案使用的套件還沒有document，又因時間緊迫關係沒時間查其他的imgur套件，所以就先在後端寫判斷及分流上傳完成。 - git與github操作
對於開分支、合併的操作更加熟悉一些，當然git還有很多操作技巧是還沒學到的。cherry-pick, 刪除commit, 操作遠端分支等等，都在進行這次專案開發時，多了解了一些。github部分，則是更了解pull request及review的操作，還有如何直接在github上修改code跟處理conflict。
黑客松衝刺挑戰 - socket.io的研究
黑客松部分，我們這組其實沒有衝刺開發，因為lighthouse上顯示的最終繳交時間為下週日，slack群組也沒有特別公告繳交時間，所以誤會了繳交期限，心情安排上，也誤會成有一週時間能衝刺開發挑戰1,2,3功能。
不過，還是有給自己設個2天要開發出挑戰一的壓力，所以最後還是能補交上挑戰一的部分。
一開始研究時，說實話document什麼的還是看不太懂，就是看示範了什麼code就先照做，然後在youtube看了數個關於使用socket.io做即時聊天室的影片，先跟著做，在慢慢去理解code的意思。週六晚上小組開會時，其實還有種完蛋了明天應該也研究不出來的感覺，結果深夜在練習時，就突然做出來了（灑花～～～
看著看著突然了解了資料從前端傳到後端，再從後端傳回前端的流程，也陸續了解如何監聽及接收連線和資料傳送的。
後續其實還有挑戰2、挑戰3的功能，有待研究開發，但兩週密集開發的成果進度就到這裡結束！
順利結案的秘訣？
聽說前幾班會有吵架到退出沒完成專案或拆組的，我想怎麼分組和怎麼順利結案這部分，AC也是很努力從每次經驗，去給出分組指引，我們這班看起來倒是蠻平和的，有參與專案的都有合作完成到最後！
秘訣感覺沒什麼好說的，就是組員間要有共識，願意溝通，接受彼此的優缺。而我們這組就是每次開會討論時，就算有不同意見，也能很快達成共識，所以合作都還蠻愉快的！
比較有意思的部分，是在開發挑戰題聊天室的時候，這邊可能算是我們組差點有點衝突的地方。要比較有效率完成聊天室，最佳分工一定還是前後分離，擅長切版的負責做出頁面，而負責後端的去研究socket.io做出功能。但會想走全端的人一定有個特點就是「我都想知道」！想知道從頭到尾這個功能的運作和呈現到底是怎麼做到的！所以 KOU 知道自己後端學得比較不紮實就自告奮勇要接下聊天室的頁面切版，但是開會時，又表示也想花時間在研究socket，因為想知道怎麼運作的。想學習都很好，所以最後我是這樣說的就不要管分工了，因為大家都有自己想研究的部分，就各自研究自己想研究的部分，有進度就推上自己的branch互相學習，這樣！
我自己就跑去切他切到一半的版了，至少有個基礎版面在，我不用從頭切也不錯www
部分的妥協也是需要的！還有就是正向看待所有決定！
結語
這個專案對我來說，其實還完全是個半成品，有太多功能都還沒完成，原有的功能，有些在測試上也還留有bugs！
還有許多的future works，也難怪「結束只是另一個開始」！
可以的話，絕對會再回來與組員繼續完善優化這個專案的功能和呈現！
協作真的很有意思，就算是peer review也是能幫助進步的！可能是你教別人，也可能是跟別人學習到新知，比起一個人埋頭寫自己的code，這樣有交流的code才更有意義與價值！
