Final Project
===
組長：b09901064 陳亭瑋
組員：b09901162 陳冠霖
組員：b09901065 黃語棠
***
## deploy link: [wpfinalproject-production-44aa.up.railway.app](https://wpfinalproject-production-44aa.up.railway.app)
### 本地安裝與測試方法：
* 下載與安裝:

git clone 
cd ./final
yarn download

* 測試:（請在backend裡新增一個的.env並加上自己的參數MONGO_URL）

yarn server
yarn start      //in another terminal

* deploy:(本地測試不需要)

yarn build
yarn deploy

***
### 有關這個網頁：
* 網頁主題：我們做的是一個可以對不同種類議題，包括了台大、政治和感情等，發表正反意見和吵架的論壇，彌補了一般社群平台對於意見整理的不足，以及公共政策網路平台對於議題多元性的欠卻。
* 主題發想：主題發想於於平常想吵架，但卻沒地方可吵，或沒有議題可以吵，又怕傷害到周遭的人的感情，所以想找一個地方可以盡情宣洩（可能吧）自己的怒氣和尋求意見。
* 未來展望：我們希望能修改前後端的機制，加速資料傳遞進行，以供更大量的使用者同時使用，讓大家有地方可以匿名好好吵架，抒發壓力。甚至在優化前端後，可以成為大家常用的社群平台。

***
### 使用工具：
* 前端：
* 使用react.js。
* 使用模板[react-material-admin](https://github.com/flatlogic/react-material-admin?fbclid=IwAR2E7_MWrGClG3XqrAVO6ZQftN-d1UOBgIZy9m840QrE-mAG72cAkP29VjU)並且大幅修改，僅留下sidebar和header的格式。
* 使用material UI的component。
* 後端：
* 使用node.js、express.js。
* 使用websocket作為前後端連接的工具。
* 資料庫：
* 使用Mongo DB作為儲存資料庫。
* 其他：
* 使用yarn管理支援。
* 使用github作為協作工具。
* 使用dockerfile打包。
* 使用railway作為deploy途徑。
* 參考hw7、hack2代碼。
***
### 功能介紹：
* /login:
* 註冊以及登錄頁面，如果沒登入或按登出或重新整理會到這頁。
* 註冊時如果名稱或帳號或密碼與其他人重複會顯示"Something is wrong"
* 有時會卡住請重新整理。
* 密碼如果設太簡單可能會有google預設的密碼外洩通知，請設定長一點。
* 

* /app/dashboard:
* 登入後會自動跳轉到此頁，會顯示所有po文，可以按右上角的按鈕來更換最新或熱門排列。
* 最左邊的sidebar有主頁Dashboard及創建新貼文Create New Post，左上角箭頭可以按下並收起/展開sidebar。
* 上面會有一列按鈕可以依照不同的主題來更換po文類型。
* 切換時會有轉圈圈的loading提示，因為貼文是從database抓的，所以可能會花五到十秒，請耐心等候。如果真的跑不出來可以重新整理重新登入試看看。
* 文章卡片資訊有貼文作者名字、看板、標題、圖片、內文、時間、讚、倒讚、留言數。 內文若超過五十個字會截掉。
* 可以按po文上的讚以及倒讚（可能會有點延遲（約五秒），請耐心等按鈕狀態改變再按下一個讚或倒讚）。
* 文章到底後可以按顯示更多按鈕，如果還有文章會顯示出來。
* 點擊貼文會跳到文章頁面。
* 
* 右上角有通知以及個人資訊按鈕。
* 若有人在你的文章或留言下回覆便會有黃色的提示在通知按鈕上。
* 按下按鈕會展開通知，按該通知會跳轉到該po文的頁面。
* 通知欄：
* 右上角的個人按鈕按下會顯示個人資料，下方會有登出以及編輯個人資料的按鈕。
* 個人資料卡：
* 編輯個人資料畫面：

* /app/dashboard/id:
* 進入po文後會到達此頁面。
* 貼文左側會顯示發文時間、發文者和主題。
* 貼文敘述過長會有scrollbar出現可以繼續往下滑。
* 右下角會有同意或否定的按鈕，投票後會出現對這篇文章投票的統計圓餅圖。按鈕按下後請耐心等候三至五秒。若遲遲未顯示可以重新整理重新登入試試看。
* 投票完下方會出現同意與否定的兩個留言區，自己可以依照自己的投票在相對應的留言區留言，同時也可在任意的留言下方回覆對方。
* 若在看了留言後被說服，可以在原本投票按鈕的地方發現更換立場的按鈕，若更換了立場，你的留言顏色會變淡表示你是被說服過來的。
* 圓餅圖上的比例也會因此變化。
* 在這個頁面不論是圓餅圖或留言皆有四種顏色，分別是綠色（同意）、紅色（反對）、淺綠色（被說服到同意）、淺紅色（被說服到反對）。
* 投票前：
* 投票後：
* /app/createPost:
* 點擊左邊的sidebar的"Create New Post"會跳到此頁。
* 輸入title（必填）,content（必填）,Hashtag（選填）以及選擇主題（必填），照片可選一張（選填）。
* title和Hashtag有字數限制，content可以換行，文章顯示長文時右邊會有滾動條。上傳照片盡量檔案小一點（可能導致網站延遲）。
* 上傳成功後會有alert提示，請耐心等候。
* alert提示上傳成功後，按下OK後會自動跳轉到首頁，按首頁的最新按鈕就可以看到自己新發的貼文。
* 

***
### 組員分工表：
* 陳亭瑋(b09901064):
* 前端：點首頁的文章會跳到該篇貼文(Route)，在正確的貼文底下顯示留言以及在正確的留言底下顯示留言回覆，創建新貼文的頁面，Alert發文成功之後跳轉回首頁，
* 後端：DB中貼文、圖片、留言、留言回覆的儲存、抓取、更新、篩選主題。
* 其他：Donate railway.app五美金換取過年期間的安寧
* 陳冠霖(b09901162):
* 前端：登錄頁面，首頁(文章列表)，個人頁面，通知頁面，編輯個人資料頁面，圓餅圖，文章頁面排版。
* 後端：註冊登錄機制，編輯使用者資訊，按贊功能，廣播留言，廣播通知。
* 其他：deploy，前後端對接，Readme。
* 黃語棠(b09901065):
* 前端：文章頁面、發文時間顯示、留言和回覆排版、首頁標籤排版
* 後端：留言機制、留言數目、四種機制建立
***
### 心得：
* 陳亭瑋(b09901064):
我們僅用了期末考後的一個禮拜，瘋狂熬夜把整個project寫完，最近的作息是兩天為一個單位，一天睡五個小時+另一天小睡兩三小時，甚至我們在寫扣的時候外面居然有棟超級高樓在那裡冰冰蹦蹦放煙火＝＝。
在技術方面，基本上除了graphql之外，這學期學到的東西都用上了。此外還學了使用git多人協作和material ui，整體上非常好玩！ 不過同時三個人在寫扣會遇到有時候分工會互相卡住的情況，我的part可能要等到別人的part結束才能開工，在一開始的分工可能要詳細規劃一下（所以我傾向於凌晨兩點到早上十點一個人自幹，然後白天跟組員交班放空xd）。

* 陳冠霖(b09901162):
這次期末專題的實作，是我第一次完整建立一個全端包含資料庫的網頁專案，在過程中我參與了整個前端後端和資料庫的實作，在前端的設計上我學到了許多新的排版方式，以及對material UI的使用更加熟悉，也因為我們是套用模板，在理解模板的寫法過程中也學到很多新的寫法，在後端上我們的架構是類似hw7在加以延伸，對websocket的使用以及前後端對接的邏輯和api的設計上更加熟悉，也發現一個問題是websocket的連接時常不穩，所以我想了讓它斷線重連的機制，在設計過程中也是遇到了許多問題，但在與隊友的合作下也是成功一一克服，這次project也學到了許多與他人合作分工的方式，令我受益良多。

* 黃語棠(b09901065):
第一次和別人一起用github實做一個專題，我學習到了很多如何抓推程式，和解決程式衝突問題的方法。除此之外，我也學習到了如何運用這學期所學，來解決實際開發網頁時所遇到的問題，包括了前端的transform排版，還有後端的資料回傳機制。
此外，在跟隊友合作的過程中，也從他們學習到了很多地方，不論是前後端，還是面臨問題時查找資料與解決的能力。我認為這才是我在這學期網服課程中所學習到最重要的事情，雖然期末之後不能放鬆，還是得沒日沒夜地寫code，不過還是希望之後有機會還能再體會開發網頁的樂趣。