Tamkang University Social Media Apps Programming Create Hybrid
Tamkang University Social Media Apps Programming Create Hybrid Apps with Phonegap 1031 SMAP 07 TLMXM 1 A (8687) (M 2143) (Fall 2014) (MIS MBA) (2 Credits, Elective) [Full English Course] Thu 8, 9 (15: 10 -17: 00) V 201 Min-Yuh Day, Ph. D. Assistant Professor Department of Information Management Tamkang University http: //mail. tku. edu. tw/myday 2014 -10 -29
Course Schedule (1/3) Week Date Subject/Topics • 1 2014/09/17 Course Orientation and Introduction to Social Media and Mobile Apps Programming • 2 2014/09/24 Introduction to Android / i. OS Apps Programming • 3 2014/10/01 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) • 4 2014/10/08 Developing i. Phone / i. Pad Native Apps with Swift / Objective-C (XCode) • 5 2014/10/15 Mobile Apps Using HTML 5/CSS 3/Java. Script • 6 2014/10/22 j. Query Mobile 2
Course Schedule (2/3) Week Date Subject/Topics • 7 2014/10/29 Create Hybrid Apps with Phonegap • 8 2014/11/05 j. Query Mobile/Phonegap • 9 2014/11/12 j. Query Mobile/Phonegap • 10 2014/11/19 Midterm Exam Week (Midterm Project Report) • 11 2014/11/26 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store • 12 2014/12/03 Google Cloud Platform 3
Course Schedule (3/3) Week • 13 • 14 • 15 Date Subject/Topics 2014/12/10 Google App Engine 2014/12/17 Google Map API 2014/12/24 Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/Android Apps) • 16 2014/01/31 Twitter API • 17 2015/01/07 Final Project Presentation • 18 2015/01/14 Final Exam Week (Final Project Report) 4
Outline • Phone. Gap – Phone. Gap Build • index. html, css, js • config. xml – Phone. Gap, j. Query Mobile • Demo – Create Hybrid Apps with Phone. Gap 5
Android /i. OS Apps Programming Native Apps Hybrid Apps Mobile Web Apps 6
Beginning Phone. Gap: Mobile Web Framework for Java. Script and HTML 5, Rohit Ghatol & Yogesh Patel, Apress, 2012 Source: http: //www. amazon. com/Beginning-Phone. Gap-Mobile-Framework-Java. Script/dp/1430239034 7
Mobile Web App HTML Phone Data Templates CSS Java. Script External Data Mobile frameworks and Libraries Source: Scott Preston, Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i. Phone, i. Pad, and i. Pod touch, Apress, 2012 8
Phone. Gap • Phone. Gap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. Source: http: //phonegap. com/ 9
Phone. Gap Build • Package mobile apps in the cloud – Phone. Gap Build takes the pain out of compiling Phone. Gap apps. – Get app-store ready apps without the headache of maintaining native SDKs. – Phone. Gap Build service does the work for you by compiling in the cloud. Source: http: //phonegap. com/ 10
Phone. Gap Build Source: https: //build. phonegap. com/ 11
Apps Created with Phone. Gap Source: http: //phonegap. com/ 12
Apps Created with Phone. Gap BBC Olympics Source: http: //phonegap. com/app/bbc-olympics/ 13
Adobe® Phone. Gap™ • Write a Phone. Gap app once with HTML and Java. Script and deploy it to any mobile device without losing features of a native app. • Adobe Phone. Gap – standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and Java. Script for i. OS, Android™, Windows® Phone, web. OS, Black. Berry® and more. https: //build. phonegap. com/ 14
Phone. Gap http: //phonegap. com/ 15
Phone. Gap Build http: //phonegap. com/ 16
Phone. Gap Build http: //phonegap. com/ 17
Phone. Gap Build https: //build. phonegap. com/ 18
Get started with Phone. Gap Build • Simply upload your web assets a ZIP file of HTML, CSS and Java. Script, or a single index. html file - to Phone. Gap Build – Git or SVN repository. • Phone. Gap Build undertake the compilation and packaging • In minutes, you’ll receive the download URLs for all mobile platforms. Source: https: //build. phonegap. com/faq 19
Phone. Gap Build vs. Phone. Gap • Phone. Gap – a mobile application development framework, based upon the open source Apache Cordova project. – write an app once with HTML, CSS and Java. Script, and then deploy it to a wide range of mobile devices without losing the features of a native app. • Phone. Gap Build – a cloud-based service built on top of the Phone. Gap framework. – easily build those same mobile apps in the cloud. Source: https: //build. phonegap. com/faq 20
Public Apps vs. Private Apps • Public apps – source code hosted in a publicly accessible Git. Hub repository. • Private apps – source code hosted in a private (non-publicly accessible) Git. Hub repository – uploads a ZIP file containing the source code and assets to the Phone. Gap Build service. Source: https: //build. phonegap. com/faq 21
Phone. Gap, j. Query Mobile, j. Query Mobile (User Interface) JQuery (Logic and Computing) Phone. Gap (Hardware Interface) 22
Phone. Gap App Architecture HTML 5/CSS 3 Application UI Framework (j. Query. Mobile) Phone. Gap API Phone Gap Bridge Camera Microphone GPS SQLite File System Accelerometer Compass etc Source: Rohit Ghatol & Yogesh Patel, Beginning Phone. Gap: Mobile Web Framework for Java. Script and HTML 5, Apress, 2012 23
Install Phone. Gap http: //phonegap. com/install/ 24
Node. JS http: //nodejs. org/ 25
Install Node. JS 26
Phone. Gap API Documentation http: //docs. phonegap. com/en/3. 5. 0/index. html 27
Phone. Gape Install $ sudo npm install -g phonegap npm (Node Package Manager) 28
Phone. Gape Usage $ phonegap create myapp [phonegap] missing library phonegap/www/3. 1. 0 [phonegap] downloading https: //github. com/phonegap-apphello-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. . . 29
myapp/www/ 30
myapp/ www/ 31
Phone. Gap config. xml 32
<? xml version='1. 0' encoding='utf-8'? > <widget id="com. phonegap. helloworld" version="1. 0. 0" xmlns="http: //www. w 3. org/ns/widgets" xmlns: gap="http: //phonegap. com/ns/1. 0"> <name>Hello. World</name> <description> Hello World sample application that responds to the deviceready event. </description> <author email="support@phonegap. com" href="http: //phonegap. com"> Phone. Gap Team </author> <feature name="http: //api. phonegap. com/1. 0/device" /> <preference name="permissions" value="none" /> <preference name="orientation" value="default" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="true" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-min. Sdk. Version" value="7" /> <preference name="android-install. Location" value="auto" /> <icon src="icon. png" /> <icon gap: density="ldpi" gap: platform="android" src="res/icon/android/icon-36 -ldpi. png" /> <icon gap: density="mdpi" gap: platform="android" src="res/icon/android/icon-48 -mdpi. png" /> <icon gap: density="hdpi" gap: platform="android" src="res/icon/android/icon-72 -hdpi. png" /> <icon gap: density="xhdpi" gap: platform="android" src="res/icon/android/icon-96 -xhdpi. png" /> <icon gap: platform="blackberry" src="res/icon/blackberry/icon-80. png" /> <icon gap: platform="blackberry" gap: state="hover" src="res/icon/blackberry/icon-80. png" /> <icon gap: platform="ios" height="57" src="res/icon/ios/icon-57. png" width="57" /> <icon gap: platform="ios" height="72" src="res/icon/ios/icon-72. png" width="72" /> <icon gap: platform="ios" height="114" src="res/icon/ios/icon-57 -2 x. png" width="114" /> <icon gap: platform="ios" height="144" src="res/icon/ios/icon-72 -2 x. png" width="144" /> <icon gap: platform="webos" src="res/icon/webos/icon-64. png" /> <icon gap: platform="winphone" src="res/icon/windows-phone/icon-48. png" /> <icon gap: platform="winphone" gap: role="background" src="res/icon/windows-phone/icon-173. png" /> <gap: splash gap: density="ldpi" gap: platform="android" src="res/screen/android/screen-ldpi-portrait. png" /> <gap: splash gap: density="mdpi" gap: platform="android" src="res/screen/android/screen-mdpi-portrait. png" /> <gap: splash gap: density="hdpi" gap: platform="android" src="res/screen/android/screen-hdpi-portrait. png" /> <gap: splash gap: density="xhdpi" gap: platform="android" src="res/screen/android/screen-xhdpi-portrait. png" /> <gap: splash gap: platform="blackberry" src="res/screen/blackberry/screen-225. png" /> <gap: splash gap: platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait. png" width="320" /> <gap: splash gap: platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2 x. png" width="640" /> <gap: splash gap: platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait. png" width="768" /> <gap: splash gap: platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape. png" width="1024" /> <gap: splash gap: platform="winphone" src="res/screen/windows-phone/screen-portrait. jpg" /> <access origin="http: //127. 0. 0. 1*" /> </widget> config. xml 33
config. xml (part 1/3) widget id, version, name, description, author <? xml version='1. 0' encoding='utf-8'? > <widget id="com. phonegap. helloworld" version="1. 0. 0" xmlns="http: //www. w 3. org/ns/widgets" xmlns: gap="http: //phonegap. com/ns/1. 0"> <name>Hello. World</name> <description> Hello World sample application </description> <author email="support@phonegap. com" href="http: //phonegap. com"> Phone. Gap Team </author> <feature name="http: //api. phonegap. com/1. 0/device" /> <preference name="permissions" value="none" /> <icon src="icon. png" /> </widget> 34
config. xml (part 2/3) feature, preference, icon <feature name="http: //api. phonegap. com/1. 0/device" /> <preference name="permissions" value="none" /> <preference name="orientation" value="default" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="true" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="true" /> <preference name="auto-hide-splash-screen" value="true" /> <preference name="disable-cursor" value="false" /> <preference name="android-min. Sdk. Version" value="7" /> <preference name="android-install. Location" value="auto" /> <icon src="icon. png" /> 35
config. xml (part 3/3) gap: splash <gap: splash gap: density="ldpi" gap: platform="android" src="res/screen/android/screen-ldpi -portrait. png" /> <gap: splash gap: density="mdpi" gap: platform="android" src="res/screen/android/screen-mdpi-portrait. png" /> <gap: splash gap: density="hdpi" gap: platform="android" src="res/screen/android/screenhdpi-portrait. png" /> <gap: splash gap: density="xhdpi" gap: platform="android" src="res/screen/android/screenxhdpi-portrait. png" /> <gap: splash gap: platform="blackberry" src="res/screen/blackberry/screen-225. png" /> <gap: splash gap: platform="ios" height="480" src="res/screen/ios/screen-iphone- portrait. png" width="320" /> <gap: splash gap: platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait 2 x. png" width="640" /> <gap: splash gap: platform="ios" height="1024" src="res/screen/ios/screen-ipadportrait. png" width="768" /> <gap: splash gap: platform="ios" height="768" src="res/screen/ios/screen-ipadlandscape. png" width="1024" /> <gap: splash gap: platform="winphone" src="res/screen/windows-phone/screen-portrait. jpg" /> <access origin="http: //127. 0. 0. 1*" /> </widget> 36
icon. png (128 x 128) <icon src="icon. png" /> 37
logo. png (172 x 200) 38
screen-iphone-portrait. png (320 x 480) <gap: splash gap: platform="ios" height="480" src="res/screen/ios/screen- iphone-portrait. png" width="320" /> 39
screen-mdpi-portrait. png (320 x 480) <gap: splash gap: density="mdpi" gap: platform="android" src="res/screen/android/screen-mdpi-portrait. png" /> 40
Generate icon online http: //www. quirco. com/i. Phone. Icon 41
phonegap 2. 9. 1/lib/ios/bin/templates/project/w ww/index. html 42
<html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index. css" /> <title>Hello World</title> </head> <body> <div class="app"> <h 1>Phone. Gap</h 1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <script type="text/javascript" src="phonegap. js"></script> <script type="text/javascript" src="js/index. js"></script> <script type="text/javascript"> app. initialize(); </script> </body> </html> 43
Download Zip File: jquery. mobile-1. 3. 2. zip (Java. Script, CSS, and images) http: //jquerymobile. com/blog/2013/07/19/announcing-jquery-mobile-1 -3 -2/#download 44
Demo Create Hybrid Apps with Phone. Gap https: //build. phonegap. com/ 45
Myday Mobile App -> Hybrid App http: //mail. tku. edu. tw/myday/m http: //mail. tku. edu. tw/myday/app/ 46
Phone. Gap Build Source: https: //build. phonegap. com/ 47
app. zip 48
config. xml <? xml version='1. 0' encoding='utf-8'? > <widget id="com. imtku. smap. mydaymobileapp" version="1. 0. 0" xmlns="http: //www. w 3. org/ns/widgets" xmlns: gap="http: //phonegap. com/ns/1. 0"> <name>Myday Mobile App</name> <description> Myday Mobile App for Prof. Min-Yuh Day, Department of Information Management, Tamkang University </description> <author email="myday@mail. tku. edu. tw" href="http: //mail. tku. edu. tw/myday"> Min-Yuh Day </author> 49
Install Phone. Gap http: //phonegap. com/install/ 50
Node. JS http: //nodejs. org/ 51
Install Node. JS 52
Phone. Gape Install $ sudo npm install -g phonegap npm (Node Package Manager) 53
Phone. Gape Install $ sudo npm install -g phonegap 54
Phone. Gape Usage $ phonegap create myapp [phonegap] missing library phonegap/www/3. 1. 0 [phonegap] downloading https: //github. com/phonegap-apphello-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. . . 55
Phone. Gape Usage 56
myapp/ 57
myapp/www/ 58
myapp/www/ 59
phonegap 2. 9. 1/lib/ios/bin/templates/project/w ww/index. html 60
<html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index. css" /> <title>Hello World</title> </head> <body> <div class="app"> <h 1>Phone. Gap</h 1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <script type="text/javascript" src="phonegap. js"></script> <script type="text/javascript" src="js/index. js"></script> <script type="text/javascript"> app. initialize(); </script> </body> </html> 61
index. html 62
index. html <!DOCTYPE html> <head> <title>Min-Yuh Day Mobile App</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="http: //code. jquery. com/jquery-1. 9. 1. min. js"></script> <link type="text/css" href="http: //code. jquery. com/mobile/latest/jquery. mobile. min. css" rel="stylesheet" /> <script type="text/javascript" src="http: //code. jquery. com/mobile/latest/jquery. mobile. min. js"></script> <!--Phone. Gap--> <link rel="stylesheet" type="text/css" href="css/index. css" /> <script type="text/javascript" src="phonegap. js"></script> <script type="text/javascript" src="js/index. js"></script> <!--/Phone. Gap--> <script type="text/javascript"> app. initialize(); </script> </head> 63
js/index. js 64
Download Zip File: jquery. mobile-1. 3. 2. zip (Java. Script, CSS, and images) http: //jquerymobile. com/blog/2013/07/19/announcing-jquery-mobile-1 -3 -2/#download 65
jquery. mobile-1. 3. 2 66
index. html <!DOCTYPE html> <head> <title>Min-Yuh Day Mobile App</title> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="js/jquery. js"></script> <link type="text/css" href="css/jquery. mobile-1. 3. 2. min. css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery. mobile-1. 3. 2. min. js"></script> <!--Phone. Gap--> <link rel="stylesheet" type="text/css" href="css/index. css" /> <!-<script type="text/javascript" src="phonegap. js"></script> --> <script type="text/javascript" src="js/index. js"></script> <!--/Phone. Gap--> <script type="text/javascript"> app. initialize(); </script> </head> 67
Phone. Gap Build https: //build. phonegap. com/ 68
Phone. Gap Build 69
Phone. Gap Build 70
Phone. Gap Build 71
72
https: //build. phonegap. com/apps/573842/builds 73
https: //build. phonegap. com/apps/573842/install 74
https: //build. phonegap. com/apps/573842/settings 75
https: //build. phonegap. com/apps/573842/settings 76
https: //build. phonegap. com/apps/573842/settings 77
78
79
80
Myday Mobile App -> Hybrid App http: //mail. tku. edu. tw/myday/m http: //mail. tku. edu. tw/myday/app/ 81
Create Hybrid Apps with Phone. Gap 82
Summary • Phone. Gap – Phone. Gap Build • index. html, css, js • config. xml – Phone. Gap, j. Query Mobile • Demo – Create Hybrid Apps with Phone. Gap 83
References • Beginning Phone. Gap: Mobile Web Framework for Java. Script and HTML 5, Rohit Ghatol & Yogesh Patel, Apress, 2012 • Learn HTML 5 and Java. Script for i. OS: Web Standards-based Apps for i. Phone, i. Pad, and i. Pod touch, Scott Preston, Apress, 2012 • Phone. Gap – http: //phonegap. com/ • Phone. Gap Build – https: //build. phonegap. com/ • j. Query Mobile – http: //jquerymobile. com/ • Introduction to Phone. Gap Build – http: //tv. adobe. com/watch/building-mobile-apps-with-phonegap-build/introduction-tophonegap-building-your-first-app/ 84
- Slides: 84