這次是人生第一次進行多人協作專案
其實在課程一開始，就非常期待這個協作的環節
除了期待外，還很害怕成為團隊裡的大雷包！！
而且我們又是唯一一組用前後端分離方式開發的小組，
這真的讓人感到很抖抖呀~
究竟～～文科我有沒有成為雷包呢？
就讓我們繼續看下去～～～～
小組成員
首先介紹我的們小組成員！
除了我以外，還有兩位非常優秀的全端組同學Yi、Ezra
不得不說他們兩位真的很強大，才能讓文科我專心切版
文科負責哪一個部分？
因為文科是選前端組，所以負責的部分就是前端。
這次用的是Vue.js進行前端的部分。
內容主要就分為切版和串後端給的API~
分隔三地的協作方式
我們三個人個別分散在不同的地區，分別是台北、桃園、台中。
所以就算我們有時間，也沒辦法大家聚在同一個地區一起衝。
也是因為這樣，我們主要都是用線上會議的方式進行討論。
現在想想我們那幾天的生活好像大家都綁在一起，
隨時開會議，或是隨時有問題就在群組大喊XD
兩週共同奮戰的歷程
從kick off會議開啟冒險之旅
在確認組別後，我們很快就開了一次會議。
最主要是要確認：
1. 我們要怎麼開始？
2.全端作業和前後分離的差異在哪，前端怎麼拿後端的資料？
由於全端組主要教學內容都是以全端進行課程，
所以全端組的成員這次是第一次接觸前後分離。
身為前端組的我則是教案內容都是前後分離(廢話)，
所以比較知道我這裡要做的事情主要是什麼。
不過因為我還沒去上全端組的課，
所以其實不太清楚實際上後端的實作內容有哪些。
(我會慢慢把課程內容補上回來ㅠ...)
釐清完前後端分離的狀況大概是怎樣後，
我們也討論要什麼東西來管理我們的專案～
一開始我提供了以下這兩種東西
1. 以前自己做的google表單時程表(需各別自行填寫)
=>主要用途在共享大項目的預計完成時程給小組成員，
也就比較好互相配合時間點進行一些作業上的進度調整。
不過最後其他組員沒有填寫這個表，直接使用了Trello，
所以就變成這個表裡面只有我自己的開發時程QQ
2. 用Trello掌握進行中的進度
=>主要用途是即時看到現在進行中的進度，前後端雙方就能知道對方大概進行到哪裡。
不過因為沒有預計完成時程，所以真的只有看版上的時程有動靜，才可以知道各自進度，
無法用預估時間去調整自己部份的速度。
需要討論就來個會議邀請
因為是前後端分離，所以前面有四天我就專注在自己的小世界裡，
但是我知道後端的組員們經常是開線上會議掛網，
需要時就會直接開麥克風呼叫對方。
我這邊的話，則是有需要時，後端夥伴會呼喊我的名字，
我就會加入會議一起進行討論。
一人前端的孤獨開發時光
一開始我把我負責部分的作業流程分為三個部分，
分別是「切版」、「套假資料做功能」、「串API」。
因為前端只有我一位，所以我真的非常擔心我在切版階段就已經拖累大家，
因此我要求自己在前四天內完成所有頁面的切版、三天內用假資料完成功能開發。
雖然途中有遇到不少阻礙，但是不管是切版還是假資料功能開發階段，
都有順利在我預計的時間內完成，直到實際串API時才遇到比較大的問題。
當有問題出現時，因為在前端這一部分，我沒有夥伴可以討論，所以大多數時候，就只能上網找解答。
這時候就很羨慕後端同學，有同組的同學可以互相討論><
不過如果跟後端有關的東西，我就會呼叫後端同學，向他們求救。
從遇到問題到解決問題
不管是切版，還是串API，
這之中都有遇到一些大大小小的問題。
以切版來說的話，就有遇到我會用bootstrap的modal，
但卻不知道要怎麼自己手刻出這個功能的狀況。
於是就開始拜google大神，求明牌~
最後還真的被我做出來了，真的超感動。
也讓我深刻體悟到「工具除了會用，還是要了解背後原理」這一點。
另外有些頁面在串完API後，也遇到了一些資料無法立即同步的問題。
為了解決這些問題，我一開始會先用各種我知道的方式去調整，
像是監控資料是否有變化，或是把資料從父層帶進去。
在這部分令我最印象是在個人資料區編輯完資料後，
無法自動同步個人資料頁上資料的問題。
嘗試了幾種方式後，發現只有刷新頁面可以解決，
所以我開始上網查vue是不是有能供控制頁面刷新的功能。
果然!!!還真的被我找到了，試了好幾種版本的用法，
最後也真的被我試出來了！
那一刻，我彷彿贏得了全世界XDD
真的不誇張！
向助教求救的時間點
一開始我們都不知道我們小組的助教是誰，
但我希望是PJ助教，也沒有什麼特殊的原因，
就只是因為前端教案vue的部分都是PJ助教錄的教學內容XD
結果一揭曉~我們組的助教還真的是PJ助教(歡呼)
每一組都只有一小時能找助教諮詢(?)的時間，
所以非常需要好好善用這一小時。
也因為知道助教自己也很忙，不想一直吵助教，
所以我自己的想法是不管是什麼問題，
都要自己試過很多方法後，真的覺得走投無路才向助教求救。
這個走投無路感在我串API時出現了一次，
真的不管怎麼用，都不太對，也想不出為什麼會這樣，
所以那次我們就用了剩餘的助教諮詢時間
(一開始後端有重大問題，所以已經用掉部分扣打)。
那次的助教諮詢時間真的非常感謝助教那麼晚還陪著我們一起看問題出在哪，
不過小女資質愚鈍，其實在助教指點迷津後，並沒有在當下就了解是哪裡出了問題，
直到諮詢時間結束後，自己再次時做嘗試，才知道自己在哪耍笨了...
總之，真的非常感謝助教這段時間的幫助。
惱人的神奇bug
在經過助教指點之後，我們原本以為可以很順利地衝到終點，
結果卻發現了追蹤功能有問題@@
追蹤功能會有追蹤兩個以上的使用者，
但從中按一個使用者取消追蹤後卻會重置使用者的追蹤狀態。
為了這個問題，我們小組還開了一下午的會議，但還是沒找到原因。
由於諮詢時間已經用光，也無法再找助教緊急支援了，
所以在繳交期限到了的時候，還是先以這樣的狀態把基本功能部分先交出去了。
不過在專案完成之後，人非常好的助教還是有來幫小組指點這個問題出在哪。
而且就在今天！！我們強大的組長Yi大大通知我，問題已經修好了。
真的是感恩讚嘆啊！！！
推送到github pages的那一刻
在完成所以基本功能後，就剩下我這裡要佈署的步驟了~
對！！這個時候的我又雷到大家一次了QQ
我按照進行教案內容時的步驟，進行推送，
但是就是一直出現問題，大概花了一個小時，
才發現用clone用的http網址推送就沒問題了...
原本一直用SSH，但是系統一直跟我要key...
可是進行課程教案內容時，我是用SSH，都可以正常使用的說~~
總之~這個部分雖然雷到隊友，但也算一種學習啊！
貼心提醒～到這裡為止，都只是基本功能開發的部分喔！
首次體驗黑客松的甘苦談(?)
在完成基本功能後，還必須再撐個三天！！
但是這後面三天才是最煎熬的日子，
因為黑客松挑戰題的內容不是課程上的內容，
所以必須靠自己去查資料，看文件。
挑戰題是要用Socket做一個即時聊天室，
在大概看了一下官方文件後，我決定先用關鍵字查相關資料。
先看中文的資料，但是資料都好雜，越看越不懂。
於是我又用韓文查了相關的資料，沒想到被我查了一個說明很詳細的文章。
這時候才比較知道Socket的整個使用方式。
和其他兩位同學大概討論了一下後，我們就開始各自展開自己負責的部分了。
我這裡也是先從切版開始，不過頁面只有一個，所以沒有花很多時間，
就把版切得差不多了，只剩下微調的部分。
接著我這還有一個部分是「思考要怎麼讓聊天訊息可以依照是不是本人分兩邊顯示」，
這部分雖然也花了點時間，不過還是想到解法了。
=>用v-for把資料渲染出去，每次渲染的一組HTML都包含自己和別人訊息的樣式，
再透過v-if判斷要顯示哪個部份的HTML。
接著後端那也進行得差不多後，我們就決定先把前後端結合在一起，
把聊天功能實作出來。
倒數計時的兩次熬夜時刻
在決定先把前後端結合在一起後，那時已經是禮拜五的晚上11點多了。
但是我這裡卻很奇怪地一直無法正常運作，
可是明明就已經依照正確的方式設定socket，
卻還是沒有反應。和其他兩位同學也討論了差不多了，
時間也滿晚了，我們就先各自散會，雖然我這裡的問題還是沒有解決...
因為我真的很怕連累大家，所以我下定決心「不把socket的功能完成，
今晚就不睡！」
就這樣開始上網繼續查別人實作的狀況，繼續各種嘗試。
終於！！！在凌晨三點多的時候讓聊天功能可以正常使用了！！！
這就是我的第一次熬夜時刻～
雖然可以多方同時連線發送訊息了，但是還是分辨身分這個部分，
還是沒有做出來，所以接著隔天八點多起床，又開始思考要如何解決這個問題。
一開始想的方法是用現在登入者的id將資料傳入後端，也推入vue data要渲染用的陣列，
但是發現一個嚴重的問題，就是存到data的id不管是自己還是別人的訊息，
全都會變成當下使用者的id。
於是就和後端同學們一起討論是不是還有別的解法，後端同學決定是是看用socket id給使用者一個個別的id，
不過實際實作後，如果把socket id存到 vue data裡當作比對是否為本人的參考id，
一樣有原本的問題，也就是id會全部都變成當下的登入者資料。
=>這也就代表比對的資料不能從data取
這個時候已經是禮拜六晚上11點多了~
大家決定各自解決尚未解決的問題，
我這裡負責的當然也就是一直卡住的聊天室依照身分渲染的問題。
我這裡重新查看之前看的資料研究，還有研究別人寫的程式碼，
我發現有人把推資料的步驟放在socket.on並且資料從socket拿。所以這次我把推資料的步驟，
一樣放在socket.on，但推的資料內容不從vue取，沒想到真的成功存到個別的id了！！！
此時已經是禮拜日早上三點多
完成功能後，我重新思考為什麼這樣行得通，和整個流程到底做了哪些動作，分析如下：
1.監聽發送鈕click事件
=>進行socket.emit的chat事件，把用v-model取得的訊息內容帶進去，
還需要存入id、avatar等資料，所以我用先宣告成物件，把資料放在一起。
2.設定一個推資料到渲染用陣列的method
=>原本資料是另外創一個推到chat事件的陣列推入，改成資料從socket.on拿到的資料帶，
並且在拿到socket.on資料的步驟，啟動這個method。
這裡是關鍵步驟，因為id資料不會隨著當前使用者而改變。
如此一來，就能拿到正確的id資料，也能判斷是否是本人的訊息了。
三點多主要功能完成了，但是我發現聊天窗的捲軸消失了，所以一直查資料把消失的捲軸找回來。
我用overflow，超出框框的內容有被隱藏，但是捲軸就是沒出現，
我把設定的捲軸客製化部分註解掉，捲軸出現了，但不能滑動，呈現disabled的狀態
我查了好久的資料，都沒有答案。最後是自己發現，設定捲軸的那部分，有設定flexbox相關設定，
導致捲軸無法顯示。找到原因後，針對這部分修正，順利完成
這時候已經早上五點多，也就是我熬夜的第二個時刻~~
雖然累，但是自己該負責的部分，還是有完成，所以心裡其實很滿足。
完成專案的收穫
除了透過解決專案中出現的問題，學到了一些技能外，
自己覺得在這次的專案中，還有以下這些收穫。
1. 了解到和別人一起分工合作完成專案的過程大概會是什麼樣子。
2. 練習自己查找資料的過程。
3. 強化了自我管理的能力。
4. 更明確地知道自己決定專攻前端是正確的選擇。
5. 從組員身上學到了很多，也和組員變成了朋友XDD
最後我想說
感謝兩位神隊友，讓整個專案圓滿地完成了。
雖然我偶爾雷到大家，但大家都還是很包容我，
也很願意互相溝通，積極度還超級高，
我們這組真的都超棒der~
另外要感謝我的媽媽和我的室友 :)
這幾天因為專注力都放在專案上，
只要是沒有回娘家的日子，
基本上一整天都不吃不喝的專注在專案上。
一回娘家則是都讓媽媽餵食，吃完飯也沒自己收拾殘局，
都是媽媽幫我收。
室友則是在我熬夜到早上五點多的時候，
人很好地幫我泡了一杯B群給我喝，
我累倒在客廳後，又幫我把我的被子拿出來給我蓋。
沒有家人們的支持與幫助，我想我應該也沒辦法撐到最後一天！
這個難得的協作專案初體驗，真的讓我收穫好多，
也很高興自己成功做到了！！！
打工仔人森 (3)