臺灣博碩士論文加值系統

Web 2.0 之後，注重介面互動的單一頁面應用程式 (Single Page Application, SPA) 迅速流行。SPA只需要使用CSS、JavaScript、HTML等標準語言即可實作網頁應用程式。大量使用網頁前端語言JavaScript是SPA介面互動流暢的關鍵。
然而對於軟體公司或一般企業而言，完成一個 SPA 專案必須由許多開發者，長時間協力合作開發。但是在網頁前端開發實務上，每一位開發者的開發環境可能會有多個專案同時存在，每一個專案要獨立維護程式碼，不僅必須注意開發環境程式庫檔案的正確與否，同一專案的測試、正式等多個環境也需要一致。同一個專案團隊的所有開發者若能有一致的開發環境，就能避免程式庫版本差異或相依性問題造成程式錯誤發生。
本研究致力於解決團隊網頁前端開發環境的一致性問題。以設計科學研究法發展出一套解決方案，應用DevOps概念從延伸開發到維運的方向，首先盤點專案網頁前端JavaScript第三方程式庫，應用版本控制系統(Version Control System, VCS)如Git及Node.js工具如bower，將JavaScript第三方程式庫以結構化的文字設定加入版本管控。再延伸以同樣工具Git取出版本管控的檔案，再以bower工具輔助，按照先前盤點的設定下載JavaScript第三方程式庫，並引用至網頁程式當中。接著，以Node.js工具如karma來進行測試，確認步驟中下載的JavaScript第三方程式庫環境正確。進一步將前述流程記錄於腳本中，以自動化的方式改善開發流程。最後，以實際個案展示本研究所提出的解決方案的可行性，並評估是否有解決開發環境的一致性問題。
學術領域可藉由本研究應用DevOps延伸開發到維運所發展出來的解決方案，擴展對於網頁開發程式庫版本管控的知識；企業實務領域可經由本研究發展出的解決方案以及實作個案，按照步驟來解決前端網頁開發環境的一致性問題。本研究發展之解決方案每一步驟以及所運用到的工具，則可以供網頁開發相關領域，在面臨一系列網頁應用程式開發的問題時，能有一個實際範例以及可用工具之參考。

Since the appearing of Web 2.0, Single Page Application (SPA) with an interactive interface has been all the rage. With the mere aid of standard languages such as CSS, JavaScript, and HTML, SPA is able to implement a Web application. Extensive use of web front-end language such as JavaScript is the key to fluent interaction of the SPA.
For a software company or an enterprise, it requires many developers working together for a long time to finish a SPA project. However, in the process of front-end web development, a developer is likely to handle more than one project at a time. Each project has its independent source code to maintain, and the developer not only needs to pay attention to the accuracy of the 3rd party library in development environment but also has to ensure consistency in test environments as well as in production environments. If all developers on the project team can have consistent development environments, then they can avoid faults that are caused by different library versions or by library dependency.
This research is dedicated to ensuring consistency in development environment of front-end Web. The Design Science Research Methodology (DSRM) is adopted in this research, and the direction of extending development to operation, which is included in the concept of DevOps, is applied. First, make an inventory of existing Javascript 3rd party libraries in project. Use version control system (VCS) such as Git and tools among Node.js such as bower to transform JavaScript 3rd party libraries environment as code (structured text), then to commit all code to VCS. To extend to operation, use Git to pull code. After that, use tools among Node.js such as karma to perform a test which helps to determine whether the downloaded JavaScript 3rd party libraries of previous step are correct or not. Further, record all previous process in a shell script so that the process of development can be improved by performing steps automatically. Last, this research demonstrates the feasibility of this solution in a real case and makes an evaluation of whether the problem of consistency is solved.
This research expands academic field’s horizon of versioning JavaScript 3rd party libraries in Web development. In addition, related industries can solve the problem of consistency in front-end Web development environment by following the steps in this research. All steps and tools that are used in this research not only provide Web development related areas with a practical example but also offer people available tools for reference when faced with a series of problems in the process of the development of Web applications.

誌 謝 ii
摘 要 iii
Abstract v
圖目錄 ix
表目錄 xi
第一章 緒論 1
第一節 研究背景與動機 1
第二節 研究目的與範圍 3
第三節 論文結構 4
第二章 文獻探討 5
第一節 網頁應用程式的演進 5
第二節 版本管控 7
第三節 DevOps 12
第四節 Node.js 17
第三章 研究方法 20
第一節 設計科學研究法 20
第二節 研究步驟 23
第四章 設計與發展解決方案 25
第一節 方法論之建構 25
第二節 網頁前端程式庫管理自動化方法論 26
第五章 展示與評估 39
第一節 個案簡介 39
第二節 網頁前端製作流程現況 42
第三節 展示應用解決方案 46
第四節 成果展示與評估 60
第六章 結論 63
第一節 研究貢獻 65
第二節 未來研究方向 66
參考文獻 68

中文部份
台灣中等學校資訊管理人學會，Single Page Application - 下一代的Web應用程式(上)，October 2007，http://www.tsima.org.tw/wiki/dian-zi-qi-kan/2007nian10yue-hao/single-page-application---xia-yi-dai-deweb-ying-yong-cheng-shi-shang，[Retrieved 2016/11]。
李建興，DevOps將顛覆未來IT人角色，iThome，April 2014，http://www.ithome.com.tw/news/87144，[Retrieved 2016/11]。
陳宏一，持續整合下的版本控管做法，iThome，June 2011，http://www.ithome.com.tw/voice/91252，[Retrieved 2016/10]。

英文部份
Bradley, B., How to Unit Test an AngularJS Controller, Bradley’s blog, May 2015, http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/, [Retrieved 2016/07].
Chacon, S., & Straub, B., Pro git, 2nd Edition, New York: Apress, 2014.
Crookshanks, E., Practical Enterprise Software Development Techniques: Tools and Techniques for Large Scale Solutions, New York: Apress, 2015.
De Kort, W., Devops on the Microsoft Stack, New York: Apress, 2016.
Debois, P., codifying devops practices, Devops areas, May 2012, http://www.jedi.be/blog/2012/05/12/codifying-devops-area-practices/, [Retrieved 2016/12].
Fraternali, P., Rossi, G., & Sánchez-Figueroa, F. (2010). Rich internet applications. IEEE Internet Computing, 14(3), 9-12.
Httermann, M., DevOps for developers, New York: Apress, 2012.
Kemper, C., & Oxley, I., Foundation Version Control for Web Developers, New York: Apress, 2012.
Loukides, M., Revisiting ‘What is DevOps’, OReilly Radar, June 2014, http://radar.oreilly.com/2014/06/revisiting-what-is-devops.html, [Retrieved 2016/11].
Loukides, M., What is DevOps, OReilly Radar, June 2012, http://radar.oreilly.com/2012/06/what-is-devops.html, [Retrieved 2016/11].
March, T., & Smith, F. (1995). Design and natural science research on information technology. Decision support systems, 15(4), 251-266.
Mikowski, M. S., & Powell, J. C., Single Page Web Applications, Scotland: B and W, 2013.
Paxton, J., Resig, J., & Ferguson, R. Pro JavaScript Techniques, New York: Apress, 2015.
Peffers, K., Tuunanen, T., Rothenberger, M. A., & Chatterjee, S. (2007). A design science research methodology for information systems research. Journal of management information systems, 24(3), 45-77.
Sussna, J., Empathy: The essence of DevOps, Ingineering.IT, January 2014, http://blog.ingineering.it/post/72964480807/empathy-the-essence-of-devops, [Retrieved 2016/11].
W3Schools, JavaScript HTML DOM, 1999-2016, http://www.w3schools.com/js/js_htmldom.asp, [Retrieved 2016/12].
Zell, L., Manage your frontend Dependencies with bower, Zell’s blog, June 2015, http://zellwk.com/blog/bower/, [Retrieved 2016/05].