tips:ionic

This is an old revision of the document!


Ionic

sudo apt-get install build-essential
# curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
# sudo apt install nodejs
sudo apt-get install python-pip
sudo pip install nodeenv
LIB=<some-path>
nodeenv --node=0.10.33 $LIB
. $LIB/bin/activate
npm install -g ionic
# npm install -g bower

update

npm update -g ionic cordova

Activate library

. $LIB/bin/activate
NAME=PeperStart
ionic start $NAME blank
cd $NAME
ionic browser add crosswalk #(this command enable also android platform)
. $LIB/bin/activate
npm install -g ionic
 
cd <project>
ionic lib update

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

nodeenv lib
. lib/bin/activate
npm install -g ionic cordova
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

example2 with cordova-plugin-camera-preview.git → GianoDroidIonic

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

ionic cordova plugin add ../cordova-plugin-camera-preview
npm install @ionic-native/camera-preview --save

ionic cordova plugin add cordova.plugins.diagnostic
npm install @ionic-native/diagnostic --save

ionic cordova build android
ionic cordova run android --device

example3 with custom plugin

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

Add Native C++ support

Add opencv support http://wiki.csgalileo.org/projects:giano:android#simpler_mode

In android root project (<project root>/platforms/android) add: CMakeLists.txt

cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_VERBOSE_MAKEFILE on)
find_library(log-lib log)

set(OpenCV_DIR "android-opencv/opencv/src/sdk/native/jni")
find_package(OpenCV REQUIRED)
message(STATUS "OpenCV libraries: ${OpenCV_LIBS}")

and add to existing buid.gradle (android section and dependencies section)

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

dependencies {
    // ...
    compile project(':android-opencv:opencv')
}

from build.gradle of android-opencv comment classpath from dependancies

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
    }

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'

$P is $NAME/platforms/android path

  • Import → “Existing Android Code …” → $NAME/platforms/android and deselect all subprojects
  • Project → Build Path → Configure Build Path
    • Source → Link source → $P/Cordovalib/src with name src-cordovalib
    • Libraries → Add external JAR → $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_app_part.jar
    • Libraries → Add external JAR → $P/Cordovalib/xwalk_core_library/xwalk_core_library_java_library_part.jar

Create zip file named gpio.jar and put into platforms/android/libs

lib
└── armeabi
    └── libgpio.so

build.gradle search inside libs for *jar (see dependancy section)

<video ng-controller="startVideo" controls="" style="width:100%; height:auto" autoplay="false">
   <source src=""></source>
</video>
.controller('startVideo', function($scope) {
  angular.element('video').attr('src','http://...');
});
  • tips/ionic.1501511215.txt.gz
  • Last modified: 2017/07/31 16:26
  • by scipio