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


Posted by yunanpan on 2021-01-18

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


源起

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

前置作業

  1. 想 logo:就是個拉著行李箱旅行的人。
  2. 想 wireframe:本來想自己一人做專案,所以 wireframe 的部分很隨意的用手畫(後續苦了組員 ianchen 看著我的手繪通靈),主色調的部分就直接將頁面刻好後才去試。
    選色網站:NIPPON COLORSBrandColors
  3. 和組員分工:一開始是先用頁面來分工,而當大部分功能都完成後,後續則是去看 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


無聊的小事

一開始隨便取作 hit the road,感覺就是很隨意就可以上路去旅行囉,結果取好的那天在看 How I Met Your Mother 中就出現了這句話,忘記是 Marshall 要出發去哪,可能是那個老鼠肆虐關閉的 pizza 店,就講出了這句話,於是就這樣確定了~










Related Posts

Module build failed (from ./node_modules/sass-loader/dist/cjs.js)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js)

[自己架網站] 部署 AWS EC2 主機 + LAMP server + phpMyAdmin

[自己架網站] 部署 AWS EC2 主機 + LAMP server + phpMyAdmin

2. 時間複雜度 (下篇)

2. 時間複雜度 (下篇)


Comments