在ALPHAcamp畢業前,我們完成的限時兩週Twitter專案

在AC的課程分為三個學期,分別為:

1.認識程式設計

2.掌握網頁開發

3.成為軟體工程師

而其中第三個學期-成為軟體工程師,為期兩個月的課程,很重要的壓軸就是現在所說的Twitter專案

關於Twitter專案

專案內容:製作一個功能類似 Twitter 的社群網站,名為「Simple Twitter」

專案成員:共四位,分為前端與後端

  • 前端的組員有:阿勛、Daisy(我)
  • 後端的組員有:君倢、ZHIH

前端gitHub連結:

後端gitHub連結:

👑作品連結如下:

前台

  • 帳號:welcome@example.com
  • 密碼:12345678

後台

  • 帳號:root@example.com
  • 密碼:12345678

歡迎使用上方的帳號和密碼進去逛逛 👀

📣注意:因進入網頁後所做的動作都會儲存下來,後台顯示既有的推文請不要刪除,但可以刪除自己在前台新增的推文~

以首頁為例,從左至右可以看見頁面連結、推文和推薦的使用者清單

他們各自擁有各自的功能,且互相關聯著,前端負責畫面的呈現、後端負責資料的處理與邏輯,但,就這樣嗎?

網頁是如何從無到有?如何從靜態到動態?資料是如何儲存?還有連結是如何生成?這個網頁雖然在兩週的時間內生成,但絕非學習兩週就能完成,如何從程式小白瞬間升格工程師?這背後需要長期的學習與累積才能完成,在學期中,只要想起這個專案的存在,都會讓我感受到排山倒海的壓力,也難怪畢業專案被稱之為大魔王。但這真的是不可能任務嗎?

我們如何開始

我們選用slack做溝通、notion開規格、trello展示進度,還有slack的視訊功能來開會。

下圖是Trello的頁面截圖,由左至右可以看見待開發、開發中和已完成的區塊,簡潔的排版讓我們一目了然目前的進度,以阿勛和我的合作模式為例,除了一開始溝通好的分工外,在開始下個開發項目前,我們都會在這邊確認前端的進度,以避免重複的開發或程式碼衝突,節省來回溝通的時間同時也能有效地掌握目前進度,特別是在寫程式碼卡關時,透過Trello查看彼此的進度,也可以了解對方是否也遇到類似的問題,進而一起討論卡關的解決辦法。

前端的分工

這次Twitter專案,我們採用的開發流程如下:

  1. 切版:呈現畫面
  2. 功能開發:套用假資料並新增function
  3. 串接API:連動後端資料庫

依據開發流程,我這邊負責的頁面與元件如下

  1. 切版:前台登入頁、後台登入頁、註冊頁面
  2. 功能開發:前台登入、前台註冊、後台登入、追蹤與追隨清單、推薦追蹤清單、新增推文、後台推文清單、帳戶修改、後台使用者
  3. 串接API:後台登入頁、後台推文清單、後台使用者、追蹤與追隨清單、首頁右側的新增推文、註冊頁

使用的技術

框架:Vue

API串接:使用 axios 來向伺服器發送請求

即時資料更新:socket.io

其他套件與技術:bootstrap、Vuex、SweetAlert2、moment等

前端的合作方式

分工

正常來說,前端的分工應該是均分的,但考量到開發的時間壓力,加上阿勛對切版比較拿手,所以我們以在有限的時間裡做更有效率的分配為出發點,由阿勛著重在切版,而我則在做好表單類的切版後,直接做功能開發的部分,這部分很感謝夥伴如此強大,讓我們在緊湊的時間裡也能趕上專案的進度。

git協作

因為是共同開發的關係,前端畫面的呈現只能使用一個專案,跟以往自己做專案不同的是,避免程式碼混亂變得很重要,那如何避免混亂?即時的更新彼此的進度,方法就是在這次的合作上,我覺得很寶貴的經驗之一:git協作。

除了用來記錄自己的程式碼,也讓我們可以即時更新彼此的程式碼,讓協作可以更加順利,在寫code前,細心的阿勛也跟我分享了git commit message的方式,讓我們在命名commit時有一致的格式。此外,使用git協作時,不乏會遇到的git conflict,代表:新增的程式碼與其他成員的程式碼產生衝突,這時,誰存誰留就變得很要緊,畢竟刪錯程式碼可能會導致很多的問題,在無法判斷時,除了與對方討論,在前期的分工,也可以盡量讓彼此的程式碼不要有打架的機會,所以我們在規劃時,也有劃分各個頁面和功能的關聯性,讓發生衝突的機會降至最低。

當我們在本地端更新彼此的程式碼的同時,也有一個推到遠端的節奏,確保程式碼在本地的穩定性後,我們就會發pull request給對方,指定彼此為審核者,並為程式碼的合併留下新進度的說明,讓審核的人確認程式碼是否有問題,確認完成後就可以merge到遠端。

現在回想起來當時連推都推不上遠端的狀況,都為自己捏了一把冷汗,也多虧有夥伴一起討論,讓我們的git協作能夠更順利地執行。

開發過程

過程中的開發大部分都類似於過去所學,專案上AC指定的功能基本上都能解決,存在著一些變化讓我們舉一反三,但最困難的部分是從無到有,資料格式的討論到頁面的呈現,使用假資料到串接後端的資料,如何在這個專案使用對的方式實作,在每個細節都息息相關,舉追蹤按鈕為例,我們點選的邏輯都帶著目的性,是否會影響資料?畫面的變動觸發了什麼?頁面之間如何溝通?如何串接API?每一次腦中浮現的問題都在幫助我們了解寫網頁的邏輯,就像解數學題目一樣,越了解邏輯才越會使用。

有時候特別容易搞混:前端要做什麼?所以在寫code之前需要先了解前端和後端的各自職掌。因為前端控制畫面,後端處理資料,當我們按下追蹤的按鈕時,前端需要讓畫面變更為取消追蹤,而串接上的API會在按下追蹤時改變後端的資料,單就按鈕本身,我們需要控制按鈕的切換,但不需要處理資料的更動,因為後端處理好了,只需要在畫面上呈現變化,但如果按下追蹤,畫面上有其他的元件會因此受影響,前端就需要再額外作處理。這部分主要也是與夥伴不斷的討論與修正才能完成設定,對前端與後端的資料處理,在這次的實作有了更在深刻的區分:前端資料變動的處理依照是否在畫面上顯示來決定,如果按下追蹤,畫面有追蹤人數的呈現,前端就需要同時在追蹤人數上設定+1,否則需要重新整理頁面資料才能重新渲染。也多虧有夥伴可以討論,讓我更理解這塊的觀念。

此外,這次的前端專案除了讓我有機會與他人一同開發一個產品的從無到外,更珍貴的是能遇見一個可以在對方身上學習到很多的夥伴,讓我遇強則強,穩重的阿勛即使面臨各種bug和時間的壓力,仍會保持著沈著與穩定,好像在難題面前也無所畏懼,過程中我甚至會覺得夥伴專業得像的mentor一樣,這無關乎上對下,而是溝通上的成熟表現,特別是程式碼會互相影響的狀況下,保持著專業的態度,去溝通並解決,用引導的方式,清楚地闡述,這一來一回的討論也讓我對合作有更深一層的認識。

如何解決困難

Photo by John Schnobrich on Unsplash

寫程式需要有自己的思路,那是獨一無二,自己思考過的東西才是自己的

過程中,我們遇到問題時會一起討論,一開始用視訊的方式分享螢幕找出問題點,後來改為先以文字描述比較有效率,讓彼此了解現在的問題點互相幫助,而無法及時解決的,就可以依照重要性來安排debug順序,因為bug總會在開發的過程中不斷出現,這個專案的過程中,也讓我更加掌握了 — 與夥伴討論的前置作業:

  1. 確認error的定義、位置、狀況
  2. 確認是否有遺漏的方法沒試過
  3. 影響範圍,是否會影響到後續的開發

以上三種都確認好,再提出問題去討論

雖然這樣的心法過去在工作上已經執行過許多次,但面對程式碼又是另一回事。也常常去參考網路上的資源或是類似的寫法,但如果自己的邏輯都無法順過一次,是真的無法解決問題的。寫程式很邏輯,也很需要良好的心理素質,在專案中碰到的許多begug,都要有信心去解決,因為辦法都是人去想出來的,持續堅持,然後,就解決了,儘管過程經歷了千千萬萬個翻(崩)騰(潰)雲湧…

才知道,對我來說,要解決的不僅bug,還有恐懼本身,開發專案本身就是與bug的直球對決,一次次的bug挑戰都在考驗自己是否能夠堅持,但如同助教說的:Nothing to lose. 我們能做的就是堅持,不是嗎?

總結:如何解決困難,與夥伴討論確實可以加速debug的速度,有時候對方一眼就能看出問題的點,但如果沒有想好問題的邏輯,反而會花更多的時間溝通,這也是在我在這次專案上對自己的省思,提出問題前先確認好問題點,或許其實自己就能解決,而在釐清思緒過程中,也能學到更多。但就算無法如預期自行解決,也能依據以上三個步驟,來加快與夥伴解決bug的效率。

雖然寫程式每個人都有各自的思路,但後來發現就算是各自寫各自的部分,在討論時,將彼此的邏輯和想法適當地結合在一起,也會有助於整個專案的進展,像是類似的功能我們會觀察彼此的程式碼來實作,或是卡關時的互相支援,都讓專案的進行得更加順利。也通過合作,了解自己在寫網頁上優劣勢,進而去改進和加強,很喜歡這次的合作,讓我感受到debug的路上,我不是一個人。

前端與後端如何合作

覺得自己特別幸運,擁有一群很好的夥伴。

阿勛、ZHIH和君倢都是好溝通也好相處的人,在開發過程中,大家也都相處得很融洽,與後端合作時,很特別的是,以我前端的角度來看,當前端和後端溝通時,常會有種見山不是山的錯覺,也常有「原來是這樣~」的感嘆,那些前端與後端的各自執掌與邊界,都在這次的合作後,變得更清晰。

Photo by Amy Hirschi on Unsplash

前後端合作有如下的三個時機

  1. 討論資料規格
  2. 串接API
  3. 解決bug

討論資料規格

這是前期的最重要的事,但因為是第一次需要與後端討論並開出資料規格,思考的過程中,對串接API的掌握程度也是種考驗,CRUD的邏輯和串接的方式都需要一一從過去的學習經驗再順過一次,所以花了很多時間去確認會使用到的資料規格,但也幸好是團隊的關係,大家相輔相成,開的資料就做得很完善。

追根究底,到底是誰要決定串接API的資料格式?是前端,還是後端呢?

可能因人而異,但結論是:這絕對需要來回的討論與調整。這次的做法是,前端與後端各自討論後,再一起確認資料的規格,前端提供各個元件(頁面)會使用到的資料,後端則整理好資料並開出如下的API,然後,當開發需要時,再做額外的調整與更動。

如上圖所示,根據畫面的需求與資料的變動,需要串接的API被一一條列出

串接API

原本的想像中,如果開發過程發現需要再新增資料時,是否會發生後端需要大改的情況,也在實作中得到解答,整體而言,後續的調整不算多,主要是因為討論後確認了彼此對資料的想像,當想法一致,開發就會變得很順利,確認好每個元件所需要使用到的資料,基本上都能順利串接。雖然如此,但因為前端與後端的學習路徑不同,還是會出現一些需要兩邊再討論的情況,例如:後續我們有再請後端新增一條API來請求每個頁面的當前登入者資料,讓前端可以搭配Vuex來管理狀態,將token存入每個頁面,驗證每個頁面的當前使用者的身份。

雖然驗證的功能後端也能應用現有的API將功能做出來,但前端對API的需求也會因為使用的技術與框架而有所不同,所以再新增一條API也是經過溝通和討論才知道是必要的,溝通確保我們的認知一致,也很讚嘆後端們總能在需求開出後,快速地解決問題,那速度讓我感受到後端在後端的世界裡肯定也經歷了許多邏輯的試煉。

解決bug

前端負責畫面,後端處理資料,再讓開好的API串接起來,Yeah~網頁完成!

但,理想很豐滿,現實很骨感,原以為寫好的code還會不時伴隨著bug,如同上面這張同學在社群分享的梗圖就很能詮釋寫code時的心情:Bug總是這樣,好像不會停止地出現。

儘管專案協作大家都有各自的任務和難題,但小組協作的好處就是,遇到bug時可以一起討論,有時候甚至會因為一個bug而停下手邊的工作,一起去想解決的辦法,大家各展神威,用各自擅長的方式來解決問題,在過程中也能從組員身上學習到不管是軟實力還是硬實力的部分,有時候前端無法解決的,後端看一下就能抓到bug,有時候不確定是哪邊的程式碼有問題,也會互相看看彼此的寫法,雖然未必能完全理解,但經過解釋、溝通和討論,就算無法馬上解決問題,也可能在這個過程中就想到新的解法。現在回想起,經歷無數的日與夜的努力,我們也一起解決了許許多多的bug呢!

如何解鎖挑戰功能

兩週的最後兩天是黑客松衝刺挑戰,題目分成三部分,分別是公開聊天室、私人聊天室和通知的功能,之所以稱之為挑戰功能,也是因為完成挑戰的門檻比過去幾天完成的功能還高,我們需要再去研究過去沒使用過的新技術➡️socket來完成即時互動的功能。

兩天的時間,我們完成了公開聊天室的功能,假設有兩個以上的帳號同時登入,在畫面上可以看見上線的使用者還有即時聊天的對話框。但做到這些功能需要有哪些準備和設定呢?

  1. 安裝socket.io套件
  2. 前後端的socket連線
  3. JWT驗證
  4. 設置事件的接收與發送
  5. 將資料呈現至畫面上

其中我們在連線成功後,因為JWT驗證的問題導致訊息無法成功發送,這過程花了比較多時間解決,我們google許多寫法,搭配socket網站原文的說明,排除各種可能,最後發現是因為版本不斷的更新,我們遇到了前、後端使用套件的版本差異,兩邊安裝到套件無法溝通,就像摩托車的輪胎規格無法裝在汽車上一樣,後續調整新的版本才解決問題。

如果下一次的專案需要再使用到socket的技術,對照這次的專案程式碼我可能也可以再與後端合作實作出來,但socket連線還有JWT驗證背後的技術還是有許多需要再多研究,才能更了解如何解決連線時可能會遇到的bug,這部分也是因為與後端合作使用socket才知道,其實前端除了切版與API串接外,也能多了解網頁傳送資訊背後的觀念,因為未來技術只會越來越複雜,多學習連線的資料也能幫助未來職場上的應用,當bug出現就能更快速判斷其從何而生。

(p.s 兩週專案結束後,我們有再接續完成後面的挑戰功能-私人訊息與通知)

結語

寫程式有時其實是很孤單的,有時候甚至找不到自己的盲點,但經過這次的專案,儘管討論的過程中也常常無法馬上理解,但這不就是學習的初衷嗎?因為不了解而去學習,才能讓自己更加進步。

雖然對自我的認知是種衝擊:原來強,還有更強,再更強,但也在過程中,找到自己的生存之道,學習別人的優點、站在巨人的肩膀上,讓我對學程式有更寬廣的認識,再將這些收穫持續精進,慢慢的也能成為比過去的自己還厲害的人,這不就是整趟學習寫code的目的嗎?既然知道寫程式是如此不容易的,我還會繼續走下去嗎?那我們繼續看下去,看看過段時間我會不會再新增新的文章😉

學寫程式到現在,還是會有覺得受挫的時候,但只要實作出成果,那份對程式碼的好奇與期待,又會讓人瞬間滿血,獲得滿滿成就感,只要一頭栽進程式碼的世界,就會發現它寬廣得讓人驚嘆,不僅能做到許多事情,持續精進還會有種~原來還可以這樣歐!就像某位朋友,總帶給我們驚奇,認識越久越會發現他的背後還有源源不絕的料等著我們發掘的感覺。

最後,想感謝我的組員們,謝謝你們讓我在這次的專案有個愉快又完整的體驗,實作畫面的切版,功能的設計與API的串接,還有後續的Socket,沒有你們的幫忙,專案無法如此順利,與你們的合作讓我獲益良多,也祝福大家畢業後一切順利。

嗨!我是黛西