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

## 網頁功能概述
主要是將 @dylan 與 @ader 兩個專案的合併，提供戶外行程路線地點的檢視以及可以記錄心得行程的開放論壇系統
其中又以[健行筆記](https://hiking.biji.co/)與[選山步道](https://meet-trail-right.firebaseapp.com/)的部份頁面作為功能與頁面的參考
再**以地圖搜尋為特色**，新增此功能增加差異性

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

#### [初版草擬wireframe](https://upload.cc/i1/2021/08/31/U7Gsnz.jpg)

### 首頁

<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 地圖側邊欄的路線地點列表
P2 結合地圖的搜尋功能
P2 結合地圖的篩選功能

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

以上是簡單測試做的基礎功能

### 登入註冊頁面
P1 最基礎登入功能
P2 firebase 串接
P3 Facebook or Google 驗證
P3 自己會員系統的信箱認證

### 文章列表
[參照頁面](https://meet-trail-right.firebaseapp.com/trails)
此頁會分**路線地點**列表，或是**心得記錄**列表，但功能頁面一樣

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

### 路線地點貼文頁
仿照[選山步道](https://meet-trail-right.firebaseapp.com/trails/detail/DiNPwidviqW21Qk5sKOA)及[健行筆記路線頁面](https://hiking.biji.co/index.php?q=trail&act=detail&id=76) 會員能瀏覽設定好路線的資訊
（目前P1規劃為我們自己手動輸入資料，其他會員只能瀏覽）

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 GPX路徑檔於地圖上顯示，並提供下載
P3 會員可以對地點提出修改建議，類似檢舉功能
P3 開放所有會員創建新地點，依照公版格式上傳資訊 如[步道選山提供步道](https://meet-trail-right.firebaseapp.com/trailCreate)

### 心得記錄文章頁
仿照 [健行筆記心得頁面](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. 管理員專屬易編輯的所有文章列表

### P3 功能另記

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

## 專案開發

### 時程規劃
（以下為 Lidemy 週次）
21、22、23週討論模型定案，包括所有頁面顯示、功能需求、API 文件及資料庫規劃等
24週 API測試、功能研究測試、資料庫模型後端環境建置
25週 前端切版+功能測試+後端資料連結
26週 前端切版+後端資料連結
27週 最後調整及部署

開一個 GitHub organization，在裡面開兩個 repo，類似學習系統，分成前端、後端兩個專案。