• Save
2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App
Upcoming SlideShare
Loading in...5
×
 

2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App

on

  • 599 views

2013 FJU CSIE WECO LAB

2013 FJU CSIE WECO LAB

Statistics

Views

Total Views
599
Slideshare-icon Views on SlideShare
599
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App 2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App Presentation Transcript

    • PhoneGap 跨平台任我玩,HTML5 無痛開發 App 輔仁大學 資工四乙 楊皇毅 資工四甲 葉名哲 WECO LAB 13年8月27⽇日星期⼆二
    • Outline ·•Why Mobile App ·•Why PhoneGap ·•Myth ·•Pros ·•History ·•What is PhoneGap Build ·•DEMO 13年8月27⽇日星期⼆二
    • Why Mobile App? 13年8月27⽇日星期⼆二
    • Smartphone Addicts Source: http://farm9.staticflickr.com/8525/8679232861_ef9d5c6ec9_b_d.jpg 13年8月27⽇日星期⼆二
    • Mobile is Growing Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices- growth.jpg 13年8月27⽇日星期⼆二
    • But... 13年8月27⽇日星期⼆二
    • Source: http://gapmarketingservices.com/blog/wp-content/uploads/2011/11/connected-devices- growth.jpg Various Platforms 13年8月27⽇日星期⼆二
    • OS Language Android Java Windows Phone C# iOS Object C RIM Java Native Development 13年8月27⽇日星期⼆二
    • Hybrid App is becoming popular HTML5 is the solution 13年8月27⽇日星期⼆二
    • Mobile HTML5 Support Source: http://mobilehtml5.org/ 13年8月27⽇日星期⼆二
    • Mobile  Web   Na+ve  App Hybrid  App Dev  Time Short   Long   Normal   Dev  Cost   Reasonable Expensive Reasonable Portability   Yes No Yes Performance   Fast Very  Fast Normal   Na+ve  Func+on   NO YES YES Offline NO YES YES User  Experience Normal   Best Normal   App  Store  Distribu+on   NO YES YES Comparison 13年8月27⽇日星期⼆二
    • Why PhoneGap ·•Hybrid App ·•Free ·•Easy to Use ·•Open Source ·•Support Major Platforms ·•What is PhoneGap Build 13年8月27⽇日星期⼆二
    • Concepts in PhoneGap 13年8月27⽇日星期⼆二
    • API Support 13年8月27⽇日星期⼆二
    • Myth ·•Knowing web development means good App? ·•TRUE Easy and Painless development? ·•Bad performance comparing with native? 13年8月27⽇日星期⼆二
    • Myth 13年8月27⽇日星期⼆二
    • Myth Source: http://www.mobilespect.com/wp-content/uploads/2012/01/android_market_versions_jan3-2012_b.png Wide range of Screen Size, Versions 13年8月27⽇日星期⼆二
    • Myth “Our Biggest Mistake Was Betting Too Much On HTML5” source:http://www.socialpositives.com/wp-content/uploads/2012/12/org_4552057-3418413.jpg 13年8月27⽇日星期⼆二
    • But... 13年8月27⽇日星期⼆二
    • Myth HTML5 isn’t the CAUSE for Facebook App being slow 13年8月27⽇日星期⼆二
    • Pros debug ·•HTML5 App Platform ·•Browser without tool bar ·•Package HTML to App ·•Use JS API ·•Write once , run anywhere 13年8月27⽇日星期⼆二
    • Create App step ·•Create using HTML5 ·•Package into PhoneGap ·•Deploy to device 13年8月27⽇日星期⼆二
    • About PhoneGap ·•Project begin in 2008 ·•iPhoneDevCamp ·•Developed to get geolocation ·•Adobe Acquire PhoneGap team in 2011 and donated to Apache Foundation 13年8月27⽇日星期⼆二
    • About Apache Cordova ·•Cordova is a open source project ·•PhoneGap is the implement ·•Bond like Chrome and Webkit 13年8月27⽇日星期⼆二
    • What is PhoneGap Build Take the pain out of developing mobile apps. 13年8月27⽇日星期⼆二
    • What is PhoneGap Build ·•We compile for you ·•Support multiple platforms ·•Work together ·•Quick deployment cycles 13年8月27⽇日星期⼆二
    • DEMO 13年8月27⽇日星期⼆二
    • Installation ·•Download pre-compiled package ·•easy , quick , for testing purpose ·•Use npm install the latest core file ·•official recommend , for real develop 13年8月27⽇日星期⼆二
    • Setup Environment ·•Download and Install NodeJS ·•Using npm to install phonegap ·•sudo npm install -g phonegap (MAC/LINUX) ·•npm install -g phonegap (WIN) 13年8月27⽇日星期⼆二
    • Create New Project ·•phonegap create AAA -n BBB.BBB.BBB -i CCC AAA is directory to be generated for your project BBB provides your project with a reverse domain-style identifier CCC provides the application's display text 13年8月27⽇日星期⼆二
    • Create New Project ·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git ·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git ·•phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git 13年8月27⽇日星期⼆二
    • Build the project ·•phonegap build android ·•phonegap build ios generating platform-specific files within the project's platforms subdirectory 13年8月27⽇日星期⼆二
    • Run the project ·•phonegap run android ·•phonegap run ios both the build and install operations in one line 13年8月27⽇日星期⼆二