logotipo
LUNES

02

Sep...

Última modificación 2020-11-24T14:49:00-05:00

Cordova: Plugins indispensables

Cordova: Plugins indispensables

Plugins indispensables de Cordova:

  1. Transiciones nativas de cambio de páginas slide, flip, etc
    1. com.telerik.plugins.nativepagetransitions
  2. NUEVO 2020:
  • Tener la última versión de Android: cordova platform add android@latest
  • Poner esto en gradle.properties

android.useAndroidX=true
android.enableJetifier=true

 

  1. DATOS DEL DISPOSITIVO
  • Cordova plugin add cordova-plugin-device
  • Puede obtener marca, sistema, versión, ID, entre otros.

Más info:

cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html

  1. SPLASH
  • Cordova: github.com/apache/cordova-plugin-splashscreen.git

 

  1. NOTIFICATIONS PUSH
  • Cordova: github.com/ostownsville/cordova-plugin-fcm.git

    MEJORADO:
    Cordova: github.com/ostownsville/cordova-plugin-fcm.git

    Más info: 

github.com/fechanique/cordova-plugin-fcm

  • Debe generar el archivo google-services.json ANDROID y/o GoogleService-Info.plist iOS en firebase de Google y ponerlo en la ubicación: name_app/platforms/android/app/ PARA ANDROID, y para iOS en platforms/ios/<Your Project>/Resources/ y platforms/ios/<Your Project>/Resources/Resources/
  • Descargue la www.gruponw.com/imagenes/res.zip
    Descomprima la carpeta y debe ponerla en la ubicación name_app/platforms/android/ y name_app/platforms/ios/

 

UPDATE 2019-12-10: Por error al compilar favor usar:

  • cordova plugin add cordova-plugin-fcm-with-dependecy-d

<plugin name="cordova-plugin-fcm-with-dependecy-d" spec="^4.1.1">
        <variable name="FCM_CORE_VERSION" value="16.0.9" />
        <variable name="FCM_VERSION" value="18.0.0" />
        <variable name="GRADLE_TOOLS_VERSION" value="3.5.0" />
        <variable name="GOOGLE_SERVICES_VERSION" value="4.2.0" />
</plugin>

  • Más info

forum.ionicframework.com/t/ionic-4-cordova-run-android-firebase-error-all-of-a-sudden/163204/110

  1. Google Login
    1. cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.ID_ACCOUNT --variable WEB_APPLICATION_CLIENT_ID=ID_ACCOUNT.apps.googleusercontent.com
    2. Extraer IDs de cliente de OAuth 2.0 ID de cliente de web cliente en https://console.developers.google.com/apis/credentials
    3. Poner en el config el id de cliente: self.google_client_id = "ID_CLIENTE";
    4. Poner en true permitir_registro_login_con_google en el config: self.config_crear_cuenta {permitir_registro_login_con_google: true}
    5. Más info; https://github.com/EddyVerbruggen/cordova-plugin-googleplus
  2. FACEBOOK LOGIN
    1. Crear app en facebook developers para extraer el ID, habilitar el inicio de sesión, poner los hashes de desarrollo y producción, luego poner en el config del proyecto.
    2. fb_hashes_desarrollo = "ga0RGNYHvNM5d0SLGQfpQWAPGJ8="; //keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
    3. fb_hashes_activacion = "LvKijupMuVJc1c/Cgtk0BZWRbq4="; //keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64
    4. get alias: keytool -v -list -keystore .keystore
    5. cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="YOUR_FB_APPID" --variable APP_NAME="YOUR_FB_APPNAME"
  • Más info:

codesundar.com/cordova-plugin-facebook/

  1. USAR GEOLOCATION 
  • Cordova plugin add

cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/

  • Para iOS:

www.npmjs.com/package/cordova-plugin-geolocation-ios-fixed

 

  1. DIALOGS NATIVOS
  • Cordova plugin add

cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/index.html

 

  1.  NAVEGADOR INTERNO DE LA APP SIN SALIRSE
  • Cordova plugin add

cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html

 

  1. PROCESOS EN SEGUNDO PLANO
  • Cordova plugin add

github.com/katzer/cordova-plugin-background-mode.git

 

  1. UPDATE 2019-12-13:

Instalar para mayor compatibilidad

  • Cordova plugin add

github.com/katzer/cordova-plugin-background-mode

  • Cordova plugin add

github.com/mohamed-salah/phonegap-backbutton-plugin

 

  1. PASAR A PRIMER PLANO NUESTRA APP

UPDATE 2019-12-13:

  • Cordova plugin add

github.com/markeeftb/cordova-bring-to-front

  • Cordova plugin add

www.npmjs.com/package/cordova-plugin-bring-to-front

 

  1. NO PERMITIR APAGAR LA PANTALLA AUTOMÁTICAMENTE
  • Cordova plugin add

github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git

 

  1. LOADING NATIVO
  • Cordova plugin add

github.com/Paldom/SpinnerDialog

 

  1. ESCANEAR CÓDIGOS QR Y CÓDIGO DE BARRAS
  • Cordova plugin add

es.ourcodeworld.com/articulos/leer/29/como-generar-y-escanear-codigos-qr-en-cordova

 

  1. SOLICITAR CUALQUIER PERMISO
  • Cordova plugin add cordova-plugin-permission

//uno
nw.getPermission(['android.permission.CAMERA'], function () {
                console.log("Permisos concedidos");
            });
            //varios
            nw.getPermission([
                'android.permission.READ_PHONE_STATE',
                'android.permission.READ_EXTERNAL_STORAGE',
                'android.permission.RECORD_VIDEO',
                'android.permission.WRITE_EXTERNAL_STORAGE',
                'android.permission.ACCESS_WIFI_STATE'
                'android.permission.ACCESS_NETWORK_STATE',
                'android.permission.RECORD_AUDIO',
                'android.permission.MODIFY_AUDIO_SETTINGS',
                'android.permission.FLASHLIGHT',
                'android.permission.RECORD_AUDIO',
                'android.permission.CAMERA',
                'android.permission.MICROPHONE'
            ], function () {
                console.log("Permisos concedidos");
            });

  • Más info:

www.gruponw.com/noticias-de-colombia-y-el-mundo/nwarticle/285/13/Permisos-Cordova-Camara-video-audio-cordova-plugin-permission

 

  1. CAPTURAR CÁMARA Y SUBIR A SERVER
  • Cordova plugin add cordova-plugin-camera
  • Cordova plugin add cordova-plugin-file-transfer
  • Usa new FileUploadOptions();
  • Para nwmaker, poner type button y mode camera (solo abre la cámara) files (abre solo biblioteca) o camera_files (abre ambos) o directamente nw.uploadFileCamera("adjunto_nombre_campo", "camera", true, file_url);
  • Más info: 

cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/#module_camera.CameraOptions

makitweb.com/capture-and-upload-photo-to-server-with-phonegap/

NOTA: En caso de presentar error de dependencies duplicate_classes instalar cordova plugin add cordova-plugin-androidx-adapter 

 

  1. ACTIVAR GPS
  • Cordova plugin add

www.npmjs.com/package/cordova-plugin-request-location-accuracy

  • Para detectar si el GPS del dispositivo esta encendido. Si no esta activo y el usuario permite usarlo se activara automaticamente

Ej:

 nwgeo.gpsActivation(function (response) {
                //Success callback
                console.log(response);
            }, function (response) {
                console.log(response);
                //Failure callback
            });

 

  1. OPEN WITH
  • Para compartir otros archivos y abrir con tu aplicación. Puedes subir directamente el archivo al servidor y enviar a otros usuarios.

cordova plugin add cc.fovea.cordova.openwith \
  --variable ANDROID_MIME_TYPE="image/*" \
  --variable IOS_URL_SCHEME=ccfoveaopenwithdemo \
  --variable IOS_UNIFORM_TYPE_IDENTIFIER=public.image

  • Más info: 

github.com/j3k0/cordova-plugin-openwith

 

 

  1. COMPARTIR EN REDES UN TEXTO, LINK, IMAGEN, ETC
  • Cordova plugins add

www.npmjs.com/package/cordova-plugin-share

nw.shareSocial(text, title, mimetype);

 

  1. SACAR DATOS DEL DISPOSITIVO
  • cordova plugin add

www.npmjs.com/package/cordova.plugins.diagnostic

 

  1. ABRIR UBICACIÓN CON WAZE GOOGLE UBER ETC
  • cordova plugin add

www.npmjs.com/package/uk.co.workingedge.phonegap.plugin.launchnavigator

--variable GOOGLE_API_KEY_FOR_ANDROID="{your_api_key}"

EJ:

var opts = {};
                opts.latitude = latitud;
                opts.longitude = logitud;
                opts.mode = "all_apps"; (waze,googleMaps abre la opción para ambas) (waze) (google_maps) (all_apps saca todas las disponibles)
                nw.launchNavigatorUbication(opts);

 

  1. OBTENER DIRECCIÓN DE FORMA NATIVA SIN API GOOGLE: LOCALIDAD MUNICIPIO CIUDAD PAÍS POR LATITUD LONGITUD O POR DIRECCIÓN
  • cordova plugin add

www.npmjs.com/package/cordova-plugin-nativegeocoder

Ej:

nw.nativeGeoCoder(nwgeo.latitude, nwgeo.longitude, function (r) {
                        if (r !== false && typeof r.error === "undefined") {
                            main.gps = r;
                        }
                        self.crearViaje();
                    });

 

  1. GEOLOCATION EN SEGUNDO PLANO BACKGROUND
  • cordova plugin add

www.npmjs.com/package/@mauron85/cordova-plugin-background-geolocation

 

  1. MAP DE GOOGLE NATIVO
  • cordova plugin add

github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v1.4.0/class/Map

En config.xml

<widget ...>
       <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
      <preference
name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
</widget>

 

  1. VIDEOLLAMADAS
  • cordova plugin add

github.com/findmate/cordova-plugin-jitsi-meet ///ACTUALIZADO nov 24 2020: cordova-plugin-jitsi-meet

https://www.npmjs.com/package/cordova-plugin-jitsi-meet

Para iniciar una videollamada, le pasa el room a la siguiente función (librería nwmaker mobile):

   nw.initVideoCallNw(roomID);

Arreglar el bug de  defaultMinSdkVersion, editar build.gradle y poner defaultMinSdkVersion = 21

 

  1. ICONOS DE UBICACIÓN PARA MAPAS
  • www.flaticon.com/free-icon/pin_149059