Sunday, August 25, 2013

Creating a cordova 3 android project on eclipse


In the earlier blog of this blogpost series we have installed the necessary tools to build a cross platform mobile application in java. In this blogpost, we will create a cordova android project and configure it in eclipse.

Earlier Cordova library by default has all the APIs supported by Cordova even if they are not used in your project.  This resulted in unnecessary upgrades; huge file downloads to client etc. The recent release of Cordova addresses these issues.

Now Cordova 3 introduces a new unified project structure and ships with a very limited core API. You need to import the API’s that are required for your applications. So the Cordova library used in your application is light weight and improves performance .Also,the size of the javascript libraries is less, and there won’t be any unwanted upgrades unless the API you are using is changed.

This release provides 2 new tools, Cordova and plugman. Both of these are implemented using NodeJs and so are distributed via npm. The Cordova command line tool unifies all platforms supported by Cordova into a single project structure. And plugman provides automated discovery, installation, and removal of core plugins provided in Cordova itself in previous releases and also custom plugins from git.


 Follow the below steps to create a Cordova-Android project.

Installing NodeJs

  • Install nodejs from the below link, if it is not already installed on your system.

                            http://nodejs.org/
  • Download the installer, and double click on the installer. The installer provides guidance on the next steps to install.
  • Once the installation of nodejs is completed, open command prompt and type the below command to check the installation.

                            npm –version


  • It should show some version number like 1.3.8, if nodejs is installed correctly.
  • If nodejs is installed, run the below command to install cordova.


                   npm install -g cordova
  • Also install the plugman tool running the below command:

        npm install -g plugman.
  • It will take some time to download the required packages and complete the process.
                    Cordova create AndroidTest
           
            Where
            AndroidTest is the name of my project

  • Then change to the working directory to the project directory.

Cd AndroidTest
  • Run the below command in the command prompt

       cordova -d platform add android



  • So I have created a cordova project for Android.

  • After adding the android platform, Run the below command to build the App.

         cordova build
  • Launch the eclipse IDE and select New Project.


  • Select Androidà Android Project from Existing Code in the ‘New project’ window and click on Next.




  • After importing the project, you may see some compilation errors like the below ones.

      error: Error: String types not allowed (at 'configChanges' with value 'orientation|keyboardHidden|keyboard|screenSize|locale').
                   error: No resource identifier found for attribute 'hardwareAccelerated' in package 'android'



  • The following compilation errors are observed intermittently.
             DroidGap cannot be resolved to a type

             Config cannot be resolved
             The import org.apache.cordova cannot be resolved
             The method onCreate(Bundle) of type HelloCordova must override or implement a supertype method

  • Ideally the project should compile without any issues. But looks like, there are some issues with the latest version of cordova.
  • If you don’t see the below compilation errors, just ignore the below steps and continue.
  • If you also observe the compilation errors like me, follow the below work around and vote to prioritize this issue fix to higher.

                      https://issues.apache.org/jira/browse/CB-4660
  • Right click on the project, select properties à Android and select the latest Android API version.

  • This will resolve the following compilation errors

      error: Error: String types not allowed (at 'configChanges' with value 'orientation|keyboardHidden|keyboard|screenSize|locale').
                   error: No resource identifier found for attribute 'hardwareAccelerated' in package 'android'
  • If you project has the below compilation errors, then please follow the below steps to resolve them are skip the below steps and launch the project.
              DroidGap cannot be resolved to a type

             Config cannot be resolved
             The import org.apache.cordova cannot be resolved             
             The method onCreate(Bundle) of type HelloCordova must override or implement a supertype method
  • These errors are seen if cordova-3.0.0.jar is not available in libs folder of the project. If the jar is already available, then these error wont occur.

  • You need to download Cordova Android code from the below link.

                   https://github.com/apache/cordova-android
  • Then run these commands to build cordova-dev.jar.

                  android update project -p . -t android-17
                  ant jar
  • This will create cordova-dev.jar.
  • Alternatively you can download the jar from the below link.


  • Copy cordova-dev.jar to libs folder in the Android project in eclipse and add it to the project classpath.
  • Now all the compilation errors will be resolved, and the project will compile successfully.
  • Now we will create an Android emulator. Run AVD Manager from programs.
  • If there are no Android emulators configured, the AVD Manager screen will look similar.



  • Click on New to set up a new Android emulator.

  • Select the Android version you want to use and provide a name for this Android emulator and click on 'Create AVD'.
  • This will create an Android virtual device.

  • Once a virtual device is added, you can see it in AVD Manager.


  • Now we will launch the Cordova Android project we created from eclipse. 
  • Right click on the project in eclipse--> and select Run as --> Android Application

  • The Android emulator we have created will be launched by eclipse.



  • Then the eclipse installs the application created using cordova in the emulator and launches the application.
  • If the application launches successfully without any issues, then the android emulator should show similar screen.
  • Since we haven't really coded any thing and the application deployed is just a blank project, cordova screen is displayed. We can later modify this with our code.

40 comments:

  1. Then change to the working directory to the project directory.

    What do i really do at this step ?

    ReplyDelete
  2. You need to move to inside the project you created. ex: You created a project 'XYZ', a folder 'XYZ' will be created. You will need to change to that directory before running any further commands. On Windows, it will be -- cd XYZ

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. good article, thanks. I have a better understanding now of how phonegap apps are structured. I think phonegap has now been updated so some of these steps aren't needed.

    ReplyDelete
    Replies
    1. Some of the steps here are to address the issues while creating new Cordova projects.These issues are resolved on the latest versions of Cordova and so may not be required. But the actual steps(excluding the steps which are work around to the issues) remain same.

      Delete
  5. Thanks for barcode scanner implementation.

    I have some little problem in my app when we run our app from login.html after giving the login name and password in text box then scan function created some problem. But when we run directly barcodescanner.html it work fine plz suggest me what we do. thanks

    ReplyDelete
    Replies
    1. I think we need to know what the problem is, to explore a solution. If you still face the problem, you can email me the problem. I can see if I can help.

      Delete
  6. Hi Venkata,

    I am new to phonegap. I am getting an error when I try to add the android platform, i.e. at the command "cordova -d platform add android". Below is the error message:-
    "An error occured while listing Android Targets at C:\Users\..........\lib\android\cordova\3.4.0\bin\lib\check_reqs.js:87:29".
    Also please note that there is a message "cordova library for "android" already exists.No need to download.Continuing ... "


    Please help
    Saugat Chetry

    ReplyDelete
  7. when i use command cordova create AndroidTest then it shows downloading cordova library for www...... it goes on forever with blinking cursor

    ReplyDelete
    Replies
    1. May be the download is not completing. Can you checking if there is proxy or some thing in the network that is blocking the download ?

      Delete
  8. Hi,
    I've installed cordova and open with eclipse. But when I change the code of index.html and run it the app. The changes not appear..always "Device is ready" page appear. Where is the index.html file that I have to change? Could you help me?

    ReplyDelete
    Replies
    1. I was having the same issue and it looks like I resolved it. I'm running an Android app so I had to run the command "Cordova build android" in the project's directory, apparently you need to do that for every individual platform or else the code won't sync or something. All I know is it works!

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Thanks. I could resolve most of my cordova on eclipse setup issues reading your blog.

    ReplyDelete
  11. Hi,

    I have problem to add android platform. Once run 'cordova -d platform add android', it just stop at running command create.bat. Not progress at all. Any reason why ?

    ReplyDelete
  12. Hi,

    I have problem to add android platform. Once run 'cordova -d platform add android', it just stop at running command create.bat. Not progress at all. Any reason why ?

    ReplyDelete
  13. Hi,

    I have problem to add android platform. Once run 'cordova -d platform add android', it just stop at running command create.bat. Not progress at all. Any reason why ?

    ReplyDelete
  14. Thanks for the tutorial, I was needing a step-by-step like this.
    It would be great if you continue the tutorial till we have a fully functional application =)

    ReplyDelete
  15. Thanks for the tutorial, I was needing a step-by-step like this.
    It would be great if you continue the tutorial till we have a fully functional application =)

    ReplyDelete
    Replies
    1. @Daniel Costa,

      I think creating a fully functional app is a very big exercise itself. I don't think it can be done in 1-2 blog posts. It requires a series to create a fully functional app since it involves lot of activities like deciding the app which I want to create, analysis, design, setting up environment, coding etc. But I think it is worth it. I will keep it on my list of things to do. But it will take some time. Thanks for the suggestion.

      Delete
    2. Daniel,

      These steps will make your app fuller: http://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/

      Delete
  16. the jar file is same for all versions of phonegap

    ReplyDelete
    Replies
    1. No, the jar file will change with Cordova version. But this issue seems to be addressed in the latest versions. I haven't seen this issue recently.

      Delete

  17. Hello there, thank you so much for the tutorial. I followed the steps and found an error in the step of adding the platform using this command "cordova -d platform add android".

    Let me show you the type of that error is:
    "C:\Users\Tika Bolu Dede'\AndroidTest>cordova -d platform add android
    Requesting {"uri":"https://git-wip-us.apache.org/repos/asf?p=cordova-android.git
    ;a=snapshot;h=3.5.0;sf=tgz","strictSSL":true}...
    Downloading cordova library for android...
    Downloaded, unzipped and extracted 2198164 byte response.
    Download complete
    Checking if platform "android" passes minimum requirements...
    Creating android project...
    Running command: cmd "/s /c ""C:\Users\Tika Bolu Dede'\.cordova\lib\android\cord
    ova\3.5.0\bin\create.bat" --cli "C:\Users\Tika Bolu Dede'\AndroidTest\platforms\
    android" io.cordova.hellocordova HelloCordova""

    C:\Users\Tika Bolu Dede'\.cordova\lib\android\cordova\3.5.0\bin\node_modules\q\q
    .js:126
    throw e;
    ^
    Error: ERROR : executing command 'ant', make sure you have ant installed and add
    ed to your path.
    at C:\Users\Tika Bolu Dede'\.cordova\lib\android\cordova\3.5.0\bin\lib\check
    _reqs.js:47:27
    at ChildProcess.exithandler (child_process.js:651:7)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:755:16)
    at Process.ChildProcess._handle.onexit (child_process.js:822:5)
    Command finished with error code 8: cmd /s /c ""C:\Users\Tika Bolu Dede'\.cordov
    a\lib\android\cordova\3.5.0\bin\create.bat" --cli "C:\Users\Tika Bolu Dede'\Andr
    oidTest\platforms\android" io.cordova.hellocordova HelloCordova"
    Error: cmd: Command failed with exit code 8
    at ChildProcess.whenDone (C:\Users\Tika Bolu Dede'\AppData\Roaming\npm\node_
    modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:131:23)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:755:16)
    at Process.ChildProcess._handle.onexit (child_process.js:822:5)"

    I don't know then how to solve it -_-
    Do you mind please to help me to the next step so I can Launch the eclipse IDE and select New Project?

    ReplyDelete
    Replies
    1. This error is because Ant is not installed on your system. Download and configure Ant, and then try creating the project, It should work fine.

      I will updating this in a couple of days.

      Delete
  18. I am not able to execute the command cordova -d platform add android . I get the result "
    node is not recognised as external or internal command"
    Thanks in advance

    ReplyDelete
    Replies
    1. You need to install nodejs before using Cordova CLI. The instructions for installing nodejs are in the below blog.
      http://codingsquare.blogspot.in/2014/01/installing-nodejs.html

      Delete
    2. Venkat i already have node js installed . I have created the AndroidTest in same folder as that of node. Than also I am getting the error. Also I have also executed the other commands like plugman using node only!

      Thanks in advance Venkat

      Delete
  19. cordova 2.7 and cordova 3.5 project structure is changed ,where should i import my assets/www files......and config file is in root directory and plugins stucture is also changed

    ReplyDelete
  20. hi kiran, i am getting this error message : current working directory is not a cordova-base project. in node.js command prompt

    ReplyDelete
    Replies
    1. If you create a project AndroidTest running the command

      Cordova create AndroidTest

      Then you need change the directory before running further commands on that project.

      cd AndroidTest

      Delete
    2. It was creating by the name of HelloCordova , and can u please help me how to connect save and retrieve Data from database, how to use Database ................

      Delete
  21. PMI’s Project Management Professional (PMP) ® credential is the most important industry-recognized certification for project managers. Recently I went for a PMP prep course by the training provider mentioned above, the instructor was too good and I passed with relative ease. Looking forwards to apply what I learned in PMP class in my company.

    ReplyDelete
  22. Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!


    JAVA Course in Chennai

    ReplyDelete
  23. Hi Thanks For the tutorial, But am Getting only "connection To Device" message not "Device Is Ready", am added cordova-dev.jar file from dropbox link given above.What is the issue now??

    ReplyDelete
  24. You helped me resolved these errors

    Config cannot be resolved
    The import org.apache.cordova cannot be resolved
    The method onCreate(Bundle) of type HelloCordova must override or implement a supertype method

    ReplyDelete
  25. Cominform is your partner for efficient, custom-tailored business software-solutions. The Cominform team develops on innovative platforms and in line with cutting-edge standards. Here are options for Web Desktop,Web-Desktop, SAML Cordova Plugin , SQL Cordova Plugin , SAML Phonegap Plugin and SQL Phonegap Plugin.

    ReplyDelete
  26. i have a problem i am new in cordova when ever i try to run cordova build it android target 22 error can i change the target of cordova

    ReplyDelete