Skip to content

Latest commit

 

History

History
93 lines (71 loc) · 6.72 KB

README.md

File metadata and controls

93 lines (71 loc) · 6.72 KB
Raw

[107-2] Web Programming Final (Group 38) Travel Doc

Description

A collaborative platform for peolple to plan their trip together with rich text editor and Google Map.

Deploy & Demo Link

How to Use

git clone [email protected]:kerorojason/trav-doc.git
cd trav-doc
npm install
npm run dev

不同使用者可以共同編輯左邊的文件，並且加上粗體、斜體、螢光筆、列表、程式碼區塊等格式，在文件中打"@"會跳出所有加入最愛的景點名稱，選擇後會在文件中加入淺藍底色的超連結，點擊連結後右邊的地圖會跳到此景點。 右半邊的地圖搜尋景點後點選加入最愛，即可和其他使用者分享這些景點，選擇兩個景點後點擊計算路程按鈕(汽車、行人、大眾工具)即可得到兩個景點間的推薦路線和路徑時間。

System Description

  • Front-end
    • 因為我們的整個網頁主要只有一個工作頁面，沒有太多的Component，所以決定不使用Redux來儲存state，而是用lifting state up 的方式來傳遞state。
    • 所有使用者共享的state（title, editorState, userAddedPlaces）都在App Component利用Web Socket和server做傳遞。
    • 地圖的部分是使用了Google Maps JavaSvript API
  • Back-end
    • 後端最困難的部分應該就是文件的共同編輯，為了解決複雜的編輯衝突，每個使用者的文件狀態更新後就會把文件狀態傳給server，server內會維持一個自己的文件狀態，每次收到使用者傳來的狀態，server就會把兩個狀態做diff，並且把diff broadcast給所有使用者，使用者再各自和自己的當前狀態patch產生新的狀態，用這樣的方式可以減少傳輸的資料量。
    • 後端使用cache儲存當前的狀態以減短存取時間，所以只要server開著這些狀態就會留著，當使用者按下save按鈕後狀態才會儲存到資料庫永久保存。

Module Used

  • Front-end
    • Editor:
      • draft.js: editor component
      • draft-js-plugins-editor: image drag and upload, mention
      • debounce: debounce cursor moving event
    • Map :
      • google-map-react
  • Back-end
    • WebSocket
    • express-session
    • body-parser
    • uuid
    • jsondiffpatch
    • axios

Reference

Contributions

  • 王賀(前後端整合):

    1. Editor(前後端、共同編輯)
    2. Editor和GoogleMap之間傳遞景點資訊。
    3. BackEnd(讓Editor和GoogleMap可以協作，並把狀態記錄在資料庫中)

  • 湯昀翔(前端):

    1. 版面設計
    2. Map基底(Map搜尋、標註、縮放等)
    3. 側邊欄的資料顯示
    4. 製作報告

  • 郭芛宏(前端):

    1. Map進階功能(導航等)
    2. 側邊欄導航資料顯示
    3. PIXNET的資料搜尋(因版面及作用有限最終沒放進來)

Review

  • 王賀:

    • 這個project應該是我的github裡面最多commit數的專案，但是如果仔細看commit的內容會發現雜亂不堪QQ，對於git flow不熟，所以我們的專案只有一個branch，導致常常有conflict，之後真的要找時間熟悉git flow。
    • 這次我主要負責共同編輯器的前端和後端，原本以為這個專案的重點應該是前端，沒想到文件共同編輯的後端比想像的還複雜很多，要解決多個使用者的編輯衝突，在後端維持一個正確的狀態再廣播給所有使用者，還要連到資料庫讓狀態可以保存，所以最後在時間緊迫的狀況下就沒有登入和文件管理的功能，只有單個編輯頁面。
    • 原本想在專案中使用最近學到的新潮技術（GraphQL、Redux） 但是想架構的過程覺得使用技術前還是要把需求想清楚，不要盲目使用，所以最後沒有採用，最後覺得寫起來也蠻順的，倒是後端因為比較不熟，所以在遇到問題的時候只能上網慢慢爬文，最後結果也還有很大的進步空間。

  • 湯昀翔:

    • 雖然之前有開發過小小的網頁介面(用html+css+js手刻)，但到這學期才第一次接觸Reactjs、Nodejs及各種框架的相關東西，覺得這門課帶給我們對網頁的遠見及視野。一個好的網頁不單單只是呈現資料，也不如大家所見的簡單，前後端如何設計的精巧、簡便、好維護更是重點，很高興老師能帶我們入門Reactjs、Nodejs(Express)、GraphQL等強大的開發工具，讓我們能在網頁開發之路上找對方向繼續的鑽研。

    • 另外，在這次的期末專案中，我負責的項目主要是前端開發，重新開發地圖的相關功能及版面配置。做著做著開始覺得Google對台灣真的有點讓人上癮離不開她，像是Google Map API要收錢，我們也只能乖乖地繳了，不然使用的人就要重新想一個辦法開發，老師上課所講的台灣軟體產業真的要加油，應然成讖。

    • 最後，期許自己能好好注重軟體思維，不要全用硬體的角度去做事(雖然自己的系是機電工程)。也感謝倒數第二堂優拓公司的演講(覺得很不錯，若老師下次開課一定要再邀請)，聽到大神們在這個領域的精闢解說，讓我有新的目標及方向去努力(開源以及去老師的公司實習<與神同行>)。

    • PS: ㄚㄚㄚ有人要組隊去挑戰痞客邦嗎? 7/10報名結束QQ

  • 郭芛宏:

    • 這學期的網頁課程，各種框架、資料庫、模組幾乎都是首次接觸，在期末作業的過程中也依然時常需要查資料，實在是相當充實的一門課。期末作業的題目我們考慮了很久，最終之所以會做行程的共同編輯，其實是剛好知道了痞克邦將會舉辦以旅遊為主題的黑客松，便以此為發想。原本有打算使用痞客邦的API，讓使用者可以查詢旅遊相關文章等，但實作後卻發現作用有限，版面大小限制下，文章需要在另外的頁面開啟，而且內容和Travel Doc的其他部分聯繫有限，所以最後沒放進來。

    • 另外值得一提的，期末作業需要多人協作，這也是我們之前所沒有經驗過的，剛開始對於git的branch與merge可說是一頭霧水，幸好github提供的GUI很容易理解與上手;中間合作與解決問題的過程其實還蠻有趣的，因為react需要考慮parent與child component之間的溝通，在設計與分工寫不同component時就需要仔細的考慮與溝通；也遇過莫名其秒某組員的電腦就能run而其他人就報錯的情況。