跳到主要內容

十分鐘理解何謂「網頁開發軟體工程師」

by Vanessa Wang   歡迎支持我的臉書專頁：【工程師作家的轉職人生】


上週有個朋友打電話給我，說她認真考慮跟我一樣轉行當軟體工程師，想要多理解我的工作內容。

很多人想要學寫 code，但未必知道會寫 code 以後能夠做什麼、有哪些工作選擇。這篇我想以淺顯的方式講解所謂的 web developer （網頁開發工程師）的工作內容到底是什麼。

首先說明一下，coding 相關的職業非常多：你可以寫手機的 app、寫網頁、開發人工智能、做金融業的預測模型、做機器人（包含工廠用來大量生產各種產品的機器）、開發自動駕駛技術等等等。太多了。程式語言存在的目的就是做自動化、減少人工作業時間，所以運用的範圍無遠弗屆。

這篇要講的只是這其中的一種職業，那就是 web developer，因為這是我現在做的，也是許多非本行的人學會寫程式語言後第一個會考慮的職業。網頁開發工程師，顧名思義就是寫網頁的人；仔細想想，現在世界上任何產品、公司都有網頁，因此網頁開發工程師的職缺非常多，再加上這是 coding 相關職業中入門門檻較低的選擇，因此市面上的「軟體工程師速成班」（coding bootcamps）大部分也都是教網頁開發。

網頁開發又分成前端工程師及後端工程師，我做的是前端。那我們的工作內容到底是什麼呢？

我們都在網站上買過東西。舉個例，當你在 Amazon 上買一件毛衣的時候，你會看到毛衣的照片、看到價格、看到尺寸... 使用者看得到的這一切，都是前端工程師用 code 寫出來的。當你選擇衣服尺寸的時候，你會看到只剩下 Large，Medium 跟 Small 都沒有了。讓使用者看到剩下哪些尺碼、讓那些已經缺貨的尺碼變成不能夠選取的狀態、讓使用者在沒有選擇尺碼前不能按下一頁結帳... 凡跟使用者介面相關的東西，都是前端工程師的責任。

至於網頁上字體要多大、怎麼排版比較好看這種事，通常就有另外的 「網頁設計師」負責設計美感。工程師主要是處理邏輯的部分，像是使用者按哪一個鈕會跳到哪一頁、信用卡號碼少寫一個碼下單不能成立、如何讓已登入會員在下次登入時看得到之前放在購物車裡的商品等等。




前端工程師的工作，就是讓買家能順利的下單，買到她想要的尺寸、顏色。但網頁如何知道什麼時候 Medium 開始缺貨？又怎麼知道什麼時候紅色的毛衣又進貨了呢？

想像一個傳統的商業模式，大概就是有一個店員會去倉庫查看，看完再跟客戶回報「我們還有最後一件紅色的毛衣」。在購物網站上，這個「查庫存」的動作，就是後端工程師處理的邏輯。每個網頁背後都有一個「資料庫」，暫且可以把它想成一個巨大的 excel 表格。這個表格上記載了所有毛衣的顏色、尺寸庫存。每當有一位買家下單一件毛衣，這件毛衣就得從這張 excel 表格被畫掉。而每當毛衣再進貨時，這些新的毛衣就得記到 excel 表格上。

總結一下：資料庫上記載著所有毛衣的庫存量；前端工程師負責透過網頁介面讓使用者輕易得知剩下什麼顏色什麼尺寸；而在這中間跑腿、在每次下單或進貨時去更新資料庫的人，就是後端工程師。

關於前端及後端，我還喜歡用房子做比喻。如果網頁是一間房子，前端工程師就是做所有室內裝潢的人，而後端工程師則是負責供應水源、電源、瓦斯、網路等等。舉個例子來說，蓮蓬頭怎麼跟出水口接在一起、怎麼透過把手控制水溫水量，這是前端工程師的責任；但水源的供應、源頭水壓、把管線拉到廁所的位置，這就是後端人員要做的。前端與後端工程師必定要很緊密的合作，不然只有蓮蓬頭卻沒有水無法洗澡、而沒有蓮蓬頭或者開水源的把手，一樣使用不到水，還是無法洗澡。

以上就是我對網頁開發工程師的簡單說明。如果對「機器學習」這個主題有興趣，可以看這篇：初學 Python 與 Machine Learning 心得。

如果想要知道我當初靠線上課程自學轉行成為網頁開發工程師所使用的資源，可以看 九個月自學轉行軟體工程師。


再附上幾門我在 Udemy 上過的課；我自學轉行的知識來源就是靠這幾門課。這些課程的特色是價格低（特價時我看過低於$20鎂）、內容充實（30小時以上的教學影片）及注重實作。
The Complete Web Developer in 2024: Zero to Mastery （這門課現不在 Udemy 上）
Complete Machine Learning and Data Science: Zero to Mastery (機器學習及資料科學)

標籤：

留言

張貼留言

這個網誌中的熱門文章

什麼是 Assertiveness? 你容易被情感勒索嗎？

來到美國後我才第一次聽到 assertive 這個單字。美國人將 assertiveness 視為很高的美德，因為那代表一個人具備足夠的自信、溝通技巧、人際成熟度，以至於能夠堅定、清楚地表達自己想要的與不想要的，卻不會因此傷害他人或顯得傲慢、無禮或威脅他人。 Psychology Today  是這樣定義 assertiveness 的： “Assertiveness is a social skill that relies heavily on effective communication while simultaneously respecting the thoughts and wishes of others. People who are assertive clearly and respectfully communicate their wants, needs, positions, and boundaries to others.  Individuals who are high in assertiveness don't shy away from defending their points of view or goals, or from trying to influence others to see their side. They are open to both compliments and constructive criticism. ” （「Assertiveness 是一種社交技能，依靠的是在有效溝通的同時尊重他人的想法及需求。Assertive 的人能清楚且尊重他人地說明自己的需求、渴望、處境以及社交界線。擁有 assertive 特質的人會積極地說服他人了解自己的觀點，也積極地爭取、辯護自己的想法。他們對於讚美及有建設性地批評同樣地歡迎。」） 美國人如此看重、欣賞的 assertiveness 這個單字在中文卻似乎沒有相對應的翻譯。Google translate 將 assertive 翻成「斷言的、斷定的、過分自信的」；我覺得這些翻譯充滿負面含義且非常不正確。 生長在台灣的我，認為台灣確實沒有 assertiveness 的文化。我觀察到的台灣人，普遍很少直接說出自己想要什麼；如果說出來，
19 則留言
閱讀完整內容

花九個月，靠自學轉行軟體工程師 -- 我所用的網路資源

by Vanessa Wang       歡迎支持我的臉書專頁：【 工程師作家的轉行人生 】 因為身邊有許多半路出家的軟體工程師，包含我老公，我一直抱持著或許某天我也要轉行當軟體工程師的想法。但我到了成為媽媽、小孩快一歲的時候，我才開始自學寫程式。 從 2018年底開始，我花了九個月的時間自學寫程式，並於 2019年七月成功轉行、找到了在加州矽谷全職軟體工程師（front-end web development）的工作。我沒有參加 bootcamp，就是在網路上找資源、自修。我是台大土木工程碩士畢業，後來到美國讀創意寫作碩士。成為軟體工程師之前，我沒有在職場上當過工程師，以前主要的工作以當 technical writer 寫技術文件為主。（ 更多關於我轉職的動機、轉職前的履歷 ） 這篇想整理一下我自學期間用過的教材、工具，但這些都僅供參考，畢竟每個人的狀況、目標都不一樣。我始終相信「盡信書不如無書」。我這九個月中學到最重要的一件事就是凡事要有自己的想法、相信自己。像我這樣的文章網路上有很多，每個人用的方法都不太一樣。參考別人走過的道路很好，但更重要的是規劃最適合自己的一條路，然後自信地走下去。 以下就是轉行的路上，對我最有用的網路資源、工具： 一篇 Medium 上的文章 by Andrei Neagoie  這篇文章叫做  Learn to code in less than 5 months, get hired, and have fun along the way 這是我還在當 technical writer 時，某天上班無聊隨便 google 找到的。那時候還不太確定自己要不要轉行軟體工程，所以常常在網路上參考他人的經驗。我不時地都會回來看這篇文章，這篇文章可以說是貫徹我自學期間的一個中心思想。我很欣賞他的理念，尤其是以下這段話： “I spent the first month avoiding any tutorials or books. Instead, I spent this month looking at the best way for me to learn and get hired. I studied other people’s experiences, looke
33 則留言
閱讀完整內容

是不是要「很聰明」、「數學很好」才能寫 code?

在我去年開始自學寫程式之前，我常常問是軟體工程師的朋友：「寫 code 很難吧？感覺超難懂。」在我心目中，寫 code 跟「數學能力」最有關係。 有趣的是，凡軟體工程師給我的回答，幾乎都一樣：「不會呀。學寫 code 就像學英文、日文那樣，就是一個語言。」 但我不是很能夠被這個答案說服，因為我以往跟程式語言的歷史告訴我，寫 code 是很困難的。我從高一第一次接觸 C++，到後來大一上土木工程系的必修課也是修 C++，經驗都蠻慘的，因此我就宣判自己沒有寫程式語言的天份。直到去年我從零開始再次透過線上課程自學寫 code，我才終於體會朋友們說的「學 code 就像學任何一個異國語言一樣」這句話的意思。 就從我高一的時候，第一次接觸程式語言的故事說起吧！那時是我學校的物理老師鼓勵我學程式語言的。他以完全免費的方式輔導我在假日期間學 C++，大概也是看到我對理工科有興趣，想說我可以自學寫一些小程式、搞不好還能參加什麼比賽之類的。於是他給我開了書單，讓我買了兩大本比字典還厚的 C、C++ 教學工具書（這種書現在還存在嗎？）來看，並且給我出功課，要我自己研究怎麼做出一些程式。 但朽木如我，一直碰壁，步步都感到挫折。那時的我，還不知道怎麼「自己找答案」，因此我心中一直期待老師可以好好示範他到底要我做什麼，因為我連他出的功課的題目、他到底想要我做些什麼我都不了解，也不知道從何問起。現在回想起來，老師心中一定是想：「這有什麼難的？自己看書，看不懂去找答案，不就這樣嗎？實際做做看、做不出來用力想直到做出來為止，難道還要手把手教學嗎？」但要知道那時候的我，雖然很喜歡數學、物理，理工能力不差，但「電腦」對我而言，就是一個玩接龍和踩地雷的工具，因此我連怎麼按照書上的說明去設定寫程式的環境都搞不清楚。 總之，第一次學寫程式的經驗，就在我心中無限多個黑人問號中無疾而終。直到上了大一又再次遇到 C++。 這次我以為我可以學得比較好，畢竟這是我第二次跟 C++ 碰面了。我們用的課本，再次是那種厚得令我第一天就把它切割成三分的工具書。但豈知第一堂課老師也就講完差不多三分之一本課本，一下就上完一、兩百頁的進度。 「等等啊！」我心中吶喊。第一堂課我們就從 Hello World 上到 for loop，而且是雙層的 for loop， 因為要用程式語言畫出這個形狀：
2 則留言
閱讀完整內容