• Author / Uploaded
• Angel David Carrera

Citation preview

DESARROLLO DE APLICACIONES

ANDROID

con Processing

Android Sistema Operativo principalmente usado para dispositivos móviles como teléfonos y tabletas. Android es el sistema operativo más popular a nivel mundial

Aplicaciones El desarrollo de las aplicaciones ha tenido un auge en los últimos años, las personas utilizan su teléfono para muchas de sus actividades.

¿Cómo crear aplicaciones para Android? De la misma manera que con Processing y Arduino, existen lenguajes de programación que nos permiten dar instrucciones a nuestro teléfono

¿Qué tipo de instrucciones podemos darle a nuestro teléfono? Los smartphones a diferencia de las computadoras tienen muchas más capacidades, tienen diferentes sensores y actuadores.

Sensores, Actuadores y Sistemas de comunicación • Celular GSM/3G/4G • WiFi

• Cámara • GPS • Vibrador

• Acelerómetro • Giroscopio

• NFC • Magnetómetro

• Pantalla • Sensor Touch

Processing para Android El entorno de desarrollo de Processing puede ser utilizado para programar aplicaciones de Android. La mayoría de las instrucciones utilizadas son compatibles, con el agregado de poder utilizar las nuevas funciones de un teléfono.

Requisitos • Teléfono Android con Android 4.4 o superior. • Cable micro USB • Computadora con Windows 7 o superior | Mac OS X

Instalación y Configuración del entorno de desarrollo 1. Instalar JDK (Java SE 8u101) 2. Instalar la última versión de Processing 3. Instalar Android Mode 4. Instalar el SDK de Android 5. Activar Modo Depuración en el teléfono

Entorno de desarrollo y lenguaje Las diferencias respecto a la programación de aplicaciones para computadora de Processing son mínimas, la mayoría de las funciones siguen siendo compatibles.

Diferencias del IDE: Barra de Herramientas La Barra de Herramientas se simplifica en la última versión de Processing. Ahora sólo tiene 3 botones: • Iniciar Aplicación • Detener Aplicación • Elección de Lenguaje

Diferencias del IDE: Barra de Herramientas En el botón desplegable debemos elegir Android para poder programar aplicaciones para Android

Diferencias del IDE: Editor y Monitor El editor sólo recibe cambios estéticos. El monitor ahora tiene dos secciones: • Consola: Muestra mensajes • Errores: Muestra errores

Tamaño del canvas Las aplicaciones de escritorio tenían un tamaño definido en pixeles, ahora las aplicaciones serán ejecutadas en pantalla completa. Antes: size(500,500); Ahora: fullScreen();

Botón del Mouse Presionado Los teléfonos no utilizan un Mouse para controlarse, ahora utilizan el sensor touch, en Processing se identificará el toque de la pantalla con la misma instrucción. mousePressed

Hola mundo Android Objetivo Crear una aplicación que se encargue de dibujar en la pantalla del teléfono

Hola mundo Android void setup(){ fullScreen(); background(0,0,150); fill(255); stroke(255); } void draw(){ if(mousePressed){ ellipse(mouseX,mouseY,25,25); } }

Ejecución de aplicación Para ejecutar una aplicación se puede hacer desde la aplicación de Processing conectando tu celular o enviando el APK al celular e instalandolo manualmente

Conectando el celular a Processing Primero debemos tener activado el modo Depuración USB. Luego conectamos el celular a la computadora y lo elegimos en la interfaz: >Android >Select device > Modelo de teléfono

Ejecutando aplicación en el celular Una vez elegido el dispositivo ejecutamos la aplicación: >Sketch >Run on Device

Exportando aplicación También podemos ejecutar la aplicación en nuestro celular instalando el archivo APK, para generarlo debemos elegir la opción: >Archivo >Export Signed Package

Exportando aplicación La Keystore password es una contraseña que debemos escribir y recordar porque nos la pedirá siempre que se haga una nueva aplicación. Llenamos los datos y damos click en OK.

Exportando aplicación Se generarán varios archivos y entre ellos estará el APK en diferentes versiones, la versión que debes instalar en el celular es la release-signed-aligned. Este archivo se encuentra en la carpeta dónde se guardó la aplicación: >HolaMundo >android >bin

Círculos de colores Objetivo Aplicación que dibuja círculos de colores aleatorios y de tamaños aleatorios.

Círculos de colores int diametro; int colorR, colorG, colorB; void setup(){ fullScreen(); background(255,255,255); fill(255); stroke(255); } void draw(){ if(mousePressed){ diametro = int(random(10, 100)); colorR = int(random(0,255)); colorG = int(random(0,255)); colorB = int(random(0,255)); fill(colorR,colorG,colorB,80); stroke(colorR,colorG,colorB,80); ellipse(mouseX,mouseY,diametro,diametro); } }

DESARROLLO DE APLICACIONES

ANDROID

con Processing

Coordenadas en Android Al igual que en Processing para escritorio, se define la pantalla del teléfono en Pixeles, la cantidad de pixeles dependerá de la resolución de la pantalla. Ejemplos: Full-HD: 1080 x 1920 pixeles HD: 720 x 1280 pixeles

Coordenadas en Android El origen se encuentra en la esquina superior izquierda, el eje X va de izquierda a derecha y de arriba hacia abajo. Puedes utilizar las siguientes variables para definir el límite de la pantalla: height : Altura de la pantalla width : Ancho de la pantalla

En una pantalla HD: width = 720 height = 1280

Coordenadas en Android Algo importante es que aunque los teléfonos tienen diferentes tamaños en pixeles casi todos comparten la misma relación de ancho y alto, la relación es 16:9. Esto quiere que las pantallas pueden ser divididas en cuadros del mismo tamaño y, que tendrían 16 cuadros de altura y 9 cuadros de ancho En una pantalla HD (720 x 1280) los cuadros miden 80 píxeles (720/9 ó 1280/16).

Cuadrícula de Colores Objetivo Crear una aplicación que dibuje una cuadrícula de colores aleatorios que cambian constantemente.

Cuadrícula de Colores Primero definir dos variables que van a definir el tamaño de la cuadrícula, se utilizará la relación de la pantalla para que en todos los teléfonos se generen la misma cantidad de cuadrados: ancho = width/9; alto = height/16;

Cuadrícula de Colores Luego para dibujar los cuadrados se utilizan ciclos for, que recorrerán toda la pantalla dibujando los cuadros. Un ciclo de 9 repeticiones para dibujar un renglón, y un ciclo de 16 repeticiones para dibujar los 16 renglones. for(j=0;j