Posted by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Shazron Abdullah, a software developer in San Francisco who contributes to @apachecordova full-time and hangs out at @Adobe.

The Cordova 3.0.0 CLI Tool

With the release of Cordova 3.0.0, the new Cordova CLI tool is the recommended method for developing new Apache Cordova applications – it allows ease of use in:

  • Adding/removing third-party plugins, including choosing which core plugins you want installed (e.g Camera, Geolocation) since no core plugins are packaged with a newly created application.
  • Adding/removing platform support to your application (e.g adding Android and BlackBerry 10 support in addition to iOS).
  • Launching the application on a platform’s emulator or device.
  • Having a common www folder for all your application assets (HTML, CSS, JavaScript).
  • Running scripts (through hooks) before any command is run (pre-processing CSS, etc.).


To install the Cordova CLI tool, first you will need to install node.js.

After node.js is installed, you will need to install the Cordova CLI tool using npm on the command line:

You can visit the Cordova docs on the CLI to see the full usage and commands.

ThreeDoApp Example

I will walk you through a cross-platform example of a todo-list application deployed on both Android and iOS. The source code for the example is based upon the vanillajs example of TodoMVC. Feel free to download the vanillajs.zip file. This post will not walk you through any core Cordova commands, however, for that you can browse the documentation.

Since we are deploying on iOS and Android, this example assumes you are on a Mac OS X system, and you have both Xcode 4.6.3 and the latest Android SDK installed.

For this example, I will base everything off the Desktop folder. From the command line, type in these lines:

Now you are in your project folder, and all Cordova CLI commands should use this folder as the working directory.

We are going to add the iOS and Android platforms:

Adding the console plugin allows us to grab any output from console.log JavaScript commands for output to the platform logger. Let’s add the console plugin to our application. Note that the last parameter can be a URL or a file path:

Download the vanillajs example, and copy the contents of that folder into the www folder.

You will be working with assets in the www folder mainly, since the assets will be copied properly into the appropriate platform folders. To facilitate this, you will have to run the prepare command (or build):

Now you are ready to run your application. For the purposes of this post and for speed, we will be deploying to the iOS Simulator and an Android device. Make sure you have connected an Android device to your computer (and enabled USB Debugging on it). Run this on the command line:

This should launch the application on the iOS Simulator, as well as deploy it to your Android device. Be sure, though, to run xcode-select –print-path in Terminal.app and make sure it points to Xcode4 (if it points to Xcode5, change that to the older tools since currently ios-sim doesn’t support Xcode5).

User Interface Tweaks

But wait, when you run the application on the two platforms, the UI is not exactly correct:

ios-android-before

You could make tweaks in the base.css file of the www folder, and this will apply it to all of the platforms — for example, you could add media queries to have a responsive layout design.

For the purposes of this post, however, we are going to make platform specific tweaks. This is accomplished by the merges folder. We are going to add an override.css file for all the platforms, and refer to it in www/index.html in a link tag.

The merges folder of a platform will overwrite the corresponding file (in the same hierarchy) in the www folder after it has been copied to the appropriate platform folders.

See this folder structure:

tree

For the Android overrides.css, we are going to increase the font size because it is too small for a Galaxy Nexus screen:

For the iOS overrides.css, we are going to decrease the font size because it is too big for the screen, and we are going to fix the filter positioning in the filter bar:

Now we run the prepare command as before, and launch to the iOS Simulator and Android device again to see what we get:

ios-android-after

The UI is so much better! Iterate, rinse and repeat.

Running the iOS platform in Xcode

Currently the Cordova CLI tool has no way yet to deploy directly to an iOS device, but it is coming in a future version. If you need to deploy to an iOS device, you can launch Xcode like so:

Conclusion

This post has covered most of the commands available to you with the Cordova CLI. As you can see, this tool is extremely powerful, and it will help optimize your cross-platform development workflow.

Feel free to download the ThreeDoApp.zip file.

See below for more PhoneGap/Cordova resources from Safari Books Online.

Safari Books Online has the content you need

PhoneGap will show you how to use the PhoneGap mobile development framework to target multiple mobile platforms: iOS, Android, BlackBerry, and more with a single application. With PhoneGap, you can use existing web development skills, instead of learning a new environment for every platform on the market.
Beginning PhoneGap has been written by keeping in mind the way a beginner would approach the subject matter of PhoneGap. Beginner in this context not only encompasses those who might be beginning PhoneGap developers, but also those who may be extremely experienced and savvy web developers.
Instant PhoneGap Social App Development shows you how to create compelling mobile apps that integrate with social media based on Phonegap. The book will show you how to consume Twitter feeds and also share content to Twitter using Twitter Web Intents.

About the author

shazron Shazron Abdullah is a software developer in San Francisco. He builds Mac + iOS applications and also gets to contribute to @apachecordova full-time. He hangs out at @Adobe.

Tags: Adobe, android, CLI, Cordova, Cordova 3.0.0, iOS, Javascript, PhoneGap,

15 Responses to “Streamline Cross-Platform Development Using Apache Cordova / PhoneGap CLI”

  1. Scott Fortmann-Roe

    Looks great. However, the command:

    cordova emulate ios

    Does not seem to do anything on my Mac (latest XCode, latest OS). It just hangs for a couple of minutes before exiting without any messages or prompts. Opening the created XCode project and running from there works fine.

    • Shazron

      Hi Scott,
      I assume you already have ios-sim installed (the CLI should have printed out an error with instructions on how to install it if you didn’t have it installed).

      I was just troubleshooting this with someone just now. He had Xcode5-DP installed (with its command line tools) and currently ios-sim does not support this. You will have to switch it to the older Xcode 4 command line tools.

      Do a xcode-select --print-path in Terminal.app to check your settings. If it points to Xcode5, change it back to the older Xcode tools.

      • Scott Fortmann-Roe

        Hi Shazron,

        Thanks for the reply, it led me on the right track. It turned out be an issue with ios-sim.

        I had version 1.5 installed. Updating to version 1.7 fixed the issue.

        Cheers,
        Scott

        • Shazron

          Scott, I think I know what’s going on now (maybe). When you upgraded ios-sim (from homebrew I reckon), it built ios-sim again and linked against the newer libs/frameworks with Xcode 5, and that made it work. I assume you had ios-sim already built and installed *before* you installed Xcode 5? (if not my hypothesis is wrong)

          • Scott Fortmann-Roe

            That’s quite possible. To be honest though, I do not recall when I updated XCode or installed ios-sim originally.

            Thanks for all the hard work, Cordova is great!

  2. Alex Maltsev

    Thanks, there was very helpful for me.

    The command
    $ sudo cordova platform add android
    was done OK.
    But I got an error after this command
    $ sudo cordova platform add ios
    [Error: An error occured during creation of ios sub-project. /bin/sh: /Users/user/.cordova/lib/ios/cordova/3.0.0/bin/create: No such file or directory
    ]
    I’m not alone with such problem. Please see – PhoneGap CLI: “An error
    occured during creation of ios sub project” https://groups.google.com/forum/#!msg/phonegap/woWZzT39osg/CpK_rUIKmYAJ

    I’ve Xcode 4.6.3 and xCode’s Command Line tools are installed.
    Thanks in advance for any clue.

    • Shazron

      Hi Alex,
      There is a resolution to this issue:
      https://issues.apache.org/jira/browse/CB-4206

      For some reason (network error or related), the cordova-ios repo was not downloaded and extracted as expected, and partial directories are created. For now, you will have to delete the existing folder:

      rm -rf ~/.cordova/lib/ios/cordova/3.0.0/

      … and add the platform again.

      • Alex Maltsev

        Thanks.
        Terminal replied
        { [Error: ENOENT, no such file or directory '/tmp/plugman-tmp1374481722207/*/plugin.xml']
        errno: 34,
        code: ‘ENOENT’,
        path: ‘/tmp/plugman-tmp1374481722207/*/plugin.xml’,
        syscall: ‘open’ }
        but ios dir was created

  3. lucien

    I come from taiwan, my english is not good enough. Sorry about that.
    see picture, cordova plugin add command is error
    What Am I Supposed To Do?

    http://goo.gl/EEF5l

  4. Alex Maltsev

    Seems to me a bug.
    Run
    $ sudo cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
    Got error
    { [Error: ENOENT, no such file or directory '/tmp/plugman-tmp1374508095621/*/plugin.xml']
    errno: 34,
    code: ‘ENOENT’,
    path: ‘/tmp/plugman-tmp1374508095621/*/plugin.xml’,
    syscall: ‘open’ }
    but actually plugin’s folder in project dir was created

    $ sudo cordova plugins ls
    gives
    [ 'org.apache.cordova.core.file-transfer']
    And seems plugin is installed
    But then is not possible delete this plugin via CLI
    $ sudo cordova plugin remove org.apache.cordova.core.file-transfer
    I got
    { [Error: ENOENT, no such file or directory '/tmp/plugman-tmp1374508095621/*/plugin.xml']
    errno: 34,
    code: ‘ENOENT’,
    path: ‘/tmp/plugman-tmp1374508095621/*/plugin.xml’,
    syscall: ‘open’ }

    And there was not added

    in config.xml

  5. Laurie

    Thanks Shazron for this post. It helps a lot especially for students like me. May i ask a question, if its permitted? I am helping my school build a cross browser rss listing that links to students projects. I am using Phonegap 3.0 and the links open in InAppBrowser without a toolbar/done button. There is no way for me to use the recommended ‘location=yes’. Is there anyway to have a back/done button as it was in ChildBrowser. I have searched far and near over the web and there seems to be no real answer besides tagging the anchor with onclick window.open, location yes…. As an expert on this, could you spare a moment and point me in the right direction? many many thanks and greetings.

  6. Mobile Apps Development For Android Platform

    Hey Shazron ! You have really a good knowledge of cross platform mobile app development and here whatever you have mentioned step by step that is very nice.

  7. Jules

    Hi, just wondering if you’ve had any luck or experience getting SMSComposer working with Phonegap 3.0 and Xcode 5.0. I keep getting errors stating that SMSComposer does not support Automatic Reference Counting. Do you know of a git fork for the SMSComposer that has been updated to support ARC? Any help would be greatly appreciated.