top of page

01

​撰寫前台網頁

以ASP.NET架構做開發,使用HTML、Bootstrap製作響應式網頁,搭配JavaScript、jQuery和使用者做互動,由C#控制器做前後端資料串接。

我參考「台灣國家公園」的網站,練習撰寫前端畫面,與學校課堂上的開發方式不同,在實務中更強調程式碼的結構與維護性,像是style不直接寫在每個 HTML 檔案中,而是統一整理在 CSS 檔案中集中管理,這樣能提升效率,避免重複撰寫,後續也較容易維護與修改。也參與了這樣的開發經驗不僅讓我學會更有系統地管理前端程式碼,也讓我對整體網頁開發有了更深入的認識,我未來進一步開發 web 系統的基礎。

在「臺灣銀行教育訓練平台」的專案中,我負責撰寫前端登入與登出功能。由於此階段主要以功能模擬為主,因此在驗證部分採用最簡單的方式,直接於前端設定value="",無需連接資料庫。當使用者登入後,系統會跳轉至基本資料頁面,顯示相關帳號資訊,以驗證頁面是否正確運作。透過實作,我熟悉了使用者驗證的基本流程與頁面導向控制的概念,也理解了在系統開發初期,如何利用模擬方式快速驗證功能架構與互動邏輯,為後續串接真實資料與擴充功能奠定基礎。

02

​預存程序—新增、刪除、查詢、修改(CRUD)

在接觸「僑生管理系統」時,學到比較常見的是預存程序(Stored Procedure)是一種將多筆 SQL 指令事先寫好並封裝起來的做法,可以大幅提升資料處理的效率與一致性。在實務應用上,通常會針對每個 CRUD 操作,撰寫一個對應的預存程序,前端只需透過 JavaScript 設計對應的 function 來呼叫後端的預存程序,使用者一旦觸發動作,就會自動執行對應的資料處理流程。SQL的大致流程是,例如DECLARE @SDSTno NVARCHAR(8) = @inputXml.value(N'(//SDSTno)[1]', 'NVARCHAR(8)'); 從前端傳入的 XML 結構中解析出 SDSTno 的值,宣告變數 @SDSTno儲存傳入參數,這樣就可以在接下來的 SQL 查詢或資料操作中使用這個值,系統會根據這些條件執行對應的 SELECT、INSERT、UPDATE 或 DELETE 動作,完成所需的資料處理。在進行 編輯(Update) 或 刪除(Delete) 操作時,系統會先透過 SELECT 指令查詢要修改或刪除的指定資料,並將內容帶入前端表單,讓使用者能夠檢視、確認或進行修改。使用者送出修改或確認刪除後,系統再依據該筆資料的主鍵條件執行 UPDATE 或 DELETE 動作為了系統的穩定與錯誤處理。預存程序也會使用 TRY CATCH包住整個操作流程,確保在發生異常時能進行錯誤處理與紀錄,維持資料一致性與系統穩定性,讓程式碼更簡潔、提升系統的安全性與維護效率。此外,預存程序具備效能優化、權限控管、錯誤處理集中化等優點。在這個實作經驗中,讓我更深入理解前後端資料互動的流程,也強化了我對資料庫設計與系統整合的實務能力。

查詢

新增

▼編輯、刪除

03

系統規格書與測試報告

在這次實習中,我首次接觸到系統規格書,學習從中解讀功能需求與系統邏輯,這對我建立開發前的系統分析與規劃能力有很大幫助。規格書中會詳細列出系統功能、作業流程,以及各頁面的輸入項目與作業,讓我能更清楚掌握專案的整體架構與開發方向,避免在實作時產生誤解或偏離需求的情況。除此之外,我也運用了 mermaid 工具繪製流程圖,這對於視覺化系統邏輯與溝通需求流程非常有幫助,先利用 AI 工具,根據系統畫面與功能的操作流程撰寫描述,再由 mermaid 自動產生對應的流程圖,這可以大幅提升繪製的效率,也讓流程邏輯更明瞭,方便與團隊成員討論與確認。同時,我也學習撰寫測試報告,透過實際執行測試案例檢驗系統運作是否順暢,並比對預期結果與實際執行結果是否一致,以確認系統功能的正確性與穩定性,這不僅有助於發現潛在問題,也能提升整體系統品質。這樣的實作經驗讓我體會到系統規劃書在開發流程中的價值,讓我在日後面對複雜系統時,能更有條理地進行需求拆解與流程設計。

▼使用mermaid繪製的流程圖

image.png

04

​如何偵錯

相較於學校作業,公司專案的規模通常更為龐大,無法像在學校時一樣,透過逐行檢查找出錯誤,逐一檢查不僅耗費大量時間,也會嚴重影響工作效率。因此,培養有效的偵錯能力,是在職場上不可或缺的重要技能。其中,學會閱讀與理解錯誤訊息也很重要,當程式發生錯誤時,編譯器會提供詳細的錯誤訊息與堆疊追蹤資訊,能善加分析這些訊息,就能快速找到錯誤來源。在職場實務中,具備從錯誤訊息中提取關鍵資訊的能力,將有助於大幅縮短除錯時間,熟練運用各種偵錯方法與技巧,不僅能有效提升開發效率,更能確保專案如期順利完成。

05

自動化測試流程​

實習過程中,我也嘗試結合 AI 技術與自動化測試流程,運用 Google Gemini 來輔助程式開發與測試。只要在 Gemini 中輸入指令,並提供參考的 HTML 結構,它就能自動產生對應的 C# 程式碼,實現網頁中新增、刪除、查詢、修改(CRUD)功能的操作模擬。接著,將這些程式整合至 Visual Studio 的測試環境中,只需在 PowerShell 輸入指令,例如:dotnet test sba-sfund-tests --filter "name~CM_B13" --logger "console;verbosity=detailed",系統就會自動根據該頁面的功能執行測試,並在過程中自動進行詳細的截圖與記錄,這樣的流程讓整個測試過程更有效率,不僅能節省人工操作的時間,也能減少人為疏漏。透過這個過程,我深入了解了 AI 在自動化測試中的應用方式,並體驗到如何結合程式開發、AI 模型與測試工具,達到高效率的系統驗證。

▼自動化測試流程

bottom of page