- 專案名稱:樂寵(Love Pet)寵物渡假村
- 結訓班種:Web/App前端設計工程師養成班_第68期
- 受訓期間:2021/01/07~2021/06/18
- 專案組員:曾鈺雯、柯瀚翔、柯驎益、陳永平、楊子瑩、陳冠宇、簡華儀
- 指導老師:黃語昕、黃瀚霆、曾景鴻、李偉銘、陳雅莉、許尚媛
- 專案網站: https://tibamef2e.com/tfd101/project/g2/front_index.html
專案起源
緯育TibaMe_Web/App前端設計工程師養成班在23週的課程中，共會經歷兩次專案實作，分別是前12週的個人專題製作，以及後12週的團體專題製作。本次團體專題主題「樂寵(Love Pet)寵物渡假村」的誕生，是源自於該組學員柯麟益的個人專題主題的延伸。
由於台灣少子化的情況越來越劇，普遍現代人覺得養小孩麻煩又花錢，取而代之的，養寵物的風氣反而有明顯成長的趨勢。飼主將寵物當作自己的小孩看待，現代俗稱的「毛小孩」，不再只是單純的飼養，飼主更加重視寵物的成長過程，包括食衣住行育樂，希望與毛小孩之間建立許多回憶和更深的連結。因此，該組學員想打造出一座專屬毛小來的寵物渡假村，讓寵物與主人一同締造共融樂園。
專案規劃
訂定主題 → 撰寫使用者故事(User Story)&驗收測試(Acceptance test) → 撰寫使用案例圖(Use Case) → 撰寫活動圖(Active Diagram) → 撰寫類別圖 → 繪製Wireframe → 繪製Mockup → 進入專案開發
撰寫使用者故事(User Story)&驗收測試(Acceptance test)
學生訂製主題方向後，須開始思考與制定使用者故事(User Story)，以站在使用者的角度，去討論「使用者的需求是什麼?」、「使用者想在這個網站達到什麼目的?」，把它們逐一條列出來，最後，再透過用戶角度來進行驗收，看看是否符合使用者需求，如下圖範例：
撰寫使用案例圖(Use Case)
使用案例圖是用來描述參與者(Actor)使用系統的操作互動過程，讓系統能滿足參與者使用系統的目的。Use Case的組成要素會有：行為者、使用案例、使用案例描述、建立使用案例與參與者或另一個使用者案例的關係。如下圖的Use Case清楚表明訪客和會員進入該平台的訂餐系統分別可以做的事情：
撰寫活動圖(Active Diagram)
活動圖是用來描述從一個活動到另一個活動的控制流及執行順序，活動主要表達處理的動作和狀態。活動圖不但可以幫助分析者找出例外路徑，以檢驗使用案例的正確性，或塑模出系統層級的處理邏輯或執行程序，如下圖：
撰寫類別圖
類別圖是一種靜態結構圖，用來描述系統的類別集合、類別的屬性和類別之間的關係，如下圖：
以上這幾個項目都是在系統分析的課程中，與講師不斷討論、釐清與修改的結果。在上課過程中，系統分析課對初學者來說的確會感到較枯燥乏味，但事後回想起整個專案的製作流程，會發現開發前的這些細節訂定真的很重要，才不至於讓學員在真正開發的階段發現種種細節問題跑出來，而迷失了方向。
繪製Wireframe & Mockup
繪製Wireframe & Mockup是學員在23週的學習中，再熟悉不過的事情了！從個人專題開始，再到團體專題，網頁開發前都必須把每個頁面的UI/UX制訂好，以便網頁開發時有明確的規範與執行目標。
Wireframe範例：
Mockup範例：
12週的網站開發時程
團體專題整體製作共花費約3個月(12週)的時間，從前三週的如火如荼訂定主題到確認各項細節的規劃，第四週正式進入開發期，於第五週(期中驗收)和第八週(期末驗收)分別會有兩次檢核點，讓學員報告目前製作進度與執行過程中所遇到的問題，也方便專題指導講師與班導師掌控每組學員的狀況。
使用技術
- 前端：HTML、CSS、JavaScript、SASS、jQuery、Vue.js、Bootstrap、Chart.js、GSAP、Pannellum
- 後端：PHP
- 資料庫：MySQL
- 使用git版本控制共同管理專案
導師觀察心得
緯育TibaMe就業養成班一個班級中的學員有7-8成都是非相關科系背景的人，來到養成班花費將近半年的時間與心力學習，為的是換得半年後的轉職順暢。
對於這群學員來說，學習是一件辛苦且不簡單的事情，從零基礎開始奠基相關知識，同時還要搭配專案實作，往往會聽到學生哀鴻遍野，告訴我他們每天除了吃飯、睡覺，其餘時間都在上課、做作品，一天只睡4-5個小時，覺得時間都不夠用。但每一次的專題實作檢核時，卻也總是讓我為之驚艷，總能夠在作品中看到學員的大幅度成長。
學生常常私底下跑來問我：「老師，一次學習這麼多東西有什麼撇步嗎？為什麼一定要做作品？」
這邊想告訴大家的是：
- 學習過程絕對是艱辛的，但你要從中找到自己的學習節奏。
- 要懂得取捨，什麼課程對你來說是重要的，那就優先複習它、搞定它。
- 專案實作為的是證明你的能力，面試時不再是紙上談兵。
如果你對網頁切版、RWD、UI/UX、前端技術也有興趣的話，歡迎來參加緯育TibaMe的Web/App前端設計工程師養成班，台北和桃園中壢皆有開班！