How to add plugins and Cordova frameworks
I am using this cordova tutorial to try and customize my cordova / phonegap app. I am developing on Windows, I have node.js installed and I am working in the command line node.js. I downloaded and installed:
Andorid SDK from here and added it toPATH
,
downloaded ant and installed it ,
Java JDK downloaded and installed as well .
Mine PATH
contains the following data:%ANT_HOME%\bin;%JAVA_HOME%\bin;C:\Program Files (x86)\Android\android-sdk\tools
Typing android
in cmd opens the Android SDK manager.
Typing java
shows java help for commands.
The input ant -version
shows the ant version (1.9.6).
Typing cordova
shows the cordova help commands.
I have successfully installed cordova with npm install -g cordova
and created my workshop directory. Then I tried to add the platforms and plugins suggested in the tutorial. Here is the command line output for the Android platform and 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 for platforms and plugins:
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 that I have installed show up as installed. The folders workshop\plugins
and are workshop\platforms
also empty.
The tutorial apps work in my browser and phone (put in there using PhoneGap desktop and phone apps), but when I try to follow a more complex tutorial like part 12 of this PhoneGap tutorial where the camera API is required then the camera is not supported in browser (obviously) and on my phone ( Error: Camera API is not supported
).
EDIT
I solved the problem by adding the Android platform and plugins using git; The solution is below. However, if I missed something, please let me know.
It seems like it config.xml
should handle some functionality, but I couldn't figure it out.
All for Cordoba 5.1.1
source to share
I believe the Documentation is out of date which gave me problems. Also, some config.xml and file structure are different when building an application from scratch using Cordova or using PhoneGap or PhoneGap.
First of all, these lines of code don't seem to work when building an app with Cordova:
cordova platforms add android
cordova plugin add org.apache.cordova.device
cordova plugin add cordova-plugin-device
All platforms and plugins must be added via Git . the android platform is here , and the list of plugins is here .
So, for example, to get the standard Cordova application (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
Please note that platforms must be added before plugins. I added whitelist
because I config.xml
wanted and I also added device
and console
because the tutorial explained it to me.
Now, if you type cordova platform ls
and cordova plugin ls
, then a non-empty list will be returned to you.
For completeness, if you want to use your camera now: 1) Copy the following to 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 of creating this function, it's 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 only leave the initialization code in index.js
.
Now use the PhoneGap desktop app and the PhoneGap app to test your app on your phone. I'm pretty easy. I use windows and android for this, i don't know about any other systems.
source to share