臺灣博碩士論文加值系統

隨著網路以及手機的發達,使用手機進行學習已經是現在的學 習趨勢。不僅帶給學生更多的便利性也讓學生在不受時間以及地點 的限制。不過對於開發者而言,目前手機有各種不同的系統,要如 何的有效率以及不浪費任何成本開發統一的行動學習平台。Ionic 提 供一個完整的跨平台架構,在行動裝置介面上與傳統的跨平台架構 不一樣。他採用自己所定義的 <ion-view> 來強化設計界面。再搭配 火紅的 AngularJS 作為程式架構,為開發者加速的開發。在程式上 的縮短以及平台的維護性,帶給開發者便利性。在編譯的環境下, Ionic 使用 Cordova 來作為底層,讓開發者快速的編譯不同平台的程 式。Phonegap 為另外一個跨平台程式,採用 Boostrap 以及 jQuery 的方式來操作手機界面。在台灣已經有各種不同的學習平台,例如: openEdx,coursera,ewant。那要如何的方便學生可以進入到不同的平 台去學習他們想要的課程,所以這篇論文使用了跨平台服務來開發一 個課程統一入口 (MobileMOOCs) 來讓學生方便的學習。除此之外, 本篇論文會比較 Ionic 以及 Phonegap 兩個跨平台的效能。
關鍵字:行動學習, 數位學習, 跨平台, Ionic, Phonegap, AngularJS

With the booming of the Internet and mobile devices, learning through mobile phones has become a current of learning. This ground- breaking method of learning has brought much more convenience to all of the students. Learning nowadays no longer restricts by time and places.
As for the developers, the only problem is how to establish an united mobile learning platform in an efficient and economic way. Ionic is the answer to this. It provides a complete cross-platform framework, which is totally different from the traditional one in the interface of the mobile device. It uses its own <ion-view> to strengthen the design of the inter- face. Integrating the popular AngularJS to be its program framework helps accelerate the speed of development. In this way, it could not only shorten the programming process, but also maintain the platform, and than remarkably reach the goal of convenient. Under the coding environment, Ionic uses Cordova to be the basic level. This allows the developers to code the program of different platforms instantaneously.
There is another cross-platform program called Phonegap, which manipulates the interface of the mobile phone with Boostrap and jQuery. Taiwan has a variety of different learning platforms, such as: openEdx, coursera, ewant. How to facilitate that students can enter the different platforms they want to learn lessons, so this paper uses cross-platform services to develop a unified entrance (MobileMOOCs) to enable stu- dents to facilitate learning. In addition to, this paper would comparing the efficiency of the two cross-platform, Ionic and Phonegap.
Keywords:Mobile Learning, E-learning, Cross-Platform, Ionic, Phone- gap, AngularJS

Contents

頁次
中文摘要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . iii
Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
List of Figures . . . . . . . . . . . . . . . . . . . . . . . . . . vi
List of Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
1、 Introduction . . . . . . . . . . . . . . . . . . . . 1
1-1 Research Background and Motivation . . . . . . 3
1-2 Thesis Organization . . . . . . . . . . . . . . . . 4
2、 Related work . . . . . . . . . . . . . . . . . . . 5
2-1 MOOCs . . . . . . . . . . . . . . . . . . . . . . 5
2-2 Android . . . . . . . . . . . . . . . . . . . . . . 6
2-3 IOS . . . . . . . . . . . . . . . . . . . . . . . . 9
2-4 Mobile Learning . . . . . . . . . . . . . . . . . . 11
2-5 Framework . . . . . . . . . . . . . . . . . . . . . 12
2-6 AngularJS . . . . . . . . . . . . . . . . . . . . . 13
3、 System frameworks . . . . . . . . . . . . . . . . 14
3-1 System Architecture Design . . . . . . . . . . . 14
3-1-1 MobileMOOCs Flowchart . . . . . . . . . . . . . 14
3-1-2 Ionic . . . . . . . . . . . . . . . . . . . . . . . . 15
3-1-3 AngularJS . . . . . . . . . . . . . . . . . . . . . 19
3-1-4 Cordova . . . . . . . . . . . . . . . . . . . . . . 21
3-2 Development Environment . . . . . . . . . . . . 24
3-3 User Function Interface . . . . . . . . . . . . . . 25
3-4 User personalize . . . . . . . . . . . . . . . . . . 28
3-5 Courses asynchronous . . . . . . . . . . . . . . . 29
4、 Evaluation of performance . . . . . . . . . . . . 37
4-1 Phonegap vs Ionic . . . . . . . . . . . . . . . . . 37
4-1-1 System Storage Compare . . . . . . . . . . . . . 39
4-2 User Experience . . . . . . . . . . . . . . . . . . 40
5、 Results . . . . . . . . . . . . . . . . . . . . . . . 44
5-1 Categories by theme . . . . . . . . . . . . . . . 44
5-2 Categories by schools . . . . . . . . . . . . . . . 44
5-3 Categories by people . . . . . . . . . . . . . . . 45
5-4 Published to App Store . . . . . . . . . . . . . . 45
5-5 Comparison Between Ionic with Phonegap . . . 47
5-6 Control Version . . . . . . . . . . . . . . . . . . 48
6、 Conclusions . . . . . . . . . . . . . . . . . . . . 50
7、 Future Works . . . . . . . . . . . . . . . . . . . 52
7-1 Social Media . . . . . . . . . . . . . . . . . . . . 52
7-2 User Personalized . . . . . . . . . . . . . . . . . 52
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

[1] Alzaghoul, Ahmed, and Edmundo Tovar. A proposed framework for an adaptive learning of Massive Open Online Courses (MOOCs). 2016 13th International Conference on Remote Engineering and Virtual Instrumentation (REV). IEEE, 2016.
[2] Jiugen, Yuan, Xing Ruonan, and Wang Jianmin. Applying research of mobile learning mode in teaching. Information Technology and Applications (IFITA), 2010 International Forum on. Vol. 3. IEEE, 2010.
[3] Sharples, M., Taylor, J., Vavoula, G. (2005, October). Towards a theory of mobile learning. In Proceedings of mLearn (Vol. 1, No. 1, pp. 1-9).
[4] Porter, L. R. (1997). Creating the virtual classroom: Distance learning with the Internet. John Wiley Sons, Inc..
[5] McAuley, A., Stewart, B., Siemens, G., Cormier, D. (2010). The MOOC model for digital practice..
[6] Hui, N. M., Chieng, L. B., Ting, W. Y., Mohamed, H. H., Arshad, M. R. H. M. Cross-platform mobile applications for android and
iOS. In Wireless and Mobile Networking Conference (WMNC), 2013 6th Joint IFIP (pp. 1-4). IEEE.
53
[7] Brabazon, T. (2007). Mobile learning: the iPodifcation of universi- ties. Nebula, 4(1), 19-30.
[8] Godwin-Jones, R. (2011). Emerging technologies: Mobile apps for language learning. Language Learning Technology, 15(2), 2-11. ISO 690
[9] Zibula, A., Majchrzak, T. A. (2012, April). Cross-platform devel- opment using HTML5, jQuery mobile, and phonegap: realizing a smart meter application. In International Conference on Web Information Systems and Technologies (pp. 16-33). Springer Berlin Heidelberg.
[10] Corral, L., Sillitti, A., Succi, G. (2012). Mobile multiplatform development: An experiment for performance analysis. Procedia Computer Science, 10, 736-743.
[11] Darwin, P. B., Kozlowski, P. (2013). AngularJS web application development. Packt Publ..
[12] Balasubramanee, V., Wimalasena, C., Singh, R., Pierce, M. (2013, September). Twitter bootstrap and AngularJS: Frontend frameworks to expedite science gateway development. In 2013 IEEE International Conference on Cluster Computing (CLUSTER) (pp. 1-1). IEEE.
[13] Kozlowski, P. (2013). Mastering Web Application Development with AngularJS. Packt Publishing Ltd.
[14] Seshadri, S., Green, B. (2014). AngularJS: Up and Running: Enhanced Productivity with Structured Web Apps.. O’Reilly
54
Media, Inc.. ISO 690