Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to phonegap with angular js for freshers
Similar to phonegap with angular js for freshers (20)
Recently uploaded
Recently uploaded (20)
phonegap with angular js for freshers
- 1. Mobile App Development using Dss Prakash
- 2. Agenda • Why cross platform for mobile development . • What is PhoneGAP ? • How does phonegap work..? • PhoneGap features. • Setting-up Your PhoneGap Environment. • Creating “Hello World!” using PhoneGap. • PhoneGap Plugin development Dss Prakash
- 3. Cross-Platform Mobile Apps • Design & Build the mobile app using HTML5,CSS3 & JavaScript • Bind up with Adobe PhoneGap -> Free Cordova open source framework or PhoneGap build. -> Get access to native API’s (Accelerometer, Camera, Compass, Device, Events, File, Geolocation, Media, etc. ) • Deploy to multiple platforms -> iOS ,Android ,Windows Phone ,Blackberry ,Symbian etc. ) • Multiple Cordova variants availble -> Telrik App Builder, IBM work light ,HP Anywhare etc. Dss Prakash
- 4. 1. PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova. Think of Apache Cordova as the engine that powers PhoneGap. Dss Prakash
- 5. Apache Cordova • Apache Cordova is a platform for building natively installed mobile applications using HTML, CSS and JavaScript Dss Prakash
- 6. What is PhoneGap? • Build mobile apps using HTML5, Javascript & CSS3 • PhoneGap was originally developed by Nitobi • In 2011, Adobe acquired Nitobi • PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova • Through the ASF, PhoneGap remains free and open source under the Apache License, Version 2.0 • PhoneGap adds extra features to Cordova (e.g. cloud build) • http://cordova.apache.org/ • http://phonegap.com/ Dss Prakash
- 7. Installing PhoneGap C:> npm install -g phonegap $ phonegap create my-app $ cd my-app $ phonegap run android To Install, ensure that you have NodeJS installed, then open your command-line and run the following: Install Usage
- 9. How does PhoneGap Work? • Include web code in a native app project: - assets/www/js/, css/, images/, etc. • Native code loads a URL to the web code through the device’s internal browser: - Extend a CordovaWebViewClient - super.loadUrl( “file:///android_asset/www/login.html” ); • Apache Cordova exposes native device APIs through JavaScript: - navigator.device.capture.captureImage( captureSuccess(), captureError(), [options] ); Dss Prakash
- 10. API’s In PhoneGAP Dss Prakash
- 11. 1. HTML5 and CCS 3 support. 2. Debugging and profiling . 3. Performance and memory usage. 4. Screen size and orientation . 5. DPI’s .(Dots per inch (dpi) is a measure of a display's pixel density). 6. User interface – or use just native look. 7. Performance and optimization Challenges in PhoneGap ..?
- 12. 1. PhoneGap is not UI framework . 2. PhoneGap doesn't include a browser and /or rendering engine. 3. PhoneGap doesn't compile . 4. Every platform needs its own compilation. 5. HTML5/CSS3 compatibility. What is NOT PhoneGap ..?
- 13. Creating “Hello World” ! • Creating the Android Project and create a activity extending to DroidGap • Add ‘phonegap.jar’ to libs folder <project>/libs • Add ‘phonegap.jar’ to java build path • Add the config.xml file located inside xml folder required for phone gap. Paste the entire xml folder inside res folder • Add the required permissions to AndroidMainfeast.xml folder • Creating the HTML (index.html) file and put in assets/www folder • Create and start AVD. Run the Application . Dss Prakash
- 14. Dss Prakash
- 15. Html Code ..! Dss Prakash <!DOCTYPE html> <html> <head> <title>Device Properties Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } // onSuccess Geolocation function onSuccess(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' + } // onError Callback receives a PositionError object function onError(error) { alert('code: ' + error.code + 'n' + message: ' + error.message + 'n'); } </script> </head> <body> <p id="geolocation">Finding geolocation...</p> </body> </html>
- 16. <!DOCTYPE html> <html ng-app="myApps"> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>PhoneGap Plugins Example</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script src="js/myApp.js"></script> <script src="js/controller.js"></script> </head> <body><div ng-controller="controller"> <div> <h1>PhoneGap Plugins Example</h1> </div> <p><button class="myButton" ng-click="alertDeviceInfo()">Device</button></p> <p><button class="myButton" ng-click="alertGeoLocation()">Location</button></p> <p><button class="myButton" ng-click="beepNotify()">Beep</button></p> <p><button class="myButton" ng-click="vibrateNotify()">Vibrate</button></p> </div> <div> <a class="myButton" href="Gmap.html">Map</a> </div> <script type="text/javascript"> app.initialize(); </script> </body> </html> Index.html
- 17. myApp.controller("controller", function($scope){ // Fetch Device info from Device Plugin $scope.alertDeviceInfo = function() { var deviceInfo = ('Device Platform: ' + device.platform + 'n' + 'Device Version: ' + device.version + 'n' + 'Device Model: ' + device.model + 'n' + 'Device UUID: ' + device.uuid + 'n'); navigator.notification.alert(deviceInfo); }; // Fetch location info from GeoLocation Plugin $scope.alertGeoLocation = function() { var onSuccess = function(position) { navigator.notification.alert('Latitude: ' + position.coords.latitude + 'n' + 'Longitude: ' + position.coords.longitude + 'n' + 'Altitude: ' + position.coords.altitude + 'n' + 'Accuracy: ' + position.coords.accuracy + 'n' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' + 'Heading: ' + position.coords.heading + 'n' + 'Timestamp: ' + position.timestamp + 'n'); }; navigator.geolocation.getCurrentPosition(onSuccess); }; // Makes a beep sound $scope.beepNotify = function() { navigator.notification.beep(1); }; // Vibrates the phone $scope.vibrateNotify = function() { navigator.notification.vibrate(1000); }; }); Controller.js
- 18. var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { console.log('Received Event: ' + id); } }; var myApp = angular.module('myApps', []); Index.js myApp.js
- 19. PhoneGAP Advantages..! • Not required any programming language • Supportive for all major platforms • Support for Various API’s Dss Prakash
- 20. Disadvantages of PhoneGAP ..! • Conditions Apply . • Can be inefficient when working for native apps . • Does not support all the functionality. Dss Prakash
- 21. Dss Prakash
- 22. • https://build.phonegap.com/ • https://platform.telerik.com/ • https://appery.io/