臺灣博碩士論文加值系統

隨著各式各樣的電子化裝置日趨普及，如何讓應用程式開發者快速開發程式並移植程式到不同裝置的需求也日益攀升。開發者通常希望程式可以重複使用、更希望提升程式的可用性並且能移植到硬體裝置們上執行，而網頁應用程式是相對較簡單、低成本的程式開發方式。多虧了HTML5以及 JavaScript的發展，強化了網頁應用程式跨平台、硬體支援等特性，藉由網頁應用程式來操控終端硬體裝置不再遙不可及。
本篇論文實作了圖形化網頁應用程式自動化系統，讓開發者可以設計基於Node.js平台的可遠端存取服務網頁應用程式以及單機版應用程式，並融入HTML5以及響應式網頁設計(Responsive Web Design)的特性。本系統應用軟體開發的代碼生成技術，系統會自動生成應用程式原始碼，此程式不只可以佈署在一般電腦，也可以移植到具有Node.js平台的嵌入式系統上運作。

The portability of applications in embedded devices has become complex for application designers because of the diversity of embedded devices. Simplifying programming models becomes an important issue in recent years. Web applications, instead of traditional embedded software, have attracted attentions in embedded systems community because hardware can be controlled more flexibility thanks to new features of HTML5 and JavaScript. In this work, we implement a programming aided system, called WAGED (Web Application Generator for Embedded Devices), which can generate web applications for embedded devices. We combine visual programming concepts, HTML5 features and RWD (Responsive Web Design) and code generation techniques to design the system. The WAGED system uses template-based code generation techniques to generate web applications code (including HTML, CSS and JavaScript). The application can be deployed on embedded devices over the Node.js environment. Using the system, application designers can create web applications that can interact with users and control hardware and focus on their design without spending too much time to consider how to build the web server. The WAGED system provides an interactive graphic user interface (GUI) for the customizing structure of web applications accessing end devices.

中文摘要 i
ABSTRACT ii
CONTENTS iii
LIST OF FIGURES iv
LIST OF TABLES vi
Chapter 1 Introduction 1
Chapter 2 Background 5
2.1 Visual programming 5
2.2 Access hardware by web technology 6
2.3 Template-based code generation 6
Chapter 3 Methodology and Implementation 9
3.1 System overview 9
3.2 From application designers’ view 11
3.2.1 User interface 11
3.3 From system developers’ view 14
3.3.1 Description of user-defined web application 14
3.3.2 Code generation 22
Chapter 4 Result 26
4.1 Client-server user-defined program architecture 26
4.2 Local desktop web application 28
Chapter 5 Conclusions and future work 33
Chapter 6 Reference 34

[1]Myers, Brad A. "Taxonomies of visual programming and program visualization." Journal of Visual Languages & Computing 1.1 (1990): 97-123.
[2]Wolber, David. "App inventor and real-world motivation." Proceedings of the 42nd ACM technical symposium on Computer science education. ACM, 2011.
[3]Fraser, Neil. "Google blockly-a visual programming editor." URL: http://code.google.com/p/blockly, accessed Aug (2012).
[4]I Hickson, Ian, and David Hyatt. "HTML5: A vocabulary and associated APIs for HTML and XHTML." W3C Working Draft edition (2011).
[5]HTML5 [Online]. http://en.wikipedia.org/wiki/HTML5
[6]Embedded HTML5 development [Online]. http://www.bsquare.com/services/application-development/html5-development
[7]Express framework [Online]. http://expressjs.com/
[8]Node-Red [Online]. http://nodered.org/
[9]Wikipedia Flow-Based Programming [Online]. http://en.wikipedia.org/wiki/Flow-based_programming
[10]Morrison, J. Paul. Flow-Based Programming: A new approach to application development. CreateSpace, 2010.
[11]Node.js [Online]. https://nodejs.org/
[12]Wikipedia-Responsive web design [Online]. http://en.wikipedia.org/wiki/Responsive_web_design
[13]Media query [Online]. http://www.w3.org/TR/css3-mediaqueries/
[14]Responsive web design [Online]. http://www.w3schools.com/html/html_responsive.asp
[15]Mohorovicic, S. "Implementing responsive web design for enhanced web presence." Information & Communication Technology Electronics & Microelectronics (MIPRO), 2013 36th International Convention on. IEEE, 2013.
[16]Chared, Zeev, and Shmuel S. Tyszberowicz. "Projective Template-Based Code Generation." CAiSE Forum. 2013.
[17]Henthorne, Cody, and Eli Tilevich. "Code generation on steroids: Enhancing COTS code generators via generative aspects." Incorporating COTS Software into Software Systems: Tools and Techniques, 2007. IWICSS''07. Second International Workshop on. IEEE, 2007.
[18]Weigert, Thomas, et al. "Automated code generation for industrial-strength systems." Computer Software and Applications, 2008. COMPSAC''08. 32nd Annual IEEE International. IEEE, 2008.
[19]Arduino [Online]. http://www.arduino.cc/en/Main/HomePage
[20]Chrome Application [Online]. https://chrome.google.com/webstore/launcher
[21]RecordRTC [Online]. https://github.com/muaz-khan/RecordRTC