目前本研究為克服自動化操作時，多軟體、畫面的交握與操作，使現場人力短缺與整合效率低落之問題，本論文提出以WebServer為基礎，並在電腦的瀏覽器上整合相關監控目標之資訊，藉此提升工作效率，使單人多工的環境下有更高的生產力，因此本研究選定一套自動化系統，該自動化系統為「手機四軸測試平台」該平台需要監控四座IAI伺服滑台與的相關資訊如當前位置、目標位置、速度等資訊。
此監控程式主要監控可程式邏輯控制器(PLC)之數值後，將資料輸出於伺服器，再將輸出至網頁瀏覽器上呈現資料，會使用到的相關軟體有Node.js, Python, Keyence PLC, Google Chrome與上述程式的相關套件有Socket, Flask, JavaScript, Vue.js, Bootstrap和Ajax。
後端伺服器利用了Python的Flask套件達成傳輸資料給前端伺服器與利用Python可程式化的部分使用Socket連接PLC的Socket，完成可程式邏輯控制器(PLC)端獲取資料與修改資料，而前端伺服器使用Node.js完成前端網頁資料呈現，其中使用了Ajax完成了非同步請求之功能，其目的為在只刷新資料，不刷新整個網頁，提升使用者體驗，並使用Bootsrap美化網頁相關控件(ex:bottom)，並且使用前後端分離的架構可以將兩個部分分開除錯，在合作開發上有極大的優勢。

An existing PLC system runs automatically, but still need monitoring manually by human. In most of the cases, one person needs to monitor multiple machines. This leads to manpower shortage and decreases integration efficiency. This project aims to overcome the multiple handshaking and operations leads by automatic system. By using web browser as the interface to monitor the task details through Web Server.
This project uses one set of mobile devices which applies PLC and installed link “Testing Platform for four axis servos on mobile device” as the automatic system. It monitors 4 IAI robot slides with existing the information such as: location, target location and speed, etc. The system will then return PLC values to web server and show on the web browser. The system includes node.js, python, Keyence PLC and chrome with packages include socket, flask, JavaScript, vue.js, bootstrap and Ajax.
The built system details are as follow, Data Transfer between frontend and backend server by Python Flask. PLC Socket Server connect with Socket Client by Python to get data and edit data. Web interface present information by node.js. To refresh the website and get the latest data, Ajax played the role as the main character to do the parallel request. The user interface is improved and user experience is enhance by applying “Bootstrap”.
The major advantage of this system is that the front-end and back-end system can divide as 2 parts for further system revamp or enhancement.

中文摘要	I
英文摘要	II
目錄	IV
誌 謝	VII
圖目錄	VIII
第一章 緒論	1
第一節 文獻探討	1
第一項 雲端監控	1
第二項 工業4.0（英語：Industry 4.0）	2
第三項 數位孿生（Digital twin）	3
第四項 Vue.js	4
第五項 Flask	5
第六項 可程式邏輯控制器	6
第七項 TCP/IP	7
第二節 研究動機與目的	9
第三節 論文架構	10
第二章 研究理論	11
第一節 前後端分離架構	11
第二節 即時監控	12
第三節 業界痛點改善	12
第二章 研究方法	14
第一節 整體架構	14
第一項 硬體之軟體架構	14
第二項 軟體前端架構	15
第三項 整體架構	17
第四項 硬體架構	18
第二節 環境建置	22
第一項 前端環境建置	22
第二項 後端環境建置	24
第三項 PLC環境設定	27
第四項 環境搭建完成展示	28
第五項 Vue Flask連線	29
第六項 Python程式編程	30
第七項 功能驗證	31
第三節 實際案例的應用	36
第一項 手機伺服滑台	36
第三章 研究結果	41
第一節 遠端監控PLC效果展示	41
第一項 PLC之欲讀寫之暫存器	41
第二項 PLC與網頁同步更新	42
第四章 結論	44
參考文獻	45

圖目錄
圖 1 工業4.0目標	2
圖 2 數位孿生總體概念圖	3
圖 3 Vue檔案架構範例	4
圖 4 Flask使用範例	5
圖 5 可程式邏輯控制器	6
圖 6 前後端分離架構圖	11
圖 7 業界痛點改善	13
圖 8 PLC硬體架構圖	14
圖 9 前端架構圖	15
圖 10 後端架構圖	16
圖 11 雲端監控整體架構圖	17
圖 12 手機伺服滑整機圖	18
圖 13 手機架齒輪	19
圖 14 手機架正面	19
圖 15 IAI伺服滑台電盤	20
圖 16 IAI控制器PCON	21
圖 17 IAI控制器RCON	21
圖 18 前端環境設定	23
圖 19 後端環境設定	25
圖 20 PLC IP之修改頁面	26
圖 21 app.py之修改頁面	26
圖 22 PLC環境設定	27
圖 23 搭建完成圖	28
圖 24 Vue.js與Flask交握流程圖	29
圖 25 Flask路由與請求方式	29
圖 26 Vue請求方式	29
圖 27 Python套件使用範例	30
圖 28 Flask路由編寫	30
圖 29 登入機制流程圖	31
圖 30 監控預覽圖	32
圖 31 布林修改圖	33
圖 32 字串修改預覽圖	33
圖 33 只讀列表	34
圖 34 讀寫列表	34
圖 35 元件拖曳展示圖	35
圖 36 硬體搭建流程圖	37
圖 37 導入EDS	38
圖 38 元件參數分配	38
圖 39 元件分配	39
圖 40 EIP IP修改	39
圖 41 EIP設定選項	40
圖 42 映射之暫存器	40
圖 43 PLC暫存器之位址與注釋	41
圖 44暫存器映射展示	42
圖 45 修改前的瀏覽器列表	42
圖 46 修改後的瀏覽器與PLC列表	43
圖 47 Flask 請求頻率圖	43

[1]. Cristina Simache and Mohamed Kaaniche, Availability Assessment of SunOS/Solaris Unix Systems based on Syslogd and wtmpx log files: A case study, IEEE 2005.
[2]. Bartolomeo Montrucchio, Maurizio Rebaudengo and Alejandro Velasco, Fault Injection in the Process Descriptor of a Unix-based Operating System, IEEE 2014.
[3]. Schuh, G., Frank, J., Jussen, P., Rix, C., & Harland, T. (2019, June). Monetizing Industry 4.0: design principles for subscription business in the manufacturing industry. In 2019 IEEE International Conference on Engineering, Technology and Innovation (ICE/ITMC) (pp. 1-9). IEEE.
[4]. B. Chen, J. Wan, L. Shu, P. Li, M. Mukherjee, and B. Yin, "Smart factory of industry 4.0: Key technologies, application case, and challenges," IEEE Access, vol. 6, pp. 6505-6519, 2017.
[5]. Marcus Soll and Malte Vosgerau, “ClassifyHub: An Algorithm to Classify GitHub Repositories,” KI 2017: Advances in Artificial Intelligence - 40th Annual German Conference on AI, 2017.
[6]. Yun Zhang, David Lo, Pavneet Singh Kochhar, Xin Xia, Quanlai Li, and Jianling Sun, “Detecting Similar Repositories on GitHub,” IEEE 24th International Conference on Software Analysis, Evolution and Reengineering, SANER, 2017.
[7]. Stefan Tilkov and Steve Vinoski, “Node.js: Using JavaScript to Build High-Performance Network Programs,” IEEE Internet Computing, 2010.
[8]. Nodejs，Event Loop，https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/
[9]. Miguel Grinberg(譯者：賴屹民), Flask 網頁開發 第二版, 2018
[10]. "(二)遙測技術之應用，"行政院農委會農委會年報 - 90年年報 - 玖、科技研究與發展，2001。
[11]. 張世文，借助溝通整合PLC邁入新紀元，機電整合雜誌，2013年，2月，14-17頁。
[12]. Wright, A. J, Ladder Logic Programming Fundamentals 2019: Learn Ladder Logic Concepts Step By Step to Program PLC’’s on The RS Logix 5000 Platform, 2019
[13]. Brynjolfsson, E. & Kemerer, C. F., “Network externalities in microcomputer software: An econometric analysis of the spreadsheet market,” Management Science, Vol. 42, No. 12, 1996, pp. 1627-1647.
[14]. 楊更更，Modbus軟件開發實戰指南，清華大學出版社，2017
[15]. Schneider Automation., Modbus messaging on tcp/ip implementation guide v1. 0b, MODBUS Organization, October 24, 2006 .
[16]. Peter Huitsing, Rodrigo Chandia, Mauricio Papa and Sujeet Shenoi, “Attack taxonomies for the Modbus protocols,” International Journal of Critical Infrastructure Protection, pp. 37-44, 6 8 2008.