閒聊軟體工程師 – 網站的形成

更新 發佈閱讀 7 分鐘

在這個數位時代,幾乎人人有手機有電腦,每天都會接觸網站或 APP。你打開手機滑臉書、用foodpanda 網路訂餐、上網查資料,甚至於近兩年快速登上科技時代的最佳主角:AI ,背後都是由一群默默耕耘的軟體工程師在支撐。

基礎的網站架構

今天,就讓我們從基礎的網站架構談起,一步步認識工程師的世界。

  1. 網站的基本架構 一個網站大致可以分成三大部分:
  2. 前端(Front-end):使用者看到的介面,像是網頁排版、按鈕、動畫、配色。
  3. 後端(Back-end):負責處理邏輯、伺服器運算,例如:會員登入驗證、下訂單處理、與銀行系統接介等。
  4. 資料庫(Database):儲存資料的地方,像是會員資料、商品清單、交易紀錄。

很難懂是嗎? 那我們來簡單舉個例子: Shopee 蝦皮購物網站  可以把它想成:

  1. 前端(Front-end)(使用者眼前的看到的畫面) : 你打開購物網站,看到首頁畫面、搜尋列、商品圖片、、動畫效果、加入購物車按鈕、取消訂單按鈕, 這些都是前端工程師的作品。常用的技術包括 HTML、CSS、JavaScript,。簡單來說,前端就是「網站的門面設計師」,確保網站好看、好用。

蝦皮購物網

蝦皮購物網

 前端就是「網站的門面設計師」,確保網站功能頁好看、好用。

  1. 後端(Back-end)( 隱形的引擎室): 當你點擊「登入」,系統怎麼知道你的帳號密碼對不對?你是真人操作系統還是駭客有指令操作系統,這就是後端的工作。當你在購物網站上按下「加入購物車」或「結帳」時,後端工程師處理商業邏輯 (例如:計算金額、處裡庫存資料) 、撰寫 API 與金流打交道處裡付款流程。後端常用的語言像 Java、Python、Node.js 等。可以想像成「看不見的工廠」,負責處理和運算。

蝦皮購物車結帳流程

蝦皮購物車結帳流程

 這些在背後自動運算、將前端頁面的資料進行處理並傳送到後端資料庫儲存,就是 後端工程師的工作。

  1. 資料庫(Database)(數位倉庫) : 資料要有地方放,這就是資料庫的角色。我們的會員資料、訂單紀錄、商品庫存,都需要被安全保存資料庫。工程師會用 MSSQL、PostgreSQL、MongoDB 等技術來存入並保護系統上的所有資料,定期備份,確保資訊不會被損毀或遭到攻擊。  負責儲存、查詢、備份的就是 資料庫系統。

不同角色工程師的技能與挑戰

(1) 前端工程師

技能:HTML、CSS、JavaScript、框架(React、Vue、Angular)

工作內容:設計畫面、讓網頁互動更順暢、確保在不同裝置都能正常顯示

職涯發展:可以轉 UX/UI 設計師,或往前端架構師發展

(2) 後端工程師

技能:程式語言(Java、Python、C#、Node.js)、API 設計、伺服器架設

工作內容:處理資料流程、、設計系統、商業邏輯、安全性、效能優化

職涯發展:系統架構師、雲端工程師、技術主管

(3) 資料庫工程師 / DBA

技能:撰寫SQL、NoSQL、資料庫設計與優化、備份與安全

工作內容:規劃資料表設計、提升資料查詢效能、資料備援、資安管理

職涯發展:資料庫管理師、大數據分析師

(4) 全端工程師(Full-stack Engineer)

技能:前端 + 後端 + 基礎資料庫。說白了就是全都是你一個人做啦~~~~

工作內容:能獨立打造一個網站,懂前端畫面也能寫後端程式,還會處理的資料庫 挑戰:需要學的東西很多,不是速成,而是多年累積的學習和工作經驗,俗稱「廣而不淺」

職涯發展:創業者、技術顧問、技術主管

全端工程師 ≠ 速成工程師

很多人聽到「全端」以為是學會幾個語言就行,其實不然。真正的全端工程師需要:

程式語言能力 :前後端程式、資料庫設計和 SQL 撰寫都要會 。此外:演算法與資料結構、加強資安避免網站被駭。系統分析與設計能力 :與客戶溝通了解需求,分析並拆解需求。最後規劃架構 軟體工程知識 :版本控制、測試、敏捷開發。現在還要學會跟 AI 打交道。

 所以,想成為全端工程師,不是 8 週能搞定,而是幾年持續學習與專案累積的成果。

前端後端資料庫關聯

前端後端資料庫關聯

工程師除了專業能力還要有溝通能力

  • 系統開發:通常極少一個人單打獨鬥,而是分工合作。

小專案小系統可以一人全端負責。但是較大型的系統開發,至少2 人以上。以系統功能還是以工程師角色來分工,取決於工程師功力和軟實力。很多系統還會跨部門、遠距混合,若只會寫程式、不會溝通,容易「各說各話」,最後南轅北轍。此外,有些系統是以學長學弟制度,主管希望由一個高階工程師與初階工程師合作開發。

  • 開發流程:需求討論 → 設計 → 程式開發 → 測試 → 上線 → 維護。

其中需求訪談極其重要。與客戶討論需求,要如何問得準、說得清、協作順 才能讓系統後續的開發「事半功倍」。客戶並非專業,我們需要用簡單的話說明系統需求、資安風險、進度;儘量能把技術語轉為一般人聽得懂的語言。

客戶想用、設計想美、業務想快、工程想穩,每一個成功的案例都不是一個人武林,而是人與人之間難磨合與權衡。嘗試站在對方角度思考,以數據協調,不求盡善盡美,求恰到好處

故事分享

以IT 媽媽為例,剛入職當菜鳥,我原專長是資料庫設計與資料傳遞效能處理。我第一個專案團隊一共有6 個人,分別為:

  • 1 位網站設計師:使用Dreamweaver 將網站畫面設計出來。
  • 2 位前端工程師:將設計師描繪出來的網站畫面,加入HTML 和 CSS 形成靜態網站,讓客戶對系統有初步的了解。
  • 客戶確認沒有問題的時候,就由IT 媽媽去建立資料庫,並提供 API 給後端工程師。
  • 最後有2位後端工程師進行套版並將前段的靜態網站串接資料庫帶出API 的資料整合起來。這時候網站才會慢慢形成,讓使用者可以在網站上真正操作。

軟體工程師的世界,其實不只是低著頭撰寫程式,還有人與人之間的互動合作、了解需求創造價值的過程。希望透過這篇文章讓大家對軟體工程師這個行業有初步的了解。

留言
avatar-img
留言分享你的想法!
avatar-img
思樂風 - IT 媽媽科技筆記
1會員
8內容數
我是思樂風 ( IT 媽媽科技筆記 )。 你是非資訊背景的人、你對網路科技充滿好奇、但你很怕遇到詐騙。 你想玩 AI ,但你怕踩雷。 你想轉職軟體工程師,但不知道從哪摸索。 想要了解更多,趕快加入 我的專頁吧 我們一起探索、一起加油。
你可能也想看
Thumbnail
這篇文章探討了工程師在如何有效提升自己,強調不僅僅是多coding,而是要對程式碼有更深層的理解。隨著職涯發展,工程師需要從單純的技術執行者轉變為團隊領導者,具備解決複雜問題和與他人有效溝通的能力。
Thumbnail
這篇文章探討了工程師在如何有效提升自己,強調不僅僅是多coding,而是要對程式碼有更深層的理解。隨著職涯發展,工程師需要從單純的技術執行者轉變為團隊領導者,具備解決複雜問題和與他人有效溝通的能力。
Thumbnail
程式設計與技術能力 在現代社會中的重要性越來越明顯,尤其是在人工智能(AI)和自動化技術迅速發展的背景下。理解編程語言,如Python、R等,以及熟悉相關技術架構和工具,能夠幫助個人在這樣的環境中更好地工作。這種能力不僅對技術專業人士至關重要,也對非技術領域的人士日益重要,因為基礎的程式設計知識已
Thumbnail
程式設計與技術能力 在現代社會中的重要性越來越明顯,尤其是在人工智能(AI)和自動化技術迅速發展的背景下。理解編程語言,如Python、R等,以及熟悉相關技術架構和工具,能夠幫助個人在這樣的環境中更好地工作。這種能力不僅對技術專業人士至關重要,也對非技術領域的人士日益重要,因為基礎的程式設計知識已
Thumbnail
實際就業後,會發現收集與分析需求,通常都不是工程師在做,會有另一群人,以非工程的角度收集及分析需求,然後在開發過程中蹦出不同的火花,於是很好奇另一群人的想法是什麼?我不敢說這本書能完全代表另一群人的想法,但確實能夠得到很多有用的思維。推薦給所有的軟體工程師。
Thumbnail
實際就業後,會發現收集與分析需求,通常都不是工程師在做,會有另一群人,以非工程的角度收集及分析需求,然後在開發過程中蹦出不同的火花,於是很好奇另一群人的想法是什麼?我不敢說這本書能完全代表另一群人的想法,但確實能夠得到很多有用的思維。推薦給所有的軟體工程師。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
經過這麼多年的觀察與實踐,一個成熟的軟體工程師還需要第四個要素,它是讓決定你通往熟手的重要關鍵沒有之一。
Thumbnail
經過這麼多年的觀察與實踐,一個成熟的軟體工程師還需要第四個要素,它是讓決定你通往熟手的重要關鍵沒有之一。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
Thumbnail
#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域 五、網頁設計師要做什麼? 說實話,每間公司不一樣。 我不是只面試一間而已,光是網頁設計我應該至少投了十間以上,我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架,會有滿大的差別。 網頁設計主要分成以下工作:
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News