How to add cordova plugins and platforms

Question

I am using this cordova tutorial to try and set up a cordova/phonegap app. I am developing on Windows, I have node.js installed and I am working inside the Node.js command prompt. I downloaded and installed:
Andorid SDK from here and have added it to PATH,
downloaded ant and installed it,
Java JDK is also downloaded and installed.

My PATH contains these:
%ANT_HOME%\bin;%JAVA_HOME%\bin;C:\Program Files (x86)\Android\android-sdk\tools

Typing android into cmd opens up the Android SDK manager.
Typing java shows java help on commands.
Typing ant -version shows the ant version (1.9.6).
Typing cordova shows cordova help commands.

I successfully installed cordova with npm install -g cordova, and created my workshop directory. Then I tried adding the platforms and plugins suggested by the tutorial. Here is the command prompt output for just the android platform and the device plugin:

C:\Users\Roman\All\Work\CriticalID\again>cordova platforms add android
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-4.0.2.tgz

C:\Users\Roman\All\Work\CriticalID\workshop>cordova plugin add cordova-plugin-device
Fetching plugin "cordova-plugin-device" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-device
npm http 304 https://registry.npmjs.org/cordova-plugin-device
npm http GET https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.1.tgz
npm http 200 https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.1.tgz

Checking if the platforms and plugins are installed:

C:\Users\Roman\All\Work\CriticalID\workshop>cordova platforms ls
Installed platforms:
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, windows, windows8, wp8

C:\Users\Roman\All\Work\CriticalID\workshop>cordova plugin ls
No plugins added. Use `cordova plugin add <plugin>`.

C:\Users\Roman\All\Work\CriticalID\workshop>cordova build
No platforms added to this project. Please use `cordova platform add <platform>`.

None of the platforms or plugins I installed are showing as installed. Both the workshop\plugins and workshop\platforms folders are empty too.

The tutorial apps work in my browser and phone (put there by the PhoneGap desktop and phone apps), but when i try a more complicated tutorial, like part 12 from this PhoneGap tutorial where the camera API is required, then camera is unsupported in the browser (obviously) and on my phone (Error: Camera API is not supported).

EDIT

I have solved the problem by adding the Android platform and plugins using git; The solution to that is below. However, if I have missed something, please let me know.
It seems that config.xml is supposed to handle some functionality, but I've not been able to figure it out.
Everything for Cordova 5.1.1

Answer 1

I believe the Documentation is old, which has been giving me problems. Additionally, some config.xml and file structure is different when creating the app from scratch with Cordova, or via PhoneGap or PhoneGap build.

First and foremost, these lines of code do not seem to work when building the app with Cordova:

cordova platforms add android
cordova plugin add org.apache.cordova.device
cordova plugin add cordova-plugin-device

All platforms and plugins need to be added via Git. Android platform here, and a list of plugins here.

So, for example to get the default Cordova app, (for instillation, see question above) copy and paste the following into CMD:

cd into your working directory
cordova create workshop com.name.workshop Workshop
cd workshop
cordova platform add https://github.com/apache/cordova-android.git
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-whitelist.git
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

Note that the platforms have to be added before the plugins. I added whitelist because config.xml wanted to, and I also added device and console because the tutorial told me to.

Now, if you type cordova platform ls and cordova plugin ls, then you should have a non empty list returned to you.

For completeness sake, if you would now like to use your camera: 1) Copy the following into index.html:

<img id='image' src='' style="position:absolute;margin:5px;left:0px;top:0px;"/>
<button id="test_camera">Camera Test</button>
<script type="text/javascript" src="js/test.js"></script>

2) Create a new script test.js, and paste the following into it. I don't like the convoluted way the tutorials create this function, this is way more straight forward:

var changePicture = function() {
  if (!navigator.camera) {
      alert("Camera API not supported", "Error");
      return;
  }
  var options =   {   quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Album
                      encodingType: 0     // 0=JPG 1=PNG
                  };

  navigator.camera.getPicture(
      function(imgData) {
          $('#image').attr('src', "data:image/jpeg;base64," + imgData);
      },
      function() {
          alert('Error taking picture', 'Error');
      },
      options);

  return false;
};

$("#test_camera").on('click', function() {
    changePicture()
})

You can leave the initialisation code in index.js alone.

Now use the PhoneGap desktop app and the PhoneGap phone app to test your application on your phone. I'ts pretty easy. I'm using windows and Android for this, I don't know about any other systems.