aprender a programar aplicaciones moviles
TRANSCRIPT
LOGOMsig. Ing. Robert Moreira [email protected]
Febrero de 2017
TEMA:
«APRENDER A PROGRAMAR APLICACIONES MOVILES»
1. Ejes del curso
2. Tipos de aplicaciones móviles
3. Tooling (PhoneGap y Apache Cordova)
4. Crear un proyecto móvil con PhoneGap y vincularlo a Netbeans
5. Gestos – Ejercicio 1
6. Gestos con la librería hammer.js
7. Gestos(clases doubletap, press, swipe-derecha, swipe-izquierda, rotate ) con animación a través de
css
8. Práctica de gestos
9. Tomar una fotografía con la cámara
10. Uso de canvas en la capa de fotografía para acceder a los pixeles
11. Uso del canvas para cambiar los pixeles de una imagen a negativo, blanco y negro y sepia
12. Usar el canvas con imagen de la galería
13. Práctica de cámara
14. Geo localización y mapas
15. Extraer localización de dispositivo móvil usando el método geolocation del objeto navigator
Ambiente de prueba
Windows 8.1
Descargar presentación y
recursos en:
http://ouo.io/lFidof
1. Ejes del curso
Company Logo
Referencias:
https://miriadax.net/web/creando-apps-aprende-a-programar-aplicaciones-
moviles/inicio?p_p_auth=O4bnIj87&p_p_id=inscriptioncommunity_WAR_liferaylmsportlet&p_p_lifecycle=0
1. GESTOS
2. CÁMARAS
3.
LOCALIZACIÓN
4. SENSORES 4. DATOS
Aprenderemos cómo detectar los gestos que realiza el usuario
sobre la pantalla táctil de nuestro terminal móvil y a cómo crear
algunas animaciones
Accederemos a la cámara de nuestro terminal, realizaremos
fotografías, aplicaremos filtros y tomaremos imágenes de la
galería.
Aprovechando que los terminales móviles están
geoposicionados, podremos pintar nuestra posición actual en un
mapa, y explorar puntos de interés cercanos.
Desarrollaremos un juego que nos permita explorar el
funcionamiento de sensores como el acelerómetro.
Desarrollaremos una app que nos haga conscientes de si
estamos online u offline, para almacenar los datos en el
dispositivo o en la nube.
2. Tipos de aplicaciones móviles (parte 1 de 2)
Company Logo
Aplicaciones móviles nativas.- Desarrollas usando tecnologías móviles propias de cada
plataforma,
Ventajas: Se las puede distribuir desde las tiendas de aplicaciones y proveer un buen
rendimiento por ejemplo.
En android se
desarrolla con:
java y android studio
En iOS se desarrolla con:
Swift, Objective-C y Xcode
Aplicaciones web móviles.- Son desarrolladas con HTML, CSS, JAVASCRIPT y accedemos a
ellas desde el navegador de nuestro móvil.
Desventajas: No las podemos distribuir a través de la tienda de aplicaciones ni permite
aprovechar las capacidades totales de un dispositivo.
2. Tipos de aplicaciones móviles (parte 2 de 2)
Company Logo
Aplicaciones móviles híbridas.- Combina las tecnologías web y tecnologías nativas,
mediante una carcaza hecha en código nativo que dentro tiene un componente (Web view)
que incrusta un navegador dentro de nuestra aplicación, de forma que dentro de esa carcaza
nativa podemos visualizar el código HTML, CSS, JAVASCRIPT que hacemos dentro de ese
navegador.
Ventajas: Al tener esa carcaza nativa nos permite distribuirlas dentro de tiendas de
aplicaciones y además acceder a las capacidades del dispositivo.
Desventajas: Al tener un navegador de por medio el rendimiento no es tan bueno como el de
una aplicación nativa
3. Tooling (parte 1 de 3)
Company Logo
PhoneGap
Una plataforma que nos permite el desarrollo de aplicaciones hibridas y que
esta basado en Apache Cordova.
Descargar e instalar aplicación de escritorio
http://phonegap.com/getstarted/
Descargar e instalar aplicación desde play store en el celular
Al abrir la aplicación
por primera vez
Creando
proyecto por
primera vez
3. Tooling (parte 2 de 3)
PhoneGapConfigurando ip en celular y en computadora
En el computador
ya viene
establecida la
configuración, es
en el celular que
se debe cambiar
la dirección
3. Tooling (parte 3 de 3)
Company Logo
Apache Cordova.- es un framework open source para el desarrollo de
aplicaciones mo viles usando tecnologi as web (HTML, CSS, JavaScript).
https://cordova.apache.org/
Requisitos para la instalación
1.- Instalar el JDK de java.
2.- Instalar node.JS
3.- Ejecutar la siguiente línea como administrador en consola.
Referencias:
https://www.youtube.com/watch?v=LmZKEXVgTpM
Estos pasos
quedaron
incompletos
4. Crear un proyecto móvil con PhoneGap y vincularlo a Netbeans
Company Logo
En PhoneGap
En NetBeans
5. Gestos – Ejercicio 1 (parte 1 de 3)
Company Logo
Para empezar, vamos a crear una
aplicación muy sencilla con dos
botones, que al hacer click (tap
para dispositivos móviles) en ellos
cambiaran el color de fondo de
la pantalla de la app. Con esto
aprenderemos a distinguir el click
del tap. Además, veremos como
hacer más responsiva (fluida) la
interacción con nuestra app.
Morado
Naranja
5. Gestos – Ejercicio 1 (parte 2 de 3)
Company Logo
Paso 1. Partir de plantilla en blanco.
Paso 2. Crear un nuevo proyecto en netbeans.
5. Gestos – Ejercicio 1 (parte 3 de 3)
Company Logo
DESARROLLANDO LA APLICACIÓN 1
gestures.css
fastclick.js
gestures.js
gestures2.js
Contiene los estilos para cambiar de color
el fondo al dar click
Es una librería para hacer que el evento
del tap que se da a un dispositivo móvil,
inicie tan pronto se ponga el dedo sobre un
botón
Manejador de eventos sin usar fastclick.js
Manejador de eventos usando fastclick.js
https://github.com/mcrobertw/AplicacionMovil1/
6. Gestos con la librería hammer.js (parte 1 de 2)
Company Logo
TIPOS DE EVENTOS EN UN MOVIL
ROTATE.- Con dos dedos, girar para un lado y para el otro.
PINCH.- Con dos dedos, al hacer zoom it y zoom out.
PRESS.- Pulsamos y mantenemos presionado un momento.
PAN.- Gesto para movimiento en horizontal, manteniendo apretado.
TAP.- Pulsación y retirada inmediata en la pantalla del móvil.
SWIPE.- Gesto como de pasar una página.
DOUBLE TAP.- Doble pulsación y retirada inmediata en la pantalla del móvil.
Referencias:
http://hammerjs.github.io/
6. Gestos con la librería hammer.js (parte 2 de 2)
Company Logo
gestures.css
fastclick.js
gestures.js
hammer.min.js
Contiene los estilos para cambiar de color
el fondo al dar click, adicional tiene el estilo
para capturar los eventos en la zona que
esta debajo del botón “OSCURO”
Ya explicada.
Se le agrega la funcionalidad con
hammer.js, los eventos PAN y SWIPE se
enmascaran entre sí (se confunden), lo
mismo los eventos PINCH y ROTATE, al
probar se deja uno u otro en la línea 27
Solo se descargo y uso
https://github.com/mcrobertw/AplicacionMovil2
7. Gestos(clases doubletap, press, swipe-derecha, swipe-izquierda, rotate ) con animación a través de css
Company Logo
Se dará animación para 4 determinados
gestos
Doble tap.- Iluminar zona.
Press.- Oscurecer zona.
Swipe left y swipe right.- Animación,
como moviéndose a la izquierda o
derecha.
Rotate.- Animación de rotación.
gestures.css
gestures.js
Contiene las configuraciones de las clases doubletap, press,
swipe-derecha, swipe-izquierda, rotate y las animaciones
CSS con las reglas webkit-keyframes.
Contiene el manejo de los eventos doubletap, press, swipe-
derecha, swipe-izquierda, rotate usando la librería hammer
https://github.com/mcrobertw/AplicacionMovil3
8. Práctica de gestos (Parte 1 de 1)
1. Claro a oscuro gradual.
Vamos a modificar la aplicación para que al pulsar los botones de “claro” y “oscuro”, en
lugar de modificarse el color de fondo directamente, se haga mediante una animación
CSS. Esta animación hará que el color de fondo pase de verde claro a verde oscuro
gradualmente, y viceversa.
Solución.- En gestures.css dejar las clase claro y oscuro como sigue:
body.claro{background-color: #8de1bd;
transition: background-color 5s;
}
body.oscuro{background-color: #577a76;
transition: background-color 5s;
}
8. Práctica de gestos (Parte 2 de 2)
2. Tap simple.
Añade a la app la funcionalidad para que, al detectar un tap simple en la zona de
gestos, pinte esta zona de color amarillo durante 100 milisegundos, y luego vuelva a su
color anterior.
Solución.-
#zona-gestos.tap{
-webkit-animation: tap 100ms 1;
}
@-webkit-keyframes tap {
50% {
background-color: yellow;
}
}
Agregar el siguiente código en gestures.css
hammertime.on('tap', function(ev) {
zona.className='tap';
});
Agregar el siguiente código en gestures.js
3. ¿Y sin FastClick?
Prueba a eliminar la librería FastClick y comprueba en el dispositivo el cambio de
experiencia para el usuario. ¿Qué sucede con la funcionalidad anterior que le hemos
puesto al tap?
Solución.- La zona de gestos deja de funcionar.
9. Tomar una fotografía con la cámara
Desarrollar aplicación para
- Tomar una fotografía
- Acceder a píxeles de la
fotografía usando el canvas
- Procesar y aplicar filtros: blanco
y negro, esemtia, negativo
(hacer lo mismo con una foto de
la galería)
camera.css
camera.js
Destaca la clase foto pues es el marco
para mostrar la captura que se haga en la
cámara.
Utiliza la función navigator para capturar
foto y enviarla al index.html
https://github.com/mcrobertw/AplicacionMovil4
10. Uso de canvas en la capa de fotografía para acceder a los pixeles
camera.css
camera.js
Destaca la clase foto pues es el marco
para mostrar la captura que se haga en la
cámara.
Se modifica el método fotoTomada,
incorporando en ella una llamada al
método pintarFoto, que se encarga de
pintar la imagen tomada en un canvas.
https://github.com/mcrobertw/AplicacionMovil5
Se cambia el objeto imagen que captura la
fotografía por un canvas, para luego acceder a los
pixeles y poder cambiarlos.
Canvas se utiliza en videojuegos, animaciones, en la
siguiente práctica solo se usará para imprimir en el
nuestra imagen.
11. Uso del canvas para cambiar los pixeles de una imagen a
negativo, blanco y negro y sepia.
Con el canvas se puede acceder a la información de color de una imagen :
• RGBA de cada uno de los píxeles, por lo tanto se la puede manipular
• Procesar y aplicar filtros: blanco y negro, sepia (color rojo anaranjado oscuro y de
saturación débil), negativo. (hacer lo mismo con una foto de la galería)
camera.css
effect.js
Se agrega la clase button-filter para dar el
color azul a los 3 botones.
Librería desarrollada en miriadax para
transformar pixeles a blanco, negro y
sepia.
https://github.com/mcrobertw/AplicacionMovil6
camera.js Se cambia el método iniciaBoton a
iniciaBotones, que envía mensajes (gray,
negative, sepia) a otro método que
también se creo aplicaFiltro.
Se crea una variable global imageData
usada en el método aplicaFiltro.
Referencias:
http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#cameracameraoptions--object
12. Usar el canvas con imagen de la galería
camera.css Se agregó la clase button-gallery para el
botón Imagen de Galería.
https://github.com/mcrobertw/AplicacionMovil7
camera.js Se cambia el método tomarFoto por
cargarFoto.
Se modificó el escuchador button-action.
Se agregó el escuchador buttonGallery.
Se agregó la propiedad sourceType
dentro del método cargarFoto.
13. Práctica de cámara (Parte 1 de 2)
1. Mayor calidad.
Vamos a modificar la aplicación para que la calidad de la fotografía que usamos
sea mayor. Revisa las opciones del plugin de la cámara de Cordova.
var opciones={
quality:100,
sourceType: pictureSourceType,
destinationType: Camera.DestinationType.FILE_URI,
targetWidth:300,
targetHeight:300,
correctOrientation: true
};
2. Modo selfie.
Modifica las opciones del plugin de la cámara para que por defecto aparezca la
cámara delantera (si el terminal la tiene) para hacer un selfie.
Agregar dentro de la función cargarFoto:
cameraDirection:Camera.Direction.FRONT,//prueba practica 2 modo selfie no
funciona en android.
13. Práctica de cámara (Parte 1 de 2)
3. Guardar fotos en la galería.
Usa también las opciones del plugin de la cámara para almacenar la fotografías
realizadas en la galería del dispositivo.
Agregar dentro de la función cargarFoto:
saveToPhotoAlbum: true,//prueba practica guardar fotos en la galeria.
14. Geo localización y mapas
Geolocalización.- Nos permite acceder a la localización del usuario ofreciendo
productos y servicios basados en donde el esta, el dispositivo móvil calcula la
localización del usuario usando distintas técnicas: GPS, triangulación de antenas,
redes WIFI.
A través de la aplicación creada en este curso, se hará un acceso a localización
pidiéndosela al dispositivo (vea Dios que método usará cada móvil).
Desarrollar una aplicación en donde se pintará sobre un mapa la localización del
usuario, y el será capas de marcar distintos puntos a su alrededor como favoritos.
PRIMERO. Pedir al dispositivo la localización y pintarla en nuestra aplicación.
15. Extraer localización de dispositivo móvil usando el método
geolocation del objeto navigator
maps.css Se agrega el id #coords para presentar centradas las
coordenadas de longitud y latitud
https://github.com/mcrobertw/AplicacionMovil8
maps.js Agregar un escuchador de eventos 'deviceready'
manejandolo con la función 'dispositivoListo'
SITIOS CON INFORMACIÓN PARA DESARROLLO WEB
CUESTIONARIOS
Cuestionario 1
https://drive.google.com/file/d/0Bxp10qNggdMeeHhza2lLMGJTZUE/view?usp=sharing
Cuestionario 2
https://drive.google.com/file/d/0Bxp10qNggdMeSjU4M1dTc1NMWjQ/view
Cuestionario 3
https://drive.google.com/file/d/0Bxp10qNggdMeRlhWajVpV0R4OVE/view
Cuestionario 4
https://drive.google.com/file/d/0Bxp10qNggdMedlQyaTB3eUtuOG8/view?usp=sharing
CONCLUSIÓN.
Curso interesante, sensores y mapas fueron temas que faltan ver.
En caso de necesitarlos alguna vez se harán
Un tema que quedo pendiente fue incluier Cordova Application dentro de NetBeans