專案開發心得-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,我還是會繼續努力學習下去把剩下的作業完成。

全端網頁開發專業知識分享
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
為何會選擇記帳程式做專案? 網路上有很多各種記帳方式,用Excel方式來記帳士很多人熟悉的作法。但既然我已經學習了JavaScript這個程式語言,就想試看看如何藉由程式語言寫出一個簡易的記帳程式。 技術選擇方面 選擇Node.js是因為他是一個可以讓JavaScript 執行環境;我可以直接在電腦
1.什麼是電腦: 電腦是透過程式碼的指令,經由「輸入(input)→儲存(storage)/處理(processing)→輸出(output)」的流程,完成人類需要的結果。 2. 什麼是程式?有兩種說法。 第一種說法:就是運行在電腦上的一種指令,這種說法描述了程式的特質與概念,也就是說「運行在電腦上
來到學期2-3的階段,第一個作業就是打造餐廳清單。原本認為經過電影清單的學習經歷之後,對於打造餐廳清單應該也不會太過困難;沒想到我花了2個月的時間才把作業完整交出去。 在寫餐廳清單的初期,第一個碰到的問題就是首頁無法秀出餐廳評分這個選項。我試著參考其他同學的作品也改了版面的設計,卻始終無法出現餐廳評
為何會選擇記帳程式做專案? 網路上有很多各種記帳方式,用Excel方式來記帳士很多人熟悉的作法。但既然我已經學習了JavaScript這個程式語言,就想試看看如何藉由程式語言寫出一個簡易的記帳程式。 技術選擇方面 選擇Node.js是因為他是一個可以讓JavaScript 執行環境;我可以直接在電腦
1.什麼是電腦: 電腦是透過程式碼的指令,經由「輸入(input)→儲存(storage)/處理(processing)→輸出(output)」的流程,完成人類需要的結果。 2. 什麼是程式?有兩種說法。 第一種說法:就是運行在電腦上的一種指令,這種說法描述了程式的特質與概念,也就是說「運行在電腦上
來到學期2-3的階段,第一個作業就是打造餐廳清單。原本認為經過電影清單的學習經歷之後,對於打造餐廳清單應該也不會太過困難;沒想到我花了2個月的時間才把作業完整交出去。 在寫餐廳清單的初期,第一個碰到的問題就是首頁無法秀出餐廳評分這個選項。我試著參考其他同學的作品也改了版面的設計,卻始終無法出現餐廳評
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
前幾天,同樣身為職涯諮詢師的同學,邀請大家一起學習Wordpress,同學表示自己很喜歡寫網站,也希望大家能和他一樣感受架網站的樂趣,因此自告奮勇成為Wordpress新手村長。 我過去也想過要自己蓋網頁,只是不知道從何開始,遲遲沒有踏出第一步,看到同學的號召,再次燃起夢想(?),沒有任何網站經驗
Thumbnail
在我剛開始寫程式的時候,深切地感受到要學的東西實在太多了,尤其在課堂上學的東西跟在公司要打造產品的技能非常的不一樣,有非常多需要自學的地方。 在我剛開始實習的時候,除了看書、看文章、用線上網站練習新語言的語法,我覺得幫助我最多的就是直接練習寫一個 Side project 了。
Thumbnail
放鬆的週末,我與幾位同事決定提升我們的後端開發技巧,選擇了「日期範圍生成器」作為我們的小型實作。作為團隊中較有經驗的PHP工程師,我引領著團隊從基礎程式碼的撰寫開始,進而深入到物件導向的結構調整,最後提高程式可擴充性的挑戰。雖然過程中遇到不少困難,但我們通過不斷的討論和優化,最終成功克服了所有挑戰。
上一篇主要在說如何做決定的,這篇就來寫寫面試前該做什麼準備。
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
  近期,因為發現身邊的人都有用Twitter,所以我也去註冊了一個,但正確來說,這已經是我註冊的不知道第幾個帳號,但我忘記帳號密碼,既然登不進去,更無法刪除帳號,所以就一直存在了。   不過,這次我打算認真經營,所以去網路上爬了一些文章,偶爾也會上Twitter觀察一下生態,想知道Twitter
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
你接到一個很重要的專案,其中蘊含了許多非你專業可評估的需求。因此,你要從兩位同事中挑一位副手加入專案團隊。你會怎麼做?
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
前幾天,同樣身為職涯諮詢師的同學,邀請大家一起學習Wordpress,同學表示自己很喜歡寫網站,也希望大家能和他一樣感受架網站的樂趣,因此自告奮勇成為Wordpress新手村長。 我過去也想過要自己蓋網頁,只是不知道從何開始,遲遲沒有踏出第一步,看到同學的號召,再次燃起夢想(?),沒有任何網站經驗
Thumbnail
在我剛開始寫程式的時候,深切地感受到要學的東西實在太多了,尤其在課堂上學的東西跟在公司要打造產品的技能非常的不一樣,有非常多需要自學的地方。 在我剛開始實習的時候,除了看書、看文章、用線上網站練習新語言的語法,我覺得幫助我最多的就是直接練習寫一個 Side project 了。
Thumbnail
放鬆的週末,我與幾位同事決定提升我們的後端開發技巧,選擇了「日期範圍生成器」作為我們的小型實作。作為團隊中較有經驗的PHP工程師,我引領著團隊從基礎程式碼的撰寫開始,進而深入到物件導向的結構調整,最後提高程式可擴充性的挑戰。雖然過程中遇到不少困難,但我們通過不斷的討論和優化,最終成功克服了所有挑戰。
上一篇主要在說如何做決定的,這篇就來寫寫面試前該做什麼準備。
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 八、軟體公司的前端工程師之路 新公司不是做網頁專案的,而是自己研發資安軟體的公司,主要只有一個大專案,跟很多客製化的需求。 我在這次轉職時有考慮到,我其實不太喜歡一個案子做完就結束的感覺,因為那會讓我覺得這些作品做完好像也不是我的東西..
Thumbnail
  近期,因為發現身邊的人都有用Twitter,所以我也去註冊了一個,但正確來說,這已經是我註冊的不知道第幾個帳號,但我忘記帳號密碼,既然登不進去,更無法刪除帳號,所以就一直存在了。   不過,這次我打算認真經營,所以去網路上爬了一些文章,偶爾也會上Twitter觀察一下生態,想知道Twitter
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
你接到一個很重要的專案,其中蘊含了許多非你專業可評估的需求。因此,你要從兩位同事中挑一位副手加入專案團隊。你會怎麼做?