Não faz muito tempo, tive que descobrir uma nova página de TI - desenvolvendo aplicativos móveis para Android usando a plataforma Cordova. Gostaria de apresentar a experiência adquirida em um formato que idealmente facilitaria para mim a entrada nesta plataforma, se eu a tivesse naquela época. Os materiais disponíveis na Internet, inclusive no próprio site do Cordova, não resolveram esse problema de maneira ideal. É difícil dizer se isso deve ser atribuído às dificuldades de percepção pessoal ou à qualidade dos materiais. Portanto, o material não pretende ser acadêmico, mas pode ser útil se alguém tiver problemas semelhantes. Em qualquer caso, comentários substantivos são bem-vindos.
O que é Cordova e por que é necessário
Resumindo, esta é uma estrutura de código aberto que permite escrever um aplicativo de plataforma cruzada em JavaScript, e todas as camadas abaixo são projetadas para garantir a montagem desse código em um aplicativo para a plataforma de destino, seja Android, iOS, Windows, aplicativo de navegador ou até mesmo uma plataforma exótica como o Tizen. Nesse caso específico, apenas os cenários do Android e do navegador serão considerados.
Mais detalhes sobre "o que é e por que é necessário" estão muito melhor descritos no site do projeto e, especificamente, aqui .
Por enquanto, vamos apenas adicionar uma imagem da fonte mencionada:
Instalando Cordova no Windows
Instalar o framework é bastante simples. O Node.js deve ser instalado no PC. Ele mora no site https://nodejs.org/en/ e não requer nenhuma habilidade para instalar, exceto a capacidade de clicar com o 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 - , , .