Córdoba - Guía rápida

Cordova es una plataforma para la construcción de aplicaciones móviles híbridas utilizando HTML, CSS y JavaScript.

La documentación oficial nos da la definición de Córdoba -

"Apache Cordova es un marco de desarrollo móvil de código abierto. Le permite utilizar tecnologías web estándar como HTML5, CSS3 y JavaScript para el desarrollo multiplataforma, evitando cada lenguaje de desarrollo nativo de plataforma móvil. Las aplicaciones se ejecutan dentro de envoltorios dirigidos a cada plataforma, y confíe en enlaces API que cumplen con los estándares para acceder a los sensores, los datos y el estado de la red de cada dispositivo ".

Características de Córdoba

Entendamos ahora brevemente las características de Córdoba.

Interfaz de línea de comandos (CLI de Cordova)

Esta herramienta se puede utilizar para iniciar proyectos, crear procesos para diferentes plataformas, instalar complementos y muchas otras cosas útiles que facilitan el proceso de desarrollo. Aprenderá a utilizar la interfaz de línea de comandos en los capítulos siguientes.

Componentes principales de Cordova

Cordova ofrece un conjunto de componentes básicos que toda aplicación móvil necesita. Estos componentes se utilizarán para crear la base de la aplicación para que podamos dedicar más tiempo a implementar nuestra propia lógica.

Complementos de Cordova

Cordova ofrece API que se utilizará para implementar funciones móviles nativas en nuestra aplicación JavaScript.

Licencia

Cordova tiene la licencia Apache License, versión 2.0. Apache y los logotipos de plumas de Apache son marcas comerciales de The Apache Software Foundation.

Ventajas de Córdoba

Ahora discutiremos las ventajas de Córdoba.

  • Cordova ofrece una plataforma para crear aplicaciones móviles híbridas para que podamos desarrollar una aplicación que se utilizará en diferentes plataformas móviles: IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu y tizien.

  • Es más rápido desarrollar una aplicación híbrida que una aplicación nativa, por lo que Cordova puede ahorrar tiempo de desarrollo.

  • Como usamos JavaScript cuando trabajamos con Cordova, no necesitamos aprender lenguajes de programación específicos de la plataforma.

  • Hay muchos complementos de la comunidad que se pueden usar con Cordova, estos tienen varias bibliotecas y marcos, que están optimizados para trabajar con él.

Limitaciones de Córdoba

Las siguientes son las limitaciones de Córdoba.

  • Las aplicaciones híbridas son más lentas que las nativas, por lo que no es óptimo usar Cordova para aplicaciones grandes que requieren muchos datos y funcionalidad.

  • La compatibilidad entre navegadores puede crear muchos problemas. La mayoría de las veces estamos creando aplicaciones para diferentes plataformas, por lo que las pruebas y la optimización pueden llevar mucho tiempo, ya que necesitamos cubrir una gran cantidad de dispositivos y sistemas operativos.

  • Algunos complementos tienen problemas de compatibilidad con diferentes dispositivos y plataformas. También hay algunas API nativas que aún no son compatibles con Cordova.

En este capítulo, entenderemos la configuración del entorno de Cordova. Para comenzar con la configuración, primero debemos instalar algunos componentes. Los componentes se enumeran en la siguiente tabla.

S. No Software y descripción
1

NodeJS and NPM

NodeJS es la plataforma necesaria para el desarrollo de Cordova. Consulte nuestra configuración del entorno NodeJS para obtener más detalles.

2

Android SDK

Para la plataforma Android, debe tener Android SDK instalado en su máquina. Consulte Configuración del entorno de Android para obtener más detalles.

3

XCode

Para la plataforma iOS, debe tener xCode instalado en su máquina. Consulte Configuración del entorno iOS para obtener más detalles.

Instalación de Cordova

Antes de comenzar, debe saber que usaremos Windows command prompt en nuestro tutorial.

Paso 1: instalar git

Incluso si no usa git, debe instalarse ya que Cordova lo está usando para algunos procesos en segundo plano. Puedes descargar git aquí . Después de instalar git, abra su variable de entorno.

  • Haga clic derecho en la computadora
  • Properties
  • Configuración avanzada del sistema
  • Variables de entorno
  • Variables del sistema
  • Edit

Copie lo siguiente al final de la variable value field. Esta es la ruta predeterminada de la instalación de git. Si lo instaló en una ruta diferente, debe usar eso en lugar de nuestro código de ejemplo a continuación.

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

Ahora puedes escribir git en su símbolo del sistema para probar si la instalación es exitosa.

Paso 2: Instalación de Cordova

Este paso descargará e instalará el módulo Cordova a nivel mundial. Abra el símbolo del sistema y ejecute lo siguiente:

C:\Users\username>npm install -g cordova

Puede verificar la versión instalada ejecutando -

C:\Users\username>cordova -v

Esto es todo lo que necesita para comenzar a desarrollar las aplicaciones Cordova en el sistema operativo Windows. En nuestro próximo tutorial, le mostraremos cómo crear la primera aplicación.

Hemos entendido cómo instalar Cordova y configurar el entorno para ello. Una vez que todo esté listo, podemos crear nuestra primera aplicación híbrida de Cordova.

Paso 1: creación de la aplicación

Abra el directorio donde desea que se instale la aplicación en el símbolo del sistema. Lo crearemos en el escritorio.

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject es el nombre del directorio donde se crea la aplicación.

  • io.cordova.hellocordovaes el valor de dominio inverso predeterminado. Debe usar su propio valor de dominio si es posible.

  • CordovaApp es el título de su aplicación.

Paso 2: agregar plataformas

Debe abrir el directorio de su proyecto en el símbolo del sistema. En nuestro ejemplo, es elCordovaProject. Solo debe elegir las plataformas que necesita. Para poder utilizar la plataforma especificada, debe haber instalado el SDK de la plataforma específica. Dado que estamos desarrollando en Windows, podemos utilizar las siguientes plataformas. Ya hemos instalado Android SDK, por lo que solo instalaremos la plataforma Android para este tutorial.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

Hay otras plataformas que se pueden utilizar en el sistema operativo Windows.

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

Si está desarrollando en Mac, puede usar:

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

También puede eliminar la plataforma de su proyecto usando -

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

Paso 3: construcción y ejecución

En este paso, crearemos la aplicación para una plataforma específica para que podamos ejecutarla en un dispositivo móvil o emulador.

C:\Users\username\Desktop\CordovaProject>cordova build android

Ahora podemos ejecutar nuestra aplicación. Si está usando el emulador predeterminado, debe usar:

C:\Users\username\Desktop\CordovaProject>cordova emulate android

Si desea usar el emulador externo o el dispositivo real, debe usar:

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE - Usaremos el Genymotion android emulatorya que es más rápido y responde mejor que el predeterminado. Puedes encontrar el emulador aquí . También puede utilizar un dispositivo real para realizar pruebas habilitandoUSB debuggingde las opciones y conectarlo a su computadora mediante un cable USB. Para algunos dispositivos, también necesitará instalar el controlador USB.

Una vez que ejecutemos la aplicación, la instalará en la plataforma que especificamos. Si todo está terminado sin errores, la salida debería mostrar la pantalla de inicio predeterminada de la aplicación.

En nuestro próximo tutorial, le mostraremos cómo configurar la aplicación Cordova.

los config.xmlEl archivo es el lugar donde podemos cambiar la configuración de la aplicación. Cuando creamos nuestra aplicación en el último tutorial, configuramos el dominio y el nombre inversos. Los valores se pueden cambiar en elconfig.xmlarchivo. Cuando creamos la aplicación, también se creará el archivo de configuración predeterminado.

La siguiente tabla explica los elementos de configuración en config.xml.

Tabla de configuración config.xml

S. No Elemento y detalles
1

widget

El valor de dominio inverso de la aplicación que especificamos al crear la aplicación.

2

name

El nombre de la aplicación que especificamos al crear la aplicación.

3

description

Descripción de la aplicación.

4

author

Autor de la aplicación.

5

content

La página de inicio de la aplicación. Se coloca dentro delwww directorio.

6

plugin

Los complementos que están instalados actualmente.

7

access

Se utiliza para controlar el acceso a dominios externos. El valor por defectooriginEl valor se establece en *, lo que significa que se permite el acceso a cualquier dominio. Este valor no permitirá que se abran algunas URL específicas para proteger la información.

8

allow-intent

Permite que URL específicas soliciten la apertura de la aplicación. Por ejemplo,<allow-intent href = "tel:*" /> permitirá tel: links para abrir el marcador.

9

platform

Las plataformas para crear la aplicación.

Podemos utilizar la API de almacenamiento disponible para almacenar datos en las aplicaciones cliente. Esto ayudará al uso de la aplicación cuando el usuario no esté conectado y también puede mejorar el rendimiento. Dado que este tutorial es para principiantes, le mostraremos cómo usarlocal storage. En uno de nuestros tutoriales posteriores, le mostraremos los otros complementos que se pueden usar.

Paso 1: agregar botones

Crearemos cuatro botones en el index.htmlarchivo. Los botones estarán ubicados dentro deldiv class = "app" elemento.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

Producirá la siguiente pantalla:

Paso 2: agregar oyentes de eventos

La política de seguridad de Cordova no permite eventos en línea, por lo que agregaremos detectores de eventos dentro de los archivos index.js. También asignaremoswindow.localStorage a un localStorage variable que usaremos más adelante.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

Paso 3: creación de funciones

Ahora necesitamos crear funciones que serán llamadas cuando se toquen los botones. La primera función se utiliza para agregar datos al almacenamiento local.

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

El siguiente registrará los datos que agregamos a la consola.

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

Si tocamos SET LOCAL STORAGE, configuraremos tres elementos para el almacenamiento local. Si tocamosSHOW LOCAL STORAGE luego, la consola registrará los elementos que queramos.

Creemos ahora una función que eliminará el proyecto del almacenamiento local.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

Si hacemos clic en el SHOW LOCAL STORAGE botón después de eliminar el proyecto, la salida mostrará null valor para el campo del proyecto.

También podemos obtener los elementos de almacenamiento local utilizando el key() método que tomará el índice como argumento y devolverá el elemento con el valor de índice correspondiente.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

Ahora, cuando tocamos el GET BY KEY , se mostrará la siguiente salida.

NOTA

Cuando usamos el key() método, la consola registrará el job en vez de name a pesar de que pasamos el argumento 0para recuperar el primer objeto. Esto se debe a que el almacenamiento local almacena datos en orden alfabético.

La siguiente tabla muestra todos los métodos de almacenamiento local disponibles.

S. No Métodos y detalles
1

setItem(key, value)

Se utiliza para configurar el elemento en almacenamiento local.

2

getItem(key)

Se utiliza para obtener el artículo del almacenamiento local.

3

removeItem(key)

Se utiliza para sacar el artículo del almacenamiento local.

4

key(index)

Se utiliza para obtener el artículo mediante el indexdel artículo en almacenamiento local. Esto ayuda a ordenar los elementos alfabéticamente.

5

length()

Se utiliza para recuperar la cantidad de elementos que existen en el almacenamiento local.

6

clear()

Se utiliza para eliminar todos los pares clave / valor del almacenamiento local.

Hay varios eventos que se pueden utilizar en los proyectos de Córdoba. La siguiente tabla muestra los eventos disponibles.

S. No Eventos y detalles
1

deviceReady

Este evento se activa una vez que Cordova está completamente cargado. Esto ayuda a garantizar que no se invoque ninguna función de Cordova antes de que se cargue todo.

2

pause

Este evento se activa cuando la aplicación se coloca en segundo plano.

3

resume

Este evento se activa cuando la aplicación se devuelve desde un segundo plano.

4

backbutton

Este evento se activa cuando se presiona el botón Atrás.

5

menubutton

Este evento se activa cuando se presiona el botón de menú.

6

searchbutton

Este evento se activa cuando se presiona el botón de búsqueda de Android.

7

startcallbutton

Este evento se activa cuando se presiona el botón de inicio de llamada.

8

endcallbutton

Este evento se activa cuando se presiona el botón Finalizar llamada.

9

volumedownbutton

Este evento se activa cuando se presiona el botón para bajar el volumen.

10

volumeupbutton

Este evento se activa cuando se presiona el botón para subir el volumen.

Usar eventos

Todos los eventos se utilizan casi de la misma manera. Siempre debemos agregar detectores de eventos en nuestrojs en vez de inline event calling desde el Cordova Content Security Policyno permite JavaScript en línea. Si intentamos llamar al evento en línea, se mostrará el siguiente error.

La forma correcta de trabajar con eventos es utilizando addEventListener. Entenderemos cómo utilizar elvolumeupbutton evento a través de un ejemplo.

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

Una vez que presionamos el volume up , la pantalla mostrará la siguiente alerta.

Manejo del botón Atrás

Deberíamos usar el botón de retroceso de Android para las funciones de la aplicación, como volver a la pantalla anterior. Para implementar su propia funcionalidad, primero debemos deshabilitar el botón Atrás que se usa para salir de la Aplicación.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Ahora, cuando presionamos el botón de retroceso nativo de Android, la alerta aparecerá en la pantalla en lugar de salir de la aplicación. Esto se hace usando ele.preventDefault() mando.

Manejo del botón Atrás

Por lo general, querrá usar el botón de retroceso de Android para algunas funciones de la aplicación, como regresar a la pantalla anterior. Para poder implementar su propia funcionalidad, primero debe deshabilitar la salida de la aplicación cuando se presiona el botón Atrás.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Ahora, cuando presionamos el botón de retroceso nativo de Android, la alerta aparecerá en la pantalla en lugar de salir de la aplicación. Esto se hace usandoe.preventDefault().

Cordova Plugman es una útil herramienta de línea de comandos para instalar y administrar complementos. Deberías usarplugmansi su aplicación necesita ejecutarse en una plataforma específica. Si desea crear uncross-platform aplicación que deberías usar cordova-cli que modificará complementos para diferentes plataformas.

Paso 1: instalación de Plugman

Abre el command prompt window y ejecute el siguiente fragmento de código para instalar plugman.

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

Paso 2: instalación de complementos

Para entender cómo instalar el complemento Cordova usando plugman, usaremos el complemento Cámara como ejemplo.

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera

Necesitamos considerar tres parámetros como se muestra arriba.

  • --platform - plataforma que estamos usando (android, ios, amazon-fireos, wp8, blackberry10).

  • --project- camino donde se construye el proyecto. En nuestro caso, esplatforms\android directorio.

  • --plugin - el complemento que queremos instalar.

Si establece parámetros válidos, la ventana del símbolo del sistema debería mostrar el siguiente resultado.

Métodos adicionales

Puedes usar el uninstall método de manera similar.

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera

los command prompt La consola mostrará la siguiente salida.

Plugman ofrece algunos métodos adicionales que se pueden utilizar. Los métodos se enumeran en la siguiente tabla.

S. No Método y detalles
1

install

Se utiliza para instalar complementos de Cordova.

2

uninstall

Se utiliza para desinstalar complementos de Cordova.

3

fetch

Se utiliza para copiar el complemento Cordova en una ubicación específica.

4

prepare

Se utiliza para actualizar el archivo de configuración para ayudar al soporte del módulo JS.

5

adduser

Se utiliza para agregar una cuenta de usuario al registro.

6

publish

Se utiliza para publicar complementos en el registro.

7

unpublish

Se utiliza para anular la publicación del complemento del registro.

8

search

Se utiliza para buscar complementos en el registro.

9

config

Se utiliza para la configuración del registro.

10

create

Se utiliza para crear complementos personalizados.

11

platform

Se utiliza para agregar o eliminar la plataforma del complemento creado a medida.

Comandos adicionales

Si está atascado, siempre puede usar el plugman -helpmando. La versión se puede verificar usandoplugman -v. Para buscar el complemento, puede usarplugman search y finalmente puede cambiar el registro del complemento usando el plugman config set registry mando.

NOTA

Dado que Cordova se utiliza para el desarrollo multiplataforma, en los capítulos siguientes utilizaremos Cordova CLI en vez de Plugman para instalar complementos.

Este complemento de Cordova se utiliza para monitorear el estado de la batería del dispositivo. El complemento monitoreará cada cambio que ocurra en la batería del dispositivo.

Paso 1: instalación del complemento de batería

Para instalar este complemento, necesitamos abrir el command prompt ventana y ejecute el siguiente código.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

Paso 2: agregar un detector de eventos

Cuando abres el index.js archivo, encontrará el onDeviceReadyfunción. Aquí es donde se debe agregar el detector de eventos.

window.addEventListener("batterystatus", onBatteryStatus, false);

Paso 3: crear la función de devolución de llamada

Crearemos el onBatteryStatus función de devolución de llamada en la parte inferior de la index.js archivo.

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

Cuando ejecutamos la aplicación, se activará una alerta. Por el momento, la batería está cargada al 100%.

Cuando se cambia el estado, se mostrará una nueva alerta. El estado de la batería muestra que la batería ahora está cargada al 99%.

Si conectamos el dispositivo al cargador, la nueva alerta mostrará que el isPlugged el valor se cambia a true.

Eventos adicionales

Este complemento ofrece dos eventos adicionales además del batterystatusevento. Estos eventos se pueden utilizar de la misma forma quebatterystatus evento.

S. No Detalles del evento
1

batterylow

El evento se activa cuando el porcentaje de carga de la batería alcanza un valor bajo. Este valor varía con diferentes dispositivos.

2

batterycritical

El evento se activa cuando el porcentaje de carga de la batería alcanza un valor crítico. Este valor varía con diferentes dispositivos.

Este complemento se usa para tomar fotos o usar archivos de la galería de imágenes.

Paso 1: instalar el complemento de la cámara

Ejecute el siguiente código en el command prompt ventana para instalar este complemento.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Paso 2: agregar botón e imagen

Ahora, crearemos el botón para llamar a la cámara y imgdonde se mostrará la imagen una vez tomada. Esto se agregará aindex.html dentro de div class = "app" elemento.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

Paso 3: agregar un detector de eventos

El detector de eventos se agrega dentro del onDeviceReady función para asegurarnos de que Cordova esté cargado antes de comenzar a usarlo.

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

Paso 4: agregar funciones (tomar fotos)

Crearemos el cameraTakePicturefunción que se pasa como una devolución de llamada a nuestro detector de eventos. Se disparará cuando se toque el botón. Dentro de esta función, llamaremos alnavigator.cameraobjeto global proporcionado por la API del complemento. Si la fotografía tiene éxito, los datos se enviarán alonSuccessfunción de devolución de llamada, si no, se mostrará la alerta con mensaje de error. Colocaremos este código al final deindex.js.

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

Cuando ejecutamos la aplicación y presionamos el botón, se activará la cámara nativa.

Cuando tomemos y guardemos la foto, se mostrará en la pantalla.

Se puede utilizar el mismo procedimiento para obtener imágenes del sistema de archivos local. La única diferencia es la función creada en el último paso. Puedes ver que elsourceType Se ha agregado un parámetro opcional.

Paso 1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Paso 2 B

<button id = "cameraGetPicture">GET PICTURE</button>

Paso 3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

Paso 4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

Cuando presionamos el segundo botón, se abrirá el sistema de archivos en lugar de la cámara para que podamos elegir la imagen que se va a mostrar.

Este complemento ofrece muchos parámetros opcionales para la personalización.

S. No Parámetro y detalles
1

quality

Calidad de la imagen en el rango de 0-100. El valor predeterminado es 50.

2

destinationType

DATA_URL o 0 Devuelve una cadena codificada en base64.

FILE_URI o 1 Devuelve el URI del archivo de imagen.

NATIVE_URI o 2 Devuelve el URI nativo de la imagen.

3

sourceType

PHOTOLIBRARY o 0 Abre biblioteca de fotos.

CAMERA o 1 Abre la cámara nativa.

SAVEDPHOTOALBUM o 2 Abre el álbum de fotos guardado.

4

allowEdit

Permite la edición de imágenes.

5

encodingType

JPEG o 0 Devuelve una imagen codificada en JPEG.

PNG o 1 Devuelve una imagen codificada en PNG.

6

targetWidth

Ancho de escala de la imagen en píxeles.

7

targetHeight

Altura de escala de la imagen en píxeles.

8

mediaType

PICTURE o 0 Solo permite la selección de imágenes.

VIDEO o 1 Solo permite la selección de video.

ALLMEDIA o 2 Permite la selección de todos los tipos de medios.

9

correctOrientation

Se utiliza para corregir la orientación de la imagen.

10

saveToPhotoAlbum

Se utiliza para guardar la imagen en el álbum de fotos.

11

popoverOptions

Se utiliza para configurar la ubicación de la ventana emergente en IOS.

12

cameraDirection

FRONT o 0 Cámara frontal.

BACK o 1 Camara trasera.

ALLMEDIA

Este complemento se utiliza para acceder a la base de datos de contactos del dispositivo. En este tutorial le mostraremos cómo crear, consultar y eliminar contactos.

Paso 1: instalar el complemento de contactos

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

Paso 2: agregar botones

El botón se utilizará para llamar al createContactfunción. Lo colocaremos en eldiv class = "app" en index.html archivo.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

Paso 2: agregar oyentes de eventos

Abierto index.js y copie el siguiente fragmento de código en el onDeviceReady función.

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

Paso 3A - Función de devolución de llamada (navigator.contacts.create)

Ahora, no tenemos ningún contacto almacenado en el dispositivo.

Nuestra primera función de devolución de llamada llamará al navigator.contacts.createmétodo donde podemos especificar los nuevos datos de contacto. Esto creará un contacto y lo asignará almyContactvariable pero no se almacenará en el dispositivo. Para almacenarlo, debemos llamar alsave y cree funciones de devolución de llamada de éxito y error.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

Cuando hacemos clic en el ADD CONTACT , el nuevo contacto se almacenará en la lista de contactos del dispositivo.

Paso 3B - Función de devolución de llamada (navigator.contacts.find)

Nuestra segunda función de devolución de llamada consultará todos los contactos. Usaremos elnavigator.contacts.findmétodo. El objeto de opciones tiene un parámetro de filtro que se utiliza para especificar el filtro de búsqueda.multiple = truese utiliza ya que queremos devolver todos los contactos del dispositivo. losfield tecla para buscar contactos por displayName ya que lo usamos al guardar el contacto.

Una vez configuradas las opciones, usamos findmétodo para consultar contactos. El mensaje de alerta se activará para cada contacto que se encuentre.

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Cuando presionamos el FIND CONTACT , se activará una ventana emergente de alerta ya que solo hemos guardado un contacto.

Paso 3C - Función de devolución de llamada (eliminar)

En este paso, usaremos el método de búsqueda nuevamente pero esta vez configuraremos diferentes opciones. losoptions.filter está configurado para buscar eso Test Userque tiene que ser eliminado. Después de lacontactfindSuccess La función de devolución de llamada ha devuelto el contacto que queremos, lo eliminaremos usando el remove método que requiere sus propias devoluciones de llamada de éxito y error.

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Ahora, solo tenemos un contacto almacenado en el dispositivo. Agregaremos manualmente uno más para mostrarle el proceso de eliminación.

Ahora haremos clic en el DELETE CONTACT botón para eliminar el Test User. Si volvemos a revisar la lista de contactos, veremos que elTest User No existe más.

Este complemento se utiliza para obtener información sobre el dispositivo del usuario.

Paso 1: instalación del complemento del dispositivo

Para instalar este complemento, debemos ejecutar el siguiente fragmento en el command prompt.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

Paso 2 - Agregar botón

Usaremos este complemento de la misma manera que usamos los otros complementos de Cordova. Agreguemos un botón en elindex.htmlarchivo. Este botón se utilizará para obtener información sobre el dispositivo.

<button id = "cordovaDevice">CORDOVA DEVICE</button>

Paso 3: agregar un detector de eventos

Los complementos de Cordova están disponibles después de deviceready evento, por lo que colocaremos el detector de eventos dentro del onDeviceReady funcionar en index.js.

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

Paso 4: función de creación

La siguiente función mostrará cómo utilizar todas las posibilidades que ofrece el complemento. Lo colocaremos enindex.js.

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

Cuando hacemos clic en el CORDOVA DEVICE , la alerta mostrará la versión de Cordova, el modelo del dispositivo, la plataforma, el UUID y la versión del dispositivo.

El complemento Acelerómetro también se denomina device-motion. Se utiliza para rastrear el movimiento del dispositivo en tres dimensiones.

Paso 1: instalar el complemento acelerómetro

Instalaremos este complemento usando cordova-CLI. Escriba el siguiente código en elcommand prompt ventana.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

Paso 2: agregar botones

En este paso, agregaremos dos botones en el index.htmlarchivo. Uno se utilizará para obtener la aceleración actual y el otro observará los cambios de aceleración.

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

Paso 3: agregar oyentes de eventos

Agreguemos ahora detectores de eventos para que nuestros botones onDeviceReady funcionar dentro index.js.

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

Paso 4: creación de funciones

Ahora, crearemos dos funciones. La primera función se utilizará para obtener la aceleración actual y la segunda función observará la aceleración y la información sobre la aceleración se activará cada tres segundos. También agregaremos elclearWatch función envuelta por el setTimeoutfunción para dejar de observar la aceleración después del período de tiempo especificado. losfrequency El parámetro se utiliza para activar la función de devolución de llamada cada tres segundos.

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

Ahora si presionamos el GET ACCELERATION, obtendremos el valor de aceleración actual. Si presionamos elWATCH ACCELERATION, la alerta se activará cada tres segundos. Después de que se muestre la tercera alerta,clearWatch Se llamará a la función y no recibiremos más alertas ya que configuramos el tiempo de espera en 10000 milisegundos.

La brújula se utiliza para mostrar la dirección relativa al punto cardinal norte geográfico.

Paso 1: instalar el complemento de orientación del dispositivo

Abre el command prompt ventana y ejecute lo siguiente.

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

Paso 2: agregar botones

Este complemento es similar al accelerationenchufar. Creemos ahora dos botones enindex.html.

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

Paso 3: agregar oyentes de eventos

Ahora, agregaremos event listeners dentro de onDeviceReady funcionar en index.js.

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

Paso 4: creación de funciones

Crearemos dos funciones; la primera función generará la aceleración actual y la otra verificará los cambios de orientación. Puede ver que estamos usando elfrequency opción nuevamente para vigilar los cambios que ocurren cada tres segundos.

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

Dado que el complemento de brújula es casi el mismo que el complemento de aceleración, esta vez le mostraremos un código de error. Algunos dispositivos no tienen el sensor magnético que se necesita para que funcione la brújula. Si su dispositivo no lo tiene, se mostrará el siguiente error.

El complemento Cordova Dialogs llamará al elemento de interfaz de usuario de diálogo nativo de la plataforma.

Paso 1: diálogo de instalación

Escriba el siguiente comando en el command prompt ventana para instalar este complemento.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

Paso 2: agregar botones

Abramos ahora index.html y agregue cuatro botones, uno para cada tipo de diálogo.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

Paso 3: agregar oyentes de eventos

Ahora agregaremos los oyentes de eventos dentro del onDeviceReady funcionar en index.js. Los oyentes llamarán a la función de devolución de llamada una vez que se haga clic en el botón correspondiente.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

Paso 4A - Crear función de alerta

Como agregamos cuatro detectores de eventos, ahora crearemos las funciones de devolución de llamada para todos ellos en index.js. El primero esdialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

Si hacemos clic en el ALERT , veremos el cuadro de diálogo de alerta.

Cuando hacemos clic en el botón de diálogo, la siguiente salida se mostrará en la consola.

Paso 4B - Crear función de confirmación

La segunda función que necesitamos crear es la dialogConfirm función.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

Cuando el CONFIRM se presiona el botón, aparecerá el nuevo cuadro de diálogo.

Haremos clic en el YESbotón para responder a la pregunta. La siguiente salida se mostrará en la consola.

Paso 4C - Crear función de aviso

La tercera función es la dialogPromptfunción. Esto permite a los usuarios escribir texto en el elemento de entrada del diálogo.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

los PROMPT El botón activará un cuadro de diálogo como en la siguiente captura de pantalla.

En este cuadro de diálogo, tenemos una opción para escribir el texto. Registraremos este texto en la consola, junto con un botón en el que se hace clic.

Paso 4D - Crear función de pitido

El ultimo es el dialogBeepfunción. Se utiliza para llamar a la notificación de pitido de audio. lostimes El parámetro establecerá el número de repeticiones de la señal de pitido.

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

Cuando hacemos clic en el BEEP , escucharemos el sonido de notificación dos veces, ya que el times el valor se establece en 2.

Este complemento se utiliza para manipular el sistema de archivos nativo en el dispositivo del usuario.

Paso 1: instalación del complemento de archivo

Necesitamos ejecutar el siguiente código en el command prompt para instalar este complemento.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

Paso 2: agregar botones

En este ejemplo, le mostraremos cómo crear un archivo, escribir en un archivo, leerlo y eliminarlo. Por esta razón, crearemos cuatro botones enindex.html. También agregaremostextarea en donde se mostrará el contenido de nuestro archivo.

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

Paso 3: agregar oyentes de eventos

Agregaremos event listeners en index.js dentro de onDeviceReady función para garantizar que todo haya comenzado antes de que se utilice el complemento.

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

Paso 4A: función Crear archivo

El archivo se creará en la carpeta raíz de aplicaciones del dispositivo. Para poder acceder a la carpeta raíz, debe proporcionarsuperuseracceso a sus carpetas. En nuestro caso, la ruta a la carpeta raíz es\data\data\com.example.hello\cache. Por el momento esta carpeta está vacía.

Agreguemos ahora una función que creará el archivo log.txt. Escribiremos este código enindex.jsy envíe una solicitud al sistema de archivos. Este método utiliza WINDOW.TEMPORARY o WINDOW.PERSISTENT. El tamaño que se requerirá para el almacenamiento se valora en bytes (5MB en nuestro caso).

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Ahora podemos presionar el CREATE FILE y la alerta confirmará que hemos creado correctamente el archivo.

Ahora, podemos revisar la carpeta raíz de nuestras aplicaciones nuevamente y podemos encontrar nuestro nuevo archivo allí.

Paso 4B - Función de escritura de archivo

En este paso, escribiremos texto en nuestro archivo. Nuevamente enviaremos una solicitud al sistema de archivos y luego crearemos el escritor de archivos para poder escribirLorem Ipsum texto que asignamos al blob variable.

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Después de presionar el WRITE FILE , la alerta nos informará que la escritura se ha realizado correctamente como en la siguiente captura de pantalla.

Ahora podemos abrir log.txt y ver eso Lorem Ipsum está escrito en el interior.

Paso 4C - Función de lectura de archivo

En este paso, leeremos el archivo log.txt y lo mostraremos en el textareaelemento. Enviaremos una solicitud al sistema de archivos y obtendremos el objeto de archivo, luego estamos creandoreader. Cuando se carga el lector, asignaremos el valor devuelto atextarea.

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Cuando hacemos clic en el READ FILE botón, el texto del archivo se escribirá dentro textarea.

Paso 4D - Función Eliminar archivo

Y finalmente crearemos una función para borrar log.txt archivo.

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Ahora podemos presionar el DELETE FILEpara eliminar el archivo de la carpeta raíz de las aplicaciones. La alerta nos notificará que la operación de eliminación se realizó correctamente.

Si revisamos la carpeta raíz de las aplicaciones, veremos que está vacía.

Este complemento se utiliza para cargar y descargar archivos.

Paso 1: instalación del complemento de transferencia de archivos

Tenemos que abrir command prompt y ejecute el siguiente comando para instalar el complemento.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

Paso 2: crear botones

En este capítulo, le mostraremos cómo cargar y descargar archivos. Creemos dos botones enindex.html

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

Paso 3: agregar oyentes de eventos

Los oyentes de eventos se crearán en index.js dentro de onDeviceReadyfunción. Estamos agregandoclick eventos y callback funciones.

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

Paso 4A - Función de descarga

Esta función se utilizará para descargar los archivos del servidor al dispositivo. Subimos el archivo apostimage.orgpara hacer las cosas más simples. Probablemente desee utilizar su propio servidor. La función se coloca enindex.js y se activará cuando se presione el botón correspondiente. uri es el enlace de descarga del servidor y fileURI es la ruta a la carpeta DCIM en nuestro dispositivo.

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

Una vez que presionamos el DOWNLOAD , el archivo se descargará del postimg.orgservidor a nuestro dispositivo móvil. Podemos comprobar la carpeta especificada y ver quemyFile esta ahí.

La salida de la consola se verá así:

Paso 4B - Función de carga

Ahora creemos una función que tomará el archivo y lo subirá al servidor. Nuevamente, queremos simplificar esto tanto como sea posible, así que usaremosposttestserver.comservidor en línea para realizar pruebas. El valor uri se vinculará para su publicación enposttestserver.

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

Ahora podemos presionar el UPLOADpara activar esta función. Obtendremos una salida de consola como confirmación de que la carga se realizó correctamente.

También podemos verificar el servidor para asegurarnos de que se cargó el archivo.

La geolocalización se utiliza para obtener información sobre la latitud y la longitud del dispositivo.

Paso 1: instalación del complemento

Podemos instalar este complemento escribiendo el siguiente código para command prompt ventana.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

Paso 2: agregar botones

En este tutorial, le mostraremos cómo obtener la posición actual y cómo observar los cambios. Primero necesitamos crear botones que llamen a estas funciones.

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

Paso 3: agregar oyentes de eventos

Ahora queremos agregar detectores de eventos cuando el dispositivo esté listo. Agregaremos el ejemplo de código a continuación aonDeviceReady funcionar en index.js.

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

Paso 3: crear funciones

Deben crearse dos funciones para dos detectores de eventos. Uno se utilizará para obtener la posición actual y el otro para observar la posición.

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

En el ejemplo anterior, estamos usando dos métodos: getCurrentPosition y watchPosition. Ambas funciones utilizan tres parámetros. Una vez que hacemos clicCURRENT POSITION , la alerta mostrará los valores de geolocalización.

Si hacemos clic WATCH POSITION, la misma alerta se activará cada tres segundos. De esta manera podemos rastrear los cambios de movimiento del dispositivo del usuario.

NOTA

Este complemento utiliza GPS. A veces, no puede devolver los valores a tiempo y la solicitud devolverá un error de tiempo de espera. Por eso especificamosenableHighAccuracy: true y maximumAge: 3600000.Esto significa que si una solicitud no se completa a tiempo, usaremos el último valor conocido. En nuestro ejemplo, establecemos maximumAge en 3600000 milisegundos.

Este complemento se utiliza para obtener información sobre el idioma local de los usuarios, la fecha y la zona horaria, la moneda, etc.

Paso 1: instalación del complemento de globalización

Abierto command prompt e instale el complemento escribiendo el siguiente código

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

Paso 2: agregar botones

Agregaremos varios botones a index.html para poder llamar a diferentes métodos que crearemos más adelante.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

Paso 3: agregar oyentes de eventos

Los oyentes de eventos se agregarán dentro getDeviceReady funcionar en index.js para asegurarnos de que nuestra aplicación y Cordova se carguen antes de comenzar a usarla.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

Paso 4A - Función de idioma

La primera función que estamos usando devuelve la etiqueta de idioma BCP 47 del dispositivo del cliente. UsaremosgetPreferredLanguagemétodo. La función tiene dos parámetros onSuccess yonError. Estamos agregando esta función enindex.js.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

Una vez que presionamos el LANGUAGE , la alerta se mostrará en la pantalla.

Paso 4B - Función de configuración regional

Esta función devuelve la etiqueta BCP 47 para la configuración local del cliente. Esta función es similar a la que creamos antes. La única diferencia es que estamos usandogetLocaleName método esta vez.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

Cuando hacemos clic en el LOCALE , la alerta mostrará nuestra etiqueta de configuración regional.

Paso 4C - Función de fecha

Esta función se utiliza para devolver la fecha de acuerdo con la configuración regional y de zona horaria del cliente. date parámetro es la fecha actual y options el parámetro es opcional.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

Ahora podemos ejecutar la aplicación y presionar DATE para ver la fecha actual.

La última función que mostraremos es devolver valores de moneda de acuerdo con la configuración del dispositivo del cliente y el código de moneda ISO 4217. Puedes ver que el concepto es el mismo.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

los CURRENCY El botón activará una alerta que mostrará el patrón de moneda de los usuarios.

Este complemento ofrece otros métodos. Puedes verlo todo en la siguiente tabla.

método parámetros detalles
getPreferredLanguage onSuccess, onError Devuelve el idioma actual del cliente.
getLocaleName onSuccess, onError Devuelve la configuración regional actual del cliente.
dateToString fecha, onSuccess, onError, opciones Devuelve la fecha según la configuración regional y la zona horaria del cliente.
stringToDate dateString, onSuccess, onError, opciones Analiza una fecha según la configuración del cliente.
getCurrencyPattern currencyCode, onSuccess, onError Devuelve el patrón de moneda del cliente.
getDatePattern onSuccess, onError, opciones Devuelve el patrón de fecha del cliente.
getDateNames onSuccess, onError, opciones Devuelve una serie de nombres de meses, semanas o días según la configuración del cliente.
isDayLightSavingsTime fecha, SuccessCallback, errorCallback Se utiliza para determinar si el horario de verano está activo según la zona horaria y el calendario del cliente.
getFirstDayOfWeek onSuccess, onError Devuelve el primer día de la semana según la configuración del cliente.
numberToString number, onSuccess, onError, opciones Devuelve el número según la configuración del cliente.
stringToNumber cadena, onSuccess, onError, opciones Analiza un número según la configuración del cliente.
getNumberPattern onSuccess, onError, opciones Devuelve el patrón numérico de acuerdo con la configuración del cliente.

Este complemento se utiliza para abrir el navegador web dentro de la aplicación Cordova.

Paso 1: instalación del complemento

Necesitamos instalar este complemento en command prompt ventana antes de que podamos usarlo.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Paso 2: botón Agregar

Agregaremos un botón que se usará para abrir inAppBrowser ventana en index.html.

Paso 3: agregar escucha de eventos

Ahora agreguemos un detector de eventos para nuestro botón en onDeviceReady funcionar en index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Paso 4 - Crear función

En este paso, estamos creando una función que abrirá el navegador dentro de nuestra aplicación. Lo estamos asignando alref variable que podemos usar más tarde para agregar detectores de eventos.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Si presionamos BROWSER , veremos el siguiente resultado en pantalla.

La consola también escuchará eventos. loadstart El evento se activará cuando la URL comience a cargarse y loadstopse activará cuando se cargue la URL. Lo podemos ver en consola.

Una vez que cerramos el navegador, exit el evento se disparará.

Hay otras opciones posibles para la ventana InAppBrowser. Lo explicaremos en la tabla a continuación.

S. No opción y detalles
1

location

Se utiliza para activar o desactivar la barra de ubicación del navegador. Los valores sonyes o no.

2

hidden

Se usa para ocultar o mostrar inAppBrowser. Los valores sonyes o no.

3

clearCache

Se utiliza para borrar la caché de cookies del navegador. Los valores sonyes o no.

4

clearsessioncache

Se utiliza para borrar la caché de cookies de sesión. Los valores sonyes o no.

5

zoom

Se utiliza para ocultar o mostrar los controles de zoom del navegador de Android. Los valores sonyes o no.

6

hardwareback

yes para usar el botón de retroceso del hardware para navegar hacia atrás a través del historial del navegador. no para cerrar el navegador una vez que se hace clic en el botón Atrás.

Nosotros podemos usar ref(referencia) variable para algunas otras funcionalidades. Le mostraremos solo ejemplos rápidos de ello. Para eliminar los oyentes de eventos, podemos usar:

ref.removeEventListener(eventname, callback);

Para cerrar InAppBrowser podemos usar -

ref.close();

Si abrimos una ventana oculta, podemos mostrarla:

ref.show();

Incluso el código JavaScript se puede inyectar en InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

El mismo concepto se puede utilizar para inyectar CSS:

var details = "css/file/url"
ref.inserCSS(details, callback);

El complemento multimedia Cordova se utiliza para grabar y reproducir sonidos de audio en las aplicaciones Cordova.

Paso 1: instalación del complemento multimedia

El complemento de medios se puede instalar ejecutando el siguiente código en command prompt ventana.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

Paso 2: agregar botones

En este tutorial, crearemos un reproductor de audio simple. Creemos los botones que necesitamos enindex.html.

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

Paso 3: agregar oyentes de eventos

Ahora necesitamos agregar detectores de eventos para nuestros botones dentro onDeviceReady funcionar dentro index.js.

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

Paso 4A - Función de reproducción

La primera función que vamos a agregar es playAudio. Estamos definiendomyMediafuera de la función porque queremos usarla en funciones que se van a agregar más adelante (pausa, detener, subir volumen y bajar volumen). Este código se coloca enindex.js archivo.

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

Podemos hacer clic PLAY para iniciar la música de piano desde el src camino.

Paso 4B - Funciones de pausa y detención

Las siguientes funciones que necesitamos es pauseAudio y stopAudio.

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

Ahora podemos pausar o detener el sonido del piano haciendo clic en PAUSE o STOP botones.

Paso 4C - Funciones de volumen

Para configurar el volumen, podemos usar setVolumemétodo. Este método toma un parámetro con valores de0 a 1. Estableceremos el valor inicial en0.5.

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

Una vez que presionamos VOLUME UP o VOLUME DOWN podemos cambiar el valor del volumen por 0.1.

La siguiente tabla muestra otros métodos que proporciona este complemento.

S. No Método y detalles
1

getCurrentPosition

Devuelve la posición actual de un audio.

2

getDuration

Devuelve la duración de un audio.

3

play

Se utiliza para iniciar o reanudar el audio.

4

pause

Se utiliza para pausar el audio.

5

release

Libera los recursos de audio del sistema operativo subyacente.

6

seekTo

Se utiliza para cambiar la posición de un audio.

7

setVolume

Se utiliza para configurar el volumen del audio.

8

startRecord

Empiece a grabar un archivo de audio.

9

stopRecord

Deje de grabar un archivo de audio.

10

stop

Deje de reproducir un archivo de audio.

Este complemento se utiliza para acceder a las opciones de captura del dispositivo.

Paso 1: instalación del complemento de captura de medios

Para instalar este complemento, abriremos command prompt y ejecuta el siguiente código -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

Paso 2: agregar botones

Como queremos mostrarte cómo capturar audio, imagen y video, crearemos tres botones en index.html.

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

Paso 3: agregar oyentes de eventos

El siguiente paso es agregar detectores de eventos dentro onDeviceReady en index.js.

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

Paso 4A - Función de captura de audio

La primera función de devolución de llamada en index.js es audioCapture. Para iniciar la grabadora de sonido, usaremoscaptureAudiométodo. Estamos usando dos opciones:limit permitirá grabar solo un clip de audio por operación de captura y duration es el número de segundos de un clip de sonido.

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Cuando presionamos AUDIO , se abrirá la grabadora de sonido.

La consola mostrará la matriz devuelta de objetos capturados por los usuarios.

Paso 4B - Función de captura de imagen

La función de captura de imagen será la misma que la anterior. La única diferencia es que estamos usandocaptureImage método esta vez.

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Ahora podemos hacer clic IMAGE para iniciar la cámara.

Cuando tomemos una foto, la consola registrará la matriz con el objeto de imagen.

Paso 4C - Función de captura de video

Repitamos el mismo concepto para capturar video. UsaremosvideoCapture método esta vez.

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Si presionamos VIDEO , la cámara se abrirá y podremos grabar el video.

Una vez que se guarda el video, la consola devolverá la matriz una vez más. Esta vez con objeto de video adentro.

Este complemento proporciona información sobre la red del dispositivo.

Paso 1: instalación del complemento de información de red

Para instalar este complemento, abriremos command prompt y ejecuta el siguiente código -

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

Paso 2: agregar botones

Creemos un botón en index.html que se utilizará para obtener información sobre la red.

<button id = "networkInfo">INFO</button>

Paso 3: agregar oyentes de eventos

Agregaremos tres oyentes de eventos dentro onDeviceReady funcionar en index.js. Uno escuchará los clics en el botón que creamos antes y los otros dos escucharán los cambios en el estado de la conexión.

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

Paso 4: creación de funciones

networkInfoLa función devolverá información sobre la conexión de red actual una vez que se haga clic en el botón. Estamos llamandotypemétodo. Las otras funciones sononOffline y onOnline. Estas funciones están escuchando los cambios de conexión y cualquier cambio activará el mensaje de alerta correspondiente.

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

Cuando iniciamos la aplicación conectada a la red, onOnline La función activará la alerta.

Si presionamos INFO botón la alerta mostrará el estado de nuestra red.

Si nos desconectamos de la red, onOffline se llamará a la función.

Este complemento se utiliza para mostrar una pantalla de bienvenida al iniciar la aplicación.

Paso 1: instalación del complemento de pantalla de bienvenida

El complemento de pantalla de bienvenida se puede instalar en command prompt ventana ejecutando el siguiente código.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

Paso 2 - Agregar pantalla de bienvenida

Agregar una pantalla de bienvenida es diferente de agregar los otros complementos de Cordova. Tenemos que abrirconfig.xml y agregue los siguientes fragmentos de código dentro del widget elemento.

El primer fragmento es SplashScreen. Tienevalue propiedad que es el nombre de las imágenes en platform/android/res/drawable- carpetas. Córdoba ofrece por defectoscreen.pngimágenes que estamos usando en este ejemplo, pero probablemente desee agregar sus propias imágenes. Lo importante es agregar imágenes para vista vertical y horizontal y también para cubrir diferentes tamaños de pantalla.

<preference name = "SplashScreen" value = "screen" />

El segundo fragmento que debemos agregar es SplashScreenDelay. Estamos poniendovalue a 3000 para ocultar la pantalla de bienvenida después de tres segundos.

<preference name = "SplashScreenDelay" value = "3000" />

La última preferencia es opcional. Si el valor se establece entrue, la imagen no se estirará para ajustarse a la pantalla. Si está configurado enfalse, se estirará.

<preference name = "SplashMaintainAspectRatio" value = "true" />

Ahora, cuando ejecutemos la aplicación, veremos la pantalla de bienvenida.

Este complemento se utiliza para conectarse a la funcionalidad de vibración del dispositivo.

Paso 1: instalación del complemento Vibration

Podemos instalar este complemento en command prompt ventana ejecutando el siguiente código:

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

Paso 2: agregar botones

Una vez que el complemento está instalado, podemos agregar botones en index.html que se utilizará más tarde para activar la vibración.

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

Paso 3: agregar oyentes de eventos

Ahora vamos a agregar detectores de eventos dentro onDeviceReady en index.js.

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

Paso 4: crear funciones

Este complemento es muy fácil de usar. Crearemos dos funciones.

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

La primera función está tomando el parámetro de tiempo. Este parámetro se utiliza para configurar la duración de la vibración. El dispositivo vibrará durante tres segundos una vez que presionemosVIBRATION botón.

La segunda función está usando patternparámetro. Esta matriz le pedirá al dispositivo que vibre durante un segundo, luego espere un segundo y luego repita el proceso nuevamente.

Este complemento nos permite implementar la política de lista blanca para la navegación de la aplicación. Cuando creamos un nuevo proyecto de Córdoba, elwhitelistEl complemento está instalado e implementado de forma predeterminada. Puedes abrir elconfig.xml archivo para ver allow-intent configuración predeterminada proporcionada por Cordova.

Lista blanca de navegación

En el ejemplo simple a continuación, permitimos enlaces a alguna URL externa. Este código se coloca enconfig.xml. Navegación afile:// Las URL están permitidas de forma predeterminada.

<allow-navigation href = "http://example.com/*" />

El signo de asterisco, *, se utiliza para permitir la navegación a varios valores. En el ejemplo anterior, permitimos la navegación a todos los subdominios delexample.com. Lo mismo se puede aplicar al protocolo o al prefijo del host.

<allow-navigation href = "*://*.example.com/*" />

Lista blanca de intenciones

También está el allow-intentelemento que se utiliza para especificar qué URL pueden abrir el sistema. Puedes ver en elconfig.xml que Córdoba ya permitió la mayoría de los enlaces necesarios para nosotros.

Lista blanca de solicitudes de red

Cuando miras dentro config.xml archivo, hay <access origin="*" />elemento. Este elemento permite todas las solicitudes de red a nuestra aplicación a través de los ganchos de Cordova. Si desea permitir solo solicitudes específicas, puede eliminarlo del config.xml y configurarlo usted mismo.

Se utiliza el mismo principio que en los ejemplos anteriores.

<access origin = "http://example.com" />

Esto permitirá todas las solicitudes de red de http://example.com.

Política de seguridad de contenido

Puede ver la política de seguridad actual de su aplicación dentro del head elemento en index.html.

<meta http-equiv = "Content-Security-Policy" content = "default-src 
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 
   'self' 'unsafe-inline'; media-src *">

Ésta es la configuración predeterminada. Si quieres permitir todo desde el mismo origen yexample.com, entonces puedes usar -

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

También puede permitir todo, pero restringir CSS y JavaScript al mismo origen.

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

Dado que este es un tutorial para principiantes, recomendamos las opciones predeterminadas de Cordova. Una vez que se familiarice con Cordova, puede probar algunos valores diferentes.

Cordova se utiliza para crear aplicaciones móviles híbridas, por lo que debe considerar esto antes de elegirlo para su proyecto. A continuación, se muestran las mejores prácticas para el desarrollo de aplicaciones de Cordova.

Aplicaciones de una sola página

Este es el diseño recomendado para todas las aplicaciones de Cordova. SPA está utilizando un enrutador del lado del cliente y la navegación cargada en la página única (generalmenteindex.html). El enrutamiento se maneja a través de AJAX. Si ha seguido nuestros tutoriales, probablemente haya notado que casi todos los complementos de Cordova deben esperar hasta que el dispositivo esté listo antes de poder usarlo. El diseño de SPA mejorará la velocidad de carga y el rendimiento general.

Toque Eventos

Dado que Cordova se usa para el mundo móvil, es natural usar touchstart y touchend eventos en lugar de clickeventos. Los eventos de clic tienen un retraso de 300 ms, por lo que los clics no se sienten nativos. Por otro lado, los eventos táctiles no son compatibles con todas las plataformas. Debe tener esto en cuenta antes de decidir qué utilizar.

Animaciones

Siempre debes usar hardware acelerado CSS Transitions en lugar de animaciones de JavaScript, ya que funcionarán mejor en dispositivos móviles.

Almacenamiento

Utilice el almacenamiento en caché tanto como sea posible. Las conexiones de red móvil suelen ser malas, por lo que debe minimizar las llamadas de red dentro de su aplicación. También debe controlar el estado fuera de línea de la aplicación, ya que habrá ocasiones en que los dispositivos del usuario estarán fuera de línea.

Desplazamiento

La mayoría de las veces, la primera parte lenta dentro de su aplicación serán las listas de desplazamiento. Hay un par de formas de mejorar el rendimiento de desplazamiento de la aplicación. Nuestra recomendación es utilizar el desplazamiento nativo. Cuando hay muchos elementos en la lista, debe cargarlos parcialmente. Utilice cargadores cuando sea necesario.

Imagenes

Las imágenes también pueden ralentizar la aplicación móvil. Debes usar sprites de imágenes CSS siempre que sea posible. Intente ajustar las imágenes a la perfección en lugar de escalarlas.

Estilos CSS

Debe evitar las sombras y los degradados, ya que ralentizan el tiempo de renderizado de la página.

Simplificación

El DOM del navegador es lento, por lo que debería intentar minimizar la manipulación del DOM y la cantidad de elementos DOM.

Pruebas

Asegúrese de probar su aplicación en tantos dispositivos y versiones de sistemas operativos como sea posible. Si la aplicación funciona sin problemas en un dispositivo, no significa necesariamente que funcionará en otro dispositivo o plataforma.