SlideShare a Scribd company logo
1 of 20
Download to read offline
Introduction to
     PhoneGap
   The Open Source Cross Platform
Mobile Web App Development Framework




                                               Ph.P
                                         SOCIETY
                                       Philosophy in Programming Society
Background
•   Evolution of Mobile Web.

•   Formats: WAP, cHTML, mHTML.

•   Limited by Phone’s web browser.

    •   Manufacturer dependent proprietary web
        browser.

•   WAP: “Where Are the Phones?”

    •   Limited resources, capabilities & bandwidth.

    •   Inconsistent form factors (screen size, color
        depth, bitmap support, plugin?).

                                                                Ph.P
                                                          SOCIETY
                                                        Philosophy in Programming Society
WAP/cHTML Phones




                           Ph.P
                     SOCIETY
                   Philosophy in Programming Society
Mobile Web Today
•   Powerful Smart Phones.

•   Powerful full-featured mobile Operating Systems.

    •   Old Birds: Windows Mobile, Symbian OS,
        Blackberry

    •   Linux Based: iPhone OS, Android, WebOS,
        Maemo

•   Powerful cross-platform web browsers.

•   More bandwidth (3G, WiFi, WiMax).

•   More consistent form-factors.

                                                               Ph.P
                                                         SOCIETY
                                                       Philosophy in Programming Society
Smart Phones




                       Ph.P
                 SOCIETY
               Philosophy in Programming Society
Developing for Mobile Web
•   Inconsistency:

    •   Layout, screen resolution, form factors,
        capabilities, bandwidth, plug-in

    •   Proprietary APIs

    •   Caveat: Cross platform web browsers (Webkit,
        Mozilla, Opera)

•   Limited in Scope

    •   Web browser “Silo”

    •   Self-contained & away from the rest of the OS

    •   Secure but quite useless                                Ph.P
                                                          SOCIETY
                                                        Philosophy in Programming Society
Native Phone App?
•   Learning Curve:

    •   New SDK, New Language, New Paradigmn

    •   OS Dependent quirks, limitations, conventions

•   Weapon of Choice (which platform?):

    •   Significant investment in time & money

    •   Egg in one basket?




                                                                Ph.P
                                                          SOCIETY
                                                        Philosophy in Programming Society
What is PhoneGap?
•   Leverages on what we web developers knows best
    - HTML & Javascript.

•   Gives us access to the phone’s native APIs &
    features - Geo-location, Vibration, Accelerometer,
    Sound, Contacts, Camera, etc...

•   “Wraps the web view with a container. This container
    gives the view access to APIs available on the device
    that may not be available on the Web view alone”.




            http://www.phonegap.com                                 Ph.P
                                                              SOCIETY
                                                            Philosophy in Programming Society
Developing in PhoneGap
1. Create Web Views
  •   HTML, Javascript, Graphics, etc.
2. Store it in a folder.
3. Compile the Web view into a native app binary file.
  •   iPhone, Android, Blackberry
  •   Coming Soon: Nokia (WRT), Windows Mobile,
      WebOS
4. Install into device.


                                                           Ph.P
                                                     SOCIETY
                                                   Philosophy in Programming Society
Video


                Ph.P
          SOCIETY
        Philosophy in Programming Society
Some Sample Codes




                            Ph.P
                      SOCIETY
                    Philosophy in Programming Society
Get a Contact




                        Ph.P
                  SOCIETY
                Philosophy in Programming Society
Geo-Location




                       Ph.P
                 SOCIETY
               Philosophy in Programming Society
Supported Features




- SQLite Support
- Support for JS Frameworks
  - iUI, xUI, Magic Framework, Dashcode,
  JQTouch, etc..
                                                   Ph.P
                                             SOCIETY
                                           Philosophy in Programming Society
Sample Apps




                      Ph.P
                SOCIETY
              Philosophy in Programming Society
Sample Apps




                      Ph.P
                SOCIETY
              Philosophy in Programming Society
Sample Apps




                      Ph.P
                SOCIETY
              Philosophy in Programming Society
Conclusion
•   Things will only get better.

•   Active community (Google Groups)

    •   http://groups.google.com/group/phonegap

•   Good wiki documentation

    •   http://phonegap.pbworks.com/

•   Device agnostic

•   Completely open source (FREE!)



                                                          Ph.P
                                                    SOCIETY
                                                  Philosophy in Programming Society
Upcoming
•   More platforms: Nokia (SymbianOS), Palm
    WebOS, Windows Mobile, Nintendo DS?

•   Support for OpenGL

•   Support for Gecko / Mozilla

•   Many more...




                                                      Ph.P
                                                SOCIETY
                                              Philosophy in Programming Society

More Related Content

What's hot (7)

Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?Native, Web or Hybrid Mobile App Development?
Native, Web or Hybrid Mobile App Development?
 
Wireless Systems Congress LocalSocial
Wireless Systems Congress LocalSocialWireless Systems Congress LocalSocial
Wireless Systems Congress LocalSocial
 
Web conferancing
Web conferancingWeb conferancing
Web conferancing
 
Alistpitch
AlistpitchAlistpitch
Alistpitch
 
Introduction to mobile application development
Introduction to mobile application developmentIntroduction to mobile application development
Introduction to mobile application development
 
Leverage web technology in a mobile world
Leverage web technology in a mobile worldLeverage web technology in a mobile world
Leverage web technology in a mobile world
 

Viewers also liked

Introduction to Mobile Programming 2 - course
Introduction to Mobile Programming 2 - courseIntroduction to Mobile Programming 2 - course
Introduction to Mobile Programming 2 - course
Jussi Pohjolainen
 
00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt
Jussi Pohjolainen
 

Viewers also liked (6)

Introduction to Mobile Programming 2 - course
Introduction to Mobile Programming 2 - courseIntroduction to Mobile Programming 2 - course
Introduction to Mobile Programming 2 - course
 
Mobile app development - course intro
Mobile app development - course introMobile app development - course intro
Mobile app development - course intro
 
Oeb09 Session1 Basic To Mobile20
Oeb09 Session1 Basic To Mobile20Oeb09 Session1 Basic To Mobile20
Oeb09 Session1 Basic To Mobile20
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 

Similar to Mobile Web Dev

Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Yahoo Developer Network
 
PhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the EnterprisePhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the Enterprise
Bryce Curtis
 

Similar to Mobile Web Dev (20)

Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
 
Intro to tech stacks bonny
Intro to tech stacks bonnyIntro to tech stacks bonny
Intro to tech stacks bonny
 
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
Mobile Backend Apps and APIs meetup London overview of BaaS APIs and discussi...
 
PhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the EnterprisePhoneGap Day - IBM, PhoneGap and the Enterprise
PhoneGap Day - IBM, PhoneGap and the Enterprise
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
Engage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategiesEngage 2013 - Mobile solution strategies
Engage 2013 - Mobile solution strategies
 
Native Application Development Company
Native Application Development CompanyNative Application Development Company
Native Application Development Company
 
Mobile development
Mobile developmentMobile development
Mobile development
 
Tap into mobile app testing@TDT Iasi Sept2013
Tap into mobile app testing@TDT Iasi Sept2013Tap into mobile app testing@TDT Iasi Sept2013
Tap into mobile app testing@TDT Iasi Sept2013
 
PhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile HackPhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile Hack
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
 
Feed Herny developer training : crossplatform and HTML5
Feed Herny developer training : crossplatform and  HTML5Feed Herny developer training : crossplatform and  HTML5
Feed Herny developer training : crossplatform and HTML5
 
Mobility today & what's next. Application ecosystems.
Mobility today & what's next.Application ecosystems.Mobility today & what's next.Application ecosystems.
Mobility today & what's next. Application ecosystems.
 
Building Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGapBuilding Hybrid Applications using PhoneGap
Building Hybrid Applications using PhoneGap
 
Exploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platformsExploring the right business strategy for open source mobile platforms
Exploring the right business strategy for open source mobile platforms
 
Facebook Open Graph - The Semantic Wallet
Facebook Open Graph - The Semantic WalletFacebook Open Graph - The Semantic Wallet
Facebook Open Graph - The Semantic Wallet
 
Hybrid app development
Hybrid app developmentHybrid app development
Hybrid app development
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Simplified Web2.0 application development with Project Zero
Simplified Web2.0 application development with Project ZeroSimplified Web2.0 application development with Project Zero
Simplified Web2.0 application development with Project Zero
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 

Mobile Web Dev

  • 1. Introduction to PhoneGap The Open Source Cross Platform Mobile Web App Development Framework Ph.P SOCIETY Philosophy in Programming Society
  • 2. Background • Evolution of Mobile Web. • Formats: WAP, cHTML, mHTML. • Limited by Phone’s web browser. • Manufacturer dependent proprietary web browser. • WAP: “Where Are the Phones?” • Limited resources, capabilities & bandwidth. • Inconsistent form factors (screen size, color depth, bitmap support, plugin?). Ph.P SOCIETY Philosophy in Programming Society
  • 3. WAP/cHTML Phones Ph.P SOCIETY Philosophy in Programming Society
  • 4. Mobile Web Today • Powerful Smart Phones. • Powerful full-featured mobile Operating Systems. • Old Birds: Windows Mobile, Symbian OS, Blackberry • Linux Based: iPhone OS, Android, WebOS, Maemo • Powerful cross-platform web browsers. • More bandwidth (3G, WiFi, WiMax). • More consistent form-factors. Ph.P SOCIETY Philosophy in Programming Society
  • 5. Smart Phones Ph.P SOCIETY Philosophy in Programming Society
  • 6. Developing for Mobile Web • Inconsistency: • Layout, screen resolution, form factors, capabilities, bandwidth, plug-in • Proprietary APIs • Caveat: Cross platform web browsers (Webkit, Mozilla, Opera) • Limited in Scope • Web browser “Silo” • Self-contained & away from the rest of the OS • Secure but quite useless Ph.P SOCIETY Philosophy in Programming Society
  • 7. Native Phone App? • Learning Curve: • New SDK, New Language, New Paradigmn • OS Dependent quirks, limitations, conventions • Weapon of Choice (which platform?): • Significant investment in time & money • Egg in one basket? Ph.P SOCIETY Philosophy in Programming Society
  • 8. What is PhoneGap? • Leverages on what we web developers knows best - HTML & Javascript. • Gives us access to the phone’s native APIs & features - Geo-location, Vibration, Accelerometer, Sound, Contacts, Camera, etc... • “Wraps the web view with a container. This container gives the view access to APIs available on the device that may not be available on the Web view alone”. http://www.phonegap.com Ph.P SOCIETY Philosophy in Programming Society
  • 9. Developing in PhoneGap 1. Create Web Views • HTML, Javascript, Graphics, etc. 2. Store it in a folder. 3. Compile the Web view into a native app binary file. • iPhone, Android, Blackberry • Coming Soon: Nokia (WRT), Windows Mobile, WebOS 4. Install into device. Ph.P SOCIETY Philosophy in Programming Society
  • 10. Video Ph.P SOCIETY Philosophy in Programming Society
  • 11.
  • 12. Some Sample Codes Ph.P SOCIETY Philosophy in Programming Society
  • 13. Get a Contact Ph.P SOCIETY Philosophy in Programming Society
  • 14. Geo-Location Ph.P SOCIETY Philosophy in Programming Society
  • 15. Supported Features - SQLite Support - Support for JS Frameworks - iUI, xUI, Magic Framework, Dashcode, JQTouch, etc.. Ph.P SOCIETY Philosophy in Programming Society
  • 16. Sample Apps Ph.P SOCIETY Philosophy in Programming Society
  • 17. Sample Apps Ph.P SOCIETY Philosophy in Programming Society
  • 18. Sample Apps Ph.P SOCIETY Philosophy in Programming Society
  • 19. Conclusion • Things will only get better. • Active community (Google Groups) • http://groups.google.com/group/phonegap • Good wiki documentation • http://phonegap.pbworks.com/ • Device agnostic • Completely open source (FREE!) Ph.P SOCIETY Philosophy in Programming Society
  • 20. Upcoming • More platforms: Nokia (SymbianOS), Palm WebOS, Windows Mobile, Nintendo DS? • Support for OpenGL • Support for Gecko / Mozilla • Many more... Ph.P SOCIETY Philosophy in Programming Society