hit the road (final project) 雜七雜八心得

在此紀錄一下實作 final project - hit the road 行程規劃網站的過程。
demo 網站可以點此。
GitHub 可以點此。

源起

在參加 Lidemy 第四期程式導師計畫初期，就有想過 final project 想要做行程規劃的網站，一切都是單純因為我自己很愛排行程，有行程排我就快樂。（規劃行程為什麼快樂呢？可參考怪奇事務所說明XD）
自己在排行程或是無聊幫別人排行程的時候，大部分都是用 Google 地圖搭配表單線上編輯，丟一些想去的點，想吃的東西，再去看怎麼塞到每天的行程中。所以就以自己習慣規劃行程的方法開始想網站的功能、user story、wireframe、資料庫架構是要怎麼辦等等。
其實最一開始除了排行程外，還有想要做行程結束後寫遊記並排成相簿的功能。完全也是因為我自己時常排照片、畫插圖、寫遊記，這些事情做到一半都直接放棄，想說如果可以直接做成相簿的功能也蠻好的（不過生菜同學表示，應該是要杜絕自己的廢病才是正解XD）。不過因為時間等因素，就想說第一版先做規劃行程的功能就好了。

前置作業

想 logo：就是個拉著行李箱旅行的人。
想 wireframe：本來想自己一人做專案，所以 wireframe 的部分很隨意的用手畫（後續苦了組員 ianchen 看著我的手繪通靈），主色調的部分就直接將頁面刻好後才去試。
選色網站：NIPPON COLORS、BrandColors
和組員分工：一開始是先用頁面來分工，而當大部分功能都完成後，後續則是去看 board 上還有哪些東西要做。主要使用 JIRA，除了可以看還剩下多少工作要做，也比較容易評估自己的工作狀態。基本上每天都會看一下彼此的進度，一星期合一次專案。
連去我的讚讚組員 GitHub：ianchen，後端都靠他 cover。

時程 & 過程

hit the road 網站主要進行了四週，後續則是微調一些版面問題。大致上各週進度如下：
第一週：畫面切版/ 規劃行程功能開發
第二週：react-beautiful-dnd 實作便利貼功能/ 串 fb 登入功能/ 確認資料庫架構
第三週：Google Maps API/ 後端 API 開發
第四週：規劃行程功能改串後端 API/ 修後端 API/ 把 icon 畫一畫

因為一開始在試功能時是直接將 initial state 設定成假的資料，後續等後端 API 建立好後再去串，難免會碰到跟想像中不一樣，或是發現一開始設計的資料庫 table 需要再多哪些欄位。在這期間，可以學習到如何和後端溝通與討論，以達成功能的實作。
而如何使用套件，像是 react-beautiful-dnd、google-map-react，基本上就是先跟著官網做再去改成專案裡面可以用的程式碼，或是如果網路上有實作的範例的話，跟著一起做也可以減少摸索的時間。在此再次感謝 Clay 助教寫的〈七天打造自己的 Google Map 應用入門〉系列。

心得

此專案還有很多可以改進的空間，或者是想做的事，後續還是會想繼續嘗試看看。但截至此文發出的時間，大概就是讓第一版先暫定如此了。因為從專案的發想到實作是自己和組員一起想的，所以如果中間有什麼問題，都是挖坑給自己跳，或是給對方跳XD 但爬出來的途中也覺得是蠻有趣的（或是被自己的蠢震驚到）。在實作中同時也讓自己有所挑戰和學習，或許就是寫程式的樂趣之一吧～希望從這一篇開始，後續也可以生一些文章，回頭看課程初期，我還有閒情逸致在那畫圖XD