MenuBar

Flipkart

Wednesday, August 21, 2013

Creating an Android "Hello Cordova" application using Apache Cordova

Creating the first hello cordova app using cordova can be achieved by just following 4 simple steps, before which ensure that Apache Cordova is installed and Android Virtual Device (AVD) is available in your system else refer Installing Cordova to install.
  1. Create a cordova project.
  2. Add a platform to the project.
  3. Build the project.
  4. Test the app in emulator. 

Step 1: Create a cordova project

Create a new directory in your local drive where you wish to create the cordova projects (Eg., E:\projects\cordova). 
Open the command prompt and navigate to the directory created above and enter the following command,
cordova -d create helloworld 
cordova -d create helloworld
  • -d is used to display the verbose in the command prompt.
  • create is the command used to create a cordova project
  • helloworld is the name of your project.
The image below shows the contents of the cordova project which got created as a result of executing the command above,
cordova project structure











  • www is the folder to look for after creating the cordova project. The www folder is the place where we make changes to the html / javascript / css / images.
  • The contents of the www folder is displayed below, 
 
  • The index.html by default is designed to display "Apache Cordova". Modify the content of the file if required for testing as of now.
  • The config.xml contains important metadata required to generate and distribute the application. 

Step 2: Add a platform to the project

The step 1 above just created the project structure and its contents for development. But before compiling the contents, we need to add the target platform to which the application is bundled.
Now cd into helloworld folder and type the command cordova platform add android to add android as a platform,
cordova platform add android
A new folder "android" gets created inside the platforms folder of your helloworld project. Similarly, you should be able to add other platforms like ios.
android platform













If you wish to remove the android platform, you can do this by executing cordova platform remove android 

Step 3: Build the project

Execute cordova build from the helloworld directory to build the project for all the platforms added earlier.
If you wish to build the project for a specific platform, then add the platform name to the above command,
cordova build android
Once the build is completed, you should be able to find the following apk files inside platforms/android/bin folder,
  1. HelloCordova-debug.apk
  2. HelloCordova-debug-unaligned.apk

Step 4: Test the app in emulator

Run the command cordova emulate android to view the application created in the above steps in an emulator.
Wait for a while after running the command because emulator will take quiet a long time to display.
If you would like to check whats happening, then run cordova -d emulate android 
The emulator will be displayed only if the AVD is created properly. 
android emulator


















Hello Cordova


















The application will be deployed and displayed in the emulator as shown above. This concludes creating a basic Hello Cordova application using command line interface. There are plenty of articles to come related to the development of applications using cordova. Subscribe to Tech Ariv via Subscribe via Email to get the latest updates. 

17 comments :

  1. Unaligned apk is the unsigned apk file. When ever you make use of the emulator to test the app created, cordova will self sign the apk file and deploy it to the emulator. If you need to copy the file to your android device or if you need to add your application to android market, the application needs to be a signed one.

    I will come up with an article soon on signing the apk files.

    ReplyDelete
  2. Thanks for this Tutorial! I have a question, if I build the app like in this Tutorial it gets about 7,5MB which is very big...I managed to find out that cordova puts a lot of rsc into the app and a lot of different splash screens...
    how do I prevent this?

    ReplyDelete
    Replies
    1. Its because of the your_project\www\res folder which is containing icon and screen content images. cordova is copying all these files to the generated apk. Thats the reason, the apk is big. There is an JIRA logged for this (https://issues.apache.org/jira/browse/CB-4387)

      Delete
  3. I am getting following error while running command
    "cordova -d create helloworld"

    Creating a new cordova project with name "HelloCordova" and id "io.cordova.hello
    cordova" at location "C:\Users\vr807168\helloworld"
    Using stock cordova hello-world application.
    Downloading cordova library for www...
    Requesting {"uri":"https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-w
    orld.git;a=snapshot;h=3.1.0;sf=tgz"}...
    Error: connect ECONNREFUSED
    at errnoException (net.js:901:11)
    at Object.afterConnect [as oncomplete] (net.js:892:19)

    Any suggestion how to fix it?

    ReplyDelete
    Replies
    1. Seems like there was an issue connecting to https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-world.git;a=snapshot;h=3.1.0;sf=tgz at the time of creating your project. Probably the site might have been down. Just check if you were able to download the file in your browser by pasting this url in the address bar?

      https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-world.git;a=snapshot;h=3.1.0;sf=tgz

      Delete
  4. Hi, im having a problem on testing the app. cordova -d emulate android gives an error message "Failed to execute android command 'adb services'." thanks by the way, this is somewhat better than the step step by step installation in phonegap site

    ReplyDelete
    Replies
    1. Could you please provide the complete stack trace to get to know more about this issue?

      Delete
  5. i have created one project named myapp using cordova
    it

    C:\myapp>cordova platform add android
    Checking Android requirements...
    { [Error: Cannot find module 'C:\Users\Amit\.cordova\lib\android\cordova\3.2.0\b
    in\lib\check_reqs'] code: 'MODULE_NOT_FOUND' }


    i am not able to resolve it

    ReplyDelete
    Replies
    1. Make sure that the latest version of cordova is installed using node js. Follow setting up the environment using the follwoing link and see if the issue still persists,

      http://www.techariv.in/2013/08/install-apache-cordova-using-command.html

      Delete
  6. Hi when i try to add platforms i get this message "error occurred during creation of an android sub-project" what seems to be the problem?

    ReplyDelete
    Replies
    1. Try to verify the things mentioned in the below link,
      http://stackoverflow.com/questions/19159253/an-error-occurred-during-creation-of-android-sub-project-because-a-path-is-not-f

      Delete
  7. Great article! After the unaligned.apk is generated, can we "sign" it and then publish it to the google play store? I want to skip and avoid using phonegap build service. I have an android developer account already. But are there any other requirements you know of? Thanks in advanced!

    ReplyDelete
    Replies
    1. Yes you can sign your apk file and publish it to google play store.

      Delete
  8. Below syntax is used to create a project with different name. If you won't give the other argument ,Application name will be set as HelloCordova (default) .

    cordova create hello com.example.hello HelloWorld

    Hello is a project folder name

    ReplyDelete
  9. Hi Jayakumar,

    I was wondering if you had any idea why I get the following error when I try to create a new cordova project?

    Downloading cordova library for www...
    Error: getaddrinfo ENOTFOUND
    at errnoException (dns.js:37:11)
    at Object.onanswer [as oncomplete] (dns.js:124:16)

    Regards
    Jason

    ReplyDelete
    Replies
    1. Hi Jason,

      I think you are working behind a firewall that might prevent downloading the cordova library. Please check to see if your firewall is blocking this.

      Thanks,
      Jayakumar J

      Delete