221 cordova capacitor react integration #224

NathanFortyTwo · 2024-10-17T11:51:17Z

Address issues #223 #222 and #221

Adds code to be able to use ScannerCompatActivity, and enioka-scan services, from an already existing application in cordova, capacitor and react-native using npm packages

Cordova and Capacitor use compatible plugin system so only one package is needed

DaSpood · 2024-10-17T12:13:45Z

npm_integration_frameworks/cordova-capacitor/package.json

+      "enioka-scan",
+      "scanner",
+      "integration-layer",
+      "capacitor"


Suggested change

"capacitor"

"capacitor",

"cordova",

"plugin"

DaSpood · 2024-10-17T12:14:24Z

npm_integration_frameworks/cordova-capacitor/package.json

+      "capacitor"
+    ],
+    "author": "enioka",
+    "license": "MIT"


Suggested change

"license": "MIT"

"license": "Apache-2.0"

DaSpood · 2024-10-17T12:41:56Z

docs/enioka-scan-compat-package.md

+    implementation group: 'com.enioka.scanner', name: 'provider-os-camera', version: '3.0.1'
+
+    //provider dependant, here is for honeywell scanner.
+
+    implementation group: 'com.enioka.scanner', name: 'provider-os-honeywell-integrated', version: '3.0.1'
+}
+```
+*(using  the ``mavenCentral()`` repository )*
+
+
+You can then implement your own logic and Activities by creating a class extending ``ScannerCompatActivity``.
+
+```java
+import com.enioka.scanner.activities.ScannerCompatActivity;
+
+public class MyScanActivity extends ScannerCompatActivity {
+
+    @Override
+    public void initCamera(){
+        super.initCamera();
+
+        //initCamera logic...
+    }
+
+    @Override
+    public void onData(List<Barcode> data) 
+    {
+    //onData Logic
+    }
+
+    //rest of the Activity logic      
+}
+
+```
+
+## Cordova
+Cordova has its own plugin system
+You can add the compat library using 
+
+```bash
+$ cordova plugin add enioka-scan-compat
+```
+
+in any .js file :
+
+```js
+
+function foo() 
+{
+    window.startActivityNow(
+        {className:"com.example.myapp.MyScanActivity"},
+        successHandler,
+        errorHandler
+    )
+}
+```
+
+
+## Capacitor
+Capcitor supports cordova modules installed with npm
+
+``` bash
+$ npm install enioka-scan-compat-
+```
+
+
+
+```html
+<script src="js/index.js" type="module"></script>
+```
+
+```js
+function foo() {
+    window.startActivityNow(
+        {className:"com.example.myapp.MyScanActivity"},
+        successHandler,
+        errorHandler
+    )
+}
+```
+
+## React Native
+
+``` bash
+$ npm install enioka-scan-compat-
+```
+
+```tsx
+import { startActivity } from 'enioka-scan-compat-'
+
+<Button title = "startActivity" onPress={() => startActivity("com.example.myapp.MyScanActivity")}>
+</Button>
+```
+
+## Troubleshooting
+
+- in gradle.properties : 
+``android.enableJetifier=true``
+- in AndroidManifest.xml
+``android.allowBackup=true``


Le formatting du markdown dans un commentaire de PR sera pas ouf, je peux t'envoyer la version RAW si besoin. Reformulation de certains points et simplification.

Pour la partie heritage de notre activity, comment ca s'integre a leur projet ? Est-ce qu'ils doivent rajouter du code java a un endroit particulier pour que le plugin le detecte ?

Markdown:

Compatibility layer for various android application frameworks

enioka-scan provides npm packages that facilitate its integration with non-java applications by allowing you to use the provided Scanner and Camera activities.

For all android projects

The npm plugins only facilitate the integration of the provided UI, however you still need to add the usual Maven Central dependencies in android/app/build.gradle:

dependencies { // core library implementation group: 'com.enioka.scanner', name: 'enioka-scan-core', version: 'X.Y.Z' // wanted device-specific providers (e.g. Camera and Honeywell integrated) implementation group: 'com.enioka.scanner', name: 'provider-os-camera', version: 'X.Y.Z' implementation group: 'com.enioka.scanner', name: 'provider-os-honeywell-integrated', version: 'X.Y.Z' }

Cordova and Capacitor

Cordova has its own plugin system. You can add the integration dependency using:

$ cordova plugin add @enioka/enioka-scan-cordova-capacitor-integration

Capcitor supports Cordova modules installed with npm, it therefore uses the same dependency:

$ npm install @enioka/enioka-scan-cordova-capacitor-integration

You can then easily instantiate the scanner activity in any .js file :

function foo() { window.startActivityNow( { className:"com.enioka.scanner.activities.ScannerCompatActivity" }, successHandler, errorHandler ) }

React Native

The React Native integration dependency can be installed with the following command:

$ npm install @enioka/enioka-scan-react-native-integration

You can then easily instantiate the scanner activity in any .js file used in your HTML page:

import { startActivity } from 'enioka-scan-react-native-integration' <Button title = "startActivity" onPress={() => startActivity("com.enioka.scanner.activities.ScannerCompatActivity")}> </Button>

Troubleshooting

Because your application's manifest will have to be merged with the enioka Scan dependencies, make sure the following properties match the ones used in enioka Scan (which are not the default values):

in gradle.properties:
android.enableJetifier=true

in AndroidManifest.xml:
android.allowBackup=true

Improvements

So far this setup only allows the launch of an activity without much control on their intent extras, and without much thought put into the Service aspect, as these frameworks are primarily UI-oriented and not designed for deep Android integration.

This means:

We do not provide any means to easily bind to the Scanner service independently from the provided ScannerCompatActivity. The service should still be available after installing the core dependency, so your franework may offer a way to bind to it.

We do not provide any means to easily extend the UI beyond simply launching the default one, you may be able to extend it in a Java class and use this class in the startActivity() call instead, but Java will still be needed.

We do not provide any way to customize the startActivity() intent for now though that will be a feature down the line.

DaSpood · 2024-10-17T13:06:32Z

npm_integration_frameworks/cordova-capacitor/src/android/ActivityStarterPlugin.java

+                return false;
+            }
+
+            Intent intent = new Intent(this.cordova.getContext(), klass);


Ca pourrait etre bien de supporter un bundle / des extras a integrer a cet intent, pour permettre a l'utilisateur de controller les options de l'application (voir app de demo pour comment ce serait utilise). C'est ok si pas evident tout de suite, ca peut attendre une autre MR.

DaSpood · 2024-10-17T13:07:20Z

npm_integration_frameworks/reactnative/.gitattributes

@@ -0,0 +1,3 @@
+*.pbxproj -text


gitattributes pas necessaire, a supprimer

DaSpood · 2024-10-17T13:15:43Z

npm_integration_frameworks/reactnative/android/gradle.properties

+ActivityStarter_minSdkVersion=21
+ActivityStarter_targetSdkVersion=31
+ActivityStarter_compileSdkVersion=31


On va preferer reprendre les versions de la lib core plutot que de l'appli de demo (qui est plus elevee uniquement pour pouvoir passer sur le play store):

Suggested change

ActivityStarter_minSdkVersion=21

ActivityStarter_targetSdkVersion=31

ActivityStarter_compileSdkVersion=31

ActivityStarter_minSdkVersion=19

ActivityStarter_targetSdkVersion=28

ActivityStarter_compileSdkVersion=28

DaSpood · 2024-10-17T13:17:04Z

..._frameworks/reactnative/android/src/main/java/com/activitystarter/ActivityStarterModule.java

+        Activity activity = getCurrentActivity();
+        try {
+            Class<?> klass = Class.forName(targetActivity);
+            Intent intent = new Intent(activity, klass);


Comme pour Cordova, si possible on aimerait donner plus de controle a l'utilisateur avec le support d'intent extras / bundles comme ce qui est fait dans l'app de demo pour appliquer les parametres au service.

DaSpood · 2024-10-17T13:18:31Z

npm_integration_frameworks/reactnative/lefthook.yml

@@ -0,0 +1,14 @@
+pre-commit:


Pas necessaire pour notre cas d'usage, a supprimer

DaSpood · 2024-10-17T13:19:13Z

npm_integration_frameworks/reactnative/package.json

@@ -0,0 +1,187 @@
+{


a nettoyer au maximum pour ne conserver que le strict necessaire pour le plugin npm

DaSpood · 2024-10-17T13:19:32Z

npm_integration_frameworks/reactnative/src/__tests__/index.test.tsx

@@ -0,0 +1 @@
+it.todo('write a test');


Pas necessaire, a supprimer

NathanFortyTwo · 2024-10-17T15:57:18Z

bundle/extras pas encore intégrés aux Intent dans startActivity,
Je ne suis pas sur de comment récupérer le bundle depuis le code utilisateur.

NathanFortyTwo added 3 commits October 17, 2024 13:36

add documentation for compat layer for multiple frameworks

ca586be

add cordova-capacitor npm package

d44e980

add npm package for react-native integration

53642b1

NathanFortyTwo added the enhancement label Oct 17, 2024

NathanFortyTwo added this to the Milestone TBD milestone Oct 17, 2024

DaSpood requested changes Oct 17, 2024

View reviewed changes

NathanFortyTwo added 7 commits October 17, 2024 15:53

move gitignore and remove .gitattributes

acee403

remove unused test file

b29617b

fix sdk versions to match core lib

dbb54f5

add keywords and change license

b82e32b

update readme

d51d083

remove unused hook

5688330

removed unused dependencies in package.json + cleanup

01c1a57

DaSpood approved these changes Oct 23, 2024

View reviewed changes

DaSpood merged commit c33cb27 into master Oct 23, 2024

DaSpood deleted the 221-cordova-capacitor-react-integration branch October 23, 2024 08:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

221 cordova capacitor react integration #224

221 cordova capacitor react integration #224

NathanFortyTwo commented Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

DaSpood Oct 17, 2024

NathanFortyTwo commented Oct 17, 2024

-      "capacitor"
+      "capacitor",
+      "cordova",
+      "plugin"

221 cordova capacitor react integration #224

221 cordova capacitor react integration #224

Conversation

NathanFortyTwo commented Oct 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Compatibility layer for various android application frameworks

For all android projects

Cordova and Capacitor

React Native

Troubleshooting

Improvements

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NathanFortyTwo commented Oct 17, 2024