前後端分離開發 — Simple Twitter Project
Sep 16, 2023
從學期2–3開始，約從4月就開始尋覓組員，非常期待這半年多以來所有課程最終的挑戰，很幸運地我們很早就遇上了許多志同道合的夥伴，在專案開始前先開啟了自學讀書會分享大家所學，也藉此練習如何「好好說明」、「如何能讓人更理解」，再經由大家的反饋，進一 步加深、加強自己不足之處，進入一個正向的循環!
專案介紹 — Alphitter
開發期間: 2023 年 8 月 21 日至 9 月 4 日
開發模式: 前後端分離開發
組員介紹: Ailsa & Lynn (前端) / Eva & Sean (後端)
程式語言: JavaScript
前端框架: React
執行環境: node.js
Twitter 專案中負責主要前端做使用者註冊、登入、設定以及後台，負責共用元件狀態通知的modal以及首頁設計。這次為期2周的短期衝刺中，很感謝所有組員間幾乎不間段地合作(2名在職，2名全職)，全體目標一致且全力衝刺僅是完成這次專案的基礎，最最重要的是我們溝通非常順暢，這是能夠成功走完全程的關鍵，再次感謝Ailsa 、Eva 及 Sean!
專案中所學運用
- 首頁設計與切版
2. 各版面完整重現設計稿
3. 創建共用元件，一次完成相似版面並提升整體一致性
4. 創建 NotiBox (訊息 Modal) 非使用套件，可靈活調整樣式及回傳內容
如果能夠再來一次，想要優化的部分
- 共用件的設計
專案一開始僅討論到應由「feature」去創建每個人負責的 branch，但卻未從 sharing components 開始製作，雖此專案分配到的版面中大部分的 sharing components 都是頁面擔當者自己使用，但未來合作專案應先規劃好共用件(例如: Input field 的大小是否要限定或是做 RWD 版本再藉由各套入版面的容器做限制，又或者是共用函式(例如: 時差計算) 應直接設定為共用件而非重複大量程式碼)，會是縮短開發時程的一大重點。 - 調整串接API的排程
這次安排實際串接API是專案總時長已過50%後才開始串接第一支，最初僅使用與後端協作提供之相同架構之假資料進行版面確認，但實際串接後發現，真正的問題都在實際串接後才會發生，例如: try catch 中 catch 到 error之後該回傳什麼? 怎麼回傳才能讓訊息繼續回傳到畫面上? 當碰上http狀態碼 4xx 、5xx 是前端的程式碼問題還是後端的程式碼問題?…等
一連串接續的問題，都要串過之後才爆發，未來合作在安排串接API這部分會至少安排在總實長30%內試過第一支API，才進行其他編寫或優化。 - CSS 協作規範
定義好協作規範，使用何種預處理器(Sass/SCSS、Less、Stylus)，要不要使用 library，是否能設定寬高，是否規定使用 grid system，img 設定，一個檔案對應一個 css 檔案或是多對一，pages中是否有css檔案或是全部css都設定在元件中…等，增加程式碼易讀性與整體性。 - 製作 RWD 版本
手機當道，這次時間關係從網頁版著手製作，但以實際層面來說，一般網頁瀏覽，手機的使用普及率絕對高於使用電腦，製作 RWD 版本先從 mobile first 開始，也能不浪費效能並由簡入繁，降低反向開發造成各種資訊超載造成的破版。
