--- tags: Lidemy --- # 🤯 WANDER MAP說明書 ### 專案目的 **花開富貴ㄉ夥伴們**可以透過此作品展現導師計畫中所學的技術，並且結合生活體驗改善問題結合功能，從中學習新技術的應用。 ### 產品名稱 wandermap ### 產品簡介 提供戶外行程路線地點的檢視以及記錄心得行程的開放論壇平台 其中又以[健行筆記](https://hiking.biji.co/)與[選山步道](https://meet-trail-right.firebaseapp.com/)的部份頁面作為功能與頁面的參考 再**以地圖搜尋為特色**，主打此功能增加差異性，改善使用者體驗 ### 產品目標 使用者可以檢視閱覽路線及地點詳細的資訊 並且分享自己的行程記錄，提供一個開放的交流平台 --- ## 產品需求及功能 地圖瀏覽頁面 註冊登入系統 留言評論系統 部落格系統 搜尋及篩選功能 ### User Story #### 身分 1. 訪客（所有使用者） 2. 會員 3. 管理員 ### 首頁 P1 身為一個使用者，我希望能**縮放地圖**瀏覽各個標點，才能更快速的尋找目標 P1 身為一個使用者，我希望地圖上的各個標點能**顯示地點概略的資訊** P1 身為一個使用者，我希望在地圖的**側邊攔有地點貼文列表**，才能更快預覽 P2 身為一個使用者，我希望在地圖中有**搜尋功能**，才更精準地找尋目標需求 P2 身為一個使用者，我希望在地圖中有**篩選功能**，才能更有條理的篩選需求 p3 身為一個使用者，我希望除了 google maps 外，也**能切換到 Open Street Map** p3 身為一個使用者，我希望能在**使用 OSM 時也有上述功能**，才能滿足更進一步的戶外行程需求 ### 登入及註冊頁面 P1 身為一個訪客，我希望可以透過輸入 email、密碼**註冊**會員 P1 身為一個會員，我希望可以透過輸入 email、密碼**登入** P2 身為一個訪客，我希望可以透過輸入 Facebook, Google 帳號註冊會員（**firebase**） P2 身為一個會員，我希望可以透過輸入 Facebook, Google 帳號登入（**firebase**） P3 註冊驗證(email/token) ### 所有步道列表頁 P1 身為一個使用者，我希望在此頁**檢視所有路線地點**相關的貼文 P1 身為一個使用者，我希望有**搜尋功能**，才可以輸入關鍵字快速地尋找目標 P1 身為一個使用者，我希望在此頁上方有**分類標籤的篩選器**，才可以更精準的篩選需求 ### 所有心得列表頁 P1 身為一個使用者，我希望在此頁**檢視所有心得記錄**相關的文章 P1 身為一個使用者，我希望有**搜尋功能**，才可以輸入關鍵字快速地尋找目標 P1 身為一個使用者，我希望在此頁上方有**分類標籤的篩選器**，才可以更精準的篩選需求 ### 步道路線頁 P1 身為一個使用者，我希望能在貼文中**瀏覽**到該地點的文字說明、照片、天氣（中央氣象局API）、地圖座標（Google maps）等等資訊 P1 身為一個使用者，我希望能在貼文下方以**預覽圖示**的方式看到其他會員針對該地點所撰寫的心得記錄文章 P2 身為一個使用者，我希望能在貼文中的地圖使用 **OSM 及疊圖**瀏覽 P2 身為一個使用者，我希望能在貼文中的天氣區塊顯示更細節的資訊（**Windy** API） P2 身為一個使用者，我希望能看到路線地點以外的**其他週邊資訊**，如交通、入園申請等等 P2 身為一個會員，我希望能針對該路線地點**評分星等** P3 身為一個使用者，我希望能在地圖上**顯示 GPX**，並可以下載 P3 身為一個會員，我希望能針對此地點路線**提出修改建議** P3 身為一個會員，我希望能**自己創建新地點**，依照公版格式上傳資訊 ### 心得記錄頁 P1 身為一個使用者，我希望能在文章中**瀏覽**到該作者撰寫的圖文內容，及系統要求的必要資訊（出發時間、地點、分類等） P1 身為一個使用者，我希望能看到此文章下方**留言評論區**的內容 P1 身為一個會員，我希望在此文章下方的留言區任意**發布留言**、編輯刪除自己的留言 P1 身為一個會員，我希望能有針對該心得紀錄的**按讚功能**，以達到對作者撰寫內容的肯定 P2 身為一個使用者，我希望能在文末顯示其他**推薦相關的文章** P3 身為一個使用者，我希望能在此頁中瀏覽地圖及 **GPX，並且下載**（若作者也上傳 GPX） ### 會員個人主頁（公開） P1 身為一個使用者，我希望能在此頁瀏覽到該會員的**基本資訊** P1 身為一個使用者，我希望能在此頁瀏覽到該會員的**發布過的文章清單** P2 身為一個使用者，我希望能在此頁以**地圖的方式瀏覽**到該會員貢獻過的地點 P3 身為一個使用者，我希望能在此頁瀏覽到該會員的**成就獎章**等等 ### 會員個人主頁（後臺管理） P1 身為一個會員，我希望能**編輯**自己的**基本個人資訊** P1 身為一個會員，我希望能**管理**自己發佈過的**文章** P1 身為一個會員，我希望後臺能有 **todo list** 的個人裝備攜帶清單讓我使用 P3 身為一個會員，我希望後臺的 todo list 能**下載成 PDF** 檔或其他輸出格式 ### 心得記錄文章新增頁面 P1 身為一個會員，我希望能**撰寫編輯**我想發布的圖文內容 P1 身為一個會員，我希望能有設定文章**封面照**的功能 P1 身為一個會員，我希望能填入系統要求的**必要資訊**，才好讓文章做分類（如出發日期、分類、難度、地點等） P3 身為一個會員，我希望除了輸入座標點外，也能自己**上傳 GPX 檔**，好讓其他使用者閱覽 ### 路線地點貼文新增頁面 P1 身為一個管理員，我希望能**依照公版**填入該路線地點的資訊內容 P3 身為一個**會員**，我希望能**依照公版**填入該路線地點的資訊內容 ### 管理員後臺 P0 身為一個管理員，我希望能在上述的**所有頁面都有權限**刪改 P1 身為一個管理員，我希望在此頁能夠瀏覽所有**會員資料**，且編輯會員權限 P1 身為一個管理員，我希望在此頁能夠瀏覽編輯刪改所有**步道路線貼文** P1 身為一個管理員，我希望在此頁能夠瀏覽刪改所有**心得記錄文章** --- ## 專案開發 ### 開發工具 * Font-end：React * Back-end：express + sequelize * Database：MySQL * Deployment：AWS & Heroku * Wireframe：Figma、Zeplin * Flow Chart：draw.io、XMind、dbdiagram.io * Collaborate：Jira ### 模型規劃 [wireframe 網頁版](https://www.figma.com/file/yCZ3o8PNbNZDHIcX2odh2q/WanderMap?node-id=0%3A1) [wireframe 手機版](https://www.figma.com/file/z18BHqDmTa3CYwuYAtIm4c/%E6%89%8B%E6%A9%9F%E7%89%88-wireframe?node-id=0%3A1) [網頁流程圖](https://gitmind.com/app/doc/819d596851abce6f481e1fc20bd2713b) [功能架構圖](https://www.figma.com/file/FfygRXR7iwqei5upODs3uJ/%E5%8A%9F%E8%83%BD%E6%9E%B6%E6%A7%8B%E5%9C%96?node-id=0%3A1) [user flow](https://whimsical.com/user-flow-KZZHcksrFpVsZERH85MLYc) [Database](https://dbdiagram.io/d/61386313825b5b0146f81dd5) [API 文件](https://hackmd.io/GMJP6yXKQXCXAT4gDXsJPQ) ### 時程規劃 每周部屬測試 | 週次 |進度| | ------------------------- |--------------------| | Week0: W20 (8/23 - 8/29) |專案方向制定、協同模式討論| | Week1: W21 (8/30 - 9/5) |wireframe草圖、功能及頁面流程圖、user flow、資料庫規劃| | Week2: W22 (9/6 - 9/12) |wireframe設計（包括公版色系頁面logo）、資料庫規劃、API 規劃| | Week3: W23 (9/13 - 9/19) |wireframe定稿、開發環境就緒| | Week4: W24 (9/20 - 9/26) |純畫面切版、API 基本 CRUD、API 測試 | | Week5: W25 (9/27 - 10/3) |切版、功能測試、API 進階篩選/搜尋/權限管理、API 測試| | Week6: W26 (10/4 - 10/10) |切版、功能測試、後端安全性（cors、TLS、cookies、JWT 2.0 middleware、CSRF、Rate Limit）、API 測試| | Week7: W27 (10/11 - 10/17)|資料對接、功能測試| | Week8: W28 (10/18 - 10/24)|最後調整及部署| | Week9: W29 (10/25 - 10/31)|專案發布| |-|慶功宴lalalala 慶功宴去爬山!?!?|