Clever Geek Handbook

コルドバ。クイックスタート

少し前に、新しいITページを発見する必要がありました。Cordovaプラットフォームを使用してAndroid用のモバイルアプリケーションを開発することです。得られた経験を、その時点で入手できれば、理想的にはこのプラットフォームに簡単に入ることができる形式で提示したいと思います。コルドバ自体のウェブサイトを含むインターネットで入手可能な資料は、この問題を理想的に解決しませんでした。これが個人的な知覚の難しさに起因するのか、それとも資料の品質に起因するのかを判断するのは困難です。したがって、この資料は学術的なふりをするものではありませんが、誰かが同様の問題を抱えている場合に役立ちます。いずれにせよ、実質的なコメントを歓迎します。





コルドバとは何ですか、なぜそれが必要なのですか

つまり、これはクロスプラットフォームアプリケーションをJavaScriptで記述できるオープンソースフレームワークであり、以下のすべてのレイヤーは、Android、iOS、Windows、ブラウザーアプリケーション、さらにはTizenのようなエキゾチックなプラットフォームなど、ターゲットプラットフォーム用のアプリケーションにこのコードを確実にアセンブリするように設計されています。この特定のケースでは、Androidとブラウザのシナリオのみが考慮されます。





「それが何であり、なぜそれが必要なのか」についての詳細は、プロジェクトのウェブサイト、特にここではるかによく説明されています。





今のところ、言及されたソースからの写真を追加するだけです：





WindowsへのCordovaのインストール

フレームワークのインストールは非常に簡単です。Node.jsをPCにインストールする必要があります。彼はサイトhttps://nodejs.org/en/に住んでおり、マウスをクリックする機能を除いて、インストールするためのスキルは必要ありません。





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');
}

:





  1. , - , . .





  2. , , "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). :





  1. www/cordova-test-mytest.js - , . coolMethod().





  2. 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







:





  1. plugin.xml , XML , . , , .





  2. , 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.





  1. 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 &amp;&amp; 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".





, . , - .





  1. - . - , . , :





cordova plugin remove plugin.name







:





cordova plugin add ../plugin_path







  1. BAT- ( Windows ) - , BAT . , . .





, , , .





  1. - cordova , . , , - . ARM.





  2. ( , ) JS. JS , " - ". , , .





  3. , Android - , , .











More articles:


All Articles