前後端分離專案- simple Twitter回顧

API讓位於世界彼端的我們牽起雙手,在技術的浩瀚中大步前行

專案介紹

設計稿wireframe

GitHub repo

網站連結

API規格書

simple Twitter是一個由兩個前端加上兩個後端所組成的開發團隊。目標是在有限時間的交付日內開發出兼具功能、流暢使用性、良好使用體驗與美感、RWD適性的web app。

功能包括前後台、創辦帳號、登入、修改使用者資料、推文、回覆、按讚、追蹤等等….。根據設計師給出的wireframe來設計app架構,從web components的設計、API設計與串接、資料流的控制到request資料過濾與使用者體驗優化。是一個化繁為簡,再收斂優化的過程。

緊接著交付日,是為期兩天的黑客松,目標是在短時間內利用從前沒有接觸過的socket技術打造網站中的聊天室。

最終的產出是一個相似於twitter的社群網站。

我的角色定位

Photo by Janosch Diggelmann on Unsplash

Front-end developer

因為現階段沒有工作全心投入開發的關係,相較於其他團隊成員比較沒有外務需要負責因此擔任專案的聯繫者與橋樑,在初期參與規劃web components、RESTful API的設計,並撰寫API規格書提供前後端更明確的開發向,與協助解決任何技術或非技術問題。在前端的部分則比較關注在程式碼品質、使用者體驗與RWD的頁面結構。

開發過程

開發基礎架構與功能:

在時程控管上是跟據交付日期為基準往回推,從保留時間、調整時間、開發時間、規劃時間一路推回最起點。這樣的好處是可以比較好的去控制時間,也有比較大的調整空間。

在這個專案前端開發上我認為比較重要的是前期的協調。架構設計上的統一、程式碼風格的統一、CSS管理邏輯的統一與資料流的統一,如果有做足溝通在後續不管是開發還是維護都會更加順暢,不會搞得寫到最後不知道對方甚至是自己在寫什麼…?

前端與後端的對接則是要盡快的確定API的資料傳輸格式與命名,如此前端可以儘早寫入假資料確定畫面所需要的資料有哪些、邏輯怎麼撰寫。後端則是可以安心的開發API,不用擔心前端會突然有過多的需求變動。

在切版上因為我比較強迫症的關係對於RWD、版面與設計稿的完成度有比較高的要求,對於不良好的使用體驗會感到很迫切的想要進行優化…哈哈…。因此有時可能讓共事的夥伴有些壓力,在團隊面對技術困境時有時也比較難非常有耐性的溝通,我認為這是自己需要再改善的部分!

黑客松 — 開發聊天室:

在交付後兩天的黑客松第一天,團隊遇到技術瓶頸,也可能大家已經很累了,在思考與吸收上沒有這麼靈活,導致對於socket.io的語法與應用方式一直沒辦法掌握。想想繼續下去不是辦法,就很強人所難的請求半夜1點多還在線上的其中兩位夥伴打開語音,直接用講的溝通交流,另外再加緊寫一份socket.io的通訊渠道規格書,如次一來比較能方便前後端的對接。

雖然在第二天還是頻頻因為各種原因導致伺服器爆掉,多次需要中斷開發流程維修或重啟伺服器,但最終還是免強完成了公開聊天、保存聊天歷史資料、顯示在線使用者等等的功能。雖然沒有達到預期中的產出,但夥伴們都付出相當大的努力在面對與解決問題,這絕對是最難能可貴的合作體驗。

開發總結:

整體而言都算是順利(哪有所謂的順利開發啦..ˋAˊ)。唯獨流程上比較讓人困擾的是遠端協作的部分,因為對我來說面對面的對談是無可取代的,可以透過肢體表現與眼神更加理解對方的處境、更完整的get到對方的意思。另外則是遠端工作有時沒辦法即時找到對方,光是等待對方出現就浪費了許多寶貴的時間,但畢竟不是工作所以也很難在這點上有過多的要求。

心境與反思

Photo by Jacob Bentzinger on Unsplash

對我而言開發中沒有比想要面對並解決問題更重要的心態了!也意識到『穩定的開發流』的重要性。在遇到技術困難或是溝通困難時如果沒有及時提出、做出反應,很容易就會讓整個工作出現滯留現象,不管在時程的控制上還是開發時的心情都會受到蠻大的影響。

這次的專案開發經驗對我比較有價值的地方是:對於『沒有無法解決的問題』的這個想法又更加確信了,只要相信自己、保持靈活的思考,且有著絕不放棄的覺悟,再困難、看似不可能達到的目標都會一點一滴的接近。

thanks for your attention!!

如果你在閱讀的過程中有共鳴或是認同我的想法歡迎幫我拍個手或是分享出去~