專案開發心得-Simple Twitter

更新 發佈閱讀 4 分鐘

隨著JavaScript課程的學習的最後階段, Twitter專案不只考驗平時課程所學的技能,也讓我們提前預習在職場上與人合作完成專案的經驗。

完全沒有和人一起完成關於寫程式經驗的我,很幸運得到兩位神隊友﹘Rossi和雅婷。她們對於寫程式的能力還是比我優秀很多。

在這次專案中,我負責從所有人的空閒時間,找出可以共同開會的時間和做最後檢查的時間。任務分配上,我被分配到使用者個人頁面的所有功能。關於整個專案過程的貢獻度,我可以說是只有1%。也就是記得交sprint 1 ~ 3的作業。一開始在clone專案時我就開始錯誤連連,我過去習慣用Download ZIP的方式來clone專案,沒想到這次要用複製網址的方式在終端機上用git clone方式下載專案,遠端如果有更新我才能接受到訊息。過去不需要和人協作,也沒有注意到這個細節。幸好隊友Rossi和雅婷熱心的幫我解決第一個難關我才能繼續往下走。當我很開心地要開始寫第一個功能時,我又碰上另一個難關﹘使用者點擊個人網頁時,畫面要跳出使用者可以看見自己所有貼文的頁面。剛開始我設計的路由「router.get('/users/:id/tweets', authenticated, userController.getUser)」,是連接不到使用者個人頁面的畫面。路由反而設成「router.get('/users/:id', authenticated, userController.getUser)」,是可以連接到使用者個人頁面的畫面。

嘗試反覆看課程的教案和作業,想找出有沒有相似的地方?有依照助教的指示確認看一下是不是符合 users/self這個模板的需求,但還是無解。後來我嘗試將nav-item的連結改成<a href="/users/{{user.id}.tweets}">,終於跑出畫面。當我要繼續設計畫面的時候,卻發現使用者頁面推文沒出來的問題。尋求助教的解答是要我檢查db是不是沒資料還是 query 有問題,但我檢查完之後改補的缺失也補了,還是沒用。當我回去查看教案之後嘗試將{{#each tweets}}改成{{#each user.Tweets}}之後,可以秀出推特文。接著我又有新的問題產生,沒有秀出使用者的名字和e-mil這個細節;於是我開始向隊友提出求救。起初隊友要我先檢查controller的地方是否有將tweet跟user用include方式做連結,並參考他做getTweets的部分,應該有類似的地方。但結果還是失敗,於是她提議往comment上一層user去找,改用../user.name 試試看,也就是將this.User.name改成../user.name,結果真的成功了。於是我上網查詢了「../user.name 」和 「this.user.name」的差別。

在模板中,`../user.name` 和 `this.user.name` 有不同的意義和用法。

「../user.name」:

 ※「../」 表示回到模板中上一層上下文(context)。

 ※ 這意味著你正在訪問父級上下文的屬性。

 ※ 在這個情況下,「../user.name」 表示你希望訪問父級上下文中的 「user.name」 屬性。

 

「this.user.name」:

 ※ 「this」 代表當前的上下文。

  ※ 這意味著你正在訪問當前上下文中的 `user.name` 屬性。

  ※ 通常,「this」 是可選的,你可以直接訪問 `user.name` 屬性,因為模板引擎已經處於 `user` 上下文中。

要選擇使用哪一種取決於你的需求和模板引擎的設置。通常,如果你需要訪問父級上下文中的變數或屬性,可以使用 「../」否則你可以直接使用 「this」 或省略它,以訪問當前上下文中的變數或屬性。

當問題解決之後又有新的問題產生,將程式碼更新到最新之後要進行合併發PR,出現合併異常發送PR需求給確認者,一直出現Alarm導致PR發送失敗。為了找出問題,我只能不斷地確認和合併Alarm訊息找原因。更慘的是,原本設計好的可以連接使用者個人頁面這個功能,不明原因又連結不到了。我反覆的察看程式碼並向助教請教。即使助教給了一些建議,比如說AC 教材有提到 的postman用這個可以打 request 到妳本地起的 service,這樣就能知道 API 有沒有錯誤?這個問題到現在還沒有解決,也影響了專案的結果被評斷是為 fail。

兩個星期的專案過程中碰到無數的難題,有的已經順利解決、有的還在努力找答案。對我來說即使專案的結果被評斷是為 fail,我還是會繼續努力學習下去把剩下的作業完成。

留言
avatar-img
奧莉薇走在成為後端工程師之路上
26會員
171內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
在職訓課程的最後,就是重頭戲——專題製作。這是需要自行發想主題,並從班上召集有共同想法的同學,一起完成的結訓成果,也可以想成展現技術的作品,未來能用在履歷或面試報告上。過程中經歷了主題討論、組員挑選、製作與成發,讓我收穫更多,以及一些歡樂(?的部分,在此一併分享給大家。
Thumbnail
在職訓課程的最後,就是重頭戲——專題製作。這是需要自行發想主題,並從班上召集有共同想法的同學,一起完成的結訓成果,也可以想成展現技術的作品,未來能用在履歷或面試報告上。過程中經歷了主題討論、組員挑選、製作與成發,讓我收穫更多,以及一些歡樂(?的部分,在此一併分享給大家。
Thumbnail
Introduction 在開始WeHelp第二階段時,每周都在想周日的時候要寫一篇網誌來記錄整周的學習,但前兩周沒有如期寫後,後面就心態就持續默許這偷懶的想法,到整個第二階段都沒有寫了@@,明天開始在完成原本訓練營一些HTTPS和AWS ELB的作業後,也要正式進入重頭戲了,再加上今天也去看了Yo
Thumbnail
Introduction 在開始WeHelp第二階段時,每周都在想周日的時候要寫一篇網誌來記錄整周的學習,但前兩周沒有如期寫後,後面就心態就持續默許這偷懶的想法,到整個第二階段都沒有寫了@@,明天開始在完成原本訓練營一些HTTPS和AWS ELB的作業後,也要正式進入重頭戲了,再加上今天也去看了Yo
Thumbnail
我自己也當過學生,甚至現在也還是學生。要成為一個比別人厲害的人,要犧牲的事情本來就比一般人多,不過我們是真的只能在比較閒的時候去慢慢培養自己的興趣,或經營自己的興趣嗎?有沒有一種可能,是我們可以一邊讀書一邊經營自己有熱情的事情呢?
Thumbnail
我自己也當過學生,甚至現在也還是學生。要成為一個比別人厲害的人,要犧牲的事情本來就比一般人多,不過我們是真的只能在比較閒的時候去慢慢培養自己的興趣,或經營自己的興趣嗎?有沒有一種可能,是我們可以一邊讀書一邊經營自己有熱情的事情呢?
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
在跟社群朋友私訊時,他說我可以考慮分享「我的前端之路」之類的啊。覺得這真是一個很不錯的主題,每個人都有自己的故事!不愧是個老師,會因材施教XD 本科系畢業、碰前端之前 憧憬前端工作,但沒自信、不敢 設計與美感 - 一生從沒碰過的東西 Vue 比 React 簡單? 與設計師的合作 跨足APP
Thumbnail
在跟社群朋友私訊時,他說我可以考慮分享「我的前端之路」之類的啊。覺得這真是一個很不錯的主題,每個人都有自己的故事!不愧是個老師,會因材施教XD 本科系畢業、碰前端之前 憧憬前端工作,但沒自信、不敢 設計與美感 - 一生從沒碰過的東西 Vue 比 React 簡單? 與設計師的合作 跨足APP
Thumbnail
己所不欲,勿施於人。 這八個大字被我深深的曲解了他的意思,直到遇到強者成員,我才感受到團隊的效益。 好勝的我從第一份工作開始就十分努力,剛剛開始擔任主管時,每週都工作五天,週末到公司自習兩天,每天超時工作就好像海綿一樣,在很短時間內確實感到很大的進步,然而我卻忘記了自己的另外一個角色。
Thumbnail
己所不欲,勿施於人。 這八個大字被我深深的曲解了他的意思,直到遇到強者成員,我才感受到團隊的效益。 好勝的我從第一份工作開始就十分努力,剛剛開始擔任主管時,每週都工作五天,週末到公司自習兩天,每天超時工作就好像海綿一樣,在很短時間內確實感到很大的進步,然而我卻忘記了自己的另外一個角色。
Thumbnail
別害怕失去曾經緊握手中的,放開手才有機會抓住真正想要的!
Thumbnail
別害怕失去曾經緊握手中的,放開手才有機會抓住真正想要的!
Thumbnail
原本最近學習學到一個段落,準備著手準備前端作品集,不曉得是不是上天看到我的努力,竟然在我只有將課程作品放上 cakeresume 的狀態下,收到不少面試邀請,也順利地收到 offer 。 要感謝、要記錄的過程太多了,於是我著手撰寫了這篇文章,希望可以幫助正在轉職苦海努力的你。
Thumbnail
原本最近學習學到一個段落,準備著手準備前端作品集,不曉得是不是上天看到我的努力,竟然在我只有將課程作品放上 cakeresume 的狀態下,收到不少面試邀請,也順利地收到 offer 。 要感謝、要記錄的過程太多了,於是我著手撰寫了這篇文章,希望可以幫助正在轉職苦海努力的你。
Thumbnail
日前有位學員想要上課,他是我看過印象最深刻的一位 因為…..他把我招生文件裡面的注意事項都看完了 對應的課程大綱、Q & A,都看過一次 他寫信問我,問了兩個問題: 第一個是他看完,但不清楚(有疑問)的地方。他要 Double-Check 第二個是詢問我的匯款帳號 我真的不懂 尤其是IT課程
Thumbnail
日前有位學員想要上課,他是我看過印象最深刻的一位 因為…..他把我招生文件裡面的注意事項都看完了 對應的課程大綱、Q & A,都看過一次 他寫信問我,問了兩個問題: 第一個是他看完,但不清楚(有疑問)的地方。他要 Double-Check 第二個是詢問我的匯款帳號 我真的不懂 尤其是IT課程
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News