我是 PRUM 股份有限公司的 masa。
今天我撰寫了一篇面向程式設計初學者、介紹支撐系統的 5 個要素的文章。閱讀本文後，我想你應該能把原本零散的知識串成一條線，並更清楚掌握整個系統的全貌。
如果你有興趣，歡迎閱讀，希望能對你有所幫助。
如果你對 PRUM 有興趣，也歡迎到我們的企業網站逛逛。
▶ 企業網站
整理構成系統的「5 個基本要素」
剛開始學習程式設計的時候，腦中幾乎只會想著 這個錯誤該怎麼修。我一開始也只是把眼前的程式碼當成一個 點 來看系統。
但如果只理解成 點，當情況改變時就很難活用，也很難找出原因，容易變成只是「背誦怎麼操作」。
相對地，如果能用 線 來理解，就能從系統整體的連結出發，思考處理流程與錯誤流向。
為了用 線 來掌握系統，讓我們依序整理支撐系統的 5 個要素。
1. 介面設計（資訊的傳達方式）
使用者在系統中最先接觸到的，就是畫面，也就是介面。
介面的本質
它是人與系統交換資訊的「接點」，也是為了讓人能不迷路地操作而進行的設計。
不管後端處理再怎麼優秀，如果畫面不好用，價值也無法傳達給使用者。
當你實作 HTML、CSS、JavaScript 等前端時，常常會遇到「錯誤訊息到底該怎麼顯示才好……」這類煩惱。
其實，正是這種細節，會大幅影響整體的易用性。
例如，只要讓使用者知道「原因是什麼」以及「下一步該做什麼」，就能大幅減少迷惘。
介面不只是做出外觀而已，也肩負著引導使用者順利抵達目標的角色。
2. 多媒體技術（資訊的數位化）
這是用來處理圖片、音訊、影片等資料的技術。
電腦只能處理「0」和「1」，因此需要將現實世界中的資訊轉換為數位資料，或為了減少容量而進行壓縮的機制。
例如，當你在做 Web 應用程式時，有時會遇到「個人檔案圖片的載入異常地慢……」這種情況。
這時如果有這方面的知識，就能從以下觀點思考原因：
- 圖片大小是否過大
- 壓縮格式是否適當
- 資料容量是否太重
錯誤或異常，並不總是能一開始就精準鎖定原因。
也因此，擁有能夠思考「問題可能出在哪裡」的視角，才格外重要。
3. 資料庫（資訊的整理）
資料庫（DB）是系統中用來安全且有條理地儲存資料的地方。
例如在電商網站中，會透過資料庫管理各種資料，例如：
- 使用者資訊
- 商品資訊
- 訂單紀錄
- 庫存數量
這裡最重要的是，資料不能產生矛盾。
例如，如果出現「商品已經被購買了，但庫存數量卻沒有減少」這種狀況，實際上可能會在沒有庫存的情況下仍然繼續販售。
這種資料上的落差，會大大影響整個系統的可信度。
剛開始學習時，往往會想著「只要能存進去就好了」，但如果能慢慢開始意識到「如何才能正確又安全地處理資料」，就會逐漸培養出看待整個系統的視角。
4. 網路（資訊的傳達）
網路是把資料送到使用者手中的「通道」。
在網際網路上，透過 TCP/IP 之類的通訊規則，以及 IP 位址這類識別資訊，世界各地的電腦彼此交換資訊。
剛開始學習時，當自己寫的應用程式無法運作，往往會直覺地把原因指向自己寫的程式碼；但如果了解網路的基本概念，就能從以下角度思考：
- 是否根本沒有連上伺服器
- DNS 是否正確完成名稱解析
- 通訊是否逾時
- 請求是否有送到，但回應沒有回來
如此一來，就能開始思考通訊的哪個環節可能出了問題。
網路平常雖然不太會被注意到，但它是連結各種系統的基礎。
因此，只要了解基本概念，遇到問題時的看法就會大不相同。
5. 安全性（資訊的安全）
最後，是保護上述一切的安全性。
例如，不會直接保存密碼，而是轉換成安全的形式後再儲存；或者檢查「這個人是否有權限查看這個畫面」。基本上，就是守住機密性、完整性、可用性這 CIA 三要素。
安全性不是「交給某個專門的人去做」就好，而是所有寫程式的人都應該知道的防護作法。
將「點」的知識連成「線」
到目前為止，我們看了 5 個要素，但不需要把它們當成彼此獨立的教科書來記。重點在於想像它們是如何彼此關聯的。
我現在最大的感受是：「技術潮流雖然變化很快，但這 5 個基本原則大概 10 年後也不會改變。」
即使新的程式語言或框架陸續出現，說到底也只是「用來更方便地處理哪一個要素」的工具差異而已。
只要掌握基礎，遇到新技術時的理解速度與成品品質都會提升。
不要只停留在「好像有跑起來」就結束，請試著自問：我現在寫的程式碼，會影響這 5 個要素中的哪一個？
這樣一點一滴累積下來，你就能從「寫程式的人」成長為「打造系統的人」。
總結
到目前為止所看到的 5 個要素，並不是彼此分離地存在。
- 介面作為入口，
- 經過多媒體處理的豐富資訊，
- 正確地累積到資料庫中，
- 透過網路傳送到世界各地，
- 再由安全性加以保護。
系統是由這 5 個要素全部串連起來運作的。當原本的點連成線之後，開發會變得更加有趣。讓我們一起一步一步前進吧！
PRUM 超過 95% 的工程師都是從無經驗開始錄用的。
如果可以，也歡迎來企業網站逛逛。
▶ 企業網站
我們也經營整理對工程師有幫助文章的網站。如果你有興趣，歡迎看看。
▶ 對工程師有幫助的文章網站
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
