Advertisement
  1. Code
  2. PhoneGap

PhoneGap Desde Cero: API de dispositivos

Scroll to top
Read Time: 14 min
This post is part of a series called PhoneGap From Scratch.
PhoneGap From Scratch: Introduction
PhoneGap From Scratch: App Template

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

¿Quieres aprender a usar PhoneGap, pero no sabes por dónde empezar? Únase a nosotros mientras preparamos "Sculder", ¡no solo un tributo a una excelente serie de televisión de ciencia ficción, sino 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 funcionamiento de PhoneGap en los SDK de iOS y Android. En esta segunda parte de nuestra serie PhoneGap, vamos a ver algunas de las API de dispositivos a las que PhoneGap nos da acceso y cómo podemos usarlas.


Configurando nuestro proyecto

Para esta parte de la serie, solo vamos a ver algunas de las funcionalidades de PhoneGap, así que solo haremos una prueba por el momento.

Continúa y configura tu proyecto en el entorno que elijas: Xcode para iOS o Eclipse para Android. Señalaré cualquier diferencia entre los dos a medida que avance si es necesario.

Comenzaremos con algunos HTML básicos e incluiremos el archivo Phongap.js. Si ha creado su proyecto con Xcode, este es básicamente el HTML básico que se crea.


Despliegue en un dispositivo de prueba

A lo largo de esta parte de la serie vamos a querer probar 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 con iOS funcione y se ejecute como dispositivo de prueba, debe tener una cuenta de desarrollador paga, luego, cuando conecta su dispositivo a su computadora y ejecuta Xcode, tiene la opción de convertirlo en un teléfono de desarrollo. Realice la instalación y ahora cuando elija construir y ejecutar su aplicación, puede seleccionar su dispositivo desde el menú desplegable.

Para Android, es prácticamente lo mismo, excepto que haces esto en Eclipse. Conecte su teléfono y asegúrese de tenerlo en 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 del dispositivo.


La API de acelerómetro

El acelerómetro proporciona retroalimentación para el movimiento de los dispositivos en los tres ejes. Tenemos un par de métodos para el Acelerómetro en PhoneGap que son getCurrentAcceleration, watchAcceleration y clearWatch

También hay algunos argumentos para pasar con el método de acelerómetro. acelerómetroSuccess, accelerometerError y accelerometerOptions.

Usamos nuestro primer método, accelerometer.getCurrentAcceleration, de la siguiente manera.

La aceleración actual se devuelve utilizando la función acelerómetroSuccess y todos los datos que necesitamos están en el objeto acceleration que devolvemos a nuestra función de éxito. Permite obtener un ejemplo en funcionamiento. Toma nuestro diseño básico que configuramos al principio de esta parte y vamos a agregarlo.

Cuando ejecuta esto en un simulador o dispositivo, será recibido con una sola alerta en la carga. Lo que tenemos que hacer es mirar la aceleración a intervalos y luego emitir los datos. Podemos hacer esto con el método watchAcceleration. Lo usamos con lo siguiente:

El ID de visualización watchID es una referencia a la que podemos adjuntar nuestras opciones y también una forma que podemos usar al usar el método clearWatch.

Avancemos y reemplacemos nuestro JavaScript anterior con lo siguiente:

Como puede ver, pasamos una opción de frecuencia frequency al método de observación. Esto es en milisegundos, por lo que cada 3 segundos ese método se disparará nuevamente, y si lo logramos, actualizaremos el HTML de un elemento con la ID del accelerometer. Solo debemos incluir ese elemento en nuestro HTML actual.

Ahora, si continúa y carga la aplicación, verá que los datos del acelerómetro cambian.

PhoneGap From ScratchPhoneGap From ScratchPhoneGap From Scratch

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 batido en PhoneGap.

Eventos de sacudidas

Para detectar un batido usando PhoneGap vamos a deshacernos de nuestra función onSuccess y reescribir nuestra función startWatch. Para saber si el dispositivo se ha agitado, vamos a tener que saber cuál era la orientación anterior para compararla con la orientación actual. Hacemos esto al establecer una variable al comienzo de la función startWatch.

A continuación, comenzamos la función watchAcceleration.

Sobre el éxito de obtener la aceleración, estableceremos un par de variables que nos ayudarán a detectar una sacudida.

Ahora podemos comparar la aceleración anterior con la aceleración actual y si va más allá de lo que hemos bound también nuestra variable vinculada, entonces podemos disparar nuestra función sacudida.

Luego podemos establecer la lectura anterior a la lectura actual para la próxima ronda.

Finalmente, no olvidemos escribir una función "sacudida" para manejar realmente el batido. Por ahora solo alertará un mensaje.

Tendrá que recordar agregarle manejador de errores y frecuencia hasta el final en el método watchAcceleration.

Su código final ahora debería verse más o menos así:

Descubrí que el límite de 0.2 era bastante bueno, pero es posible que desee intentar aumentarlo después de la prueba. Ahora hemos cubierto lo que se puede lograr con los datos del acelerómetro y cómo capturarlo, así que echemos un vistazo a la cámara.


La API de la cámara

La cámara es probablemente una de las funcionalidades más utilizadas en los teléfonos inteligentes de hoy en día, especialmente con la resolución de la cámara en la mayoría de los teléfonos que alcanzan rápidamente más versiones estándar de apuntar y disparar. Afortunadamente, PhoneGap nos brinda una manera bastante fácil de capturar imágenes desde 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 de la misma manera y toma tres parámetros. Las firmas de método se parecen a esto: navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] ). Como verá, hay muchas más opciones para considerar al tratar con la cámara del dispositivo que cuando se trata del acelerómetro.

Los parámetros opcionales que puede pasar son los siguientes:

  • quality
  • destinationType
  • sourceType
  • allowEdit
  • encodingType
  • targetWidth
  • targetHeight

Como podría haber adivinado, quality es la calidad en la que se guarda la imagen, esto toma un número del 0 al 100. La variable destinationType es el formato de la imagen devuelta. DATA_URL es una cadena codificada en base64 y FILE_URI es una URI de imagen real (jpeg / png). El parámetro sourceType es el lugar donde desea obtener la imagen de origen, que puede ser de PHOTOLIBRARY, CAMERA o SAVEDPHOTOALBUM. La opción allowEdit permite editar la imagen antes de guardarla. EncodingType define la codificación de la imagen devuelta cuando se utiliza FILE_URI, desde donde puede usar JPEG o PNG. targetWidth y targetHeight es a lo que se ajustará la escala de la imagen manteniendo la relación de aspecto. Finalmente, hay MediaType que solo funciona cuando se selecciona SAVEDPHOTOALBUM y donde es posible que desee definir lo que el usuario puede seleccionar de PICTURE, VIDEO o ALLMEDIA.

Entonces, empecemos nuestra cámara. Primero, vamos a tener un botón que, al hacer clic, iniciará nuestra cámara. Luego, cuando se toma la foto, devolveremos la imagen base64 codificada como una miniatura. El código fuente se ve así:

Como antes, esperamos que se cargue PhoneGap. Cuando se completa la carga, podemos establecer las opciones para el destinationType y sourceType, de manera predeterminada estos están configurados en CAMERA y DATA_URL. Cuando se hace clic en el botón, activamos la función capturePhoto. Tras el éxito, capturePhoto inicia nuestra función getPhoto. 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 fotografía y probarla, debería tener algo que se ve a continuación:

PhoneGap From Scratch

También es posible editar la foto después de la captura, todo lo que tenemos que hacer es pasar el parámetro allowEdit : true en las opciones, una vez que se ha tomado 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:

Hay algunas peculiaridades en la opción allowEdit que vale la pena mencionar. 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 tipo de almacenamiento (como localstorage), usaríamos pictureSource.PHOTOLIBRARY.

Esos son básicamente los elementos básicos que necesitamos para ponernos en funcionamiento con la cámara en PhoneGap. Juegue con él y pruebe algunas cosas con diferentes calidades de imagen, tipos y tamaños.


API de almacenamientos

Es posible que deseemos 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 querremos almacenar otra información. Hay algunas maneras de hacerlo para usar el almacenamiento del dispositivo, una de ellas es usar WebSQL, la otra está usando 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 WebStorage y para este proyecto es perfecto.

Podemos hacer uso de WebStorage con la siguiente sintaxis:

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 API de geolocalización

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 usas la implementación de PhoneGap, la usa si está disponible.

La geolocalización de PhoneGap tiene 3 métodos, getCurrentPosition, watchPosition y clearWatch. El método getCurrentPosition devuelve la ubicación actual del dispositivo con un objeto de posición que contiene las propiedades para:

  • latitude (latitud)
  • longitude (longitud)
  • altitude (altitud)
  • accuracy (exactitud)
  • altitudeAccuracy (Precision altitud)
  • heading (título)
  • speed (velocidad)

El uso básico de la funcionalidad de geolocalización debería parecer bastante familiar ahora:

Y luego podemos hacer algo como lo siguiente:

Su código completo debe ser similar al siguiente:

Esto le dará la información de posición en el momento en que se activa la función success. Si queremos ver constantemente la geolocalización del dispositivo, utilizamos el método navigator.geolocation.watchPosition en lugar de navigator.geolocation.getCurrentPosition,  pasándole la frecuencia en la que nos gustaría actualizar. Nuestro código ahora debería verse más o menos así:

Si ejecuta su aplicación ahora, debe terminar con una aplicación que se ve así:

PhoneGap From Scratch

Al igual que el acelerómetro, la geolocalización también tiene un método clearWatch para dejar de ver los cambios, que puede usar con el siguiente código:

Con eso, ahora tenemos el conocimiento para usar la API de geolocalización en PhoneGap para nuestra aplicación. Es posible que solo deseemos registrar nuestra ubicación en cualquier momento y almacenarla de manera 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.


Plugins PhoneGap

Además de la funcionalidad que PhoneGap ofrece de fábrica, hay un montón de complementos disponibles para PhoneGap para cosas como un selector de fecha, 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 queda fuera del alcance de esta serie, pero debe saber qué opciones tiene al trabajar con PhoneGap, así que asegúrese de revisar el GitHub. proyecto para complementos y la wiki para obtener información sobre cómo ponerse en marcha con ellos. Si desea ver un tutorial separado sobre el uso de complementos de PhoneGap e incluso escribir el suyo, ¡asegúrese de informarnos en los comentarios!


Conclusión

Si bien no hemos comenzado el desarrollo de una aplicación, ahora estamos funcionando con PhoneGap, capaces de probar en un dispositivo y simulador, tener una buena idea 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 muestra!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.