tips:ionic

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
tips:ionic [2017/07/31 15:44] – [Android] scipiotips:ionic [2017/08/07 13:54] (current) – scipio
Line 2: Line 2:
  
 ===== Prerequisites ===== ===== Prerequisites =====
- 
  
 ==== nodejs (latest) ==== ==== nodejs (latest) ====
Line 19: Line 18:
 </code> </code>
  
-===== Project ===== +===== Create library =====
-==== Create library ====+
  
 <code bash> <code bash>
Line 37: Line 35:
 npm update -g ionic cordova npm update -g ionic cordova
 </code> </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 +
-</code> +
- +
-<code bash> +
-NAME=PeperStart +
-ionic start $NAME blank +
-cd $NAME +
-ionic browser add crosswalk #(this command enable also android platform) +
-</code> +
- +
-==== Update libs ====+
  
 <code bash> <code bash>
Line 65: Line 46:
 </code> </code>
  
-==== Android ====+===== Android =====
  
 It is important to install native gradle or use gradle shipped with android studio (see PATH below) It is important to install native gradle or use gradle shipped with android studio (see PATH below)
Line 108: Line 89:
 </code> </code>
  
-example3 with custom plugin +==== Add java sources and native C++ support ====
-<code> +
-ionic start GianoDroidHybrid blank --id org.csgalileo.gianodroidhybrid +
-cd GianoDroidHybrid +
-rm -fR .git +
-ionic cordova platform add android +
-ionic cordova plugin add ../cordova-plugin-giano +
- +
-</code> +
- +
-=== Add Native C++ support ===+
  
 Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode
  
-In android root project (<project root>/platforms/android) add:+In <project root> add:
 CMakeLists.txt CMakeLists.txt
 <file> <file>
Line 134: Line 105:
 </file> </file>
  
-and add to existing buid.gradle (android section) +and add to //build-extras.gradle// (this file is copied with hook <hook src="scripts/gradle.sh" type="after_platform_add" />)
 <file> <file>
 android { android {
 +  externalNativeBuild {
 +    cmake {
 +      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'
 +  }
  
-   // ... +}
  
-   externalNativeBuild { +dependencies { 
-        cmake { +  compile project(':android-opencv:opencv') 
-            path "CMakeLists.txt" +} 
-        } + 
-    } +ext.postBuildExtras = { 
-    packagingOptions { +  logger.quiet('adding java sources') 
-        // edit also abiFilters and clean project before make apk +  android { 
-        //exclude 'lib/armeabi-v7a/libopencv_java3.so' +    sourceSets { 
-        exclude 'lib/mips/libopencv_java3.so' +      main.java.srcDirs += '../../src/android/java' 
-        exclude 'lib/mips64/libopencv_java3.so' +      main.res.srcDirs += '../../src/android/res'
-        exclude 'lib/armeabi/libopencv_java3.so' +
-        exclude 'lib/x86/libopencv_java3.so' +
-        exclude 'lib/x86_64/libopencv_java3.so'+
     }     }
 +  }
 } }
 </file> </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).+from build.gradle of android-opencv comment classpath from dependancies 
 +<file> 
 +dependencies { 
 +        //classpath 'com.android.tools.build:gradle:2.3.3'
  
-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' +        // NOTE: Do not place your application dependencies here; they belong 
-==== Eclipse ====+        // in the individual module build.gradle files 
 +    } 
 +</file>
  
-$P is $NAME/platforms/android path+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>
  
-  * Import -> "Existing Android Code ..." -> $NAME/platforms/android and deselect all subprojects +with <hook src="scripts/config.xml.py" type="before_compile" /> patch **res/xml/config.xml** to export plugin interface, for example 
-  * Project -> Build Path -> Configure Build Path +<file xml res/xml/config.xml> 
-    * Source -> Link source -> $P/Cordovalib/src with name src-cordovalib + <feature name="TestPlugin"> 
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_app_part.jar + <param name="android-package" value="org.csgalileo.giano.TestPlugin"></param> 
-    * Libraries -> Add external JAR -> $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_library_part.jar+ <param name="onload" value="true"></param> 
 + </feature> 
 +</file>
  
-==== Native lib integration ====+define typescript interface 
 +<file typescript src/app/test.module.ts> 
 +import { Injectable } from '@angular/core';
  
-Create zip file named **gpio.jar** and put into platforms/android/libs +declare var cordova:any;
-<code> +
-lib +
-└── armeabi +
-    └── libgpio.so +
-</code>+
  
-build.gradle search inside libs for *jar (see dependancy section) +@Injectable() 
-===== Tips =====+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>
  
-==== Video fullscreen autoplay ====+===== 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> 
  • tips/ionic.1501508648.txt.gz
  • Last modified: 2017/07/31 15:44
  • by scipio