Not so long ago I had to discover a new IT page - developing mobile applications for Android using the Cordova platform. I would like to present the experience gained in a format that would ideally make it easier for me to enter this platform, had it caught me at that time. The materials available on the Internet, including on the Cordova website itself, did not solve this problem ideally. It is difficult to say whether this should be attributed to the difficulties of personal perception or the quality of the materials. Therefore, the material does not pretend to be academic, but it can be useful if someone has similar problems. In any case, substantive comments are welcome.
What is Cordova and why is it needed
In short, this is an open source framework that allows you to write a cross-platform application in JavaScript, and all the layers below are designed to ensure the assembly of this code into an application for the target platform, be it Android, iOS, Windows, browser application, or even an exotic platform like Tizen. In this particular case, only Android and browser scenarios will be considered.
More details about "what it is and why it is needed" is much better described on the project website, and specifically here .
For now, we'll just add a picture from the mentioned source:
Installing Cordova on Windows
Installing the framework is pretty straightforward. Node.js must be installed on the PC. He lives on the site https://nodejs.org/en/ , and does not require any skills to install, except the ability to click the mouse.
Node.js Windows npm. Cordova :
npm install -g cordova
, Cordova .
, . Cordova . , , . , Android Android SDK Gradle. , .
- .
, , :
cordova create test_prj
test_prj, . :
cd test_prj
:
cordova platform add browser
cordova platform add android
platforms browser android, .
, :
cordova build
:
cordova run browser
. :
cordova run android
Android- , USB.
, :
, , , . , . , , . , - www , index.html js/index.js .
index.html , , , .
js/index.js , :
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
document.getElementById('deviceready').classList.add('ready');
}
:
, - , . .
, , "DeviceReady". , .
. - "Device is ready". HTML-, onClick. onDeviceReady(). , , :
document.getElementById('deviceready').addEventListener('click',deviceReadyClicked);
, :
function deviceReadyClicked() {
alert('deviceReady clicked');
}
:
, . . index.html :
<button id="testButton">TEST</button>
'click'. onDeviceReady() :
document.getElementById('testButton').addEventListener('click',testButtonClicked);
:
function testButtonClicked() {
console.log("test button clicked");
alert('button clicked');
}
console.log , , :
:
, : Google Chrome :
chrome://inspect/#devices
, /:
- . "inspect" - . , . , . , .
, . , , , JavaScript - , , .
Cordova ?
Cordova - - , "" JavaScript. , "" JavaScript - .
, , . , openFile(), writeFile(), readFile(). JavaScript-, , .
?
" "? , , , . , , . , .
plugman, :
npm install -g plugman
, , :
plugman create --plugin_id "test.mytest" --name cordova-test-mytest --plugin_version 0.1.0
cordova-test-mytest ( , name). :
www/cordova-test-mytest.js - , . coolMethod().
plugin.xml, :
<name>cordova-test-mytest</name>
JS:
<js-module name="cordova-test-mytest" src="www/cordova-test-mytest.js">
<clobbers target="cordova.plugins.cordova-test-mytest" />
</js-module>
clobbers , . coolMethod() :
cordova.plugins.cordova-test-mytest.coolMethod();
, , .
: -, , - - . Android - . :
plugman platform add --platform_name android
:
plugin.xml , XML , . , , .
, XML platform:
<platform name="android">
<config-file parent="/" target="res/xml/config.xml">
<feature name="cordova-test-mytest">
<param name="android-package" value="test.mytest.cordova-test-mytest" />
</feature>
</config-file>
<config-file parent="/" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/cordova-test-mytest.java" target-dir="src/test/mytest/cordova-test-mytest" />
</platform>
, , , cordova-test-mytest.java source-file.
src android, cordova-test-mytest.java.
public class cordova-test-mytest extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
return false;
}
private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
, , " ".
, . , , , package.json . , ? :
plugman createpackagejson .
package.json , , . , package.json , :
cordova plugin add ../cordova-test-mytest
, .
:
cordova.plugins.cordova-test-mytest.coolMethod('just string example', successMtd, errorMtd);
function successMtd(message) {
alert(message);
}
function errorMtd(message) {
alert('Error! '+message);
}
coolMethod() execute() cordova-test-mytest. action, cordova - . cordova-test-mytest.js, if() execute() - .
JSON - args, args.getString(0).
" " coolMethod(), . , . callbackContext , callback-, execute() coolMethod(). , , .
, " " . , , , . . JavaScript- successMtd() errorMtd().
alert "just string example", , coolMethod. coolMethod(), alert, errorMtd() - "Error! Expected one non-empty string argument".
, . , - .
- . - , . , :
cordova plugin remove plugin.name
:
cordova plugin add ../plugin_path
BAT- ( Windows ) - , BAT . , . .
, , , .
- cordova , . , , - . ARM.
( , ) JS. JS , " - ". , , .
, Android - , , .