|
1. Introducción En esta guía mostraremos cómo crear una aplicación Android desde un proyecto de Processing. También mostraremos cómo modificar el proyecto Android resultante para añadir nueva funcionalidad nativa.
2. Background Processing es un sencillo entorno de programación creado para simplificar el desarrollo de aplicaciones con un componente visual y con énfasis en la animación y la interacción. Se programa en Java y aunque inicialmente sólo creaba aplicaciones para "desktop" (Windows, Mac, Linux), en la actualidad también puede generar el mismo tipo de aplicaciones para sistemas Android. En esta ficha vamos a ver como crear aplicaciones Processing para Android y como añadirles más funcionalidad desde el entorno de desarrollo de Android. Podremos crear aplicaciones móviles con una animación e interacción muy potente gracias a Processing y añadirle funcionalidad móvil sólo disponible en Android y no implementada en las APIs y librerías de Processing. Nota: Processing + Android es sólo una de las opciones para crear aplicaciones móviles sin necesidad de programar código nativo en un sistema operativo móvil. Otra alternativa que estamos considerando en Makespace Madrid es PhoneGap/Cordova y las múltiples arquitecturas que están surgiendo basadas en html, javascript y CSS. 3. Instalación y funcionamiento de Processing Descargar la última versión estable de Processing para la plataforma en la que estemos trabajando: (https://processing.org/download/?processing). Descomprimir el fichero y ejecutar la aplicación processing (processing.exe en Windows). Aparecerá el entorno de desarrollo (IDE) de Processing que es similar al de arduino. En la parte derecha de la ventana aparece una lista desplegable en la que podemos elegir Java (aplicaciones en el ordenador). En el menú Archivo seleccionar Ejemplos. Se mostrará una nueva ventana con ejemplos de proyectos ya codificados y que podemos cargar en el IDE. Para comprobar que todo funciona bien vamos a cargar un ejemplo sencillo. Seleccionar el proyecto Basics -> Data -> CharactersStrings. Se cargará el código del proyecto en la ventana principal del IDE. Aún no vamos a entrar en los detalles del código. Simplemente vamos a ejecutarlo para asegurarnos que todo funciona bien. Pulsar sobre el botón/icono Ejecutar del IDE y aparecerá una nueva ventana en la que se ejecuta el proyecto. Pulsar con el ratón sobre esa ventana y teclear letras en el ordenador (este proyecto sólo acepta teclas de letras, no números o signos ortagráficos). Para terminar la ejecución del proyecto, pulsar la tecla escape (ESC) o el icono Detener del IDE. Si queremos también podemos crear una aplicación independiente con el proyecto seleccionando la opción Exportar Applicación… en el menú Archivo. Cargar otros ejemplos de Processing para conocer las posibilidades que ofrece este entorno. Nota: Processing está creado con Java y requiere tener instalado Java Development Kit (JDK) en el ordenador (ver ficha anterior). 4.Instalación y configuración del entorno de desarrollo Android En la versión que hemos descargado de Processing (3.0b3) Android no viene activado por defecto. En la parte derecha de la ventana aparece una lista desplegable con Java seleccionado. Pulsar sobre la opción Añadir Modo… y en la ventana que aparece (pestaña Modes) seleccionar e instalar Android Mode. Tras terminar la instalación, la lista desplegable incluirá Android además de Java. Seleccionar Android y aparecerá un mensaje preguntándonos si el Android SDK está ya instalado en el equipo. Si ya se ha realizado la ficha anterior, ya lo tenemos instalado en nuestro ordenador. Seleccionar la ruta con la opción Locate SDK path manually. Si todo ha ido bien, el IDE de Processing cambiará a modo Android y aparecerá una opción Android en el menú.
Nota: En mi instalación (Windows 8) la ruta es: En el menú Android se pueden ver los dispositivos Android que están conectados al ordenador o los SDKs de Android instalados en el ordenador. Si queremos descargar otros SDKs de Android, el Android SDK Manager también puede lanzarse desde el menú de Processing (Android -> Android SDK Manager). Nota: El proceso de descarga e instalación puede llevar bastante tiempo. En Windows, requiere lanzar el proceso con derechos de administrador (arrancar Processing pulsando sobre su icono con el botón derecho y en el menú que aparece seleccionar Ejecutar como administrador). El siguiente paso es crear un nuevo simulador de Android. Para ello seleccionar el menú Android -> Android AVD Manager. En la pestaña Android Virtual Devices pulsar el botón Create y rellenar los campos de la ventana que nos aparece. Hay que definir un nombre (no debe incluir caracteres especiales o espacios), elegir un dispositivo (el que más se parezca a nuestro móvil real), un target (por ejemplo Android 4.0.3.-API15), una CPU (ARM-armeabi) y una Skin (elegir No skin). El resto de los campos se pueden dejar con sus valores por defecto salvo que vayamos a utilizarlos en nuestra aplicación). Una vez rellenado el formulario, pulsar el botón OK y se creará el nuevo modelo de dispositivo Android. Ahora tenemos que lanzar un simulador basado en ese modelo. Para ello, seleccionar el modelo que acabamos de crear y pulsar el botón Start en la parte derecha de la ventana. Una vez abierto el simulador, anotar el número de puerto que aparece en el título de su ventana (por ejemplo 5554 si el título es "5554:emulator_jmg"). Nota: El proceso de inicio del simulador suele ser muy largo. Una vez abierto el simulador no hace falta cerrarlo para volver a simular otros sketches de Processing.
Aún nos queda un paso para poder conectar el simulador a Processing. En el menú de Processing, seleccionar Archivo -> Preferencias y se mostrará una ventana de configuración. En la parte de abajo, aparece la ruta de un fichero ("More preferences can be updated directly in the file"). Pulsar sobre el enlace del fichero y abrir el fichero ¡Por fin podemos crear aplicaciones Android con Processing! Ir al menú Archivo -> Ejemplos... y abrir alguno de los proyectos de ejemplo (por ejemplo: Topics -> Vectors -> BouncingBall). Para ejecutar el proyecto en el emulador de Android, ir al menú Sketch y elegir Run in emulator. Alternativamente, si se ha conectado un dispositivo Android al ordenador, seleccionarlo en el menú Android -> Select device y después ejecutar el proyecto desde Sketch ->Run on device. Para terminar la simulación sin necesidad de cerrar el simulador, pulsar la tecla escape (ESC). 5. Estructura de un Sketch de Processing Processing, al igual que Android, utiliza Java como lenguaje de programación. Esto hace que su integración sea "sencilla". La estructura de un programa o sketch de Processing se parece bastante a un sketch de Arduino. Hay dos métodos principales que se reparten el flujo de la aplicación:
●
● Aunque hay algunas librerías que sólo funcionan en entorno Java (ordenador) o Android (teléfono), en principio un Sketch puede ser ejecutado en los dos entornos seleccionando la plataforma de destino deseada.
Para empezar a probar sketching vamos a utilizar el Sketch Este ejemplo simplemente escribe/dibuja una cadena de texto en la pantalla en una posición y con un color aleatorios. El Skecth alterna la orientación del texto entre horizontal y vertical. El programa también detecta cuando está pulsando el ratón y muestra en la pantalla un mensaje cuando esto sucede. El código está comentado para entender su funcionamiento y se recomienda utilizar la documentación de Processing para comprender los detalles de las funciones utilizadas (https://www.processing.org/reference/). La mejor forma de aprender es cambiar y/o comentarpartes del código y observar el efecto de esos cambios en la aplicación.
Nota: La implementación en Android de Processing tiene ciertas peculiaridades e incompatibilidades con la versión Java que se ejecuta en el ordenador. Se recomienda leer la wiki (https://github.com/processing/processing-android/wiki) para ser consciente de las mismas y considerarlas a la hora de codificar una aplicación. En concreto la función
Nota: Las aplicaciones Android necesitan solicitar permiso para acceder a cierta funcionalidad del teléfono (por ejemplo realizar llamadas, leer los contactos de la agenda, conectarse a internet, etc.) Estos permisos se indican en un fichero del proyecto llamado 6. Ejecución y generación de aplicaciones Processing en Java (ordenador) y Android (teléfono) Empezaremos creando una aplicación Java para el ordenador. En la ventana de processing seleccionar Java en la lista desplegable que aparece en la parte superior derecha. A continuación, pulsar el botón Run. Tras compilar el código, aparecerá una nueva ventana en la que comenzará a ejecutarse la aplicación. Processing puede crear aplicaciones de escritorio que nos permiten su distribución y ejecución sin necesidad de instalar el IDE de Processing. Para ello, seleccionar el menú Archivo-> Exportar Applicación y elegir el entorno al que se quiere exportar. Terminado el proceso, la consola de Processing nos indicará la ruta donde se ha creado el fichero de la aplicación. Las aplicaciones de Processing están programadas en Java, y, como indica la ventana de exportación, requieren que el entorno Java está instalado en el ordenador en el que se ejecuta la aplicación (en el caso de Windows, se puede empaquetar Java junto con la aplicación). Para ejecutar la aplicación en Android, tendremos que elegir Android en la lista desplegable de la ventana del IDE. Si queremos simular la aplicación, seleccionaremos el menú Sketch -> Run in Emulator. También puede lanzarse la simulación pulsando el botón Run del IDE a la vez que la tecla de Mayúsculas. Si queremos ejecutar la aplicación en un teléfono o tablet Android, tras conectar el teléfono al ordenador con un cable USB, seleccionaremos el menú Sketch -> Run on Device. También puede lanzarse la aplicación pulsando el botón Run del IDE. Para generar el proyecto Android de la aplicación, seleccionar el menú Archivo -> Export Android Project. Se generará una carpeta con la organización y el contenido de un proyecto Android que utilizaremos en el paso siguiente para importarlo a eclipse y poder modificarlo desde el IDE de Android/eclipse como cualquier otro proyecto. 7. Importación de un proyecto Android de Processing a Eclipse Una vez exportado el proyecto desde Processing, se puede importar fácilmente al IDE de Eclipse. Para ello sólo hay que abrir el menu File -> Import… de eclipse y elegir la opción Android -> Existing Android Code Into Workspace y pulsar el botón Next.
En la siguiente pantalla hay que elegir la carpeta donde Processing ha creado del proyecto Android (por ejemplo Este proyecto está disponible en https://github.com/makespacemadrid/MSM016_processing Nota: Tanto el IDE de Processing como el de eclipse evolucionan con el tiempo y puede que en alguna de esas evoluciones generen incompatibilidades en el proceso de importación. En caso de errores, se recomienda buscar en Google para encontrar la solución (típicamente suelen ser rutas mal configuradas o librerías que no se han incluido en el proyecto). 8.Modificación de un proyecto Android de Processing en Eclipse Si nos fijamos, la estructura del proyecto importado corresponde a la de un proyecto Android que hubiéramos creado desde cero con su manifiesto, sus ficheros fuente java y sus librerías. En Eclipse podemos ejecutar la aplicación pulsando con el botón derecho del ratón el nombre del proyecto y seleccionando Run As -> Android Application. La aplicación se ejecutará en el simulador o en el teléfono que tengamos conectado al ordenador. También podemos hacer debugging línea a línea con la opción Debug As -> Android Application. Algunos puntos importantes a resaltar: ● El código Java del proyecto se encuentra dentro de la carpeta src. Un proyecto Android de Processing se basa en una pantalla/clase que hereda de PApplet en lugar de la clase Activity. PApplet es en realidad una subclase de Activity que ha definido Processing para controlar de forma sencilla toda la pantalla del teléfono. Esta clase que hereda de PApplet es definida como la actividad principal en el manifiesto y es la que se muestra nada más abrir la aplicación.
● La actividad Nota: El cambio de orientación del teléfono en Android implica el cierre y reinicio de la actividad mostrada en pantalla, con lo que implicará una nueva llamada al método setup(). ● Toda la funcionalidad de Processing (incluida la implementación de la clase PApplet) se implementa en la librería processing.core.jar que se encuentra en la carpeta libs.
Con el proyecto en Eclipse ya podemos trabajar como sobre cualquier otro proyecto basado en Android nativo. Como ejemplo, vamos a añadir a nuestro proyecto una nueva actividad Android para que podamos cambiar el texto que muestra en pantalla la aplicación de Processing. Esta actividad se llama El proyecto actualizado está disponible en https://github.com/makespacemadrid/MSM016_processing_with_config_activity Para llamar a esta nueva actividad, tenemos que modificar nuestra actividad/PApplet de Processing. Antes cuando se pulsaba con el ratón en la ventana aparecía un texto en la parte superior indicando que se había pulsado el ratón. Vamos a utilizar ese evento para en lugar de escribir el texto de ratón pulsado lanzar la actividad de configuración.
if ((mousePressed)&&((millis()-lastUpdate)>3000)) {
Cuando se pulsa el ratón en la actividad principal, aparece la pantalla/actividad de configuración. Una vez que introducimos un nuevo texto y pulsamos el botón OK, el flujo de la aplicación vuelve a la actividad principal, método
Nota: el método
Como en cualquier proyecto Android nativo, para poder utilizar la actividad <activity android:name=".ConfigurarActivity">
9. Conclusiones En esta ficha hemos visto cómo crear un proyecto de Processing en entorno Java (ordenador) o Android, cómo importarlo y cómo añadirle nueva funcionalidad desde el IDE eclipse de Android. Hemos visto un ejemplo muy sencillo para explicar el proceso. Sin embargo, este mecanismo permite implementar funcionalidad mucho más compleja como una conexión Bluetooth con un Arduino o una conexión a Internet para descargar los últimos tweets que contienen un #hashtag. Todo esto manteniendo la potencia y simplicidad de las interfaces gráficas creadas con Processing. |
||||
