SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt? (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
 

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Kürzlich hochgeladen (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
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
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
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
 
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...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
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
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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...
 

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