{"id":1026,"date":"2013-12-20T11:20:40","date_gmt":"2013-12-20T05:50:40","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1026"},"modified":"2013-12-20T11:20:40","modified_gmt":"2013-12-20T05:50:40","slug":"phonegap-3-my-initial-experience","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/phonegap-3-my-initial-experience\/","title":{"rendered":"PhoneGap 3 – My initial experience"},"content":{"rendered":"

PhoneGap 3.0 was released<\/a> this year in July, but I hadn’t given it a try till a few days back. \u00a0 \u00a0 I had to start a new PhoneGap project using the latest version (PhoneGap 3.3<\/a>).
\nThere have been significant changes in the way PhoneGap is installed and project created since PhoneGap 3.0. These changes have been very well documented in the official PhoneGap documentation and various blogs. So installing and PhoneGap 3.3 and creating the first project was a smooth experience.<\/p>\n

The problem for me started after the bare minimum project was created. One of the important changes in PhoneGap 3.0 is that every device feature API is a plugin (e.g. contacts, camera etc.) and none of the device APIs are automatically included when you create a project using CLI<\/a>. You have to add then after you created the project. I was aware of this change and added plugins that I needed using CLI. I then expected to have these APIs available in the application (I created iOS and Android Apps). But they were not.<\/p>\n

Beware of sequence of steps<\/h2>\n

If you go to the CLI<\/a>\u00a0docs, you will see the following sequence to create project –<\/p>\n

    \n
  1. Create the App
    \ne.g.\u00a0$ phonegap create hello com.example.hello HelloWorld<\/li>\n
  2. Build the App
    \ne.g. $ phonegap build ios (in the project folder)<\/li>\n
  3. Test the App on an Emulator or Device
    \nYou will see PhoneGap Device ready message. At this point no device APIs are\u00a0<\/span>available<\/li>\n
  4. Add Plugin Features
    \nThis is where you add plugins for features like contacts, camera etc.
    \ne.g.\u00a0$ phonegap local plugin add https:\/\/git-wip-us.apache.org\/repos\/asf\/cordova-plugin-contacts.git<\/li>\n<\/ol>\n

    The docs then go on to explain how to build the application remotely using PhoneGap Build. But if you want to make changes to the application and open the project in XCode, make changes to use device APIs you just added and run the application in the simulator, you find the device APIs are not available.<\/p>\n

    It took me some time to realize that after you add any device API plugin, you will have to build the application again. e.g. $ phonegap build ios
    \nWhen you run this command, PhoneGap creates folder for the OS you have selected (in the above case ios) in the platforms folder and creates platform specific files. So after I added \u00a0new plugins and built the application again, PhoneGap added \u00a0plugin information in the cordova_plugins.js, config.xml and copied plugin file to the platform specific folders.<\/p>\n

    There are multiple www folders<\/h2>\n

    There is another thing that you need to be aware when you build the application. PhoneGap creates www folder under the project folder and also under\u00a0platforms\u00a0folder. For example, in case of iOS, it creates www under platforms\/ios and in the case of Android, it creates it under platforms\/android\/assets. The build command copies content of the www folder under project \u00a0to www folders under platforms.<\/p>\n

    So if you had opened iOS project in XCode and made some changes to html content (in the www folder) and build the application again, all your changes will be overwritten. I think the expectation is that you do not change html content under platforms folders and work with shared html content in the www of project folder.<\/p>\n

    Issues with PG Android projects<\/h2>\n

    I had relatively smoother experience importing iOS projects in XCode and running in the Simulator than with Android projects. Note that PhoneGap creates two projects for Android app, one CordovaLib and the other one is your application specific. You need to import both the projects. Use File->Import->Android->’Existing Android Code into Workspace’ option.<\/p>\n

    I tried a couple of test applications using PhoneGap 3.3 and in all the cases I had issues importing Android projects or running them on device\/emulator.<\/p>\n

    In the first case, after importing the projects (app and CordovaLib), Eclipse could not resolve “org.apache.cordova.*” imports in the application project. These classes are defined in the CordovaLib project, but for some reason reference of this project was not added to the application project. I used the option to fix project path in the Quick Fix (on the import statement where error was displayed) to resolve this issue.<\/p>\n

    When I ran the application, \u00a0I got this error \u00a0– “Error\u00a0initializing\u00a0Cordova: Class not found”.\u00a0Looking at LogCat, I found Java ClassNotFoundException for “org.apache.cordova.device.Device”.<\/p>\n

    I decided to build the Android app again. But before that I wanted to remove all references to the existing app. So I deleted (under the PhoneGap project folder) merges\/android, platforms\/android and plugins\/android.json.<\/p>\n

    I was using the SDK in the latest ADT bundle<\/a>\u00a0to build PhoneGap application ($ phonegap build android). I also had the latest SDK without Eclipse bundle. I changed the path to this SDK and built the application again.<\/p>\n

    Then I rebuilt the application and imported again in ADT. This time all imports were resolved properly and application also ran without any error. I am not sure which of the above actions fixed the issues.<\/p>\n

    So far I have used only Contacts APIs, but I am hopeful that other APIs will also work fine (after I add plugins). I think the changes done in PhoneGap 3.0 are good – \u00a0specifically CLI and the new plugin architecture (code for only those plugins that use are added, unlike earlier versions where all built-in device APIs were added). But some of the changes are so different from the earlier workflow that it is a bit confusing in the beginning.<\/p>\n

    -Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"

    PhoneGap 3.0 was released this year in July, but I hadn’t given it a try till a few days back. \u00a0 \u00a0 I had to start a new PhoneGap project using the latest version (PhoneGap 3.3). There have been significant changes in the way PhoneGap is installed and project created since PhoneGap 3.0. These changes … <\/p>\n

    Continue reading “PhoneGap 3 – My initial experience”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"PhoneGap 3.* - My initial experience http:\/\/wp.me\/p2g9O8-gy","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[78,17,1],"tags":[13,86],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-gy","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1026"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1026"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1026\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1026"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}