實習公司:精誠隨想行動科技股份有限公司
實習單位:全端發展處 B
輔導老師:陸承志 教授
姓 名:郭芯儀
學 號:1101629
我所在的部門是全端技術研發處B(前端),我們部門的分配:A是後端,人數最多,B是前端,C是系統分析。公司發的筆電是Mac,使用的編譯器是 Visual Studio Code,框架是 Vue.js 和 Nuxt。前端工程師的工作內容主要是負責網站或 APP 的「用戶界面」部分,也就是用戶在螢幕上看到、點擊、操作的所有內容,包括讓網站的文字、圖片、按鈕、動畫等元素可以正常顯示、運作,並提供良好的用戶體驗。
前端會向後端發出 API 請求來獲取資料。例如,當用戶開啟商品頁面時,前端會向後端請求商品的詳細資訊,後端收到請求後,將商品資料傳回給前端,前端再將資料顯示給用戶。當用戶在前端填寫表單並送出資料(例如註冊帳號或新增新增項目),前端會將這些資料傳送到後端。後端收到資料後,會進行存儲、處理,然後回傳結果給前端,前端再告知用戶提交成功或出現錯誤。有時候,前端無法正常接收後端的數據,或是資料格式不符預期,這時候前後端工程師會一起檢查 API 的定義和數據格式,並調整程式碼來解決問題。
在實習期間,主要有五階段:
1. 教育訓練期 (1月~3 月)
因為剛進公司,很多基礎知識不足,所以前兩個月主管會指派實習生們一些練習題目,不會接觸到真正的專案,而且主管會幫我們 code review,是個初學者可以大幅進步的階段。
2. 熟悉期 (4月~5 月)
教育訓練期後,我被分配到一個正式的專案,是一個訊息管理平台,要完成其中三個小頁面,但其實基本架構和和網頁共用元件同事們都建立好了,所以算是蠻容易的,很很適合來熟悉前端的運作。
3. 正式專案 (6月~9月)
之後我被分配到一個後台管理系統,也就是 CMS,他是記錄前台預約網站的資料。像是我們常常會用到電影的預約系統,他的後台管理系統就會記錄哪一個用戶預定了哪一場電影、是甚麼時間、哪一個影廳、哪一個座位、有沒有加購爆米花…等的資料。因為這個系統相較簡單,所以主管讓我獨立完成這個專案,有不懂的地方再詢問正職的同事們。那些複雜的預約資料是由後端處理,我負責的部分是製作所有頁面以及串API,我覺得串接API的部分比較困難,因為在學校沒有學過的概念,而且也很需要和後端的同事們溝通想法。
4. 測試工作及報告撰寫 (10月-11月)
前端的開發環境分成 DEV(Development Environment 持續整合開發環境)、SIT(System Integrate Test Environment 系統整合測試環境 [內測])、
UAT(User acceptance Test Environment 使用者驗收測試環境)、
Pre production (Staging Environment 生產前一版)、
Prod(Production 正式環境),在SIT環境時,要對程式做很多測試,確保在各種情況下,都不會出錯誤,然後寫一個「系統整合測試報告」,主要是先描述客戶預期的內容,再說明測試的結果,看兩者之間有沒有符合。
最後要上架到正式環境前,我們需要寫使用者操作手冊給客戶,因為他們並非所有人員都熟知這套系統的操作,所以需要寫得很詳細,讓第一次看到的人就可以了解。同時,正職同事們會到客戶公司內做教育訓練(事前要把操作手冊做成簡報),也就是到現場說明給他們員工聽的意思。
5. 駐點 (11月-12月)
後期的工作內容比較少,所以我被派到別的部門(金融研發部)去幫忙,因為他們都是在幫銀行做案子,而銀行端很要求資安,所以必須駐點到銀行裡面去工作,所以我就從原本在內科上班,改到信義區駐點了。一開始很不習慣,因為我原本的主管沒有告知清楚,我是到現場才知道需要駐點的,好險那邊的同事人都很好,也很願意交流 coding 經驗,讓我慢慢地融入。
這個專案較無時間壓力,所以可以讓我做中學,我負責的是「訊息公告」、「裝置查詢」和「歷史訊息查詢」這些頁面。每個頁面都是由搜尋欄位和表格組成,且依據後台管理者的權限可以新增、修改、刪除資料。像是這個「公告」頁面的搜尋欄位有datePicker, input, multipleSelect,表格裡面的資料可以依據大小排列(sort)。
2. 後台管理系統
這個後台系統的所有頁面都是由我負責的,包括登入頁、首頁、後台帳號管理、後台角色管理、前台使用者帳號管理、前台使用者角色管理、會員管理、預約管理、系統管理。其實這些頁面都大同小異,都是輸入搜尋條件,按下查詢後,會以表格的方式呈現出內容,然後有新增按鈕、眼睛按鈕、畫筆按鈕、垃圾桶按鈕,這些按鈕分別可以進入到新增頁面、檢視頁面、編輯頁面、刪除功能。
因為有了前一個專案的經驗,所以對刻畫面與使用元件比較熟悉了,可以快速且正確的完成。但是還是有一些比較困難的部分,像是上圖(後台角色編輯頁面)的功能授權,折疊的元件是用 Element Plus 的 Collapse,但是沒有折疊的部分要自己用 div 畫出外框。然後可編輯和僅唯讀按鈕是單選,只能選其中一個,並且全部的可編輯按鈕要預設點擊,所以所有 checkbox 也預設要 checked;但如果在編輯過程中點擊了僅唯讀獨按鈕,checkbox 的打勾就要取消。這些還只是刻畫面的階段,要串接 api 時更複雜,所以這部分研究蠻久的。
3. 測試工作及報告撰寫
我知道正式的測試工作包含單元測試、
整合測試、自動化測試等等,都是很專
業的內容。但我這個主要是簡單暴力的
測試而已,就是每個輸入框會規定格式,
像是只能輸入半形英文及數字,主管就
讓我暴力測試,看看其他格式能不能通
過,以及檢查所有元件是是否與
storyboard 的相同,大概就這樣而已。
然後要交測前,需要產出測試報告(如上所述)。
4. 使用者操作手冊
使用者操作手冊的內容與 storyboard
有點類似,但是關於程式方面的內容
不用寫出來,然後畫面的每個功能都
要白話的描述,讓每個人第一次看到
就懂怎麼操作,這個簡報是需要到客
戶公司報告的。
5. 銀行大小網
我覺得實習生就像白紙一樣,因為甚麼都不懂,但是可以透過主管指派的專案,以及自己積極的詢問中學到很多,所以我很珍惜手上每一個專案,都可以增加我的所見所聞及實力,也會主動詢問現在有沒有需要幫忙的,發揮出實習生輔助的角色,因為做的多學的多,機會是自己去爭取的。
開發人員檢視的一些重點:
•Elements 分頁:顯示網頁轉譯後的 HTML,這與網頁的原始碼不同。如果網頁在載入時,透過 JavaScript 建立或變更了任何 HTML 元素,那麼這些變更就會反映在網頁所轉譯的 HTML 中,而網頁「原始碼」則不會受到任何影響。
•Network 分頁:內建的 Proxy-sniffer,可以監控網頁在載入當時和之後的 HTTP 流量。
•Timeline 分頁:顯示某個時段內的 HTTP 流量與記憶體用量。與 Network 分頁類似,Timeline 分頁也可用於找出產生延遲的來源。
•Console 分頁:這個分頁會自動偵測該網頁程式碼中的錯誤。Network 分頁判斷出系統未觸發代碼後,可透過 Console 分頁找出未觸發代碼的原因。
目前台灣有三大主流框架,我第一個專案是學到 Vue,後來還接觸觸到 Angular
-
Vue - Vue.js 是一個用於建立使用者介面的開源 MVVM 前端 JavaScript 框架,也是一個建立單頁應用的 Web 應用框架。(JavaScript)
-
Angular - Angular 是一個基於 TypeScript 的開源 Web 應用框架由 Google 的 Angular 團隊以及社群共同領導。(TypeScipt)
-
React - React 是一個免費的開放原始碼前端 JavaScript 工具庫, 用於基於 UI 組件構建使用者介面。 它由 Meta 和一個由個人開發者和公司組成的社群維護。 React 可用作開發具有 Next.js 等框架的單頁、手機或伺服器彩現應用程式的基礎。(JavaScript)
工程師不只是寫程式,每個環節都是需要很多溝通的,溝通也是在職場中很重要的一件事。像是我常常有不懂的地方想詢問學長姐,所以就要清楚的知道自己是甚麼地方有問題,自己要有清晰的邏輯,以及有禮貌有條理地描述問題,這樣別人才能好好的解答。
在一開始的教育訓練期間,我連css和js都不太熟悉,也完全沒有碰過三大框架,但到後來看得懂規格書、可以用 Swagger 及 Postman 串 API、可以自己獨立完成一個專案。如果沒有實習的話,我真的不知道以後進到職場怎麼辦,因為學校所學跟職場所用完全不一樣,所有東西都要從頭學,好險我進到一個友善、願意教實習生們的公司,也願意信任我們,分派客戶的案子給我們。
我們公司的平均年紀很年輕,主管才 30 多歲,正職同事們也都是 22-30 出頭之間,跟老師聊完後才知道這是好事,有些公司的同事主管都是我們爸媽年紀的話,公司可能會有點老化,也可能不會分派工作給實習生,導致學不到東西。
所以很感謝學校及公司給我們的實習機會,雖然實習的生活有點辛苦,每天朝九晚六,但是讓我們提前進入職場學習,也可以讓我們思考這樣的領域是不是自己喜歡的、這樣的生活是不是自己能接受的,而且公司裡的每個人都很願意幫助實習生,真的讓我成長很多。
我四個月在前端部門的工作主要是刻前台網站或是後台內容網站的畫面和串API,但是陸續覺得前端的工作都有點相似,而且難度相對後端來的低,就有詢問老師對前後端的想法:「現在越來越多類似資傳系的同學會來做前端的工作,因為他們比較擅長美編,會用 Figma 設計畫面以及刻畫面、串 API 那原本前端的人就會被取代,他們有兩種方向,一是精進後端的技術,成為全端工程師,包辦前後端的工作,還有開發自動化測試。二是繼續做原本前端的工作,但是需要精進美編,多一個技能。」,讓我覺得前端工作是不是很容易被取代?
但是後來跟主管聊,主管表示:「不論是前後端的工作,做久了都會覺得在做差不多的事情,而且都是抄來抄去的。但是每個案子難易度不同,遇到難的案子時,可以多磨練自己,累積經驗、增加實力。遇到簡單的案子時,不是草草了事,可以看程式碼沒有有哪些部分可以更精簡,讓效能更好。如果累積了很案子、很多經驗,接下來可以當系統分析師,他們的工作是跟客戶溝通需求,然而有時候客戶提出了需求a,但他們希望看到的其實不是功能a,而是功能b。很多客戶會有一些盲點或是誤解,所以這時候就需要有豐富經驗的系統分析師來釐清客戶的需求,並出storyboard文件和畫面,是很重要的環節。」
我覺得公司的文化能帶領員工走向很不一樣的地方,我以前體育課都不太愛運動,3000公尺也跑得很慢,但精誠有運動的文化,每週都有不同類別的運動課程,像是羽球、籃球、壺鈴、TRX等等,且都是免費的,也很鼓勵員工參加,而且不定期還有保齡球比賽、籃球3對3、馬拉松等等活動,所以同事之間也會討論運動話題,進而也會實際去運動。所以我進公司後就有報名壺鈴課,主要是想變得更健康,不然平常沒有機會運動。實際去上課後覺氛圍很好,老師教得很清楚,也會鼓勵人,同學從二十幾歲的實習生到三四十歲的資深員工都有,而且都會互相協助,所以我之後也會繼續堅持這項運動。