---
tags: Others
---
# 網頁需求專案整合-第1版

## 功能需求
P1
地圖瀏覽頁面
註冊登入系統
留言評論系統
部落格系統
搜尋及篩選功能

#### [初版草擬wireframe]()

### 首頁

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fzx1H11jN91nSou8VhKfflf%2FUntitled%3Fnode-id%3D0%253A1" allowfullscreen></iframe>

P1 地圖瀏覽縮放功能
P1 搜尋功能
P1 地圖側邊欄的路線地點列表
P1 結合地圖的搜尋功能
P1 結合地圖的篩選功能

p3 可以切換 google maps 成 OSM
P3 使用 OSM 且有以上功能

（地圖的標點連接資料庫不是太難，
比較需要花時間研究的應該是客製化這個頁面
能不能做得到想要呈現的樣子，實際可以互動）

以上是自己做的簡單基礎功能，但需要花時間的應該是之後該如何互動
可以簡單看看[github程式碼](https://github.com/ddylanlin/FP-test/blob/master/index.html)
若要實際clone測試，這程式碼內的金鑰限制是 localhost:5501 port

### 登入註冊頁面
P1 最基礎登入功能
P2 firebase 串接
P3 Facebook or Google 驗證

（登入頁面待設計）

### 文章列表
此頁會分**路線地點**列表，或是**心得記錄**列表，但功能頁面一樣

P1 搜尋功能
P1 依條件篩選功能
P1 顯示所有文章

https://meet-trail-right.firebaseapp.com/trails
可以直接 clone 吧，再決定文章的呈現方式是要 card 還是一行一行的 list
（**路線地點**列表用[card](https://hiking.biji.co/index.php?q=mountain&act=famous-list&id=1)? **心得記錄**列表用[list](https://hiking.biji.co/index.php?q=news)? *這細節可以再討論*）

### 路線地點貼文頁
仿照[選山步道](https://meet-trail-right.firebaseapp.com/trails/detail/DiNPwidviqW21Qk5sKOA)及[健行筆記路線頁面](https://hiking.biji.co/index.php?q=trail&act=detail&id=76)

P1 顯示該地點的資訊包括文字與圖片（難度、標籤等等）（*細節待討論*）
P1 顯示天氣資訊（串中央氣象局API）
P1 顯示地圖標點位 （google maps API）
P1 路線地點貼文頁下方顯示該地點的心得記錄貼文（以分類或地點關聯）如[健行筆記路線頁面下方](https://hiking.biji.co/index.php?q=trail&act=detail&id=76)

P2 進階顯示地圖標點位（OSM 疊圖）
P2 進階天氣資訊（串 Windy API）
P2 顯示其他交通資訊、公車資訊、入園申請等（*細節待補充討論*）
P2 登入的會員可以針對該路線地點評分星等（這是個滿小的功能但要另外設計頁面與算法需要放到P3嗎? 不過若做出來會有點小亮眼）

P3 GPX路徑檔於地圖上顯示，並提供下載
P3 會員可以對地點提出修改建議，類似檢舉功能

PS此頁的下方需要有**針對地點路線**的評論留言區嗎?（如[健行筆記路線頁面下方](https://hiking.biji.co/index.php?q=trail&act=detail&id=76)路線評論）

### 心得記錄文章頁
仿照 [健行筆記心得頁面](https://hiking.biji.co/index.php?q=review&act=info&review_id=19027)

P1 顯示該篇文章的標題作者日期等等（點閱? *細節待討論*）
P1 顯示該篇文章作者上傳的封面照及系統要求的必要資訊（出發時間、地點、分類等 *細節待討論*）
P1 顯示該篇文章作者撰寫的內容
P1 該篇文章的作者可以任意編輯修改刪除
P1 該篇文章最下方有留言評論區（會員登入即可發表、編輯、刪除自己的留言）

P2 針對該篇文章有按讚功能（其他會員登入即可按讚）
P2 文末顯示其他推薦相關文章（依分類或地點關聯）

P3 若作者有上傳GPX路徑檔，可以在此頁面中顯示並提供他人下載

### 會員個人主頁（公開）
P1 顯示該會員基本資訊
P1 顯示該會員發佈過的文章資訊內容

P2 有地圖或列表可以顯示貢獻過的地點及去過的地點

P3 顯示會員成就，累積成就獎章（*待設計*）

### 會員個人主頁（後臺功能）
P1 會員可以編輯個人檔案（*細節待討論*）
P1 會員可以管理發佈過的文章資訊內容（編輯、刪除）
P1 todolist 個人清單

P3 todolist 個人攜帶清單下載成PDF

### 心得記錄文章新增頁面
參考[健行筆記分享心得頁](https://hiking.biji.co/index.php?q=review&act=write_review&type=article)

P1 基本文章發布功能
P1 設定上傳文章封面照
P1 填入心得頁面的必要資訊（如出發日期、分類、難度、地點等，*細節待討論*）

P3 GPX 路徑檔上傳

（版面待設計）

### 管理員後臺

除了可以做到任何功能，並且在任何頁面都有權限編輯刪除外
還需要刻一個專屬的後台頁面嗎？

1. 新增路線地點的頁面
2. 管理員專屬好閱覽的的所有文章列表（不顯示圖片以list方式 表格方式?）

### P3 功能另記

1. 所有 GPX 及疊圖功能
2. 地圖、路線、todolist可供轉成PDF下載（*細節待研究*）
3. 路線地點開放所有會員創建新地點，依照公版格式上傳資訊 如[步道選山提供步道](https://meet-trail-right.firebaseapp.com/trailCreate)