No hace mucho tuve que descubrir una nueva página de TI: desarrollar aplicaciones móviles para Android utilizando la plataforma Cordova. Me gustaría presentar la experiencia adquirida en un formato que idealmente me facilitaría el ingreso a esta plataforma, si lo obtuve en ese momento. Los materiales disponibles en Internet, incluso en el sitio web de Córdoba, no resolvieron este problema de manera ideal. Es difícil decir si esto debe atribuirse a las dificultades de percepción personal o la calidad de los materiales. Por tanto, el material no pretende ser académico, pero puede ser útil si alguien tiene problemas similares. En cualquier caso, los comentarios sobre el fondo son bienvenidos.
Que es Córdoba y por que se necesita
En resumen, este es un marco de código abierto que le permite escribir una aplicación multiplataforma en JavaScript, y todas las capas a continuación están diseñadas para garantizar el ensamblaje de este código en una aplicación para la plataforma de destino, ya sea Android, iOS, Windows, una aplicación de navegador o incluso una plataforma exótica como Tizen. En este caso particular, solo se considerarán los escenarios de Android y del navegador.
Más detalles sobre "qué es y por qué es necesario" se describen mucho mejor en el sitio web del proyecto, y específicamente aquí .
Por ahora, solo agregaremos una imagen de la fuente mencionada:
Instalación de Cordova en Windows
La instalación del marco es bastante sencilla. Node.js debe estar instalado en la PC. Vive en el sitio https://nodejs.org/en/ , y no requiere ninguna habilidad para instalar, excepto la capacidad de hacer clic con el 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 - , , .