Skip to main content

Veritran Docs

Integración para Android

En el proceso de integración para Android, necesitas:

  1. Acceder a los recursos necesarios.

  2. Configurar build.gradle y dependencias

  3. Modificar el manifiesto

  4. Crear un puente de comunicación entre React Native y el código nativo de Android.

  5. Importar Xpressplug a tu proyecto ReactNative.

Acceder a los recursos

Para acceder a los recursos necesarios para instalar XpressPlug para Android, debes agregar el siguiente código al archivo build.gradle en tu proyecto Android, dentro del proyecto React:

allprojects { 
   repositories { 
       maven { url "https://developer.veritran.com/resources/api/v4/groups/10/-/packages/maven"
           name "GitLab" 
           credentials(HttpHeaderCredentials) {
               name = 'Private-Token' 
               value = '<PRIVATE_TOKEN>'
           } 
           authentication {
               header(HttpHeaderAuthentication)
           }
       }
   }

Importante

Para obtener el token privado, envía un correo electrónico a mobile_support@veritran.com con el asunto “Acceso a XpressPlug”, y el equipo te proporcionará los recursos necesarios.

Configurar build.gradle y dependencias

A continuación, debes agregar XpressPlug como una dependencia al proyecto actual, junto con cualquier otra dependencia necesaria. Sigue estos pasos:

  1. Agrega los siguientes valores al bloque "dependency" en el archivo build.gradle para instalar XpressPlug y sus dependencias.

    //Veritran dependencies 
implementation 'com.veritran:ui:7.9.1.49455' 
implementation 'com.veritran:ui_interfaces:7.9.1.49455' 
implementation 'com.veritran:xpressplug:7.9.1.49455' 

//Third party dependencies 
implementation 'androidx.constraintlayout:constraintlayout:2.1.3' 
implementation 'com.karumi:dexter:6.2.1' 
implementation 'org.nanohttpd:nanohttpd-webserver:2.3.1' 
implementation 'com.scottyab:rootbeer-lib:0.0.8' 
implementation 'androidx.core:core:1.3.0' 
implementation 'androidx.appcompat:appcompat:1.2.0' 
implementation 'androidx.fragment:fragment:1.1.0' 
implementation 'com.google.android.gms:play-services-basement:17.0.0' 
implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.9.0' 
implementation 'com.google.code.gson:gson:2.10.1' 
implementation 'com.google.guava:guava:31.1-android' 
implementation 'com.madgag.spongycastle:core:1.54.0.0' 
implementation 'com.madgag.spongycastle:prov:1.54.0.0' 
implementation 'com.madgag.spongycastle:pkix:1.54.0.0' 
implementation 'org.apache.commons:commons-text:1.2' 
implementation 'androidx.recyclerview:recyclerview:1.1.0' 
implementation 'com.squareup.duktape:duktape-android:1.3.0' 
implementation 'com.squareup.okhttp3:okhttp:3.12.13' 
implementation 'com.facebook.soloader:soloader:0.10.3' 
implementation 'androidx.legacy:legacy-support-v4:1.0.0' 
implementation 'org.conscrypt:conscrypt-android:2.5.2' 
implementation 'com.squareup.retrofit2:converter-gson:2.9.0' 
implementation 'com.squareup.retrofit2:retrofit:2.9.0' 
implementation 'androidx.security:security-crypto:1.0.0' 
implementation 'com.airbnb.android:lottie:3.0.7'

  2. Habilita Kotlin para el proyecto agregando lo siguiente al proyecto build.gradle:

    buildscript { 
    dependencies { 
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.0" 
    } 
}

  3. Agrega lo siguiente al módulo build.gradle:

    apply plugin: 'kotlin-android' 
Modificar el manifiesto

Luego, debes modificar el AndroidManifest.xml en tu proyecto Android. Ve el ejemplo a continuación:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
   xmlns:tools="http://schemas.android.com/tools" 
   package="com.reactxpressplugexample"> 
   ... 
   <application 
       ... 
       android:allowBackup="false" 
       android:fullBackupContent="false" 
       tools:replace="android:allowBackup,android:fullBackupContent,android:label">
       ... 
       <uses-library 
           android:name="org.apache.http.legacy" 
           android:required="false" /> 
       ... 
   </application> 
   ... 
</manifest>
Sincronizar archivos Gradle

Por último, debes sincronizar los archivos gradle. Para hacer esto, ve a Android Studio y a File > Sync Project with Gradle Files. También puedes escribir el siguiente comando en tu terminal:

./gradlew --refresh-dependencies
Crear un puente de comunicación entre React Native y el código nativo de Android.

Es necesario crear una clase que funcione como puente de comunicación entre React Native y el código nativo de Android. Para hacerlo, sigue estos pasos:

  1. Extiende ReactContextBaseJavaModule y crea un paquete que implemente la interfaz ReactPackage, como se muestra a continuación:

    XpressPlugModule.kt

    class XpressPlugModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext)
{ 

   private var initializer: XpressPlugInitializer? = null 
   private var entryPoint: XpressPlugEntryPoint? = null 
  
   override fun getName(): String { 
       return "XpressPlugModule" 
   } 

   @ReactMethod 
   fun initialize(promise: Promise) { 
       Log.i("XpressPlugModule", "---- XpressPlugModule did receive call initialize") 
       initializer = XpressPlugInitializer(promise) 
       initializer?.execute() 
   } 

   @ReactMethod 
   fun callEntryPoint(entryPointName: String, 
                      parameters: ReadableMap, 
                      outputKeys: ReadableArray, 
                      promise: Promise) { 
       Log.i("XpressPlugModule", "---- XpressPlugModule did receive call entry point") 
       val params  = HashMap<String, String>() 
       parameters.toHashMap().entries.forEach { 
           params[it.key] = it.value.toString() 
       } 
       entryPoint = XpressPlugEntryPoint(entryPointName, params, outputKeys.toArrayList(), promise)
       entryPoint?.execute() 
   } 
}

    XpressPlugPackage.kt

    class XpressPlugPackage : ReactPackage { 

    override fun createViewManagers( 
        reactContext: ReactApplicationContext 
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()   

    override fun createNativeModules( 
        reactContext: ReactApplicationContext 
    ): MutableList<NativeModule> = listOf( 
        XpressPlugModule(reactContext) 
    ).toMutableList() 
}

  2. Agrega el paquete creado a los paquetes de la clase ReactNativeHost, que está asociada a tu MainApplication, como se muestra a continuación:

    private final ReactNativeHost mReactNativeHost = 
    new ReactNativeHost(this) { 
        @Override 
        public boolean getUseDeveloperSupport() { 
            return BuildConfig.DEBUG; 
        } 

        @Override 
        protected List<ReactPackage> getPackages() { 
            List<ReactPackage> packages = new PackageList(this).getPackages(); 
            packages.add(new XpressPlugPackage()); 
            return packages; 
        } 

        @Override 
        protected String getJSMainModuleName() { 
            return "index"; 
        } 
    }; 

  

@Override 
public ReactNativeHost getReactNativeHost() { 
    return mReactNativeHost; 
}
Importar Xpressplug a tu proyecto ReactNative.

Sigue estos pasos para finalizar el proceso de integración:

  1. Importa el SDK a tu proyecto ReactNative para Android.

    import {NativeModules} from 'react-native'; 
const {XpressPlugModule} = NativeModules;

  2. Invoca el método initialize de XpressPlugModule.

    const initializeXpressPlug = async () => { 
    try { 
      console.log ('---- ReactNative | Calling XpressPlugModule Initialize'); 
      const result = await XpressPlugModule.initialize(); 
      const success = result === 'true'; 
      setXpInitialized(success); 
      console.log( 
        `---- ReactNative | XpressPlugModule Initialized successfully: ${success}`); 
    } catch (e) { 
      console.error(e); 
    } 
  }; 

initializeXpressPlug();
: