Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Phone gap presentation


Published on

Choosing an appropriate framework for the development of any mobile/web app is the most common technical discussion these days. Various HTML5 frameworks are there that help programmers with various features like CSS styling and APIs, thus reducing the agony of dealing with HTML5. Research has shown that when it comes to mobile app development, two cross platform mobile app development frameworks have been quite famous, Appcelerator Titanium and PhoneGap.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Phone gap presentation

  1. 1. PhoneGap App Development
  2. 2.  PhoneGap is a mobile app development frameworkcurrently owned by Adobe It allows developers to craft applications usingHTML5, JavaScript and CSS A truly 100% open source technology The development is just like a normal application usingtraditional development skills, and the PhoneGap buildhelps in deploying the app to different platformsPhoneGap App Development
  3. 3.  It was in August 2008, when the first PhoneGap was authorized at theiPhoneDevCamp. The main contributing driver for creation was onebasic fact that almost all the new iPhone developers get into :Objective-C can prove to be quite unfamiliar for web developers. Andas a matter of fact, there are more web developers than Objective-Cones. The main question of concern was, could there be someone who candevelop such a framework that allows web developers to put all theirknowledge of HTML, JavaScript and CSS into use and can interact withutmost important parts of a Smartphone.PhoneGap App Development
  4. 4. PhoneGap App Development
  5. 5. PhoneGap App Development This tutorial will help you develop your firstAdobe’s PhoneGap build creative cloudapplication without any hassle or pressure usingHTML5, CSS and JavaScript. It’s really easy.
  6. 6. PhoneGap App Development Open a web browser, Type to go to thePhoneGap website Sign in using your Adobe ID Create a new app by clicking on the +new app button Write the existing source code or existing repo/paste.git repository or you can simply upload the zip file Upload the zip file of your project. Remember to compress yourfolder before uploading it
  7. 7. PhoneGap App Development We have uploaded the SampleApp file. The original folder willcontain all HTML+CSS+JavaScript+JPG files in it. The name ofthe file along with all the assets will appear after uploading. Click the build button for building your project. Little animations will appear that will show the builds in progressfor simultaneous builds taking place. After all the animations are build a QR code will be generated.Scan this code to install the app on your device. Click on install button for final installation
  8. 8. PhoneGap App Development Open the app, You will see the appthat you had created before on yourdevice. Now we will move to editingthe app. We will show you how easyit is to edit an app.
  9. 9.  Go to SampleApp folder on your computer(uncompressed file) Open the INDEX.HTML in your editor. Place a <BR> tag for line break just after the Body’s content. Place this h1 tag after BR, <h1 align =center>My First App<h1> Save the index.html file. Re-compress the folder. Go back to phonegap build anapplication and click on update code button.PhoneGap App Development
  10. 10.  Upload the Upon uploading you willsee the new code gets saved and builds for all the otherplatform starts happening again. Scan the QR code again Install the app on the device again and Run theapplication. You will see “My First App” has written just below theMobilepundits Image.PhoneGap App Development
  11. 11.  This is your first application that you just created, editedand updated it. All this was a matter of few minutes;thanks to the PhoneGap build. But there is an even easier method to update yourapplication. There is a new feature in this calledHYDRATION. It lets you update your content withoutredownloading the app thus improving the developmentworkflow even morePhoneGap App Development
  12. 12. PhoneGap App DevelopmentLet’s turn on hydration for ourapplication
  13. 13.  Go to the main apps page on PhoneGap build. Here you can see yourlist of apps and you now want to make SampleApp a hydrated app Click on SampleApp and go to settings. In settings, push the buttonENABLE HYDRATION Go ahead and save the app, You can see that your app had hydrationenabled but is in pending mode Click on the APPS button to get the list of your apps. First time when you hydrate your app, it will rebuild your app and youreinstall on your device and that will be the last time you’ll ever installyour app on your device because it is now hydrated.PhoneGap App Development
  14. 14.  Now click on the app page and you will see that your hydration iscomplete. After clicking on the apps button for the list of apps, you will see thatthe hydration is complete. One last time, go ahead and scan the QR code to install the hydratedversion of the app. Install the new version. The first you run the app, it says “LoadingHydrated Application”. After that you will see the option UPDATE ANDRESTART NOW. Click on that option, and it will rebuild your application. All this isdone to improve the workflow of the application.PhoneGap App Development
  15. 15.  Click on the following link to watch thevideo tutorial of PhoneGap Build: App Development
  16. 16.  You can code in standard HTML5, CSS and JavaScriptinstead of Objective-C Once you develop the application, you can deploy the app inmultiple platforms. Thus the client saves time and money It allows you to tap into many of the built-in features of thedevice The applications can have their own icons offeringbookmarking and marketing advantagePhoneGap App Development
  17. 17.  The applications have a cleaner interface, and the operationis pretty much similar to the native applications with abrowser frame around them The app can distributed via different app stores PhoneGap supports seven different mobile platforms :iOS, Android, BlackBerry, webOS, Symbian, Samsung Badaand Windows Phone. Since it is open source, new innovative apps are developedon a regular basisPhoneGap App Development
  18. 18.  PhoneGap does not support all the built-in features Since it covers multiple platforms, PhoneGap will always beone step behind the native platforms when it comes to newfeatures PhoneGap apps look pretty much the same in all the mobileenvironments. The look is just like a native application but alittle more generic lookPhoneGap App Development
  19. 19.  MobilePundits‘ PhoneGap application developmentteam has successfully developed brilliant Mobile Appsusing Cross-platform technology. Our expert team isalso skilled at other cross platform technologies likeTitanium, MoSync, Sencha etc.PhoneGap App Development
  20. 20. PhoneGap App Development