Avenida de Castilla,1 - Edificio Best Point - Oficina 21B 28830 San Fernando de Henares (Madrid) tel./fax: +34 91 675 33 06 [email protected] - www.autentia.com Somos su empresa de Soporte a Desarrollo Informático. Ese apoyo que siempre quiso tener... 1. Desarrollo de componentes y proyectos a medida Tecnología Desarrollo Sistemas Gran Empresa Producción autentia Certificación o Pruebas Verificación previa RFP Concurso Consultora 1 Consultora 2 Consultora 3 Equipo propio desarrollo Piloto 3a 3b 1. Definición de frameworks corporativos. 2. Transferencia de conocimiento de nuevas arquitecturas. 3. Soporte al arranque de proyectos. 4. Auditoría preventiva periódica de calidad. 5. Revisión previa a la certificación de proyectos. 6. Extensión de capacidad de equipos de calidad. 7. Identificación de problemas en producción. 3. Arranque de proyectos basados en nuevas tecnologías ¿Qué ofrece Autentia Real Business Solutions S.L? Para más información visítenos en: www.autentia.com Compartimos nuestro conociemiento en: www.adictosaltrabajo.com Gestor portales (Liferay) Gestor de contenidos (Alfresco) Aplicaciones híbridas Tareas programadas (Quartz) Gestor documental (Alfresco) Inversión de control (Spring) BPM (jBPM o Bonita) Generación de informes (JasperReport) ESB (Open ESB) Control de autenticación y acceso (Spring Security) UDDI Web Services Rest Services Social SSO SSO (Cas) Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery JPA-Hibernate, MyBatis Motor de búsqueda empresarial (Solr) ETL (Talend) Dirección de Proyectos Informáticos. Metodologías ágiles Patrones de diseño TDD 2. Auditoría de código y recomendaciones de mejora 4. Cursos de formación (impartidos por desarrolladores en activo)
6
Embed
F?:@'.$&2& %G&1'210*%A'*5% H&$02'$$%!5&102$%!,IJ · » Hola mundo con las tecnologías de SpringMVC, Hibernate, un ejemplo de aspectos y test con JUnit » Empezando con PhoneGap »
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)
Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...
1. Desarrollo de componentes y proyectos a medida
TecnologíaDesarrolloSistemas
Gran Empresa
Producción
autentia
Certificacióno Pruebas
Verificación previa
RFP Concurso
Consultora 1
Consultora 2
Consultora 3
Equipo propio desarrolloPiloto
3a
3b
1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.
3. Arranque de proyectos basados en nuevas tecnologías
¿Qué ofrece Autentia Real Business Solutions S.L?
Para más información visítenos en: www.autentia.com
Inicio Quiénes somos Formación Comparador de salarios Nuestros libros Más
» Estás en: Inicio Tutoriales Acceso a la cámara con PhoneGap
Síguenos a través de:
Catálogo de servicios
Autentia
Últimas Noticias
» IX Autentia Cycling Day(ACTUALIZADO)
» La historia de la informática
» Autentia en la carrera delas empresas
» Spring 4.0 ¿qué hay denuevo amigo?
» Torneo de pádel solidarioAMEB
Histórico de noticias
Últimos Tutoriales
» Mi primera vista en ZKcomo desarrollador JSF (II).
» Hola mundo con lastecnologías de SpringMVC,Hibernate, un ejemplo deaspectos y test con JUnit
» Empezando con PhoneGap
» SOA vs. SOAP y REST
» Mi primera vista en ZKcomo desarrollador JSF (I).
Últimos Tutoriales del
Autor
Ver todos los tutoriales del autor
Rubén Aguilera Díaz-Heredero
Consultor tecnológico de desarrollo de proyectos informáticos.
Ingeniero en Informática, especialidad en Ingeniería del Software
Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo,factoría y formación
Somos expertos en Java/J2EE
Fecha de publicación del tutorial: 2014-01-16 Tutorial visitado 1 veces Descargar en PDF
Acceso a la cámara con PhoneGap
0. Índice de contenidos.
1. Entorno2. Introducción3. Creación y configuración del proyecto4. Implementando la funcionalidad5. Probando la funcionalidad6. Ejecutar la aplicación en otra plataforma7. Conclusiones
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
Hardware: Portátil Mac Book Pro 17" (2,6 Ghz Intel Core i7, 8 GB DDR3)Sistema Operativo: Mac OS X Snow Leopard 10.6.4PhoneGap 3.3.0-0.18.0NodeJS 0.10.24
2. Introducción
Antes de seguir con este tutorial se aconseja haber completado este otro que nos muestra como empezar a dar losprimeros pasos.
Una de las historias típicas que se nos presentan a la hora de desarrollar aplicaciones móviles es tener que hacer usode la cámara. Por ejemplo, en este tutorial vamos a implementar con PhoneGap la historia de usuario "Como usuarioenviar una imagen desde mi móvil para que pueda ser analizada en el servidor."
La elección de PhoneGap para desarrollar la historia es la adecuada dado que queremos que la aplicación se ejecute enla mayoría de dispositivos móviles que tengan cámara independientemente de su sistema operativo y dado quequeremos acceder a la cámara será imprescindible que la aplicación se ejecute de forma nativa en cada uno de ellos.
En este tutorial vamos a abordar la parte de captura de la imagen;; el cómo se envía este imagen al servidor queda fueradel ámbito de este tutorial.
3. Creación y configuración del proyecto
Como vimos en el tutorial de introducción, para crear un proyecto en PhoneGap basta con ejecutar el comando:
Dado que sabemos que nuestra aplicación va a necesitar el acceso a la cámara del dispositivo, lo siguiente será instalarel correspondiente plugin de ejecutando este comando:
view plain print ?
01. cordova plugin add org.apache.cordova.camera
Si queremos comprobar los plugins que tenemos habilitados en nuestro proyecto basta con ejecutar:
» Ejecutando MyBatis contradistintas bases de datos
» Gestionando relaciones enMyBatis
» Introducción a XQuery conejemplos
Últimas ofertas de
empleo
2011-09-08Comercial - Ventas -MADRID.
2011-09-03
Comercial - Ventas -VALENCIA.
2011-08-19Comercial - Compras -ALICANTE.
2011-07-12Otras Sin catalogar -MADRID.
2011-07-06Otras Sin catalogar -LUGO.
view plain print ?
01. cordova plugin rm org.apache.cordova.camera
Vemos que ahora en la carpeta "plugins" de nuestro proyecto tenemos todos los fuentes que permiten el acceso nativo ala cámara del dispositivo.
La descripción completa del plugin la podemos encontrar en la siguiente url de la documentación oficial de PhoneGap.
4. Implementando la funcionalidad
La historia la vamos a desarrollar mostrando un botón en pantalla que permita realizar una foto con el dispositivo, hechala foto se mostrará en pantalla y se habilitará un botón para poder enviarla.
Lo primero que vamos a hacer es modificar nuestro fichero index.html para mostrar el botón "Tomar Foto", la imagenque se va a previsualizar y el botón de "Enviar" la imagen. El código podría ser el siguiente:
view plain print ?
01. <meta charset="utf-8"> 02. <meta name="format-detection" content="telephone=no"> 03. <!-- WARNING: for iOS 7, remove the width=device-width and height=device-
scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"> 05. <link rel="stylesheet" type="text/css" href="css/index.css"> 06. <title>Acceso a la cámara con PhoneGap</title> 07. 08. 09. <div id="content" style="margin-top: 100px;;"> 10. <h1>Acceso a la cámara con PhoneGap</h1> 11. <button id="takePhoto">TOMAR FOTO</button> 12. <img id="photo" src=""> 13. <button id="sendPhoto">ENVIAR FOTO</button> 14. </div> 15. <script type="text/javascript" src="cordova.js"></script> 16. <script type="text/javascript" src="js/index.js"></script> 17. <script type="text/javascript">app.initialize();;</script>
Este HTML es muy simplemente, solo contiene los enlaces a los ficheros externos necesarios y la declaración de losbotones y el elemento imagen donde se va a mostrar la imagen tomada.
Ahora vamos a implementar el Javascript necesario en el fichero js/index.js que podría quedar de la siguiente forma:
En este fichero es donde reside toda la funcionalidad. Primero establecemos los eventos para los dos botones. El deenviar la foto simplemente muestra un alert indicando la acción.
Para tomar la foto de la cámara hacemos uso del API de PhoneGap, creando las funciones de callback cuando la tomade la imagen tiene éxito (onPhotoDataSuccess) y cuando no (onFail)
Cuando tiene éxito mostramos la imagen tomada en el elemento "img" del HTMLy cuando ocurre algún problemamostramos un alert con el error.
Y vamos a modificar el fichero index.css para dejarlo de esta forma:
Como se puede observar inicialmente no mostramos la imagen ni el botón de enviar;; estos serán habilitados cuando lafoto haya sido tomada correctamente.
5. Probando la funcionalidad
Para probar esta funcionalidad necesitamos hacerlo en un dispositivo físico dado que los simuladores no son capaces detomar imágenes.
En mi caso voy a probar la funcionalidad en un Iphone para lo cual tengo que indicar en mi proyecto que una de lasplataformas soportadas va a ser ios, esto se hace ejecutando el siguiente comando:
view plain print ?
01. cordova platform add ios
Una vez ejecutado, el terminal nos informa que efectivamente se ha añadido la plataforma junto con la configuraciónnecesaria para poder utilizar el plugin de la cámara.
Ahora vamos a construir el proyecto con el comando:
view plain print ?
01. cordova build
Y para ejecutarlo en el dispositivo físico IOS que tengamos conectado al ordenador bastará con ejecutar en el terminal:
view plain print ?
01. cordova run
Este comando nos instalará la aplicación en el dispositivo. Solo queda arrancarla y tomar una foto de prueba.
Una vez que hemos probado que la aplicación funciona en IOS podemos ver como se ejecuta en cualquier otraplataforma, solo tenemos que añadir la plataforma deseada y ejecutar la aplicación.
Por ejemplo, si queremos ver como se ejecuta en Android bastará con conectar un dispositivo Android en modo dedepuración y ejecutar los siguientes comandos:
Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5
PUSH THIS Page Pushers Community Help?
----no clicks + + + + + + + +
0 people brought clicks to this page
powered by karmacracy
» Registrate y accede a esta y otras ventajas «
Anímate y coméntanos lo que pienses sobre este TUTORIAL:
7. Conclusiones
En este tutorial hemos visto como podemos crear una aplicación multiplaforma que acceda a servicios nativos deldispositivo como puede ser la cámara, implementandola únicamente con HTML5, CSS3 y Javascript.
Cualquier duda o sugerencia en la zona de comentarios.
Saludos.
A continuación puedes evaluarlo:
Regístrate para evaluarlo
Por favor, vota +1 o compártelo si te pareció interesante