SlideShare a Scribd company logo

phonegap_101

•Download as PPTX, PDF•
•
Asanka Indrajith
Asanka Indrajith

PhoneGap is an open source framework that allows developers to build cross-platform mobile apps using HTML, CSS, and JavaScript instead of platform-specific languages. It works by wrapping the HTML and JavaScript code in a thin native container on each mobile platform so the code can access native device features like the camera via plugins. Hybrid apps built with PhoneGap have advantages like reduced development costs through code reuse across platforms but also have disadvantages like potential performance issues and an inability to access all native features. The PhoneGap command-line interface and PhoneGap Build service make it easy to set up, build, and deploy PhoneGap apps to various app stores.

Related slideshows

The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Hybridapp
HybridappHybridapp
Hybridapp
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
1 of 27
PhoneGap 101
PhoneGap PhoneGap is an open source framework to build cross-platform hybrid mobile apps using HTML5, JavaScript and CSS, avoiding each mobile platforms' native development language.
Native Mobile App  An application written for installation in a mobile device.  Usually application is targeted for a certain platform.  Application that is coded in a specific programming language, such as Objective C for iOS and Java for Android operating systems.
Native Mobile App  Can take full advantage of all the device features–they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on.  They can also incorporate gestures (either standard operating-system gestures or new, app- defined gestures).  And native apps can use the OS notification system and can work offline.
Mobile Web App  A Web site designed for the small screens of mobile phones.  They’re accessed through the mobile device’s web browser (i.e. on the iPhone, this is Safari by default)  They don’t need to be downloaded and installed on the device.  Can’t work offline.
Native vs. Mobile
Hybrid apps  Hybrid apps are part native apps, part web apps.  Like native apps, they can be installed, live in an app store and can take advantage of the many device features available.  Like web apps, they rely on HTML being rendered in a browser.(browser is embedded within the app).  HTML5 Mobile app that resides inside a thin native container, combining the best (and worst) elements of native and HTML5 apps.
Hybrid apps Hybrid apps are also popular because they allow cross-platform development: that is, the same HTML, CSS, JavaScript code components can be reused on different mobile operating systems, reducing the development costs significantly. Tools such as PhoneGap and Sencha-Touch allow people to design and code across platforms, using the power of HTML.
phonegap_101
Implementation of Hybrid apps Local - You can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud. Server - Alternatively you can implement the full web application from the server (with optional caching for better performance), simply using the container as a thin shell over the UIWebview.
PhoneGap  Core of PhoneGap applications is they use HTML5 and CSS3 for their rendering, and JavaScript for their logic.  PhoneGap framework embeds HTML5 code inside a native WebView of the device, using a Foreign Function Interface to access the native resources of the device.  Applications execute within wrappers targeted to each platform, and rely on standards- compliant API bindings to access each device's sensors, data, and network status.
Supported Features
Supported Features  Up to Cordova 2.9.0 all these features were included in the PhoneGap project by default.  But as From Cordova 3.0.0 all this features will be break into separate plug-ins and have to manually add each plug-in using the PhoneGap Command-line Interface.
Creating PhoneGap Project  The easiest way to set up an application is to run the PhoneGap command-line utility, also known as the command-line interface(CLI).  In another scenario, you can send your code to a PhoneGap Build server to be compiled remotely for various platforms.
Creating PhoneGap Project  Command: “create directory appID AppName” ◦ directory : directory to be generated for your project. ◦ appID : A reverse domain-style identifier ◦ Ex- com.example.hello ◦ AppName : application's display name/text Ex- “create hello com.example.hello HelloWorld”
Basic Components of a PhoneGap Project  www/ ◦ config.xml (config file for PhoneGap) ◦ index.html (the main page for the application) ◦ spec.html (page for Jasmine unit testing) ◦ css/ (css files) ◦ img/ (images) ◦ js/ (JavaScript files) ◦ res/ (resources used by PhoneGap ◦ icon/ (OS-specific icon files) ◦ screen/ (OS-specific splash screen files) ◦ spec/ (libraries used by Jasmine)
Basic Components of a PhoneGap Project  Libs/CordovaLib ◦ Native implementations of PhoneGap supported features.  Cordova ◦ PhoneGap/Cordova files need to build, clean, run PhoneGap code.
Building a sample PhoneGap application  First let’s create the UI using HTML5 and CSS.  Now let’s add JavaScript code to get the functionality.  Modify the platform-specific configuration settings ◦ (in app/res/xml/config.xml) <feature name="Camera"> <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" /> </feature> (in app/AndroidManifest) <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Building PhoneGap Apps for deploy 1. Use platform supported IDEs to build apps. Ex-Eclipse for Android, Xcode for iOS. 2. Use PhoneGap Build service.
PhoneGap Build Service  A cloud-based build facility to compile applications for the many mobile platforms.  Takes the pain out of setting up development and emulation environments for the various platforms.  As an application developer, you will create the application logic through HTML, CSS, and JavaScript. Then create a single zip file with all of your application content.  An app-store ready app for Apple iOS*, Google Android, Palm*, Symbian*, BlackBerry*, and more.
PhoneGap Build Service
Pros of PhoneGap  Just need HTML5/CSS/Javascript skills to build app to iOS, Android, Windows phone, Blackberry, etc.  Code Is Reusable: Single code base for all platforms.  Distribute apps via the App Store or Android Market.  Use of external libraries like jQuery, jQM, Sencha.  Reduced Development Costs.
Cons of PhoneGap  A certain latency in the performance of the experience  Lack of pre-built native UI widgets, transitions, standard controls- Therefore development time can take longer, styling the app to look native.  Some of the device or OS features are not accessible via PhoneGap plug-ins.  No Background Processing- because JavaScript is not multi-threaded.  No remote debugging mechanism to debug JavaScript code runs on the device.
Cons of PhoneGap  A PhoneGap app can occupy several times the memory size of a native app. this memory will grow in time because developers don’t have direct control over objects in memory.  You get lowest-common-denominator access to features. When a native feature is supported, often you can only access it in one way: the portable framework's way.  All mobile platforms are constantly changing and evolving. Therefore you have to adapt your PhoneGap app time to time.
When to use PhoneGap  Deploy to many platforms.  App have no Complex Business Logic.  Access basic native functionality.  Doesn’t need advanced Graphics.  For a team of Web Developers.
Useful Technologies and Frameworks  jQuery  jQuery Mobile / Sencha Touch  iScroll  Swipe.js  SQLite  Purl.js
Questions?

More Related Content

phonegap_101

  • 2. PhoneGap PhoneGap is an open source framework to build cross-platform hybrid mobile apps using HTML5, JavaScript and CSS, avoiding each mobile platforms' native development language.
  • 3. Native Mobile App  An application written for installation in a mobile device.  Usually application is targeted for a certain platform.  Application that is coded in a specific programming language, such as Objective C for iOS and Java for Android operating systems.
  • 4. Native Mobile App  Can take full advantage of all the device features–they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on.  They can also incorporate gestures (either standard operating-system gestures or new, app- defined gestures).  And native apps can use the OS notification system and can work offline.
  • 5. Mobile Web App  A Web site designed for the small screens of mobile phones.  They’re accessed through the mobile device’s web browser (i.e. on the iPhone, this is Safari by default)  They don’t need to be downloaded and installed on the device.  Can’t work offline.
  • 7. Hybrid apps  Hybrid apps are part native apps, part web apps.  Like native apps, they can be installed, live in an app store and can take advantage of the many device features available.  Like web apps, they rely on HTML being rendered in a browser.(browser is embedded within the app).  HTML5 Mobile app that resides inside a thin native container, combining the best (and worst) elements of native and HTML5 apps.
  • 8. Hybrid apps Hybrid apps are also popular because they allow cross-platform development: that is, the same HTML, CSS, JavaScript code components can be reused on different mobile operating systems, reducing the development costs significantly. Tools such as PhoneGap and Sencha-Touch allow people to design and code across platforms, using the power of HTML.
  • 10. Implementation of Hybrid apps Local - You can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud. Server - Alternatively you can implement the full web application from the server (with optional caching for better performance), simply using the container as a thin shell over the UIWebview.
  • 11. PhoneGap  Core of PhoneGap applications is they use HTML5 and CSS3 for their rendering, and JavaScript for their logic.  PhoneGap framework embeds HTML5 code inside a native WebView of the device, using a Foreign Function Interface to access the native resources of the device.  Applications execute within wrappers targeted to each platform, and rely on standards- compliant API bindings to access each device's sensors, data, and network status.
  • 13. Supported Features  Up to Cordova 2.9.0 all these features were included in the PhoneGap project by default.  But as From Cordova 3.0.0 all this features will be break into separate plug-ins and have to manually add each plug-in using the PhoneGap Command-line Interface.
  • 14. Creating PhoneGap Project  The easiest way to set up an application is to run the PhoneGap command-line utility, also known as the command-line interface(CLI).  In another scenario, you can send your code to a PhoneGap Build server to be compiled remotely for various platforms.
  • 15. Creating PhoneGap Project  Command: “create directory appID AppName” ◦ directory : directory to be generated for your project. ◦ appID : A reverse domain-style identifier ◦ Ex- com.example.hello ◦ AppName : application's display name/text Ex- “create hello com.example.hello HelloWorld”
  • 16. Basic Components of a PhoneGap Project  www/ ◦ config.xml (config file for PhoneGap) ◦ index.html (the main page for the application) ◦ spec.html (page for Jasmine unit testing) ◦ css/ (css files) ◦ img/ (images) ◦ js/ (JavaScript files) ◦ res/ (resources used by PhoneGap ◦ icon/ (OS-specific icon files) ◦ screen/ (OS-specific splash screen files) ◦ spec/ (libraries used by Jasmine)
  • 17. Basic Components of a PhoneGap Project  Libs/CordovaLib ◦ Native implementations of PhoneGap supported features.  Cordova ◦ PhoneGap/Cordova files need to build, clean, run PhoneGap code.
  • 18. Building a sample PhoneGap application  First let’s create the UI using HTML5 and CSS.  Now let’s add JavaScript code to get the functionality.  Modify the platform-specific configuration settings ◦ (in app/res/xml/config.xml) <feature name="Camera"> <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" /> </feature> (in app/AndroidManifest) <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  • 19. Building PhoneGap Apps for deploy 1. Use platform supported IDEs to build apps. Ex-Eclipse for Android, Xcode for iOS. 2. Use PhoneGap Build service.
  • 20. PhoneGap Build Service  A cloud-based build facility to compile applications for the many mobile platforms.  Takes the pain out of setting up development and emulation environments for the various platforms.  As an application developer, you will create the application logic through HTML, CSS, and JavaScript. Then create a single zip file with all of your application content.  An app-store ready app for Apple iOS*, Google Android, Palm*, Symbian*, BlackBerry*, and more.
  • 22. Pros of PhoneGap  Just need HTML5/CSS/Javascript skills to build app to iOS, Android, Windows phone, Blackberry, etc.  Code Is Reusable: Single code base for all platforms.  Distribute apps via the App Store or Android Market.  Use of external libraries like jQuery, jQM, Sencha.  Reduced Development Costs.
  • 23. Cons of PhoneGap  A certain latency in the performance of the experience  Lack of pre-built native UI widgets, transitions, standard controls- Therefore development time can take longer, styling the app to look native.  Some of the device or OS features are not accessible via PhoneGap plug-ins.  No Background Processing- because JavaScript is not multi-threaded.  No remote debugging mechanism to debug JavaScript code runs on the device.
  • 24. Cons of PhoneGap  A PhoneGap app can occupy several times the memory size of a native app. this memory will grow in time because developers don’t have direct control over objects in memory.  You get lowest-common-denominator access to features. When a native feature is supported, often you can only access it in one way: the portable framework's way.  All mobile platforms are constantly changing and evolving. Therefore you have to adapt your PhoneGap app time to time.
  • 25. When to use PhoneGap  Deploy to many platforms.  App have no Complex Business Logic.  Access basic native functionality.  Doesn’t need advanced Graphics.  For a team of Web Developers.
  • 26. Useful Technologies and Frameworks  jQuery  jQuery Mobile / Sencha Touch  iScroll  Swipe.js  SQLite  Purl.js

Editor's Notes

  1. You know that native apps are installed on the device, while HTML5 apps reside on a Web server, so you might be wondering if hybrid apps store their files on the device or on a server? Yes. In fact there are two ways to implement a hybrid app.
  2. This configuration file allows you to modify things like the application's title, icons, splash screens, and other properties.