1. Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University http://mail.tku.edu.tw/myday Tamkang University 2015-10-28 1041SMAP07 TLMXM1A (8687) (M2143) (Fall 2015) (MIS MBA) (2 Credits, Elective) [Full English Course] Wed 9,10 (16:10-18:00) B310 Create Hybrid Apps with Phonegap

2. Course Schedule (1/3) Week Date Subject/Topics 1 2015/09/16 Course Orientation and Introduction to Social Media and Mobile Apps Programming 2 2015/09/23 Introduction to Android / iOS Apps Programming 3 2015/09/30 Developing Android Native Apps with Java (Android Studio) (MIT App Inventor) 4 2015/10/07 Developing iPhone / iPad Native Apps with Swift (XCode) 5 2015/10/14 Mobile Apps using HTML5/CSS3/JavaScript 6 2015/10/21 jQuery Mobile 2

3. Course Schedule (2/3) Week Date Subject/Topics 7 2015/10/28 Create Hybrid Apps with Phonegap 8 2015/11/04 jQuery Mobile/Phonegap 9 2015/11/11 jQuery Mobile/Phonegap 10 2015/11/18 Midterm Exam Week (Midterm Project Report) 11 2015/11/25 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store 12 2015/12/02 Google Cloud Platform 3

4. Course Schedule (3/3) Week Date Subject/Topics 13 2015/12/09 Google App Engine 14 2015/12/16 Google Map API 15 2015/12/23 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps) 16 2015/12/30 Twitter API 17 2016/01/06 Final Project Presentation 18 2016/01/13 Final Exam Week (Final Project Presentation) 4

5. Outline PhoneGap – PhoneGap – PhoneGap Build index.html, css, js config.xml – PhoneGap, jQuery Mobile Demo – Create Hybrid Apps with PhoneGap 5

6. Android /iOS Apps Programming 6 Native Apps Mobile Web Apps Hybrid Apps

7. App Development Comparison 7 Source: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Developmenthttp://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development Native Apps Full Mandatory Expensive Very Fast Available Device Access Speed Development Cost App Store Approval Process Web Apps Hybrid Apps Fast Partial Reasonable Not Available None Reasonable Available Native Speed as Necessary Full Low Overhead

8. Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5, Rohit Ghatol & Yogesh Patel, Apress, 2012 8 Source: http://www.amazon.com/Beginning-PhoneGap-Mobile-Framework-JavaScript/dp/1430239034http://www.amazon.com/Beginning-PhoneGap-Mobile-Framework-JavaScript/dp/1430239034

9. Mobile Web App 9 HTML JavaScript CSS Phone Data External Data Templates Mobile frameworks and Libraries Source: Scott Preston, Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Apress, 2012

10. PhoneGap PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. 10 Source: http://phonegap.com/http://phonegap.com/

11. PhoneGap Build Package mobile apps in the cloud – PhoneGap Build takes the pain out of compiling PhoneGap apps. – Get app-store ready apps without the headache of maintaining native SDKs. – PhoneGap Build service does the work for you by compiling in the cloud. 11 Source: http://phonegap.com/http://phonegap.com/

12. PhoneGap Build 12 Source:https://build.phonegap.com/https://build.phonegap.com/

13. Apps Created with PhoneGap 13 Source: http://phonegap.com/http://phonegap.com/

14. 14 Source: http://phonegap.com/app/bbc-olympics/http://phonegap.com/app/bbc-olympics/ Apps Created with PhoneGap BBC Olympics

15. Adobe® PhoneGap™ Write a PhoneGap app once with HTML and JavaScript and deploy it to any mobile device without losing features of a native app. Adobe PhoneGap – standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and JavaScript for iOS, Android™, Windows® Phone, webOS, BlackBerry® and more. 15 https://build.phonegap.com/

16. 16 http://phonegap.com/ PhoneGap

17. 17 http://phonegap.com/ PhoneGap Build

18. 18 http://phonegap.com/

19. 19 https://build.phonegap.com/ PhoneGap Build

20. Get started with PhoneGap Build Simply upload your web assets - a ZIP file of HTML, CSS and JavaScript, or a single index.html file - to PhoneGap Build – Git or SVN repository. PhoneGap Build undertake the compilation and packaging In minutes, you’ll receive the download URLs for all mobile platforms. 20 Source: https://build.phonegap.com/faqhttps://build.phonegap.com/faq

21. PhoneGap – a mobile application development framework, based upon the open source Apache Cordova project. – write an app once with HTML, CSS and JavaScript, and then deploy it to a wide range of mobile devices without losing the features of a native app. PhoneGap Build – a cloud-based service built on top of the PhoneGap framework. – easily build those same mobile apps in the cloud. 21 PhoneGap Build vs. PhoneGap Source: https://build.phonegap.com/faqhttps://build.phonegap.com/faq

22. Public Apps vs. Private Apps Public apps – source code hosted in a publicly accessible GitHub repository. Private apps – source code hosted in a private (non-publicly accessible) GitHub repository – uploads a ZIP file containing the source code and assets to the PhoneGap Build service. 22 Source: https://build.phonegap.com/faqhttps://build.phonegap.com/faq

23. PhoneGap, jQuery Mobile, jQuery 23 PhoneGap (Hardware Interface) PhoneGap (Hardware Interface) JQuery (Logic and Computing) jQuery Mobile (User Interface) jQuery Mobile (User Interface)

24. PhoneGap App Architecture 24 Source: Rohit Ghatol & Yogesh Patel, Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5, Apress, 2012 HTML5/CSS3 Application UI Framework (jQueryMobile) UI Framework (jQueryMobile) PhoneGap API Phone Gap Bridge Camera GPS SQLite File System Accelerometer Microphone Compass etc

25. 25 Install PhoneGap http://phonegap.com/install/

26. 26 NodeJS http://nodejs.org/

27. 27 Install NodeJS

28. PhoneGap API Documentation 28 http://docs.phonegap.com/en/3.5.0/index.html

29. PhoneGape Install $ sudo npm install -g phonegap 29 npm (Node Package Manager)

30. PhoneGape Usage $ phonegap create myapp [phonegap] missing library phonegap/www/3.1.0 [phonegap] downloading https://github.com/phonegap/phonegap-app- hello-world/archive/3.1.0.tar.gz... [phonegap] created project at /Users/imyday/Development/myapp $ cd myapp $ phonegap run android [phonegap] detecting Android SDK environment... [phonegap] using the remote environment [phonegap] compressing the app... [phonegap] uploading the app... 30

31. myapp/www/ 31

32. 32 myapp/ www/

33. PhoneGap config.xml 33

34. 34 HelloWorld Hello World sample application that responds to the deviceready event. PhoneGap Team

35. config.xml (part 1/3) widget id, version, name, description, author 35 HelloWorld Hello World sample application PhoneGap Team

36. 36 config.xml (part 2/3) feature, preference, icon

37. 37 config.xml (part 3/3) gap:splash

38. icon.png (128x128) 38

39. logo.png (172x200) 39

40. screen-iphone-portrait.png (320x480) 40

41. screen-mdpi-portrait.png (320x480) 41

42. Generate icon online 42 http://www.quirco.com/iPhoneIcon

43. phonegap- 2.9.1/lib/ios/bin/templates/project/w ww/index.html 43

44. 44 Hello World PhoneGap Connecting to Device Device is Ready app.initialize();

45. 45 http://jquerymobile.com/blog/2013/07/19/announcing-jquery-mobile-1-3-2/#download Download Zip File: jquery.mobile-1.3.2.zip (JavaScript, CSS, and images)

46. Demo Create Hybrid Apps with PhoneGap 46 https://build.phonegap.com/

47. Myday Mobile App -> Hybrid App 47 http://mail.tku.edu.tw/myday/app/ http://mail.tku.edu.tw/myday/m

48. PhoneGap Build 48 Source:https://build.phonegap.com/https://build.phonegap.com/

49. app.zip 49

50. config.xml 50 Myday Mobile App Myday Mobile App for Prof. Min-Yuh Day, Department of Information Management, Tamkang University Min-Yuh Day

51. 51 Install PhoneGap http://phonegap.com/install/

52. 52 NodeJS http://nodejs.org/

53. 53 Install NodeJS

54. PhoneGape Install $ sudo npm install -g phonegap 54 npm (Node Package Manager)

55. 55 PhoneGape Install $ sudo npm install -g phonegap

56. PhoneGape Usage $ phonegap create myapp [phonegap] missing library phonegap/www/3.1.0 [phonegap] downloading https://github.com/phonegap/phonegap-app- hello-world/archive/3.1.0.tar.gz... [phonegap] created project at /Users/imyday/Development/myapp $ cd myapp $ phonegap run android [phonegap] detecting Android SDK environment... [phonegap] using the remote environment [phonegap] compressing the app... [phonegap] uploading the app... 56

57. 57 PhoneGape Usage

58. myapp/ 58

59. 59 myapp/www/

60. 60

61. phonegap- 2.9.1/lib/ios/bin/templates/project/w ww/index.html 61

62. 62 Hello World PhoneGap Connecting to Device Device is Ready app.initialize();

63. 63 index.html

64. 64 Min-Yuh Day Mobile App app.initialize(); index.html

65. js/index.js 65

66. 66 http://jquerymobile.com/blog/2013/07/19/announcing-jquery-mobile-1-3-2/#download Download Zip File: jquery.mobile-1.3.2.zip (JavaScript, CSS, and images)

67. 67 jquery.mobile-1.3.2

68. 68 Min-Yuh Day Mobile App <!-- --> app.initialize(); index.html

69. 69 https://build.phonegap.com/ PhoneGap Build

70. 70 PhoneGap Build

71. 71 PhoneGap Build

72. 72 PhoneGap Build

73. 73

74. 74 https://build.phonegap.com/apps/573842/builds

75. 75 https://build.phonegap.com/apps/573842/install

76. 76 https://build.phonegap.com/apps/573842/settings

77. 77 https://build.phonegap.com/apps/573842/settings

78. 78 https://build.phonegap.com/apps/573842/settings

79. 79

80. 80

81. 81

82. Myday Mobile App -> Hybrid App 82 http://mail.tku.edu.tw/myday/app/ http://mail.tku.edu.tw/myday/m

83. Create Hybrid Apps with PhoneGap 83

84. Summary PhoneGap – PhoneGap – PhoneGap Build index.html, css, js config.xml – PhoneGap, jQuery Mobile Demo – Create Hybrid Apps with PhoneGap 84

85. References Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5, Rohit Ghatol & Yogesh Patel, Apress, 2012 Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012 PhoneGap – http://phonegap.com/ http://phonegap.com/ PhoneGap Build – https://build.phonegap.com/ https://build.phonegap.com/ jQuery Mobile – http://jquerymobile.com/ http://jquerymobile.com/ Introduction to PhoneGap Build – http://tv.adobe.com/watch/building-mobile-apps-with-phonegap-build/introduction-to- phonegap-build-building-your-first-app/ http://tv.adobe.com/watch/building-mobile-apps-with-phonegap-build/introduction-to- phonegap-build-building-your-first-app/ 85