diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..15161ff --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ + +sample-ionic-capacitor-vuejs/libs/ios/MobileImaging.framework/MobileImaging +sample-ionic-capacitor-vuejs/libs/ios/MobileImaging.framework/Info.plist +sample-ionic-capacitor-vuejs/package-lock.json diff --git a/sample-ionic-capacitor-vuejs/.browserslistrc b/sample-ionic-capacitor-vuejs/.browserslistrc new file mode 100644 index 0000000..214388f --- /dev/null +++ b/sample-ionic-capacitor-vuejs/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/sample-ionic-capacitor-vuejs/.editorconfig b/sample-ionic-capacitor-vuejs/.editorconfig new file mode 100644 index 0000000..7053c49 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/.editorconfig @@ -0,0 +1,5 @@ +[*.{js,jsx,ts,tsx,vue}] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/sample-ionic-capacitor-vuejs/.eslintrc.js b/sample-ionic-capacitor-vuejs/.eslintrc.js new file mode 100644 index 0000000..5bf5bfa --- /dev/null +++ b/sample-ionic-capacitor-vuejs/.eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + root: true, + env: { + node: true + }, + extends: [ + 'plugin:vue/essential', + '@vue/standard' + ], + parserOptions: { + ecmaVersion: 2020 + }, + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' + } +} diff --git a/sample-ionic-capacitor-vuejs/.gitignore b/sample-ionic-capacitor-vuejs/.gitignore new file mode 100644 index 0000000..d86d636 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/.gitignore @@ -0,0 +1,27 @@ +.DS_Store +node_modules +/dist +/libs +/ios +/assets +/android +/.gradle + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/sample-ionic-capacitor-vuejs/README.md b/sample-ionic-capacitor-vuejs/README.md new file mode 100644 index 0000000..b4dda79 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/README.md @@ -0,0 +1,237 @@ +# How to add ABBYY Mobile Capture SDK to your Ionic Capacitor - VueJS app + +To start developing an Ionic-based app with *Capacitor instead of Cordova* using ABBYY Mobile Capture SDK features, you need to add ABBYY Mobile Capture SDK Cordova Plugin and the ionic native ABBBYY RTR SDK, then add target platforms and the Cordova plugin to your project, and thereafter copy the ABBYY Mobile Capture SDK assets and native libraries for Android and iOS, as described below. + +## Adding Cordova Plugin +Add the plugin to your project from npm. It is recommended to add the 1.0.16 [cordova-plugin-abbyy-rtr-sdk](https://www.npmjs.com/package/cordova-plugin-abbyy-rtr-sdk) version, as it supports all up-to-date changes. + +`npm install cordova-plugin-abbyy-rtr-sdk@1.0.16` + +Add the ionic-native plugin to your project from npm. + +`npm install @ionic-native/abbyy-rtr` + +Run the next command to apply changes: + +`npx cap sync` + +## Projects set-up + +### ABBYY MobileCapture environment setup +1. Request ABBYY Mobile Capture trial version on the [ABBYY website](https://www.abbyy.com/mobile-capture-sdk/#request-demo) and add it to your project: + +* Copy iOS `assets` directory to the project into `../assets` folder +* Copy your license into `../assets` with MobileCapture.License name +* Copy Android `libs` directory to the project into `../libs/android` folder +* Copy iOS `libs` directory to the project into `../libs/ios` folder + +Your folder / project strucuture should look like the following: + +``` +... +- assets +- libs + - android + - ios +- node_modules +- ios (if already added this platform `npx cap add ios`) +- android (if already added this platform `npx cap add android`) +- src +... +``` + + + +2. Proceed setup depending on the platform: + +#### Android setup + +Edit the **android/build.gradle**: + +``` +allprojects { + repositories { + flatDir { + // Search path for Mobile Capture libs + dirs '../../libs/android' + } + google() + jcenter() + } +} +``` + +Add the following code to the same gradle file to fix Ionic and Cordova Java version conflict: + +``` +subprojects { + afterEvaluate { + android { + compileOptions { + sourceCompatibility 1.8 + targetCompatibility 1.8 + } + } + + } +} +``` + +Edit the **android/app/build.gradle**: + +``` +android { + ... + sourceSets { + main { + // Mobile Capture assets + assets.srcDirs += ['../../assets'] + } + } +} +Add the libs to the application in the same gradle file: +repositories { + flatDir{ + // Search path for Mobile Capture libs + dirs '../../libs/android' + } +} +``` + +Set minimum SDK version to '21' in the **android/variables.gradle**. + +#### iOS setup + +For easier setup open XCode to follow the instructions below. + +`npx cap open ios` + +Add to the **ios/App/Podfile** file the paths to the lib files: + +``` +post_install do |installer| + installer.pods_project.targets.each do |target| + target.build_configurations.each do |config| + + ... + + # Settings to use Mobile Capture SDK. + config.build_settings['ENABLE_BITCODE'] = "NO" + config.build_settings['FRAMEWORK_SEARCH_PATHS'] = "$(inherited) ../../../libs/ios" + end + end +end +``` + +To add the license file, the resource files and set up the copying rules, in **Build Phases** add one more Run Script phase. The **copy_assets.py** script, added to the phase, will automatically copy all resource files to corresponding destinations and add necessary dictionaries. +For this select your project (not the Pods project) and select your App in **Target** group and click **Build Phases** in the tab menu. There you can add a **New Runscript** by clicking the **+**-Icon. + +``` +python "${SRCROOT}/../../assets/copy_assets.py" +cp "${SRCROOT}/../../assets/MobileCapture.License" "${TARGET_BUILD_DIR}/${WRAPPER_NAME}/" +``` + +In **Build Phases**, add a new **Run Script** phase where XCode should run the **copy_frameworks.sh** script that removes the frameworks for the non-active CPU architectures (the complete list depends on the project settings), and sign the resulting framework. This is a required step before uploading your application to App Store. + +``` +/bin/sh "${SRCROOT}/../../libs/ios/copy_frameworks.sh" +``` + +Select your project in the **Target** group and open the **Build Settings** tab. In the **Search Paths** section add to the **Framework Search Paths** the following path: +``` +"../../libs/ios" +``` + +On the **Build Settings** tab set **Enable Bitcode** option to **No**. + +In the **info.plist** file add permission for working with camera and gallery **if necessary**. + +Apply the settings: + +``` +cd ios/App +pod install +``` + +Afterwards you can build your application, see instruction below. +If you have any path errors try to delete the **Derived Data** Folder and change the paths. + +**Important!** A certain folder structure is required for the setup. Make sure to change the paths if your folder structure differs from the following one: + +``` +assets/ + bcr/ + ... + dictionaries/ + ... + ... + MobileCapture.License +libs/ + android/ + abbyy-rtr-sdk-1.0.aar + abbyy-ui-1.0.aar + ios/ + AbbyyRtrSDK.framework + AbbyyUI.framework + ... +[APPLICATION_FOLDER]/ + ... +``` + +## Code sample + +``` +... +import { AbbyyRTR } from '@ionic-native/abbyy-rtr' +... + +methods: { + startTextExtraction () { + AbbyyRTR.startTextCapture({ + isFlashlightVisible: true, + isStopButtonVisible: true, + stopWhenStable: true, + recognitionLanguages: ['English', 'German'], + areaOfInterest: '0.9 0.1' + }).then(res => { + console.log('detected: ' + JSON.stringify(res)) + }).catch(err => { + console.log('error has occured') + console.log(JSON.stringify(err)) + if (err === undefined) { + console.error('undefined error?!') + } + }) + } + } +``` + +## How to run the sample from distributive + +1. Request ABBYY Mobile Capture trial version on the [ABBYY website](https://www.abbyy.com/mobile-capture-sdk/#request-demo) and add it to your project: + +* Copy iOS `assets` directory to the project into `../assets` folder +* Copy your license into `../assets` with MobileCapture.License name +* Copy Android `libs` directory to the project into `../libs/android` folder +* Copy iOS `libs` directory to the project into `../libs/ios` folder + +2. Add the plugin and follow the instructions above, apply changes: + +``` +npm install +npm run build +npx cap sync +``` + +3. To run application do the following: +* Android: + * **From console:** + Execute `npx cap open android` from the sample root + * **From Android Studio:** + Click `Run app` button +* iOS: + * **From console:** + Execute `npx cap open ios` from the sample root + * **From Xcode:** + Click `Run` button + diff --git a/sample-ionic-capacitor-vuejs/capacitor.config.json b/sample-ionic-capacitor-vuejs/capacitor.config.json new file mode 100644 index 0000000..edc9bed --- /dev/null +++ b/sample-ionic-capacitor-vuejs/capacitor.config.json @@ -0,0 +1,13 @@ +{ + "appId": "io.geilehner.abbyy", + "appName": "sample-ionic-capacitor-vuejs", + "bundledWebRuntime": false, + "npmClient": "npm", + "webDir": "dist", + "plugins": { + "SplashScreen": { + "launchShowDuration": 0 + } + }, + "cordova": {} +} diff --git a/sample-ionic-capacitor-vuejs/package.json b/sample-ionic-capacitor-vuejs/package.json new file mode 100644 index 0000000..8cdfabe --- /dev/null +++ b/sample-ionic-capacitor-vuejs/package.json @@ -0,0 +1,38 @@ +{ + "name": "sample-ionic-capacitor-vuejs", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "@capacitor/android": "^2.3.0", + "@capacitor/cli": "^2.3.0", + "@capacitor/core": "^2.3.0", + "@capacitor/ios": "^2.3.0", + "@ionic-native/abbyy-rtr": "^5.27.0", + "@ionic-native/core": "^5.27.0", + "@ionic/core": "^5.3.0", + "@ionic/vue": "0.0.9", + "cordova-plugin-abbyy-rtr-sdk": "^1.0.16", + "ionicons": "^4.5.9-1", + "vue": "^2.6.11", + "vue-router": "^3.2.0" + }, + "devDependencies": { + "@vue/cli-plugin-eslint": "^4.4.0", + "@vue/cli-service": "^4.4.0", + "@vue/eslint-config-standard": "^5.1.2", + "eslint": "^6.7.2", + "eslint-plugin-import": "^2.20.2", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-standard": "^4.0.0", + "eslint-plugin-vue": "^6.2.2", + "sass": "^1.26.5", + "sass-loader": "^8.0.2", + "vue-template-compiler": "^2.6.11" + } +} diff --git a/sample-ionic-capacitor-vuejs/public/favicon.ico b/sample-ionic-capacitor-vuejs/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/sample-ionic-capacitor-vuejs/public/favicon.ico differ diff --git a/sample-ionic-capacitor-vuejs/public/index.html b/sample-ionic-capacitor-vuejs/public/index.html new file mode 100644 index 0000000..4123528 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git a/sample-ionic-capacitor-vuejs/src/App.vue b/sample-ionic-capacitor-vuejs/src/App.vue new file mode 100644 index 0000000..deefd22 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/src/App.vue @@ -0,0 +1,30 @@ + + + diff --git a/sample-ionic-capacitor-vuejs/src/assets/logo.png b/sample-ionic-capacitor-vuejs/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/sample-ionic-capacitor-vuejs/src/assets/logo.png differ diff --git a/sample-ionic-capacitor-vuejs/src/main.js b/sample-ionic-capacitor-vuejs/src/main.js new file mode 100644 index 0000000..57aeeed --- /dev/null +++ b/sample-ionic-capacitor-vuejs/src/main.js @@ -0,0 +1,14 @@ +import Vue from 'vue' +import App from './App.vue' +import router from './router' +import Ionic from '@ionic/vue' +import '@ionic/core/css/ionic.bundle.css' + +Vue.use(Ionic) + +Vue.config.productionTip = false + +new Vue({ + router, + render: function (h) { return h(App) } +}).$mount('#app') diff --git a/sample-ionic-capacitor-vuejs/src/router/index.js b/sample-ionic-capacitor-vuejs/src/router/index.js new file mode 100644 index 0000000..2044575 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/src/router/index.js @@ -0,0 +1,16 @@ +import Vue from 'vue' +import { IonicVueRouter } from '@ionic/vue' +Vue.use(IonicVueRouter) + +const router = new IonicVueRouter({ + routes: [ + { path: '/', redirect: '/home' }, + { + path: '/home', + name: 'home', + component: () => + import(/* webpackChunkName: "home" */ '../views/Home.vue') + } + ] +}) +export default router diff --git a/sample-ionic-capacitor-vuejs/src/views/Home.vue b/sample-ionic-capacitor-vuejs/src/views/Home.vue new file mode 100644 index 0000000..01af2b2 --- /dev/null +++ b/sample-ionic-capacitor-vuejs/src/views/Home.vue @@ -0,0 +1,51 @@ + + + diff --git a/sample-ionic/README.md b/sample-ionic/README.md index 659368c..d19d9b5 100644 --- a/sample-ionic/README.md +++ b/sample-ionic/README.md @@ -32,7 +32,7 @@ allprojects { repositories { flatDir { // Search path for Mobile Capture libs - dirs '../../../libs/android' + dirs '../../libs/android' } google() jcenter() @@ -64,7 +64,7 @@ android { sourceSets { main { // Mobile Capture assets - assets.srcDirs += ['../../../assets'] + assets.srcDirs += ['../../assets'] } } } @@ -92,7 +92,7 @@ post_install do |installer| # Settings to use Mobile Capture SDK. config.build_settings['ENABLE_BITCODE'] = "NO" - config.build_settings['FRAMEWORK_SEARCH_PATHS'] = "$(inherited) ../../../../libs/ios" + config.build_settings['FRAMEWORK_SEARCH_PATHS'] = "$(inherited) ../../../libs/ios" end end end @@ -101,22 +101,22 @@ end To add the license file, the resource files and set up the copying rules, in **Build Phases** add one more Run Script phase. The **copy_assets.py** script, added to the phase, will automatically copy all resource files to corresponding destinations and add necessary dictionaries. ``` -python "${SRCROOT}/../../../assets/copy_assets.py" -cp ../../../assets/MobileCapture.License" $TARGET_BUILD_DIR/$WRAPPER_NAME/" +python "${SRCROOT}/../../assets/copy_assets.py" +cp "${SRCROOT}/../../assets/MobileCapture.License" "${TARGET_BUILD_DIR}/${WRAPPER_NAME}/" ``` In **Build Phases**, add a new **Run Script** phase. Run the **copy_frameworks.sh** script that removes the frameworks for the non-active CPU architectures (the complete list depends on the project settings), and sign the resulting framework. This is a required step before uploading your application to App Store. ``` -/bin/sh "${SRCROOT}/../../../libs/ios/copy_frameworks.sh" +/bin/sh "${SRCROOT}/../../libs/ios/copy_frameworks.sh" ``` Select your project in the **Target** group and open the **Build Settings** tab. In the **Search Paths** section add to the **Framework Search Paths** the following path: ``` -../../../libs/ios +"../../libs/ios" ``` -On the **Build Options** tab set **Enable Bitcode** option to **No**. +On the **Build Settings** tab set **Enable Bitcode** option to **No**. In the **info.plist** file add permission for working with camera and gallery if necessary.