近年來，隨著社會對環境保護、社會責任及公司治理（ESG）議題的重視，台灣也即將開始徵收碳費，節能減碳已成為當前的熱門話題。同時，隨著健康意識的抬頭，室內運動人數逐年增加，成為另一大趨勢。為了使企業達到節能減碳的目標，並讓民眾了解到室內空氣品質狀況，本論文提出使用微軟所開發的前端框架Blazor WebAssembly，配合後端ASP.NET Core Web API作為伺服器核心，使用Microsoft SQL Server資料庫儲存資料，設計一套應用於運動館的網頁資料採集與監控(Supervisory control and data acquisition, SCADA)系統。
本系統採用前後端分離的架構，分別開發前端介面與後端伺服器，這使得本系統能夠有更好的可擴展性與可維護性。同時藉由Blazor WebAssembly的特性，讓前端介面運作在使用者端，最大化發揮用戶端的效能並降低伺服器的負載量。相較於傳統HTML網頁，Blazor框架的核心為元件，透過妥善管理前端網頁的所有元件，能夠大幅降低系統開發所需時間。在實際應用中，本論文設計了Modbus TCP to Modbus RTU轉換模組，將冷氣設備原本使用的Modbus RTU通訊格式轉為Modbus TCP通訊，場館可以直接使用更容易取得的網路線做連接通訊。
在本系統完成後，使用Web API中介處理資料，實際在場館測試運行，透過Modbus TCP讀取場館設置的空氣品質偵測器數據，並圖表化顯示到前端網頁中，讓用戶能夠了解到即時空氣品質，同時也能透過網頁來遠端控制場館冷氣，與定時冷氣自動開關機，避免人員操作造成的能源浪費。另外還設有每日報表的頁面，根據法規中的室內空氣品質標準與自己所訂的溫濕度標準，在圖表中設定標準線，用戶的能夠了解到24小時內的空氣品質(Air Quality Index, AQI)變化。達到節能的同時也能讓民眾更安心的在場館運動。

In recent years, with the increasing emphasis on environmental protection, social responsibility, and corporate governance (ESG) issues, Taiwan is also set to start collecting carbon fees. Energy saving and carbon reduction have become hot topics. At the same time, as health awareness rises, the number of people exercising indoors has been steadily increasing, becoming another major trend. To help companies achieve their energy-saving and carbon-reduction goals and to enable the public to understand indoor air quality, this thesis proposes a supervisory control and data acquisition (SCADA) system for sports facilities. The system uses Microsoft's Blazor WebAssembly for the front-end framework and ASP.NET Core Web API for the server core, with Microsoft SQL Server as the database for data storage.
This system adopts a front-end and back-end separation architecture, developing the front-end interface and back-end server separately. This design enhances the system's scalability and maintainability. By leveraging the characteristics of Blazor WebAssembly, the front-end interface runs on the client side, maximizing client-side performance and reducing server load. Compared to traditional HTML web pages, the core of the Blazor framework is its components. By efficiently managing all components of the front-end web pages, the development time of the system can be significantly reduced. In practical application, this thesis designs a Modbus TCP to Modbus RTU conversion module, which converts the original Modbus RTU communication format used by air conditioning equipment to Modbus TCP communication. This allows the facility to use easily accessible network cables for communication.
Data can be processed through the Web API and tested in the facility based on development system in this thesis. The Modbus TCP protocol is used to read data from air quality detectors installed in the facility, and the data is graphically displayed on the front-end web pages. This allows users to understand real-time air quality and remotely control the facility's air conditioning via the web interface. It also enables scheduled automatic air conditioning on/off to avoid energy waste caused by human error. Additionally, a daily report page is provided, showing changes in the air quality index (AQI) over a 24-hour period with standard lines set according to indoor air quality standards and user-defined temperature and humidity standards. This helps achieve energy savings while allowing the public to exercise in the facility with with more confidence.

摘要…i
Abstract…ii
誌謝…iv
目錄…v
表目錄…ix
圖目錄…x
第一章 緒論…1
1.1 研究動機與目的…1
1.2 研究方法…2
1.3 論文架構…3
第二章 系統原理與技術…4
2.1 文件物件模型…4
2.2 .NET框架…5
2.3 Blazor框架…6
2.3.1 Razor元件…6
2.3.2 Blazor裝載模型…7
2.4 網頁應用程式介面…9
2.5 SQL資料庫…10
2.6 室內空氣品質標準…10
2.7 Modbus通訊協定…11
2.7.1 TCP/IP模型…12
2.7.2 Modbus TCP協定層…13
2.7.3 RS-485實體層…14
2.7.4 Modbus RTU協定層…15
2.8 冷氣控制設備…16
2.9 空氣品質偵測器…18
第三章 系統架構與設計…19
3.1 系統架構…19
3.2 前端網頁設計…21
3.2.1 場館平面圖…23
3.2.2 冷氣控制元件…24
3.2.3 即時圖表元件…26
3.2.4 每日報表設計…27
3.2.5 冷氣定時頁面…30
3.2.6 帳號管理頁面…32
3.2.7 登入頁面…34
3.3 後端伺服器設計…35
3.3.1 空氣品質資料存取…35
3.3.2 冷氣定時設定…36
3.3.3 設備控制…36
3.3.4 使用者管理…37
3.3.5 身分驗證…39
3.3.6 背景服務…41
3.4 資料庫設計…42
3.4.1 空氣品質資料表…43
3.4.2 冷氣定時資料表…43
3.4.3 使用者資料表…43
3.5 硬體電路設計…44
3.5.1 系統電源設計…45
3.5.2 STM32微控制器電路…46
3.5.3 網路通訊電路…47
3.5.4 RS-485通訊電路…48
3.5.5 溫溼度感測電路…48
3.5.6 EEPROM電路…49
3.5.7 OLED電路…49
3.5.8 Modbus TCP to Modbus RTU轉換模組成品外觀…50
3.6 韌體程式設計…51
3.6.1 韌體流程圖…53
3.6.2 Modbus暫存器規劃…56
第四章 實驗結果…58
4.1 實際安裝環境…58
4.1.1 電腦主機…59
4.2 Modbus通訊穩定度實驗…60
4.3 成果展示…61
第五章 結論與未來展望…75
5.1 論文結論…75
5.2 未來展望…75
參考文獻…76
附錄一…78
Extended Abstract…79
Abstract…79
Frontend Web Design…80
System Architecture…81
Modbus Communication Stability Experiment…82
Modbus TCP to Modbus RTU conversion module product appearance…83

[1]體育署，2024，"112年運動現況調查成果發表 規律運動促健康 生活快樂更有感." https://www.sa.gov.tw/News/NewsDetail?Type=3&id=5704&n=92
[2]體育署，2022，"運動i臺灣2.0計畫."
https://www.sa.gov.tw/PageContent?n=5655
[3]黃怡姍，2022，"運動服務業發展趨勢(2022年)."
https://www.twtrend.com/trend-detail/sports-activities-2022/
[4]謝秉儒，2021，"室內工作場所環境危害與員工健康評估調查," 國立臺灣大學公共衛生學院環境與職業健康科學研究所碩士論文。
[5]金融監督管理委員會，2022，"上市櫃公司永續發展路徑圖." https://www.sfb.gov.tw/ch/home.jsp?id=95&parentpath=0,2&mcustomize=news_view.jsp&dataserno=202203030001&dtable=News
[6]環境部，2023，"完成碳費收費辦法草案." https://enews.moenv.gov.tw/Page/3B3C62C78849F32F/002aed50-1fa5-43b9-81e6-196dcde7e57e
[7]徐月娥，2023，"企業碳排放對經營績效影響之研究," 國立臺北商業大學財經學院財政稅務系產業碩士專班碩士論文。
[8]林燿鄰，2023，"具資料分析與預測SCADA之開發-以國內某紙廠為例," 國立雲林科技大學電機工程研究所碩士論文。
[9]張家豪，2019，"基於機器學習和SCADA資料的風力發電機異常事件可預測性分析," 國立中興大學資訊科學與管理學研究所碩士論文。
[10]陳本益，2023，"導入MES前之SCADA系統前置作業- 以F公司為例," 國立中興大學資訊管理學研究所碩士論文。
[11]洪偉倫，2015，"基於Modbus TCP之無線室內空氣品質感測器研究," 國立臺灣科技大學自動化及控制研究所碩士論文。
[12]Bootstrap，2024，"Build fast, responsive sites with Bootstrap." https://getbootstrap.com/
[13]Chart.js，2024，"Chart.js."
https://www.chartjs.org/
[14]B. Djuricic，2022，"JustGage."
https://github.com/toorshia/justgage
[15]M. W. Docs，2023，"文件物件模型 (DOM)."
https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model
[16]Microsoft，2024，".NET 簡介."
https://learn.microsoft.com/zh-tw/dotnet/core/introduction
[17]Microsoft，2024，"ASP.NET Core Blazor."
https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-6.0
[18]Microsoft，2024，"ASP.NET Core Razor 元件."
https://learn.microsoft.com/zh-tw/aspnet/core/blazor/components/?view=aspnetcore-6.0
[19]Microsoft，2024，"ASP.NET Core Blazor 裝載模型." https://learn.microsoft.com/zh-tw/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0
[20]A. W. Services，2023，"什麼是 API (應用程式介面)？." https://aws.amazon.com/tw/what-is/api/
[21]R. F. B. Donald D. Chamberlin，2023，"SQL."
https://en.wikipedia.org/wiki/SQL
[22]趙柏泓，2022，"台灣各公告場所之室內空氣品質濃度變化及健康風險評估," 逢甲大學環境工程與科學研究所碩士論文。
[23]徐㻑瑈，2022，"甲醛暴露與健康風險評估及其於呼吸防護計畫之應用-以樹脂製造業之多聚甲醛倉庫為例," 國立成功大學環境醫學研究所碩士論文。
[24]全國法規資料庫，2012，"室內空氣品質標準." https://law.moj.gov.tw/LawClass/LawAll.aspx?pcode=O0130005
[25]Modicon，2012，"MODBUS APPLICATION PROTOCOL SPECIFICATION." https://modbus.org/docs/Modbus_Application_Protocol_V1_1b3.pdf
[26]R. Braden，1989，"Requirements for Internet Hosts -- Communication Layers." https://datatracker.ietf.org/doc/html/rfc1122
[27]維基百科，2022，"EIA-485."
https://zh.wikipedia.org/zh-tw/EIA-485
[28]維新應用科技，"室內空品偵測器." https://www.sysinnotec.com/%E5%AE%A4%E5%85%A7%E7%A9%BA%E5%93%81%E5%81%B5%E6%B8%AC%E5%99%A8
[29]D. Gitlan，2024，"What Is SHA-256 Algorithm & How It Works." https://www.ssldragon.com/blog/sha-256-algorithm/
[30]A. b. Okta，"JWT."
https://jwt.io/.