Curso de programacion de Android con AppInventor by Nestor Martinez

Curso de Programaciรณn de Android

AUTOR: PEDRO FELIP BELENGUER Primera Versiรณn: 14sep2012 Ultima revisiรณn: 18oct16 impresiรณn o Exportaciรณn a PDF : 18oct16

Curso de Programación de Android

Índice de contenido Introducción______________________________________________________________________4 ¿A partir de qué edad se puede programar con App Inventor?_____________________________5 ¿Por qué en inglés si se podría hacer en español?______________________________________5 Capítulo 1. Preparación del entorno. La primera aplicación con Android______________________7 1. Instalación de las herramientas___________________________________________________7 1.1 Conectar un dispositivo Android con AI Companion vía WiFi (método recomendado)____8 1.2 Conectar Android vía USB sólo para transferir archivos (método recomendado para utilizar en clase)______________________________________________________________9 1.3 Utilización de Dropbox, Google Drive o OneDrive para instalar Apps en Android______11 1.4 Conectar un dispositivo Android vía USB para depuración (método desaconsejado en clase, válido para casa)________________________________________________________11 1.5 Instalar y utilizar el emulador (con pc medianamente potente) (Válido en el aula pero sólo para ciertas Apps)____________________________________________________________12 1.5.1 La manera “normal” de instalar el emulador (requiere privilegios de administrador)12 1.5.2 La otra manera de utilizar el emulador (válida para clientes ligeros).........................13 1.6 Trabajar sin conexión (recomendado para utilizar en clase)________________________14 2. El panel de diseño____________________________________________________________14 3. Tu primera pantalla___________________________________________________________16 4. Elementos no visibles_________________________________________________________18 5. El editor de bloques__________________________________________________________19 6.1 Utilizar el emulador (si trabajas en Linux y no tienes un dispositivo Android)____________21 6.2 Conecta el teléfono móvil o la tableta Android____________________________________21 7. Empaqueta tu App____________________________________________________________22 10. Publícala en Google Play Store________________________________________________23 11. Actividades propuestas_______________________________________________________23 Capítulo 2. Aplicaciones básicas del MIT______________________________________________25 1. La bola 8___________________________________________________________________25 2. El bote de pintura____________________________________________________________32 3. Machacar Topos (Whac-A-Mole)________________________________________________43 4. Juego de disparos (Arcade)_____________________________________________________54 5. Si tecleas no conduzcas________________________________________________________63 6. La Mariquita________________________________________________________________71 Más mariquita______________________________________________________________85 7. Trabajo Libre________________________________________________________________86 8. Mapa turístico de París (o de donde tú quieras)_____________________________________86 9. ¿Donde está mi coche?________________________________________________________93 10. ¿Dónde estáis?_____________________________________________________________99 Capítulo 3. Otras Apps____________________________________________________________115 Introducción_________________________________________________________________115 3.1 Repite todo lo que tú dices___________________________________________________115 3.2 El Ahorcado______________________________________________________________115 3.3 Pong____________________________________________________________________128 Capítulo 4. El Internet de las cosas__________________________________________________129 © Pedro Felip Belenguer

 2

Curso de Programación de Android

4.1 Introducción a Arduino______________________________________________________130 4.2 Arduino: control de una pequeña luz (LED)______________________________________134 4.3 Arduino: control de un motor eléctrico a pilas____________________________________137 4.4 Arduino: control de un motor potente con relés___________________________________140 4.5 Arduino: control de una lámpara de 220 V_______________________________________147 Libre Arduino________________________________________________________________153 4.6 Arduino + Android: control por Bluetooth desde Android___________________________154 4.7 Arduino + Android: control por voz____________________________________________161 4.8 Ejemplo de aplicación: el cochecito____________________________________________162 4.9 ¿Qué más puede hacerse con Arduino + Android?_________________________________167 4.11 Raspberry Pi_____________________________________________________________168 4.15 Windows IOT____________________________________________________________169 Capítulo 5. Y después, ¿qué?_______________________________________________________171 Android Studio y Java__________________________________________________________171 Windows__________________________________________________________________171 LliureX (o Ubuntu)_________________________________________________________172 Ejercicios Recomendados____________________________________________________174 Ejercicio 1. El botón rojo...................................................................................................174 Ejercicio 2. El botón que cuenta.........................................................................................175 Generar el apk....................................................................................................................176 Anexo I. Cómo Dar de alta un sitio web para TinyWebDB_______________________________177 Bibliografía y otras cosillas sobre este documento______________________________________179 Cambios interesantes que se han producido en App Inventor___________________________179 ¿Problemas con el GPS?________________________________________________________180 Gestión de la voz. TTS (Text To Speech)___________________________________________180 Leer un texto (Text To Speech)________________________________________________180 Reconocimiento de voz______________________________________________________181 Distribución de componentes en la pantalla_________________________________________181 Múltiples pantallas____________________________________________________________182 Trucos para las actividades propuestas_____________________________________________183 Bola mágica, “piedra, papel, tijera”, dados, ..._____________________________________183 Cálculo de la distancia entre dos puntos (mochila)_________________________________184 Bibliografía__________________________________________________________________186 Bibliografía utilizada para realizar este curso_____________________________________186 Bibliografía recomendada para seguir aprendiendo_________________________________186 El futuro de App Inventor____________________________________________________186 Alternativas a App Inventor (programación de móviles)_____________________________187

 3

Introducción

Curso de Programación de Android

Introducción Este documento consiste en una serie de actividades de programación de teléfonos Android, tablets y dispositivos Android TV. En clase el trabajo se realiza con ordenadores en los que se encuentra instalado el sistema operativo LliureX, pero puede realizarse también con Windows, Mac OS X y algunas distribuciones de Linux. Es conveniente disponer de un teléfono con Android, pero no es imprescindible. Claro que quien no lo tenga... ¡deseará tener uno muy pronto! También sirve una tableta con Android o un televisor con Android TV, aunque habrá actividades que sólo se podrán hacer con un dispositivo móvil y con pantalla táctil. Un teléfono móvil sin tarjeta SIM, aunque no sirva para llamar por teléfono, servirá también para este curso. La metodología empleada es muy simple: se va aprendiendo paso a paso con una serie de actividades individuales. En cada una de ellas se introducen unos pocos conceptos nuevo y se utilizan métodos aprendidos en las actividades anteriores. La estructura de las actividades es siempre la misma, con el objetivo de que tanto el profesor como los alumnos se sientan cómodos desde el primer momento. El material necesario para impartir este curso está al alcance de cualquiera: ✔

en http://appinventor.mit.edu/explore/ se encuentra disponible todo el material y la información necesarios para aprender, aunque está todo en inglés porque es un sitio web preparado por el MIT (Massachusets Institute of Technology).

✔

Para facilitar el trabajo en este documento se incluyen enlaces a las páginas web concretas en las que se encuentra el material que se debe descargar e instalar. Es conveniente visitarlas porque cuando salga una futura versión de las herramientas de programación estará disponible en Internet.

✔

Para quien tenga Android, no será necesario instalar nada en el ordenador, porque bastará con utilizar un navegador, preferiblemente Google Chrome o Firefox.

✔

Si no se dispone de teléfono móvil, puede utilizarse un emulador, tal como se explica en http://appinventor.mit.edu/explore/ai2/setup-emulator.html, está disponible para Mac OS X, Linux y Windows. En este mismo documento explicaremos también cómo se hace y qué limitaciones tiene el emulador.

✔

Las aplicaciones que se desarrollan con estas herramientas funcionarán en teléfonos móviles y tabletas con Android versiones 3 y posteriores.

Entre el material incluido podemos encontrar diferentes tipos: ✔

dibujos

 4

Introducción

Curso de Programación de Android

✔

sonidos

✔

esqueletos de aplicaciones que el alumno debe terminar

¿A partir de qué edad se puede programar con App Inventor? Los de https://code.org/ con su fantástica iniciativa de la hora del código han demostrado a millones de personas de más de 180 países que es posible aprender a programar desde los 4 años. El autor de este documento lo ha comprobado con un niño de 6. El entorno de programación que se utiliza es similar a SCRATCH, un lenguaje de programación desarrollado y mantenido desde el MIT (Massachusetts Institute of Technology), autores también de Scratch Junior, una herramienta pensada para ser utilizada ¡a partir de 5 años!. En el año 2016, el MIT va a empezar un experimento con alumnos de primaria de Hong Kong utilizando SCRATCH y App Inventor. App Inventor es un entorno de desarrollo preparado también por el MIT, y por eso su programación en bloques se parece tanto a la de Scratch. La diferencia es que lo que se hace con App Inventor es programación de teléfonos Android. Bueno, no sólo teléfonos, también es para tablets y Android TV. Pero, volviendo a la pregunta inicial, ¿a partir de qué edad...? en opinión del autor de este documento, a partir de 10 años ya se podrían hacer actividades muy básicas, y a partir de 13 se le puede sacar bastante jugo. En el vídeo https://youtu.be/b7fTMRed7ug se puede apreciar cómo un jovencito ha hecho un programa capaz de reconocer la voz, pasarla a texto y repetir en voz alta lo que ha entendido. Más importante que la edad de comienzo es disponer del material adecuado. Sin un dispositivo Android, empleando únicamente un emulador, no llegaremos muy lejos.

¿Por qué en inglés si se podría hacer en español? Actualmente App Inventor permite trabajar en diferentes idiomas, no sólo en inglés (español, francés, italiano, ...) pero cuando se está programando igual hay que aprender un nuevo vocabulario, que son los nombres de las instrucciones que entiende el ordenador, en este caso los "bloques". Ese nuevo vocabulario cuesta lo mismo aprenderlo en inglés que en español. Microsoft ya intentó hacer en los años 90 que la gente trabajara en su idioma cuando programaba con Visual Basic para Aplicaciones (VBA) con instrucciones en distintos idiomas pero esto acabó ocasionando diferentes problemas. El peor problema asociado a trabajar en distintos idiomas es que después nos resulta más difícil aprovechar todo el material que hay en Internet para App Inventor. Hay muchísima bibliografía en forma de libros, PDF, vídeos, ... todo en inglés. © Pedro Felip Belenguer

 5

Introducción

Curso de Programación de Android

Pero no es esa la única razón. App Inventor es una herramienta que introduce al mundo de la programación. Cuando iremos a aprender otro lenguaje de programación no tendremos más remedio que aprenderlo en inglés, porque todos están en inglés, así que es mejor que nos vayamos acostumbrando.

 6

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

apítulo 1. Preparación del entorno. La primera aplicación con Android

1. Instalación de las herramientas AppInventor es un entorno de desarrollo con las siguientes herramientas: 

el diseñador



el editor de bloques



el emulador



el AI companion

En la versión actual de App Inventor, la 2, el diseñador y el editor de bloques no requieren instalación y se utilizan directamente desde el navegador de Internet. Por otra parte, el emulador y el AI companion no son imprescindibles pero sí muy recomendables, de modo que en este apartado vamos a ver cómo se instalan los dos. Con App Inventor tu trabajo estará siempre a salvo en Internet y disponible allá donde vayas (siempre que tengas acceso a Internet). Puedes trabajar con Google Chrome, Safari o Firefox (Internet Explorer no está soportado y Edge todavía no funciona bien). Si vas a trabajar con el emulador, tienes que saber que con LliureX 1406 o 1505 y Firefox o Chrome actualizados a 25 de mayo de 2015 funciona bien (comprobado por el autor) siempre que el ordenador sea mínimamente potente. Con un ordenador muy poco potente hay problemas de comunicación entre el navegador y el emulador. Visita http://appinventor.mit.edu y pulsa sobre . Necesitarás una cuenta Google para acceder al servicio porque el código fuente de tus Apps se guarda en la nube y está asociado a tu identidad GMAIL.

 7

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Nada más entrar aparecerá un mensaje como el que se aprecia a continuación:

Por lo general, utilizaremos AppInventor con un teléfono o tableta Android, o incluso con un Android TV, pero también podemos utilizar un emulador para desarrollar. El emulador es un programa que imita el comportamiento del teléfono para que lo veamos en el ordenador mientras vamos dando forma a nuestra App. Aquí vamos a ver las distintas opciones de que disponemos. No son excluyentes: puede resultar muy cómodo el uso del emulador mientras se está trabajando el aspecto que tendrá una App y, luego, instalar la aplicación “beta” para comprobar que funciona en un móvil. Sea cual sea tu método preferido, al final tendrás que instalar la App en el móvil, y para eso lo mejor es disponer de una buena WiFi. Sólo entonces podrás disfrutar de tu trabajo y darte cuenta realmente de si está terminado o de si tienes que continuar trabajando.

1.1 Conectar un dispositivo Android con AI Companion vía WiFi (método recomendado) Este método consiste en conectar tu Android a tu ordenador de modo que los cambios que realizarás en el entorno de desarrollo podrás verlos inmediatamente reflejados en tu Android sin tener que construir (compilar, enlazar e instalar) tu App. En tu Android © Pedro Felip Belenguer

 8

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

instalarás una App que se llama AI Companion, como vamos a explicar enseguida. El ordenador de desarrollo estará conectado a la misma WiFi que tu Android. También puedes tener el ordenador en una red cableada, y el Android a la WiFi de esa misma red. La red WiFi debe estar configurada de manera que permita que dos dispositivos se comuniquen entre sí, pero no todas lo permiten. Hay administradores de red que, por motivos de seguridad, configuran la red inalámbrica de manera que esto no sea posible. Si alguien quiere saber más sobre este tema, puede buscar en Internet “aislamiento WiFi”, “WiFi Isolation” o “AP Isolation”. Si no hay WiFi, o la que hay no sirve, pero puedes montar tú mismo una con un punto de acceso... te lo recomiendo. Naturalmente, si estás utilizando una red que no es tuya, asegúrate de que tu punto de acceso o router tiene desactivado el servidor DHCP o crearás problemas en la red. En tu Android, instalarás la “MIT AI2 Companion App”, que puedes buscar en la Play Store (https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3):

El autor de este documento ha utilizado este método con ordenadores LliureX y Windows.

1.2 Conectar Android vía USB sólo para transferir archivos (método recomendado para utilizar en clase) Un método aconsejado para utilizar en un aula de informática donde puede haber muchos alumnos con sus propios dispositivos Android y sin una WiFi, o con una WiFi que no da la talla para tantos a la vez, consiste en conectar el Android al PC con el típico cable USB a miniUSB (con LliureX o lo que sea). Al conectarlo, hay que fijarse en lo que nos dice el dispositivo Android en el panel de notificaciones (zona superior). Es probable que salga un mensaje indicando que la conexión USB se está utilizando sólo para cargar la batería. En tal caso, cambiaremos esa configuración a “transferir archivos” para asegurarnos de que permite que el PC acceda a todos sus archivos. Una vez hecho esto, en el PC podremos ver que tenemos conectada una unidad © Pedro Felip Belenguer

 9

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

extraíble (memoria interna del dispositivo) o dos (la interna y la externa). Si no es así podemos hacer un par de comprobaciones: 

probar un cable diferente. El nuestro podría estar dañado o puede no sea el original y que, por equivocación, estemos utilizando uno que sólo sirve para cargar



probar en un puerto USB diferente o en otro PC



cambiar en el móvil del modo MTP (transferencia de archivos multimedia) al de “transferir imágenes”

Una vez hayamos conseguido la conexión con el ordenador, lo aconsejable es navegar para localizar la carpeta DOWNLOADS y meter ahí los archivos .APK que generaremos con App Inventor. Así, irá a parar al mismo sitio donde se descargan los archivos de Internet en el móvil cuando navegamos. Ya sólo faltará localizar esos APK desde el dispositivo Android para poder instalar nuestras Apps. Abriremos el gestor de archivos (si no hay ninguno, o el que hay no nos muestra los archivos APK, nos instalaremos otro cualquiera de la Play Store) y localizaremos los APK que hayamos copiado en DOWNLOADS. Por último, pulsaremos encima para que se abran y ya está. ¡Ah, bueno, una cosa más! Para poder instalar una App con el archivo APK deberemos primero entrar en Ajustes -> Seguridad -> Seleccionar Orígenes Desconocidos y “Permitir la instalación de aplicaciones que no sean de Play Store”:

 10

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

1.3 Utilización de Dropbox, Google Drive o OneDrive para instalar Apps en Android Este método es muy similar al anterior, pero el Android, en este caso, no se conecta a USB. En el ordenador de desarrollo generamos el APK y lo guardamos en una carpeta de Dropbox, Google Drive, iCloud, … Después, en el Android, abrimos directamente la APK. Si es la primera vez, tendremos que entrar en Ajustes -> Seguridad -> Seleccionar Orígenes Desconocidos y “Permitir la instalación de aplicaciones que no sean de Play Store”:

1.4 Conectar un dispositivo Android vía USB para depuración (método desaconsejado en clase, válido para casa) La conexión USB tiene dos posibles usos: 

para desarrollar Apps, pues permite ver cómo van quedando y comprobar su funcionamiento



para copiar archivos desde el ordenador al dispositivo Android

El autor de este documento no recomienda este primer uso en las aulas porque disponemos de opciones más cómodas. La conexión USB para depuración requiere disponer de los drivers necesarios, lo cual es fácil en un ordenador con Windows pero no para Ubuntu o LliureX. Para trabajar en casa, en cambio, sí que se puede utilizar la conexión USB habilitando la “depuración USB” en el Android. La manera de hacerlo puede cambiar ligeramente según la versión de Android. Se recomienda buscar en Internet "habilitar depuración usb en android" para ver cómo se © Pedro Felip Belenguer

 11

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

hace.

1.5 Instalar y utilizar el emulador (con pc medianamente potente) (Válido en el aula pero sólo para ciertas Apps) Un emulador es un programa que sirve para que veamos cómo va a quedar la App en un Android. Este programa se instala y utiliza en el equipo de desarrollo, y sirve para gente que no tiene un Android. Sin embargo, los emuladores no están exentos de problemas: 

tienen menos sensores, pues no puede disponer de giroscopio, ni de inclinómetro, ni de acelerómetro, aunque sí de localización. Por este motivo, si en una App necesitamos agitar el móvil para que se oiga un sonido, el emulador no hará nada (por mucho que agitemos la pantalla del equipo de desarrollo). Lo mismo ocurrirá con los demás sensores. Y, en un ordenador sin pantalla táctil, todavía tendremos más diferencia entre lo que puede hacer el emulador y lo que nosotros necesitamos



suelen funcionar muy despacio



la primera vez que los utilizamos nos podemos encontrar con que tenemos que actualizarlos, y esta actualización también es lenta y no debe interrumpirse bajo ningún concepto

1.5.1 La manera “normal” de instalar el emulador (requiere privilegios de administrador)

Nos van a hacer falta privilegios de administrador para instalar el emulador, y más vale que el ordenador tenga un mínimo de potencia (o perderemos la paciencia). En http://appinventor.mit.edu/explore/ai2/setup-emulator están las instrucciones de instalación que vamos a resumir aquí. Para el emulador: 

LliureX .

Descargaremos e instalaremos el siguiente paquete: http://commondatastorage.googleapis.com/appinventordownloads/appinventor2setup_1.1_all.deb. Evidentemente, para la instalación harán falta permisos de administrador. En el caso de LliureX 15.05 el “Centro de Software de Ubuntu” se queja de que “el software es de mala calidad”, pero no es cierto y lo podemos instalar tranquilamente. Una vez instalado, cada vez que se vaya a utilizar el emulador hay que ejecutar lo siguiente: /usr/google/appinventor/commands-for-appinventor/aiStarter &

 12

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

También se puede navegar hasta la carpeta donde se encuentra y ejecutar aiStarter con un doble clic.

Como es natural, cualquier usuario podrá lanzarlo, aunque no sea administrador del sistema. Si se va a utilizar mucho, resultará más cómodo añadir ese comando al inicio del sistema o al inicio de sesión del usuario o, al menos, crear un enlace en el escritorio para ponerlo en marcha cómodamente. 

Windows

Hay que descargarse el instalador de http://appinv.us/aisetup_windows y ejecutarlo. 

MAC OS X

Hay que descargarse el instalador de http://appinv.us/aisetup_mac y ejecutarlo. 1.5.2 La otra manera de utilizar el emulador (válida para clientes ligeros)

Instalar el emulador requiere permisos de administrador, pero hay otra manera, comprobada por el autor de este documento el 5jun15 en LliureX, y que es muy sencilla: 

instalamos el emulador en un ordenador con LliureX en el que tenemos privilegios de administrador



lo utilizamos para comprobar que funciona. Hay que tener en cuenta que la primera ejecución es muy probable que se le instale la última versión de AI Companion



copiamos el contenido de /usr/google/appinventor en una memoria USB que tenga sistema de archivos ext4 (para poder poner permiso de ejecución)



¡ya está! Ahora, para utilizar el emulador, sólo tendremos que meter el USB, ejecutar /media/loquesea/appinventor/commands-for-Appinventor/aiStarter con un doble clic y, desde el navegador, entrar en Connect → Emulator.

Naturalmente, igual que se puede copiar y ejecutar desde una memoria USB, también puede hacerse desde el disco duro, en el espacio de almacenamiento de cualquier usuario, incluyendo las unidades de red.

 13

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

1.6 Trabajar sin conexión (recomendado para utilizar en clase) Si tienes un dispositivo Android, o tienes problemas técnicos que te dificultan la conexión al entorno de desarrollo, no está todo perdido, ni mucho menos. De hecho, hay quien prefiere trabajar sin conexión. En este caso, desarrollarás tu aplicación, generarás el APK (archivo de instalación de App Android), lo enviarás a tu móvil (vía correo electrónico o como prefieras) y lo ejecutarás allí. Si el resultado te gusta, ese mismo archivo APK lo podrás enviar a quien quieras para que se lo instalen también.

2. El panel de diseño Seamos ordenados. Vamos a definir nuestra primera aplicación y necesitaremos varios archivos de imágenes y de sonido. Prepárate una carpeta para poner todo este material junto. Entra en el entorno de desarrollo y busca donde pone “English”. Cambia el idioma a Español si lo deseas. Verás que no hay muchos idiomas disponibles. En este documento se intentará trabajar en inglés como se ha explicado en la introducción.

 14

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Ahora tienes que pulsar sobre Proyectos (My Projects), en la parte de arriba de la pantalla y seleccionar “Comenzar un proyecto nuevo...” (New). Acto seguido, hay que introducir un nombre para el nuevo proyecto y pulsar sobre Aceptar:

Es el momento de explorar. En Paleta/Interfaz de usuario (Palette/Basic) hallarás utilidades básicas como botones, inserción de imágenes, campos de texto, etiquetas... En Paleta/Medios (Palette/Media) hay componentes como acceso a la cámara de fotos y vídeo, galería de fotografías, sonido, reproductor de vídeo, … En Paleta/Social (Palette/Social) están los elementos necesarios para seleccionar contactos, números de teléfono de la agenda, correos electrónicos, … Desde Paleta/Sensores (Palette/Sensors) se pueden utilizar sensores para obtener información tal como la localización geográfica o la orientación del dispositivo. En el apartado LEGO® MINDSTORMS® hay componentes que permiten construir juegos de robótica utilizando robots de LEGO. Si te interesa la robótica... el autor de este documento tiene cierta experiencia montando y controlando robots vía infrarrojos y Bluetooth, pero de momento no se tratan estos temas aquí. Cada opción dispone de un interrogante al lado para proporcionar más información. Además de estas opciones hay otras, pero ya las iremos viendo conforme nos hagan falta. En App Inventor 2 es posible cambiar el idioma a español, pero el autor de este documento prefiere trabajar en inglés porque, de este modo, nos acostumbramos a utilizar © Pedro Felip Belenguer

 15

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

el vocabulario con el que nos vamos a encontrar en mucha documentación que hay en Internet en forma de libros o vídeos.

 16

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

3. Tu primera pantalla La pantalla está dividida en varios paneles. Busca el de Componentes (Components) (si no lo ves, ayúdate de CONTROL-F) y pincha sobre Screen1.

 17

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

En la derecha quedarán accesibles las propiedades. Aquí puedes ver las propiedades de un objeto de tipo pantalla:

 18

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Ahora, añade un botón arrastrando desde Basic/Button hasta encima de la pantalla del móvil. Selecciona Button1 en la columna Components. Como ahora tienes seleccionado el botón, las propiedades de la derecha se refieren a él.

 19

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Aquí puedes ver las propiedades de un objeto de tipo botón:

 20

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Ponle una imagen haciendo clic en Image. Para que no se distorsione la imagen, es conveniente que utilices un tamaño en píxeles que vaya a caber bien en este tipo de pantallas. Utilizar una imagen de mucha resolución sólo servirá para que la aplicación ocupe más espacio y tarde más en cargarse. En Text quita la frase “Text for Button1”. Puedes cambiar la forma del botón desde Shape. Añade ahora una etiqueta desde Basic/Label y, en Text, escribe “Pulsa sobre la imagen”:

Cambia el color de fondo de la Label1 desde BackgroundColor. Pon la letra en negrita con FontBold. Cambia el tamaño de la letra desde FontSize. Cambia la letra desde FontTypeface. Centra el texto desde TextAlignment. Cambia el color desde TextColor. Deja el ancho (Width) como está, que es Automatic. Si despliegas las opciones, verás que también existe Fill parent, que sirve para ocupar todo el ancho de la pantalla. Vamos a mejorar la presentación. Selecciona el componente Screen1 dentro de “Components”. En la propiedad AlignHorizontal cambia Left por Center. Entra en Icon y selecciona la misma imagen que habías puesto a tu botón.

 21

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

4. Elementos no visibles Se denominan no visibles porque no se muestran físicamente en el panel de diseño, como por ejemplo los archivos de sonido. Vamos a añadir un sonido. Puedes descargarlo de www.findsounds.com o grabarlo tú mismo, como prefieras. Haz clic en el apartado Media y, después, arrastra Sound dentro de la pantalla. Verás que va a parar debajo de la pantalla que representa al móvil, donde pone “Non-visible components”. En la columna Properties, busca Source y sube desde ahí el archivo de sonido descargado previamente.

5. El editor de bloques Ya hemos terminado el diseño de nuestra aplicación. Tenemos todos los componentes y ahora vamos a hacer el programa.

 22

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Pincha en el botón Blocks y accederás al editor de bloques. Fíjate en la parte izquierda de la pantalla, dentro del apartado Screen1:

Ahora estás viendo la lista de todos los bloques que has añadido en el panel de diseño, que son Button1, Label1 y Sound1, además del bloque Screen1 que se añade automáticamente al crear la App. Selecciona Button1 y observa sus opciones, que aparecerán en forma de piezas de puzzle. Hay tipos de piezas que indican acciones y otras para componentes. Hay que encajar unas con otras para lograr el comportamiento deseado:

 23

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

Vamos a hacer que al pulsar el botón se oiga el sonido que hemos cargado. Pincha sobre Button1 y, después, sobre Button1.Click. Pincha ahora sobre Sound1 y, después, sobre Sound1.Play. Tendrás esta figura:

Es importante que el bloque "call Sound1.Play" quede dentro del otro, perfectamente encajado, como en la figura anterior. Si lo pones donde toca, al soltarlo oirás un "click". Si lees lo que pone en pantalla, te darás cuenta de que estamos diciendo “when Button1.Click do call Sound1.Play” que, en cristiano, significa que “cuando se pulse el botón 1 hay que reproducir el sonido 1”.

.1 Utilizar el emulador (si trabajas en Linux y no tienes un dispositivo Android)

Vamos a ver cómo funciona la aplicación pero, en lugar de verlo desde un Smartphone o tableta con Android, lo vamos a ver en un emulador. El emulador actualmente (5may14) no está actualizado para Linux, y sólo funciona en la versión “antigua” de Appinventor (http://beta.appinventor.mit.edu/). Con Windows o MAC OS X sí que se puede utilizar. Pulsa sobre New Emulator, pulsa sobre OK y espera pacientemente. Te saldrá una ventana independiente con forma de teléfono móvil. Si aparece un candado abierto, hay que pulsar sobre él y deslizarlo hacia la derecha tanto como sea posible. Luego, tienes que volver al editor de bloques, desplegar donde pone “Connect to Device”, seleccionar el emulador y esperar. Puede tardar dos o tres minutos. Espera un poco más y verás cómo aparecen las imágenes en la pantalla del emulador. Al pulsar sobre el botón, se oirá el sonido que habías puesto.

6.2 Conecta el teléfono móvil o la tableta Android Si estás trabajando con Windows puedes conectar el móvil vía USB, aunque no es la opción recomendada: •

es necesario disponer de los controladores (drivers) necesarios.

•

Hay que seguir las instrucciones que pone http://appinventor.mit.edu/explore/content/setup-android-phone-usb.html

 24

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

También puedes conectar vía WiFi. Esta opción es mejor (siempre que dispongas de una WiFi) porque no requiere que instales ningún driver en el equipo ni tampoco necesitas ningún cable. En este caso seleccionaremos WiFi y nos saldrá una ventana como esta:

Seguiremos estos pasos, todos en el teléfono móvil: 1. desde la Play Store, instalaremos el “App Inventor Companion App” . Esto sólo lo tendremos que hacer una vez porque la aplicación quedará instalada. 2. abriremos la aplicación instalada (MIT AICompanion) 3. pulsaremos sobre Scan the QR Code. Si no nos lee el código de barras de la pantalla, introduciremos el código (en el ejemplo anterior, pondríamos lgebpn) 4. pulsaremos sobre “Connect to App Inventor”

7. Empaqueta tu App Recuerda pulsar sobre Save de vez en cuando. Puedes pulsar sobre Checkpoint para establecer un punto al que retornar cuando consigas un hito. Una vez tengas terminada la app busca en la esquina superior derecha el menú Package for Phone, al lado de Open the Blocks Editor:

Hay tres opciones. La primera (Show Barcode) generará un código QR asociado a tu cuenta de gmail y aplicación y sólo la podrás usar tú. Esta es la opción que yo prefiero, pero tienes que instalarte antes una aplicación de lectura de códigos QR como, por ejemplo, “Scan”. Vale la pena, pues la utilizarás para más cosas. Cuando lees el código de barras, tu equipo Android navega a una página web de la que se descarga la

 25

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

aplicación en forma de archivo APK. Al terminar la descarga pulsarás sobre INSTALAR y será cuando se instalará el programa. La segunda opción, Download to this computer, genera un archivo APK que se descarga a tu ordenador. Los archivos APK son archivos de instalación que se pueden instalar en los sistemas Android. Por último, la tercera opción, Download to conected Phone, para que funcione tienes que tener el editor de bloques abierto y el dispositivo conectado al PC vía USB.

10. Publícala en Google Play Store Si quieres que tu aplicación se la pueda instalar cualquiera la tienes que publicar en la Google Play Store. En este caso, tu aplicación debe tener tanto un código como un nombre de versión. El primero es un número entero que indica si la app ha sido actualizada a una versión superior o inferior. El segundo es una cadena de texto que típicamente especifica esta misma información como 1.0, 2.0, etc. podrás definir ambos en el panel de diseño, en los apartados VersionCode y VersionName, y deberás actualizarlo cada vez que quieras subir una nueva versión a la Red. Esos apartados aparecen cuando tenemos seleccionado el componente Screen1. Después, deberás descargar, como ya hemos explicado en el paso anterior, el archivo APK en tu ordenador. Por último, entra en https://play.google.com/apps/publish/signup y sigue las instrucciones para introducir tus datos como desarrollador, cargar el fichero en la plataforma, definir una descripción y establecer un precio (puedes ganar dinero). La cuenta de desarrolladores tiene una cuota de registro de 25 dólares. No olvides tampoco consultar la política de comisiones de Google en caso de que tu app no sea gratuita.

11. Actividades propuestas Con lo que hemos visto ya es posible realizar algunas actividades. Es posible hacer una “calcada” a lo visto anteriormente o complicarse un poquito más la vida, como vamos a ver. También es posible atreverse a utilizar componentes que no se han visto en la práctica anterior, pero que no deben ser difíciles de usar... ¿te animas a experimentar? Puedes atreverte a hacer una de estas: 1. Granja de animales. Es un juego para bebés. Tienes que dibujar una tabla en la que aparecerán fotografías de animales. Al pulsar sobre una fotografía se oirá el animal pulsado. Por ejemplo, al pulsar sobre una vaca se oirá un mugido. 2. Compañeros de clase. Una foto por cada alumno y su voz diciendo su nombre (grabada con Audacity, por ejemplo). 3. Dibujo. Dentro de Basic encontrarás el bloque “Canvas” que permite realizar © Pedro Felip Belenguer

 26

Capítulo 1. Preparación del entorno. La primera aplicación con Android

Curso de Programación de Android

dibujos. 4. Sonajero. El componente Accelerometer detecta cuándo se mueve o agita el teléfono. Podrías hacer que se oyera un sonido al moverlo.

 27

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

apítulo 2. Aplicaciones básicas del MIT

Estas aplicaciones son una traducción http://appinventor.mit.edu/explore/content/tutorials.html. propuestas de mejora al final de cada actividad.

de Aquí

lo que hay se han añadido

en más

La primera (Hello Purr) equivale a la que ya hemos hecho en el capítulo anterior.

1. La bola 8 ¿Conoces la bola mágica de Mattel? Sirve para predecir el futuro. Tú le preguntas algo, la agitas y ella te responde. Vamos a preparar una App que sirve para hacer eso mismo: predecir el futuro.

PARTE 1 El diseñador Accede al diseñador entrando en http://appinventor.mit.edu/explore/front.html y pulsando sobre el botón “Create apps!”, o entrando en http://ai2.appinventor.mit.edu/ directamente. Identifícate con tu cuenta de GMAIL (la identificación será automática si la tienes guardada en tu navegador). Empieza un proyecto nuevo entrando en Projects → Start New Project. Si estás en clase, podrías llamar a esta aplicación APP01_BOLA8_Nom_Ape (con tu nombre y apellidos; por ejemplo, APP01_BOLA8_DEMI_MOORE). Ayudándote de otra pestaña en el navegador, descárgate y guarda la imagen de una bola 8 y un archivo de sonido de https://sites.google.com/site/appinvmediafiles/magic-8ball (8 Ball Image 1) (en teoría, este PDF va acompañado de todas las imágenes que necesitas, por si algún día esa dirección de Internet falla). En la columna de la izquierda del diseñador, abre User Interface y arrastra un botón a la pantalla del móvil. Cambia su imagen por la de la bola 8 que te habías descargado (propiedad Image en la columna derecha). Quita el texto que hay en la propiedad “Text”. En la columna de la izquierda, abre Media y arrastra Sound a la pantalla. Selecciona ahora el componente Screen1 y, en AlignHorizontal, selecciona Center.

 28

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

El Editor de Bloques Entra en el editor de bloques (botón Blocks). Desde My Blocks haz clic sobre Button 1 y arrastra el bloque Button1.Click al área de trabajo. Desde Sound1 arrastra Sound1.Play dentro de Button1.Click para que encajen:

Comprobar el teléfono de verdad o el emulador Si vas a conectarte a un emulador pulsa sobre Connect → Emulator. Si no te arranca, ejecuta "aiStarter" y, luego, vuelve a probar. Si no funciona, léete otra vez el capítulo 1. Si vas a conectarte a un teléfono físico, pulsa sobre Connect to Device y elige WiFi (o USB). Si es un teléfono WiFi tendrás que poner en marcha el “AI Companion” en tu móvil (y deberá estar actualizado a la última). Es posible que no te funcione bien, dependiendo de la WiFi, y que sea mejor conectarte vía USB. Recuerda que otra opción es no conectar nada, hacer la App y luego enviarla al móvil una vez terminada. Comprueba que tu App funciona bien.

PARTE 2 Añadir cosas a la aplicación Vuelve a la ventana de diseño (Designer). Desde Screen Arrangement, arrastra VerticalArrangement a la pantalla. Desde Basic, arrastra un componente Label (que será Label1). Cambia la propiedad Text para que ponga “Pregúntale algo a la bola 8”. Añade otro componente Label (que será Label2). Cambia la propiedad Text para que ponga “Toca la bola 8 para recibir la respuesta”. Arrastra ambas etiquetas (Label1 y Label2) para que estén dentro de Vertical Arrangement, si no lo habías hecho aún. En “Components” seleccionamos el VerticalArrangement1 y cambiamos su propiedad AlignHorizontal a Center. Esto hará que las dos etiquetas estén alineadas en una línea vertical.

 29

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Editar los bloques Es hora de volver al editor de bloques para programar el funcionamiento de los componentes que hemos añadido. Quita el bloque Sound1.Play del bloque Button1.Click y déjalo suelto, separado. Dentro de Screen1 haz un clic en Label2 y arrastra el “set Label2.Text to” sobre Button1.Click:

Ahora haz clic dentro de Built-In, en Lists y arrastra el componente “pick a random item” para conectarlo a Label2.Text. También desde Built-In/Lists, arrastra el bloque “make a list”, sobre el bloque “pick random item”. También desde Built-In, pero seleccionando “Text”, arrastra el primer bloque. Haz clic entre las comillas y escribe el texto que quieras, que será una de las respuestas de tu bola mágica. Por ejemplo, puedes poner “Puede que sí, puede que no”:

 30

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Repite este último paso para añadir más respuestas, tantas como tú quieras. Puedes sacar ideas en http://es.wikipedia.org/wiki/Magic_8-Ball:

Pero... “make a list” sólo tiene ranuras para dos respuestas. Para añadir ranuras tienes que hacer un clic sobre su ruedecita dentada y verás cómo te sale un dibujo de ayuda:

En ese dibujo, arrastra el “item” que te sale arriba a la izquierda y suéltalo en la derecha, debajo del último ítem. Así, tendrás 3 o todos los que necesites. Cuando termines, vuelve a pulsar sobre la ruedecita dentada.

 31

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Ahora encaja el Sound1.Play donde le corresponde, que es debajo de Label2.Text:

Probar En el emulador o en el teléfono (según sea tu caso) haz clic sobre la bola y verás aparecer una respuesta al azar, y oirás el sonido asociado.

PARTE 3 Diseño: App Inventor Desde Sensors, arrastra AccelerometerSensor a la pantalla. Verás que se va abajo a la sección “Non-visible components”.

Editor de bloques Busca AccelerometerSensor1 y coge el bloque AccelerometerSensor1.Shaking. Arrastra todo lo que hay AccelerometerSensor1.Shaking.

dentro

Button1.Click

hacia

dentro

Borra Button1.Click haciendo clic encima, pulsando Supr y confirmando.

 32

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Comprobar el funcionamiento En el emulador: lamentablemente no es posible simular movimiento en el emulador. En el teléfono: agita el teléfono y te saldrá una respuesta, además de reproducirse un sonido.

Fin del trabajo. Propuestas Se puede modificar de manera que haga más cosas, o hacer otras aplicaciones parecidas: 1. Puedes añadir o quitar predicciones. Procura equilibrar los resultado de tipo “sí” con los de tipo “no” y “puede ser”. 2. Piensa en cómo hacer que cuando se agita el teléfono sólo se oiga una respuesta, y no como ahora, que “se le amontona el trabajo” al agitarlo sin parar. 3. Se puede utilizar el componente “Text to speech” para hacer que la bola diga la respuesta en voz alta, en lugar de hacerlo por escrito (este componente está dentro del apartado Media). 4. En la bola de Mattel, para obtener una respuesta, primero tenemos la bola con el 8 arriba. Cuando la giramos, vemos un triángulo y la respuesta debajo. Para hacer otra predicción hay que volver a la posición del 8 arriba. Una modificación de la app consistiría en que, al agitar el móvil, se mostrara la otra imagen de la bola (que también te has descargado del mismo sitio web que la otra). También sería posible ir cambiando de imagen, o mostrar una imagen diferente según la predicción. 5. Otra posibilidad es hacer una aplicación con dados o una moneda con cara y cruz. Además, podría mostrarse un color diferente según el resultado que salga. 6. Se te pueden ocurrir otras similares: “piedra, papel, tijera”, sacar una carta de bastos del 1 al 12, el juego de los chinos, la ruleta rusa, ... 7. Hacer que, en lugar de una predicción sobre el futuro, se diga el nombre de un alumno de clase (que será el voluntario para salir a la pizarra). 8. Piropos. Que cada vez que agites la bola se oiga un piropo. Pero en lugar de una bola puede ser mejor poner otra imagen. Propuestas avanzadas (hace falta saber más de lo que sabes ahora para poderlas hacer): 9. Permitir que el usuario añada posibles respuestas escribiendo. 10. Hacer que mientras está la app abierta si alguien envía un SMS recibirá como respuesta una predicción Para realizar estas actividades te puede servir de ayuda leer los siguientes apartados que están más adelante: © Pedro Felip Belenguer

 33

Capítulo 2. Aplicaciones básicas del MIT



Gestión de la voz. TTS (Text To Speech) (página 182)



Bola mágica, “piedra, papel, tijera”, dados, ... (página 185)

Curso de Programación de Android

 34

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

2. El bote de pintura Ahora vamos a pintar con las manos. Mojaremos el dedo en el bote de pintura y nos dedicaremos a manchar la pantalla. Hay muchos tipos de App y, sin duda alguna, los de pintar tienen mucho éxito. En este ejercicio aprenderás a preparar una app para pintar sobre un lienzo con tus dedos, y también a pintar sobre una fotografía que tomarás desde dentro de la aplicación. Será posible pintar puntos, dibujar líneas rectas, cambiar de color, borrarlo todo, cambiar el tamaño del pincel y tomar fotografías para pintarlas después. Este es un punto de partida estupendo para preparar juegos 2D.

Empezamos Preparamos el equipo entrando en el navegador en la dirección http://ai2.appinventor.mit.edu/ y empezando un nuevo proyecto que se llamará APP02_PINTURA_NomApe (con tu nombre y apellidos). Lo único que tenemos ahora es la pantalla (Screen1). En la columna derecha, cambiamos la propiedad Title para que ponga “Bote de pintura”.

Diseñar los componentes Vamos a ir poniendo botones e imágenes.

Los botones de color Arrastra un componente Button a la pantalla. Cambia su propiedad Text para que ponga ROJO y cambia su BackgroundColor a Red. En la columna components cambia el nombre del botón con ayuda de Rename para que se llame BotonRojo en lugar de Button1. Como no es posible utilizar espacios en blanco, se pone en mayúscula la inicial de cada palabra. Tampoco se admiten acentos. De la misma manera tienes que preparar otros dos botones para el AZUL y el VERDE, que se llamarán BotonAzul y BotonVerde, que estarán uno debajo del otro.

 35

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Lo de cambiar los nombres no es sólo un capricho. Cuando trabajaremos con el editor de bloques nos resultará más fácil saber lo que estamos haciendo con BotonRojo, BotonAzul y BotonVerde que si se llamaran Button1, Button2 y Button3.

Uso de la alineación para mejorar la presentación En la columna de la izquierda desplegamos HorizontalArrangement hacia debajo de los botones.

Layout

arrastramos

En la columna de propiedades cambiamos Width para que valga “Fill parent”, lo que servirá para que ocupe todo el ancho de la pantalla. Ahora arrastramos HorizontalArrangement.

cada

uno

los

botones

dentro

del

componente

Fíjate cómo tienen que quedar la pantalla y los componentes (los botones dentro de HorizontalArrangement1):

Los Arrangement sirven para alinear en horizontal o en vertical, pero también para hacer tablas. Puedes crear diseños más complejos poniendo unos Arrangements dentro de otros.

El lienzo de dibujo (Canvas) Desde Drawing and Animation arrastra Canvas a la pantalla. Cambia el nombre del componente para que sea Lienzo en lugar de Canvas1. Cambia su Width a “Fill parent” y su height a 300 píxeles. Ahora necesitas una imagen que va a servir de icono de la App y también de fondo sobre el que pintar. En la carpeta “Material Necesario” tienes una imagen de Julia Roberts que es la que se utiliza de ejemplo en este enunciado. Si prefieres otra imagen, ten en cuenta que sólo necesita 300 píxeles de alto, así que no utilices una de alta resolución porque tu aplicación final ocupará demasiado espacio en el móvil y tardará mucho en cargarse cada vez que la quieras utilizar. Pon esa imagen en la propiedad Icon del componente Screen1. Luego, selecciona Lienzo y pon en la propiedad BackgroundImage la misma imagen.

 36

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Cambia PaintColor a Red. Así, cuando el usuario empiece a pintar, el color será rojo.

Botones inferiores y cámara de fotos Desde Layout arrastra un HorizontalArrangement debajo de la fotografía. Pon dentro dos botones. El primero se debe llamar BotonFoto y su Text valdrá “Hacer Foto”. El segundo se llamará “BotonBorrar” y en Text pondrá “Borrar”.

 37

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Añade otros dos botones a continuación de BotonBorrar. Al primero lo llamarás BotonGrande y al segundo BotonPeque. Sus Text serán “Puntos Grandes” y “Puntos Pequeños”. Desde Media arrastra un componente Camera. Aparecerá en el apartado non-visible components.

Echa un vistazo a la aplicación en el teléfono (o en el emulador) para comprobar que tiene el aspecto esperado. ¿Sale entero el texto de cada botón? Si no es así, cambia la propiedad Text de los botones que haga falta para que quepan mejor (por ejemplo Grande y Peque).

Definir el comportamiento de los componentes Tenemos ya los botones pero todavía no sirven para nada. También tenemos una zona de dibujo (lienzo) que vamos a programar para que responda cuando la tocan (evento DrawingCanvas.Touched) dibujando un círculo. Cuando alguien arrastre un dedo sobre esta zona (evento DrawingCanvas.Dragged) dibujaremos una línea.

 38

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Evento tocar para dibujar un punto En el editor de bloques, apartado Screen1, haz clic sobre Lienzo y arrastra el bloque "when Lienzo.Touched" a la zona de trabajo. Nada más lo hayas hecho, verás que tiene ya encajados tres componentes:

Cuando alguien toca la pantalla (Touched) se nos informa de la posición en la que se ha tocado (coordenadas x y). También se nos informa de si se ha tocado un objeto del lienzo (Sprite), pero eso se verá en otra actividad. Una vez sabemos las coordenadas en las que el usuario ha tocado la pantalla dibujaremos un círculo precisamente ahí. Encaja dentro de when Lienzo.Touched el bloque Lienzo.DrawCircle:

“when Lienzo.Touched... do Lienzo.DrawCircle” → Cuando el usuario toque el lienzo, la app diburará un círculo. Si mantenemos el ratón sobre Lienzo.DrawCircle el editor de bloques nos explica (en inglés) para qué sirve y qué parámetros necesita. Lo que hace es dibujar un círculo con centro en (x,y) y radio r. Será un círculo y no una circunferencia porque ponemos "fill" a "true". Si lo pusiéramos a "false" no tendría relleno. Colócate ahora sobre la “x” de “Lienzo.Touched” y te saldrán los bloques “ get x” y “set x to”. Pincha sobre “get x” y arrástralo sobre "centerX" de “Lienzo.DrawCircle”. Repite la operación para poner "get y" sobre "centerY". Ahora indicaremos el radio (en píxeles), que será 5. Pondremos 5. Para lograrlo, debes pulsar sobre el apartado Math, y coger la pieza © Pedro Felip Belenguer

. Encájala en la ranura r de  39

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Lienzo.DrawCircle y haz clic sobre el 123 para cambiarlo por un 5. Bueno, la verdad es que hay una forma más rápida de tener un bloque con el 5 centro. Simplemente, pulsa el número 5 en tu teclado y pulsa Intro. O escribes "number", pulsas Intro y luego metes el 5 donde hay un 0. Tu programa debe tener ahora este aspecto:

Este es un buen momento para comprobar que funciona lo que llevamos hecho: en tu dispositivo móvil, pon en marcha la App y arrastra tu dedo limpio sobre la pantalla. Si has instalado AI Companion ahorrarás tiempo, de lo contrario deberás generar el archivo apk e instalarlo para poder probar.

Añadir el evento Drag que dibuja una línea Pulsa sobre Lienzo y elige el bloque "when Lienzo.Dragged":

Este evento se activa cuando alguien arrastra el dedo sobre la pantalla, y nos informa sobre la posición en la que empezó el contacto del dedo (startX, startY), la posición actual del dedo (currentX, currentY) y la posición inmediatamente anterior del dedo (prevX, prevY). Si el usuario ha hecho el arrastre sobre un objeto del dibujo draggedAnySprite será verdadero (True), pero eso no nos interesa por ahora.

 40

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Ahora dile que dibuje una línea:

La línea se dibujará desde las coordenadas (x1,y1) hasta las coordenadas (x2,y2). ¿De dónde sacaremos esas coordenadas? Sitúate sobre donde pone prevX y verás cómo aparecen dos bloques: "get prevX" y "set prevX to". Pincha sobre "get prevX" y arrástralo junto al x1 de DrawLine. Haz lo mismo con el resto de parámetros para que te quede como en la figura anterior. Ahora puedes probar si funciona: pulsa para dibujar puntitos, arrastra para dibujar líneas. Cuando el usuario arrastra el dedo en un programa de dibujo, en realidad se dibujan muchísimas líneas rectas, aunque el usuario sólo vea una curva por donde va arrastrando el dedo.

Definir el comportamiento de los botones Tal como está ahora la app ya permite dibujar, pero siempre en rojo. Ahora vamos a hacer que ocurran cosas cuando pulsamos los botones. En el editor de bloques, pulsa sobre BotonRojo. Coge el bloque BotonRojo.Click.

Pulsa ahora sobre Lienzo y haz pulsa sobre set Lienzo.PaintColor to. No te confundas con Lienzo.PaintColor. Aquí tienes los dos para que te fijes en sus diferencias:

 41

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

El primero, que tiene un color verde más claro, sirve para informar del color actual. El segundo sirve para fijar el color. Ahora entra en la pestaña Built-In, abre el apartado Colors y busca el bloque del color rojo para encajarlo en set Lienzo.PaintColor to. Atajo: escribe "red" (sin las comillas) y pulsa Intro. Haz lo mismo para los demás botones de color. El botón que nos falta es BotonBorrar. Tienes que encajar la orden Lienzo.Clear al evento BotonBorrar.Click:

Hacer posible que el usuario haga una foto Las app de App Inventor pueden interactuar con las características del dispositivo Android, incluyendo la cámara de fotos. Vamos a hacer que el usuario pueda hacer una foto para dibujar sobre ella. En el editor de bloques, pulsa sobre Camera1. Dentro podrás ver Camera1.TakePicture, que sirve para poner en marcha la cámara de fotos y que el usuario pueda hacer la foto. Camera1.AfterPicture se activa cuando el usuario ha hecho ya la foto. Haz esto:

Arriba dice que cuando se pulse el BotonFoto se pondrá en marcha la cámara. Abajo dice que cuando el usuario haya hecho la foto, ésta se guardará en la variable “image”. Esa imagen se utilizará para sustituir a cualquier cosa que haya dibujada en ese momento en el Lienzo porque hacemos "set Lienzo.BackgroundImage to image". ¿Te apetece probar cómo va la app? ¿Crees que puedes probarla con el emulador, teniendo en cuenta que tiene que hacer fotos?

 42

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Cambiar el grosor del dedo pintor En Lienzo.DrawCircle hemos puesto antes el bloque “number” con el valor 5. Esto hace que los puntos que dibujamos (el grosor de nuestro dedo pintor) tengan 5 píxeles de ancho. Hasta ahora, ese valor es fijo, pero vamos a permitir que sea el usuario quien decida si quiere pintar fino o grueso, y para eso tenemos que programar los botones Gordo y Fino. Vamos a tener que trabajar con un concepto nuevo: LA VARIABLE. Una variable es como una memoria de una calculadora: almacena un valor para poder utilizarlo después. En matemáticas utilizamos variables constantemente, en expresiones como esta: x=5 y=x2 Todo el mundo sabe que, en este momento, “y” vale 25. Pues bien, nosotros vamos a utilizar una variable que vamos a llamar GrosorPunto, como podríamos haberla llamado “x”. En un programa de ordenador una variable puede cambiar de valor. En un momento dado, GrosorPunto puede valer 5, pero más tarde puede valer 50 o cualquier otra cosa. Vamos a definir la variable. En el editor de bloques, mira dentro de Built-In donde pone Variables y coge un bloque "intialize global name to":

Haz clic donde pone “name” y cámbialo a GrosorPunto.

Tenemos que dar un valor a la variable (por eso sale el triángulo con la admiración, porque no podemos dejarlo así). Para lograrlo, definiremos un bloque number con el valor 2. Esto se puede hacer rápidamente haciendo un clic en una zona vacía de la pantalla, pulsando el número 2 en el teclado y pulsando intro. Encaja ese bloque en el GrosorPunto:

Cuando se pondrá en marcha la app GrosorPunto valdrá 2.

Uso de variables

 43

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Si echamos un vistazo a nuestro editor de bloques, veremos que cuando el usuario pulsa la pantalla se dibuja un círculo con radio 5:

Ahora queremos que dibuje utilizando un radio GrosorPunto en lugar de un 5 fijo. arrastra el bloque “number 5” a la papelera y pon en su lugar un bloque get del apartado Built-In/Variables. Abre el desplegable y escoge “global GrosorPunto”:

Cambiar el valor de una variable Lo bueno de utilizar una variable para determinar el radio cuando dibujamos un círculo es que si cambiamos el valor de la variable los nuevos círculos tendrán un radio diferente. Ahora vamos a hacer que los botones BotonGrande y BotonPeque cambien el valor de GrosorPunto para dibujar más grueso o más fino:

Se hace así: pulsamos BotonGrande y escogemos BotonGrande.Click. Luego, de Builtin/Variables sacamos un bloque "set to" y, en el desplegable, escogemos "global GrosorPunto". Después, hacemos clic en una zona vacía de la pantalla, escribimos un 8 y pulsamos Intro para que aparezca un bloque “number” con valor 8. Lo encajamos en set © Pedro Felip Belenguer

 44

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

global GrosorPunto. De forma similar definimos el funcionamiento del botón BotonPeque. Comprueba el funcionamiento de tu app.

La aplicación completa

Actividades Puedes modificar esta app para que haga otras cosas: 

que con los botones Gordo y Fino se cambie también el grosor de las líneas que se dibujan (tendrás que investigar los bloques del componente Lienzo para ver cómo se hace)



que se muestre en algún lugar de la pantalla el valor de GrosorPunto



que el usuario pueda introducir el valor de GrosorPunto en un componente de tipo TextBox. La introducción de datos se verá más a fondo en actividades posteriores



que se oiga un sonido cada vez que se pinta algo



que se oiga “Rojo” al pulsar sobre el botón rojo



que se oiga “Sonríe” cuando se vaya a hacer una foto (o “¡Guapa!”, “¡Cosita!”, “Patata, patata”)



que los botones de pintura tengan forma de botes de pintura

 45

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

3. Machacar Topos (Whac-A-Mole) El juego del Whac-A-Mole (machaca un topo), o MoleMash (que también significa machacar topos) es un Arcade clásico en el que el jugador espera a que unos “topos” asomen su cabeza para machacarlos con un mazo (mallo):

Cuando programaremos juegos de ordenador, utilizaremos la palabra Sprite para hacer referencia a una figura. Originalmente, el término sprite, que significa duende o hada, se utilizaba para referirse a figuras mitológicas como las hadas (fairy) o los duendecillos (pixy). En informática significa “figura capaz de moverse por la pantalla”, como un personaje.

¿Qué vamos a hacer? Vamos a hacer un programa en el cual: 

un topo saldrá en diferentes lugares de la pantalla, y cambiará de sitio a cada segundo



si tocas el topo el teléfono vibrará y te anotarás un acierto



si tocas donde no hay topo te anotarás un fallo



habrá un botón RESET que pondrá a cero los contadores

Empezamos Pon en marcha App Inventor y empieza un nuevo proyecto. Llámalo APP03_Machacar_Topos. Cambia el título de la pantalla (Title) a “Machacar Topos”. © Pedro Felip Belenguer

 46

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Descárgate la figura del topo de http://examples.oreilly.com/0636920016632/. Aquí la vamos a llamar mole.png. Dentro de la columna Components, mira hacia abajo y verás que hay un apartado Media y dentro un botón “Upload File...”:

Utiliza ese botón para subir mole.png. Entra en Screen1 y cambia la propiedad Icon para que sea esa misma imagen.

Diseño de los componentes Vamos a numerarlos para no dejarnos ninguno: 1. Basic/Canvas. Este va a ser el terreno de juego. Déjalo con el nombre Canvas1, ponle Width a “Fill parent” para que ocupe todo el ancho de la pantalla y pon Height a 300 píxeles. 2. Animation/ImageSprite. Pon este componente dentro de Canvas1. Cambia su nombre en la columna Components y llámalo Topo. En Picture elige mole.png. 3. Basic/Button. Pon este componente debajo de Canvas1. Cambia su nombre para que sea BotonReset y en Text ponle “Reset”. 4. Basic/Clock. Ponlo donde quieras, que él irá a parar debajo, a la sección “Nonvisible components”. No le cambies el nombre. 5. Media/Sound. Arrastra un componente de estos, que irá también a la sección “Nonvisible components”.

 47

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Tu pantalla debería tener este aspecto:

Los contadores Vamos a poner en la pantalla los contadores de aciertos y fallos: 1. Screen Arrangement/HorizontalArrangement. Arrastra este componente y déjalo caer debajo del botón Reset. No le cambies el nombre. 2. Basic/Label. Arrastra dos componentes de estos dentro del anterior. El primero te resultará muy fácil pero el segundo lo tendrás que hacer con cuidado, fijándote en la línea azul que te indica a dónde va a ir a parar: a) al primero llámalo “EtiquetaAciertos” y en Text le pones “Aciertos:” (incluyendo los dos puntos) © Pedro Felip Belenguer

 48

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

b) al segundo llámalo “EtiquetaContadorAciertos” y en Text le pones “0”. 3. Screen Arrangement/HorizontalArrangement. Arrastra uno de estos debajo del que habías puesto antes. 4. Basic/Label. Arrastra dos componentes de estos dentro del anterior. El primero te resultará muy fácil pero el segundo lo tendrás que hacer con cuidado, fijándote en la línea azul que te indica a dónde va a ir a parar: a) al primero llámalo “EtiquetaFallos” y en Text le pones “Fallos:” b) al segundo llámalo “EtiquetaContadorFallos” y en Text le pones “0”.

Definir el comportamiento de los componentes Desde el editor de bloques vamos a definir el comportamiento del programa. Queremos que el topo se mueva a un lugar aleatorio cada segundo. El usuario intentará acertarle y el programa llevará la cuenta de aciertos y fallos. Recomendamos utilizar el dedo, NO UN MARTILLO!!!! Por último, el botón Reset pondrá los contadores a cero.

 49

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Cómo mover el topo En los programas que has hecho hasta ahora hemos utilizado procedimientos prefabricados (Built-In), como el Vibrate que hacía vibrar el teléfono. Si hubiera un procedimiento capaz de mover un ImageSprite a una posición aleatoria de la pantalla, lo utilizaríamos para mover el topo, pero no existe. Lo bueno es que podemos definir nuestros propios procedimientos que utilizaremos en el editor de bloques. Concretamente, prepararás un procedimiento que cambiará de sitio el topo. Llamaremos a este procedimiento MueveTopo y se utilizará al poner en marcha el juego, cada vez que el usuario pulse la pantalla y también una vez por segundo.

Definición del procedimiento MueveTopo Para entender cómo mover el topo, primero necesitamos saber cómo funcionan los gráficos en Android. El lienzo (canvas) es como una matriz con coordenadas x (horizontal) e y (vertical). La posición (0,0) es la esquina de arriba a la izquierda. Si aumentamos la “x” nos vamos hacia la derecha, y si aumentamos la “y” nos vamos hacia abajo. Las propiedades X e Y de un componente ImageSprite indican en qué lugar se encuentra la esquina superior izquierda de la imagen. De este modo, si queremos situar el topo arriba a la izquierda, tendremos que poner sus coordenadas X e Y a (0,0). Ahora tienes que hacer estas dos cosas: 

Ponte en el diseñador (Designer), pincha tu topo con el cursor y arrástralo hacia arriba. Fijate en su propiedad Y y verás cómo se hace más pequeña



Ahora cambia la propiedad X a 134 y verás cómo el topo se pone en mitad de la pantalla. Cambia ahora a 18 y verás que pasa a estar más a la izquierda.

Si la X es demasiado grande, la figura no saldrá en la pantalla porque quedará fuera de ella, y lo mismo ocurre con la Y. Para determinar los valores máximos de X e Y para que se mantenga el topo en la pantalla, necesitamos utilizar las propiedades Width y Height de Topo y de Canvas1. Las dimensiones de Topo son las de la imagen que hemos cargado (mole.png). Las de Canvas1 son 300 píxeles de alto y todo el ancho de la pantalla (Fill parent). Por ejemplo, si mole.png tiene 36 píxeles de ancho y la pantalla tiene 200 píxeles de ancho, la X del Topo puede valer entre 0 y 164, porque 200-36 son 164. Del mismo modo, la Y del Topo puede valer entre 0 y Canvas1.Height-Topo.Height. Veamos el procedimiento y después la explicación: Se hace así: 1. Dentro de Built-In busca Procedures y púlsalo. 2. Saca el bloque “to procedure do”, no “to procedure Result”.

 50

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

3. Haz clic sobre “procedure” y escribe “MueveTopo”, que será el nombre del procedimiento 4. Como queremos mover el topo, en My Blocks abre el cajón Topo y saca el bloque Topo.MoveTo y encájalo dentro de MueveTopo. Fíjate en que deberemos indicar las coordenadas (x,y) donde se moverá. 5. Vamos a especificar que la x debe estar entre 0 y Canvas1.Width-Topo.Width: a) En la pestaña Built-In abre el cajón Math b) Saca un bloque random integer y encájalo en la x de Topo.MoveTo. c) Si no hacemos nada, random integer generará un número al azar entre 1 y 100, así que cambia el 1 por un 0... d) … y elimina el bloque “number 100” con la tecla Supr o moviéndolo a la papelera e) Del cajón Math saca ahora un bloque con el signo – (de restar). Encájalo en el “to” que hay en el bloque random integer. f) Ahora pasa a la pestaña My Blocks y abre el cajón Canvas1 para sacar Canvas1.Width (no set Canvas1.Width to) y encájalo en la izquierda del bloque de restar que habías puesto antes. g) Ahora haz lo que haga falta para poner un Topo.Width a la derecha de la resta. 6. Ahora tú solito haz lo que haga falta para que la “y” del procedimiento Topo.MoveTo sea un valor entre 0 y Canvas1.Height-Topo.Height. Mira esta figura sólo después de haberlo hecho tú, para comprobar que lo has hecho bien:

Para comprobar que el procedimiento funciona, tienes que tener un dispositivo conectado al editor de bloques (emulador o equipo Android). Después, haz clic con el botón derecho sobre el bloque "call Topo.MoveTo" y elige “Do It”. Naturalmente, puedes hacerlo varias veces. Si estás utilizando el emulador, procura que el editor de bloques no ocupe toda la pantalla o no podrás ver bien lo que está ocurriendo en tu teléfono de mentiras.

 51

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Llamar al procedimiento MueveTopo cuando arranca la App Necesitamos que el procedimiento MueveTopo se ejecute de vez en cuando. Primero que nada, haremos que se ejecute al poner en marcha la App: 1. De Screen1 saca "when Screen1.Initialize" 2. De Built-In/Procedures Screen1.Initialize

saca

"call

MueveTopo"

encájalo

dentro

Llamar al procedimiento MueveTopo una vez por segundo Ahora vamos a necesitar el componente Clock. En el diseñador de componentes habíamos puesto el componente Clock y entre sus propiedades está el TimeInterval, que está puesto a 1000. Eso significa que ese reloj hará “tic” cada 1000 milisegundos o, lo que es lo mismo, cada segundo. Todo lo que pondremos dentro del procedimiento Clock1.Timer ocurrirá una vez por segundo, así que haz esto:

Si quieres que el topo se mueva más deprisa o más despacio, ya sabes cómo hacerlo.

Los marcadores Recuerda que tienes dos contadores que valen 0 y que hay que ir actualizando. Utilizaremos el bloque Canvas1.Touched que indica que la zona de juego ha sido tocada, y nos dice las coordenadas (x,y) del toque, que no nos hace falta esta vez, y si se ha tocado un sprite, que sí que nos hace falta. Fíjate en lo que tienes que hacer y luego tendrás la explicación:

Debes fijarte muy bien en cada paso. A estas alturas ya no debes confundir un bloque “set … to” con un bloque sin las palabras “set” y “to”. Tampoco debes confundir una suma con una resta ni nada por el estilo.

 52

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

El bloque if/then/else lo encontrarás en el cajón Control. El bloque "get touchedAnySprite" lo obtendrás poniendo touchedAnySprite (un parámetro de "when Canvas1.Touched").

cursor sobre

Una vez terminados tus bloques léete esta explicación: cada vez que el terreno de juego (Canvas1) sea tocado, se comprueba que se ha tocado un sprite. Como sólo hemos definido un sprite, tiene que tratarse del topo. Ahora llegamos al bloque ifelse. Recuerda que “if” significa “si”, “then” significa “entonces” y “else” significa “si no”. Pues bien, si se ha tocado un sprite, entonces suma 1 a EtiquetaContadorAciertos; si no, suma 1 a EtiquetaContadorFallos. ¡Comprueba que funciona! ¿Falla algo? Eso es lo normal. Las cosas no salen bien a la primera. CORRIGE SIN AYUDA TUS ERRORES.

Abstracción procedimental Hemos definido un procedimiento por primera vez, el MueveTopo, pero no hemos explicado qué es exactamente un procedimiento. Un PROCEDIMIENTO, en programación, es un fragmento de programa al que se pone nombre para que después se le pueda llamar desde diferentes sitios. En esta app, el procedimiento MueveTopo es llamado al ponerse en marcha la app y también a cada segundo. Si no utilizáramos procedimientos, deberíamos haber copiado las mismas instrucciones en Screen1.Initialize y en Clock1.Timer. El hecho de copiar y pegar hace que el programa sea más largo y complejo y que nos podamos equivocar con más facilidad, pues si encontramos un error en las instrucciones repetidas debemos corregirlo en dos sitios. Debes saber que App Inventor es un entorno de programación más sencillo que los que se suelen utilizar profesionalmente. En un entorno profesional, mientras una persona prepara un procedimiento, como MueveTopo, otra persona puede estar programando el funcionamiento de Canvas1.Touched y utilizando el procedimiento MueveTopo, y una tercera persona puede encargarse de programar Screen1.Initialize y utilizar también el procedimiento MueveTopo. Sólo la persona que lo define sabe cómo está hecho, las otras dos no necesitan saber cómo está hecho MueveTopo, sólo necesitan saber qué es lo que hace. Se llama abstracción procedimental porque quien utiliza el procedimiento no necesita saber cómo está hecho, sólo lo que hace.

Poner los contadores a cero Mientras tú juegas, un amigo puede estar mirando y deseando jugar. Si quieres pasarle el móvil, querrás poner a cero los contadores sin tener que salirte de la app y volver a ponerla en marcha. © Pedro Felip Belenguer

 53

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Antes de seguir leyendo piensa en qué necesitas hacer para poder poner los contadores a cero. ¿Ya lo has pensado? Si es así, sigue leyendo. Necesitas un bloque "when BotonReset.Click" que, al pulsarlo, ponga un 0 en el contador de aciertos y otro 0 en el de fallos: Para crear un bloque “number 0” basta con pulsar un 0 en el teclado y pulsar intro. Para hacer un set EtiquetaContadorAciertos.Text to puedes buscar dónde lo has utilizado antes, pulsar sobre él, pulsar después CTRL-C y CTRL-V para copiar y pegar, y, por último, llevarte la copia a donde te interese.

Hacer que haga más cosas cuando se consigue machacar un topo Queremos que el teléfono vibre cuando machacamos al topo:

De este modo haremos que vibre durante 100 milisegundos (1 décima). No necesitamos los valores (x, y). La verdad es que podríamos haber hecho vibrar el teléfono sólo con poner Sound1.Vibrate dentro del bloque then-do del ifelse que hay dentro de Canvas1.Touched:

 54

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Actividades Puedes modificar la aplicación Machacar Topos de muchas formas. Aquí tienes algunas ideas: 

hacer que el topo se mueva cuando lo tocas, porque ahora mismo un jugador hábil puede tocarlo varias veces sin que se mueva del sitio



añadir un botón que haga que el topo se mueve más deprisa o más despacio



añadir un contador de movimientos, que diga cuántas veces se ha movido el topo



cambia la imagen del topo. No debe ser muy grande y no vale un gif animado. Se recomienda una de tipo PNG porque soporta transparencia. Así, lo que rodea al topo no será un rectángulo sino que permitirá ver el terreno de juego



añade un segundo personaje (ImageSprite), por ejemplo una flor o un gatito, que el usuario no debería machacar; si el jugador lo machaca, le restas aciertos o pones “game over”



también podrías poner un personaje más malvado que suba puntos



puedes hacer que al machacar el topo se oiga un sonido (como el que hace una cucaracha cuando la pisas)



puedes cambiar la imagen del topo por la de otra cosa, como por ejemplo una persona que te caiga mal, o utilizar el componente ContactPicker para que el usuario pueda elegir la imagen de uno de los contactos que hay grabados en el móvil. El componente ContactPicker está dentro del apartado Social.

En actividades posteriores aprenderás más técnicas para juegos, como detectar colisiones entre componentes ImageSprite que se están moviendo. Concretamente, lo verás en la actividad “5. La Mariquita”.

Ahora sería un buen momento para... Con lo que has aprendido, ahora serías capaz de mejorar tu aplicación de bola 8. Seguro que recordarás que cada vez que agitas el teléfono, si no tienes cuidado, salen varias predicciones. Ahora que ya conoces el if/then/else podrías hacer esto: 

al agitar la pantalla 

si en pantalla está la imagen de arriba de la bola 8 



si no es así 



entonces pon la imagen de abajo (triángulo), haz la predicción, muéstrala por pantalla y dila en voz alta no hagas nada

al pulsar el botón

 55

Capítulo 2. Aplicaciones básicas del MIT



si en pantalla está la imagen de abajo (triángulo) 



Curso de Programación de Android

entonces pon la imagen de arriba

si no es así 

no hagas nada

Una vez hecho el cambio, verás que si agitas el móvil sólo se hace una predicción, y es necesario pulsar sobre la bola para que se dé la vuelta y esté lista para la siguiente predicción. También puedes utilizar un bloque if para hacer esto porque en la parte else no estamos haciendo hada. El bloque if se diferencia del ifelse en que no hay else.

 56

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

4. Juego de disparos (Arcade) En esta práctica vas a preparar un juego de matar. Bueno, de disparar a algo que se mueve. Concretamente, pondremos una nave amiga y una nave enemiga.

Al grano Pon en marcha App Inventor y empieza un nuevo proyecto. Llámalo T4_Dispara. Cambia el título de la pantalla (Title) a “Dispara”.

Pon los componentes Empezamos a trabajar en el diseñador. Pon un Basic/Canvas. Ponle un ancho “Fill parent” y un alto de 300 píxeles. Si lo deseas puedes cambiar el color de fondo (BackgroundColor). Descárgate de Internet la imagen de tu nave amiga. Tiene que tener poca resolución, por ejemplo 40 píxeles de alto por algo parecido de ancho. Si encuentras una que te gusta y tiene más resolución, puedes cambiársela com GIMP haciendo Imagen → Escalar la imagen. Añade un Animation/ImageSprite y, en Picture, ponle la imagen de la nave amiga. Los ImageSprites son parecidos a las imágenes (Basic/Image) con la diferencia de que podemos moverlos por la pantalla (además de detectar colisiones). Añade un Animation/Ball. Los componentes Ball son como los ImageSprites pero sin una imagen asociada. Coloca esa bola como si fuera un misil que está lanzando la nave amiga: Cambia el nombre a “Ball1” y llámala Misil.

 57

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Piensa un momento cómo podrías hacer que la bola se moviera hacia arriba. Concretamente, haremos que cada décima de segundo la bola se eleve 100 píxeles. NO SIGAS LEYENDO y piensa. Si vas a utilizar el emulador, que se vaya poniendo en marcha mientras piensas. ¿Ya lo tienes? Bien, pues sigue leyendo, a ver si tus ideas coinciden con lo que viene ahora. Añade un componente Basic/Clock y cámbiale el TimeInterval a 100 (100 milisegundos = 1 décima de segundo).

Editor de bloques Haz esto:

Conecta el editor de bloques al emulador y verás lo que pasa.

Disparar Como puedes observar, el misil se mueve sin que nosotros hayamos disparado. Para que se mueva sólo cuando disparamos, primero debemos ir al diseñador y cambiar la propiedad TimerEnabled del Clock1 para que la casilla no esté marcada. Así, mientras no digamos nada, el temporizador estará quieto y no ocurrirá nada cada 100 milisegundos. Acto seguido, en el editor de bloques, tienes que añadir el bloque NaveAmiga.Touched:

El bloque true puedes encontrarlo dentro de Built-In/Logic. Ahora las instrucciones que le hemos dado son estas: 1. al poner en marcha la aplicación, el temporizador está detenido porque Clock1.TimerEnabled es false (puesto que hemos desmarcado la casilla en el diseñador). 2. si pulsamos sobre la nave amiga, Clock1.TimerEnabled pasa a valer true y el misil empieza a moverse © Pedro Felip Belenguer

 58

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Si tenemos el emulador en marcha, veremos que la modificación que hemos hecho ya funciona: el misil sólo se mueve cuando tocamos la nave amiga.

Que se vea el misil sólo cuando debe verse En el diseñador, sitúate sobre el misil y cambia su propiedad Visible para que no esté marcada. Eso hará que la el misil esté invisible mientras no digamos lo contrario. Aunque tengamos el misil invisible, si marcamos la casilla “Display Invisible Components in Viewer” en el diseñador de Apps igual la podremos ver. Modifica ahora el bloque NaveAmiga.Touched así:

Ahora le estás diciendo que cuando el usuario toque la nave amiga, se hará visible el misil y se pondrá en marcha el temporizador. Como ya habrás adivinado, hacer set Misil.Visible to true es lo mismo que ir al diseñador y marcar la casilla de la propiedad Visible del Misil, sólo que cuando la App está en marcha no podemos ir al diseñador a marcar o desmarcar nada.

 59

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Por último, haz esto para que el misil deje de verse cuando llegue a la parte superior de la pantalla:

El evento Misil.EdgeReached se activa cuando el Misil llega a un borde de la pantalla. Como sólo se mueve hacia arriba, en esta app se activa al llegar arriba de la pantalla.

Mover la nave amiga ¡Esto marcha! (aunque todavía es una App bastante inútil) Para que se mueva la nave amiga vamos a poner un botón que sirva para desplazarla a la izquierda y otro a la derecha, así que volvemos al diseñador:

Paso a paso: 1. añades un HorizontalArrangement y le pones Center en Align. 2. añade un botón, ponlo dentro de es HorizontalArrangement, llámalo BotonIzq y en © Pedro Felip Belenguer

 60

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Text escribe “<<<” 3. añade otro botón a continuación, llámalo BotonDer y en Text escribe “>>>” Más adelante podrás poner una imagen en cada botón para que queden mejor, pero ahora nos interesa que esto funcione, más que la presentación. ¿Te imaginas qué toca hacer ahora?... piensa un poco. Vale, ahora sigue leyendo para ver si lo que vamos a hacer es lo que tú te imaginabas:

Y haz algo similar para el botón derecho (si utilizas bien CTRL-C y CTRL-V te costará muy poquito de hacer). Comprueba en el emulador que los botones funcionan. Fíjate lo que ocurre cuando disparas... ¿qué te parece?

Situar el misil en el lugar adecuado Hemos movido la nave pero cuando disparamos, el misil sigue saliendo del mismo sitio. De entre todas las posibles soluciones a este problema, vamos a elegir la que verás a continuación. Modifica el bloque así:

Prueba a disparar varias veces seguidas sin reiniciar la app. Si compruebas en el emulador, verás que el misil sale casi de donde toca. En realidad, sale desde arriba a la izquierda de la nave.

 61

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Ahora tienes que hacer esto para que el misil salga de donde toca, que es desde arriba de la nave pero desde el centro (siempre que tu nave tenga el lanza-misiles en el centro, claro está):

Añadir la nave enemiga y el marcador Descárgate una nave enemiga, ajusta su tamaño con GIMP, añade un ImageSprite y, en Picture, pon tu nave. Añade un Label para el marcador. Llámalo Marcador y, en Text, ponle 0. Puedes utilizar el tamaño y color que quieras. Tienes que añadir otro temporizador, así que añade un segundo componente Clock y llámalo EnemigoClock para distinguirlo del anterior:

 62

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Añadir movimiento a la nave enemiga Esto es suficiente para que se mueva:

Manejar el marcador Cuando hagamos blanco, que se vea en el marcador:

El bloque when Misil.CollidedWith other do se activa cuando el Misil entra en contacto con otro ImageSprite. En nuestra app esto sólo puede ocurrir cuando la imagen del Misil se superpone a la de la NaveEnemiga, lo que traducido al lenguaje del usuario significa que hemos hecho blanco, y hay que sumar 1 al marcador. Comprueba el funcionamiento. ¿Va bien? Pues no, no va bien. Resulta que cuando haces blanco suma un punto, pero cada vez que disparas suma 1 también. El problema está en que el misil empieza su movimiento estando en contacto con la nave amiga, y esto también es una colisión de ImageSprites. La solución es, más o menos, esta:

El misil empieza su vuelo 20 píxeles por encima de la NaveAmiga. Ese 20 habría que cambiarlo por la cifra que vaya bien con el tamaño del misil y de la NaveAmiga. © Pedro Felip Belenguer

 63

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Comprueba que funciona.

Terminar el movimiento de la nave enemiga y la explosión al alcanzarla La nave enemiga debe moverse sin parar. Cuando llegue a la derecha, la ponemos otra vez a la izquierda del todo. Además, vamos a hacer que se mueva más deprisa, cambiando la propiedad Interval de su Clock a 300 en lugar de 1000.

Cuando el misil alcanza la nave enemiga, éste debe desaparecer, así que tenemos que modificar el bloque Misil.CollidedWith:

Actividades Puedes modificar esta app para mejorarla. Aquí tienes algunas ideas: 

que desaparezca la nave enemiga al alcanzarla con el misil



que se oiga una explosión



que antes de desaparecer la nave enemiga su imagen cambie a la de una explosión



que el terreno de juego no sea una imagen en blanco, sino algo más adecuado



que al hacer blanco el teléfono vibre



que los botones sean más atractivos



que la nave enemiga suba o baje de vez en cuando

Mejoras gráficas: 

se puede poner un color en el terreno de juego (Canvas) que no sea blanco. Eso nos obligará a cambiar las imágenes de nuestras naves porque si no veremos que están metidas en un rectángulo blanco. El modo de eliminar ese rectángulo consiste en utilizar un programa como GIMP para cambiar el blanco por transparencia (añadir canal alfa) y exportar la imagen como PNG (el JPG no soporta transparencia).

 64

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

En http://explore.appinventor.mit.edu/ai2/space-invaders se pueden ver más ideas desarrolladas. Está en inglés y hay que tener en cuenta que RocketSprite es la nave amiga, SaucerSprite es la enemiga y Bullet es el misil. Otras mejoras un tanto avanzadas (algunas desarrolladas en la web indicada): 

que la nave amiga se pueda mover arrastrándola con el dedo



que la nave enemiga cambie de lugar de un modo aleatorio cuando la alcanzamos



que la nave enemiga vaya ganando velocidad cada cierto tiempo (necesitarás utilizar variables, como en la App de pintar)



que el misil se mueva sin temporizador (Clock), utilizando las propiedades Enable (para que esté quito o se mueva), Heading (dirección; 0 es hacia arriba), Interval (cada cuántos milisegundos se mueve), Speed (velocidad, es decir, cuántos píxeles avanza cada Interval milisegundos)



que no se pueda disparar mientras ya haya un misil “volando”

Y mejoras que podrás hacer más adelante, pero que ahora no es aconsejable intentar: 

que cada cierto tiempo salga una nave enemiga diferente, con un sonido asociado y que valga más puntos



que la nave enemiga nos lance una bomba que nos pueda matar; si morimos pasaremos a una segunda pantalla (Screen) donde pondrá GAME OVER



que podamos pasar a un segundo nivel, con una nave enemiga más pequeña y donde todo vaya más deprisa



que pueda haber hasta 3 misiles en el aire al mismo tiempo



que pueda salir una segunda nave enemiga, que vuele más bajo

 65

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

5. Si tecleas no conduzcas El 28% de los accidentes de tráfico en EE.UU el año 2010 se debieron a que muchos conductores escribían en sus móviles mientras conducían. Eso son 1,6 millones de accidentes. Esto sirvió para que un estudiante tuviera la idea de desarrollar una app para Android que respondiera automáticamente a los mensajes SMS que recibiera mientras conducía, es decir, mientras su app estaba en marcha. Si alguien le enviaba un SMS el teléfono contestaba con otro SMS en el que ponía “estoy conduciendo, cuando pare te llamo”. Luego, hablando con más gente, se añadieron nuevas características a la app: 

el usuario puede cambiar la respuesta, en lugar de haber una única respuesta posible escrita en el programa



la app lee el SMS en voz alta. Así, si recibes un SMS mientras conduces, el teléfono te dice quién te lo ha enviado y también el contenido del mensaje



la respuesta puede incluir tu posición en el mapa (utilizando el GPS del teléfono). Así, si te están esperando en casa y no saben si tardarás en llegar, sólo te tienen que enviar un SMS y tu teléfono se lo dice, sin que tengas que coger tú el teléfono

Aunque actualmente los SMS no se utilicen mucho, no es posible hacer una App que nos lea los WhatsApps, y hacer una que trabaje con Twitter resulta demasiado complejo en este momento. Esta App sigue siendo muy interesante por los componentes que se van a manejar por primera vez.

Qué vas a aprender Esta app es más compleja que las anteriores, así que la vamos a desarrollar poco a poco, por partes. Vamos a aprender: 

cómo funciona el componente Texting, que maneja los SMS



cómo permitir que el usuario introduzca el mensaje, en lugar de estar fijado por programa



cómo grabar datos que no se pierden una vez cerramos la app, utilizando el

 66

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

componente TinyDB 

cómo utilizar nuestra posición geográfica, con el GPS de nuestro dispositivo

Diseña la aplicación El diseño es muy sencillo:

Son los siguientes: 

la pantalla tiene como imagen de fondo una en la que pone “SMS”



el icono de la aplicación es esa misma imagen



LetreroRespuesta es un Label que contiene la frase “Texto de respuesta para todos los SMS que se reciban:”



Respuesta es un Label que contiene la frase “Estoy conduciendo, te llamo luego”; puedes ponerlo en negrita, letra más grande y con un fondo del color que quieras



NuevaRespuesta es la cajita que hay debajo, y se trata de un TextBox que, en el campo Hint, contiene la frase “Introduce la nueva respuesta”



BotonModificarRespuesta es el botón que hay a continuación; en el campo Text pone “Modificar Respuesta”



PosicionActual es un Label con la frase “Posición Actual”, que utilizaremos para mostrar la posición del GPS

 67

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Además, tenemos también componentes no visibles. Tienes que poner uno de cada de esta lista (déjales el nombre que sale por defecto): 

Social/Texting



Social/Twitter



Other stuff/TextToSpeech



Basic/TinyDB. ¡Cuidado, no lo confundas con Other stuff/TinyWebDB!



Sensors/LocationSensor

Define el comportamiento de los componentes Es el momento de ir al editor de bloques y arremangarse.

Leer el mensaje que llega y enviar la respuesta automáticamente El componente Texting es el que sabe cómo leer y escribir mensajes SMS. Tiene un bloque MessageReceived que sirve para leerlos, y que informa del número de teléfono que nos ha enviado el mensaje y del texto, puesto que todos los SMS son mensajes de texto. Queremos que el teléfono nos lea el mensaje, por eso hemos puesto un TextToSpeech. Como queremos que al recibir un SMS nuestro teléfono responda enviando otro SMS con el texto que hemos puesto en el Label Respuesta, utilizaremos un bloque SendMessage dentro del MessageReceived:

Lo que hace cuando recibe un SMS es esto: 

pone en la variable “number” el número de teléfono de quien nos ha enviado el

 68

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

mensaje 

pone en la variable “messageText” el mensaje de texto que nos han enviado



lo lee en voz alta; en realidad, construye una frase del tipo “SMS recibido de 605665362 He llegado de mi viaje, cuando quieras quedamos”



envía un mensaje a ese mismo número de teléfono, que está apuntado en la variable “number”, con el texto que hay puesto en el campo Text de la Label Respuesta

Bueno, en realidad no envía el mensaje, porque el bloque “call Texting1.SendMessage” está desactivado. Para desactivarlo basta con utilizar el botón derecho y pulsar sobre Disable Block. Así no me gasto dinero enviando mensajes mientras hago pruebas. Por otra parte, la cajita amarilla donde pone “Lo tengo desactivado” es un comentario. Los comentarios son importantes porque ayudan a entender los programas. Son útiles cuando otra persona mira lo que hemos hecho, o cuando nosotros mismos echamos un vistazo a nuestro programa un mes después de haberlo hecho. Para añadir un comentario basta con pulsar sobre un bloque con el botón derecho y elegir Add comment. Se puede quitar eligiendo Remove Comment. Para comprobar que el programa funciona no nos sirve el emulador, y tampoco nos será muy útil una tableta si no es capaz de conectarse a Internet mientras vamos paseando por el exterior. Tenemos que utilizar un Smartphone, y asegurarnos de que tiene el GPS activado. Para enviar el SMS podemos pedir a alguien que nos lo envíe, o podemos buscar en Internet alguna página web que envíe mensajes, aunque... ¿son de fiar?

Introducir el texto de respuesta Si el usuario quiere introducir una respuesta diferente, no tiene que pedirnos que modifiquemos el programa para cambiar la propiedad Text del Label Respuesta. El usuario escribirá la respuesta en el TextBox NuevaRespuesta y, cuando pulse el botón BotonModificarRespuesta, se modificará en Respuesta. ¿Puedes hacerlo tú solito? Seguro que sí. Hazlo y luego sigue leyendo. Aquí tienes la solución:

Guardar la respuesta en una base de datos Tu app ya funciona, pero hay que mejorarla. Ahora mismo, cuando el usuario se va a poner a conducir, pone en marcha la aplicación pero tu mensaje no le gusta, así que tiene que cambiarlo por el que él quiere. Lo malo es que al volver a poner en marcha la app, no © Pedro Felip Belenguer

 69

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

sale el mensaje que él guardó, sino que vuelve a salir el tuyo. Lo que necesitamos es que la app guarde la frase cuando el usuario la cambie, y que la lea nada más poner en marcha la app. Pero no podemos guardarla en cualquier sitio. Si la guardamos en Respuesta.Text al parar la app se pierde su valor, porque es una MEMORIA TEMPORAL. Necesitamos guardar la frase en una MEMORIA PERMANENTE, un lugar que no pierde las cosas al parar la app y tampoco cuando apagamos el Smartphone. Vamos a utilizar un componente TinyDB. Este componente tiene dos funciones: StoreValue y GetValue. La primera guarda un valor y la segunda lo recupera. Para guardar algo necesitamos utilizar una CLAVE. Veamos cómo tiene que quedar:

Ahora, cuando el usuario pulsa el botón, la app guarda la NuevaRespuesta.Text en la memoria “Respuesta”. En este caso, la clave es “Respuesta”.

Recuperar el valor guardado al iniciar la app Primero mira lo que tienes que hacer y luego vemos la explicación:

¿Lo has entendido? No creo, porque de repente la app se nos ha complicado bastante. Pero no importa, en seguida comprenderás por qué tenemos que hacerlo así. Cuando la app empieza, entra en Screen1.Initialize. Acto seguido, leemos de la base de datos el valor que está guardado con la clave “Respuesta”. Ese valor lo metemos en la variable RespuestaGuardada. Pero, ¿qué ocurriría si no hubiera nada guardado en la base de datos? Precisamente la primera vez que utilizaremos la app eso es lo que ocurrirá.

 70

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Cuando no hay nada guardado en la base de datos con la clave que indicamos, TinyDB1.GetValue la frase “ “, que tiene únicamente un espacio en blanco (valueIfTagNotThere). Eso es lo que meterá en RespuestaGuardada. La función length devuelve la longitud de una frase, calculada como el número de caracteres que tiene, con la peculiaridad de que no cuenta los espacios en blanco que hay al final. Así, length(“hola”) devolvería un 4. Aquí hay una tabla con los resultados de length con distintas frases: Expresión length("hola") length("hola “) length("hola corazones") length(" ")

Valor 4 4 14 0

Pues bien, si length(RespuestaGuardada)>0 entonces tenemos en RespuestaGuardada la respuesta que en su día se guardó, y la metemos en Respuesta.Text, que es el label que contiene la respuesta a enviar. Ya puedes probar si tu app funciona y es capaz de guardar una frase en la base de datos y después leerla, pero lo tendrás que hacer en el móvil porque el emulador elimina todos los datos de la base de datos cada vez que haces “Connect to Device...” en el editor de bloques.

Añadir información de posición GPS a la respuesta Las aplicaciones que hacen uso del GPS pueden salvar vidas. Pensemos en un niño que se pierde, senderistas que están dentro de un bosque y necesitan que vayan a rescatarlos, … Bueno, pues hagamos que nuestra aplicación diga algo así como “estoy conduciendo – ahora mismo estoy en C/ CONSELLERIA VALL D'ALBA”. Así, si alguien espera a que lleguemos a casa y sabe que estamos en camino, con enviarnos un SMS recibe un mensaje de respuesta que le dice dónde estamos exactamente, y así sabe si nos falta mucho para llegar. Vamos a utilizar el componente Sensors/LocationSensor que habíamos puesto al principio y que sirve para recuperar valores del GPS (Global Positioning System). Veremos que es capaz de devolvernos la longitud y la latitud, pero también de consultar en Google Maps la dirección asociada. Deberemos tener en cuenta que es posible que en algún momento no dispongamos de cobertura GPS. Cada vez que cambiamos de posición el evento LocationSensor.LocationChanged se dispara. En el diseño de la aplicación es posible que te dieras cuenta de que había un Label que © Pedro Felip Belenguer

 71

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

se llamaba PosicionActual con Text valiendo “Posición Actual”. Si no es así, añádelo ahora. En el editor de bloques:

Con eso es suficiente para que veamos dónde estamos, aunque no nos estén enviando SMS nadie. Ahora modificamos el mensaje de respuesta para incluir nuestra última posición conocida:

Actividades ¿Se te ocurre cómo mejorar tu app? Como esta app ya es de por sí bastante complicada, no se proponen cambios.

 72

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Bueno, pensándolo mejor, como hoy en día los SMS han ido a menos, y para muchos usuarios no son gratuitos, puedes investigar el componente Twitter. ¿Serías capaz de leer en voz alta los tweets que te envían? ¿Y de enviar uno de respuesta? En tal caso, te recomiendo un par de cosas: 

que utilices “Save As” para guardar una copia de tu app (o también puedes pulsar CheckPoint, que sirve paralo mismo). Así, si tus experimentos con Twitter no dan buen resultado, siempre puedes volver a la versión SMS.



que no elimines los bloques SMS. Simplemente, desactívalos con botón derecho, Disable Block.

 73

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

6. La Mariquita Los juegos son divertidos para el que los utiliza pero también para el que los hace. En esta app una mariquita irá comiendo pulgones y huyendo de una rana que se la querrá comer a ella.

Lo que vas a hacer Vas a hacer todo esto: 

Controlarás la mariquita inclinando el teléfono.



Verás un nivel de energía en la pantalla, que descenderá con el tiempo hasta llegar al nivel 0, que equivale a morirse de hambre



harás que la mariquita persiga y coma pulgones para aumentar la energía y evitar la inanición



ayudarás a la mariquita a evitar a la rana que se la quiere comer

Lo que vas a aprender Vas a aplicar cosas aprendidas en la app “Machacar Topos”, así que es conveniente que repases cómo funcionaba. Tendrás que recordar cómo se define un procedimiento, cómo se generan números aleatorios, los bloques ifelse, ImageSprite, Canvas, Sound y Clock. Además verás cómo: 

manejar varios componentes ImageSprite al mismo tiempo y detectar colisiones entre ellos



detectar inclinaciones del teléfono con el componente OrientationSensor para controlar un ImageSprite



cambiar la imagen de un ImageSprite

 74

Capítulo 2. Aplicaciones básicas del MIT



controlar diferentes eventos con Clock



definir y utilizar procedimientos con parámetros



utilizar el bloque and

Curso de Programación de Android

Empezamos Descárgate las imágenes de la mariquita (ladybug), el pulgón (aphid) y la rana (frog) del sitio web http://examples.oreilly.com/0636920016632/, apartado CH05_LadybugChase. También necesitarás el sonido de la rana (FROG.WAV). Mientras utilices esta app es probable que necesites desactivar la rotación automática de la pantalla. Empieza la app T6_Mariquita. Recuerda poner lo que toca en Screen1.Title. Carga todas las imágenes y el sonido con el botón “Upload new...” que hay debajo de “Components”, donde dice “Media”. Como icono tienes que poner la de la mariquita.

Dar vida a la mariquita Este es un juego en primera persona. Mientras en el juego del topo el jugador se sitúa fuera del teléfono y lo machaca, en este juego te vas a identificar con la mariquita.

 75

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Poner componentes

Vamos a ir añadiendo componentes poco a poco. En las app anteriores habíamos puesto todo de golpe, pero lo normal es poner unas pocas cosas, empezar a desarrollar la app, definir el comportamiento en el editor de bloques, comprobar que las cosas funcionan, corregir errores y, después, añadir más componentes. El primer problema que vamos a resolver consiste en poner la mariquita en la pantalla y controlar sus movimientos. Pon un componente Canvas y llámalo TerrenoDeJuego, con Width a “Fill parent” y Height a 300 píxeles. Pon dentro del terreno de juego un ImageSprite, llámalo Mariquita y ponle la imagen de la mariquita viva. Cambia las propiedades de la mariquita así: 

Interval 10. Utilizaremos esto para que la mariquita se mueva sola, no con un reloj y un procedimiento MoveTo como hicimos en otra app.



Heading 0. Esta propiedad indica la dirección en la que se mueve un ImageSprite,

 76

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

en grados. 0 es derecha, 90 es arriba, 180 izquierda. Cambiaremos este valor desde el editor de bloques. Cuando cambiamos Heading no solamente estamos cambiando la dirección en que se mueve, también hacemos que gire su imagen 

Speed 0.0. Especifica el número de píxeles que se moverá cada 10 milisegundos (o lo que ponga en Interval).

Añade ahora un par de componentes más: 

OrientationSensor. Sirve para detectar la inclinación del teléfono.



Clock. Lo utilizaremos para comprobar la inclinación cada 10 milisegundos y así cambiar la dirección de la mariquita si procede. Pon su TimerInterval a 10 milisegundos.

Definir el comportamiento En el editor de bloques, en lugar de sacar los bloques de los apartados que hay a la izquierda de la pantalla, puedes teclearlos. Prueba y verás. Tienes que definir el procedimiento ActualizaMariquita y Clock1.Timer como en la figura:

La propiedad OrientationSensor1.Angle indica el grado de inclinación del dispositivo. Por otra parte, OrientationSensor1.Magnitude indica la cantidad de inclinación, entre 0 (no inclinado) y 1 (máxima inclinación). Al multiplicar por 100 esa cifra, obtenemos un número entre 0 y 100, y conseguimos que la mariquita se mueva hasta 100 píxeles por cada 10 milisegundos, porque hemos puesto a 10 el Mariquita.TimeInterval en el diseñador. Si la mariquita se mueve demasiado deprisa cambiaremos el 100 por una cifra inferior, y, si va demasiado despacio, aumentaremos ese multiplicador.

Mostrar el nivel de energía Vamos a indicar el nivel de energía con una barra roja en un segundo componente Canvas. Tendrá 1 píxel de alto. El ancho serán tantos píxeles como valga el valor de energía, que irá de 0 (muerta por inanición) a 200 (bien alimentada). Añade un Canvas debajo del terreno de juego y llámalo IndicadorEnergia. Su ancho será “Fill parent” y su altura 1 píxel.

 77

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

La variable Energia Define la variable Energia con un valor inicial de 200.

Visualizar la barra de energía Vamos a definir un procedimiento que dibujará una línea con la longitud y color que queramos. Cada vez que llamaremos a este procedimiento deberemos proporcionarle ambos parámetros (la longitud y el color). Para definir el procedimiento, aquí tienes un poco de ayuda: 

de Built-in/Procedures saca un bloque to procedure do



cambia la palabra procedure1 por DibujarLineaEnergia



pulsa sobre la rueda dentada azul y arrastra el bloque “input: x” para encajarlo dentro de “inputs”:



cambia “x” por “color”



de forma similar añade el argumento “longitud”



vuelve a pulsar sobre la rueda dentada para que desaparezca la herramienta de añadir parámetros

Continúa para que te quede así:

 78

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Ahora define este otro procedimiento:

Lo que hace es dibujar primero una línea blanca que va de lado a lado de la pantalla, en el Canvas IndicadorEnergia. Después dibuja una línea roja que no es tan larga. Dibujar primero la línea blanca sirve para borrar la línea roja que tal vez habíamos dibujado antes. Si más adelante queremos cambiar la forma de visualizar la energía, bastará con modificar el procedimiento VisualizarEnergia, no nos hará falta cambiar nada del resto del programa. (en el emulador puedes cambiar Mariquita.Speed a 20 y Mariquita.Heading a 90 para comprobar)

Inanición Morir de inanición es morir de hambre. A diferencia de las apps que hemos hecho hasta ahora, en este juego hay un final: si la mariquita no come lo suficiente se acabó, y si la rana se la zampa también. En ambos casos, la mariquita deberá detenerse. Esto podemos hacerlo poniendo a Mariquita.Enabled el valor false. También habrá que cambiar la imagen de la mariquita viva por la de la mariquita muerta. Eso se hace dando a Mariquita.Picture el valor adecuado, que es el nombre de la imagen que hemos cargado y que se llama dead_ladybug.png. Define el procedimiento GameOver así:

Ahora tienes que añadir instrucciones al procedimiento ActualizaMariquita haga más cosas de las que ya hacía: 

decrementará el nivel de energía



visualizará el nuevo nivel

 79

Capítulo 2. Aplicaciones básicas del MIT



Curso de Programación de Android

finalizará el juego si el nivel de energía es 0

Así es como debe quedar:

Ala, prueba tu app a ver si la mariquita se mueve, si se ve el nivel de energía y si se muere de hambre. Recuerda que es conveniente desactivar la rotación automática en el dispositivo para jugar a esto. ¿Y si quieres probar en el emulador, qué pasará...? Mira el código de tu aplicación (los bloques) y piensa: 

haz que la velocidad mínima de la mariquita sea 20. Para conseguirlo deberás hacer una modificación temporal en tu código. Coméntala para que no se te olvide desactivarla cuando tu programa esté terminado.



Añade un Label en algún sitio, en el que se vea la velocidad actual de la mariquita. Así podrás comprobar si el valor de velocidad es el que debe ser. Necesitarás también añadir un código temporal en tu app para poderla visualizar.

Añadir un pulgón Nuestra mariquita se muere de hambre. Hay que poner un pulgón en el terreno de juego para que se lo zampe.

El pulgón se moverá por el terreno de juego y, cuando la mariquita se lo coma, aumentará su nivel de energía. Naturalmente, cuando se lo comen desaparece, no sigue por ahí rondando (si fuera una hormiga en lugar de comérselo chuparía su melaza, pero las mariquitas son más golosas y no se andan con tonterías). Un poco después aparecerá otro pulgón. Aunque el jugador se crea que es otro pulgón, para el programador es en realidad el mismo.

Añade un ImageSprite Añade ahora la figura del pulgón, y procura no ponerlo encima de la mariquita ni

 80

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

demasiado cerca. En inglés lo llaman aphid. La traducción real sería áfido y se referiría a un pulgón o algún otro insecto similar. Ponle la imagen que toca, el intervalo a 10 (cada 10 milisegundos se mueve) y la velocidad (Speed) a 2, así no se moverá demasiado deprisa y la mariquita lo podrá cazar. El resto de propiedades las pondremos en el editor de bloques.

El control del pulgón El pulgón va a cambiar de dirección cada 50 milisegundos (5 tics de Clock1). Para conseguirlo podríamos añadir un segundo reloj con un TimeInterval de 50. Sin embargo, es mejor que pruebes una técnica distinta para que aprendas cómo funciona el bloque random fraction, que devuelve un número aleatorio entre 0 y uno 1 cada vez que se le llama. Prepara el siguiente procedimiento ActualizaPulgon y añádelo a Clock1.Timer:

La explicación es esta: 

cada tic del reloj Clock1 se ejecutan los procedimientos ActualizaMariquita y ActualizaPulgón. Esto ocurrirá 100 veces por segundo, porque Clock1.Interval lo pusimos a 10 milisegundos



en ActualizaPulgón se genera un número fraccionario entre 0 y 1



si ese número es menor que 0'2, cosa que ocurre el 20% de las veces, el pulgón cambiará de dirección



la nueva dirección se calcula generando un número entero al azar entre 0 y 360 porque queremos que pueda moverse en cualquier dirección



el 80% de las veces el pulgón no cambiará de dirección y seguirá avanzando

Hacer que la mariquita se coma al pulgón Piensa en cuántas cosas deberían ocurrir cuando los dos ImageSprite entren en colisión. © Pedro Felip Belenguer

 81

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

¿Ya lo tienes? ¿No? Pues sigue pensando. ¿Ya lo tienes? ¿Sí? Pues sigue leyendo. Pondremos todas esas cosas dentro de un mismo procedimiento, que se llamará ComerPulgon: 

aumentar el nivel de energía en 50



hacer que el pulgón desaparezca (Pulgon.Visible)



que pare de moverse el pulgón (Pulgon.Enabled)



que el pulgón se traslade a una posición aleatoria (como lo hacía el topo)

Hazlo todo sin ayuda y no mires la figura siguiente. Mira si funciona. Si no es así, intenta resolver tú mismo los problemas. Finalmente, compara tu código con este para ver qué cosas has hecho igual y qué cosas has hecho diferentes. Tal vez debas corregir algo:

¿No puedes leerlo bien? No sabes cuánto lo siento.

Mejoras que puedes hacer ahora: 

añadir algún sonido



otras cosas que se te ocurran y que sean sencillas

Detectar la colisión mariquita-pulgón

 82

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Aquí tienes el código, y luego la explicación:

Si tienes problemas para escribir el “call ComerPulgón” mira dentro de Builtin/Procedures. Cuando la mariquita choca con otro ImageSprite sabemos que sólo puede haber ocurrido con el pulgón, pero más adelante tendremos también una rana, así que tenemos que tenerlo en cuenta para que luego las cosas funcionen como toca, o la mariquita estará comiendo ranas. El evento Mariquita.CollidedWidth pone en “other” el componente con el que ha colisionado, que podría ser un ImageSprite o un Ball. Pues bien, tenemos que comprobar que hemos “chocado” con el pulgón antes de llamar al procedimiento ComerPulgón. Además, comprobamos que el pulgón es visible en ese momento porque de lo contrario cuando nos comiéramos un pulgón y antes de que cambiara de lugar de la pantalla seguiríamos sumando puntos. Se llama PROGRAMACIÓN DEFENSIVA a la práctica consistente en hacer el programa de tal modo que sea probable que continúe funcionando cuando se modifiquen cosas en el futuro. En este caso, nos aseguramos con el “if” de que el procedimiento Mariquita.CollidedWidth está hecho a prueba de bombas (o de ranas).

El regreso del pulgón Para que vuelva a aparecer el pulgón tendrás que modificar el procedimiento ActualizaPulgón, de modo que cambie de dirección sólo si es visible (cambiar la dirección cuando no es visible es una pérdida de tiempo). Entra en Built-in/Control y saca un bloque “if then”. No nos sirve el bloque “if then else” que hay ahí dentro porque, por su forma, no podremos encajarlo donde nos interesa. Pulsa sobre la rueda dentada azul:

 83

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Arrastra el “else” dentro del “if”: Pulsa otra vez sobre la rueda dentada para que desaparezca la herramienta de modificación, y a ver si eres capaz de conseguir que que te quede así el procedimiento ActualizaPulgón:

Si el pulgón no es visible es porque se lo han comido, y hay 1 posibilidad entre 20 (5%) de que vuelva a ser habilitado (Enabled) para que se lo puedan volver a comer. ¿Verdad que esto se va complicando? Vamos a explicar un poco más lo que está ocurriendo. Cuando el pulgón es visible actuamos como hasta ahora, cambiando su dirección o no según una probabilidad del 20%. Cuando el pulgón no es visible, sabemos que es porque se lo han comido hace un momentito. Entonces es cuando se ejecuta la parte “else”. Entonces se genera un número entre 0 y 1 y si vale menos de 0,05, lo cual ocurre el 5% de las veces, el pulgón se vuelve a hacer visible y a estar habilitado para que se siga moviendo. Como ActualizaPulgón se llama desde Clock1.Timer, que hace tic cada 10 milisegundos, y hay un 5% de posibilidades de que se vuelva a hacer visible, el pulgón tardará como media 200 milisegundos en volver a aparecer (1/5).

Añadir un botón de reinicio Añade un botón. Llámalo BotónReiniciar y ponle el texto Reiniciar. El código asociado a este botón es el siguiente:

 84

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Así, cuando el juego termina, se pulsa el botón y todo vuelve como al principio, incluso se devuelve a la mariquita la imagen de una mariquita viva (ladybug.png). Lo ideal sería que ese botón no se pudiera ver hasta el momento de ejecutar GameOver.

Añadir la rana El juego resulta demasiado sencillo ahora mismo, así que necesitamos un depredador. Vamos a añadir una rana que se va a mover directamente hacia la mariquita. Si la alcanza, se la come y termina el juego.

Hagamos que la rana persiga a la mariquita Añade la rana al terreno de juego con un Interval de 10 y una velocidad de 1, porque tiene que ser más lenta moviéndose que las otras criaturas. Piensa un momento cómo tendría que ser el programa para que la rana se moviera en dirección a la mariquita. Ahora añade el siguiente código (y a ver si coincide con lo que tenías en mente):

Complicado, pero como aquí tienes la solución no hay problema. Ni siquiera hay que saber qué es una arcotangente. Con ese código, el 10% de las veces la dirección de la rana cambia directamente hacia la mariquita. La resta de las coordenadas Y parece invertida, pero eso se debe a que en Android las Y crecen hacia abajo, mientras en matemáticas las Y crecen hacia arriba. Ahora hay que añadir este último procedimiento a “when Clock1.timer do”:

 85

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Que la rana se coma a la mariquita Tenemos que modificar el código de la colisión para que si la mariquita y la rana chocan termine el juego. Piensa antes de ver la solución e intenta hacerlo, que así es como se aprende. Recuerda que tenemos el procedimiento GameOver. Aquí está la solución:

El retorno de la rana BotonReiniciar.Click ya es capaz de cambiar una mariquita muerta por una viva, pero nos falta hacer que aparezca en otro lugar. ¿Dudas de si es necesario cambiarla de lugar o no? ¿Te has parado a pensar qué pasaría si no cambiáramos de

sitio la mariquita al pulsar BotónReiniciar? Aquí tienes el código final de BotonReiniciar:

¿Algún problema? Pues sí, resulta que la mariquita puede aparecer justo encima del pulgón o de la rana. Mejor aún, pueden aparecer todos unos encima de otros. Comprueba el funcionamiento de tu app. © Pedro Felip Belenguer

 86

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Añadir Sonido (y vibración) Cuando la mariquita se coma a un pulgón, el teléfono deberá vibrar durante 100 milisegundos. Cuando la rana se coma a la mariquita, se deberá oír el sonido que teníamos preparado (FROG.WAV) justo antes de llamar a GameOver.

Actividades Aquí tienes formas de mejorar o personalizar el juego (elige alguna, pero no todas): 

mejorar la presentación: 

pon una imagen de fondo en el terreno de juego que sea el césped de un jardín. Procura que no tenga más de 100 píxeles de alto.



Edita las imágenes de la mariquita, el pulgón y la araña para sustituir el recuadro blanco que las rodea por transparente. Esto se puede hacer con GIMP: herramienta de selección por color, hacemos clic en la zona blanca, pulsamos Supr y exportamos la imagen resultante sobre el archivo original. Acto seguido, volvemos a subirlo a App Inventor. El icono también nos quedará mejor una vez retirado el rectángulo blanco



Bloquea la orientación de la pantalla porque jugar mientras se está girando la pantalla es una pesadilla. Tendrás que revisar las propiedades del componente Screen en el diseñador



adapta la aplicación a diferentes tamaños de pantalla. Para empezar, pon la altura del terreno de juego al 80%. A lo mejor tienes que cambiar los tamaños fijos que hayas puesto en píxeles a “Fill parent” o “percent”. También puedes jugar con la propiedad Sizing del componente Screen, que puede valer Fixed o Responsive.



evita que una vez terminado el juego el pulgón y la rana se sigan moviendo (pista: utiliza la propiedad Enabled)



pon un marcador que indique cuánto tiempo lleva viva la mariquita (pista: actualiza el marcador desde Clock1.Timer)



haz que la barra de energía se vea más (pista 1: puedes hacer la barra más alta y dibujar dos líneas en lugar de una) (pista 2: puedes “pasar” de dibujar líneas y hacer un Canvas de color verde, amarillo o rojo según el nivel de energía y controlar por programa su Width)



ambienta mejor el juego con un terreno más atractivo y con más sonidos; avisa de alguna manera cuando queda menos del 10% de energía



aumenta la dificultad con el tiempo aumentando el Interval de la rana o aumentando su Speed

 87

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android



haz que la mariquita deje de ser visible cuando se la coma la rana, pero no cuando se muera de hambre



puedes cambiar las figuras del pulgón, la mariquita y la rana por otras que te gusten más



al terminar el juego con Game Over haz que salga un letrero Game Over y que se oiga algún sonido o música

Reflexiona (pero no intentes hacerlo): 

¿se complicaría mucho la app si añadiéramos una serpiente que come ranas pero no mariquitas ni pulgones?



¿y si hubiera dos pulgones en lugar de uno?

Más mariquita Se puede hacer rápidamente cualquiera de las siguientes cosas: 

poner un “botón abajo” que, al pulsarlo, haga que la mariquita se mueva hacia abajo (es útil para el emulador) (tendrás que desactivar el control de dirección actual para que esto funcione)



lo mismo para otras direcciones (8 direcciones)



visualizar la velocidad actual en algún rincón de la pantalla



botón de suicidio. Al pulsarlo termina el juego, igual que si la rana se hubiera comido a la mariquita



botón croar. Al pulsarlo, la rana emite su característico sonido



botón acelerar. Al pulsarlo, la velocidad aumenta en 10 unidades (es útil para el emulador)



botón parar. Al pulsarlo, la mariquita se detiene (es útil para el emulador). Se puede añadir este en medio de los botones de las 8 direcciones



botón RESERVA. Es como la reserva de la gasolina. Al pulsarlo suma 50 unidades de energía a la mariquita, pero sólo se puede usar una vez

 88

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

7. Trabajo Libre Si no quieres hacer un examen, deberás hacer un trabajo libre. Aquí tienes unas ideas sobre cosas que podrías hacer, o sobre cómo podría ser un examen. ¡¡Ánimo, que tú puedes!!

¿Serias capaz de hacer una app en la que...? 

se inclinara el móvil para meter una bola en un agujero. Podría haber una serie de agujeros en el terreno que deberías sortear por ser malos, otros buenos, y uno final muy bueno ← PODRÍAS LLAMARLO “CAMPO DE MINAS”



se inclinara el móvil para mover un balón esquivando jugadores hasta llegar al portero, que se movería y podría pararlo ← PODRÍAS LLAMARLO “FUTBOLDROID”



inclinaras el móvil y, al pulsar un botón, empezara a moverse una bola para ver si da en el blanco ← PODRÍAS LLAMARLO “TIRO AL BLANCO”

8. Mapa turístico de París (o de donde tú quieras) Vamos a hacer esto rápido para llegar pronto a la siguiente actividad. Para que no se nos olvide, en Screen1.Title ponemos “Mapa turístico” y en Screen1.Icon ponemos una imagen de baja resolución representativa de esta App. Luego, ponemos los siguientes componentes en el diseñador: 

Image, con una imagen de París



Label, con un texto (“descubre París con Android”)



ListPicker1 (“elige tu destino”)



ActivityStarter1

Utilizamos la Image para poner una imagen que no hace nada, no necesitamos un botón. La “Image” es un elemento más sencillo, sin tantas opciones. La etiqueta Label, como el lector recordará, es más simple que el TextBox, y es mejor cuando no necesitamos que el usuario teclee nada. © Pedro Felip Belenguer

 89

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

El ListPicker veremos en seguida que sirve para mostrar una lista de opciones para escoger una. El ActivityStarter es un componente un tanto extraño que sirve para lanzar otra app. Cuando cerraremos esa otra app nuestro Smartphone o Tableta regresará a nuestra app. Decimos que es un componente extraño por las enigmáticas instrucciones que requiere para funcionar. En ActivityStarter1 debes poner exactamente lo que sigue a continuación, fijándote muy bien en los puntos, las minúsculas y las mayúsculas, o no te funcionará: 

Action: android.intent.action.VIEW



ActivityClass: com.google.android.maps.MapsActivity



ActivityPackage: com.google.android.apps.maps

Añadir comportamiento Crear lista de destinos Vamos a guardar nuestros destinos turísticos en una relación. Con lo que habíamos aprendido hasta ahora, necesitaríamos escribir un botón por cada destino, pero en esta app utilizaremos el ListPicker, que nos permitirá ampliar o modificar nuestra lista sin mucho esfuerzo. Entra en el editor de bloques y añade estas instrucciones:

Acabas de definir la variable “destinos” y le has dado como valor una lista de textos. Bueno... en lugar de esos, escribe estos otros (ya cambiarás más adelante): 

“Torre Eiffel”



“museo del louvre”



“notre dame”

Más adelante podrás cambiarlos, pero ahora necesitamos poner unos que Google Maps pueda encontrar con facilidad.

Que el usuario pueda elegir destino La “RelaciónDestinos”, que es un elemento ListPicker, tenemos que llenarlo para mostrarlo al usuario, pero debemos hacerlo nada más empezar la app, lo que implica utilizar el bloque Screen1.Initialize:

 90

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Estamos haciendo que la relación de destinos que tenemos en la variable global “destinos” aparezca al usuario en la lista para elegir destino. Ahora hay que probar la app en el emulador. Tenemos que pulsar sobre el “botón” (list picker) y veremos la relación de destinos que hemos escrito.

Abrir mapas con una búsqueda Ahora vamos a hacer que al pulsar un destino el ActivityStarter1 abra Google Maps, y que nos muestre el mapa resultado de la búsqueda. Prueba de nuevo la app y elige un destino. Veremos que se abre Google Maps con la búsqueda de nuestra elección. El caso “Torre Eiffel” nos encuentra “Eiffel Tower” con el mapa. Además, con el botón de retorno del teléfono salimos de Google Maps para regresar a nuestra app y así poder elegir un destino diferente.

Ahora prueba una cosita para que aprendas un poquito sobre geolocalización: introduce como destino “39.99406,-0.06745562”. Se trata de unas coordenadas. Verás que Google Maps te lleva a una dirección eso es así porque el enlace https://maps.google.com/? q=39.99406,-0.06745562 es una búsqueda de Maps que consiste en ir a esa latitud y longitud.

Organizar un tour virtual ATENCIÓN. El apartado siguiente, tal como está, sólo funciona en la versión 1 de App Inventor debido a que Google Maps no funciona igual que antes. Por ese motivo, se va a redactar de nuevo pero ya adaptado a la versión 2.

Buscar DataUri para lugares específicos (versión 1 de App Inventor) En Google Maps buscamos la “Torre Eiffel”. Después, pulsamos el botón de enlace (eslabones). Lo que sale podemos copiarlo y pegarlo como dirección del navegador, y se nos abrirá la misma dirección con el mismo tipo de vista (mapa/satélite) y el mismo nivel de zoom.

 91

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

La referencia que hemos copiado y pegado es muy larga, y tendrá un aspecto similar a este: https://maps.google.es/maps? q=Torre+Eiffel&hl=es&ll=48.857727,2.29434&spn=0.004002,0.010568&sll=39.316265,0.418859&sspn=4.81849,10.821533&oq=torre+eif&t=h&hnear=Torre+Eiffel&z=17. Pulsando sobre “URL corta” el enlace se reducirá muchísimo y servirá igual:

Siguiendo con el ejemplo, si pegamos en el navegador el enlace http://goo.gl/maps/i8z8z veremos que se nos abre el mismo mapa que con la URL anterior. Otra forma de indicar a Google Maps una dirección es esta: geo:48.857942,2.294748?t=h&z=19 En este caso estamos utilizando unas coordenadas GPS, el tipo de vista “h” (hybrid map) y el nivel de zoom “z” (19). Observa ahora cómo vas a definir la variable dataURIs (no la rellenes todavía): En el primer ítem debes poner lo de la figura anterior, que son las coordenadas GPS de la Torre Eiffel junto con la vista mapa híbrido y un zoom suficiente.

El segundo ítem debes construirlo tú utilizando Google Maps para localizar tu segundo destino turístico. Con el eslabón de Google Maps consigue la URL corta y pégala aquí. El tercer ítem lo debes preparar de la misma forma que el segundo.

 92

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Modificar el comportamiento del ListPicker.AfterPicking (Versión 1 de App Inventor) Antes hemos preparado la app de modo que la DataUri se formara con la concatenación del texto “http://maps.google.com/?q=” y el destino que el usuario había seleccionado de la lista (por ejemplo, Torre Eiffel). Ahora vamos a hacer una segunda versión en la que nuestro Afterpicking va a ser más sofisticado de modo que el usuario elegirá de una lista y la DataUri se introducirá desde otra lista. Tendremos que averiguar cuál es el índice, o número de elemento, que el usuario ha escogido (el 1, el 2, el 3) y elegir el que le corresponde en la lista de URIs (es decir, de posiciones en el mapa mundial). Ahora vamos a definir la variable Indice, le vamos a dar un valor inicial cualquiera (99) y vamos a modificar el ListPicker1.AfterPicking:

Estamos haciendo lo siguiente: 

el usuario escoge un destino y se activa el ListPicker1.AfterPicking



en ListPicker1.Selection se ha almacenado automáticamente la selección del usuario. Por ejemplo, “Torre Eiffel”.



Con la función “position in list” buscamos la selección en la lista de destinos. Por ejemplo, “Torre Eiffel” es encontrado en la posición 1 de la lista.



En Indice se almacena el resultado de esa búsqueda. En el ejemplo es el número 1 porque es el primer elemento de la lista.



Con select list item se busca dentro de la lista dataURIs el elemento que dice “index”. Como Indice vale 1 en nuestro ejemplo, select list item devuelve la dirección 1 de las almacenadas en la variable dataURIs, que será “geo:48.857942,2.294748?t=h&z=19” porque hemos definido dataURIs así:

 93

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android



esa dirección es la que se introduce en ActivityStarter1.DataUri



por último, se llama a ActivityStarter1.StartActivity, que hará que se lance Google Maps posicionándose en esa dirección.

Prueba por última vez tu app y comprueba que funciona. Prueba todos los destinos que hayas puesto.

Tour Virtual con Web Viewer (versión 2 de App Inventor) – sin terminar Con ActivityStarter se pone en marcha otra App y el usuario volverá a la nuestra pulsando el botón de regresar. Pero con Web Viewer podemos visualizar una página web, incluso de Maps, sin abandonar nuestra aplicación. Vamos a mejorar nuestra App de modo que podamos utilizar la posición exacta de lo que queremos mostrar a nuestro usuario. Imagínate que quieres hacer Geocaching (búsca del tesoro). Google Maps no sabe dónde has escondido cada tesoro, pero sí que podrías averiguar las coordenadas y guardarlas en tu App. Por eso no nos vale con decir a nuestra App que diga a Maps que busque “Torre Eiffel” porque queremos llevarlo a un sitio sin nombre. Puedes guardar ahora tu proyecto añadiendo al nombre “v2” para conservar tu App “versión 1”. Quita el ActivityStarter1 de tu App y pon el nuevo WebViewer debajo de los demás componentes. En Screen1, comprueba que la propiedad Scrollable está desmarcada. Ahora más deprisa: 

en el editor de bloques, prepara una variable global y llámala “destinosURL”.



Busca tu primer destino en Google Maps. Elige si quieres la vista satélite o la vista de mapa. Haz el zoom como quieras que lo vaya a ver el usuario de tu App. Una vez tengas todo eso ajustado, busca la opción “Compartir Enlace” (esta opción ha cambiado de aspecto muchas veces, parece que a los de Google les gusta mucho cambiarla cada 2 por 3). Pulsa sobre la opción “URL corta” si está disponible. Aquí tienes un ejemplo de referencia larga y referencia corta:

 94

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

https://www.google.es/maps/@39.9880797,-0.025978,18z https://goo.gl/maps/eKNZY En la primera vemos las coordenadas, que podríamos cambiar a nuestro gusto, pero ahora nos interesa más la segunda, por ser más corta. 

Copia la URL corta y pégala así en el editor de bloques:



cuando ya tengas introducidas todas las que quieras, añade el siguiente bloque, que sirve para mostrar en el mapa de tu App el destino elegido por el usuario:

Aquí puedes ver el código completo de la App:

 95

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Actividades Puedes cambiar la imagen y los destinos de tu actividad para que te guste más. Tienes total libertad para escoger los que quieras. No vamos a entretenernos mucho con esta actividad porque nos interesa terminar la siguiente pronto. Así, con lo que aprenderemos en estas dos, podremos hacer cosas increíbles.

9. ¿Donde está mi coche? Cuando vamos a una población distinta de la nuestra, para asistir a un partido de fútbol, un concierto o para ir de marcha, pasan las horas y llega la hora de volver a casa, con frecuencia perdemos mucho tiempo buscando el coche porque no sabemos dónde lo hemos dejado. Pero si tenemos un Smartphone con Android y esta app no vamos a tener ningún problema para encontrarlo. Lo único que tenemos que hacer es pulsar un botón cuando aparcamos el coche, y nuestro Android utilizará el sensor de posición para guardarse las coordenadas GPS y la dirección. Después, volveremos a abrir la app y ésta nos indicará cómo llegar desde donde estemos hasta donde está el coche.

Lo que vamos a utilizar Vamos a utilizar cosas que ya conocemos: 

LocationSensor para saber dónde estamos



TinyDB para almacenar datos (nuestra posición actual)

 96

Capítulo 2. Aplicaciones básicas del MIT



Curso de Programación de Android

ActivityStarter para abrir Google Maps desde nuestra app con instrucciones para llegar a nuestro destino

Empezamos Prepara un nuevo proyecto y llámalo T9_Donde_Esta_Mi_Coche. Pon el Title “¿Dónde está mi coche?”. Puedes descargarte la imagen de un coche y utilizarla como icono de la aplicación. Fíjate ahora en la pantalla:

Tienes que poner los siguientes componentes con los textos que se indican: 

Label1

“Posición Actual:”



Label2:

“Dirección:”



DireccionActual:

“desconocida”



Label4:

“GPS:”



GPSLatActual:

“0”



GPSLongActual:

“0”



BotonGuardar

“Guardar Dirección Actual”

 97

Capítulo 2. Aplicaciones básicas del MIT



Label5:

“Dirección Guardada”



Label6:

“Dirección:”



DireccionGuardada:”desconocida”



Label8:



GPSLatGuardada: “0”



GPSLongGuardada:”0”



BotonMostrar:

Curso de Programación de Android

“GPS:”

“Mostrar ruta desde la posición actual a la guardada”

Además, habrás añadido los siguientes componentes no visibles: 

LocationSensor1



TinyDB1



ActivityStarter1

En ActivityStarter1 debes poner exactamente lo que sigue a continuación, fijándote muy bien en los puntos, las minúsculas y las mayúsculas, o no te funcionará: 

Action: android.intent.action.VIEW



ActivityClass: com.google.android.maps.MapsActivity



ActivityPackage: com.google.android.apps.maps

Con ActivityStarter podemos abrir cualquier app de nuestro Android. Con los parámetros anteriores se abre Google Maps. Para saber cómo abrir otras apps consulta http://beta.appinventor.mit.edu/learn/reference/components/other.html#ActivityStarter. A esa ayuda se puede acceder desde el diseñador, pulsando el pequeño interrogante que sale a la derecha de ActivityStarter en el apartado Other Stuff. Después, hay que pulsar sobre “More information”.

Definir el comportamiento de los componentes Visualizar la posición actual Escribe esto y comprueba que funciona:

 98

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Recuerda activar el GPS (sensor de ubicación) para tener un posicionamiento más preciso.

Guardar la posición actual Añade esto y comprueba que también funciona:

Comprueba que funciona. Seguramente no te servirá el emulador porque no tiene sensor de posición... aunque quién sabe, una versión moderna del emulador podría deducir la ubicación a partir de los datos de conexión a Internet. Con el teléfono puedes probar con el GPS desactivado y con el GPS activado.

Indicar cómo llegar desde donde estamos hasta la dirección guardada Escribe esto y lee luego la explicación:

Te encontrarás con un problema de “localización”. Verás, AppInventor obtiene la longitud, la latitud y la altitud. Cada uno de esos valores es un número con decimales, pero la parte entera y la fraccionaria se separa con una coma en la mayoría de países (España, Francia, Alemania, Italia, …) pero con un punto en los anglosajones (Gran Bretaña, Estados Unidos, …). Tu app obtiene los valores y se los pasa a maps.google.com, pero maps.google.com espera números con punto decimal, no coma.

 99

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Una no-solución consistiría en configurar el Android como si estuviera en otro país, por ejemplo Estados Unidos. Así, nuestra app funcionaría. Pero claro, … ¿a quién vas a convencer de que modifique la configuración de su Android para que pueda utilizar tu app? ¡Menuda chapuza! La solución consiste en hacer la siguiente modificación:

Lo que estamos haciendo es enviar a maps.google.com las direcciones después de cambiar en cada una de ellas la coma por el punto.

 100

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Guardar la posición en la base de datos Vamos a guardar ya los datos para poder recuperarlos después:

Recuperar la posición guardada cuando la app se pone en marcha Hemos guardado cosas en la base de datos para que al cerrar la app no se pierdan. Lo que nos interesa en esta app es leerlos para mostrarlos en la zona de la pantalla habilitada para ello. Como ya sabes, todo lo que queramos que ocurra nada más empezar la app lo tendremos que poner dentro de Screen1.Initialize. Para recuperar datos utilizaremos TinyDB1.GetValue. Como recordarás, debes comprobar que se ha recuperado algún dato antes de utilizarlo, pues la primera vez que

 101

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

utilizará alguien la app no habrá nada guardado en la base de datos. Cuando esto ocurra, Actividades no mostraremos nada por pantalla; simplemente, dejaremos lo que ya está (que es lo que pusimos ente el ocurre diseñador). ¿Qué se para mejorar esta app? Haz una lista sin preocuparte mucho de qué cosas son realmente realizables y cuales pueden ser demasiado complicadas. Después, examina una a una tus propuestas pensando cuales costarían poco de hacer y pueden ser interesantes, y descarta el resto. Puede que te interese echar un vistazo al apartado “Cálculo de la distancia entre dos puntos (mochila)”, en la página 186.

 102

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Haz alguna de las que te han quedado.

10. ¿Dónde estáis? La app anterior era útil e interesante. Ahora vamos a hacer otra que también trabajará con nuestra posición actual y con una base de datos, pero va a ser un poquito especial porque va a permitir que otros sepan dónde estamos. Por supuesto, también permitirá que nosotros sepamos dónde están otras personas.

Diseñar la aplicación Debes diseñar una pantalla que muestre tu ubicación actual. Tiene que incluir un botón que, al pulsarlo, abra Google Maps y lo sitúe en esa posición en la que estás.

Compartir tu ubicación actual compartiendo una base de datos Podrías añadir a tu app un botón que enviara tu posición actual vía SMS a otro Android para que pudiera ver dónde estás, pero eso tiene algunos problemas: 

puede que los SMS no sean gratuitos

 103

Capítulo 2. Aplicaciones básicas del MIT



Curso de Programación de Android

el equipo receptor tendría que tener una app en marcha capaz de recibir el SMS y extraer de él las coordenadas GPS que se le envían para abrir a su vez Google Maps y mostrar la situación, pero si recibiera SMS de otras personas al mismo tiempo...

En realidad no son problemas importantes. De todos modos, ya es hora de que trabajemos con bases de datos externas. Verás, la TinyDB está muy bien pero almacena datos en TU Android. Ahora vamos a guardar datos en Internet. De este modo, podremos tener registrados a varios amigos y saber dónde está cada uno de ellos. Añade un componente TinyWebDB1.

El funcionamiento de una base de datos TinyWebDB Mira las propiedades de TinyWebDB1. Verás que sólo tiene una, y es una dirección de internet: http://appinvtinywebdb.appspot.com. Entra en esa dirección con tu navegador de Internet preferido:

 104

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

En la parte de abajo tenemos dos enlaces. Storeavalue sirve para almacenar valores y getvalue para recuperarlos. Vamos a ver cómo funciona. Pulsa primero donde pone “/storeavalue”: El funcionamiento es similar al procedimiento Storevalue TinyDB. En “Tag” introducimos una clave y en “Value” introducimos un valor. Acto seguido, pulsamos sobre “Store a value” y se nos informa de que se va a almacenar ese valor en esa clave:

 105

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Pulsamos ahora sobre “Return to TinyWebDB Main Page y ahora pusamos sobre /getvalue:

En “Tag” introducimos la misma clave de antes, pulsamos sobre “Get value” y obtendremos el valor que antes habíamos almacenado:

Desde la app vamos a conseguir lo mismo: guardaremos en esa base de datos de la web y recuperaremos los datos desde ella.

Como se trata de una base de datos compartida con todo el mundo, cualquiera puede guardar cualquier contenido en la misma clave que nosotros. Incluso nuestros compañeros de clase. Como se trata de un entorno de pruebas, es probable que lo que guardamos hoy no esté ya mañana, pero si necesitamos sólo guardar y recuperar cosas en un pequeño espacio de tiempo será suficiente. Más adelante veremos cómo se prepararía un entorno más seguro donde almacenar nuestra información.

 106

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Preparar el diseño de la app Ahora prepara la interfaz de tu aplicación:

Código de la app En el editor de bloques, abre el cajón de TinyWebDB1. Verás que, mientras TinyDB tenía sólo los procedimientos GetValue y StoreValue, TinyWebDB1 tiene when TinyWebDB1.GotValue, TinyWebDB1.StoreValue y when TinyWebDB1.ServiceError. Copia el código siguiente:

 107

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

El procedimiento TinyWebDB1.StoreValue almacena los datos en http://appinvtinywebdb.appspot.com como si entráramos en esa web y utilizáramos el enlace /storeavalue como hemos visto antes. TinyWebDB1.GetValue pide vía internet el contenido almacenado con la clave “tag” que, en nuestro caso, es Clave.Text. Pero no devuelve ningún valor. When TinyWebDB1.GotValue se activa cuando se recibe el valor de internet que habíamos pedido con Tiny.GetValue. Si no se recupera ningún valor, se activará when TinyWebDB1.WebServiceError para mostrar la descripción del problema que pueda haber surgido. Prueba tu app. Puedes hacerlo con tu teléfono o con el emulador. Los valores que guardes con tu app consúltalos desde internet (http://appinvtinywebdb.appspot.com). Los que guardes desde internet, compruébalos desde tu app. Naturalmente, también puedes pedir a compañeros tuyos que te den sus claves para consultar los contenidos que han grabado. Ya tenemos un modo de compartir datos de una forma rápida entre apps.

Cambia la URL de la base de datos Primero que nada, cambia la propiedad de tu TinyWebDB1 para que lea y grabe los datos en http://situaciongps.appspot.com/, que es un sitio web que ha preparado un tal Pedro Felip para no tener que utilizar la web http://appinvtinywebdb.appspot.com a la que accede gente de todo el mundo a todas horas. En http://situaciongps.appspot.com/ no se borran los datos cada varias horas como en la otra.

 108

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Además, el aspecto de la web también es diferente:

Como puede apreciarse en la imagen anterior, disponemos de más información que en la base de datos por defecto (http://appinvtinywebdb.appspot.com) porque sabemos en qué momento se ha guardado un valor (fecha, hora y fracción de segundo), y disponemos de un botón Detete para borrar. En esa misma imagen podemos ver valores almacenados. En teoría, cada uno de ellos lo ha guardado una persona distinta con su teléfono, pulsando sobre el botón Guardar en esta app que estamos haciendo. Si miramos con atención, nos daremos cuenta de que “Miguel” ha guardado primero la longitud y después la latitud. Eso lo sabemos comparando con los demás valores. También podemos ver que su teléfono guarda la posición con más precisión que los demás. © Pedro Felip Belenguer

 109

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Además, se da la circunstancia de que “Pedro” cuando guarda la posición con su móvil no sólo lo hace con la clave “Pedro” sino también con las claves “Román”, “Juan Manuel” y “Raquel”. Lo hace porque así esos otros 3 que no tienen móvil Android pueden probar en su emulador la app. No podrán guardar su posición GPS pero sí que podrán probar otras cosas con el emulador. Para saber cómo se preparara un sitio web como http://situaciongps.appspot.com/ hay que leer el apartado “Anexo I. Cómo Dar de alta un sitio web para TinyWebDB“ en este mismo documento.

Guarda tu posición GPS Modifica tu app para que guarde tu posición GPS en Internet. Tendrás que pensar qué clave quieres tener. Debería ser tu nombre, tu apodo, tu dirección de correo electrónico o alguna cosa por el estilo. Al pulsar el botón de guardar, deberá guardarse tu posición en Internet en la clave elegida. Recuerda cómo guardaste esta información en la actividad “9. ¿Donde está mi coche?” porque tienes que hacerlo igual. Del mismo modo que se hizo allí, tienes que hacer que el botón Guardar no esté habilitado al poner en marcha la app y que se habilite en el momento en que se detecte la posición GPS, o de lo contrario corres el riesgo de guardar una posición GPS no válida en la base de datos.

Recupera tu posición GPS y muéstrala en pantalla Tienes que cambiar el comportamiento del botón Recuperar. Ahora tendrá que leer de la base de datos TinyWebDB1 la lista que guardaste con el botón Guardar... Es probable que te encuentres con problemas porque todavía no has trabajado mucho con listas ni tampoco con bases de datos, así que probablemente te tocará modificar algo del botón Guardar que parecía que habías terminado ya.

Saca un mapa con tu posición Al darle al botón de Guardar, que se abra Google Maps con tu posición 1. Comprueba que funciona. Una vez lo tengas hecho, desactiva la parte de código que abre Google Maps (pero no lo borres). Añade un comentario para que se sepa qué hace ese código comentado.

Pon un botón para localizar a un compañero de clase Añade un botón y llámalo “Miguel”, o como quiera que se llame tu compañero. Si lo 1 ¿No sabes cómo sacar un mapa con tu posición actual? Yo tampoco. Pero sí que sabes visualizar una ruta desde un sitio a otro, así que puedes abrir Google Maps que saque una ruta desde donde estás hasta donde estás. Con eso valdrá. © Pedro Felip Belenguer

 110

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

convences de que guarde su posición GPS en la base de datos con la clave “Miguel”, mejor que mejor. Tienes que trabajar en tu editor de bloques para que al pulsar sobre el botón “Miguel” tu app lea la dirección GPS de Miguel. Una vez leída, se tendrá que abrir Google Maps con la ruta que va desde tu posición actual hasta la suya. Fíjate en que he dicho actual, no guardada.

Añade más botones para más compañeros Añade un par de botones más. Comprueba que todo funciona.

Seguimiento (ahora entregamos al profesor una captura de pantalla del diseñador y dos del editor de bloques, no una sola porque es mucho lo que hay que capturar)

Hacemos repaso, aclaramos ideas y utilizamos un procedimiento con parámetros Vamos a repasar lo que tiene que hacer esta app. Teniéndolo en cuenta, haremos los cambios necesarios en la interfaz (diseñador) y en el código, procurando eliminar todo el código que no nos sirva y poniendo nombres adecuados a todos los componentes, variables y procedimientos: 1. antes de empezar la aplicación mostrar el mensaje “Buscando señal GPS” no permitir GUARDAR nuestra posición 2. al empezar la app (Screen1.Initialize): no es necesario hacer nada 3. al detectar la posición GPS: mostrarla en pantalla habilitar el botón GUARDAR-POSICION-ACTUAL 4. al pulsar botón GUARDAR-POSICION-ACTUAL guardaremos nuestra posición actual en http://situaciongps.appspot.com/ 5. al pulsar botón VER-POSICIÓN-ACTUAL mostraremos un mapa en el que saldrá nuestra posición actual (no la guardada) 6. al pulsar botón MI-POSICIÓN-GUARDADA leeremos nuestra posición de http://situaciongps.appspot.com/

 111

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

si no está guardada nuestra dirección, mostraremos un mensaje de error si sí que está guardada, mostraremos un mapa con una ruta desde donde estamos actualmente hasta la posición guardada 7. al pulsar botón MIGUEL leeremos la posición de MIGUEL en http://situaciongps.appspot.com/ si no está guardada la dirección de MIGUEL, mostraremos un mensaje de error si sí que está guardada, mostraremos un mapa con una ruta desde donde estamos actualmente hasta la posición de MIGUEL 8. resto de botones IR-A-COMPAÑERO como el de IR-A-MIGUEL Cambiamos por lo tanto la pantalla en el diseñador para que quede más clara, eliminamos el botón recuperar, etc:

Para que el código quede mejor, vamos a utilizar por primera vez un procedimiento con © Pedro Felip Belenguer

 112

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

argumentos. Para definir este procedimiento, buscamos “procedures” dentro de Built-In, lo utilizamos y le cambiamos el nombre “procedure” por “DibujarRuta”. Después, también dentro de Built-In/Definition, buscamos el bloque “name” y lo arrastramos como primer argumento (arg) y lo llamamos LatitudDesde. Repetimos la operación para los argumentos LongitudDesde, LatitudHasta y LongitudHasta. Cuidado: es muy importante que respetes el orden de los argumentos. Como lo que va a hacer es llamar a maps para dibujar una ruta desde el punto inicial hasta el punto final, copiamos el código necesario desde otro lugar del editor de bloques donde ya lo tengamos escrito, y cambiamos lo necesario para que dibuje utilizando los argumentos LatitudDesde, LongitudDesde, LatitudHasta y LongitudHasta. Una vez hecho esto, el procedimiento DibujarRuta quedará así:

Ahora vamos a ver paso a paso la solución a los demás puntos de la lista anterior.

 113

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Empezamos con “3) al detectar la posición GPS”:

Fíjate en que AppInventor pone primero la latitud y después la longitud. Nosotros lo haremos igual siempre.

Seguimos con “4) al pulsar botón GUARDAR-POSICION-ACTUAL”:

PEQUEÑO ERROR: EN LA FIGURA ANTERIOR SOBRA EL ULTIMO BLOQUE (Direcion.Text) © Pedro Felip Belenguer

 114

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Hemos definido MiLista para dejar más claro el código, aunque habría sido posible hacerlo sin definir esa variable. Por otra parte, fíjate en que no utilizamos LocationSensor1.CurrentAddress sino Direccion.Text, y tampoco utilizamos LocationSensor1.latitude ni LocationSensor1.longitude sino GPSLatitud.Text y GPSLongitud.Text. Aunque parezca que esto no es importante, sí que lo es. Vamos a imaginarnos una situación un poquito especial para entender esto. Imagínate que tu teléfono detecta la posición, y la pone en Direccion.Text, GPSLatitud.Text y GPSLongitud.Text porque se activa LocationSensor1.LocationChanged. Te sigues moviendo y, en un momento dado, pierde la señal GPS. Si en ese momento pulsas el botón GUARDAR-POSICION-ACTUAL resulta que LocationSensor1.CurrentAddress vale “No address available”, LocationSensor1.latitude vale 0 y LocationSensor1.longitude vale 0. Es mejor hacerlo como en la figura anterior para que se guarde la última posición válida conocida.

Seguimos con “5) al pulsar botón VER-POSICION-ACTUAL”:

Gracias a nuestro procedimiento DibujarRuta ha resultado muy sencillo mostrar nuestra posición actual. Sencillamente, llamamos a Google Maps describiendo una ruta que va desde donde estamos hasta donde estamos, y utilizamos la última posición conocida.

 115

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Seguimos con “6) al pulsar botón MI-POSICIÓN-GUARDADA”:

Veamos cómo funciona esto. Al pulsar el botón, pedimos a la base de datos que lea nuestra posición, es decir, la posición guardada con nuestra clave. Cuando la base de datos logra leer, se activa el bloque TinyWebDB1.GotValue. Pero es posible que no haya una posición guardada. Por eso tenemos que comprobar. Pues bien, en caso de haber una posición guardada, dibujamos la ruta desde nuestra posición actual hasta la posición guardada. Pero tenemos que recordar que al guardar © Pedro Felip Belenguer

 116

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

nuestra posición, con el botón correspondiente, lo que hicimos fue guardar una lista en la que el primer elemento era la dirección, el segundo la latitud y el tercero la longitud. Sabiendo eso, ya podemos llamar a DibujarRuta con los parámetros apropiados. El resultado será una ruta en Google Maps desde donde estamos ahora hasta la posición que habíamos guardado. La otra posibilidad era que no hubiera ninguna posición guardada. En tal caso, mostramos el error “No hay una posición válida guardada”. Al final ponemos también el bloque TinyWebDB1.WebServiceError por si la base de datos devuelve algún error extraño.

Seguimos con “7) al pulsar botón MIGUEL”: Esto va a ser fácil: Ya está.

Lo único que tenemos que hacer es pedir a la base de datos que lea la posición guardada con la clave “Miguel”. En realidad, esa clave la hemos guardado en el diseñador de la app, en el texto asociado al botón de Miguel, es decir, en botón BotonMiguel.Text. El bloque TinyWebDB1.GotValue se encargará del resto, como hemos visto en el punto anterior. Incluso en el caso de que Miguel no haya guardado su posición no pasará nada malo: sencillamente veremos el error “No hay una posición válida guardada”.

Seguimos con “8) resto de botones IR-A-COMPAÑERO”: Tan sencillo como el anterior:

 117

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Elimina ahora los botones que sobren y añade los que te falten, teniendo en cuenta los compañeros que tienes.

Añadir algo más La app está terminada pero podemos hacerla un poquito más interesante.

Detecta compañeros cerca (o... LAS BOLAS DE DRAC) (app no terminada – este punto es más complejo de lo que parece y se resolverá próximamente, aunque no se espera en este punto que el alumno sea capaz de resolverlo – incluso entenderlo puede ser excesivamente complejo en este momento – no obstante, se ofrecerá aquí la explicación y la solución por si alguno se atreve a intentar hacerlo funcionar a base de copiar el código) Vamos a añadir un botón que se llamará DETECTOR que, al pulsarlo, detectará si hay alguno de nuestros compañeros cerca de nosotros. Si detecta a un compañero, el teléfono vibrará y dirá el nombre del compañero. Por ejemplo, si tu compañero “Miguel” (el que has puesto en el primer botón) está cerca, el teléfono vibrará y dirá “Miguel está cerca”. Para que funcione, necesitas saber cómo calcular la distancia que hay desde donde estás tú hasta donde está cada uno de tus compaperos. Tendrás que echar un vistazo al apartado “Cálculo de la distancia entre dos puntos (mochila)”, en la página 186. voyy

 118

Capítulo 2. Aplicaciones básicas del MIT

Curso de Programación de Android

Actividades Esta app es la más compleja que hemos visto y por eso mejorarla es difícil. Si te atreves a hacer alguna mejora, copia primero con “Save As” porque es probable que queriendo mejorarla termines por estropearla. Se sugieren las siguientes mejoras o cambios: 

informar de la distancia desde nosotros hasta un compañero



mostrar los errores en otra ventana. Como nuestra app tiene una ventana muy recargada, puede ser bueno quitar la etiqueta “Posible error” con su mensaje MsjError y llevarlas a otra ventana. Necesitarás, en el diseñador, pulsar el botón “Add Screen”. En el editor de bloques deberás utilizar el procedimiento “Open Another Screen”. También tendrás que ser capaz de cerrar esa ventana (pulsando un botón) para volver a la anterior.



Utilizar esta app (cambiada de nombre) para detectar las 7 bolas del dragón. Primero, un compañero escondería las 7 bolas en diferentes lugares. Para ello, tendría una app que podría llamarse “Marcar posición de las bolas” y que tendría 7 botones, uno para guardar la posición de cada una de las 7 bolas. Iría a un sitio, escondería la bola 1 y pulsaría el botón GUARDAR-POSICION-BOLA1. Iría a otro sitio, escondería la bola 2 y pulsaría el botón GUARDAR-POSICION-BOLA2. Así hasta 7. después, el segundo jugador utilizaría la aplicación “Buscar bolas”. Para encontrar la primera pulsaría el botón “BOLA-1” y le saldría la ruta desde donde está hasta la bola 1. Además, podría utilizar el botón DETECTAR para saber si hay una o más bolas cerca.

 119

Capítulo 3. Otras Apps

Curso de Programación de Android

Capítulo 3. Otras Apps Introducción En este capítulo vamos a ver diferentes Apps que podemos encontrar por Internet y que le han parecido interesantes al autor de este documento desde el punto de vista didáctico.

3.1 Repite todo lo que tú dices Se trata de hacer una App que reconozca la voz de quien le hable, lo pase a texto y lo repita. Intenta hacerlo sin ayuda. Si no te aclaras, mira https://youtu.be/b7fTMRed7ug y verás qué fácil.

el vídeo

de YouTube

3.2 El Ahorcado

Introducción En https://youtu.be/nYNKXm4p_HU podemos ver una versión del juego del ahorcado hecho con App Inventor. Aquí vamos a ver eso mismo pero con unas pocas diferencias: 

la versión del vídeo se hizo con la beta de App Inventor, aquí se ha adaptado a App Inventor 2



los comentarios que se hacen aquí están pensados en la gente que ha seguido este curso. Por este motivo, hay cosas básicas en el vídeo que aquí se dan por sabidas, pero se explican otras que en el vídeo no se tratan



aquí se ha procurado mejorar un poco el estilo de programación, quitando código redundante y convirtiendo variables globales en locales (en App Inventor 1 no existían)



se han cambiado algunos nombres de variables y de procedimientos para hacer el código más comprensible

En YouTube, bajo el vídeo, hay un enlace a Ahorcado.zip que hay que renombrar a "Ahorcado.aia" para poderlo importar en la versión 2 de App Inventor. El contenido consiste en una App sin nada de código pero con las imágenes que vamos a necesitar para realizar la actividad. Pero en la carpeta “Material Necesario” que se adjunta a este PDF podrás encontrar el “Ahorcado_esqueleto.aia” mejorado que debes utilizar.

 120

Capítulo 3. Otras Apps

Curso de Programación de Android

¿En qué consiste el juego del ahorcado? El juego consiste básicamente en elegir una palabra secreta de 6 letras. Se dibujan 6 casillas, una por cada letra, y la horca. Entonces empieza el juego, que es de un solo jugador. El jugador dice una letra. Si está en la palabra secreta, se escribe la letra en todas las casillas que la contienen. En cambio, si no está, se dibuja una parte del muñeco ahorcado. Se continua de modo intentando acertar letras, mostrando las que se aciertan y avanzando en el dibujo del ahorcado cada vez que se dice una letra que no está. Como el muñeco tiene 6 partes, 6 equivocaciones suponen que el ahorcado queda totalmente dibujado y el jugador pierde la partida. Por otra parte, si se completa la palabra el jugador gana.

¿Qué vamos a aprender? Vamos a manejar los siguientes componentes, bloques y conceptos: 

Screen, que nos permitirá manejar mútiples pantallas



Notifier, que nos permitirá emitir notificaciones



Procedimientos, que nos permitirán abstraer los problemas. Si aún no sabes qué son los procedimientos (procedures) te costará entender esta actividad



Variables locales



Construir un nombre de archivo con el bloque JOIN



Dividir un problema complejo en otros más sencillos (metodología "divide y vencerás")



Bucles

A trabajar Localiza el archivo "Ahorcado.aia" que se ha comentado en la introducción e impórtalo desde Projects → Import project (.aia) from my computer. Cuando vas a hacer un bizcocho, lo primero que haces es poner el horno en marcha para no tener que esperar a que se caliente. Pues aquí igual, pero con el emulador: si vas a trabajar con emulador o con AI Companion, ponlos en marcha y que se vayan preparando mientras tú sigues leyendo.

 121

Capítulo 3. Otras Apps

Curso de Programación de Android

Empezamos reconociendo lo que hay Lo que tenemos ahora mismo es lo siguiente: 

un botón con la imagen que podemos apreciar a la izquierda, que está colocado dentro de un VerticalArrangement



en "Media" tenemos cargadas las siguientes imágenes: 0.png, 1.png, ..., 7.png, ahorcado.png, inicio.png



como podemos ver en las propiedades de Screen1, el icono de la aplicación es inicio.png y el título Ahorcado.



no hay nada de código preparado

Parece que eso sea todo, pero aún hay más. En la parte de arriba de la pantalla verás que Screen1 es un desplegable. Selecciona Juego y verás el resto de componentes:

Para añadir esta segunda pantalla alguien pulsó sobre Add Screen, la llamó Juego y le © Pedro Felip Belenguer

 122

Capítulo 3. Otras Apps

Curso de Programación de Android

puso sus componentes. Ponte otra vez en Screen1 y empezamos.

Cambiar de pantalla (desde el programa) Introduce este código:

El bloque "open another screen" lo encontrarás dentro del apartado Control. En la parte de los bloques también puedes cambiar entre Screen1 y Juego. Si entras en Juego verás que no hay nada de código. Para App Inventor cada pantalla tiene su programa. Es como si hubiéramos hecho dos programas diferentes y desde uno pudiéramos llamar al otro.

La segunda pantalla Prácticamente todo el juego se va a desarrollar en la pantalla Juego, por lo que vamos a repasar sus componentes más importantes: 

lblintentos. Es el contador de intentos que quedan. Se utiliza una Label para mostrar el texto y que el jugador no lo pueda modificar.



txtLetra. Es la letra que introduce el usuario. Se utiliza un componente Text porque necesitamos que el usuario pueda cambiarlo.



btnComprobar. El jugador lo pulsa tras introducir cada letra.



btnEmpezarDeNuevo. Este botón está inicialmente oculto. Tiene la propiedad Visible desmarcada. Si lo hacemos visible veremos que aparece justo debajo del botón Comprobar. Se hace visible cuando el juego termina, para poder volver a empezar.



imagen. Esta imagen irá cambiando según el número de errores. Con cada error avanzaremos a la imagen siguiente hasta completar el ahorcado.



Notifier1. Notificará al jugador que ha ganado o perdido.



Label1. Tendrá la primera letra de la palabra secreta, la que hay que adivinar. Es la primera de las 6 casillas vacías.



Label6. Tendrá la sexta letra.

La lógica del juego (programa principal) Tenemos que pensar que el juego del ahorcado es un problema de la vida real que hay que resolver de una manera lógica utilizando una herramienta informática. © Pedro Felip Belenguer

 123

Capítulo 3. Otras Apps

Curso de Programación de Android

Primero tenemos que tener claro cómo empieza el juego. Puede empezar de dos formas, o bien cuando se abre la pantalla "Juego" o bien cuando se pulsa el botón btnEmpezarDeNuevo:

Ilustración 1: Ahorcado - organigrama 1 Veamos ahora el grueso del programa, y después de la figura la explicación:

Ilustración 2: Ahorcado - organigrama 2 Una vez el programa se ha iniciado, no se hace nada hasta que el jugador pulsa una tecla y, después, pulsa sobre btnComprobar. Entonces el programa comprobará si la letra © Pedro Felip Belenguer

 124

Capítulo 3. Otras Apps

Curso de Programación de Android

forma parte de la palabra secreta. Si es así, irá destapando cada casilla en la que aparece esa tecla y comprobará también si ya se ha adivinado la palabra completa, en cuyo caso termina el juego (FIN). Si, por el contrario, la letra que ha introducido el jugador no está en la palabra secreta, se dibujará un trocito más del ahorcado y comprobará también si está completo el dibujo del ahorcado, en cuyo caso termina el juego (FIN). Si el juego ha finalizado se tiene que habilitar el botón btnEmpezarDeNuevo para que suceda lo que se ha explicado en el primer diagrama.

Parte 1 (la que corresponde a la Ilustración 1: Ahorcado - organigrama 1, de la página 120) Sitúate en la parte de los bloques, en la pantalla Juego (recuerda que tienes un desplegable arriba para seleccionarla) y escribe estos bloques:

No importa qué valores demos ahora a estas variables porque les daremos el valor inicial en el procedimiento inicializar. Se explicará para qué sirven cuando se utilicen por primera vez. Veamos (ya de una) el primer procedimiento:

"dibujando" tendrá el número de errores cometidos hasta ahora. "imagen" tendrá el nombre del archivo de imagen que toca dibujar. Cuando llevamos 0 errores "dibujando" vale 0 y por eso estamos poniendo el valor "0.png". Hay que tener en © Pedro Felip Belenguer

 125

Capítulo 3. Otras Apps

Curso de Programación de Android

cuenta que el bloque join une dos textos, en este caso es un "0" (valor de "dibujando") y ".png". "encontrada" es una variable... ¡que no hemos definido aún! Bueno, pues defínela ahora, que ya sabes cómo se hace. Más adelante se explicará para qué sirve. "intentosDisponibles" vale inicialmente 7. Conforme se cometan errores, se reducirá el número de intentos disponibles. "txtLetra" lo utilizaremos para... seguramente no nos hará falta y lo eliminaremos. btnComprobar debe ser visible mientras jugamos, porque el jugador lo necesita. btnEmpezarDeNuevo no debe ser visible mientras se juega. lblintentos sirve para mostrar el valor de intentosDisponibles. elegirPalabraSecreta es el segundo procedimiento, que tenemos aquí:

Se asigna una palabra al azar entre las que hay escritas. Si queremos ampliar el juego pondremos más palabras de 6 letras escritas en mayúsculas. Añade ahora estos bloques que completan el diagrama:

Parte I1 (la que corresponde a la Ilustración 2: Ahorcado - organigrama 2, de la página 120) Mirando el diagrama deberías pensar cómo harías el programa. Como se trata de un problema de cierta complejidad, debemos dividirlos en problemas más sencillos. Cada

 126

Capítulo 3. Otras Apps

Curso de Programación de Android

elemento del diagrama puede corresponderse ahora con un procedimiento (procedure) diferente. Piensa en cómo lo harías antes de ver la solución que se propone a continuación. El programa ya ha empezado y el usuario pulsa una tecla. Acto seguido, pulsa btnComprobar y sucede esto:

Por una parte, declaramos una variable global que se llama "encontrada". No importa el valor que le demos al declararla en el bloque "initialize global" porque le daremos en cada momento el valor adecuado.

 127

Capítulo 3. Otras Apps

Curso de Programación de Android

"verSiLetraEncontrada" es un procedimiento que comprueba si la letra que el usuario ha introducido en "txtLetra.Text". Si la encuentra, cuando termina la variable global "encontrada" vale "true". Si no la encuentra, cuando termina la variable "encontrada" vale "false". Además, si la encuentra la va mostrando en las casillas que corresponde. Después pone en blanco txtLetra.Text para que el jugador vea que el programa la ha tomado.

 128

Capítulo 3. Otras Apps

Curso de Programación de Android

Entonces, si se encontró la palabra se comprobará si se completó la palabra secreta. En caso de que no se haya encontrado, se dibujará un trozo más del ahorcado. Continuamos con los bloques que nos quedan:

 129

Capítulo 3. Otras Apps

Curso de Programación de Android

Aquí tenemos el segundo procedimiento más largo:

Lo único que falta ya es esto:

 130

Capítulo 3. Otras Apps

Curso de Programación de Android

Limitaciones Si se quieren introducir más palabras secretas, o hacer alguna modificación en el programa, deben tenerse en cuenta los siguientes detalles, o el juego no funcionará: 

Las palabras secretas deben tener exactamente 6 letras y se deben añadir a la lista "make a list" escritas sólo con mayúsculas



Las etiquetas en las que se van a mostrar las letras deben tener como texto el carácter subrayado "_". Son las que se han llamado Label1, Label2, ..., Label6.



Las imágenes deben llamarse "0.png", "1.png", ..., "7.png"

Conclusiones Para qué sirven las pantallas (Screen) En esta App se trabaja con dos pantallas, "Screen1" y "Juego". Puede resultar un poco incómodo, pero es una herramienta interesante y vamos a ver por qué. En la pantalla inicial lo único que tenemos es un botón que lo ocupa todo. Al pulsarlo se abre la segunda pantalla. Gracias a esto, la primera pantalla es muy sencilla en su diseño (Designer) y también tiene muy poco código (Blocks). Sin embargo, la segunda pantalla (Juego) tiene un montón de componentes: etiquetas, botones, textos, imágenes, ...y también mucho código. Tanto, que no podemos verlo todo al mismo tiempo, a no ser que nuestra pantalla sea gigantesca. Ahora imagínate que hubiera un segundo juego en la misma App, por ejemplo un crucigrama. Podríamos poner dos opciones en la pantalla inicial, cada una con su botón, y saltar a uno u otro juego según el botón que se pulsara. Cada juego tendría su pantalla con sus componentes (botones, etiquetas, etc) y el código asociado. Para el juego del ahorcado podríamos tener la pantalla Ahorcado (que ahora se llama Juego) y para el otro la pantalla Crucigrama. La pantalla del ahorcado tendría todo lo que hemos visto, y la del crucigrama tendría otros botones, otras etiquetas, etc. ¿Te imaginas eso mismo con una única pantalla? ¿Dónde irías dibujando al ahorcado, encima del crucigrama? El diseño se complicaría mucho. Pero imagínate el código. Tendrías el código del btnComprobar, del ahorcado, y un botón de btnComprobarCr, del crucigrama, todo en el mismo sitio. No habría manera de aclararse.

 131

Capítulo 3. Otras Apps

Curso de Programación de Android

Actividades Aquí tienes formas de mejorar o personalizar el juego (elige alguna, pero no todas): 

bloquea el giro de la pantalla. La presentación está hecha para jugar en vertical, así que nos conviene evitar que al usuario se le esté girando continuamente



adapta la presentación a una tablet. El usuario puede tener un teléfono en la mano para jugar con el ahorcado, o una tablet de 10 pulgadas. Asegúrate de que el hecho de tener un dispositivo grande no supone ningún problema para jugar



añade una pantalla de GAME OVER



cambia las imágenes. Ten en cuenta que el dibujo del ahorcado está compuesto por imágenes que se tienen que llamar "0.png", "1.png", ..., "7.png" para que funcione el código, tal como lo hemos hecho. Todas esas imágenes tienen que tener el mismo tamaño. Para hacer esa secuencia de imágenes puedes partir de cualquiera de las que puedes encontrar en Internet buscando "juego ahorcado", abrirlo con GIMP, guardar en formato PNG la imagen completa (7.png), eliminar una pierna, guardar la imagen como 6.png, eliminar la otra pierna, guardar la imagen como 5.png, ... hasta que tengas la imagen sólo con la horca (0.png). Sustituye las imágenes en el juego y ¡no te olvides de cambiar también el icono de la aplicación! Recuerda que suelen quedar más chulos los iconos con transparencia.



añade sonidos. Podría haber un sonido para empezar, otro para cuando el jugador logra el objetivo, y otro para cuando muere ahorcado.

 132

Capítulo 3. Otras Apps

Curso de Programación de Android



cambia el número de intentos que quedan. En lugar de mostrar ese número en una LABEL utiliza una imagen que muestre unos números más chulos.



botones de idioma. Se ponen botones para español, valenciano e inglés (ahorcado, penjat, scafolded). Si el usuario pulsa sobre el valenciano, las palabras secretas entre las que se escoge estarán en valenciano. Por ejemplo, ENDOLL, LLÀPIÇ. En inglés podrían ser PENCIL, YELLOW.

Para hacer estas otras mejoras te harán falta dominar más conceptos: 

cuando se juega sin teléfono móvil, un jugador escribe la palabra secreta en un papel y el otro va tratando de adivinarla. Tienes que hacer posible esta modalidad de juego poniendo dos botones en la pantalla inicial: MeterPalabraSecretaYJugar o Jugar. Si se pulsa la primera opción, un jugador introducirá una palabra de 6 letras y, luego, pulsará un botón de Jugar.



base de datos TinyDB. Al iniciar la aplicación mirará si hay datos guardados. Si no es así, guardará una serie de palabras secretas para que se pueda jugar. Además, en la pantalla inicial, habrá un botón que permitirá ver qué palabras secretas hay introducidas y se podrán añadir o borrar. De este modo, sin tener que modificar el programa, será posible que juegue un jugador sólo y que pueda meter más y más palabras.

 133

Capítulo 3. Otras Apps

Curso de Programación de Android

3.3 Pong

Introducción El juego Pong es similar al "ping pong" pero aquí hay un solo jugador. Antes de que existieran las videoconsolas, e incluso los ordenadores personales, se inventó este videojuego. Actualmente se enseña a programar el juego Pong en cursos modernos de programación con cualquier plataforma, y App Inventor no podía ser menos. Aquí tienes todo lo necesario: http://www.appinventor.org/content/CourseInABox/drawAnimate/PongTutorial

 134

apítulo 4. El Internet de las cosas

Introducción En este capítulo se va a ver una posible continuación al trabajo con App Inventor. El Internet de las cosas, o IOT (Internet Of Things) como se dice en inglés, va a tener una gran importancia. Se trata, básicamente, de conectar a Internet “cosas”. ¿Y qué son “cosas”? Pues casi todo. Entonces... ¿de qué estamos hablando? Me resultará más fácil explicarlo con ejemplos: 

desde Internet queremos saber si ha llegado el momento de regar una maceta. En este caso, la maceta es la “cosa”. Habrá que poner un higrómetro para saber si la tierra está seca, leer el valor con un dispositivo (Arduino o Raspberry Pi) y hacer esta información accesible desde una página web.



Desde Internet queremos encender las luces de casa. En este caso, las luces de casa son la “cosa”. Entrando en una página web deberemos ser capaces de dar la orden de encender las luces, y en casa estará todo montado para que llegue la orden a un Arduino o Raspberry Pi que, a su vez, dará la luz.

Lo que vamos a ver aquí es cómo combinar un teléfono móvil programado con App Inventor con otros tipos de hardware. Sólo se va a hacer una pequeña introducción a Arduino y a Raspberry Pi. Convertirse en experto de uno de estos pequeños dispositivos queda fuera del alcance de este curso, y es algo que se debería hacer con un curso específico. Pero sí que es posible aprender un poquito para tener una idea de para qué sirven. Programar no es cosa sólo de ordenadores. Tampoco es cosa sólo de ordenadores, teléfonos móviles, tablets, televisores, gafas Google, relojes inteligentes, … Si compramos un hardware adicional como el que se va a aprender a utilizar en este capítulo, dotaremos de inteligencia a otros aparatos que, en un principio, son “tontos”, es decir, no programables. Una lámpara no es inteligente, pero si la pudiéramos manejar con un teléfono móvil, veríamos que el conjunto teléfono+lámpara sí que es inteligente. Incluso puede reconocer nuestra voz y encenderse la lámpara cuando decimos “enciéndete”. Además, vamos a poder conectar todos estos inventos a Internet, con lo que llegamos al concepto de Internet de las cosas. Las aplicaciones son infinitas. Aquí tienes unas cuantas: 

domótica



control de riego



alarma



juegos con dispositivos físicos (cochecito que se maneja con el móvil vía infrarrojos o Bluetooth)

4.1 Introducción a Arduino

Qué es Arduino y cómo lo vamos a manejar Arduino es como un pequeño ordenador especializado para manejar hardware que no se maneja directamente desde un ordenador, como puede ser una bombilla, un motor, una lámpara de casa, … o cosas aparentemente más complejas como la calefacción de la casa o la puerta de un garaje. Cuando lo tienes delante, no es más que una tarjeta con una serie de conexiones. Por una parte, tiene una conexión USB que permite comunicarse fácilmente con un ordenador para programarlo. También tiene pequeñas conexiones hembra en las que conectaremos el hardware a controlar. Pero lo mejor viene después. Cuando ya has programado tu Arduino, el programa queda cargado y se ejecuta automáticamente al suministrarle alimentación. Y esa alimentación se puede proporcionar con una simple pila. Gracias a esto, se puede montar un Arduino sobre un juguete a pilas. No puedes instalar un sistema operativo de PC o tablet en un Arduino, así que nada de LliureX, Windows, OS X, iOS, Android, … pero sí que es posible manejar un Arduino desde un ordenador o tablet con LliureX, Windows, OS X, iOS, Android, … y aquí vamos a ver cómo se hace. Pero no vamos a ver todas las posibilidades, que son muchas, sino que nos vamos a centrar en preparar Arduino para manejarlo desde un dispositivo con Android utilizando una App hecha con App Inventor.

Si, pero... ¿cuánto cuesta? La versión más barata que ha adquirido el autor de este documento costó sólo 11,98 € en eBay en marzo de 2015. No se trata de un Arduino auténtico fabricado en Italia, sino de una tarjeta que hace exactamente lo mismo. Un Arduino auténtico puede costar 15 €. De todos modos, lo más frecuente es comprar un kit que incluye hardware y un cursillo que enseña a utilizar todo junto. Lo que vamos a aprender a hacer aquí se puede comprar todo por menos de 30 €.

Instalación y empezar a trabajar Vamos a seguir unos sencillos pasos para hacer nuestra pequeña actividad: 1) Instalar el entorno de desarrollo en el PC Hay que entrar en https://www.arduino.cc/en/Main/Software y descargar el entorno de desarrollo (IDE). El entorno de desarrollo funciona igual en LliureX que en Windows o en OS X, pero la instalación es un poco diferente. En Windows tendremos un setup.exe que se ejecuta y ya está. En LliureX es una carpeta comprimida. Dentro encontraremos una carpeta, por ejemplo la “arduino-1.6.7”, y la extraeremos a nuestra carpeta personal. Dentro veremos que hay un archivo que se llama “arduino”, sin extensiones ni nada. Ese es el programa que necesitamos. Para ponerlo en marcha, haremos doble clic sobre él y elegiremos “Ejecutar en un terminal”.

En OS X es prácticamente igual que en LliureX: lo que se descarga es un zip y, allí donde se descomprima, habrá un archivo “arduino” que es el que hay que poner en marcha para trabajar. 2) Conectar Arduino vía USB El cable USB sirve para proporcionar una corriente de 5V a nuestro Arduino y también para que nuestro ordenador se comunique con él, para cargarle el programa. 3) Programar Ponemos en marcha el entorno de desarrollo que nos habíamos descargado. Nos aparecerá una ventana similar a esta:

La manera de trabajar es muy diferente a la de App Inventor. Aquí se trabaja con un auténtico lenguaje de programación, que es C++ (en realidad, un subconjunto de C++). No se utilizan bloques sino que hay que escribirlo todo. Pero también es fácil copiar un programa escrito por otra persona y pegarlo dentro del entorno de Arduino para cargarlo en nuestra tarjeta. Un programa en Arduino consiste como mínimo de dos funciones: 

void setup() { }. Lo que se pone aquí dentro se ejecuta una única vez. Es como el Screen1.Initialize



void loop() { }. Lo que se pone aquí dentro se ejecuta una y otra vez, sin detenerse jamás.

Borra todas las líneas, copia estas y pégalas en el entorno de Arduino: void setup() { pinMode(13, OUTPUT); } void loop() { digitalWrite(13, HIGH); // Enciende la luz

}

delay(1000);

// Espera 1 segundo

digitalWrite(13, LOW);

// Apaga la luz

delay(1000);

// Espera 1 segundo

4) Cargar el programa en la tarjeta Arduino Entra en Herramientas → Puerto → COM6 (Puerto Arduino/Genuino UNO) . Esto no será exactamente así en tu caso. Si trabajas con Windows, puedes ver varias opciones en este menú (COM3, COM6, COM10, …) y debes elegir la que pone algo de Arduino:

En LliureX te puede salir, por ejemplo, “/dev/ttyACM0” o “/dev/ttyACM1”. En OS X es un poco diferente, como puede verse en la siguiente imagen:

5) Apagar Arduino y conectar el hardware Antes de cargar el programa puede ser conveniente hacer todo el montaje eléctrico. Es lógico: primero lo montas y luego das la luz. Es como cuando instalas una lámpara: primero quitas la luz, luego la instalas, cortas cables, conectas y, al final, cruzas los dedos y vuelves a dar la luz. En este miniproyecto no vamos a conectar nada, así que no hace falta ni que desconectes. 6) Cargar el programa Conecta otra vez el USB, vuelve a entrar en Herramientas → Puerto → COM6 (Puerto Arduino/Genuino UNO) entra después en Programa → Subir. En un par de segundos estará cargado el programa en tu Arduino. Podrás verlo funcionando: una luz se encenderá durante un segundo. Después, se apagará durante 1 segundo. Después se volverá a encender durante 1 segundo... así toda la vida. 7) Utilizar el montaje Ahora tu Arduino ya está programado. Puedes ejecutar ese programa conectándolo a cualquier puerto USB de un ordenador, impresora, televisor, etc... Arduino sólo puede tener cargado un programa al mismo tiempo y, una vez cargado, no se le borra mientras no se le carga otro.

También puedes ver cómo funciona tu Arduino conectando una pila de 9V así:

ATENCIÓN: hay que fijarse en que el lado positivo lo estamos conectando a VIN y el negativo a GND. También podemos utilizar una pila de petaca, que son todas de 5V. En este caso el positivo se conecta al puerto 5V y el negativo al GND que hay justo debajo.

4.2 Arduino: control de una pequeña luz (LED) Si has conseguido poner en marcha el proyecto anterior, enhorabuena. Estás listo para hacer cosas más complicadas. Pero ahora va a hacer falta un poco más de hardware. Concretamente, necesitas un LED:

No te confundas: un LED es una luz que vale poquísimo dinero. En Amazon o eBay puedes comprar un paquete de 75 por poco más de un euro, y te lo envían gratis. Este montaje es extremadamente sencillo. Fíjate en las patitas de tu LED y verás que una es más larga que la otra. La más larga es el polo positivo, y debes conectarla en el PIN 13 de tu Arduino. Está justo al lado de la luz que encendíamos y apagábamos en el ejercicio anterior. La patita más corta, que es el polo negativo, debes conectarla en el GND que tienes sobre el PIN 13. Una vez realizada la conexión, alimenta a tu Arduino y verás lo que pasa. Aquí puedes ver otra vez el programa con el que estás trabajando: void setup() { pinMode(13, OUTPUT); } void loop() { digitalWrite(13, HIGH); // Enciende la luz delay(1000);

// Espera 1 segundo

digitalWrite(13, LOW);

// Apaga la luz

delay(1000);

// Espera 1 segundo

}

Esta es la explicación de lo que hace: 

Primero tenemos el procedimiento void setup () { }. Recuerda que sólo se ejecuta una vez, como cuando hacemos Scree1.Initialize en App Inventor. En este caso, la única instrucción que hay es pinMode(13, OUTPUT). Sirve para decir a Arduino que vamos a conectar algo en el pin 13.



Después tenemos el procedimiento void loop () {}. Recuerda que este se ejecutará durante toda la vida.



digitalWrite(13, HIGH); hace que se envíe corriente al pin 13. Como resultado, el LED que está conectado ahí se enciende.



delay(1000); hace que nada cambien durante 1000 milisegundos, es decir, durante 1 segundo. Como nada cambia, el LED sigue encendido



digitalWrite(13, LOW); hace que se quite la corriente del pin 13. Como resultado, la LED que está conectado ahí se apaga



delay(1000); hace que nada cambie, así que el LED permanecerá apagado durante 1 segundo entero



como no hay más instrucciones, vuelve a empezar, así que vuelve a hacer el digitalWrite(13, HIGH)

Si no funciona... ¿qué puede estar fallando? En las primeras actividades cualquier cosa puede fallar, porque no tienes experiencia. Prueba esto:  

Comprueba que Herramientas → Placa está seleccionada la Arduino UNO. Comprueba también que en Herramientas → Puerto está seleccionado el que tiene el Arduino conectado. Si no sale ninguno, desconecta y vuelve a conectar el cable USB.



Si estás trabajando en LliureX puede ser necesario que un usuario administrador entre en Aplicaciones → Accesorios → Terminal y ejecute “sudo chmod o+rw /dev/ttyACM0” (suponiendo que sea ése el puerto donde hayamos visto que está conectada la placa Arduino).



Otra posibilidad es que trabajes con un usuario administrador, aunque esto solo hay que hacerlo si no hay más remedio

Ahora debes realizar estas modificaciones: 

modifica el programa para que la luz se apague durante medio segundo y que permanezca apagada un segundo entero. Recuerda que, una vez hecho el cambio, deberás hacer Programa → Subir para que el nuevo programa se cargue en el Arduino



modifica otra vez para que permanezca encendida medio segundo y apagada también medio segundo



modifica el programa para que se utilice el PIN 12 en lugar del 13. Recuerda cambiar la patita larga del LED del PIN 13 al 12 para que funcione

Piensa: 

¿crees que sería fácil encender al mismo tiempo dos LED, uno en el pin 12 y otro en el 13? Pues conecta dos LED y que se enciendan alternativamente: mientras uno esté encendido, el otro apagado, y al revés



¿crees que sería fácil conectar 5 LED al mismo tiempo al PIN 13 y a GND para que se encendieran y apagaran todos al mismo tiempo?

Una cosita más... El programa que acabas de hacer suele utilizarse en todos los cursos de Arduino, y es equivalente al “hello, world!” que se utiliza para aprender otros lenguajes de programación. Cuando compras un Arduino UNO es probable que esté cargado este programa. Si entras en Archivo → Ejemplos → 01.Basics → Blink encontrarás este mismo ejemplo. La única diferencia es que contiene comentarios en inglés. Todo lo que está comprendido entre /* y */ son comentarios. También son comentarios todo lo que empieza por // y hasta el final de la línea. Los comentarios son muy importantes en programación.

4.3 Arduino: control de un motor eléctrico a pilas

Introducción Con Arduino podemos controlar de un modo sencillo y preciso la velocidad de un motor de corriente continua.

Material Necesario Arduino y motor de corriente continua de muy poca potencia. Nos sirve cualquier motor de juguete con dos cables, que funcione con 3 V o 5 V. En tiendas como Amazon podemos encontrarlos muy baratos. Busca “motor CC”. Por ejemplo, el “SODIAL(R) Motor sin Nucleo CC 3.7V 48000RPM + Helice para Juguete de Helicoptero Avion Remoto” vale menos de 2 € en Amazon, lo envían sin gastos de envío e incluye una hélice que nos será útil para saber cuándo está girando.

Es importante que, a la hora de escoger el motor, tenga únicamente dos cables. Y es preferible que sea de 3,3V, porque este montaje no será capaz de mover motores potentes y podría producirse una avería en la placa Arduino.

Ecotrucos Los juguetes con partes móviles utilizan este tipo de motores, así que si tienes uno y no funciona, desmóntalo y aprovecha las piezas. Otra opción es utilizar el ventilador de una CPU, o el que hay en el interior de una fuente de alimentación de PC. Eso sí, esos ventiladores sólo pueden girar en un sentido así que, cuando hagas el montaje, si no gira, lo primero que debes probar es a intercambiar los cables. Si tienes una vieja unidad de CD-ROM que ya no te sirva, incluso si se ha estropeado, puedes desmontarla y dentro encontrarás uno de estos motores, que se utilizaban para introducir y extraer la bandeja. También suelen tener un LED pero sin un soldador será difícil que lo puedas extraer sin dañarlo. También encontrarás otros motores pero verás que no funcionan con solo 2 cables. Se trata de unos motores mucho más difíciles de manejar, con 4 cables o más, que sirven para producir los elementos rotatorios de los discos. El que hace que se mueva el brazo lector suele ser también de más de 2 cables, aunque ¿quién sabe? igual tienes suerte y tiene también 2.

Trabajo a Realizar 1) Montaje Nuestro motor tiene 2 cables. Uno será de color rojo y el otro será de algún otro color, seguramente negro. Si montamos las cosas bien, el motor girará en el sentido de las agujas del reloj. Si lo montamos al revés, girará en sentido opuesto. Conecta el cable rojo al PIN 11, y el otro cable a cualquier pin marcado como GND. En Arduino los pines en general dan corriente positiva y el GND es el negativo. Todos los pines no tienen el mismo comportamiento. El PIN 11 es uno de los que pueden dar mucha o poca electricidad, mientras otros sólo pueden dar el mínimo o nada (HIGH/LOW). 2) Programación Copia este programa en tu entorno Arduino y cárgalo en la tarjeta (te lo puedes descargar de https://github.com/profesooooor/Arduino.git): /* Control_Motor_Simple.ino Elegimos el puerto 11 porque es PWM. Motor sencillo: un borne a GND y el otro a pin 11. */ void setup() { // Esto sólo ocurre una vez pinMode(11, OUTPUT); } void loop() { // Esto se ejecuta toda la vida, una y otra vez: analogWrite(11, 80); // ¡¡¡PELIGRO!!! para velocidades altas, poner una resistencia de 330 ohm // entre el pin 11 y la base del transistor delay(1000); analogWrite(11, 0); delay(1000); }

3) Puesta en marcha. ¿Qué puede fallar? En teoría el motor girará durante un segundo y se parará durante 1 segundo también. Pero puede ocurrir que el motor no gire. Puede que, además de no girar, se oiga un pequeño zumbido o se note algo de vibración. Si el motor no gira, cambiar el analogWrite(11, 80); por analogWrite(11,100);. Si sigue sin girar, aumentar de 100 a un valor superior. Ese valor que estamos cambiando es la

cantidad de electricidad que enviamos, y se traduce en mayor o menor velocidad de giro del motor. El valor máximo es 255, pero no interesa darle valores muy altos porque girará demasiado rápido. Además, cuando paramos el motor se genera una corriente eléctrica de sentido contrario que no es buena para nuestro Arduino.

Si no funciona... ¿qué puede estar fallando? Puede estar fallando cualquiera de estas cosas: 

que el motor necesite más potencia de la que Arduino puede proporcionarle. Si no dispones de más motores, puedes conectar un LED y verás cómo se ilumina más o menos según el valor que indiquemos en analogWrite().



puede que no se haya cargado el programa. Revisa los comentarios de la actividad que se refieren a este posible error.



puede que el motor gire y no puedas apreciarlo. Si el eje de tu motor no tiene nada puesto, como una rueda dentada, puede ser este tu caso. Ponle algo, como un trozo de plastilina, o un papelito



comprueba que está conectado en el PIN 11 y GND. Como los pines son pequeños es normal confundirse y conectar las cosas donde no toca



comprueba que tu motor funciona. Eso es tan sencillo como conectar el cable rojo en el 5V o en el 3V3, que están en el lado opuesto de los pines numerados del 0 al 13, y el otro cable en cualquier GND



revisa que hace contacto y que los cables no están dañados. Estos motores tienen los cables tan finos que se dañan con mucha facilidad

Mejoras que se pueden hacer Aquí tienes un par de propuestas: 

Modifica el programa para que el motor arranque a una velocidad, después se pare, después vaya un poco más rápido, y luego se pare.



Haz que se encienda el LED del PIN 13 mientas el motor está en marcha, y que se apague cuando se apague el motor.

4.4 Arduino: control de un motor potente con relés

Introducción En el apartado anterior hemos visto cómo manejar un pequeño motor, pero Arduino no tiene fuerza suficiente como para manejar motores potentes, y mucho menos para manejar varios motores al mismo tiempo. Pero, además, el montaje anterior tiene la limitación importante de que el motor sólo puede girar en un sentido o estar parado, y aquí vamos a ver cómo es posible hacerlo girar en un sentido o en otro. Por si esto no fuera bastante, utilizaremos un hardware que nos permitirá hacer montajes más complicados, incluso con corriente alterna, que se verán en la actividad siguiente. Todo esto y mucho más se puede hacer de varias maneras, pero aquí vamos a ver la más sencilla y segura de utilizar para alguien que está empezando: una tarjeta controladora de relés. ¿Que no sabes qué es un relé? Pues aquí también vas a aprenderlo.

Material Necesario Relación: 

Arduino



tarjeta controladora con 2 relés. También puede servir una que tenga más de 2. Sería posible utilizar dos de 1 relé pero no vamos a ver aquí cómo se conectaría, si bien el lector atento encontrará la manera



un motor (esta vez no nos sirve un ventilador, porque queremos que gire en ambos sentidos)



pila de petaca



cables



opcionalmente: pinzas de cocodrilo pequeñas

Como controladora aconsejo una de estas: “Tarjeta 2 relés SRD-95-VDC-SL-C” (menos de 2 €), “Tarjeta 4 relés SRD-95VDC-SL-C” (menos de 4 €). Esta vez no vamos a poder sustituir el motor por un ventilador, porque el motor queremos que gire en un sentido o en otro, y eso los ventiladores “normalitos” no pueden hacerlo. Los cables se pueden comprar (mejor si son “cables de protoboard” macho/macho y macho/hembra) o aprovechar cables telefónicos o informáticos (Ethernet). También nos serán útiles cables que sean hembra por un lado, para conectarlos a la controladora. Las pinzas de cocodrilo, que se llaman así porque recuerdan a la boca de un bicho de esos, se pueden adquirir fácilmente en Amazon, eBay, o cualquier tienda de electrónica. No son necesarias, pero ayudan a fijar cables de manera que no se nos suelten.

Ecotrucos Vamos a necesitar cables que son hembra por un lado. Podemos aprovechar los cables de audio que se utilizaban para unir las controladoras de CD-ROM con las tarjetas de sonido, que son hembra por ambos lados. Para convertir a macho una conexión hembra, podemos utilizar un cable macho/macho. Para convertir a hembra una conexión macho, podemos utilizar un puente (jumper) de los que abundan en las placas base y circuitos impresos en general.

Trabajo a Realizar El montaje físico Fíjate en esta fotografía:

Descripción detallada del montaje: 

pila de petaca. Del polo positivo salen dos cables rojos y del negativo cables de otro color (azul y verde). Siempre que podamos debemos reservar los cables de color rojo para el positivo, porque eso ayuda a comprobar que no nos estamos equivocando. Las equivocaciones de polo conducen a averías. En el polo negativo se tienen que intentar utilizar cables negros o azules.



Motor. De él salen dos cables. En este ejemplo el motor está conectado a un sistema de poleas que se conoce como reductora, y tiene clavado un tapón de plástico al que se han pintado unos puntitos para poder ver fácilmente cuándo está parado o girando.



Arduino. Está conectado vía USB al ordenador, además de los cuatro cables que van hacia la controladora.



Controladora. Si la miramos en la posición de la foto, podemos ver que tiene cuatro “cajitas azules”. Son los relés. Este modelo tiene 4. 

los relés: 

relé 1. Vamos a fijarnos en el lado de los tornillos. Vemos que pone K1. Esto significa que es el relé 1 de esta controladora. El dibujo que tiene representa

que, mientras no hagamos nada, el tornillo 1 (el de más abajo) está conectado con el tornillo 2. Cuando proporcionemos alimentación al relé, el tornillo 2 dejará de estar conectado al tornillo 1 y pasará a estar conectado al tornillo 3. Efectivamente, el relé es un conmutador en el cual el tornillo 2 está siempre conectado o bien al tornillo 1 o al 3. La posición del conmutador no cambia a mano con una palanca, sino dando o no dando electricidad al relé.  

relé 2. Está identificado como K2.

Los pines de control: 

miramos ahora abajo a la derecha y vemos unos pines macho, que vamos a conectar a Arduino. Lo ideal es utilizar cables que son hembra por el lado de esta controladora, y macho por el lado de Arduino.



GND. Este es el negativo. Lo conectaremos a cualquier GND de Arduino.



VCC. Es el positivo. Lo conectaremos a 5V de Arduino.



IN1 (entrada del relé 1). Cuando se reciba corriente por este pin, el relé 1 se activará, lo que significa que su conmutador interno cambiará de posición y el tornillo central pasará a estar conectado con el tornillo 3. Para ver que funciona, podemos conectar manualmente el cable VCC con el IN1.



IN2. Es la entrada del relé 2.



Los ledes de posición de los relés. Cuando un relé estará activado, su LED correspondiente permanecerá iluminado. En la fotografía del principio de esta actividad se puede apreciar cómo hay dos relés activados, el 1 y el 2, porque los dos primeros ledes se ven iluminados.



Conexiones entre la pila y los relés. 

Positivo. El positivo de la pila está conectado con el tornillo 1 del relé 1, y también con el tornillo 1 del relé 2.



Negativo. El negativo de la pila está conectado con el tornillo 3 del relé 1, y también con el tornillo 3 del relé 2.



Con esta conexión conseguimos que el tornillo central de cada relé esté conectado inicialmente con el tornillo 1. Si se activa un relé, el tornillo central pasará a estar conectado con el tornillo 2. Nunca estarán conectados el 1 con el 3, así que no produciremos ningún cortocircuito.



Conexiones entre el motor y los relés. Un borne del motor se conecta al tornillo central del relé 1, y el otro al tornillo central del relé 2.



Conexiones entre Arduino y la controladora. Arduino dará las órdenes a la controladora, y ésta a los relés. 

GND de Arduino (cualquier GND) a GND de la controladora



5V de Arduino a VCC de la controladora



PIN 1 de Arduino a IN1 de la controladora



PIN 2 de Arduino a IN2 de la controladora

Comentarios: 

Como se puede apreciar, el motor se hace girar con una pila aparte, no con la alimentación de Arduino. Así, si el motor necesita 9 voltios, no hay más que sustituir la pila de la imagen por una de 9V. Incluso podrían utilizarse voltajes mayores de los que puede soportar una tarjeta Arduino



Arduino dará las órdenes: 



inicialmente no hay ninguna orden: 

El relé 1 mantiene en contacto el tornillo 1 con el tornillo central, lo que hace que el positivo de la pila esté conectado con el borne 1 del motor.



Del mismo modo, el relé 2 está haciendo que el positivo de la pila esté conectado con el borne 2 del motor.



Resumiendo: al motor llega positivo por un lado y positivo por otro. Como consecuencia, el motor está parado.

Arduino activa PIN 1 (pero no PIN 2). Cuando mediante nuestro programa hagamos que Arduino envíe corriente por el PIN 1 ocurrirán un montón de cosas: 

PIN 1 envía corriente a IN1 de la tarjeta.



El LED IN1 se ilumina.



El relé 1 cambia de posición.



Ahora, el tornillo central del relé 1 deja de estar en contacto con el tornillo 1 y pasa a estar en contacto con el tornillo 3. Como consecuencia, el borne 1 del motor pasa a estar conectado con el negativo de la pila.



El relé 2 sigue en su posición inicial, por lo que el otro borne del motor sigue conectado al positivo de la pila.



Resumiendo: al motor llega negativo por un lado y positivo por otro. Como consecuencia, el motor gira.

Arduino activa PIN 2 (pero no PIN 1). Cuando mediante nuestro programa hagamos que Arduino envíe corriente por el PIN 2 ocurrirán un montón de cosas: 

PIN 2 envía corriente a IN 2.



Se ilumina el LED IN2.



Se activa el relé 2.



Como consecuencia, al motor llega positivo por un lado y negativo por otro. Como consecuencia, el motor gira en sentido inverso a como lo hace cuando activamos con el PIN 1.

Si Arduino, por un error en nuestro programa, activara los pines 1 y 2 al mismo tiempo, los dos bornes del motor quedarían conectados al negativo de la pila, y el motor no se movería.

El código Aquí tienes el programa. Se ha partido en dos trozos para facilitar la impresión de este

documento, pero tienes que copiar la primera mitad y, a continuación, la segunda. Puedes descargarlo de https://github.com/profesooooor/Arduino. Aquí tienes la primera parte: /* EEE_T05_2Reles_1V.ino Arduino controlando el giro de un motor con 2 relés de 1 vía. Utilizamos la tarjeta de 2 relés SRD-95-VDC-SL-C. Con el pin 1 controlaremos el relé 1. Con el pin 2 controlaremos el relé 2. Montaje físico: GND de Arduino a GND de placa 5V de Arduino a VCC de placa pin 1 de Arduino a IN1 de placa pin 2 de Arduino a IN2 de placa relé 1: izquierdo a negativo, central a positivo motor, derecho a positivo relé 2: izquierdo a negativo, central a negativo motor, derecho a positivo (de este modo los motores permanecen parados por defecto) (los relés se conectan a Arduino o, mejor, a una fuente de alimentación aparte) */ int in1 = 1;

// pin de Arduino para controlar el relé 1

int in2 = 2;

// pin de Arduino para controlar el relé 2

void setup() { pinMode(in1, OUTPUT); pinMode(in2, OUTPUT); }

Y la función loop: void loop() { // Giramos hacia la derecha durante 1 segundo digitalWrite(in1, HIGH); digitalWrite(in2, LOW); delay(1000); // Paramos 1 segundo digitalWrite(in1,LOW); digitalWrite(in2,LOW); delay(1000); // Giramos hacia la izquierda durante 1 segundo digitalWrite(in1,LOW); digitalWrite(in2,HIGH); delay(1000); // Paramos 1 segundo digitalWrite(in1,LOW); digitalWrite(in2,LOW); delay(1000); }

Breve explicación: 

utilizamos dos VARIABLES GLOBALES, que se llaman in1 e in2, y las inicializamos a 1 y a 2.



En el setup() decimos que el pin in1, que es el 1 porque es lo que vale la variable global in1, se va a utilizar para enviar corriente. Luego decimos lo mismo del pin in2, que es el 2.



en el loop() hacemos digitalWrite(in1, HIGH); y también digitalWrite(in2, LOW). Esto hace que por el PIN 1 se envíe corriente y por el PIN 2 no se envíe. Como consecuencia, IN1 de la tarjeta se activará y el relé K1 cambiará de posición. Sin embargo, el relé K2 continuará desactivado. Esto hará que el motor empiece a girar.



delay(1000) hará que nada cambie durante 1 segundo, así que el motor seguirá girando.



digitalWrite(in1,LOW); digitalWrite(in2,LOW) hará que los dos relés se desactiven, y el motor se parará. Nuevamente, un delay(1000) hará que el motor permanezca parado un segundo.



digitalWrite(in1,LOW); digitalWrite(in2,HIGH) hará que el motor gire hacia el lado inverso.



El resto de loop() no necesita más comentarios.



Al terminar loop() vuelve a empezar y se repite la secuencia.

Actividades adicionales y últimos consejos El relé es capaz de cambiar de posición muy deprisa, pero el motor no. Los motores de corriente continua, también conocidos como motores CC o DC (de sus siglas en inglés), generan electricidad cuando los movemos. De hecho, una dinamo no es más que un motor eléctrico que se mueve para producir electricidad. Cuando paramos el motor, por inercia sigue girando. Mientras lo hace, genera electricidad. Si hacemos girar el motor y, sin pararlo antes, lo obligamos a girar en sentido contrario, lo podemos estropear. Prueba a hacer las siguientes modificaciones: 

que el motor gire durante medio segundo, pare durante medio segundo, gire en sentido opuesto 1 segundo y pare 1 segundo



que el motor gire durante 1 segundo al tiempo que se enciende un LED de color verde conectado al PIN 13. Luego que se pare durante 1 segundo. Luego que gire en sentido opuesto mientras se enciende un LED de color rojo conectado al PIN 12. Luego que se pare durante medio segundo (si no tienes ledes verde y rojo puedes hacerlo con dos del mismo color). Recuerda que en setup() hay que poner en OUTPUT los pines 13 y 14.

4.5 Arduino: control de una lámpara de 220 V

Introducción Vamos a aprovechar los conocimientos adquiridos en la actividad anterior para hacer esta. Es muy recomendable haber terminado con éxito la otra actitud porque ahora vamos a jugar con fuego. Si no has entendido cómo funciona un relé o si no te ha salido bien la actividad anterior, vuelve a intentarlo. Aquí sí que hay peligro. Vamos a utilizar corriente de 220 voltios, la que hay en cualquier casa. Una conexión mal hecha tendrá como consecuencia lesiones y también averías en la instalación eléctrica. ATENCIÓN: este ejercicio debe realizarse únicamente bajo la supervisión de un adulto responsable (un adulto irresponsable no nos vale).

Material Necesario Nos va a hacer falta todo esto: 

Arduino



tarjeta controladora de relés con, al menos, 1 relé



cables para conectar la tarjeta controladora con el Arduino



regleta con interruptor



bombilla con portalámparas y cable eléctrico grueso, del que se utiliza para conectar lámparas o electrodomésticos a la red eléctrica

Permítame que insista Es muy importante seguir estos consejos: 

la tarjeta controladora es muy barata y buena, pero debajo tiene contactos al aire por los que van a circular 220 voltios, así que no sujetes la controladora con la mano mientras tenga corriente



la controladora debe colocarse sobre un papel, cartulina, plástico, madera, … cualquier superficie que no sea conductora de la electricidad



no debe haber líquidos cerca. Basta con que se vuelque un vaso de agua, tacita de café, etc para que se moje la controladora y se produzca una explosión



la regleta nos da seguridad. Utilízala



todas las conexiones de los cables de 220 voltios deben estar bien hechas. Un cable demasiado fino o una conexión mal hecha tendrá como resultado que el cable se recalentará, o incluso podrá quemarse y producir fuego

Trabajo a Realizar Una comprobación importante Antes de hacer el montaje vamos a fijarnos en lo que está escrito sobre el relé: 

10A 240VAC 10A 125 VAC significa que puede manejar corrientes de hasta 10 amperios con un voltaje de hasta 240 Voltios de corriente alterna (AC). Si la corriente es de 125 V de corriente alterna también puede soportar hasta 10 amperios.



10A 30VDC 10A 28VDC significa que puede manejar corrientes de hasta 10 amperios con un voltaje de hasta 30 voltios de corriente continua (DC). Si la corriente es de 28 voltios de corriente continua también puede soportar 10 amperios.



SRD-05VDC-SL-C significa que las órdenes que le llegan tienen que ser de 5 Voltios de corriente continua.

Resumiendo, estos relés reciben órdenes de una controladora que funciona con 5 Voltios (que son los que recibe del Arduino). Por otra parte, en la parte de los tornillos, se pueden manejar corrientes alternas de hasta 250 voltios, o corrientes continuas de hasta 30 Voltios. En todos los casos, la intensidad de la corriente no deberá superar los 10 amperios. Esto nos permite manejar sin problemas una bombilla o una lámpara entera. Hay que comprobar que los relés que se utilizan pueden manejar corriente alterna de 220 Voltios.

Montaje Eléctrico Si quieres, puedes cargar primero el programa en el Arduino sin tener nada conectado, pero también podrás hacerlo después si tomas las debidas precauciones. Aquí tienes una vista completa del montaje, con la regleta apagada:

Descripción detallada del montaje: 

Regleta. Un cable va directo al portalámparas y el otro al relé.



Portalámparas. Un cable va a la regleta y el otro al relé. Cuando reciba alimentación por los dos lados, la bombilla se encenderá.



Controladora. Si nos fijamos en la foto, veremos que esta tiene dos relés, no cuatro como en el ejercicio anterior. Funciona exactamente igual que la de 4: 

los relés. Esta tarjeta tiene 2, por lo que tenemos desde el relé K1 hasta el K2. 



Relé 1. Está identificado como K1. El tornillo central va hacia la regleta. El tornillo de arriba va al portalámparas. El tornillo de abajo no lo vamos a utilizar. Si nos fijamos en el dibujo, nos daremos cuenta de que mientras el relé no reciba alimentación, los tornillos 2 y 3 no tienen conexión, por lo que la lámpara permanece apagada por defecto.

Los pines de control. En este caso tenemos GND, IN1, IN2, VCC porque sólo hay dos relés. 

GND. Este es el negativo. Lo conectaremos a cualquier GND de Arduino.



VCC. Es el positivo. Lo conectaremos a 5V de Arduino.



Ledes de posición de relés. Tenemos dos.



Arduino. Mientras hacemos el montaje lo tenemos desconectado del ordenador.



Conexiones entre Arduino y la controladora. controladora, y ésta a los relés.



Arduino dará las órdenes a la



En este caso estamos aprovechando un cable hembra/hembra reciclado de una unidad CD-ROM para facilitar las conexiones. Aunque tiene cuatro conexiones, que encajan perfectamente con los pines de la controladora, utilizamos solo 3



GND de Arduino (cualquier GND) a GND de la controladora



5V de Arduino a VCC de la controladora. Utilizamos el cable rojo porque siempre que se pueda el rojo debe utilizarse para la alimentación positiva



PIN 1 de Arduino a IN1 de la controladora (por error en la fotografía está en el pin 11, pero debe ponerse en el 1 porque es lo que pone en nuestro programa)

a diferencia del ejercicio anterior, no utilizamos más pines de Arduino ni tampoco el IN2 de la controladora

Comentarios: 

Como se puede apreciar, la lámpara funciona con una alimentación que nada tiene que ver con la del Arduino. Estos relés soportan corriente continua y corriente alterna



Arduino dará las órdenes:



inicialmente no hay ninguna orden: 



El relé 1 mantiene en contacto el tornillo 1 con el tornillo central. Como en el tornillo 1 no hay nada, no ocurre nada.

Arduino activa PIN 1. Cuando mediante nuestro programa hagamos que Arduino envíe corriente por el PIN 1 ocurrirán un montón de cosas: 

PIN 1 envía corriente a IN1 de la tarjeta.



El LED IN1 se ilumina.



El relé 1 cambia de posición.



Ahora, el tornillo central del relé 1 deja de estar en contacto con el tornillo 1 y pasa a estar en contacto con el tornillo 3. Como consecuencia, la corriente que llega de la regleta por el cable azul atraviesa el relé y sigue por el cable azul que va hacia el portalámparas, y se enciende la bombilla (siempre que la regleta esté activada).

Programa Carga este programa pero lee el apartado siguiente antes de ponerlo en marcha: /* Bombilla_Rele_1V.ino

Arduino controlando una lámpara con 1 relé de 1 vía. Utilizamos la tarjeta de 2 relés SRD-95-VDC-SL-C o una similar.

Con el pin 1 controlaremos el relé 1.

Montaje físico: GND de Arduino a GND de placa 5V de Arduino a VCC de placa pin 1 de Arduino a IN1 de placa

relé 1: izquierdo a regleta, central a bomtilla, derecho sin conectar bombilla: un lado a regleta, el otro al relé como se ha dicho (de este modo la bombilla permanece apagada por defecto) */

int in1 = 1;

// pin de Arduino para controlar el relé 1

void setup() { pinMode(in1, OUTPUT); }

void loop() { // Encendemos digitalWrite(in1, HIGH); delay(200); // Tras 2 décimas de segundo apagamos digitalWrite(in1,LOW); delay(200);

// Repetimos acción similar pero más lenta digitalWrite(in1, HIGH); delay(500); digitalWrite(in1,LOW); delay(500);

digitalWrite(in1, HIGH); delay(900); digitalWrite(in1,LOW); delay(900); }

Puesta en marcha, parte 1 Primero tenemos la electricidad cortada gracias al interruptor de la regleta. Aún así, ponemos en marcha el Arduino y veremos cómo está funcionando, porque oiremos el chasquido del relé cada vez que cambia de posición, además de ver cómo se enciende y se apaga el LED IN1 correspondiente a ese relé.

Puesta en marcha, parte 2 Ahora ya sólo falta dar la luz con el interruptor de la regleta y comprobar que todo funciona como cabía esperar. Pero esto tiene mucho peligro, así que asegurate de que la regleta está sobre un papel o cartulina, como en la fotografía. Aún así, podrías tener una avería en tu ordenador. ¡Uf, no por favor! Pues sigue leyendo antes de dar la luz.

Puesta en marcha, parte 3 Alimentar el Arduino con pilas. Si alimentamos nuestro Arduino con pilas no pondremos en peligro nuestro ordenador. Una vez cargado el programa vía USB, desconectaremos Arduino del ordenador y lo alimentaremos con una pila. Hay varias formas de hacer esto. Por ejemplo, utilizar una pila de 9V con un adaptador y metérselo por el único sitio posible. Otra forma es utilizar una pila de 5V y conectar su positivo al 5V de Arduino (donde también tenemos ahora mismo la conexión hacia la controladora) y el negativo a cualquier GND. Otra forma es utilizar una pila de 9V y conectar su positivo a V IN de Arduino (no a 5V, cuidado) y el negativo a cualquier GND. Si cuando utilizas pilas no se oye el chasquido del relé cambiando de posición, seguramente se debe a que tu pila ya no tiene fuerza suficiente.

Libre Arduino Este sería un buen momento para hacer un trabajo libre en el que se combinen las cosas aprendidas hasta ahora con Arduino para hacer un programa que haga algo diferente. ¿Qué se te ocurre? Habría que preparar dos archivos: 

Libre Arduino.odt, que sería un archivo de texto en el que explicaríamos el proyecto, el material necesario y cómo hay que realizar el montaje, explicando cada conexión. Si el archivo de texto se prepara con Writer acabará en .odt y, si se prepara con Word, acabará en .docx



Libre Arduino.ino, que sería el programa a cargar en el Arduino

Podría ser interesante realizar alguna fotografía o vídeo del proyecto ya funcionando.

4.6 Arduino + Android: control por Bluetooth desde Android

Introducción ¡Por fin vamos a poder utilizar nuestro Android con Arduino! Ya has aprendido lo imprescindible para poder controlar cosas con Arduino, la magia empieza cuando puedes manejarlo con tu móvil porque convertirás en “inteligentes” a las cosas más estúpidas, siempre que funcionen con electricidad.

Material Necesario Pilas, porque con USB no va a ser posible trabajar. HC-05 o HC-06 (el autor de este documento ha utilizado únicamente HC-05). Puedes encontrarlo en eBay como “Wireless Serial 6 Pin Bluetooth Transceiver Module HC-05 RS232 Master Slave FHRG” por algo más de 4 €. Lo bueno es que lleva 4 cables macho/hembra que van de perlas para conectarlo a Arduino directamente.

Trabajo a Realizar Esta vez tenemos que empezar por cargar el programa en Arduino. Esto es necesario porque, cuando pondremos el módulo Bluetooth, las comunicaciones vía USB no funcionarán y no podremos cargar el programa. Si, por error, hemos hecho primero el montaje y, después, queremos cargar el programa, tendremos que desconectar el módulo HC-05 (o HC-06) antes.

El programa de Arduino Este es el programa que https://github.com/profesooooor/Arduino):

debes

cargar

(está

/* T09_Pruebas_Bluetooth_switch.ino

Control del LED de Arduino vía Bluetooth.

Hay que cargar el programa antes de conectar el HC-05 porque después no será posible. Luego, alimentar el Arduino con pilas. El montaje incluye un adaptador Bluetooth HC-05, que se conecta así: HC-05

ARDUINO

STATE

No conectado

RXD

1 (está marcado como TX)

TXD

0 (está marcado como RX)

GND

GND (cualquiera)

VCC

KEY

No conectado

Se recomienda conectar un LED al pin 13 para que se vea mejor. */

void setup() { Serial.begin(9600); pinMode(13, OUTPUT); }

void loop() { if (Serial.available()) { switch(Serial.read()) { // Encender case 'e': case 'E': digitalWrite(13, HIGH); break; // Apagar case 'a': case 'A': digitalWrite(13,LOW); break; } } }

Ese programa hará que se encienda un LED cuando Arduino reciba una 'e' (minúscula o mayúscula) por el puerto Bluetooth, y que se apague cuando reciba una 'a'.

Si quieres... Antes de hacer el montaje físico puedes hacer una cosa que te ayudará a entender el programa anterior, y a comprobar que está cargado en tu Arduino. Es muy sencillo. Teniendo tu Arduino conectado, y una vez le has cargado el programa anterior, entra en Herramientas → Monitor Serie. Pulsa la letra E seguida de INTRO. Verás cómo se enciende el LED de tu Arduino, ese que está soldado en la placa y que está junto al pin 13. Pulsa ahora la letra A seguida de INTRO y verás cómo se apaga.

El montaje físico Antes de hacer el montaje desconecta el cable USB de tu Arduino. Este es el esquema:

Si nos fijamos, veremos que el pin RX del HC-05 lo estamos conectando al pin TX de Arduino (que es, al mismo tiempo, el pin digital 0). También estamos conectando el RX del HC-05 al TX de Arduino. Además, estamos conectando 5V y GND al HC-05, que es la alimentación que necesita para funcionar. Aunque la placa Arduino tiene un LED en el PIN 13 siempre soldado en la propia placa, podemos poner un LED de tamaño real conectado al PIN 13 y a GND. Desconectar Arduino de USB y utilizar pilas Mientras tengamos conectado el USB las transmisiones con el HC-05 no funcionarán por la forma en que está diseñado Arduino. Y también ocurre al contrario: si el HC-05 está montado, no podremos cargar ningún otro programa a Arduino porque no funcionarán las comunicaciones USB. Explicación: Arduino mira si hay algo conectado a los pines 0 y 1. Si no hay nada conectado, utiliza dos conductores que hay dentro del USB (que contiene 5 cables) para enviar y recibir, como si fueran los pines 0 y 1, que se llaman también RX y TX. Pero cuando Arduino ve que hay algo conectado en 0 y 1, ya no utiliza esos cables USB para comunicarse. Como consecuencia, le herramienta Monitor Serie deja de funcionar. Pero no sólo eso, tampoco es posible cargar otro programa a Arduino porque no puede enviarlo vía USB.

Por este motivo, debemos desconectar ahora el puerto USB y alimentar el Arduino con pilas.

Comunicarse con Android Este paso también es opcional, como el anterior del Monitor Serie y ayuda a entender cómo funcionan las comunicaciones. Vamos a realizar el control de nuestro montaje desde Android. Debemos seguir estos sencillos pasos: 

nos instalamos “BlueTooth Serial Controller”



si no lo habíamos hecho aún, conectamos la pila a Arduino



vinculamos el dispositivo HC-05. Cuando nos pida PIN metemos el 1234

Ahora trabajamos ya con “Bluetooth Serial Controller”: 

pulsar sobre CONNECT y seleccionar el dispositivo HC-05



escribir E y enviarla. Se encenderá el LED



escribir A y enviarla. Se apagará el LED

Todo esto también puede hacerse desde Windows con “Bluetooth Serial Terminal App”, o desde otras plataformas.

¿Qué puede fallar? Seguramente te irá bien a la primera, si no repasa, a ver si has hecho algo mal. Aquí tienes algunos problemas adicionales que te pueden surgir: 

el error más corriente es conectar al revés los pines 0 y 1. El TX del HC-05 va al RX del Arduino, y viceversa. Esto es así porque la información que envía (TX) un dispositivo es la que recibe (RX) el otro



el dispositivo Bluetooth sólo puede estar conectado a un dispositivo al mismo tiempo. Si lo vinculamos a un portátil con nuestro ordenador, antes de poderlo conectar a nuestro móvil Android deberemos desconectarlo del ordenador



el HC-05 viene configurado de fábrica para que vía Bluetooth lo veamos como HC05 y su pin es 1234. Si te fijas en la tarjetita, verás que tiene otros dos pines que no estamos utilizando. Sirven para modificar la configuración del HC-05 para que pueda llamarse de otra forma y para cambiarle el PIN, pero queda fuera del ámbito de este documento explicar cómo se hace



el HC-05, además, viene configurado como un esclavo. Los dispositivos Bluetooth pueden funcionar en modo maestro, como un ordenador, o en modo esclavo, como unos auriculares. Cambiar de esclavo a maestro es algo que se hace también con esos pines extra

La App de Inventor (Control_Arduino) Como has podido comprobar, enviar una “e” vía Bluetooth encenderá el LED y enviar una “a” lo apagará. Eso lo podemos hacer desde una App hecha por nosotros con Inventor.

Empieza una App nueva y llámala Control_Arduino.

Diseño Tenemos que hacer un diseño con botones. Como, de momento, sólo vamos a controlar una bombilla, pondremos los siguientes componentes (explicados después):

Componentes: 

icono de la aplicación con un dibujo de Arduino UNO (buscar por Internet)



btnBombilla, botón con imagen de una bombilla apagada (Bombilla_Apagada.png)



aunque no se vea, cargamos también una imagen de una bombilla encendida (Bombilla_Encendida.png)



ListaDispositivos, parece un botón pero es un ListPicker, donde pone “Seleccionar Arduino”



LblDispositivo, una etiqueta para informar al usuario



BluetoothClient1, es un BluetoothClient sacado de Conectivity

Bloques Cuando se pulse sobre el texto “Seleccionar Arduino”, se estará pulsando realmente sobre un ListPicker que se llama ListaDispositivos. Se mostrará entonces la lista de dispositivos para que el usuario seleccione el HC-05 de su Arduino:

En cuando el usuario haya pulsado sobre el dispositivo en cuestión, nos intentaremos conectar. Si ha ido bien, informaremos con la etiqueta que habíamos preparado:

Ya sólo nos falta programar el botón BtnBombilla. Cuando se haga clic se comprobará si está seleccionado el dispositivo Bluetooth. No podemos comprobar que sea el HC-05 de nuestro Arduino, pero al menos sí que podemos saber si estamos vinculados con un dispositivo Bluetooth (sigue la explicación después de la figura):

Si se está mostrando la imagen Bombilla_Apagada.png es porque la bombilla está apagada, que es lo que ocurre cuando acabamos de arrancar la App. Entonces enviamos la letra “e” a nuestro Arduino, que encenderá el LED, y cambiamos la imagen a Bombilla_Encendida. Si, por el contrario, la imagen que se estaba mostrando era Bombilla_Encendida.png, enviaremos la letra “a” de “Apagar” a nuestro Arduino, y mostraremos la imagen Bombilla_Apagada.png. Y con esto tendremos ya terminada nuestra App, que tiene un uso muy intuitivo y que nos permite saber si habíamos encendido o apagado la bombilla.

Actividades adicionales Sería muy interesante que hicieras estas: 

haz una mezcla de esta actividad con la “4.5 Arduino: control de una lámpara de 220 V” (página 149) así: conecta un relé al pin 13, es decir, VCC del relé a +5V de Arduino, GND del relé a cualquier GND de Arduino y IN del relé al pin 13. Por el otro lado del relé, conecta la bombilla como hiciste entonces. Comprueba que tu App Control_Arduino es capaz de activar y desactivar el relé. Si lo hace bien, dale luz a la bombilla y ya tienes hecho un control de una lámpara desde el móvil.



modifica el programa para que, si se pulsa una “p” (minúscula o mayúscula) el LED parpadee así: encendido durante 200 milisegundos, apagado 200 milisegundos, encendido 300 milisegundos, apagado. Mientras parpadea, podrías poner una bombilla de otro color en la pantalla (mejor si preparas tú mismo las imágenes de las bombillas partiendo de una sola y retocándola con un programa de edición de imágenes).

Para modificar el programa de Arduino con éxito, tienes que fijarte cómo se ha hecho para así poder añadir órdenes asociadas a teclas. Cada opción empieza con uno o más “case”, luego están las instrucciones que dan las órdenes a los pines, y luego está el “break”. Actividad “libre”: 

añade controles para hacer más cosas.

4.7 Arduino + Android: control por voz Abre la App Control_Arduino y guárdala como Control_Arduino_Voz y haz lo siguiente: 

utiliza un botón con una bombilla amarilla



utiliza otro botón con una bombilla verde



si alguien pulsa el botón de la bombilla amarilla se encenderá la bombilla amarilla



si alguien pulsa el botón de la bombilla verde ya sabes lo que ocurrirá



añade un componente SpeechRecognizer



haz que cuando alguien diga “amarilla” se encienda la bombilla amarilla y que cuando alguien diga “verde” se encienda la verde. Tendrás que averiguar tú mismo cómo funciona el SpeechRecognizer para hacer el programa

Conexiones a realizar: 

un LED amarillo estará conectado al PIN 13 y a GND



un LED verde estará conectado al PIN 12 y a GND (como la patita no llega puedes utilizar un cable enrollado a las patas cortas de los dos ledes y meter la otra punta en GND

¿Quieres hacer algo más? Pues toma: 

intermitentes. Necesitas dos luces, la izquierda y la derecha. Haz que cuando tu Android se incline hacia la izquierda se encienda una luz que estará a la izquierda (pero la derecha permanecerá apagada). Si se inclina tu Android hacia la derecha, se encenderá la luz correspondiente y se apagará la otra. Si se queda horizontal, no se encenderá ninguna.



Con TinyWebDB podrías hacer una App que se comunica utilizando Internet. De este modo, un Android podría mandarle a otro que encendiera una luz.

4.8 Ejemplo de aplicación: el cochecito

Introducción El autor de este documento ha preparado un cochecito con un kit de Arduino que incluye el chasis, las ruedas, los motores, un interruptor, un espacio para las pilas y algunos cablecitos. A eso le añadió un Arduino UNO, una controladora L298N, un adaptador de Bluetooth HC-05, unas cuantas pilas y unos pocos cables. En el Arduino se cargó un programa que responde a las siguientes órdenes: 

w para avanzar



a para girar a la izquierda



s para parar



d para girar a la derecha



x para retroceder

Aunque se puede conducir mediante un terminal Bluetooth desde cualquier sistema operativo, vamos a hacer una App que lo controle. Aprovecharemos, además, para aprender a adaptar el aspecto de nuestra App al tamaño y forma de la pantalla del dispositivo Android, como se hace cuando se programan páginas web (responsive design).

El diseño básico Este podría ser el diseño inicial de la aplicación:

Es decir, un botón para cada dirección y uno para parar. Pero tenemos un problema: en diferentes dispositivos no se verá igual. Aunque cada botón lo hayamos hecho redondo y nos pueda quedar muy bien en la pantalla de nuestro entorno de desarrollo, en un móvil pequeño puede que los botones no se vean enteros, o que en una tablet grande los botones queden pequeños y en una esquina de la pantalla, de manera que conducir el cochecito no será igual de divertido y estaremos dando una pobre imagen de nuestros conocimientos. En un momento, la magia se habrá esfumado.

Diseño adaptativo (responsive design) ¿Cómo podemos evitar este problema? Una manera consiste en utilizar una característica que se añadió a Inventor en el verano de 2005: dentro del diseñador, en el componente Screen, busca la característica Sizing y cámbiala de Fixed a Responsive. El resultado no será ideal pero puede ser suficiente. De todos modos, vamos a dedicar el apartado siguiente a mejorar esto.

Sin programación Preparamos un TableArrangement de 3 filas y 3 columnas y nos aseguramos de que la altura y la anchura están en Automatic. De esta manera, el tamaño de la tabla se adaptará automáticamente a lo que tenga dentro. Metemos cada botón donde le corresponde, pero nos encontramos con una sorpresa: por defecto, el tamaño del botón es Automatic, y eso hace que nuestros botones ocupen más o menos espacio según los píxeles que tenga la imagen que hemos escogido. El resultado es que los botones no nos caben en la pantalla (si tienen muchos píxeles) o que se ven bien, si la pantalla es grande. Aquí podemos ver dos botones “iguales” que sólo se diferencian en el número de píxeles:

A partir de la imagen de arriba se obtuvo la de abajo con GIMP reduciendo el número de píxeles. Después, se pusieron como imagen de dos botones con altura y anchura en Automatic. Vamos a hacer otra cosa. Dejamos en Automatic el alto y ancho de la tabla pero en cada botón vamos a poner un 30% de ancho. Con eso vamos a conseguir que del 100% del ancho de la pantalla, cada botón ocupe una tercera parte. Bueno, un poquito menos,

porque la tercera parte sería un 33%, pero queda mejor estéticamente si no lo llenamos del todo. Queremos que cada botón tenga de alto lo mismo que de ancho, porque son botones redondos... pero es imposible. Lo primero que no nos sirve es poner un 30% de alto, porque el alto del dispositivo es diferente del ancho. Eso haría que el botón fuera más alto que ancho o, al girar la pantalla, que fuera más ancho que alto. También podemos probar a poner “Automatic” pero entonces se nos hacen los botones más altos que anchos. Si ponemos “Fill parent...” tenemos lo mismo. Si ponemos una cantidad fija de píxeles no se adaptará la imagen a la pantalla, y, si ponemos un tanto por ciento, la altura dependerá de la altura de la pantalla y no serán redondos. Bueno, puede que en la pantalla del diseñador sí, pero en cuanto probemos la App en varios dispositivos veremos que se nos deforman. Como algo hay que poner, vamos a poner un 20%. Lamentablemente ese tanto por ciento se refiere al tamaño de la pantalla, no de la tabla. Pero, al menos, ya será capaz de adaptarse a pantallas con la misma relación de aspecto que la de App Inventor mientras trabajemos en vertical.

Con eso tendremos un aspecto “decente” para cualquier tamaño de pantalla, mientras esté vertical. En el componente Screen, en el diseñador, hay una propiedad que se llama ScreenOrientation y que, por defecto, vale Unspecified. Eso hace que el usuario pueda decidir si quiere trabajar en vertical o en apaisado. Nosotros podríamos fijar el valor Portrait para asegurarnos de que siempre se utiliza en vertical, pero hay usuarios a los que les molesta no poder girar la pantalla y que los obliguen a trabajar en vertical. El autor de este documento prefiere dejar al usuario final si quiere bloquear el sensor de rotación de su dispositivo y trabajar siempre en vertical, o no bloquearlo, así que yo lo dejaría en “Unspecified”. Aún así, ponerlo en Landscape (apaisado) un momento nos servirá para ver el aspecto que tendrá nuestra App cuando se gire la pantalla.

Con programación Con programación se puede llegar más lejos, naturalmente. Unas pocas matemáticas nos servirán para saber cuál es el ancho que debería tener cada botón a partir del ancho de la pantalla. Un 30% estaría bien. Después calcularíamos cuál es el alto que debería tener. Un 20% estaría bien. Después veríamos cuál de las dos cifras es la más pequeña. Llamemosla DiametroBotón. En el bloque “when Screen1.Initialize” pondríamos: BtnIzq.Width=DiametroBotón BtnIzq.Height=DiametroBotón pero para todos los botones. Así, sí que serían redondos y cabrían bien en la pantalla.

Recibir órdenes de voz Pruébalo si quieres, pero hay un problema: cada vez que querrás que reconozca tu voz tendrás que pulsar sobre la pantalla parar que te escuche, luego procesará la voz y, por último, obedecerá la orden. Eso supone demasiado tiempo porque el cochecito no esperará a tus órdenes. Como no es buena idea utilizar un control de voz para este cochecito, lo dejamos estar.

Recibir órdenes de los botones Aquí está el código de un botón.

¿Sabrás hacer tú el resto?

Recibir órdenes del inclinómetro (fase beta) (ver apartado siguiente) Podemos utilizar el inclinómetro para controlar el giro del coche. En Inventor, se llama OrientationSensor y devuelve tres valores (la traducción al español que han hecho es poco seria, así que hago la mía): 

azimuth, que se traduce como acimut (o azimut), que funciona como una brújula, pues nos indica si el dispositivo está orientado hacia el norte, sur, etc. En esta App no nos es útil



pitch, que mide la inclinación en grados hacia la izquierda o hacia la derecha. Un 0 indica horizontal, un 90 es tan inclinado hacia la izquierda que alcanza la vertical. Un valor negativo indica inclinación hacia la derecha, y el máximo es -90.



roll, que mide la inclinación hacia adelante o hacia atrás. Un 0 indica horizontal, un 90 es tan inclinado hacia adelante que alcanza la vertical. Los valores negativos

indican inclinación hacia atrás, siendo -90 el máximo. Nuestro coche no debe ser hipersensible, así que podemos calcular con arreglo a estos valores: Izquierda: 10 < Roll < 70

(0 es horizontal, 90 es vertical)

Derecha: -70 < Roll < -10

(-90 es vertical)

Adelante: 10 < Pitch < 70

(90 es vertical)

Atrás:

(-90 es vertical)

-70 < Pitch < -10

Si el Roll no está comprendido entre esos valores, no iremos ni a la izquierda ni a la derecha. Si el Pitch no está comprendido entre esos valores, no iremos ni adelante ni atrás. Mirando los dos valores podemos determinar hacia dónde debe ir el coche, o si debe estar parado. Pero atención: si utilizamos el inclinómetro tendremos que fijar la orientación de la pantalla, o el usuario se volverá “loco” porque no parará de girar la imagen conforme vaya conduciendo. En este caso, es recomendable poner Screen1.ScreenOrientation a LandScape en el diseñador.

Mejoras en las que esto trabajando Que no se envíen órdenes mientras no se produzca la conexión. Que si se detecta desconexión se dejen de enviar órdenes. Que recuerde el último dispositivo conectado, y que se intente conectar a él al empezar, o cuando quede desconectado. El inclinómetro: 

está en fase beta



ahora está desactivado por defecto. Para activarlo ha una casilla de verificación (checkbox)



envía muchas órdenes por segundo y eso colapsa la comunicación, además de volver ingobernable el cochecito. Hay que probar algo de esto: 

no es posible hacer que los cambios de posición se detecten cada cierto tiempo con una propiedad del OrientationSensor, porque no existe tal propiedad



con un Clock, que cada 100 ms se habilite el sensor. Y el evento que detecta un cambio de posición, que inhabilite él mismo.



Los parámetros más interesantes del inclinómetro pueden ser roll+pitch o Angle+Magnitude, que estuvimos utilizando en la mariquita para determinar su dirección (Heading). Angle tiene estos valores: (0 derecha, 90 arriba o adelante, 180 izquierda, -90 abajo o atrás). Magnitude vale entre 0 y 1. Podríamos traducir esto a A###M###. Por ejemplo, A000M050 es dirección derecha con una magnitud del 50%.



que Arduino reconozca órdenes del tipo ángulo+magnitud. Esto no está reñido con otras opciones que se han mencionado. Creo que esto sería realmente una buena opción, pues el jugador espera que, a más inclinación, mayor velocidad y

que, manteniendo la inclinación, no varíe la velocidad. No sé si es posible hacer esto, supongo que sí, pero antes deberé intentar recibir datos de Arduino, que me será muy útil para hacer pruebas.

4.9 ¿Qué más puede hacerse con Arduino + Android? Como esto no es un curso de Arduino, no vamos a profundizar más. Pero si te gusta el mundo de Arduino y no sabes si dedicarle más tiempo o no, aquí tienes una relación de cosas que se pueden hacer con la combinación de Arduino + Android, aunque tendrás que hacer un curso de Arduino para sacarle todo el jugo. De todos modos, primero se va a comentar qué cosas existen ya porque tenemos que ser capaces de utilizar lo que han hecho otros, y también de hacer cosas originales.

Cosas que ya están hechas por otros (en Arduino) Arduino BT Terminal Esta App se comunica con nuestro Arduino. Primero emparejamos nuestro Android con el HC-05 (o HC-06) de nuestro Arduino. Después, dispondremos de varios teclados virtuales a elegir, que se pueden personalizar. Por ejemplo, podemos utilizar uno con 9 botones así: Luz delante on adelante Luz delante off Izquierda

Parar

derecha

Luz atrás on atrás Luz atrás off Mediante los menús de la App hacemos que, según el botón que se pulse, se envíe a Arduino un carácter diferente. Por ejemplo, los números del 1 al 9.

Firmata En el entorno de Arduino podemos encontrar Archivo → Ejemplos → Firmata → StandardFirmata. Cargamos eso en nuestro Arduino y, luego, en Android instalamos la App correspondiente. La conexión puede realizarse vía USB, Bluetooth o WiFi (si, previamente, hemos instalado WiFi en Arduino). Por último, en la App, veremos un botón para cada PIN. Podremos poner en ON el PIN 13 con su botón, o cualquier otro PIN, o apagarlo. Eso equivale a hacer un digitalWrite(13, HIGH) o digitalWrite(13, LOW). Podremos poner un valor diferente de HIGH y LOW en los pines PWM y, así, dar más o menos voltaje en ellos. También podremos leer valores que recibamos por los diferentes pines. La utilidad vamos a entenderla con unos ejemplos: 

ponemos un LED en el pin 12. Luego, podemos pulsar el botón del 12 para encenderlo o apagarlo.



Ponemos un motorcito en el pin 11. Luego, podemos controlar su velocidad poniendo diferentes valores en la App.



Conectamos un relé en el pin 10 para controlar una lámpara. Luego, podemos encenderla o apagarla con el botón del pin 10.



conectamos un sensor de temperatura al pin A1 y, dese la App, vemos la temperatura en cada momento

Ideas para hacer tus propios montajes 

los pines pueden utilizarse como entrada, de manera que Arduino reciba datos.



se puede conectar una célula fotoeléctrica de manera que cuando no le llegue luz se active un mecanismo, para montar un sistema de iluminación nocturna automática o una alarma.



con un sensor de humedad se puede detectar cuándo una planta necesita riego



con un sensor de temperatura se puede saber cuándo hay que poner en marcha la calefacción



hay muchos más tipos de sensores, como por ejemplo el de presencia, uno de presión, un detector de metales, ...



con una App el teléfono móvil podría dar la orden a Arduino de poner en marcha la cafetera a las 7 de la mañana, encender las luces o la radio. Arduino podría estar oculto dentro de la pared o detrás de un cuadro y estar alimentado por pilas



manejando el Arduino con pilas podemos montar un cochecito que responda a las órdenes que le lleguen vía Bluetooth



en lugar de un cochecito, se puede montar un robot. La diferencia es que el montaje físico es más complicado, y tendrá más motores



se puede montar un belén, con figuritas móviles y luces, que se vayan moviendo según una secuencia programada

4.11 Raspberry Pi Raspberry Pi es parecido a Arduino, pero diferente. Arduino se programa desde un PC, es muy barato, y no tiene un auténtico sistema operativo instalado, de modo que no tiene sentido que lo utilice nadie que no sepa programar (aunque con Firmata esto puede cambiar). Raspberry Pi es un PC de muy bajo coste que se suele vender con una versión de Linux instalada (o casi instalada, cuya instalación se termina siguiendo el menú que sale en pantalla) y que se puede utilizar para navegar por Internet, reproducir vídeos, programar o manejar hardware de un modo similar a como se hace en Arduino. Raspberry Pi 2 tiene un procesador bastante potente y 1 GB de RAM. Una Raspberry Pi 2 vale entre dos y tres veces más que un Arduino (algo más de 30 €) y se debe conectar a una pantalla, teclado y ratón para manejarlo bien, aunque puede funcionar sin nada de esto y alimentado por pilas. Lo que sí que necesita es la tarjeta miniSD, que normalmente se compra aparte, y que hace las veces de disco duro. Hay una versión barata de Raspberry, la Raspberry Pi Zero, que en diciembre de 2015 es muy difícil de conseguir si no es comprando la revista que la regala. Podría ser una

opción muy interesante por su precio, unos 5$, aunque por otra parte tal vez sea menos potente y tenga menos usos que la original. No se van a poner aquí ejemplos de cómo conectar un Android con una Raspberry para no hacer excesivamente extenso este documento.

4.15 Windows IOT Windows 10 está preparado para comunicarse con Arduino y Raspberry Pi, además de otras tarjetas similares. No vamos a extendernos mucho porque... ¡esto es un curso de Android, no de Arduino ni de Windows! Pero, vaya, no nos hará daño aprender un poquito más. Windows 10 + Arduino puede hacer lo siguiente: 

App “Windows Remote Arduino Experiencie” es capaz de manejar un Arduino sin programación. En el IDE Arduino cargamos el ejemplo Firmata / StandardFirmata.ino. Luego, ponemos la App en marcha y conectamos vía USB (con Bluetooth y un HC-05 no he logrado conectar, y vía IP no lo he intentado aún). Por último, la App nos permite activar o desactivar los pines digitales, leer los valores que nos llegan, etc.



App “Windows Virtual Shields for Arduino” permite manejar un dispositivo Windows 10 desde una tarjeta Arduino, para manejar sus sensores. Así, estamos dotando a un Arduino de pantalla táctil, cámara, reconocimiento de voz con Cortana, … La conexión se puede realizar vía bluetooth, USB o WiFi.

AVISO: esto no es más que un borrador. Próximamente se revisará este apartado para mejorarlo o eliminarlo. IMPORTANTE: ABRIR EL EJEMPLO “StandardFirmata.ino”, y leer el comentario que hay dentro. Para que funcione firmata antes hay que cargar el software. Además, se hace en dos o más pasos, así que mira lo que pone aquí: https://github.com/rwaldron/johnnyfive/wiki/Getting-Started-with-Johnny-Five-and-HC-05-Bluetooth-Serial-Port-Module (Johnny Five es el nombre de una versión de Firmata). Probablemente será posible manejar Arduino S4A y Firmata, pero eso queda totalmente fuera de este curso de Android. Los dispositivos Android también se pueden programar y controlar desde Windows 10. Lo más sencillo es hacerlo con el IDE de Arduino que hemos visto aquí, aunque también se puede hacer desde VisualStudio. Y se pueden manejar con la App “oficial” para estas cosas, o utilizar un terminal Bluetooth. http://ms-iot.github.io/content/en-US/GetStarted.htm tiene un apartado para Arduino. De ahí se salta a http://ms-iot.github.io/content/en-US/win10/Lightning.htm. Aquí hay un ejemplo de lo parecido que puede ser programar una Raspberry Pi con VisualStudio, a programar un Arduino: http://ms-iot.github.io/content/enUS/win10/samples/arduino-wiring/HelloBlinky.htm.

Capítulo 5. Y después, ¿qué? Ya sabes qué puede hacerse con App Inventor y cómo combinarlo con otras plataformas como Arduino, pero ¿puede hacerse cualquier tipo de App para móviles con App Inventor? Pues no. App Inventor es muy fácil de utilizar y permite hacer muchísimas cosas, pero se queda corto cuando queremos hacer una gran aplicación. En cuanto empieza a crecer el código, la pantalla se nos llena y no es fácil encontrar las cosas, por muy organizados que queramos ser. No tiene CTRL-Z (¡por favor, que lo pongan ya!) y la mochila es lo único que permite pasar código de una App a otra, pero no es posible escribir un procedimiento y utilizarlo, sin reescribirlo, en muchas Apps de manera que, si un día se puede mejorar, todas esas Apps se beneficien sin tener que ir buscando, como ahora, todas aquellas en las que se ha utilizado ese procedimiento para cambiarlo por la nueva versión. Tampoco es posible tener a varias personas trabajar en el mismo proyecto. En este capítulo se va a hacer una introducción a Android Studio porque puede ser el siguiente salto en alguien que vaya a dedicarse en serio a programar teléfonos o tablets. Pero la verdad es que es un capítulo en versión beta... ¡lo siento!

Android Studio y Java Java es un lenguaje de programación realmente potente, pero empezar con él puede resultar duro. Una forma de empezar es utilizar el “puente” que nos tienden los que han hecho los autores de App Inventor: http://www.appinventor.org/content/javabridge/introduction. Pero no es un camino de rosas y está aún sin pulir. En este apartado se explica cómo empezar y cómo hacer unas pocas aplicaciones que funcionan. Está pensado para quienes ya saben manejar Inventor. Independientemente del sistema operativo, hay que tener en cuenta que el entorno de desarrollo de Android Studio ocupa bastante espacio en disco y, para funcionar con cierta fluidez, necesita al menos un equipo con un procesador Intel Core 2 y 2 GB RAM. Como veremos a continuación, podremos programar un dispositivo Android conectándolo vía USB, pero no será nada fácil utilizar un emulador. Este es un mal menor porque, como ya hemos visto en muchas actividades, un emulador no dispone de sensores como el giroscopio o el acelerómetro.

Windows Android Studio funciona mejor, de momento, en Windows que en LliureX. La forma de trabajar viene a ser la misma, pero en LliureX es probable que nos encontremos con problemas inesperados difíciles de superar. Los pasos a seguir son los siguientes: 

instalar Android Studio. Basta con descargarse http://developer.android.com/intl/es/sdk/index.html.

exe

página



File → New → Android Application Project, next, nombre de la App BotonRojo, versión API mínima (2.2 Froyo), next, elegir Blank Activity, Finish. Ya tenemos el

esqueleto de una aplicación mínima que lo único que tendrá son 3 botones. 

Ejecutar (Run → Run). Aquí tienes dos posibilidades: utilizar un emulador (se preparan con el AVD Manager, gestor de Dispositivos Virtuales Android), que a mí no me funcionó, y conectar vía USB un dispositivo Android, que a mí sí que me funcionó con mi Nexus 7 y también con mi teléfono LG (previamente, habilitar en el dispositivo Android la depuración USB, pulsando 7 veces sobre Acerca De → Nº compilación;luego, estando el ordenador desconectado, hay que activar las herramientas de desarrollador; por último, se conecta el ordenador y se autoriza desde la tableta/móvil).



desde Android Studio, buscar un desplegable por arriba a la izquierda donde pone Android y pasar a Project. Entrar entonces a la carpeta "app" y, de ahí, pasar a "libs". Ahí dentro es donde hay que descargar el archivo jar que hay en http://3nportal.com/AIBridge/AIBridge.jar. Se supone que, desde Android Studio, haces clic con el botón derecho sobre ese archivo y eliges "Add as Library", aunque a mí no me salía esa opción y no hizo falta para que todo funcionara.



Luego te descargas http://www.appinventor.org/javaBridge/clickRed/Screen1.java, que va a servir para sustituir al MainActivity.java que está ahora en la aplicación nueva recién creada, y lo metes en AndroidStudioProjects/BotonRojo/app/src/main/java/com/example/pedro/botonrojo.



Abres el Screen1.java y modificas la primera línea, donde está el "package", porque debe quedar exactamente igual que la primera línea de MainActivity.java, así que cópiatela de allí.



Modifica por último AndroidStudioProjects/BotonRojo/app/src/main/AndroidManifest.xml y, donde pone MainActivity", pon "Screen1".



Ejecuta tu aplicación pulsando el triángulo verde. Seguramente te dará un error y deberás corregir esto (simplemente es escribir BotónRojo donde antes no había nada, mira donde está el cursor):



Vuelves a ejecutar y en tu dispositivo Android tendrás ya ese botón rojo.

Todo esto se ha hecho con Windows 8.1; en teoría con otras versiones de Windows más modernas todo debe funcionar igual.

LliureX (o Ubuntu)

Instalación y primera aplicación Hay que proceder de manera similar a como se hace en Windows:

   



desde developer.android.com hay que entrar en Download y descargar el Android Studio, que es un ZIP que hay que descomprimir donde lo vayamos a ejecutar entrar entonces en android-studio/bin/ y ejecutar studio.sh. Se puede añadir esa ruta al PATH o crear un enlace y ponerlo en el escritorio. En la primera instalación, el asistente nos ayudará a instalar el SDK, que es necesario. Ahora vamos ya a proceder a preparar un proyecto. Veamos cómo hacerlo desde el “Quick Start” (si te has pasado el Quick Start, lee más adelante):  Start a new Android Studio project. A esta nueva aplicación la llamamos “BotonRojo”.  (si en algún momento no podemos ver el botón Next, podemos utilizar la tecla Windows y, sin soltarla, pinchar y arrastrar con el ratón hacia arriba en la ventana en la que estemos trabajando)  Dejamos seleccionado “phone and tablet” pero cambiamos la API mínima a “API 8: Android 2.2 (Froyo)” (para facilitar la ejecución en un dispositivo antiguo).  “Blank Activity”, que es la que sale por defecto, nos vale  Finish. En este momento se construirá nuestra aplicación, que será bastante inútil, pero la modificaremos para que haga lo que quiera. Ahora mismo se trata de una aplicación que lo único que tendrá son 3 botones. Sin el “Quick Start” es parecido: File → New → Android Application Project, next, versión API mínima (2.2 Froyo), next, elegir Blank Activity, Finish. Ya tenemos el esqueleto de una aplicación mínima que lo único que tendrá son 3 botones.

Si, una vez has terminado un proyecto, lo cambias de carpeta, luego no podrás ejecutarlo, de modo que hay que intentar ponerlo desde el principio en la carpeta definitiva.

¿Qué puede salir mal? Tal vez no tengas configurado aún Java. Si es así, hay que configurar el LliureX para que se instale el JDK, mejor cuanto más moderno. Si después de instalarlo, no te arranca studio.sh, reinicia el equipo y vuelve a probar

Probar la aplicación con un dispositivo Android Funciona, pero requiere un poco de paciencia. En LliureX, cuando quieres entrar en el Android Device Monitor, da el error “Unable to detect adb version, adb output: /home/hamid/Android/Sdk/platform-tools/adb: 1: /home/hamid/Android/Sdk/platform-tools/adb: Syntax error: ")" unexpected” y eso impide que se pueda trabajar con un dispositivo Android conectado vía USB con depuración. El problema está en la última versión de las Platform Tools, la 23.1, que tiene un error. La solución temporal, hasta que saquen la versión siguiente, consiste en pasar a una versión anterior de las “Platform Tools” descargándolas de https://dlssl.google.com/android/repository/platform-tools_r23.0.1-linux.zip. Una vez descargado este archivo, tenemos que entrar en $HOME/Android/Sdk, borrar o cambiar de nombre la carpeta “platform-tools” y sustituirla por la que hay dentro del zip descargado. Luego ya se puede ejecutar el programa (Run → Run, o pulsar sobre el triangulito verde) y arrancará sin errores el Android Device Monitor, detectando el dispositivo Android conectado. En ese momento, en el dispositivo hay que permitir que el ordenador lo

“manipule” y listo. Bueno… puede tardar un poco el Android Studio en preparar el ejecutable.

Probar la aplicación con un emulador Esta opción no he conseguido todavía que me funcione. Al ir a querer utilizar un emulador creado con el AVD Manager (Android Virtual Device) no funciona ninguno. Es como si estuvieran preparados para funcionar en una máquina de 64 bits y no hay manera de que eso funcione en una máquina de 32 bits. Se puede evitar este problema arrancando así el studio.sh: export ANDROID_EMULATOR_FORCE_32BIT=true ; bin/studio.sh

o añadiendo esa instrucción export al $HOME/.profile. Como no hay ningún dispositivo virtual listo para utilizar, tendremos que generar uno. Ahora tendremos dos grandes opciones: 

instalar un emulador que no requiera x86, es decir, cualquiera de los arm. A mí el emulador me ocupó 1 GB en el disco duro y no se llegó a cargar. Cada vez que lo intenté se salió sin que se llegara a ver mi App dentro funcionando.



instalar el quemu-kvm (puede hacerse con Synaptics). Luego se ejecuta con kvm y… puede que tu CPU soporte las extensiones KVM y todo vaya bien, pero en mi caso no fue así.

¿Y con LliureX de 64 bits? Con LliureX de 64 bits no me fue posible trabajar. Da muchos errores durante la instalación. Conforme superas uno, te sale otro.

Ejercicios Recomendados Una vez salvados los problemas de instalación, se puede proceder a realizar los siguientes ejercicios. Están comprobados en Windows. Ejercicio 1. El botón rojo.

Nos lo han dado todo hecho, pero debemos fijarnos en que el código fuente del programa está dentro de app/src/main/java/com/example/pedro/redclick, como podemos ver en la parte superior de Android Studio:

Además, en la figura anterior, se puede ver que estoy editando el archivo Screen1.java. Pues bien, en ese archivo tenemos que fijarnos en dos cosas (con CTRL-F podemos buscar lo que queramos): 

en cierto sitio pone: redButton.Text("TURN RED");

redButton.BackgroundColor(COLOR_GREEN); 

casi al final pone: public void RedButtonClick() { redButton.BackgroundColor(COLOR_RED); }

Ejercicio 2. El botón que cuenta.

Este segundo ejercicio consiste en hacer que el botón muestre un número que va aumentando cada vez que lo pulsamos. Como ejercicio introductorio sin haber explicado nada de Java me parece excesivo. Sin embargo, para los que ya conocemos otros lenguajes similares, como C++, no debería ser demasiado difícil. Una posible solución consiste en poner un 0 en el texto del botón que vamos a usar de contador, e irlo incrementando con cada pulsación: ... // redButton.Text("TURN RED"); redButton.Text("0"); redButton.BackgroundColor(COLOR_GREEN); ... public void RedButtonClick() { int numLLamadas = Integer.parseInt(redButton.Text()); redButton.BackgroundColor(COLOR_RED); redButton.Text(String.valueOf(++numLLamadas)); } Una solución para usuarios más avanzados consiste en poner lo que queramos en el botón, y llevar la cuenta en una variable estática. En Java esa variable hay que declararla en la clase, no se puede hacer dentro de la función, de modo que quedaría así: ... private Button redButton; private static int numLLamadas = 0; ... redButton.Text("PULSA ESTE BOTÓN VERDE Y SE VOLVERÁ ROJO"); redButton.BackgroundColor(COLOR_GREEN); ... public void RedButtonClick() { redButton.BackgroundColor(COLOR_RED); redButton.Text(String.valueOf(++numLLamadas)); }

Generar el apk

Dentro de Android Studio es posible probar la aplicación sin generar el apk, igual que en App Inventor. Todavía no sé cómo se genera un apk. Dicen que se genera sólo y se queda dentro de "bin". También que se puede generar con Build --> generate signe apk

nexo I. Cómo Dar de alta un sitio web para TinyWebDB

Aviso: si has conseguido que te funcione y un buen día deja de funcionar, y reinstalando tampoco logras que vuelva a ir bien, prueba a lanzarlo desde otro usuario en el mismo ordenador. Recuerda también que el arranque del GoogleAppEngine es lento. En http://appinventorapi.com/program-an-api-python/ se explica cómo hacer esto, pero lo hacen en inglés y hay algún pequeño error. Vamos a ver en castellano cómo se hace. Las instrucciones están preparadas para Windows, y se ha comprobado que funcionan. Seguiremos estos pasos: 1. nos descargamos de https://developers.google.com/appengine/downloads? hl=es#Google_App_Engine_SDK_for_Python el “Google App engine SDK for Python”. 2. Al ir a instalarlo nos dirá que no tenemos Python instalado y nos permitirá, pulsando un botón, ir a la página web de descargar. Hay que instalar la versión 2.7 de Python, no una más moderna (3.x), porque la 2.7 es compatible con Appinventor pero las posteriores no. 3. desde https://sites.google.com/site/appinventor/sample-tinywebdbservices/appinventordb.zip?attredirects=0&d=1 nos descargaremos el archivo appinventordb.zip. 4. el contenido de appinventordb.zip lo copiaremos a c:\python27\appinventordb. Podríamos descargarlo en otra carpeta, pero sólo funcionará si en el camino no aparece ningún acento, y tampoco conviene que aparezcan espacios en blanco, nombres de carpeta de más de 8 caracteres, … vamos, que mejor ponerlo donde he dicho. 5. En el GoogleAppengineLauncher (el programa que te habías descargado en el punto 1), entra en File → Add Existing Application. Introduce el camino c:\python27 (donde has descomprimido appinventordb.zip). 6. Pulsa el botón Run. 7. Pulsa Dashboard. Esto te llevará a una dirección web en la que tendrás que identificar. 8. Pulsa sobre “Create an application” o “crear una aplicación”. Tendrás que introducir una identificación, que será el nombre de tu base de datos web. Por ejemplo, “situaciongps”. Si introduces un valor válido y que no haya sido ya utilizado por otra persona, se creará en ese momento una base de datos vacía para tí. 9. En tu ordenador, abre con el Bloc de Notas el archivo c:\python27\appinventordb\app.yaml. En el menú formato, desactiva la opción “WordWrap”, aunque el resultado sea poco legible. Tienes que modificar la primera línea para poner el nombre de tu base de datos, como en este ejemplo (sólo se ha modificado el principio, donde pone situaciongps:

10. Guarde lo del bloc de notas y ciérralo. 11. En el GoogleAppEngineLauncher pulsa Deploy y sigue los pasos que te salgan en pantalla. Si todo ha ido bien podrás acceder a tu base de datos. Desde internet, lo harás entrando en http://situaciongps.appspot.com/getvalue (cambiando situaciongps por el nombre de tu base de datos). Desde una app, sólo tendrás que cambiar la URL de tu TinyWebDB1 por la de tu base de datos. La interfaz web será así:

Como puedes ver, te permite consultar un valor (Get value), guardar un valor (Store a value) y ver todo el contenido de tu base de datos. Cada par “clave”, “valor” viene acompañado de la fecha y hora en que se guardó, y se proporciona un botón “Delete” que sirve para borrar, cosa que no puede hacerse desde la app.

ibliografía y otras cosillas sobre este documento

Cambios interesantes que se han producido en App Inventor Cuando entramos en el entorno nos sale un mensaje informándonos de la versión que estamos utilizando:

La mayoría de la gente no lee este cuadro, ni es necesario que lo haga, pero si tenemos unos conocimientos de App Inventor un poquito avanzados, como cualquiera que haya realizado el 80% de las Apps de este curso de programación, podemos encontrar información útil para mejorar nuestros trabajos, accediendo a las notas de la versión (Release Notes). En esas notas no sólo se habla de los errores que se han reparado sino también de nuevas características y de ampliaciones y adaptaciones en la documentación. Aquí quiero destacar algunas informaciones extraídas de ese enlace: 

http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html nos explica cómo hacer una App que se adapte a diferentes tamaños de pantalla. Nuestro entorno de desarrollo se ha visto mejorado con nuevas opciones, como son los porcentajes. Antes sólo se podía utilizar “fill parent” para adaptar el tamaño de un componente visible, y era útil, pero insuficiente, porque podíamos, por ejemplo, adaptarnos al ancho de la pantalla, pero teníamos que poner una cantidad fija de píxeles para la altura. Si alguien no entiende de qué estoy hablando, que pruebe la aplicación del bote de pintura en un dispositivo de 4 o 5 pulgadas y que lo mire luego en uno de 9 pulgadas o más.



http://ai2.appinventor.mit.edu/reference/other/backpack.html nos explica el funcionamiento de la mochila (que también apareció recientemente en Scratch). Sirve para aprovechar código de una App para meterlo en otra.



http://ai2.appinventor.mit.edu/reference/other/usingImages.html nos explica un par de cosas sobre imágenes. A lo largo de este curso se ha explicado la importancia

de no utilizar imágenes de gran resolución en dispositivos pequeños, y también se ha intentado explicar cómo dimensionar las imágenes para diferentes tamaños de pantalla. Aquí hay un buen resumen.

¿Problemas con el GPS? Es posible que no funcione el GPS en una de tus apps. Si es la primera que haces, arranca Google Maps primero, porque así sabrás si tienes tu Android preparado para la geolocalización. Si una app antes te localizaba la posición y ahora no, reinicia tu Android y vuelve a probar.

Gestión de la voz. TTS (Text To Speech) Los dispositivos Android son capaces de reconocer la voz humana y también de leer un texto.

Leer un texto (Text To Speech) El componente TextToSpeech de App Inventor convierte un texto escrito en voz, es decir, hacemos que el dispositivo Android lea en voz alta. La pronunciación depende del país y del idioma, pues no pronuncia igual un inglés que un americano, o un español y un americano. Android viene con una voz femenina que se puede cambiar. Así, podemos poner una voz de hombre, o podemos instalar una voz de una inglesa para que nos lea textos en inglés. Si entramos en Google Play y buscamos TTS encontraremos esas voces. En realidad, encontraremos motores de voz e idiomas. Por defecto, tenemos el motor de voz de Google y una voz. Las voces de pago nos pueden costar 4 € cada una, pero antes de descargarlas se nos avisa del precio. Se accede a las voces desde Ajustes → Idioma y entrada de texto → Voz/Texto para pronunciar. Ahí salen las diferentes opciones. Siempre sale “Síntesis de Google” pero, dependiendo de lo que nos hayamos instalado, pueden salir otras más:

Si entramos en la ruedecita correspondiente a “Motor de texto de voz de Samsung”, o en la de “Síntesis de Google” o en “Acapela TTS”, veremos que es posible descargarnos voces masculinas o femeninas para diferentes idiomas. “Acapela TTS” sólo tiene voces de pago. Artículos relacionados: android.html.

http://www.elandroidelibre.com/2016/02/nuevas-voces-de-

Reconocimiento de voz Disponemos también del componente SpeechRecognizer. Hay teclados que tienen un botón para dictar lo que queremos que escriba Android. Por ejemplo, puedes estar en WhatsApp y contestar hablando, en lugar de teclear. Para activar este botón hay que entrar en ajustes → idioma y entrada de texto. Luego eligfes el teclado y buscas la opción correspondiente: 

en Swiftkey, escritura → voz y otras entradas → entrada de voz



en un Samsung S6, teclado Samsung → … (no existe esa opción)



en un LG, teclado LG / tecla de escritura por voz (dependiendo del modelo y versión de Android, puede que salga o que no salga esta opción).

Distribución de componentes en la pantalla Hay componentes que tienen las propiedades Width (ancho) y Height (alto). En Width tenemos Automatic, Fill Parent y un tamaño fijo en píxeles. El tamaño Fill Parent estira la imagen para que ocupe todo el ancho de la pantalla. Hay que tener en cuenta que para estirar la imagen es posible que la deforme, haciéndola más ancha o más estrecha que la original, si no se modifica convenientemente la altura. Vamos a ver cómo funciona esto con la aplicación de la bola 8, donde tenemos los siguientes componentes:

Se trata de una pantalla (como siempre), un botón que tiene la imagen de la bola de billar con su 8 encima, y un VerticalArrangement, que viene a ser una matriz de una sola columna donde todos los componentes que pondremos quedarán uno debajo del otro.

Vamos a partir de la figura siguiente, donde Screen1 tiene AlignHorizontal en Left:

Lo que deseamos es centrar la bola en la pantalla. Podemos pensar que si la bola es tan ancha como la pantalla se verá centrada. Pero si cambiamos su ancho (Width) a Fill Parent, al mostrar la bola en el dispositivo la bola se hará más ancha, quedará deformada. También podemos añadir un componente HorizontalArrangement con la propiedad Width a Fill Parent y AlignHorizontal a Center. Después, ponemos el Button1 dentro y listo. Pero hay un modo más fácil. No añadimos HorizontalArrangement pero cambiamos la propiedad AlignHorizontal de Screen1 a Center. Con esto quedará centrada la imagen de la bola, sin deformarla, y también los demás componentes.

Múltiples pantallas En el diseñador tenemos “Add Screen” a la derecha de “Checkpoint”. Así podemos añadir pantallas. Luego, en el editor de bloques, utilizaremos “Open Another Screen”.

Trucos para las actividades propuestas Bola mágica, “piedra, papel, tijera”, dados, ... Hay una propuesta sobre la bola mágica para que sea capaz de cambiar la imagen de la bola. Lo mismo hace falta en otras propuestas. Para lograrlo, mirando sobre esta imagen se te abrirán los ojos:

Como puedes ver, podemos utilizar el bloque set Button1.Image to para cambia la imagen que aparece sobre el botón Button1. El valor que le ponemos es el nombre de la imagen que previamente hemos subido con el diseñador de la app. Las imágenes originales tienen distintas extensiones (jpg y jpeg) y, lo que es peor, diferentes tamaños. Además, sus nombres no nos dicen nada. Lo ideal es cambiar los nombres por bola8_arriba.jpg y bola8_abajo.jpg, además de cambiar con GIMP o Photoshop la imagen de la bola8_abajo.jpg para que tenga exactamente el mismo tamaño que la bola_arriba.jpg. Lo que pasa es que queremos que aparezca una u otra imagen según las circunstancias. La verdad es que, en el caso de la bola mágica, el comportamiento debería ser este: 1. Empieza la app. Se ve la bola con el 8 encima. 2. El usuario agita. La bola “se gira”, mostrando la otra imagen, y hace su predicción. 3. La bola ignora todo lo que hace el usuario, agitar o lo que sea, hasta que el usuario pulsa sobre la bola. 4. Cuando el usuario pulsa sobre la bola, se vuelve al momento inicial, es decir, aparece la imagen de la bola con el 8 encima y está lista para hacer otra predicción. Si no hacemos esta corrección, al agitar la bola un poco más de la cuenta empieza a hacer predicciones sin parar. Para poder programar este nuevo comportamiento necesitaremos utilizar un bloque ifelse, que está en Built-In/Control: 1. Agitar. a) Si al agitar el usuario la bola, la imagen es la del 8 se realiza la predicción y se cambia la imagen de la bola a la del triángulo.

b) En caso contrario, no se hace nada. 2. Clic sobre Button1. a) Si al hacer clic el usuario sobre la bola, la imagen es la del 8, no se hace nada. b) En caso contrario, se cambia la imagen de la bola a la del 8.

Cálculo de la distancia entre dos puntos (mochila)

Introducción ¿Quieres saber cuál es la distancia en línea recta entre dos puntos del mapa? Eso puede tener múltiples usos en Apps de geolocalización. Con Google Maps puedes conocer la distancia entre dos puntos teniendo en cuenta carreteras y caminos, pero en un juego en el que tienes que ir hacia un objetivo en campo abierto, querrás saber cuál es la distancia en línea recta porque eso te permitirá orientarte rápidamente.

La teoría En matemáticas, cuando queremos calcular la distancia entre dos puntos, disponemos de las coordenadas de ambos. Si las del primero son (x 1,y1) y las del segundo (x2,y2) la distancia se calcula así:

√( x1−x2)2 +( y1− y2)2 Si tenemos en cuenta también la altura, cada punto tiene tres coordenadas, así que tendríamos (x1,y1),z1) y (x2,y2,z2) y la fórmula sería:

√( x1−x2)2 +( y1− y2)2+(z1−z2)2 Genial, pero resulta que la latitud, la longitud y la altitud que nos da un sistema de posicionamiento GPS no se corresponde con un sistema de coordenadas como estas, sino que se trata de coordenadas geográficas, y son distancias angulares que se miden en grados, minutos y segundos. Los cálculos de la distancia se basan en la fórmula del Haversine.

La práctica Pero vamos a dejar ya la teoría y veamos la fórmula de la distancia entre dos puntos,

en millas: ¿Sabrías cambiar esa fórmula para que te diera la distancia en metros?

Trabajo a Realizar (reutilización de bloques) Deberías hacer esto: 

Empieza un proyecto nuevo y llámalo DistanciaEntrePuntos



Ponle estos componentes:



Fíjate en que los nombres importantes son Latitud1, Longitud1, Latitud2, Longitud2, Distancia



Los componentes Latitud1, Longitud1, Latitud2, Longitud2 son de tipo TextBox por si queremos que el usuario pruebe otras coordenadas, por ejemplo copiándolas y pegándolas de Google Maps. Conviene marcar la casilla NumbersOnly



En los bloques copia la figura anterior, una vez modificada para que calcule en kilómetros, pero llama a tu procedimiento DistanciaEntrePuntos (igual que el proyecto)



añade un bloque “when Screen1.Initialize” y prueba el procedimiento que has hecho

Cómo reutilizar (la mochila) Una vez comprobado que funciona, ya puedes utilizar este mismo procedimiento en otros proyectos. Para lograrlo, debes entrar en tu proyecto DistanciaEntrePuntos y copiar a la mochila el procedimiento. Esto se hace poniendo el ratón encima, clic con el botón derecho del ratón, Add to Backpack:

Acto seguido, debes entrar en el proyecto en el que te hace falta ese procedimiento (por ejemplo, 10. ¿Dónde estáis?, en la página 100), abrir la mochila (haciendo clic sobre ella) y sacar de allí el procedimiento. Biografía: http://www.appinventor.org/bookChapters/chapter21.pdf.

Bibliografía Bibliografía utilizada para realizar este curso PCACTUAL 258 página 102. http://appinventor.mit.edu/explore/content/tutorials.html demostraciones http://examples.oreilly.com/0636920016632/ material utilizado en las apps de ejemplo del MIT (imágenes y sonidos) http://www.appinventor.org/projects página con abundante documentación en inglés, que incluye los PDF en inglés de las apps del MIT que hemos visto http://appinventor.mit.edu/explore/content/reference-documentation.html es la guía de referencia http://appinventorapi.com/program-an-api-python/ se ha utilizado para el “Anexo I. Cómo Dar de alta un sitio web para TinyWebDB”.

Bibliografía recomendada para seguir aprendiendo http://ai2.appinventor.mit.edu/#6488335036186624 está lleno de aplicaciones, puede que con código fuente y todo https://sites.google.com/site/appinventormegusta/home es "App Inventor en Español" Create Your Own Android Apps.pdf es el libro que incluye muchas de las aplicaciones vistas aquí y ampliación de conocimientos. En la primera parte se ven las aplicaciones de ejemplo, y, en la segunda, la ampliación de información sobre cada tema. http://puravidaapps.com/ es una página web muy útil y muy bien estructurada. Sirve para aprender cosas nuevas, para encontrar la manera de hacer algo, … En el apartado “snippets” encontramos fragmentos de código útiles (grabar lienzo de dibujo, enviar un mensaje de WhatsApp, manejar la brújula, … muchísimas pequeñas cosas). En “Tutorials” encontramos Apps enteras que hacen de todo (manejar una base de datos SQLite, interactuar con código jQuery para generar un QR, aprovechar hammer.js o chart.js desde App Inventor, crear un PDF. En “Extensions” vemos que hay extensiones que permiten hacer cosas que, tal vez, algún día estarán integradas en App Inventor, y que ya las podemos utilizar (como si de un polyfill se tratara).

El futuro de App Inventor ¿Qué se está cociendo? ¿Qué nuevos componentes habrá en el futuro? El foro de nuestra herramienta de desarrollo preferida está que arde. El apartado https://groups.google.com/forum/#!categories/mitappinventortest/app-inventor-extensions

contiene sugerencias de usuarios que piden, piden y vuelven a pedir que se incluyan nuevas características. Un ejemplo es https://puravidaapps.com/clipboard.php, donde se pide que sea posible manejar el portapapeles. Imagínate que haces una App que reconoce lo que se está diciendo y que una de las cosas que puede hacer es copiar un texto reconocido en el portapapeles para que se pueda pegar en otra App, como por ejemplo WhatsApp.

Alternativas a App Inventor (programación de móviles) La lista de alternativas es amplísima, pero para empezar con Android, seguramente, no hay nada mejor que App Inventor. Su principal limitación es que sólo sirve para Android. Veamos unas pocas alternativas: 

http://www.theappbuilder.com/ ofrece una interfaz sin código



AppCelerator permite desarrollar aplicaciones nativas para móviles basándonos en JavaScript.



JavaScript con jQuery.js o, mejor, zepto.js es un lenguaje de programación que permite hacer Apps que se ejecutan en el entorno del navegador. Con zepto.js el programador cuenta con unas funciones que le permiten reconocer los gestos del usuario sobre una pantalla táctil, y el resultado sirve para cualquier sistema operativo, no sólo Android. Pero no es un entorno sencillo para alguien que empieza a programar. Eso sí, después de aprender a manejar App Inventor cualquiera estará mucho mejor preparado para aprender JavaScript. Y puede encontrar herramientas para desarrollar en cualquier sistema operativo. Además, en puravidaapps explican cómo combinar el uso de App Inventor con JavaScript.



Android Studio. Se ha presentado aquí no como una alternativa a Inventor sino más bien como una continuación. En realidad se trata de una herramienta profesional que requiere de un hardware medianamente potente.



http://creatusapps.net/ sirve para hacer apps para Android, iPhone y WebApps pero no es más que un montón de plantillas, no se puede programar y no deja mucho espacio a la creatividad

En http://www.elandroidelibre.com/2015/10/los-mejores-frameworks-paradesarrolladores-android.html hay un artículo sobre este tema.