Belum lama ini saya harus menemukan halaman TI baru - mengembangkan aplikasi seluler untuk Android menggunakan platform Cordova. Saya ingin menyajikan pengalaman yang diperoleh dalam format yang idealnya akan memudahkan saya untuk memasuki platform ini, seandainya saya tertarik pada saat itu. Materi yang tersedia di Internet, termasuk di situs Cordova itu sendiri, tidak menyelesaikan masalah ini secara ideal. Sulit untuk mengatakan apakah ini harus dikaitkan dengan kesulitan persepsi pribadi atau kualitas materi. Oleh karena itu, materi yang diklaim tidak bersifat akademis, tetapi dapat bermanfaat jika seseorang memiliki permasalahan yang serupa. Bagaimanapun, komentar substantif dipersilakan.
Apa itu Cordova dan mengapa itu dibutuhkan
Singkatnya, ini adalah kerangka kerja sumber terbuka yang memungkinkan Anda untuk menulis aplikasi lintas platform dalam JavaScript, dan semua lapisan di bawah dirancang untuk memastikan perakitan kode ini menjadi aplikasi untuk platform target, baik itu Android, iOS, Windows, aplikasi browser, atau bahkan platform eksotis seperti Tizen. Dalam kasus khusus ini, hanya skenario Android dan browser yang akan dipertimbangkan.
Rincian lebih lanjut tentang "apa itu dan mengapa itu dibutuhkan" lebih baik dijelaskan di situs proyek, dan secara khusus di sini .
Untuk saat ini, kami hanya akan menambahkan gambar dari sumber yang disebutkan:
Menginstal Cordova di Windows
Memasang kerangka kerja cukup mudah. Node.js harus diinstal di PC. Dia tinggal di situs https://nodejs.org/en/ , dan tidak membutuhkan keahlian apa pun untuk menginstal, kecuali kemampuan untuk mengklik 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 - , , .