Curso de Programacion de Android

Curso de
Programación de
Android
AUTOR: PEDRO FELIP BELENGUER

Primera Versión: 14sep2012
Ultima revisión: 19dic16
impresión o Exportación a PDF : 19dic16

Curso de Programación de Android
Índice de contenido
Introducción______________________________________________________________________5
¿A partir de qué edad se puede programar con App Inventor?_____________________________6
¿Por qué en inglés si se podría hacer en español?______________________________________6
Ahora, también en GitHub________________________________________________________7
Capítulo 1. Preparación del entorno. La primera aplicación con Android______________________8
1. Instalación de las herramientas___________________________________________________8
1.1 Conectar un dispositivo Android con AI Companion vía WiFi (método recomendado)____9
1.2 Conectar Android vía USB sólo para transferir archivos (método recomendado para
utilizar en clase)_____________________________________________________________10
1.3 Utilización de Dropbox, Google Drive o OneDrive para instalar Apps en Android______12
1.4 Conectar un dispositivo Android vía USB para depuración (método desaconsejado en
clase, válido para casa)________________________________________________________12
1.5 Instalar y utilizar el emulador (con pc medianamente potente) (Válido en el aula pero sólo
para ciertas Apps)____________________________________________________________13
1.5.1 La manera “normal” de instalar el emulador (requiere privilegios de administrador)13
1.5.2 La otra manera de utilizar el emulador (válida para clientes ligeros).........................14
1.6 Trabajar sin conexión (recomendado para utilizar en clase)________________________15
2. El panel de diseño____________________________________________________________15
3. Tu primera pantalla___________________________________________________________18
4. Elementos no visibles_________________________________________________________20
5. El editor de bloques__________________________________________________________21
6. Probar la aplicación__________________________________________________________23
6.1 Utilizar el emulador (si trabajas en Linux y no tienes un dispositivo Android)_________23
6.2 Conecta el teléfono móvil o la tableta Android__________________________________23
7. Empaqueta tu App____________________________________________________________24
10. Publícala en Google Play Store________________________________________________25
11. Actividades propuestas_______________________________________________________25
Capítulo 2. Aplicaciones básicas del MIT______________________________________________27
1. La bola 8___________________________________________________________________27
2. El bote de pintura____________________________________________________________34
3. Machacar Topos (Whac-A-Mole)________________________________________________46
4. Juego de disparos (Arcade)_____________________________________________________57
5. Si tecleas no conduzcas (Texting, TextBox, TinyDB, GPS)____________________________66
6. La Mariquita________________________________________________________________75
Más mariquita______________________________________________________________89
7. Trabajo Libre________________________________________________________________91
8. Mapa turístico de París (o de donde tú quieras)_____________________________________91
9. ¿Donde está mi coche?________________________________________________________99
10. ¿Dónde estáis?____________________________________________________________105
Capítulo 3. Otras Apps___________________________________________________________122
Introducción_________________________________________________________________122
3.1 Repite todo lo que tú dices___________________________________________________122
3.2 El Ahorcado______________________________________________________________122
© Pedro Felip Belenguer  2

3.3 Pong____________________________________________________________________136
Capítulo 4. El Internet de las cosas__________________________________________________137
4.1 Introducción a Arduino______________________________________________________138
4.2 Arduino: control de una pequeña luz (LED)______________________________________143
4.3 Arduino: control de un motor eléctrico a pilas____________________________________146
4.4 Arduino: control de un motor potente con relés___________________________________149
4.5 Arduino: control de una lámpara de 220 V_______________________________________157
Libre Arduino________________________________________________________________163
4.6 Arduino + Android: control por Bluetooth desde Android___________________________164
4.7 Arduino + Android: control por voz____________________________________________171
4.8 Ejemplo de aplicación: el cochecito____________________________________________172
4.9 ¿Qué más puede hacerse con Arduino + Android?_________________________________178
4.11 Raspberry Pi_____________________________________________________________179
4.15 Windows IOT____________________________________________________________180
Capítulo 5. mBot________________________________________________________________182
Introducción_________________________________________________________________182
APPM01. Instalación de la extensión (movimientos básicos)___________________________184
APPM02. Sonido según la distancia (sonido y distancia)______________________________188
APPM03. Avanzar sin chocar (led)________________________________________________191
APPM04. Más música_________________________________________________________193
APPM11. Seguidor de línea_____________________________________________________195
APPM12. Seguidor de línea blanca (sin terminar)____________________________________203
APPM15. Luchador de sumo (sin terminar)_________________________________________204
Capítulo 6. Y después, ¿qué?_______________________________________________________207
Android Studio y Java__________________________________________________________207
Windows__________________________________________________________________208
LliureX (o Ubuntu)_________________________________________________________209
Ejercicios Recomendados____________________________________________________211
Ejercicio 1. El botón rojo....................................................................................................211
Ejercicio 2. El botón que cuenta.........................................................................................211
Generar el apk....................................................................................................................212
Anexo I. Cómo Dar de alta un sitio web para TinyWebDB_______________________________213
Bibliografía y otras cosillas sobre este documento______________________________________216
Cambios interesantes que se han producido en App Inventor___________________________216
¿Problemas con el GPS?________________________________________________________217
Gestión de la voz. TTS (Text To Speech)___________________________________________217
Leer un texto (Text To Speech)________________________________________________217
Reconocimiento de voz______________________________________________________218
Distribución de componentes en la pantalla_________________________________________218
Múltiples pantallas____________________________________________________________219
Trucos para las actividades propuestas_____________________________________________220
Bola mágica, “piedra, papel, tijera”, dados, ..._____________________________________220
Cálculo de la distancia entre dos puntos (mochila)_________________________________221
Bibliografía__________________________________________________________________223
Bibliografía utilizada para realizar este curso_____________________________________223

Bibliografía recomendada para seguir aprendiendo_________________________________224

El futuro de App Inventor____________________________________________________224
Alternativas a App Inventor (programación de móviles)_____________________________224
The Last and the next version______________________________________________________226
The last version_______________________________________________________________226
The next version______________________________________________________________226
Modificaciones pendientes a apps______________________________________________227
Nuevas Apps______________________________________________________________227
Apps con Twitter... (aún no lo he conseguido, tal vez cuando tenga el perfil de Twitter
completo)_________________________________________________________________228
Busqueda del tesoro (GPS+QR)_______________________________________________230
Guía didáctica________________________________________________________________231
Otras cosillas (formateo)________________________________________________________231
Lo que publiqué______________________________________________________________231

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
✔ 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.
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.
Ahora, también en GitHub

Este manual en formato PDF, así como todo el material necesario para las actividades,
está disponible en https://github.com/profesooooor/CursoAppInventor.
Todo el contenido se va actualizando con cierta frecuencia, eliminando errores y
aumentando el número de actividades.
Al entrar en GitHub podemos buscar donde pone “Clone or download” y pulsar ahí para
descargarlo.

Capítulo 1. Preparación del entorno. La primera Curso de Programación de Android
aplicación con Android
C
apítulo 1. Preparación del
entorno. La primera
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.

Capítulo 1. Preparación del entorno. La primera aplicación con Curso de Programación de Android
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

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

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”:

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

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/appinventor2-
setup_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 &

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.

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.

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

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.

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.

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

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.

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

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.

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.

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:

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”.
6. Probar la aplicación
Ahora hay dos posibilidades, que vemos en los apartados 6.1 y 6.2.
6.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 en

http://appinventor.mit.edu/explore/content/setup-android-phone-usb.html
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

Android
de barras, tu equipo Android navega a una página web de la que se descarga la

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

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.

Capítulo 2. Aplicaciones básicas del MIT Curso de Programación de Android
C Estas
apítulo 2. Aplicaciones básicas
del MIT
aplicaciones son una traducción de lo que hay en
http://appinventor.mit.edu/explore/content/tutorials.html. Aquí se han añadido más
propuestas de mejora al final de cada actividad.
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).
Entra en la carpeta “Material Necesario” y verás que hay una subcarpeta con el material
de esta actividad. Si no la tienes, ayudte 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-8-ball (8 Ball Image 1).
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.

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 Layout, 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.

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”:

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.

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 dentro de Button1.Click hacia dentro de
AccelerometerSensor1.Shaking.
Borra Button1.Click haciendo clic encima, pulsando Supr y confirmando.

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:
 Gestión de la voz. TTS (Text To Speech) (página 215)
 Bola mágica, “piedra, papel, tijera”, dados, ... (página 218)

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.

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 Layout y arrastramos
HorizontalArrangement hacia debajo de los botones.
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 cada uno de los botones dentro del componente
HorizontalArrangement.
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.

En el componente Canvas, 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”.

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).
Selecciona el HorizontalArrangement de abajo y ponle un ancho (Width) de Fill Parent,
y poner AlignHorizontal a Center. Luego, haz lo mismo con el de arriba. Así, todos los
botones estarán centrados en la pantalla.
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.
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 . Encájala en la ranura r de
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.

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:
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?

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

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 Built-

in/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
global GrosorPunto. De forma similar definimos el funcionamiento del botón BotonPeque.

Remata el trabajo
Prueba tu App. Comprueba que has cambiado el icono (Screen.Icon) y el título
(Screen.Title).
La aplicación completa
Actividades
Puedes modificar esta App para que haga otras cosas:
 que con los botones BotonGrande y BotonPeque 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, “Azul” al pulsar el azul, etc
 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
 que haya más colores (negro, amarillo, …)
 que se pueda grabar lo que se ha hecho en un archivo, siguiendo las instrucciones

que hay en http://programamos.es/mejorando-tu-app-de-dibujo-el-notificador/

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_TOPO_Nombre_Apellido (con tu nombre y apellidos). Cambia el título de la

pantalla (Title) a “Machacar Topos”.

Entra en la carpeta “Material Necesario / 3 Machacar Topos” y verás que hay una
figurita de un topo (si no tienes esa carpeta, te lo puedes descargar 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. Drawing and Animation/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. Drawing and 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. User Interface/Button. Pon este componente debajo de Canvas1. Cambia su
nombre para que sea BotonReset y en Text ponle “Reset”.
4. Sensors/Clock. Ponlo donde quieras, que él irá a parar debajo, a la sección “Non-
visible components”. No le cambies el nombre.

5. Media/Sound. Arrastra un componente de estos, que irá también a la sección

“Non-visible components”.
Tu pantalla debería tener este aspecto:
Los contadores
Vamos a poner en la pantalla los contadores de aciertos y fallos:
1. Layout/HorizontalArrangement. Arrastra este componente y déjalo caer debajo
del botón Reset. No le cambies el nombre.
2. User Interface/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)
b) al segundo llámalo “EtiquetaContadorAciertos” y en Text le pones “0”.
3. Layout/HorizontalArrangement. Arrastra uno de estos debajo del que habías
puesto antes.
4. User Interface/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”.

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.
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. Fíjate 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”.

3. Haz clic sobre “procedure” y escribe “MueveTopo”, que será el nombre del
procedimiento
4. Como queremos mover el topo, haz clic en 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 haz clic sobre 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:
Si estás trabajando en Windows puedes tener un dispositivo Android conectado a un

puerto USB del ordenador y ver el programa “en vivo”. También puede hacerse con un
emulador. Una vez conectado, en el diseñador, pulsas sobre Connect y eliges. 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.

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 saca "call MueveTopo" y encájalo dentro de
Screen1.Initialize:
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.

El bloque if/then/else lo encontrarás en el cajón Control.

El bloque "get touchedAnySprite" lo obtendrás poniendo el cursor sobre
touchedAnySprite (un parámetro de "when Canvas1.Touched").
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.

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:

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 “6. 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
 entonces pon la imagen de abajo (triángulo), haz la predicción, muéstrala
por pantalla y dila en voz alta
 si no es así
 no hagas nada
 al pulsar el botón

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

 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.

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
APP04_ARCADE_Nombre_Apellido (con tu nombre y apellidos). Cambia el
título de la pantalla (Title) a “Arcade”.
Pon los componentes

Empezamos a trabajar en el diseñador.
Pon un componente Drawing and Animation/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 (opcionalmente, puedes utilizar las
imágenes de la carpeta “Material Necesario”). 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 Drawing and Animation/ImageSprite y, en Picture, ponle la imagen de la
nave amiga. Los ImageSprites son parecidos a las imágenes (User Interface/Image) con
la diferencia de que podemos moverlos por la pantalla (además de detectar colisiones).
Llama a este componente NaveAmiga.
Añade un Drawing and 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.

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 Sensors/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.

(sería mejor mover cada 50 milisegundos, de 5 en 5, o se verá un movimiento
entrelazado de la bola)
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
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 deba 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.

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. Screen. Ponle AlignHorizontal a Center.
2. añades un HorizontalArrangement y le pones Center en Align.

3. añade un botón, ponlo dentro de es HorizontalArrangement, llámalo BotonIzq y en

Text escribe “<<<”
4. 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.
Nos interesa que parezca que sale de la nave. 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.

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 (o cógela de la carpeta “Material Necesario”), ajusta su
tamaño con GIMP, añade un ImageSprite. Llámalo NaveEnemiga 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:

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.

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).

 Ajustar la imagen para mejorar la detección de colisiones. La nave amiga de

ejemplo (Amiga.png) es un PNG. Si hacemos clic sobre ella en el diseñador,
veremos que está rodeada por un rectángulo blanco. Esto hará que las colisiones
sean poco realistas, porque se detectarán al tocar ese rectángulo, no la parte
visible de la nave (que es más pequeña). Para mejorar esto, podemos abrirla con
GIMP, Imagen → Autorecortar imagen, exportarla y volverla a subir a App Inventor.
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

5. Si tecleas no conduzcas (Texting, TextBox, TinyDB, GPS)

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

componente TinyDB
 cómo utilizar nuestra posición geográfica, con el GPS de nuestro dispositivo
Empezamos
APP05_SMS_Nombre_Apellido (con tu nombre y apellidos). Cambia el título de la pantalla
(Title) a “SMS. Si tecleas no conduzcas”.
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
 en Screen.Title ponemos “Si Tecleas No Conduzcas”
 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
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
 Media/TextToSpeech
 Storage/TinyDB. ¡Cuidado, no lo confundas con Storage/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 en voz alta 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
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?
Pero también podemos enviarnos un mensaje a nosotros mismos, poniendo un botón
de automensaje:
Además, el componente Texting1 tiene una propiedad un tanto peculiar, que se llama
“ReceivingEnabled”, y que puede tener estos valores:
 1 – Off. Cuando vale 1, el componente Texting no recibe mensajes.
 2 – Foreground. Cuando vale 2, el componente Texting sólo recibe mensajes si la
App está en pantalla. No los responde si está apagada o si tenemos otra en
pantalla en ese momento.
 3 – Always. La App recibirá el mensaje siempre. Si está en pantalla, responderá en
seguida. Si no está en pantalla, Android guardará el mensaje hasta cuando la
pongamos en marcha, y entronces lo recibirá y responderá.
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
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

Ahora tienes que añadir un bloque “initialize global”, cambiar “name” por
RespuestaGuardada y darle el valor texto en blanco.
Ahora 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á.
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 Valor
length("hola") 4
length("hola corazones") 14
length(" ") 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
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.

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.

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

 controlar diferentes eventos con Clock

 definir y utilizar procedimientos con parámetros
 utilizar el bloque and
Empezamos
En la carpeta “Material Necesario” está el material. Si no la tienes, 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 APP06_MARIQUITA_NomApe.
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.

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,

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.

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í:

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)
Prueba ahora tu App. Verás que se gira la pantalla automáticamente, lo que resulta muy
molesto. Podemos hacer que nuestra App no gire con el giroscopio así: en el componente
Screen1 cambia la propiedad ScreenOrientation a Portrait.
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
 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, salvo que hayas hecho lo de Screen1.Orientation que se ha
comentado antes.
¿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
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.
¿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

Aquí tienes el código, y luego la explicación:
Si tienes problemas para escribir el “call ComerPulgón” mira dentro de Built-

in/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 aumentando la energía.
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:

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:
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”:
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.
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). Recuerda que con “BotonReiniciar” deberán volver a
entrar en movimiento
 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
 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, y también para un dispositivo Google TV) (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

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.

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:

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.

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.

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í:

 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:

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:

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)
 WebViewer para abrir Google Maps desde nuestra app con instrucciones para
llegar a nuestro destino
Empezamos
Prepara un nuevo proyecto y llámalo APP09_MICOCHE_Nombre_Apellidos. 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:
 Screen1 Casilla “Scrollable” desmarcada (para que se vea todo sin tener
que desplazarse arriba y abajo).
 Screen1 Casilla “Sizing”, cambiar de Fixing a Responsive (para que se
vea bien en una tablet)
 Label1 “Posición Actual:”
 Label2: “Dirección:”
 DireccionActual: “desconocida”
 Label4: “GPS:”
 GPSLatActual: “0”
 GPSLongActual: “0”
 BotonGuardar “Guardar Dirección Actual”
 Label5: “Dirección Guardada”
 Label6: “Dirección:”
 DireccionGuardada:”desconocida”
 Label8: “GPS:”
 GPSLatGuardada: “0”
 GPSLongGuardada:”0”

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

En el botón “BotonMostrar” tienes que desmarcar la casilla “Enabled”.
Además, habrás añadido los siguientes componentes no visibles:
 LocationSensor1
 TinyDB1 (no confundir con TinyWebDB1)
 WebViewer1 (está en User Interface)
Visualizar la posición actual

Escribe esto y comprueba que funciona:
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:
Escribe en un navegador http://maps.google.com/maps?saddr=40.18145,-

0.03509&daddr= 40.18145,-0.03509 y entenderás lo que estamos haciendo.
Tienes que tener muchísimo cuidado y copiarlo todo igual. Fíjate
que, en un sitio, pone “saddr” y, en otro, “daddr”. Aquí, cada letra es
importante.
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
utilizará alguien la app no habrá nada guardado en la base de datos. Cuando esto ocurra,
no mostraremos nada por pantalla; simplemente, dejaremos lo que ya está (que es lo que
pusimos en el diseñador).
Deberías hacer esto tú solo y después comparar tu trabajo con la figura siguiente:
Suponemos que si hemos podido leer la dirección de la base de datos, también

habremos podido leer la latitud y la longitud.
Prueba la app. Ya la tienes terminada.

Actividades
¿Qué se te ocurre 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 219.
Haz alguna de las que te han quedado.
Si no se te ocurre nada, aquí tienes algunas ideas:
 mejorar el aspecto. Ahora mismo el aspecto de la App es más bien feo. Estamos
poniendo mucha información de texto con unos pocos botones y nos comemos así
más de media pantalla. Sería mejor compactar un poco y decorar los botones con
iconos
 mejorar la funcionalidad. Tenemos poco espacio para el mapa. Aunque mejoremos
el aspecto, deberíamos probar nuestra App. A ser posible, en más de un
dispositivo, para ver cómo cambia según el tamaño de la pantalla y, así, mejorar el
diseño

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.
Además, vamos a aprender a utilizar la mochila.
Diseñar la aplicación
Empieza tu nuevo proyecto APP10_DONDE_ESTAIS_NombreApellidos.
Compartir tu ubicación actual utilizando la misma 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
 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.


También podemos ver que su teléfono guarda la posición con más precisión que los
demás.
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.
No es necesario que vuelvas a preparar los bloques que ya tienes en la APP09 .
Abre la APP09, pincha y arrastra los bloques que quieras reutilizar a la mochila (en
inglés, backpack). El icono de la mochila cambia cuando está llena:

Después, abre otra vez la APP10 (ésta) y pincha en la mochila. Verás que puedes coger
de dentro los bloques que te acababas de guardar. Tendrás que sacarlos y, luego, añadir
el LocationSensor1 y las Label correspondientes.
Cuando se utilice tu App, 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, si bien ahora utilizarás
TinyWebDB1 en lugar de TinyDB1.
Bueno, no exactamente. En lugar de utilizar las claves “dirección”, “latitud” y “longitud”
como allí, vamos a guardar los tres valores en la misma clave, que será la Clave.Text.
Vamos a guardar en el mismo campo todo el contenido. Para conseguirlo, vamos a crear
una lista, de forma parecida a como lo hicimos en la bola 8 :
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

Ya has preparado antes (viendo la solución) cómo preparar el botón Recuperar. Ahora
tendrá que leer de la base de datos TinyWebDB1 la lista que guardaste con el botón
Guardar.
Además, tendrás que sacar los 3 ítems de la lista y ponerlos en
DireccionActual.Text, GPSLatActual.Text y GPSLongActual.Text.
Es probable que te encuentres con problemas porque todavía no has
trabajado mucho con listas, pero a ver si puedes hacer esto sin ayuda.
¡¡Vamos, vamos, que tú puedes!!
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
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

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
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
valdrá.

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/
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
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.

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)
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.

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

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:
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 219.

voyy
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.

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 el vídeo de YouTube
https://youtu.be/b7fTMRed7ug y verás qué fácil.
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.

¿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.
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
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.





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

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 125)

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

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 125)

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
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.

"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.

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:

Aquí tenemos el segundo procedimiento más largo:

Lo único que falta ya es esto:
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.
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.
 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.

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

Capítulo 4. El Internet de las cosas Curso de Programación de Android
C 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 2. 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 €.
2 En realidad, se trataba de un Arduino UNO. Más tarde, el autor empezó a trabajar con modelos más pequeños y
baratos (Arduino Mini y Arduino Nano, desde 3 €), pero no son recomendables para alguien que está empezando.

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
}
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() {
}
void loop() {
digitalWrite(13, HIGH); // Enciende la luz
digitalWrite(13, LOW); // Apaga la luz
}
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
}
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.

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 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

void setup() {
© Pedro Felip Belenguer
pinMode(in1, OUTPUT);  157
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);
delay(1000);
// Giramos hacia la izquierda durante 1 segundo

digitalWrite(in2,HIGH);
delay(1000);
// Paramos 1 segundo
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
 Los pines
detallada
de control.
del montaje:
En este caso tenemos GND, IN1, IN2, VCC porque sólo
hay dos relés.
 Regleta. Un cable va directo al portalámparas y el otro al relé.
 GND. Este es el negativo. Lo conectaremos a cualquier GND de Arduino.
 Portalámparas. Un cable va a la regleta y el otro al relé. Cuando reciba
alimentación
 VCC. Esporellos
positivo.
dos lados,
Lo conectaremos
la bombilla seaencenderá.
5V de Arduino.
 Controladora.
 IN1 (entrada
Si nosdelfijamos
relé 1).
enCuando
la foto, veremos
se recibaque
corriente
esta tiene
por este
dos relés,
pin, elno
relé
cuatro
1 se
como en
activará,
el ejercicio
lo que
anterior.
significa
Funciona
que su exactamente
conmutador interno
igual quecambiará
la de 4: de posición y
el tornillo central pasará a estar conectado con
 los relés. Esta tarjeta tiene 2, por lo que tenemos
el tornillo 3. Para
hastaver que funciona, podemos
desde el relé K1 el K2.
conectar manualmente el cable VCC con el
IN1.
 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. Arduino dará las órdenes a la
controladora, y ésta a los relés.
 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
/*
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.
Montaje físico:
GND de Arduino a GND de placa
5V de Arduino a VCC 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)
*/
void setup() {
pinMode(in1, OUTPUT);
}
void loop() {
// Encendemos
delay(200);
// Tras 2 décimas de segundo apagamos
delay(200);
// Repetimos acción similar pero más lenta

delay(500);
delay(500);

delay(900);
delay(900);
}
Puesta en marcha, parte 2

Comentarios:
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
/*
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 5V
KEY No conectado
Se recomienda conectar un LED al pin 13 para que se vea mejor.

*/
void setup() {
Serial.begin(9600);
}
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
RS232 hará que
Master Slave se encienda
FHRG” por algounmás
LEDdecuando
4 €. Arduino
Lo buenoreciba
es una
que 'e' (minúscula
lleva o
4 cables
mayúscula) por que
macho/hembra el puerto
van deBluetooth, y que
perlas para se apague
conectarlo cuandodirectamente.
a Arduino 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 HC-
05 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 155) 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
Para acelerar basta con repetir la misma orden: una “w” es ir hacia adelante. Otra “w”
hace que siga hacia adelante, pero más rápido. Y, así, sucesivamente.
Lo mismo ocurre cuando queremos que gire o que retroceda más deprisa.
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.

En realidad, falta un botón: el de desconectar. Y deberemos tener en cuenta que,
antes de desconectar, tendremos que enviar una “x” para que se detenga el
cochecito, o no lo podremos parar mientras no lo volvamos a conectar.
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: -70 < Pitch < -10 (-90 es vertical)
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/johnny-
five/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/en-
US/win10/samples/arduino-wiring/HelloBlinky.htm.

Capítulo 5. mBot Curso de Programación de Android
Capítulo 5. mBot
Introducción
El mBot es un interesante robot que se puede manejar sin saber nada de mecánica,
robótica, ni electrónica.
En este capítulo vamos a aprender a manejarlo desde App Inventor pero, antes de
empezar, vamos a saber con más detalle qué es un mBot.
Entramos en https://www.makeblock.es/. De ahí, pasamos a la pestaña Tienda.
Veremos que hay varios modelos y accesorios.
En Internet podemos encontrar muchas imágenes y vídeos sobre el mBot.
Entramos ahora en https://www.makeblock.es/productos/robot_educativo_mbot/. Las
aplicaciones que siguen van a suponer que éste es el modelo que tenemos: un modelo
básico con el módulo de Bluetooth instalado.
El sensor de distancia (ultrasonidos) deberá estar conectado en el puerto 3 y el
seguidor de líneas (line follower) en el 2, como en esta figura:
¡Ah, se me olvidaba! Para que todo esto funcione, el mBot debe tener cargada la
aplicación por defecto, la que viene de la fábrica. Si algún manitas se la ha cargado
(programando el Arduino que lleva dentro “a pelo”), deberá restaurarla antes de poder

continuar.
Esa aplicación por defecto convierte al mBot en un esclavo que obedece las órdenes
que le llegan por Bluetooth (también por infrarrojos o por USB, aunque eso no nos
interesa ahora). Eso nos permitirá hacer Apps que le enviarán órdenes por esta vía.
Pero no solo acata las órdenes, sino que también es capaz de decirnos lo que “sienten”
sus sensores. Por todo esto, no es un simple cochecito, es UN ROBOT.

APPM01. Instalación de la extensión (movimientos básicos)
Introducción
Vamos a hacer una aplicación que nos servirá de base para las que haremos a
continuación y, mientras la haremos, aprenderemos lo básico sobre la comunicación mBot
↔ Android.
En http://learn.makeblock.com/en/use-mbot-with-app-inventor/ están las instrucciones
que vamos a seguir. El contenido de esa página web podría ser cambiado, eliminado o
cambiado de sitio, así que, de momento, será mejor ceñirnos al documento que estás
leyendo.
¡¡A trabajar!!
Empieza un proyecto nuevo y llámalo APPM01_INSTALA_Nombre_Apellido (con tu
nombre y apellidos). Cambia el título de la pantalla (Title) a “mBot”.
Añadir la extensión MBot

En la izquierda, despliega el último apartado: Extension. Pulsa sobre Import
extension.
En la ventanita que sale, pulsa sobre la pestaña URL, escribe
http://appinventor.makeblock.com/com.makeblock.appinventor.MBot.aix y pulsa sobre
Import.
Confirma que el nombre de la extensión es MBot.
Ahora, pincha y arrastra el elemento MBot para añadirlo al proyecto. Como es un
componente no visible, irá directamente abajo.
Acabas de ampliar App Inventor de manera que ahora hay más bloques. Estos pasos
los tendremos que seguir en cualquier App que vaya a manejar un MBot.
Si entramos en el diseñador, podremos ver nuestro objeto Mbot1 con sus bloques
correspondientes.
Conectar con el mBot

Como vamos a manejar el mBot con Bluetooth, lo primero que vamos a hacer es
conectar con él.
En el diseñador, arrastra un bloque ListPicker y, en Text, escribe “Conectar con mBot”.
Entra en los bloques, y añade esto:

Así, antes de pulsar sobre “Conectar con mBot”, nuestro móvil buscará los robots que
haya en las cercanías con el Bluetooth activado.
Acto seguido, el usuario elegirá uno de los robots en una lista que le saldrá por pantalla.
Añade ahora estos bloques:
Con estos nuevos bloques, Android conectará con el robot que hayamos elegido.
Desconectar el mBot
Ahora deberíamos añadir un bloque de desconexión, para poder así liberar el mBot y
que otro lo utilizara. Pero, vaya, ¡a los que hicieron la extensión se les olvidó!
Movimientos básicos
Vamos a añadir ahora unos movimientos básicos para que podamos comprobar que la
comunicación funciona.
Añade botones para ir arriba, abajo, a la izquierda, a la derecha y parar. Lo
recomendable es poner un componente TableArrangement, del apartado Layout, con 3
filas 3 y 3 columnas para, así, situar cada botón donde le corresponde:
Como habrás podido apreciar en la figura anterior, es muy conveniente cuidar la

presentación y procurar que el funcionamiento de nuestra App resulte intuitivo. Por estos
motivos, se ha centrado el contenido de Screen1 y se ha modificado su Title.
También se ha cuidado el nombre de cada botón.
En sus Text correspondientes se han utilizado las teclas del teclado que resultan más

apropiadas, como la letra V para la dirección atrás, o la letra O para parar.
Bloques de movimientos básicos

Lo que viene ahora es muy fácil.
Deberías intentar hacerlo sin mirar (anda que no he repetido esto una y otra vez). ¿Por
qué? Pues porque, aunque no lo parezca, se aprende mucho más pensando, intentando
hacer algo, equivocándose de vez en cuando, y encontrando una solución por uno mismo,
que copiar, copiar y copiar.
Primero, prepara los bloques correspondientes a BtnAdelante y BtnParar.
Después, mira la solución:
Ahora, preparar tú mismo el resto de botones.

Con el tiempo que te sobre, pon como icono de tu aplicación una imagen de mBot
sacada de Internet.
Comprueba que todo funciona como es debido.
Cómo mejorar esta App

Esta App va a servir de plantilla para las que haremos después, así que sería bueno
que la mejoráramos.
¿Serías capaz de hacer algo de esto?:
 que al poner en marcha la App intentara conectar con el mismo mBot de la última
vez. Tendría que utilizar TinyDB1 para guardar su dirección (address) para intentar
conectar con él. En caso de lograrlo, conectaría sin tener que esperar a que el
usuario pulsara sobre ListPicker
 que al poner en marcha la App busque todos los mBot de los alrededores y, en
caso de encontrar uno solo, que se conectara automáticamente a él, en lugar de
pedir al usuario que seleccionara uno
 añadir un botón BtnDesconectar que, al pulsarlo, mostrara una alerta así:

 que toque el claxon cuando vaya a moverse hacia adelante

 naturalmente, se podría poner una imagen para cada botón, indicando la dirección
hacia la que se va a desplazar el mBot
 que el usuario pudiera desconectarse del mBot para dejarlo así libre para otro
usuario <== eso, lamentablemente, no es posible hacerlo con el uso del
componente BluetoothClient. Habrá que esperar a que añadan el bloque necesario
a la extensión mBot

APPM02. Sonido según la distancia (sonido y distancia)
Introducción
Ya somos capaces de manejar un mBot, pero solo los movimientos básicos.
El mBot es capaz de hacer muchas más cosas. Aquí vamos a aprender dos: cómo
emitir sonidos, y cómo detectar la distancia que hay desde el mBot hasta el obstáculo más
cercano que tiene delante.
El sensor de ultrasonidos funciona como el eco de un murciélago: emite un sonido y,
basándose en el tiempo que tarda en recibir ese mismo sonido “rebotado”, deduce la
distancia hacia el obstáculo más cercano.
En realidad, no es una medición muy precisa, y tiene poco alcance, pero igual le
sacaremos un buen partido. Este es solo el principio...
Trabajo a Realizar
Empecemos con buen pie

Entra en el proyecto que hiciste en la actividad anterior y guárdalo como
APPM02_SONYDIST_NomApe, con tu nombre y apellidos.
Cambia Screen1.Title convenientemente.
Parece que no has hecho nada, y ya tienes una App que hace unas cuantas cosas.
Detectar la distancia
Vas a hacer una App que hará que el mBot emita un sonido cuando haya un obstáculo
cerca. Concretamente, a 10 cm. El resto del tiempo, permanecerá callado.
¿Sabes cómo hacerlo?
¿No?
Pues ahí va una pista: cada 200 milisegundos, comprobarás la distancia hasta el
obstáculo más próximo al mBot.
Si tienes un buen profesor, ahora mismo debes estar intentando resolver esto sin
ayuda. De hecho, antes de leer este párrafo, ya habrás puesto un Clock y habrás buscado
en el componente MBot un bloque que sirva para detectar la distancia y otro para emitir
sonido.
Para utilizar el sensor de distancia tendrás que saber en qué puerto está conectado. Es

el 3, así que el bloque quedará así:
Ok, el bloque para emitir sonido es éste:
La duración está en milisegundos. La frecuencia es el tono. Puedes probar poniendo

262 y una duracion de 500 ms.
Prueba tu App.
Si te funciona, enhorabuena.
Si lo has intentado pero no lo has conseguido, enhorabuena también.
Si no has intentado nada, lo siento.

Aquí tienes la solución:

Pero tienes que empezar la App con el Clock1 inhabilitado y habilitarlo en con el botón
BtnConectar. También deberías deshabilitarlo con el botón BtnDesconectar, aunque no
funcione.
Aquí está el código de la App casi completa. Está todo menos los botones de
movimiento:

APPM03. Avanzar sin chocar (led)
Introducción
Nuestro mBot ya hace más que un coche normal pues, además de conducirlo, detecta
distancias.
Claro que podemos hacerlo más útil.
En esta App añadiremos cosas que van a hacer nuestro coche más interesante,
utilizando los LED de a bordo.
Trabajo a Realizar
Esta App va a suponer un reto.
¿Estás en clase? Muy bien, el reto consiste en ser el primero en terminar la App.
Preparar el proyecto
Abre el proyecto anterior y guárdalo con el nombre APPM03_NOCHOCAR_NomApe.
Cambia Screen1.Title convenientemente.
Buscar el bloque que enciende las luces

Busca en el componente MBot los bloques disponibles. Encontrarás uno que enciende
los ledes de a bordo. Experimenta con él.
Luz de freno
Tienes que hacer que, al pulsar el botón BtnParar, se enciendan las dos luces en color
rojo (además de pararse el coche).
Intermitentes
Tienes que hacer que, al pulsar BtnIzquierda, se encienda el led de la izquierda en color
amarillo. No será intermitente, será una luz fija.
Lo mismo para BtnDerecha.
Luz de marcha atrás

Con el botón BtnAtras se encenderán los dos ledes en color blanco.

Adelante
Con BtnAdelante se apagarán los ledes, si estaban encendidos. Si estaban apagados,
permanecerán apagados.
Si se detecta un obstáculo a menos de 10 centímetros se detendrá el coche.
Pitido al frenar
Con BtnParar, además de todo lo anterior, el coche pitará brevemente.
Mejoras posibles
Si has sido de los primeros en terminar, puedes intentar algunas de estas mejoras:
 al empezar la App se oirá esta melodía (si te gusta la música, que sepas que esto
es B3,B3,B3,C4,E4; B3,B3,B3,C4,E4; C4,C4,B3,B3,A3,A3,G3 traducido con ayuda
de http://www.phy.mtu.edu/~suits/notefreqs.html. Por ejemplo, C4 es 262):
 con BtnAdelante, si se detecta un obstáculo a menos de 20 cm, el coche girará a la

izquierda y dará un pitido, en lugar de detenerse. Sólo se detendrá si hay un
obstáculo a menos de 10 cm
 si hay poca luz, con BtnAdelante se encenderán unas luces moradas. Para lograrlo
será necesario utilizar el sensor de luz (LightnessSensorValue).

APPM04. Más música
Introducción
En la actividad anterior hay una mejora propuesta que sirve para hacer música.
En esta actividad vamos a hacer lo mismo pero, en lugar de la melodía de “La
cucaracha”, vas a elegir tú la que prefieras.
Buscaremos primero la melodía, nos aseguraremos de que disponemos de la partitura
y, con ayuda de una página web que nos permita convertir notas de música en
frecuencias de ordenador, haremos la “traducción” de la partitura a lo que entienda
nuestro mBot.
Ejemplo paso a paso

Así preparó el autor de este curso la melodía de la cucaracha:
 buscó en YouTube la melodía con partitura
 escogió la segunda porque duraba solo 50 segundos

 la escuchó, para asegurarse de que sonaba bien
 se fijó en la parte de la melodía que quería reproducir
 supuso que eso era como un RE RE FA FA SOL, RE RE FA FA SOL, FA FA MI MI

RE RE DO

 entró en http://www.phy.mtu.edu/~suits/notefreqs.html, donde hay una traducción

de notas musicales a frecuencias de sonido
 supuso que el RE equivalía a un C4, que es como decir (buscando en la tabla)
261.63 Mhz, que vienen a ser 262
 hizo lo mismo con el resto de notas, obteniendo como resultado la secuencia 247,
247, 247, 262, 400 (para el principio)
 comprobó con App Inventor y mBot que sonaba bien, preparando el procedimiento
“cuca1”, ajustando la duración de cada nota a 100, porque así no sonaba ni muy
despacio ni muy deprisa
 como faltaba una pausa antes de la última nota, añadió un bloque inaudible
(frecuencia 50)
 la segunda secuencia es igual, por lo que llamar dos veces a “cuca1” es más
rápido y elegante que poner otra vez toda la secuencia
 después, definió el procedimiento “cuca2” para terminar la melodía
 por último, definió “cucaracha”, el único procedimiento que hay que llamar para
reproducir todo el conjunto:
Trabajo a Realizar
Preparar un proyecto nuevo que se llame APPM04 que haga que el mBot reproduzca
una música breve.

APPM11. Seguidor de línea
Introducción
En las fábricas de cerámica hay robots que circulan sobre un circuito para transportar
boxes con azulejos desde el horno hasta la zona de espera, y de ahí a la de clasificación
y encajado.
Esos robots circulaban antiguamente sobre raíles.
Después, lo hacían siguiendo unos cables instalados bajo el suelo.
Nosotros vamos a programar el mBot de manera que se mueva por un circuito que
dibujaremos nosotros. Podemos pintar el circuito sobre un papel blanco, o utilizar una
cinta adhesiva negra para diseñar el recorrido.
Trabajo a Realizar
Ver y entender el terreno de juego

Tenemos un circuito de color blanco con negro dibujado encima. Podremos nuestro
cochecito sobre la línea negra, y él deberá avanzar sin salirse:
Podemos encontrar vídeos en YouTube de seguidores de líneas. Si nos fijamos un

poquito, veremos que, en realidad, tienen un movimiento poco natural. Mientras están en
una recta, avanzan. Cuando llegan a una curva, hacen pequeños giros bruscos.
Lo que ocurre es que, en las curvas, se salen un poquito de la línea y giran
bruscamente para volver sobre ella. Entonces, siguen recto, pues no saben si viene recta
o curva. Y así, hasta que se vuelven a salir.

Entender cómo funciona el seguidor de líneas

En la parte inferior de nuestro mBot hay dos “ojitos” que son los sensores de
seguimiento de líneas. Cada uno de ellos es un emisor – transmisor de luz y funciona de
manera parecida al eco: emite luz, se refleja (o no) en la superficie inferior, y el sensor
deduce el color de lo que tiene debajo. Por último, nos devuelve un valor que puede ser 0
y 1, y que podemos utilizar en nuestros programas:
El bloque que se utiliza en Mbot.LineFollowerValue, y el sensor está conectado al

puerto 2:
La figura anterior se interpreta así:

LineFollower Sensor Sensor Qué ocurre Qué debemos hacer
Value izquierd derech
o o
0 1 1 Estamos sobre la Avanzar
línea
1 1 0 Nos hemos salido de Girar hacia la
la línea por la izquierda
derecha
2 0 1 Nos hemos salido de Girar hacia la
la línea por la derecha
izquierda
3 0 0 No tenemos la línea Retroceder
negra debajo.
Probablemente nos
hemos salido del
terreno de juego
¿Quieres ver mejor cómo funciona? Enciende el mBot y mueve un dedo por debajo.
Veras cómo se encienden y apagan las luces del seguidor de líneas. En seguida
entenderás su funcionamiento.

Trabajo a Realizar
Empezar el proyecto desde la plantilla

Ahora que ya conocemos la lógica del juego y el funcionamiento de los sensores de
seguidor de línea de nuestro mBot, nos ponemos manos a la obra.
Abre tu proyecto APPM01 y guárdalo como APPM11.
Cambia Screen1.AppName para que se llame como tu proyecto.
Cambia Screen1.Title para que ponga “Seguidor de líneas negras”.
Hagamos memoria pero sin borrar nada aún

Hemos partido de APPM01 para no tener que hacer todo lo que ya hicimos en su día.
Lo que tenemos ahora es una App que es capaz de conectar con el mBot, hacer que se
mueva adelante, atrás, izquierda, derecha y pare. Por último, podemos desconectarnos
(aunque esto todavía no funciona).
No borramos nada del código porque lo aprovecharemos todo: girar a un lado o al otro,
avanzar o retroceder, e incluso parar.
Conectar con el mBot

Esto ya lo tenemos hecho. Se conecta con un “ListPicker” que tiene forma de botón, y
tenemos los bloques que hacen el trabajo.
Parada de emergencia
Vamos a necesitar el botón de parada. Así, mientras jugamos, en caso de problemas
podremos detener nuestro mBot, en lugar de tener que ir corriendo a cogerlo, si vemos
que se aleja o va caerse de una mesa.
Más tarde le daremos un aspecto más atractivo a este botón.
Principio del juego

A estas alturas, lo interesante sería que intentaras hacer esto tú solo. No pasa
nada si te atascas, pues aquí encontrarás la solución, pero piensa antes de mirar.
Aprenderás más y te gustará más.
Al empezar el juego, una vez conectados a nuestro mBot, éste tendrá que empezar a
moverse.
Solución: añadir la orden de avance al bloque “when ListPicker1.AfterPicking”.
Podemos ver cómo lo hicimos en el botón BtnAdelante:

Leer sensores y actuar en consecuencia

En la página 194 hemos visto una tabla en la que se explica qué valores puede tomar el
LineFollowerValue y qué hay que hacer en cada caso.
Solución
Vamos a ir por partes, viendo la tabla.
Parte 1. LineFollower=0.
Estamos sobre la línea y debemos avanzar.
Vamos a utilizar una variable que llamaremos “seglin” para que el código quede más
claro, y para evitar estar consultando el sensor más veces de las necesarias:
Parte 2. LineFollower=1 y LineFollower=2.

Nos hemos salido de la línea por la derecha y hemos de girar a la izquierda. O nos
hemos salido por la izquierda y hemos de girar a la derecha.
Parte 3. LineFollower=3.
No tenemos la línea negra debajo. Nos hemos salido. Debemos retroceder:

Actuar “por siempre”

Lo que hemos hecho hasta ahora está bien, pero el mBot tiene que estar
constantemente avanzando, vigilando si se sale, actuando en consecuencia... No sirve de
mucho hacerlo bien solo en el momento de conectar.
Cada cierto tiempo, deberá realizar unas comprobaciones.
Solución
 añadir un componente Clock y poner dentro toda la lógica de movimiento
 ese Clock1 hará “tic” para 100 ms. No lo dejamos en 1000 ms porque sería
demasiado lento para reaccionar, pero tampoco queremos exagerar
 al empezar el juego, el Clock1 estará parado (TimerEnabled = false en el
diseñador), se pondrá en marcha al conectar con el mBot y se parará con el botón
de parada
Parte 1. Poner en “when Clock1.Timer” toda la lógica del movimiento.
Parte 2. Que el ListPicker1.AfterPicking ponga en marcha el reloj.

7) si3.noQue
Parte va aelfuncionar, volver alpare
botón BtnParada pasoel4reloj y el coche (primero el reloj).
8) probar
Vamos a poner en marcha este método.
Le cuesta girar a la izquierda

Apliquemos a este problema el método de 8 pasos que acabamos de ver:
1) lo que más mal funciona: lo que peor hace es girar a la izquierda en curvas
cerradas
2) descripción exacta del problema: al llegar a una curva a la izquierda, gira un
poquito, avanza, retrocede (porque se ha salido), gira un poquito, avanza,
retrocede, gira otro poquito, …
3) posibles soluciones:
3.1 ) cuando gire a la izquierda, que gire más deprisa que ahora (así evitamos
que avance recto y se salga tantas veces)
3.2 ) cuando gire a la izquierda, que gire más rato que ahora (para evitar eso
mismo)
3.3 ) mientras gire a la izquierda, que cambie todo el comportamiento del
movimiento, para que siga girando hasta estar los dos sensores encima de la
línea
3.4 ) mientras gire a la izquierda, que cambie todo el comportamiento del
movimiento, para que siga girando incluso si se ponen los dos sensores sobre
la línea; que no pare de girar mientras no se salga del circuito
3.5 ) si acaba de girar a la izquierda y ya está dentro, que se reduzca la
velocidad; ya acelerará cuando “lleve un rato” sobre la línea
Propón en equipo más soluciones y continúa tú mismo hasta llegar a una solución. Es
importante hacer esto en equipo.
Otras Mejoras
Mejoras a realizar (recuerda que debes hacer, al menos, dos):
 Calibración. Si el negro de la pista es fino, el coche se deberá mover más despacio
para no salirse. Si es más grueso, podrá avanzar más deprisa. ¿Podrías añadir
algo a tu App para que el jugador pudiera calibrar el funcionamiento del cochecito?
Así ganaría a otros cochecitos en pistas anchas.
 Android: que muestre lo que detecta el seguidor de líneas. Podrías poner un
“sensor” izquierda y un “sensor” derecha. Que estén los dos negros. Cuando el
sensor izquierdo no detecte el negro debajo, que se muestre como blanco en la

pantalla. Lo mismo con el derecho

 Mejorar la lógica para que corra más. Estaría bien que la velocidad pudiera
cambiar, pues ahora va a una velocidad fija. Tal vez podría correr más cuando lleva
algún tiempo yendo en línea recta, y más despacio cuando acaba de girar, para no
salirse.
 Sonido. Podría hacer un sonido de derrape mientras gira. Como no conseguiremos
un sonido de derrape “creíble” nos conformaremos con un zumbido cualquiera.
 Alarma. Cuando se salga de la pista, que se encienda una luz roja y se oiga un
tono de derrota. Cuando encuentre la pista tras haberla perdido, que se apague la
luz roja y se oiga un sonido de victoria.

APPM12. Seguidor de línea blanca (sin terminar)
Introducción
De la misma manera que se puede hacer un programa para seguir una línea negra,
también se puede hacer un programa para que el mBot siga una línea blanca.
En este caso, el circuito será todo negro, menos una zona blanca. Puedes prepararlo
con una cartulina negra en la que pegas tiras de papel blanco. O solo con tiras de papel
blanco, pintando de negro los laterales.
El programa será casi igual como el de seguir la línea blanca, pero tendrás que pensar
un poco porque, igual que antes seguía recto cuando los dos sensores detectaban color
negro debajo, esto será lo que hará ahora cuando los dos sensores detecten color blanco.
Lo que antes servía para girar a la izquierda, ahora servirá para girar a la derecha, y
viceversa.
Trabajo a Realizar
Empezar el proyecto desde el anterior

Abre tu proyecto de seguidor de línea negra y guárdalo como APPM12.
Cambia Screen1.AppName para que se llame como tu proyecto.
Cambia Screen1.Title para que ponga “Seguidor de líneas blancas”.
Modificar el programa
Si piensas sabiamente, resolverás este problema con rapidez.
Si actúas sin pensar... jamás lo conseguirás.
Mejoras
No se proponen mejoras para esta App.

APPM15. Luchador de sumo (sin terminar)
Introducción
Todo el mundo sabe qué es una lucha de sumo. Es ese deporte japonés en el que los
dos contendientes se cogen y se empujan para echar al adversario de un círculo. El más
pesado tiene ventaja porque es más difícil de desplazar.
En el mundo de los robots, la lucha de sumo es parecida. Se trata de localizar al
enemigo y lanzarse a por él para echarlo, pero tendremos que detectar los límites del
terreno de juego para no salirnos.
Trabajo a Realizar
Reglas
Regla número 1: el terreno de juego es circular. Tiene color blando y sus límites están
dibujados en color negro.
Regla número 2: el que se salga del terreno de juego, pierde. Si se salen los dos, hay
empate.
Regla número 3: cada jugador puede, y debe, empujar al oponente para echarlo fuera.
Fin del juego: el juego termina cuando uno de los dos jugadores, o ambos, se encuentra
totalmente fuera del terreno de juego (o cuando una avería impide continuar).
Regla número 1: el terreno de juego es circular, es blanco y sus límites negros

Esta regla es importante para preparar el terreno de juego, pero no para nuestra App.
Regla número 2: el que se salga, pierde

La forma del terreno no nos afecta, pero sí que el terreno sea blanco y sus límites
negros. Con los sensores de línea deberemos vigilar para no salirnos, de un modo
parecido a como lo hemos hecho con el seguidor de líneas.
Regla número 3: empujar al contrario

Empujar al contrario consiste en dos partes:
 detectar al contrario
 lanzarse a por él como un rinoceronte
Para detectar al contrario utilizaremos el sensor de ultrasonidos. Cuando detectaremos

un obstáculo, supondremos que es nuestro enemigo, pues no puede haber nada más en
el terreno de juego, excepto nuestro enemigo.
Cuando lo detectemos, pisaremos a fondo el acelerador, pues a mayor velocidad,
mayor probabilidad de echarlo fuera. Y sólo si está dentro del terreno de juego
empezaremos nuestro ataque.
De todos modos, durante el ataque, seguiremos vigilando que no nos salgamos del
terreno de juego.
Qué hacer mientras no detectamos ni al enemigo ni el borde del terreno de juego

Nos iremos moviendo en línea recta, pues vemos mejor lo que tenemos delante que lo
que tenemos en un lado, y necesitamos estar cerca para ver mejor.
Página 59:

Bibliografía
Mirar en la página 57 de “divirtiendome_con_mbot__español.pdf”.

Capítulo 6. Y después, ¿qué? Curso de Programación de Android
Capítulo 6. 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/java-
bridge/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 el exe de la página
http://developer.android.com/intl/es/sdk/index.html.
 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://dl-
ssl.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");

...
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");
...
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

Anexo I. Cómo Dar de alta un sitio web para TinyWebDB Curso de Programación de Android
A 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-tinywebdb-
services/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í.

Anexo I. Cómo Dar de alta un sitio web para Curso de Programación de Android
TinyWebDB
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í:

Anexo I. Cómo Dar de alta un sitio web para TinyWebDB Curso de Programación de Android
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.

Bibliografía y otras cosillas sobre este documento Curso de Programación de Android
B 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: http://www.elandroidelibre.com/2016/02/nuevas-voces-de-
android.html.
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 104), 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-para-
desarrolladores-android.html hay un artículo sobre este tema.

The Last and the next version Curso de Programación de Android
The Last and the next version

De aquí al final es privado, por lo que no debe salir en ningún PDF público ni tampoco
en GitHub o en versión impresa.
The last version

Últimas modificaciones realizadas en este documento (orden cronológico):
 adaptación a la versión 2 (casi terminada)
 revisión de la instalación en LliureX 14.04, 15.05 y Windows 10.
 revisión general.
 Elimino uno o dos capítulos inútiles
 añado el capítulo “otras aplicaciones”, con el ahorcado
 añado el capítulo “el Internet de las cosas” y lo reviso porque lo utilizamos en clase
 además, utilizo GitHub para que se puedan descargar el código fuente de Arduino
en lugar de copairlo y pegarlo de aquí.
 añado el capítulo de Android Studio
 utilizado en abril 2016 en un curso del Cefire
 cambio el nombre de T## a APP##. Por ejemplo, APP00_FOTO_NomApe.
The next version

Esto no está impreso en el manual encuadernado.
 Quitar mi teléfono en el ejercicio SMS y poner uno falso
 1BACH Nuevo apartado: juegos de plataformas, basado en
http://youtu.be/DOxHryAFdBs y otras cosas de “Curso MOOC Scratch for Arduino
S4A.docx”.
 Realidad virtual y realidad aumentada, están tratadas en
http://ai2.appinventor.mit.edu/reference/other/vr.html.
 El libro en el que se basa este documento, en la versión 2, está todo disponible en
PDF y fraccionado en http://www.appinventor.org/book2 (véase la parte de abajo).
Por lo que he visto es igual que el original pero cambiando los bloques.
Recuérdese que la segunda parte trata temas a fondo, como la localización GPS o
proximidad.
 Dos versiones: una para el profesor, y la otra para el alumno. Así, las ilustraciones
con el estilo “Solución”, quedarán ocultas a los alumnos.

Para la siguiente versión de este documento hay que tener en cuenta lo siguiente:
 “Guía turística de París” debería ser “Guía turística del desierto de las palmas”.
 http://programamos.es/crea-tu-propio-videojuego-para-moviles-android/ es
excesivamente simple pero el hecho de que funcione con angry birds lo hace
interesante. En http://studio.code.org/hoc/1 está la idea completa de la que han
partido para hacer eso.
 animar a que los alumnos vean lo que hay en la búsqueda dentro de YouTube “app
inventor juego” y que elijan qué juego les gustaría más hacer. Hay de todo. Es
curioso el caso de “Tutorial 73 - Android - AppInventor” por el número. Tal vez
“Videotutorial 04 (Parte1): Desarrollando un Juego – Layout Game” sea mejor, con
sus más de 9000 visualizaciones.
 http://explore.appinventor.mit.edu/ai2/minigolf es una App que parece interesante (y
está explicada paso a paso, e incluso te puedes descargar el código fuente).
 En https://sites.google.com/a/jcu.edu/cs128fall2012/ hay un enfoque tradicional
mezclado con moderno que tal vez amplíe la segunda parte del pdf de app
inventor, y que tiene como objetivo dirigirse hacia Python.
En https://sites.google.com/site/appinventormegusta/ejemplos hay cosas que parecen

muy interesantes.
En https://sites.google.com/a/jcu.edu/mt513/ también hay cosillas.
La galería: http://ai2.appinventor.mit.edu/#5103011452944384
Modificaciones pendientes a apps

En la T4_Dispara supongo que los sprites Misil y NaveEnemiga podrían moverse sin
necesidad de un reloj, utilizando correctamente sus propiedades Head, Speed, Enabled o
Visible.
Nuevas Apps
Apps normalitas:
 Araña. Es la del examen “EXAMEN_28JUN16” de 3ESO, pero hay que añadirle
cosas. Que haya que matar a las arañas antes de llegar a un borde. Que empiecen
su camino en un lugar aleatorio pero siempre a cierta distancia del centro (lejos de
los bordes). Si se matan al menos dos arañas, se sigue jugando. Habrá un
marcador de pantallas superadas.
Para los usuarios avanzados hay que preparar nuevas aplicaciones:
 Otras, que tienen que hacer ellos mismos. Véanse los vídeos de YouTube que

aparecen al mostrar https://youtu.be/nYNKXm4p_HU.

Apps que están en Google Play (aún no sé cuales son desarrollables con App Inventor):
 un gato que repite todo lo que dices pero con voz de gato (Talking Tom Cat)
 una curiosidad: buscar HDP en Google Play. Sale una aplicación fácil de hacer
 el “poeta vacilón” asocia un chiste al tono de notificación o tono de llamada
 Locainder. App con notificaciones por localización. Te avisa de algo cuando estás
en ese sitio.
Apps con Twitter... (aún no lo he conseguido, tal vez cuando

tenga el perfil de Twitter completo)
Ejemplo que debe funcionar:
https://sites.google.com/site/appinventormegusta/ejemplos/paseando-por.
Para que una App de AppInventor pueda “hablarse” con Twitter debe cumplir los
siguientes requisitos:
1. Que sea utilizada fuera de un centro de Conselleria, puesto que su red no permite
trabajar con Twitter (ni con Facebook ni muchos otros sitios web).
2. Que sea dada de alta en https://apps.twitter.com/. Para lograrlo, su nombre no
podrá contener la palabra “Twitter”. Por lo tanto, T5_TwitterSinManos no es válido,
aunque T5_PajaritoSinManos sí.
3. En el apartado Permissions deberá ponerse “Read and Write”, aunque yo prefiero
poner “Read, write, and direct messages”, si queremos que haga algo más que leer
mensajes. Al cabo de unos segundos, refrescar para ver si salen ya los permisos
cambiados pues, por defecto, son de sólo lectura.
4. En el apartado “API Keys” creo que hay que generar un “Token”. Sólo así
estaremos permitiendo que nuestra App esté autorizada para funcionar con nuestra
cuenta. Así que hay que pulsar sobre “Create my access token”. Al cabo de unos
segundos, refrescar para ver si sale ya la información correspondiente pero no
enseñarle a nadie tu “Access token secret”:

5. Utilizar las claves de la aplicación en los bloques de AppInventor:
6. Realizar las acciones después de recibir la autorización:
7. Si queremos combinar eso con lectura del texto recibido y reconocimiento de

nuestra voz para poder enviar sin tener que escribir nada, leer este vídeo:
http://youtu.be/-IpdxjJAPjs.

• APP5 Si tecleas no conduzcas – versión Twitter. Buscar “app inventor twitter

tweets” en Google:
◦ hay que tener en cuenta que en el instituto twitter no funciona (igual que
facebook). Sin embargo, sí que funciona con el emulador.
◦ https://www.youtube.com/watch?v=LlylLgI0610&list=WL&index=12 está más
claro, pero es lo mismo que el siguiente.
◦ “Tutorial De Aplicacion Twitter En app Inventor”:
▪ utiliza BlueStacks App Player for Windows como emulador.
▪ primero sólo debería permitir iniciar sesión, no escribir el mensaje. Una vez
identificado, permitirlo. Al pulsar el botón de envío, inhabilitar dicho botón
para evitar enviar dos veces con doble clic.
▪ Iniciar Sesión. Hay que dar autorización a la App, y eso se consigue con un
par de códigos que nos da Twitter cuando publicamos en dev.twitter.com,
como se verá más adelanta. Twitter1.ConsumerKey,
Twitter1.ConsumerSecret, Twitter1.Authorize.
▪ Finalizar Sesión. Twitter1.DeAuthorize.
▪ Enviar mensaje.Twitter1.SetStatus se pone el mensaje. Podríamos enviarlo
pulsando un botón que se activa con el evento “When Twitter1.isAuthorized”.
▪ El usuario es Twitter1.UserName, una vez autorizado.
▪ Se pueden escribir notificaciones con Notifier1.ShowAlert.
▪ En 25:23 con un IF comprueba que el mensaje no sea vacío antes de
publicarlo. A su manera, claro, podría haber utilizado un LENGTH.
▪ Explica cómo publicar una aplicación de Twitter, en
https://dev.twitter.com/apps/new. 28:53. creo que la aplicación debe tener
permiso de lectura y escritura para poder cambiar el estado y enviar
mensajes.
Busqueda del tesoro (GPS+QR)

Se esconden las balizas, que consisten en un QR.
Los jugadores deben llevar teléfonos móviles. Cuando uno llega a una baliza, la
escanea con el lector de QR y el juego lo procesa de manera que queda registrado en la
BD del árbitro en qué momento ha sido hallado.
Por si hubiera problemas de cobertura, el móvil puede almacenar el código leído junto
con la hora en que ha sido encontrado, para pasar los datos más tarde.
Cuidado, que no sea como esto: http://gymkhana.libresoft.es/.

Guía didáctica
Se pueden utilizar para exámenes:
 buscar "más mariquita", que son una serie de cosas a añadir rápidamente a la
mariquita. Se podría proporcionar con ".aia" todo lo necesario para ponerse manos
a la obra.
 hacer una App que sea capaz de escuchar lo que dices y escribirlo, es decir, una
aplicación para dictar a Android un texto. Añadirle un botón para que lea lo que ha
escrito.
 hacer una App de dibujo: rojo, avanza, derecha, avanza, avanza, amarillo, avanza.
Otras cosillas (formateo)

Este documento ha sido realizado con OpenOffice Writer. Aquí está explicado cómo se
han organizado los formatos de página para obtener estos encabezamientos y pies:
• la portada tiene el estilo “Primera página”.
• El índice tiene el estilo “Predeterminado” (aunque, como puede observarse, se le
aplica el de “Página derecha”).
• El estilo Encabezamiento1 se ha modificado. En flujo de texto, saltos, insertar,
página con estilo “página derecha”. La idea es que cada capítulo empieza en una
página derecha.
• El estilo “Página derecha” se ha modificado. En administrar se indica que el estilo
siguiente es “Página izquierda”.
• El estilo “Página izquierda” se ha modificado. En administrar se indica que el estilo
siguiente es “Página derecha”.
• En Formato → Página → Encabezamiento se ha activado. Además, se ha
desmarcado la casilla “contenido a la izquierda/derecha igual”. Luego, hacer cada
encabezamiento (izquierdo o derecho) ha costado, utilizando todo tipo de
artimañas (bordes de celda, de párrafo, sangría, ...)
• En formato → página → Pie de página se ha activado. Se ha dejado marcada la
casilla “contenido a la izquierda/derecha igual”.
Lo que publiqué
Acabo de subir "Curso de programación de Android.zip" a la carpeta de "Recursos y materiales", apartado
"Programación (1)".
Lo encuentro indicado para 3ESO, 1BACH, 2BACH. Los de 3ESO harían sólo las primeras actividades, en

1BACH podrían hacerse todas excepto las de Internet de las Cosas y Android Studio, y 2BACH todas.
Se trata de un curso de programación para Android con App Inventor con el siguiente contenido:
•buena parte del trabajo es una traducción del libro de O'Reilly al que he añadido actividades
adicionales. Se trata de actividades progresivas que van introduciendo conceptos a un ritmo que
cualquiera puede seguir
•está adaptado a la versión 2 de Inventor
•hay actividades adicionales, como la del "ahorcado"
•tiene un apartado dedicado al internet de las cosas, donde se ve cómo Arduino y Android pueden
convivir. Desde App Inventor prepararemos apps que manejarán a Arduino, el cual a su vez dará las
órdenes a otros dispositivos
•tiene también un apartado dedicado a Android Studio para hacer más fácil la transición de Inventor a
una herramienta más profesional

Curso de Programacion de Android

Cargado por

Copyright:

Formatos disponibles

Curso de Programacion de Android

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Programacion de Android

Cargado por

Copyright:

Formatos disponibles

Curso de

AUTOR: PEDRO FELIP BELENGUER

Ultima revisión: 19dic16

impresión o Exportación a PDF : 19dic16

© Pedro Felip Belenguer  2

© Pedro Felip Belenguer  3

Bibliografía recomendada para seguir aprendiendo_________________________________224

© Pedro Felip Belenguer  4

El material necesario para impartir este curso está al alcance de cualquiera:

© Pedro Felip Belenguer  5

Entre el material incluido podemos encontrar diferentes tipos:

¿A partir de qué edad se puede programar con App Inventor?

¿Por qué en inglés si se podría hacer en español?

© Pedro Felip Belenguer  6

Ahora, también en GitHub

© Pedro Felip Belenguer  7

1. Instalación de las herramientas

AppInventor es un entorno de desarrollo con las siguientes herramientas:

Visita http://appinventor.mit.edu y pulsa sobre . Necesitarás una cuenta

© Pedro Felip Belenguer  8

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

1.1 Conectar un dispositivo Android con AI Companion vía WiFi

© Pedro Felip Belenguer  9

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

1.2 Conectar Android vía USB sólo para transferir archivos

© Pedro Felip Belenguer  10

Una vez hayamos conseguido la conexión con el ordenador, lo aconsejable es navegar

© Pedro Felip Belenguer  11

1.3 Utilización de Dropbox, Google Drive o OneDrive para

1.4 Conectar un dispositivo Android vía USB para depuración

© Pedro Felip Belenguer  12

1.5 Instalar y utilizar el emulador (con pc medianamente

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

© Pedro Felip Belenguer  13

1.5.2 La otra manera de utilizar el emulador (válida para clientes ligeros)

© Pedro Felip Belenguer  14

1.6 Trabajar sin conexión (recomendado para utilizar en clase)

© Pedro Felip Belenguer  15

Es el momento de explorar. En Paleta/Interfaz de usuario (Palette/Basic) hallarás

© Pedro Felip Belenguer  16

© Pedro Felip Belenguer  17

© Pedro Felip Belenguer  18

© Pedro Felip Belenguer  19

© Pedro Felip Belenguer  20

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

© Pedro Felip Belenguer  21

Cambia el color de fondo de la Label1 desde BackgroundColor. Pon la letra en negrita

Vamos a mejorar la presentación. Selecciona el componente Screen1 dentro de

© Pedro Felip Belenguer  22

© Pedro Felip Belenguer  23

Pincha en el botón Blocks y accederás al editor de bloques. Fíjate en la parte izquierda

© Pedro Felip Belenguer  24

6.1 Utilizar el emulador (si trabajas en Linux y no tienes un

6.2 Conecta el teléfono móvil o la tableta Android

© Pedro Felip Belenguer  25

 Hay que seguir las instrucciones que pone en

Seguiremos estos pasos, todos en el teléfono móvil:

Hay tres opciones. La primera (Show Barcode) generará un código QR asociado a tu

© Pedro Felip Belenguer  26