Image for post
Image for post

繼去年結束了在研華科技長達六個月的實習後(回顧我在研華的實習心得),我更清楚未來自己在資訊產業想走的方向,經過這段期間的不斷努力後,這次總算是拿到自己心目中理想的實習工作,圓了我大學時期的夢想之一啊!!

準備

大約從今年三月中就開始為這次的實習做準備,從作品集的設計規劃與開發,到中英文履歷的撰寫,真的花了很多時間心力!

投遞清單

這次投遞了共有12間企業:

  • Google
  • Yahoo
  • Microsoft
  • Dell
  • AWS
  • Synopsys
  • IBM
  • LINE
  • HP
  • 趨勢
  • Dcard
  • 時刻科技

(雖然明白有些企業的職缺其實不太適合自己,但還是抱著投了不會少一塊肉的心狂灑履歷~)

當初心中為這次實習工作的排序是:
外商純軟公司 > 台灣純軟公司 > 新創 = 台灣硬體廠,

會這樣排序是因為後面兩種之前都已有接觸過,想在學生時期多體驗不同的實習企業文化和工作內容~

而最後12間中有6間得到了面試機會,能有這樣的面試率其實已經很感激了,畢竟我的學歷其實不是太亮眼QQ

求職過程

趨勢

Image for post
Image for post

應徵職位:HIE Front-End Engineer Intern

趨勢在投遞後經過了幾個禮拜的時間,HR寄來了第一階段的任務是要完成一份前測作業,當中比較特別的是要求不可使用任何前端框架像是React、Angular、Vue、jQuery etc.,並且限時要在三天內完成回傳!

這項前測題目不會太困難,大概花了一天半的時間完成並寄回後,當天就馬上收到面試邀約。

面試流程:(總時長約40分鐘)
1. 自我介紹
2. 過去實習工作經歷詢問
3. 技術問答
4. HR Interview

進到台北辦公室後,HR帶我進到小小的會議室等待面試官,趨勢的面試算是非常中規中矩的,面試官也有提到這次會比照正職來進行面試!

自我介紹完後,接下來的整個過程中其實像是快問快答,面試官將手上一份問題單一題一題做詢問,範圍包括JavaScript概念、解釋CSS的屬性、Git的指令、設計模式等。
並且也會穿插一些過去背景的詢問,最讓我印象深刻的是面試官詢問過去在研華的主管是否為工程師背景,團隊裡有哪些角色等。

在快問快答之後,面試官便詢問是否有其他問題要問,代表面試進入尾聲,
這讓我有點訝異,因為此時時間才過了半小時左右XD

接著是HR interview,大概詢問了是否還有投遞其他企業的實習,並且告知我的前測作業是團隊認為寫得最用心的(內心感動哭😭)!…


Image for post
Image for post
桃園Open Data X 酸雨監測分析:預測降雨的pH值

# 動機:是什麼讓我選擇了他✨

Image for post
Image for post

空氣污染一直都是地方目前最熱門的議題之一,因此在最初選擇欲使用的資料集時,我希望能以空氣 PM2.5資料,結合汽機車流量、人流分析、工廠排放廢棄、垃圾焚化廠排放煙道氣等資料集,並透過機器學習的方式,以觀察其中關聯。

但由於在想選用的「桃園開放資料庫」當中,以上這些資料集的筆數皆有過少或是欄位資訊不一致的問題,因此最後我決定採用「酸雨監測:雨水化學分析資料」這份資料集,除了因為酸雨與空氣污染有密切關聯外,此資料集在程式轉換上也較容易(小聲 XD)。

# 資料集原始樣貌👀

Image for post
Image for post
原始CSV檔長這樣

原始資料筆數共有581筆,擷取自2015年7月至2016年6月。

「雨水化學分析資料」資料集概括欄位主要有:

  • id
  • 測站名稱(包含桃園市轄區中六個空氣監測站)
  • 日期
  • pH(酸雨的pH值會低於7以下)
  • 導電度
  • 氯化物
  • 硝酸根
  • 硫酸根
  • 氫離子
  • 銨根離子
  • 鈉離子
  • 鉀離子
  • 鎂離子
  • 鈣離子
  • Sum(空氣中離子與灰塵雜質的總和:代表空氣品質)

# 從資料集中擷取的特徵:想解決什麼問題❓

在開始之前,我們先立下假設:「酸雨資料中的pH值空氣品質是呈負向關聯」,意即當空氣中所含的微浮粒子數越高時,酸雨濃度就會越酸(pH值越小)。

而接下來,我們要開始做實驗,利用機器學習中回歸方法來驗證這項假設是否正確!Go Go Go~

# 應用模組簡介:SKlearn📖

Scikit-learn 簡稱 SKlearn,在python中只要 import sklearn 即可使用。
官網中我們可以發現,Sklearn提供的功能分為六大項:

1. 監督式學習的分類(Classification)
2. 回歸(Regression)演算法
3. 非監督式的分群演算法(Clustering)
4. 降低維度(Dimensionality reduction)
5. 模型選擇(Model selection)
6. 資料的前處理(Preprocess)

在這個實驗中,因為本資料集已有提供label,因此必須使用監督式學習的方式完成。
而 SKlearn 當中的監督式學習又包含了分類與回歸兩大功能,因為本資料集是為連續性的數值,故採用回歸演算法來做預測。

# Getting Start🚀

回歸是什麼?

回歸是一種統計學上分析數據的方法,其目的在於找出一個最能夠代表觀測資料關係的函數,利用回歸所得出的結論會是連續的。

Python的詳細程式做法

這份資料的筆數共有581筆,而我將這581筆資料拆分570筆作為訓練模型用,剩餘的11筆則作為測試用。

執行結果如下:

Image for post
Image for post
從結果中可以發現負向關聯

實際 pH 值結果

[5.13 4.82 5.02 5.13 5.39 4.7 ]

預測 pH 值結果

[5.10518381 5.0788999 5.02288134 5.10033321 5.13301867 4.74028654]

以上預測的結果與實際誤差不大。

Image for post
Image for post
在11筆測試資料中起伏較大的資料

# 結論💡

在一開始我們假設了「酸雨中PH值與空氣中化學物質會呈負向關聯」,經過了以上的實驗,觀察結果可證實這項假設是正確的!

而有了這套Model,未來我們可以再進一步建置許多應用,例如可用以警示目前降雨的酸雨濃度(指數),提醒人們外出避免淋雨,以防危害身體健康。


Image for post
Image for post
➤ 本篇文將會使用 Visual Studio 作為開發工具,以 C# 撰寫程式範例。

延續前一篇文章,接下來本文將會介紹如何使用Selenium Grid,來讓多個網頁測試可以一次平行跑在多個機器的多個瀏覽器中
如果你還沒看過上集,可以參考:

Selenium Grid 簡介

Selenium Grid允許我們在多台機器的多個瀏覽器上並行的進行測試,即分佈式測試。
而通常以下兩種情況會需要使用到Selenium Grid:

  1. 多個瀏覽器的兼容性測試,即在不同瀏覽器或不同操作系統的瀏覽器中進行測試。
  2. 測試案例較多時,也可以通過分佈式測試減少測試執行時間。

在上集中,我們使用MSTest框架來撰寫測試,但由於MSTest不支援並行測試,因此在這邊我們需要將測試framework改為NUnit。

關於 NUnit

NUnit 是開源的單元測試框架,支持所有的.Net語言(採用C#開發)。

這邊也要介紹一下NUnit與MSTest相對應的一些屬性用途:

Image for post
Image for post

所需元件

  1. Chrome的WebDriver:chromedriver (http://chromedriver.chromium.org/downloads)
  2. Firefox的WebDriver:geckodriver (https://github.com/mozilla/geckodriver/releases)
  3. IE的驅動程式:IEDriverServer (https://www.seleniumhq.org/download)
  4. Selenium Standalone Server (https://www.seleniumhq.org/download)
  5. Java JDK (https://java.com/zh_TW/download)

完成上述檔案下載後:

  1. 將上述檔案放在指定路徑(此處以C:\示範)。
  2. 於控制台 > 系統及安全性 > 系統 > 進階系統設定 > 環境變數 編輯系統變數中的PATH,加上指定的路徑C:\。
Image for post
Image for post

在 Visual Studio 的【工具】 > 【NuGet 封裝管理員】 > 【管理方案的NuGet套件】來安裝以下這些NuGet套件。

Image for post
Image for post

Selenium Grid工作原理

Selenium Grid是由一個Hub節點和數個Node代理節點所组成,即分佈式結構。

而Hub顧名思義是一個集中管理站點,它是用來管理底下各個註冊節點(Node)的狀態,並且接收遠端程式碼的呼叫調用,然後再把收到的請求丟給底下的Node來執行。…


Image for post
Image for post
➤ 本篇文將會使用 Visual Studio 作為開發工具,以 C# 撰寫程式範例。

前言

相信時常接觸網頁開發的人一定遇過這樣的感受:每當網頁製作好後總得一個一個頁面手動檢查,一個一個按鈕做點擊測試。

當要檢查測試的網頁很單純、只有一兩頁時,手動檢查相對快速容易,
但當操作流程越來越複雜,或者動輒上百個畫面時,若程式每更新一次就得全部重新檢查,光測試完天就黑一半啦(又容易眼花沒發現錯誤~)

而到底這樣的流程有沒有更自動化、更省時省力又聰明的方式呢?
只要運用網頁自動化測試就能解決上述問題~~~

網頁自動化測試是DevOps其中一種概念,當我們寫好程式後並寫出測試方法,往後只要執行這些測試方法,就可以一次驗證網站程式是否正確無誤。
而我們更可以將這些測試綁入CI/CD流程中,只要程式更新並push,就自動去執行測試,產生測試報表,並且當測試皆通過時就直接部署到server上。
當專案需要快速迭代時,就可以大大節省每次更新重複手動測試部署的時間人力成本浪費(灑花轉圈 🎉

而提到網頁自動化測試,今天要介紹的是 Selenium 這套開源的老牌工具。

Selenium 簡介

Selenium支援了多種程式語言(Python, C#, PHP, JavaScript, Ruby etc.)及多種瀏覽器,是套可以讓程式直接驅動瀏覽器進行各種網站操作的自動化測試工具(也可以拿來做為爬蟲工具)。

Selenium 2.0 主要包含以下這些工具:

  • Selenium IDE:目前是在Firefox上的一個Plugin,可以用GUI的方式,像按鍵精靈一樣透過點擊直接產生出測試流程。
  • Selenium WebDriver:提供了强大的元素定位方法可以選取DOM Element,並且能驅動多種不同的瀏覽器,在執行測試時能夠看到程式真實操作畫面的樣子。
  • Selenium Grid:能一次在多個瀏覽器中執行多個測試,採用Hub/Node方式,在Node上跑Webdriver並統一透過Hub一次管控。

但其實當初在公司執行專案期間選擇了Selenium的真正原因,只是因為它有周邊IDE,不需寫程式也能讓PM及其他同事都很好上手 XD

規劃測試案例

在開始測試之前,需要清楚知道目前要測試的目標與涵蓋範圍,因此我使用表格來紀錄訂定的測試案例。

Image for post
Image for post
利用表格寫下每一個測試案例的對象功能/流程步驟等。

Getting Started

🚀 事前準備

讓我們在 Visual Studio 建立一C#單元測試專案。

Image for post
Image for post

🚀 所需元件與元件

在 Visual Studio 中安裝以下NuGet套件。
【工具】 > 【NuGet 封裝管理員】 > 【管理方案的NuGet套件】

Image for post
Image for post

並且於專案中安裝如下圖這些套件。

Image for post
Image for post

🚀 建立第一支測試

在一開始我們先以MSTest(是為 Visual Studio 帶有由 Microsoft 支持的內建測試框架)來撰寫,較為簡單容易理解。

首先必須了解一下MSTest的屬性如下:

Image for post
Image for post

在程式中我們可以定義變數 baseURL 為主要測試的目標網站位址,
然後在屬性 ClassInitialize 的初始 function 中定義 driver 為 ChromeDriver,
並且讓 driver 跳轉到 baseURL 頁面。

Image for post
Image for post

接下來我們就可以開始寫測試案例囉!

Selenium提供了多種方式來查找元素(FindElement),包括:

  1. By ID
  2. By Name
  3. By ClassName
  4. By TagName
  5. By LinkText & PartialLinkText
  6. By XPath

而這邊示範一個測試案例:

1. 訪問首頁(www.google.com.tw)。
2. 點選「隱私權」連結。
3. 檢查「下載 PDF」連結是否顯示於頁面上。

這裡範例我們用 LinkText 來檢查「隱私權」連結元素是否存在於頁面當中。

而除了 FindElement 外,Selenium WebDriver 也提供了許多 Command,例如:ElementIsPresent、Click等等。

Image for post
Image for post

最後的最後,我們寫一個屬性為 ClassCleanup 的 function,定義當Unit Test Class要結束前執行關閉driver的動作。

Image for post
Image for post

最後我們的程式碼就會像這樣~

寫完測試方法後,點開【測試】>【視窗】>【測試總管】就可以查看所有我們撰寫的測試方法。

Image for post
Image for post

然後點選【全部執行】可以進行建置,並掃描存在的測試方法然後執行。

Image for post
Image for post

當執行時就可以看見瀏覽器被自動開啟並執行程式定義的動作囉!

執行完成能清楚得知測試結果是否為成功,若測試失敗了也將會顯示錯誤訊息以便於debug~

使用IDE

Selenium IDE 類似按鍵精靈,可以幫助我們不須寫程式就能建立網頁自動化測試。

使用Firefox瀏覽器開啟安裝:

Image for post
Image for post

安裝後即可開啟Selenium IDE視窗。

Image for post
Image for post

按下右上角紅色圓鈕就可以開始錄製動作,同剛剛的測試案例:

1. 訪問首頁(www.google.com.tw)。
2. 點選「隱私權」連結。
3. 檢查「下載 PDF」連結是否顯示於頁面上。

第1~2步驟可以透過滑鼠點擊來完成,但第3步就要透過手動方式加入。
使用Selenium IDE錄製即可快速得到如下圖的結果,按下視窗上方的▷按鈕就可以執行這份測試案例並得到測試結果。

Image for post
Image for post

Selenium IDE 操作簡單,連工讀生也能很輕易的上手,由於他能自動化快速操作網站的特性,網路上更有人運用Selenium IDE來搶火車票 😂

以上我們對網頁自動化測試完成了一些測試案例規劃與基本實作。
透過網頁自動化測試我們可以模擬出使用者操作網站的方式,進而發現錯誤、增加對產品的信心以及提升使用者體驗。

而客戶/使用者通常不會只有單純使用同一種瀏覽器,
因此下一篇將繼續分享有關於:如何利用 Selenium Grid 在多家瀏覽器中平行測試多個測試案例,以及我自身專案測試的經驗分享。

希望喜歡這篇文章的朋友可以於底下留言互相交流或幫我拍拍手👏,乾蝦大家!


Image for post
Image for post

大家好,我是研華科技的網站開發Intern Xinhe,
目前就讀於國立臺中科技大學 資訊應用學系 大二,
身為年紀最小的Advantecher,不知不覺實習已長達半年,
因此想跟大家分享我這六個月來在Content Curation部門的所學與成長~

研究型題目

加入研華後我被賦予的第一項研究題目是針對網頁自動化測試的建置,雖然對CI/CD已有觀念,但卻未曾自己實作過,對我而言是很大一份挑戰。

主管指定要使用的框架為Selenium後,便交由我研究如何建置執行。

由於研究型題目通常為過去研華內較少同仁接觸的領域,因此在研究過程中遇到困難,需要透過自己不斷上網爬文找尋解決辦法。

而終於寫出第一個測試案例且測試通過後,主管便會再提出問題加深研究程度,指定須使用多個瀏覽器平行UI測試,循序漸進的引導也讓我在最後總算將專案的CI流程完整。

Image for post
Image for post
產出測試報表,增加對產品的信心

主管也安排讓我與IT同事們並跨國連線中國大陸的QA同仁進行技術分享與交流。分享會上除了傳遞CI觀念,也教導大家測試的代碼撰寫等,過程中從大陸崑山QA同事那方得到許多DevOps的實務經驗,互相討論遇到的問題與解決辦法,收穫良多。

參與真實已上線專案

1. Marketplace

http://wise-paas.advantech.com/en-us/marketplace

Image for post
Image for post

Marketplace(軟體市集)是我在研華最主要的工作專案,包含需要優化客戶於Marketplace上的產品兌換流程、提升User Experience等工作事項。

  • 技術:ASP.NET MVC + AngularJS
  • EnSaaS(研華IOT雲服務)產品試用流程建置:
    我主要負責調整前端UI,針對未購買過EnSaaS(研華IOT雲服務)這項產品的客戶提供一個月的產品試用期。
Image for post
Image for post
  • UX優化:
    也建立了404用戶找不到網頁的提示頁面以及403當用戶沒有存取權限的提示頁面,另外還有搜尋效果的調整等等細節。
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

2. 官網2018改版

http://www.advantech.com

Image for post
Image for post
  • 技術:ASP.NET MVC + AngularJS,抓取公司內部CMS資料顯示,讓Marketing人員也可管理官網上的新聞、影片。

研華官網在本次的改版是為了更符合我們智慧製造、工業物聯網的願景,並期望讓客戶能夠從官網上感受到AI即將帶來的變革。
而由於官網的更動會影響到全球同仁與客戶,因此所有細節都得更加小心翼翼。在官網改版工作中,我主要負責前端程式套用及資料binding。
完成後也會公告讓全球marcom回報問題(甚至有了Bug 100列表 😂),並須於指定時間內修復與上線,當整個部門團隊卯起全力一同執行這項任務,完成後也充滿成就感。

3. GDPR Update on Member

Image for post
Image for post
  • 技術:ASP.NET Web Form + Vue.js

號稱史上最嚴格個資保護法的歐盟GDPR於5/25上路,只要客戶、合作夥伴有來自歐盟,就必須遵守規範。
這段時間大家的信箱都湧入大量企業針對GDPR所發布的隱私權宣告信件,
而研華為了達到GDPR標準,也必須讓使用者可自行管控帳號。
在這項工作中,我的任務是在研華Member系統加入匯出資料與刪除帳號兩項新功能,是在其他公司中難能遇到的工作與經驗。

Monthly Meeting & Weekly Meeting

Image for post
Image for post

在這段實習計畫中,實習生們在各部門mentor分開帶領下擁有不同領域的工作,而Intern Monthly Meeting是讓我們可以聚集在一起互相交流了解彼此工作的管道,我們每一個人都必須分別上台報告每月份的工作計畫、KPI及工作成果,並且會由公司的CTO甚至是董事長及Manager們一同檢視專案成果。
每個禮拜五部門內也會舉行周會,部門同仁一起review目前正在執行的各個工作任務狀況。

接觸不同領域的同事

在大公司中由於分工精細,很多時候我們可能只會清楚自己手邊的工作,但卻完全忽略價值鏈上的其他工作內容。
在研華中我也很慶幸自己除了專注於程式開發,還能有機會認識好多擁有不同職能的同事們。

  • Marketplace PM:一直以來我都極想深入了解關於PM這項職務的工作,在開發Marketplace軟體市集專案中很榮幸能與PM有互動往來。PM的工作內容範疇極廣,一方面對市場、用戶溝通往來,一方面對開發人員、外包廠商,定義專案方向以及該如何執行,讓專案能如期、在成本內、達到原本定義的目標,且兼顧品質。
    Marketplace專案的PM是具有技術背景的,因此針對每個功能都能與我們開發人員深入討論。在專案持續進行的過程,也讓我從PM方看見以往自己於平常寫程式時不會考慮的細節點,例如user experience、一個功能的變動就可能牽連其他面向的流程等,在這段過程中讓我學習到一些專案管理思維與產品思維,非常值得。
  • UI/UX設計師:在官網首頁的持續開發期間,也不斷與部門的設計師接觸,UX設計師須在專案前期做使用者調查,繪出Wireframe,再由UI設計師製作mockup。UI設計師也必須在過程中不斷針對圖片大小、RWD、文案長度進行版面的微調,在我的部門中,設計團隊針對樣式都有統一的Design guideline,更讓我佩服的是前端靜態頁面皆從設計團隊產出,讓程式開發人員可以更專注於資料及後端處理。
    而Design guideline 更牽扯到的是使用情境,在官網的不同頁面中必須統一風格、寬度等等,避免使用者要一直習慣每個頁面有不同操作方式。
  • ER(員工關係專員):研華一直以來都以「幸福企業」為企業經營宗旨,因此員工關係在公司中也扮演著不可或缺的角色。
    員工關係的工作內容包含了新人訓練、舉辦企業內部各式大小活動(例如運動會、家庭日、尾牙等)與講座、發布每周電子報,一人須身兼多職,同樣也是十分辛苦。

感謝

Image for post
Image for post

當初最想在研華學習成長的其實不僅僅只有技術面,更是在大公司的視野、人脈、公司文化制度、溝通與工作處事方式等等軟實力。而我也確實從同事、主管、技術長、總經理身上學到了很多業界生存之道,體會到在工作上有許多SOP流程必須遵照、每項工作背後其實都是由許多部門共同合作分工再串接、部門組織在公司價值鏈中扮演的角色等。

研華給實習生的課題都是實際的產品與系統,因此更要避免粗心大意,實習後才發覺在學校中的我們有無限的犯錯、嘗試機會,到了職場上每一次錯誤可能都得付出成本。以前我們在學校學了好多理論,理論固然重要,但若不懂得如何實務運用,那都只會成為空談。實習便是個可以讓我們親身體會出理論中精髓的機會。

在歷經了一整年的實習工作(前半年為新創公司,後半年來到研華科技),我覺得實習就像是遊戲中的打怪練功,一路上會有很多好玩有趣的事物,突破的技術,當然也必定碰到困難挫折和迷惘,不過每過了一段時間回頭看,就會發現自己又更上一級level了!

Image for post
Image for post
Image for post
Image for post
念念不忘的春酒與每一季舉辦的慶生會活動

當然最迷人的永遠是過程,學到的東西、認識的人、得到的經驗教訓、發現自己適合走的道路才是最重要的收穫,因為那是不會隨著實習結束離職後便消逝的寶藏。

Image for post
Image for post
和幾位同事們一起到澎湖旅遊~~~

感謝研華帶給我的莫大成長及幫助,我很幸運能遇到這麼優秀的主管與團隊一起共事,也期望這段實習中的所學能夠在未來加以應用。

Thank you Advantech!

Image for post
Image for post
Image for post
Image for post
謝謝這段期間照顧與包容我的大家~ ❤️

About

Xinhe

Web Developer / 帶著一顆喜歡程式的心,全力以赴 💕 https://www.linkedin.com/in/xinhe998

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store