【專題成果】從零打造專屬毛小孩吃喝拉撒睡的電商平台,TibaMe前端班學員做到了!

by Gloria
緯育TibaMe_專題作品
  • 專案名稱:樂寵(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個小時,覺得時間都不夠用。但每一次的專題實作檢核時,卻也總是讓我為之驚艷,總能夠在作品中看到學員的大幅度成長。

學生常常私底下跑來問我:「老師,一次學習這麼多東西有什麼撇步嗎?為什麼一定要做作品?」

這邊想告訴大家的是:

  1. 學習過程絕對是艱辛的,但你要從中找到自己的學習節奏。
  2. 要懂得取捨,什麼課程對你來說是重要的,那就優先複習它、搞定它。
  3. 專案實作為的是證明你的能力,面試時不再是紙上談兵。

如果你對網頁切版、RWD、UI/UX、前端技術也有興趣的話,歡迎來參加緯育TibaMe的Web/App前端設計工程師養成班,台北和桃園中壢皆有開班!

分享這篇文章:
0 comment
5

您也許會喜歡

Leave a Comment

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料