Differences

This shows you the differences between two versions of the page.

--- tips:ionic [2017/07/26 15:50] – [Create library] scipio
+++ tips:ionic [2017/08/07 13:54] (current) – scipio
@@ Line 2: / Line 2: @@
 ===== Prerequisites =====
 ==== nodejs (latest) ====
@@ Line 19: / Line 18: @@
 </code>
-===== Project =====
+===== Create library =====
-==== Create library ====
 <code bash>
@@ Line 37: / Line 35: @@
 npm update -g ionic cordova
 </code>
-==== Create project ====
-  * https://devdactic.com/login-ionic-2/
+===== Update libs =====
-  * https://ionicacademy.com/ionic-3-lazy-loading/
-  * https://www.joshmorony.com/an-introduction-to-observables-for-ionic-2/
-Activate library
 <code bash>
 . $LIB/bin/activate
+npm install -g ionic
+cd <project>
+ionic lib update
 </code>
+===== Android =====
+It is important to install native gradle or use gradle shipped with android studio (see PATH below)
+  * ANDROID_HOME=/opt/android-sdk
+  * PATH=/opt/android-sdk/platform-tools:/opt/android-studio/gradle/gradle-3.2/bin/
+example
 <code bash>
-NAME=PeperStart
+nodeenv lib
-ionic start $NAME blank
+. lib/bin/activate
-cd $NAME
+npm install -g ionic cordova
-ionic browser add crosswalk #(this command enable also android platform)
+ionic start test1 blank
+cd test1
+ionic cordova plugin
+cd ..
+git clone https://github.com/Cloudoki/ImageDetectionCordovaPlugin.git
+# create pacakge.json in ImageDetectionCordovaPlugin
+cd test1
+cordova plugin add ../ImageDetectionCordovaPlugin
+ionic cordova platform add android
+ionic cordova build android
+ionic cordova run android --device
 </code>
-==== Update libs ====
+example2 with cordova-plugin-camera-preview.git -> GianoDroidIonic
+<code>
+ionic start MyCameraApp blank --id org.csgalileo.mycameraapp
+git clone --depth=1 https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git
+cd MyCameraApp
+ionic cordova platform add android
-<code bash>
+ionic cordova plugin add ../cordova-plugin-camera-preview
-. $LIB/bin/activate
+npm install @ionic-native/camera-preview --save
-npm install -g ionic
-cd <project>
+ionic cordova plugin add cordova.plugins.diagnostic
-ionic lib update
+npm install @ionic-native/diagnostic --save
+ionic cordova build android
+ionic cordova run android --device
 </code>
-==== Eclipse ====
+==== Add java sources and native C++ support ====
-$P is $NAME/platforms/android path
+Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode
-  * Import -> "Existing Android Code ..." -> $NAME/platforms/android and deselect all subprojects
+In <project root> add:
-  * Project -> Build Path -> Configure Build Path
+CMakeLists.txt
-    * Source -> Link source -> $P/Cordovalib/src with name src-cordovalib
+<file>
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_app_part.jar
+cmake_minimum_required(VERSION 3.4.1)
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_library_part.jar
+set(CMAKE_VERBOSE_MAKEFILE on)
+find_library(log-lib log)
-==== Native lib integration ====
+set(OpenCV_DIR "android-opencv/opencv/src/sdk/native/jni")
+find_package(OpenCV REQUIRED)
+message(STATUS "OpenCV libraries: ${OpenCV_LIBS}")
+</file>
-Create zip file named **gpio.jar** and put into platforms/android/libs
+and add to //build-extras.gradle// (this file is copied with hook <hook src="scripts/gradle.sh" type="after_platform_add" />)
-<code>
+<file>
-lib
+android {
-└── armeabi
+  externalNativeBuild {
-    └── libgpio.so
+    cmake {
-</code>
+      path "../../CMakeLists.txt"
+    }
+  }
+  packagingOptions {
+    // edit also abiFilters and clean project before make apk
+    //exclude 'lib/armeabi-v7a/libopencv_java3.so'
+    exclude 'lib/mips/libopencv_java3.so'
+    exclude 'lib/mips64/libopencv_java3.so'
+    exclude 'lib/armeabi/libopencv_java3.so'
+    exclude 'lib/x86/libopencv_java3.so'
+    exclude 'lib/x86_64/libopencv_java3.so'
+  }
-build.gradle search inside libs for *jar (see dependancy section)
+}
-===== Tips =====
-==== Video fullscreen autoplay ====
+dependencies {
+  compile project(':android-opencv:opencv')
+}
+ext.postBuildExtras = {
+  logger.quiet('adding java sources')
+  android {
+    sourceSets {
+      main.java.srcDirs += '../../src/android/java'
+      main.res.srcDirs += '../../src/android/res'
+    }
+  }
+}
+</file>
+from build.gradle of android-opencv comment classpath from dependancies
+<file>
+dependencies {
+        //classpath 'com.android.tools.build:gradle:2.3.3'
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+</file>
+with <hook src="scripts/gradle.sh" type="after_platform_add" /> apply patch to change settings.gradle in
+<file>
+include ":"
+include ":CordovaLib"
+include ":android-opencv:opencv"
+project(":android-opencv:opencv").projectDir = new File("../../android-opencv/opencv")
+</file>
+with <hook src="scripts/config.xml.py" type="before_compile" /> patch **res/xml/config.xml** to export plugin interface, for example
+<file xml res/xml/config.xml>
+	<feature name="TestPlugin">
+		<param name="android-package" value="org.csgalileo.giano.TestPlugin"></param>
+		<param name="onload" value="true"></param>
+	</feature>
+</file>
+define typescript interface
+<file typescript src/app/test.module.ts>
+import { Injectable } from '@angular/core';
+declare var cordova:any;
+@Injectable()
+export class TestPlugin {
+    public testCall() {
+        cordova.exec(
+                function(data) { console.log("test-plugin getDate="+data); },
+                function(error) { console.log("test-plugin:"+error); },
+                "TestPlugin",
+                "getDate",
+                []);
+    }
+}
+</file>
+===== Android Studio =====
+After project creation via cli (see up) import project (Eclipse, ADT, gradle) from folder <project-root>/platforms/android (choose to update gradle).
+Now it is possible to develop JAVA code in Android Studio but HTML/TS has to be changed in <project-root>/src and synced with 'ionic build'
-<code html>
-<video ng-controller="startVideo" controls="" style="width:100%; height:auto" autoplay="false">
-   <source src=""></source>
-</video>
-</code>
-<code javascript>
-.controller('startVideo', function($scope) {
-  angular.element('video').attr('src','http://...');
-});
-</code>