PhoneGap Development

Transcript

1. PhoneGap PhoneGap PhoneGap PhoneGap Application Application Application Application Development Development Development Development P P P PHONE HONE HONE HONEG G G GAP AP AP AP
2. P P P PHONE HONE HONE HONEG G G GAP AP AP AP A A A APP PP PP PP D D D DEVELOPMENT EVELOPMENT EVELOPMENT EVELOPMENT P P P PHONE HONE HONE HONEG G G GAP AP AP AP A A A APP PP PP PP D D D DEVELOPMENT EVELOPMENT EVELOPMENT EVELOPMENT T T T TABLE ABLE ABLE ABLE OF OF OF OF C C C CONTENTS ONTENTS ONTENTS ONTENTS 1. 1. 1. 1. Document Document Document Document Purpose Purpose Purpose Purpose.................................................................................................................. .................................................................................................................. .................................................................................................................. ..................................................................................................................1 1 1 1 2. 2. 2. 2. Document Document Document Document Resources Resources Resources Resources............................................................................................................. ............................................................................................................. ............................................................................................................. ............................................................................................................. 1 1 1 1 3. 3. 3. 3. Glossary Glossary Glossary Glossary of of of of Terms Terms Terms Terms................................................................................................................... ................................................................................................................... ................................................................................................................... ...................................................................................................................1 1 1 1 4. 4. 4. 4. Prerequisites Prerequisites Prerequisites Prerequisites ........................................................................................................................... ........................................................................................................................... ........................................................................................................................... ........................................................................................................................... 1 1 1 1 5. 5. 5. 5. Set Set Set Set up up up up the the the the development development development development environment environment environment environment.................................................................................. .................................................................................. .................................................................................. .................................................................................. 2 2 2 2 6. 6. 6. 6. Building Building Building Building app app app app with with with with PhoneGap PhoneGap PhoneGap PhoneGap Build Build Build Build Cloud Cloud Cloud Cloud Service Service Service Service............................................................. ............................................................. ............................................................. ............................................................. 5 5 5 5 7. 7. 7. 7. Features Features Features Features.................................................................................................................................... .................................................................................................................................... .................................................................................................................................... ....................................................................................................................................7 7 7 7 8. 8. 8. 8. PhoneGap PhoneGap PhoneGap PhoneGap app app app app development development development development status status status status..................................................................................... ..................................................................................... ..................................................................................... .....................................................................................8 8 8 8 9 9 9 9. . . . Conclusion Conclusion Conclusion Conclusion
3. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 2 1. 1. 1. 1. Document Document Document Document Purpose Purpose Purpose Purpose This document defines the high level requirements of mobile application development using PhoneGap which is a free open source framework. It will be used as the basis for the following activities: • Knowing the prerequisites before starting with PhoneGap • Configuring eclipse development environment • Creating a sample PhoneGap application • Building with PhoneGap Build. Additionally, the document also lists out the good features of PhoneGap and its drawbacks and also how to overcome the drawbacks if any. 2. 2. 2. 2. Document Document Document Document Resources Resources Resources Resources Name Name Name Name Source Source Source Source Description Description Description Description PhoneGap PhoneGap PhoneGap PhoneGap http://www.phonegap.com A complete PhoneGap reference. 3. 3. 3. 3. Glossary Glossary Glossary Glossary of of of of Terms Terms Terms Terms Term/Acronym Term/Acronym Term/Acronym Term/Acronym Definition Definition Definition Definition SDK SDK SDK SDK Software Development Kit ADT Android Development Tools 4. 4. 4. 4. Prerequisites Prerequisites Prerequisites Prerequisites Before starting with PhoneGap, knowledge of HTML, CSS and JavaScript is required. Familiarity with the Eclipse platform is an added advantage for those who want to develop PhoneGap application. 5. 5. 5. 5. Set Set Set Set up up up up the the the the development development development development environment environment environment environment 1. Download and install Eclipse 3.4+ from http://www.eclipse.org/downloads/ 2. Download and install Android SDK from http://developer.android.com/sdk/index.html 3. Download/install ADT Plugin form http://developer.android.com/sdk/installing/installing-adt.html
4. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 3 4. Download the latest copy of Cordova (PhoneGap distribution) and extract its contents anywhere in your computer. You will need the contents at the time of developing your project which is described in the next section. Installing/Updating Installing/Updating Installing/Updating Installing/Updating Android Android Android Android SDK SDK SDK SDK packages: packages: packages: packages: After installing Android SDK as explained in step 2, you will need to update and install SDK packages using the Android SDK Manager. When you open the Android SDK Manager, it automatically selects a set of recommended packages. Simply click Install to install the recommended packages. List List List List of of of of recommended recommended recommended recommended packages: packages: packages: packages: 1. SDK Tools: Required. Your new SDK installation already has the latest version. Make sure you keep this up to date. 2. SDK Platform-tools: Required. You must install this package when you install the SDK for the first time. 3. SDK Platform: Required. You must download at least one platform into your environment so you're able to compile your application. Download the latest Android version, plus the lowest version you plan to support (Android 2.2 is recommended for your lowest version). 4. Android Support Library Figure: Android SDK Manager Setup Setup Setup Setup new new new new project project project project
5. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 4 Launch Eclipse, and select menu item New Project. Then select Android Application Project form the wizard. Then specify application name, project name and package name with namespace.
6. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 5
7. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 6 Then, select a graphic.
8. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 7 Then create a blank activity.
9. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 8 Click finish. In the root directory of your project, create two new directories: /libs (Do not create if already created) assets/www Copy cordova-2.0.0.js from your Cordova download earlier to assets/www Copy cordova-2.0.0.jar from your Cordova download earlier to /libs Copy xml folder from your Cordova download earlier to /res Verify that cordova-2.0.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path.... Then, in the Libraries tab, add cordova-2.0.0.jar to the project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.
10. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 9 Edit your project's main Java file found in the src folder in Eclipse: Add import org.apache.cordova.*; Change the class's extend from Activity to DroidGap Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
11. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 10 Right click on AndroidManifest.xml and select Open With > Text Editor Insert the following permissions between the <uses-sdk.../> and <application.../> tags. Create and open a new file named index.html in the assets/www directory. Write the following code:
12. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 11 Deploy Deploy Deploy Deploy to to to to Simulator Simulator Simulator Simulator Right click the project and go to Run As > Android Application Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll need to create it. That was a very simple Hello World application. And there are no native features involved. PhoneGap provides a list of JavaScript API’s which allows your app to interact with the nature device features. Apache Cordova Documentation (http://docs.phonegap.com/en/2.0.0/index.html) provides details guidelines/reference on how to use these API’s, supported platform and quirks (if any). PhoneGap provides API’s for the following features Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage 6 6 6 6. . . . Building Building Building Building app app app app with with with with PhoneGap PhoneGap PhoneGap PhoneGap Build Build Build Build Cloud Cloud Cloud Cloud Service Service Service Service Say goodbye to SDKs, compilers and hardware. Simply write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. You will need a github or an Adobe account for using PhoneGap Build service.
13. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 12 PhoneGap Build provides the flexibility to build cross-platform mobile app in an easy way. 7. 7. 7. 7. Features Features Features Features
14. HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS HFFMIS-SMS B B B BUSINESS USINESS USINESS USINESS R R R REQUIREMENTS EQUIREMENTS EQUIREMENTS EQUIREMENTS D D D DOCUMENT OCUMENT OCUMENT OCUMENT © 2012 ERPandERP. All rights reserved. Page 13 8. 8. 8. 8. PhoneGap PhoneGap PhoneGap PhoneGap app app app app development development development development status status status status Activities Status/remarks PhoneGap installation Completed Sample Application Completed API Exploration 20% Application behavior in device Applications without native feature work fine. Some of the native features do not work out in Samsung Galaxy note. Application behavior in simulator OK Integration with SUP Not started. 9. 9. 9. 9. Conclusion Conclusion Conclusion Conclusion PhoneGap supports the maximum number of devices compared to other similar frameworks, has a good native feature support, but lacks pre-built UI widgets. Development time can take longer if you want a polished-looking app with a native look and feel. Change Change Change Change Log Log Log Log Date Changes Status/remarks