JavaScript 畢業專案

Nina
Jul 21, 2021

GitHub

Heroku|歡迎使用測試帳密登入
信箱:user1@example.com
密碼:12345678

廢話不多說,先放上首頁圖🤣

index.hbs

經過了12週的課程內容,我終於進入了最後一個學期,能夠打造完整專案的課程。也在學習最後一個學期的一個月之後,開始了我們的畢業專案製作。

這次專案的內容,是希望我們能做出一個簡易的社群網站。
我們這組三個人都是選擇全端的課程,所以我們要做的是有 MVC 架構的全端開發。

開會日記

6/30 WEN

在 slack 社群上找到了我的兩個組員。

7/3 SAT

這天我們開了第一次的會議。
過程都還蠻順利的,但是我打程式的時間集中在早上,另外兩個組員因為早上要上班的關係,則是晚上才比較有空。最後我們開會的時間都只能在假日的下午,或是平日的十一點後。

因為在開會之前就已經做好了 資料架構 還有 MVC 的命名,所以我們稍微討論修改之後,就用 Trello 分配了各自的工作。
我們的目標就是在最短的時間內,串接完所有的路由,每個人都把自己負責的路由內部的邏輯和資料都做好,渲染畫面的部分也是每個人都要做。

7/6 TUE

第二次會議。
這天我覺得對我自己來說是很重要的一次會議,雖然不是第一次分組合作專案之類的,但合作程式開發是頭一次,而且還是遠端的合作,所以剛開始真的有點忐忑。
但這天的會議完全讓我消除了這種忐忑,也完全信任我的組員,能夠做出符合彼此期待的專案。

7/10 SAT

第三次會議。
總共有 31 隻路由,只剩下兩三隻還沒完全做完,可以開始進入測試跟優化的階段了。

這天我們才有了前後端的分工。
因為我之前大學念設計相關的科系,對測試也不是很在行,
而他們兩位也很信任我,願意把前端畫面通通交給我做。

於是我的兩位組員負責讓所有的測試通過,我則負責把原本就已經做好的 18 個 Handlebars 的檔案優化。

其實課程內容原本希望我們做的是像這個樣子:

圖片來源:Alpha Camp

但我當時完全沒想太多,也沒有問過是不是可以更改設計,單純覺得只要畫面可以通過 前端 UI/UX 檢查表 的檢查就可以了吧~

後來才知道,原來應該是要照設計稿做,100% 是基本的……

因為繳交時間是 7/16 中午 12:00 所以我只剩下不到一個禮拜的時間,需要設計畫面的排版、顏色、字型等等,最後還需要實作。
我希望能把實作時間盡可能的拉到最大,所以前期的設計我幾乎沒花什麼時間,在 pinterest 上面看一下範例就開始做了。

社群網站 MoNiEr

雖然時間很急迫,但我還是想要在登入頁面有一個專屬的 LOGO ,所以大概只花了十分鐘,做了一個非常簡易的 icon ,MoNiEr 是我們三個人的英文名字合在一起,這個名字我也完全就是照直覺下去做的哈哈。

MOMOJ / NINA / ERWIN

排序也沒有什麼特別的意義,就單純這樣唸起來很順🤣

顏色就使用黃黑配色,風格可愛輕鬆。

就這樣整整一個禮拜,我幾乎是除了吃飯睡覺以外的時間,都在打程式。因為畫面做完了之後,還需要跟後端新更改的程式碼對接,還需要推上 Heroku 才算完成。

於是在 7/12–13 這天,我和 MO 整晚沒有睡,一直做到早上七點,把合併完成,讓 ER 接手把剩下的 Heroku 做完。

最後我們終於非常驚險的在 11:59 交出專案。
我們完完全全沒有故意這麼做,真的是趕在最後一刻終於送出。

當下可以說是無比的感動啊 ☺️ 欣喜若狂的程度

Photo by Eddy Billard on Unsplash

遇到的困難

測試檔

測試檔的部分我們卡了很久,因為測試本來就是不能更改的,很多時候我們照著做了,看起來都有符合測試要的規範,但跑起測試來,就是沒有過,很感謝我的組員們完成了測試。

GitHub 協作

GitHub PR 的時後,因為多人協作的關係,會有很多限制,我跟 ER 都沒有這方面的經驗,一開始真的手忙腳亂,不知道該怎麼做,還好就是做到後來完全就是一片小蛋糕,在打 Git 指令的時候,不會再害怕了😂

變數和資料夾命名

這個問題真的應該越早解決越好,兩個人打不一樣的,一開始還好,但合併的時候,同樣的內容,有時候只是大小寫的差異,在 PR 的時候真的會浪費很多時間,應該要在一開始發現的當下,就馬上小組討論出最適合的命名,這樣之後就不用再花時間修改。

Handlebars / main

我們是使用 Handlebars 來渲染畫面,剛開始把 A畫面先放在共同渲染的頁面裡,讓每個頁面都能看到A畫面。
後來因為 B畫面沒有不需要渲染 A畫面,所以又把A畫面移入所有需要他的畫面裡。

就是這件事,困擾我們三個人很久啊。常常合併就跑版,A畫面被移來移去,真的很浪費時間。

如果有下次,我會希望一開始都不要有共同畫面,全部寫死,最後再優化就好了。

最後跟大家分享一下我們的成果,真的每一頁都是我們的心血啊~
而且我真的每一頁都很喜歡☺️真的超好看的~
可以做出自己喜歡的版面真的很開心歐歐~謝謝我的兩位組員~

--

--

Nina

大學設計系剛畢業,最近在學 js ,希望可以轉職軟體工程師。