[110-1] Web Programming Final [Group 61] MS Bottle 組員 資工二 徐近庭 B09902030 資工二 彭昱齊 B09902032 電機二 嚴培勻 B09901086 Demo 連結 ：https://youtu.be/O1wxK-c_7X0 介紹 ：作為一個大學生，有時候心情很不好可是又沒有人傾聽，有時候作業不會寫又不知道該問誰，或者想認識更多的好朋友，卻很難找到機會認識．我們的MS bottle可望解決這些難題！MS bottle 以瓶中信為發想概念，可以將生活中的感懷和所遇到的問題作成瓶中信，藉由附加tag，幫你找到對的人回信，並且認識新朋友！ Deploy 連結：https://web-programmingb09.herokuapp.com/?fbclid=IwAR0FvyeYHrTZuYMFMEHY9vJ-DCu2GQB-SONpMozjWqMAIQ38Nm2Ld85FiDI Github 連結：暫不提供 使用框架模組與第三方套件 Frontend : React.js antd axios react router Backend : node.js mongodb express cors dotenv dotenv-defaults nodemon graphql… 心得感想： 徐近庭： 一開始想到要做這個的時候，真的好多好多的靈感一直蹦出來，很想把自己想到的東西都徹底的做好，所以花了很多心血在上面．雖然還有一大堆想加上去的，可是要在段考後沒幾天之內做完，真的把我的肝搞到快爆了．我做的事主要為內容的發想與規劃，前端的開發（刻CSS好累）以及寄信部分 帳號申請及登入部分等的前後端，做起來還蠻有成就感的，希望寒假弄完整有機會真的拿來用． 彭昱齊： 在這次的專題中，從發想、分工到實作遇到很多困難，儘管過程中很匆忙，但大家的決心仍不受打擊，我也從剛開學的懵懂無知，一路學來，慢慢對前端後端的概念與應用熟悉許多，即使這門課只開一學期，但我們的專題不受侷限，希望未來能再延伸、滿足使用者的需求 嚴培勻： 經過這次的期末專題的真是受益良多。在痛失兩位組員後，非常榮幸的被徐、彭二位大神收留。在這個社交軟體起陸之貴，際會如期，虎嘯風生，龍吟雲翠，百家爭鳴、百花齊放的世代，一同製作推出跨世代的曠世巨作：MSbottle!!!!!!!我主要負責的是後端的開發與整合，在製作的過程中遇上了不少的奇怪bug，但在try & error，努力不懈的排查後，這些小蟲蟲成為我茁壯的養分，讓我對於graphql在前後端之間的溝通有更加深刻的了解。
安裝步驟 git pull 下來 cd backend rm -rf node_modules yarn yarn server (backend finish) cd frontend rm -rf node_modules yarn yarn start (frontend finish)
內容測試 在進行sign up、登入後，進入眼簾的是身處無人島上，四下無人，夕陽西下的落日美景，耳邊同時響起優美的旋律(會重複撥放，可隨時停止) 而測試部分約可分為三部分進行： 點選最左邊方格進行寫信： 首先可以選擇信紙材質，共五種選項供您選擇，爾後依序進行信件title、信件內容和附加文檔(後端沒接QQ)的填寫，上方進度調會提示您當前的進度，如果填寫到一半學回頭更改，可點選左方菜單回到任意一步，從上次寫完的東西繼續撰寫。最後進到確認畫面，在右方選單選擇兩個attribute和一個自訂義屬性作為這封信的tags，至此完成寫信部分。
回到主葉面後可選擇中間方格進行讀信：
進到讀信頁面後，首先根據自己的興趣選擇兩個attribute，最後還有一個手動輸入的attribute可供填寫，讓我們能為您找到更符合您胃口的信件，按下下方確認鍵後，MSB將顯示最符合您喜好的信件，如果覺得那封信的內容有趣，可在右方輸入框回覆信件發送者，成為好友，進而開始聊天。若不甚喜歡，也可以按下cance，再次選擇屬性。
最後主頁面最右方的欄為聊天室部分，在裡面您可以後您先前回復過的用戶盡情暢談，在選擇列表中可以選擇要和哪為朋友聊天，上面也有最近一則訊息，讓您預先檢視，點進去聊完天可依序選擇畫面上的”back”和”back”鍵回到主頁面，致此一個功能完整的MSB介紹完畢
負責內容 徐近庭 ： 封面，登入與註冊帳號，第一部分寄信，的前後端，對三人部分(寫信，讀信，聊天室)整合做總修正與檢查 彭昱齊 ： 第二部分讀信前後端製作 嚴培勻 ： 第三部分聊天室的前後端製作，三人部分(寫信，讀信，聊天室)總體整合