---
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 慶功宴去爬山!?!?|