Share
¿Quiere aprender a usar PhoneGap, pero no sabe por dónde empezar? Únase a nosotros para crear “Sculder”, no solo un homenaje a una excelente serie de televisión de ciencia ficción, sino también una aplicación móvil nativa para el creyente en usted.!
En nuestra primera parte analizamos la configuración de nuestro entorno de desarrollo y la puesta en marcha de PhoneGap en los SDK de iOS y Android. En esta segunda parte de nuestra serie PhoneGap, veremos algunas de las API de dispositivos a las que PhoneGap nos da acceso y discutiremos cómo podríamos usarlas..
Para esta parte de la serie, solo veremos algunas de las funciones de PhoneGap, por lo que solo configuraremos una prueba por ahora..
Continúe y configure su proyecto en el entorno que haya elegido: Xcode para iOS o Eclipse para Android. Señalaré cualquier diferencia entre los dos a medida que avancemos si es necesario..
Comenzaremos con un poco de HTML básico e incluiremos el archivo Phongap.js. Si ha creado su proyecto con Xcode, este es prácticamente el HTML básico que se crea..
Aceleración
A lo largo de esta parte de la serie, vamos a querer poder probar en al menos un dispositivo real ya que el simulador tiene limitaciones cuando se trata de sensores de dispositivos como el acelerómetro y la cámara. Para que un dispositivo iOS funcione como un dispositivo de prueba, debe tener una cuenta de desarrollador pagada. Luego, cuando conecte su dispositivo a la computadora y ejecute Xcode, tiene la opción de convertir ese teléfono en un teléfono de desarrollo. Ir a través de la configuración y ahora, cuando elige construir y ejecutar su aplicación, puede seleccionar su dispositivo desde el menú desplegable.
Para Android, es casi lo mismo, excepto que haces esto en Eclipse. Conecte su teléfono y asegúrese de tenerlo en el modo de depuración VIA USB (en la configuración del teléfono) y luego, cuando desee ejecutar su aplicación, seleccione Ejecutar como aplicación de Android.
Echemos un vistazo a algunos de los conceptos básicos del sensor de dispositivo.
El Acelerómetro proporciona información sobre el movimiento de los dispositivos en los tres ejes. Tenemos un par de métodos para el acelerómetro dentro de PhoneGap que son getCurrentAcceleration, watchAcceleration y ClearWatch
También hay algunos argumentos para pasar a través del método Acelerómetro. acelerómetro de éxito, acelerómetro y acelerómetroOpciones.
Utilizamos nuestro primer método., accelerometer.getCurrentAcceleration, como sigue.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
La aceleración actual se devuelve mediante la función acelerómetro de éxito y todos los datos que necesitamos están en el aceleración Objeto que devolvemos a nuestra función de éxito. Vamos a tener un ejemplo en marcha. Tome nuestro diseño básico que configuramos al principio de esta parte y añádalo..
Aceleración
Cuando ejecute esto en un simulador o dispositivo, será recibido con una sola alerta en carga. Lo que debemos hacer es observar la Aceleración a intervalos y luego generar los datos. Podemos hacer esto con el watchAcceleration método. Lo usamos con lo siguiente:
var watchID = navigator.accelerometer.watchAcceleration (Success, Error, [Options]);
los watchID es una referencia a la que podemos adjuntar nuestras opciones y también una manera que podemos usar cuando usamos el ClearWatch método.
Continuemos y reemplacemos nuestro JavaScript más antiguo con lo siguiente:
Accentsconagua
// espera a que PhoneGap cargue document.addEventListener ("deviceready", loaded, false); // PhoneGap está lista para cargar la función () startWatch (); // Comience a observar la función de aceleración startWatch () // Actualizar aceleración cada 3 segundos var options = frecuencia: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, options); // Deja de ver la función de aceleración stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = nulo; // Función de éxito onSuccess (aceleración) var element = document.getElementById ('acelerómetro'); element.innerHTML = 'Aceleración X:' + acceleration.x + '
'+' Aceleración Y: '+ aceleración.y +'
'+' Aceleración Z: '+ acceleration.z +'
'+' Marca de tiempo: '+ acceleration.timestamp +'
'; // Función de error onError () alert ('onError!'); Como puedes ver, pasamos en una frecuencia Opción en el método de reloj. Esto es en milisegundos, por lo que cada 3 segundos ese método se activará nuevamente, y en caso de éxito, actualizaremos el HTML de un elemento con el ID de acelerómetro. Solo necesitamos incluir ese elemento en nuestro HTML actual..
Esperando el acelerómetro ...
Ahora, si sigue adelante y carga la aplicación, verá que los datos del acelerómetro cambian..
Si está utilizando los simuladores en lugar de los dispositivos reales, no verá ningún cambio en la salida del acelerómetro.
Entonces, eso es todo para acceder a la API del dispositivo acelerómetro. Ahora echemos un vistazo a cómo usarlo para detectar un movimiento en PhoneGap.
Para detectar un batido con PhoneGap vamos a deshacernos de nuestro en el éxito funciona y reescribe nuestra startWatch función. Para saber si el dispositivo ha sido sacudido, tendremos que saber cuál fue la orientación anterior para poder compararla con la orientación actual. Hacemos esto estableciendo una variable al comienzo de la startWatch función.
var previousReading = x: null, y: null, z: null
A continuación, iniciamos la función watchAcceleration..
navigator.accelerometer.watchAcceleration ();
En el éxito de obtener la aceleración, estableceremos un par de variables que nos ayudarán a detectar una sacudida..
cambios var = , ligado = 0.2;
Ahora podemos comparar la aceleración anterior con la aceleración actual y si va más allá de lo que hemos establecido. Unido variable también, entonces podemos disparar nuestra función sacudida.
if (previousReading.x! == null) changes.x = Math.abs (previousReading.x, acceleration.x); changes.y = Math.abs (previousReading.y, acceleration.y); changes.z = Math.abs (previousReading.z, acceleration.z); if (changes.x> bound && changes.y> bound && changes.z> bound) shaken ();
Luego podemos configurar la lectura anterior a la lectura actual para la próxima ronda.
previousReading = x: acceleration.x, y: acceleration.y, z: acceleration.z
Finalmente, no olvidemos escribir una función "sacudida" para manejar realmente la sacudida. Por ahora solo alertará un mensaje..
función shaken () alert ("Shaken"); Deberá recordar agregar el controlador de errores y la frecuencia hasta el final en el watchAcceleration método.
Tu código final ahora debería verse algo como esto:
Aceleración
Descubrí que el límite de 0.2 era bastante bueno, pero es posible que desee intentar aumentarlo después de las pruebas. Ahora hemos cubierto lo que se puede lograr con los datos del acelerómetro y cómo capturarlos, así que echemos un vistazo a la cámara..
La cámara es probablemente una de las funcionalidades más utilizadas en los teléfonos inteligentes en la actualidad, en particular con la resolución de la cámara en la mayoría de los teléfonos, que alcanza rápidamente las versiones estándar de apuntar y disparar. Afortunadamente, PhoneGap nos brinda una manera bastante fácil de capturar imágenes de la cámara del dispositivo e incorporarlas rápidamente a nuestra aplicación..
El método que vamos a utilizar es camera.getPicture () y al igual que el acelerómetro se llama prácticamente de la misma manera y toma tres parámetros. El método de firmas se ve algo así: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Como verá, hay muchas más opciones a considerar cuando se trata con la cámara del dispositivo que con el acelerómetro..
Los parámetros opcionales que puede pasar son los siguientes:
calidadtipo de destinotipo de fuentepermitir editarencodingTypeancho de blancoobjetivoHeightComo habrás adivinado, calidad es la calidad con la que se guarda la imagen, esto toma un número de 0 a 100. La tipo de destino variable es el formato de la imagen devuelta. DATA_URL es una cadena codificada en base64 y FILE_URI es una imagen real URI (jpeg / png). los tipo de fuente parámetro es donde desea obtener la imagen de origen, que puede ser desde el LIBRERÍA FOTOGRÁFICA, CÁMARA o SAVEDPHOTOALBUM. los permitir editar La opción permite editar la imagen antes de guardarla.. Tipo de codificación define la codificación de la imagen devuelta cuando se usa FILE_URI, desde la cual puedes usar cualquiera JPEG o Png. ancho de blanco y objetivoHeight es a lo que se escalará la imagen con la relación de aspecto mantenida. Finalmente, hay Tipo de medio que solo funciona al seleccionar SAVEDPHOTOALBUM y donde puede definir lo que el usuario puede seleccionar IMAGEN, VÍDEO o TODOS LOS MEDIOS.
Entonces, vamos a poner nuestra cámara en marcha. Primero vamos a tener un botón que cuando haga clic en iniciará nuestra cámara. Luego, cuando se tome la foto, devolveremos la imagen base64 codificada como una miniatura. El código fuente se ve así:
Foto de captura
![]()
Como antes, esperamos que se cargue PhoneGap. Cuando se completa la carga, podemos configurar las opciones para el tipo de destino y el tipo de fuente, por defecto estos están configurados para CÁMARA y DATA_URL. Cuando se hace clic en el botón, disparamos capturar foto función. Sobre el exito, capturar foto comienza nuestro getPhoto función. Nuestra función recibe los datos de la imagen en el formato que especificamos, y podemos hacer con eso lo que queremos. Todo lo que realmente estamos haciendo es obtener un elemento HTML especificado y poner nuestros datos en el src de ese elemento.
Ejecute y pruebe su código en su dispositivo y, después de tomar una foto y hacer una prueba, debería tener algo como el siguiente:
También es posible editar la foto después de la captura, todo lo que tenemos que hacer es pasar a través de allowEdit: true Parámetro en las opciones, una vez tomada la foto. Se moverá a la pantalla de edición, donde puede hacer zoom y recortar la foto. Podemos usar el siguiente código cuando capturamos la imagen:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Hay algunas peculiaridades a la permitir editar Opción digna de mención. Actualmente, esto solo funciona en iOS y se ignora en Blackberry, Android, Palm y Windows 7.
Si quisiéramos obtener una foto del álbum de fotos u otro almacenamiento (como localstorage) usaríamos pictureSource.PHOTOLIBRARY.
Esos son los conceptos básicos que necesitamos para comenzar a utilizar la cámara en PhoneGap. Juegue con él y pruebe algunas cosas con diferentes calidades, tipos y tamaños de imagen..
Es posible que queramos almacenar la foto tomada en otro lugar que no sea el álbum de fotos en el dispositivo. De hecho, es muy probable que este sea el caso. Probablemente también queramos almacenar otra información. Hay varias maneras de hacer esto para usar el almacenamiento del dispositivo, una de ellas es usar WebSQL, la otra es usar WebStorage, ambas definidas por el W3C. También puede enviar los datos a un servidor remoto si desea servirlos en una aplicación en la nube (Instagr.am), o puede ir un paso más allá y usar Lawnchair o PersistenceJS
.
Personalmente prefiero el método de almacenamiento web y para este proyecto es perfecto.
Podemos hacer uso de WebStorage con la siguiente sintaxis:
// Almacenar los datos window.localStorage.setItem ("key", "value"); // recupera los datos var value = window.localStorage.getItem ("key"); // el valor es ahora igual a "valor" // elimina el valor window.localStorage.removeItem ("clave"); Con esta sintaxis básica, tenemos la capacidad de almacenar la imagen codificada en base64 en el almacenamiento local y recuperarla cuando sea necesario.
La geolocalización proporciona información de ubicación del dispositivo. Muchos dispositivos ya pueden usar la capacidad de los navegadores para usar la API de geolocalización y, si usa la implementación de PhoneGap, la usa si está disponible.
La geolocalización de PhoneGap tiene 3 métodos., getCurrentPosition, watchPosition y ClearWatch. los getCurrentPosition método devuelve la ubicación actual del dispositivo con un objeto de posición que contiene las propiedades para:
El uso básico de la funcionalidad de Geolocalización debería parecer bastante familiar a estas alturas:
navigator.geolocation.getCurrentPosition (éxito, error);
Y luego podemos hacer algo como lo siguiente:
función onSuccess (posición) var el = document.getElementById ('ubicación'); el.innerHTML = 'Latitude:' + position.coords.latitude + '
'+' Longitud: '+ position.coords.longitude +'
'+' Altitud: '+ position.coords.altitude +'
'+' Precisión: '+ position.coords.accuracy +'
'+' Precisión de altitud: '+ position.coords.altitudeAccuracy +'
'+' Encabezado: '+ position.coords.heading +'
'+' Velocidad: '+ position.coords.speed +'
'+' Marca de tiempo: '+ nueva Fecha (position.timestamp) +'
'; Su código completo debería ser similar al siguiente:
Geolocalización Buscando la geolocalización ...
Esto le dará la información de posición en el momento en que éxito La función está activada. Si queremos ver constantemente la geolocalización del dispositivo utilizamos el navigator.geolocation.watchPosition método en lugar de navigator.geolocation.getCurrentPosition, Pasando la frecuencia que nos gustaría actualizar. Nuestro código ahora debería verse algo como esto:
Geolocalización Buscando la geolocalización ...
Si ejecuta su aplicación ahora, debería terminar con una aplicación que se vea así:
Al igual que el acelerómetro, la geolocalización también tiene una ClearWatch Método para dejar de observar los cambios, que puede utilizar con el siguiente código:
navigator.geolocation.clearWatch (watchID);
Con eso, ahora tenemos el conocimiento para usar la API de geolocalización en PhoneGap para nuestra aplicación. Es posible que solo queramos registrar nuestra ubicación en un momento dado y almacenarla de forma local o remota, también podríamos registrar nuestro movimiento a lo largo del tiempo y almacenarlo. Lo que sea que queramos hacer con él, ahora sabemos cómo obtener esa información..
Además de la funcionalidad que PhoneGap ofrece fuera de la caja, hay una gran cantidad de complementos disponibles para PhoneGap para cosas como un selector de fecha, un cargador de archivos y Paypal. Como no usaremos ningún complemento en esta aplicación, revisar el uso y la instalación de los complementos está fuera del alcance de esta serie, pero debe saber qué opciones tiene al trabajar con PhoneGap, así que asegúrese de visitar el GitHub proyecto de complementos y la wiki para obtener información sobre cómo ponerse en marcha con ellos. Si desea ver un tutorial por separado sobre el uso de los complementos de PhoneGap e incluso escribir el suyo, asegúrese de informarnos en los comentarios.!
Si bien no hemos iniciado el desarrollo de una aplicación, ahora estamos funcionando con PhoneGap, podemos probar en un dispositivo y simulador, tener un buen conocimiento de cómo funcionan las API de PhoneGap y cómo podemos usar la API en una aplicación. En la siguiente parte, comenzaremos a construir Sculder, nuestra aplicación de ejemplo.!
