Cuando necesitemos que nuestra aplicación PhoneGap acceda a componentes del dispositivo como a la lista de contactos o a los sensores, necesitamos instalar el plugin necesario para poder trabajar con ello.
En este ejemplo accederemos al acelerómetro, que es un sensor de movimiento que detecta los cambios de posición del dispositivo en los ejes X, Y y Z, el plugin que nos permita leer estos cambios se llama cordova-plugin-device-motion.
Abrimos PhoneGap y creamos un nuevo proyecto en blanco:
Elegimos Blank y clic en next, para crear un proyecto en blanco:
En local path, elegimos el directorio donde queremos que se cree el proyecto:
Ya tenemos proyecto creado y corriendo:
Nos dirigimos al directorio que elegimos, y vemos que dentro de este se creó una carpeta con el nombre del proyecto (Motion), y dentro de esta carpeta tenemos más archivos y carpetas, de las cuales las más importantes son www y plugin, en www esta todos los archivos HTML, JS, CSS, imágenes, otros que pertenecen a nuestro proyecto, en plugin están todos los plugins que agregamos a nuestro proyecto, si no agregamos ningún plugin esta carpeta está vacía.
En la parte de API Reference de esta página podemos ver la lista de todos los plugins disponibles, sus nombres y la manera de instalarlo.
En este caso instalaremos el plugin del acelerómetro que se llama cordova-plugin-device-motion, para lo cual abrimos CMD, en CMD nos dirigimos a la carpeta de nuestro proyecto (en mi caso la carpeta Motion) y ejecutamos:
Cuando termine la instalación que no demora mucho ejecutamos:
Este comando nos muestra todos los plugins instalados en nuestro proyecto.
Elegimos html5/JS y que ya existe código
En Site Root elegimos la carpeta www que esta dentro de la carpeta Motion
Y listo ya podemos trabajar el código desde netbeans.
Esta es la estructura del proyecto es la siguiente:
Archivo index.html
Archivo estilo.css
Archivo app.js
Ahora solo nos queda ejecutar nuestra aplicación, y taran funciona, cada vez que movemos nuestro dispositivo cambiaran los valores en X, Y y Z.
En este ejemplo accederemos al acelerómetro, que es un sensor de movimiento que detecta los cambios de posición del dispositivo en los ejes X, Y y Z, el plugin que nos permita leer estos cambios se llama cordova-plugin-device-motion.
Creando el proyecto con PhoneGap / interfaz de escritorio
Abrimos PhoneGap y creamos un nuevo proyecto en blanco:
Elegimos Blank y clic en next, para crear un proyecto en blanco:
En local path, elegimos el directorio donde queremos que se cree el proyecto:
Ya tenemos proyecto creado y corriendo:
Nos dirigimos al directorio que elegimos, y vemos que dentro de este se creó una carpeta con el nombre del proyecto (Motion), y dentro de esta carpeta tenemos más archivos y carpetas, de las cuales las más importantes son www y plugin, en www esta todos los archivos HTML, JS, CSS, imágenes, otros que pertenecen a nuestro proyecto, en plugin están todos los plugins que agregamos a nuestro proyecto, si no agregamos ningún plugin esta carpeta está vacía.
Agregando plugins con PhoneGap Cli
En la parte de API Reference de esta página podemos ver la lista de todos los plugins disponibles, sus nombres y la manera de instalarlo.
En este caso instalaremos el plugin del acelerómetro que se llama cordova-plugin-device-motion, para lo cual abrimos CMD, en CMD nos dirigimos a la carpeta de nuestro proyecto (en mi caso la carpeta Motion) y ejecutamos:
cordova plugin add cordova-plugin-device-motion
Cuando termine la instalación que no demora mucho ejecutamos:
cordova plugin list
Este comando nos muestra todos los plugins instalados en nuestro proyecto.
Codear con NetBeans para PhoneGap
Abrimos NetBeans y nos dirigimos a Archivo / Proyecto Nuevo:Elegimos html5/JS y que ya existe código
En Site Root elegimos la carpeta www que esta dentro de la carpeta Motion
Y listo ya podemos trabajar el código desde netbeans.
Esta es la estructura del proyecto es la siguiente:
Archivo index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Motion - byEdiar</title>
<link type="text/css" rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div id="valorX">X = </div>
<div id="valorY">Y = </div>
<div id="valorZ">Z = </div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Archivo estilo.css
body{
background: #66ccff;
}
div{
margin: 5px;
background: #fff;
padding: 10px;
text-align: center;
}
Archivo app.js
var app = {
inicio: function () {
navigator.accelerometer.watchAcceleration(this.onSuccess, this.onError, {frequency: 1000});
},
onSuccess: function (aceleracion) {
document.querySelector('#valorX').innerHTML = 'X = ' + aceleracion.x;
document.querySelector('#valorY').innerHTML = 'Y = ' + aceleracion.y;
document.querySelector('#valorZ').innerHTML = 'Z = ' + aceleracion.z;
},
onError: function () {
console.log('Error al leer movimiento');
}
};
if ('addEventListener' in document) {
document.addEventListener('deviceready', function (){
app.inicio();
}, false);
}
Ahora solo nos queda ejecutar nuestra aplicación, y taran funciona, cada vez que movemos nuestro dispositivo cambiaran los valores en X, Y y Z.
hola mundo
ResponderBorrar