Programación en Android con APP Inventor€¦ · código como APP Inventor. IDEs para Android En...

Programación Básica con App Inventor Mª Dolores Molina

Programación en Android con APP Inventor

¿Qué es un programa?Todos los usuarios de ordenadores utilizamos continuamente programas, desde el sistema operativoque nos permite comunicarnos con el ordenador, hasta el último videojuego que nos proporcionamuchas horas de entretenimiento, pero ¿realmente sabemos que es un programa?, esta y otraspreguntas son las que vamos a intentar contestar en este manual.

Un programa es un conjunto de líneas de texto escritas utilizando un lenguaje especial llamadolenguaje de programación, es decir, cuando un programador se plantea desarrollar un programadebe escribir órdenes utilizando un lenguaje de programación y almacenar estas órdenes en unfichero de texto, llamado fichero fuente. Este fichero fuente debe ser posteriormente traducido aórdenes que el procesador sea capaz de ejecutar, este proceso se realiza gracias a unos programasespeciales llamados compiladores. Los compiladores leen el código fuente escrito por elprogramador y lo transforman en un fichero ejecutable formado por órdenes que es capaz deejecutar el procesador, a este fichero ejecutable le llamamos programa. Visualmente el procesopodría ser resumido según el siguiente esquema:

Lenguajes de Programación

Un lenguaje de programación está formado por un conjunto de códigos fáciles de comprender por elprogramador y fáciles de transformar posteriormente en órdenes que el procesador pueda ejecutar.Existe multitud de lenguajes de programación enfocados normalmente al tipo de aplicación que seva a desarrollar, por ejemplo el lenguaje de programación C es muy utilizado para codificarprogramas para sistemas como por ejemplo el sistema operativo Linux que está diseñado utilizandoeste lenguaje, java es un lenguaje para crear aplicaciones que principalmente funcionen en internet,al igual que PHP.Se puede hacer una clasificación de los lenguajes de programación atendiendo a lo parecidos queson al lenguaje de procesador. Siguiendo esta clasificación podemos tener los siguientes tipos delenguajes:

✔ Lenguajes de bajo nivel: Son muy parecidos al lenguaje del procesador, y por tanto esbastante difícil codificar programas en ellos, se suelen utilizar para codificar las partes máscríticas de un programa, aquellas que es necesario que se ejecuten con mucha seguridad yrapidez, un ejemplo de este tipo de lenguajes es el lenguaje ensamblador.

✔ Lenguajes de nivel medio:Permiten el acceso directo a elementos del hardware como loslenguajes de bajo nivel pero también permiten crear estructuras más complejas y fáciles de

Fichero ejecutableFichero fuentecompilador


entender para el programador como los lenguajes de alto nivel, un ejemplo de este tipo delenguajes es C.

✔ Lenguajes de alto nivel: Se alejan de las características del hardware haciendo más fácil eltrabajo para el programador aunque también se pierde parte del control que los lenguajes debajo y medio nivel le permiten tener al programador sobre el hardware, ejemplos de este tipode lenguajes son C++, Java, PHP, etc...

Entornos Integrados de desarrollo

Son programas compuestos por un conjunto de herramientas de programación, que permiten alprogramador desarrollar todas las fases de la realización de un programa desde la edición,compilación, depuración, y ejecución desde una misma interfaz gráfica, simplificando así el trabajodel programador. Existen muchos entornos integrados de desarrollo (IDE), algunos específicos paraun lenguaje de programación y otros más genéricos que admiten distintos lenguajes. Algunos IDEsnecesitan que el programador introduzca código como Anjuta o Eclipse, pero existen también IDEsgráficos que permiten al programador crear programas sin la necesidad de introducir líneas decódigo como APP Inventor.

IDEs para Android

En este curso vamos a desarrollar aplicaciones para el sistema operativo Android, para ello tenemosdos alternativas:

1. El IDE Eclipse: Si queremos realizar nuestras aplicaciones desde cero tomando todo elcontrol del proceso necesitaremos instalar un IDE como Eclipse que incluye un emuladorAndroid para poder probar nuestros programas, ya que estamos desarrollando programaspara Android en un ordenador con un sistema operativo distinto ya sea Windows o Linux,como sería nuestro caso. En este caso será necesario introducir código en los lenguajes Javay XML. Esta forma de programar lleva mucho tiempo y es compleja ya que tendríamos queaprender ambos lenguajes desde cero.

2. El IDE App Inventor: En ese caso no necesitaremos escribir ningún tipo de código, ya quela herramienta que utilizamos generará el código por nosotros, de esta forma solo tenemosque concentrarnos en indicar que aspecto queremos que tenga nuestro programa y porsupuesto que funciones queremos que realice, todo ello desde un entorno de desarrollovisual. Para utilizar APP Inventor necesitaremos una cuenta Google.

Primeros pasos con APP Inventor Acceso desde Internet al entorno de Desarrollo

Para desarrollar nuestras aplicaciones con App Inventor necesitamos estar conectados a internet, yaque es una herramienta de desarrollo on-line. Los pasos para acceder al entorno de desarrollo sonlos siguientes:

1. Escribimos en la barra de direcciones de nuestro navegador la dirección:ai2.appinventor.mit.edu.


2. Nos identificamos con nuestro usuario y contraseña google.

3. Nos aparece la pantalla del IDE en inglés y seleccionamos en la parte superior el idiomaEspañol, tal y como se muestra en la siguiente imagen.

4. Pulsamos en la Opción Proyecto / Comenzar nuevo Proyecto...

5. Escribimos el nombre del proyecto y pulsamos Aceptar

6. Esperamos a que se cargue el entorno de desarrollo que nos mostrará una pantalla como laque podemos ver en la siguiente imagen.

Pantalla Inicial App Inventor

Pantalla con los comandos para crear un nuevo proyecto


Esta ventana nos muestra una vista de la ventana correspondiente a la herramienta App InventorDesigner, que es la que nos permite diseñar nuestra interfaz de usuario. Desde esta ventana tambiénpodremos acceder a la herramienta App Inventor Blocks Editor, pulsando el botón Bloques que seencuentra en la parte superior derecha de la ventana, que es la herramienta que nos va a permitirdefinir el comportamiento de los componentes que hemos incluido en nuestro diseño.

En el siguiente apartado explicaremos con más detalle cada una de las partes que componen ambasventanas y su funcionamiento.

Nuestra primera aplicación “Hola mundo”Pantalla principal del App Inventor (Diseñador)

Una vez que hemos accedido a la web del entorno de diseño nos y hemos creado nuestro primerproyecto, nos aparecerá la ventana principal que está dividida en los siguientes bloques:

1. La paleta contiene todos los elementos que podemos insertar en nuestra aplicación. Hayelementos gráficos como cuadros de texto, botones, lienzo de dibujo y elementos que no seven en la pantalla del móvil, como base de datos, acelerómetro, cámara de vídeo, etc.

2. El visor de la pantalla, simula la apariencia visual que tendrá la aplicación en el móvil. Paraañadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor. Loselementos que no tengan visibilidad hay que arrastrarlos también al visor y automáticamentese desplazarán debajo de él bajo el epígrafe “Componentes no visibles”.

3. Componentes muestra la lista de los componentes que se han colocado en el proyecto.Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor apareceráahí. Si se quiere borrar alguno es en la lista de componentes donde está el botón que permiteborrarlo.

4. Media muestra las distintas imágenes y sonidos que estarán disponibles para el proyecto.

Vista de la ventana Blocks Editor


Cualquier archivo de imagen o audio que se quiera usar en la aplicación hay que insertarlousando este apartado para que esté disponible.

5. Propiedades cada vez que en el visor se seleccione un componente, en Propiedadesaparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo, alhacer clic sobre un componente Campo de Texto se podrá cambiar en propiedades su color,texto, fuente, etc. Es una forma de trabajar muy parecida a la que se trabaja en Blogger parael diseño de páginas web.

Pantalla principal del App Inventor (Bloques)

Esta es la pantalla que usaremos para hacer los programas que interaccionan con el interfaz gráfico.Se puede apreciar como está dividida en dos partes muy claras: un enorme lienzo en “blanco” a laderecha donde se irán arrastrando los bloques de programación, el Visor, y a la izquierda los menúsque dan acceso a esos bloques,Bloques.

El menú está formado por tres pestañas: Integrados, Screen 1 y Cualquier componente, y bajocada una de ellas aparecen a su vez distintos menús que permitirán seleccionar los bloquesdisponibles en cada caso, para desplegarlos pulsamos el botón + que aparece a su izquierda.

1. Integrados contiene los bloques que componen el lenguaje de programación propiamentedicho, distribuidos en las secciones Control, Lógica, Matemáticas, Texto …

2. Screen1 ya se ha nombrado anteriormente y contendrá una lista de los elementos que hayansido colocados en la pantalla del diseñador para poder acceder mediante el programa a suspropiedades y eventos. Si nuestro programa tiene más de una pantalla nos aparecerá lapantalla que tengamos seleccionada en ese momento.


3. Cualquier componente es una pestaña que permite acceder de forma global a algunaspropiedades comunes a todos los elementos que hemos colocado en el Visor y que sean deun mismo tipo. Por ejemplo, al colocar un par de botones aparecerá “Cualquier botón” y sepodrán cambiar ahí algunas propiedades que afecten simultáneamente a los todos losbotones.

Dentro de la ventana visor podemos ver el icono de una papelera que nos va a permitir borrar losbloques que no nos interesen y el icono de una mochila que nos va a permitir copiar y pegarbloques entre distintas ventanas o proyectos.

Diseñando “Hola Mundo”

Nuestra primera aplicación va a ser muy simple respecto a su diseño se va a componer de lossiguientes elementos:

1. Un botón que ocupará toda la pantalla y en el que pondremos una imagen para rellenar todoel botón. Para añadirlo a la pantalla nos vamos a la paleta en la ventana diseñador y seleccionamos laopción Interfaz de usuario / Botón y arrastramos a la pantalla del visor sin soltar.Para modificar sus propiedades nos vamos a la ventana Propiedades y modificamos lassiguientes:

a)Alto: Ajustar al contenedor

b)Ancho: Ajustar al contenedor

c) Imagen: Subimos la imagen que queremos que muestre el botón.

2. Un cuadro de texto que mostrará el mensaje “Hola Mundo” en pantalla.Para añadir el cuadro de texto accedemos a la opción Interfaz de usuario / Campo de textoy arrastramos hacia la parte inferior del visor como hemos realizado en el paso anterior parael botón. Para modificar sus propiedades nos vamos a la ventana Propiedades y modificamos lassiguientes:

a)Texto: Escribimos el mensaje “Hola Mundo”

3. Un fichero de audio que reproducirá el mismo mensaje cuando hagamos clic en el botón.Para añadir el fichero de sonido, que será un elemento no visible en la pantalla, accedemosal menú Medios / Sonido y arrastramos hacia el visor.Para seleccionar el sonido que queremos reproducir nos vamos a la ventana Propiedades ymodificamos las siguientes:

a)Origen: Seleccionamos el fichero que contiene el mensaje que vamos a reproducir.

Con esto hemos terminado la parte del diseño que como ya avanzamos es bastante sencilla para esteprimer ejemplo.

Programando “Hola Mundo”

Una vez que hemos terminado de diseñar el interfaz gráfico debemos programar las acciones quequeremos que realice nuestro programa, toca ahora añadir bloques de instrucciones y para ellodebemos acceder a la pantalla de Bloques desde la ventana principal.


Los bloques que vamos a programar se muestran en la siguiente figura:

Estos dos bloques van a permitir que cuando hagamos clic en el botón que hemos añadido, sereproduzca el sonido que hemos incluido en nuestra aplicación. Vemos por sus colores que uno delos bloques pertenece al grupo de control y el otro al grupo procedimientos.

Probando nuestras aplicaciones

Una vez que hemos desarrollado nuestras aplicaciones es necesario comprobar su funcionamiento,en la mayoría de las ocasiones los programadores trabajan con el mismo sistema operativo para elque están desarrollando la aplicación por lo que pueden ir probando al mismo tiempo que vandesarrollando, pero en el caso de Android el sistema operativo no está pensado para el desarrollo deaplicaciones, solo para su utilización, y por tanto los programadores de aplicaciones para Androidtrabajan con sistemas operativos distintos al que va a utilizar la aplicación que están diseñando. Los programadores Android necesitan transferir sus programas a un dispositivo que tenga instaladoeste sistema operativo, una tableta o un smartphone, o bien contar con un emulador, es decir, unprograma que simula el funcionamiento de Android bajo el sistema operativo que esté utilizando elprogramador.

El IDE App Inventor permite probar nuestras aplicaciones de tres modos diferentes:

1. Transfiriendo el programa a un dispositivo Android mediante la red wifi

2. Ejecutando un emulador para el sistema operativo que estemos utilizando

3. Transfiriendo el programa a un dispositivo Android mediante conexión USB

De las tres opciones disponibles desde App se recomienda la primera por ser la más rápida y la quemenos problemas presenta, en caso de no disponer de un dispositivo con Android se recomienda lasegunda opción y se advierte que la tercera opción es la que mayor número de problemas puedepresentar. En este manual vamos a explicar el funcionamiento solo de la primera opción.

Transferencia del programa a un dispositivo Android mediante wifi

Para probar nuestros programas en un smartphone o tableta con Android debemos realizar lasiguiente secuencia de comandos:

1. Instalamos en nuestro teléfono o tableta el programa MIT AI2 Companion desde la PlayStore. También tenemos accesible un código QR desde la página de App Inventor.


2. Accedemos al menú Conectar / AI Companion en la página web del entorno de desarrolloApp Inventor en nuestro ordenador.

3. Esperamos a que la web del entorno nos muestre el código de 6 dígitos y el código QR quese ha generado para establecer la conexión entre nuestro ordenador y nuestro dispositivoAndroid

4. Ejecutamos en nuestro dispositivo Android la aplicación MIT AI2 Companion yseleccionamos una de las dos opciones de la que disponemos, o bien tecleamos el código de6 dígitos que se ha generado o bien escaneamos el código QR correspondiente, tal y como semuestra en la siguiente imagen.

Conexión vía Wifi

Código de conexión wifi


5. Una vez se ha establecido la conexión podremos ver en nuestro dispositivo Android lapantalla que hemos diseñado en la página web de nuestro ordenador y podremos probar elfuncionamiento de todas las opciones que hayamos programado.

6. Una vez se ha establecido la conexión con nuestro dispositivo se irán enviando mediante laconexión wifi todos los cambios que vayamos realizando en el diseño de nuestro programapor lo que solo es necesario realizar este proceso al inicio de la sesión o si se produce algúnproblema de conexión durante la misma.

7. Para cerrar la sesión debes salir del programa Companion desde el dispositivo Android ycerrar al sesión en la página web del entorno de desarrollo.

Instalando nuestras aplicaciones en un dispositivo móvil

La web de diseño de App Inventor nos ofrece también la posibilidad de instalar la aplicación deforma definitiva en nuestro dispositivo móvil cuando hayamos terminado de diseñarla. Para realizaruna instalación definitiva de nuestro programa en un dispositivo Android debemos realizar lasiguiente secuencia de comandos:

1. Realizamos la conexión del dispositivo con la web App mediante el menú Conexión / AICompanion.

2. Accedemos al menú Generar / App (generar código QR para el archivo .apk) esperamos a


que la aplicación genere el código QR correspondiente, esto puede tardar desde unossegundos a unos minutos en función de la complejidad de nuestra aplicación, ya que duranteeste proceso se realiza la compilación del programa, ya que hasta este momento solo hemosgenerado el código.

3. Accedemos a la aplicación MIT AI2 Companion desde nuestro dispositivo móvil yseleccionamos la opción Scan QR code, esperamos respuesta desde la dirección web que seha generado y esperamos a que se realice la instalación en nuestro dispositivo móvil.

Hemos de aclarar que este proceso nos va a permitir tener nuestro programa en un dispositivo móvilpero tal y como se nos indica en el mensaje que se muestra al generar el código QR la aplicaciónestará disponible en esta dirección de forma temporal (2 horas), en ningún caso hemos publicadonuestra aplicación en Play Store. Para publicar nuestra aplicación y compartirla con el resto deusuario deberemos realizar un proceso distinto que no vamos a incluir en este manual.

AiLiveComplete un servidor local para App Inventor 2

¿Qué es AiLiveComplete?

Hasta ahora hemos visto como utilizar App Inventor 2 desde la web gracias a una conexión aInternet, pero puede ocurrir que no dispongamos de esta conexión y queramos seguir utilizando esteentorno de desarrollo. Para solventar esta situación surge Ailive Complete un proyecto Open Sourcedesarrollado por Hossein Amerkashi que nos ofrece en un único paquete todo lo necesario paraejecutar el entorno App Inventor 2 en modo local, es decir, sin necesidad de conexión a Internet.

Para poder ejecutar el servidor AiLive que ya está instalado en vuestros ordenadores deberéis seguirla siguiente secuencia de instrucciones:

1. Arrancamos el servidor de diseño haciendo doble clic en el icono que tenéis en el escritorio.

2. Una vez que el servidor esté funcionando podemos minimizar la ventana en la que se ejecutapara que no interfiera en nuestro trabajo.

3. Abrimos el navegador y escribimos en la barra de ubicación: localhost:8888, nos aparecerála misma ventana que hemos utilizado con App Inventor en el modo online.

Probando nuestros programas en un dispositivo Android con Ailive Complete

Para probar las aplicaciones en nuestro dispositivo Android necesitamos que la versión delprograma Companion de la web de desarrollo offline coincida con la que tenemos instaladaen nuestro dispositivo móvil. Para ello tendremos que descargar e instalar en nuestrodispositivo Android el programa AI2Offline desde la siguiente dirección:https://sourceforge.net/projects/ailivecomplete/files seleccionando el enlaceAI2OfflineCompanion.apk.

https://sourceforge.net/projects/ailivecomplete/files


Generando ficheros de instalación en Android con Ailive Complete:

Para compilar nuestros programas en la versión offline e instalarlos en nuestro dispositivo Androidnecesitaremos ejecutar el servidor que nos permite la construcción de nuestros ficheros. Paraejecutar el servidor realizaremos la siguiente secuencia de comandos:

1. Arrancamos el servidor constructor haciendo doble clic en el icono que tenéis en elescritorio.

2. Una vez que el servidor esté funcionando podemos minimizar la ventana en la que se ejecutapara que no interfiera en nuestro trabajo

Una vez tengamos funcionando el servidor en un terminal ya podremos utilizar las opciones delmenú construir del entorno de desarrollo.

Advertencia: Debemos tener en cuenta un pequeño problema que he detectado cuandoejecutamos la opción Generar / App (genera código QR para el archivo .apk).

Al generar el código QR nos muestra una dirección del tipo http://localhost:888/b/xxxx donde loscuatro últimos son valores alfanuméricos y varían de una ejecución a otra. Pues bien al leer elcódigo QR desde la aplicación AI2 Offline de nuestro dispositivo Android es imposible que serealice ninguna acción ya que esta dirección correspondería al propio dispositivo (localhost) y no ala dirección IP de nuestro ordenador, que es donde se encuentra el enlace para realizar la descargade la aplicación a nuestro Android. Al intentar acceder a esta dirección web desde AI2 Offline senos mostrará el siguiente mensaje “Error 1101: Unable to get a response with the specifiedURL:http://localhost:8888/b/xxxx”. Para solucionar este problema basta con cambiar la partelocalhost de la URL por la dirección IP de nuestro ordenador. Veamos un ejemplo, si la IP denuestro ordenador fuese 192.168.1.2 y la dirección que se genera en AI2 Offline fuesehttp://localhost:8888/b/k5pn debemos cambiar la dirección por http://192.168.1.2:8888/b/k5pn en elcampo del programa AI2 Offline y pulsar la opción connect with code, automáticamente nosaparecerá la ventana para ejecutar la instalación de la aplicación en nuestro dispositivo Android.

Creando programas con App InventorElementos de programación Orientada a Objetos

La plataforma App Inventor emplea la filosofía de la programación orientada a eventos, en la que laestructura y la ejecución del programa no se establece en función de una secuencia de comandos,como ocurre con la programación secuencial, si no que se establece en función a los eventos osucesos que ocurran en el sistema. La programación orientada a eventos está basada en loslenguajes de programación orientados a objetos, como es el caso de Java o C++, de hecho laplataforma App Inventor utiliza la librería Open Blocks de Java para crear un programa mediantebloques.Como podemos ver es importante conocer algunos conceptos básicos de la programación orientada

http://localhost:888/b/xxxx


a objetos para comprender mejor el funcionamiento de App Inventor.

Objeto: En programación es la representación en un programa de un concepto y contiene toda lainformación necesaria para definirlo: datos que describen sus propiedades y operaciones o métodosque se pueden realizar con él. Por ejemplo podemos definir el objeto botón1 que tendrá una serie depropiedades como su color, su forma, su tamaño con unos valores concretos y las operaciones quese pueden realizar sobre él pulsarlo, moverlo, cambiar su tamaño ….

Clase: Una clase es una plantilla que define las propiedades y operaciones que son comunes paratodos los objetos de un cierto tipo, es decir, es una abstracción de objetos. Para entenderlo mejorutilicemos un ejemplo podemos definir la clase botón con sus propiedades: nombre del botón,tamaño, color, texto que muestra ... y las operaciones que podemos realizar con él: pulsarlo,moverlo, cambiar su tamaño, etc. A partir de esta clase podremos ir creando distintas instancias deesa clase u objetos y tendremos el objeto botón1 cuyo nombre será botón1, tendrá un tamaño de 15px, su color será gris y mostrará el texto guardar y el objeto botón2 cuyo nombre será botón2, sucolor será gris y mostrará el texto borrar. Como podemos ver los objetos son instancias, ejemploscon valores particulares, de una clase.

Propiedades: Son las características determinadas de un objeto, en el ejemplo anterior laspropiedades del objeto botón serán nombre, tamaño, color, texto que muestra … Estas propiedadesse pueden cambiar por la ejecución de un método.

Métodos: Son todas las operaciones que un objeto puede realizar, en programación se escribencomo un conjunto de instrucciones, procedimiento o función. Los métodos pueden cambiar laspropiedades de un objeto o generar mensajes para otros objetos del programa. En el ejemplo losmétodos podrían ser clic_botón para pulsarlo, mover_botón para moverlo, redimensionar_botónpara cambiar su tamaño ...

Eventos: Es un suceso en el sistema (tal como una interacción del usuario con la máquina, o unmensaje enviado por un objeto). También se puede definir como evento la reacción que puededesencadenar un objeto; es decir, la acción que genera. En el ejemplo un evento puede ser colocarel cursor sobre el botón, hacer clic sin soltar sobre una de sus esquinas … El sistema manejaestos eventos enviando un mensaje al objeto adecuado para ejecutar un método determinado.

Conceptos en App Inventor

Componentes: Los componentes son los elementos básicos que utilizamos para hacer aplicacionesAndroid. Son como los ingredientes de una receta. Algunos componentes son muy simples, comouna Etiqueta (Label), que sólo muestra el texto en pantalla, o un botón (Button) que se pulsa parainiciar una acción. Otros componentes son más elaborados: un lienzo (Canvas) que puedealmacenar imágenes, un sensor de movimiento (AccelerometorSensor) que funciona como unmando de Wii y detecta cuando se mueve o agita el teléfono, los componentes para hacer o enviarmensajes de texto, los componentes que para música y vídeo, los componentes para obtenerinformación de sitios Web, y así sucesivamente. Los componentes tienen propiedades que sepueden ajustar para cambiar la forma en que aparece dentro de la aplicación.

Propiedades: Son las características determinadas de un componente como su color, tamaño,posición … . Estas propiedades se pueden cambiar.


Bloques: El editor de bloques nos va a permitir definir como se va a comportar una aplicación. Si lorelacionamos con los conceptos de la programación a objetos, los bloques nos permiten cambiar laspropiedades, definir los procedimientos y controlar los eventos sobre los objetos que forman partede nuestro programa.

Eventos: Son sucesos del sistema, en App Inventor toda la programación está orientada a loseventos, es decir, no llevan a cabo un conjunto de instrucciones en un orden predeterminado, comoen la programación secuencial, sino que reaccionan ante eventos. Al hacer clic en un botón,arrastrar el dedo o tocar en la pantalla son eventos. Con App Inventor, toda la actividad se produceen respuesta a un evento. Cuando se producen un evento, la aplicación reacciona llamando a unasecuencia de instrucciones como establecer el color de fondo de un botón a azul o cambiar el textode una etiqueta.

Los eventos pueden ser divididos en 2 tipos diferentes: automáticos e iniciados por el usuario.Hacer clic en un botón , tocar o arrastrar en la pantalla, inclinar el teléfono son eventos iniciados porel usuario. Una colisión entre Sprites (mapas de bits animados) o de estos con los bordes de uncanvas (lienzos sobre los que dibujar) son eventos automáticos.

Elementos de programación en App Inventor (Paleta)

Como ya hemos indicado desde la paleta podemos ir añadiendo elementos a la interfaz gráfica denuestro programa. Todos los elementos que podemos añadir se encuentra agrupados en lossiguientes menús:

• Interfaz de usuario: Dentro de este grupo podemos encontrar los componentes básicos quepodemos incluir en nuestra aplicación como botones, lienzos para dibujar (canvas), casillasde verificación, imágenes, etiquetas, listas, pantallas, cuadros para contraseñas, cuadros detexto … .

• Disposición: Dentro de este grupo podemos encontrar herramientas para posicionarelementos en la pantalla de forma horizontal con o sin scrolls, vertical con o sin scrolls y enforma de tabla.

• Medios: Muestra los componentes multimedia que podemos incluir en nuestrasaplicaciones, como la grabadora de audio y vídeo, la cámara, selectores de imágenes,reconocimiento de voz, etc.

• Dibujo y animación: Contiene los siguientes elementos:• Bola: Es una imagen animada, sprite, que se parece a una pelota. La bola debe estar

contenida en un lienzo, canvas, y reacciona a toques, arrastres, interactuar con otrossprites y con los bordes del lienzo.

• SpriteImage: Es un objeto animado que está contenido en un lienzo, al igual que lasbolas puede interactuar con otros sprites con los lienzos y con las bolas.

• Lienzo: Es un panel bidimensional sensible al tacto en el que podemos dibujar y moverobjetos animados como sprites y bolas.


• Sensores: En este menú se encuentra los componentes que permiten manejar los siguientessensores de nuestro dispositivo móvil:• Acelerómetro: Este componente recibe señales del acelerómetro del dispositivo

Android, que detecta sacudidas y mide la aceleración en tres dimensiones. Laaceleración se mide en unidades del Sistema Internacional de unidades (m /s2).

• Sensor de posicionamiento: Este componente proporciona la ubicación del dispositivoAndroid, utilizando el GPS si está disponible o un método alternativo en caso contrario,como pueden ser las torres de telefonía móvil o las redes inalámbricas conocidas. Paraque funcione el dispositivo Android debe tener activada la función GPS.

• Sensor de Orientación: Puede utilizarse el componente sensor de orientación paradeterminar la orientación espacial del teléfono, este sensor informa de los siguientes tresvalores, en grados:• Giro:0 grados, cuando el dispositivo esté nivelado, que aumenta a 90 grados cuando

el dispositivo se inclina sobre su lado izquierdo, y disminuye hasta -90 gradoscuando el dispositivo se inclina sobre su lado derecho.

• Inclinación:0 grados, cuando el dispositivo esté nivelado, que aumenta a 90 gradoscuando el dispositivo se inclina sobre su parte superior (la del auricular),aumentando aún más, hasta 180 grados, cuando se da la media vuelta. Del mismomodo, cuando el dispositivo se inclina sobre su parte inferior (la del micrófono), elángulo disminuye a -90 grados, llagando a -180 grados,al dar la media vuelta.

• Azimut:0 grados, cuando la parte superior del dispositivo (la del auricular) estáapuntando hacia el norte, 90 grados cuando se está apuntando al este, 180 gradoscuando se está apuntando al sur, 270 grados cuando se apunta al oeste, etc.

• Social: Contiene herramientas para gestionar nuestras aplicaciones en las redes socialescomo un selector de contactos, selector de correos electrónicos, aplicación para realizarllamadas telefónicas o enviar mensajes de texto, sms.

• Almacenamiento: Este menú incluye herramientas para almacenar datos tanto en nuestrodispositivo como en la web como los siguientes:• Ficheros: Permiten almacenar datos en modo local en nuestro dispositivo móvil.• Fusiontables: Que es un servicio de base de datos proporcionado por Google• TinyBD: Son bases de datos locales específicas para las aplicaciones App Inventor,• MiniWebDB: Son componentes para comunicarse con bases de datos que están

almacenadas en internet.

• Conectividad: Incluye herramientas para permitir la comunicación de nuestra aplicación ydispositivo con otras aplicaciones, dispositivos e internet.

• LEGO MINDSTORMS: Incluye herramientas para gestionar el control de un robot LEGOMINDSTORM.

• Experimental: Incluye herramientas en fase de desarrollo como FirebaseDB que permitealmacenar datos en una base de datos gestionada desde FirebaseDB, que es un servicio webque nos permite gestionar bases de datos en la nube.

• Extensión: App Inventor permite a los desarrolladores ampliar su funciones tanto de forma


ilimitada. Se puede realizar utilizando Java, este menú permite incluir estas extensiones ennuestra sesión con el entorno de trabajo.

Para una descripción detallada de las propiedades, eventos y métodos de cada uno de loscomponentes que aparecen en el menú paleta podemos visitar la siguiente webhttps://sites.google.com/site/aprendeappinventor/documentacion.

Elementos de programación en App Inventor ( Menú Bloques)

En cualquier lenguaje de programación tradicional como Java deberíamos empezar a estudiar loselementos que componen el lenguaje y la sintaxis del mismo en el caso de App Inventor solo seránecesario aprender los elementos que componen el lenguaje y nos ahorraremos el problema de lasintaxis, esto nos ahorrará tiempo de aprendizaje, además los errores de sintaxis es el principalfuente de problemas para los programadores que están empezando.

Como ya hemos indicado vamos a programar utilizando bloques y en App Inventor los bloquesaparecen organizados en tres menús: Integrados, Screen, Cualquier componente, y dentro de estosmenús se agrupan a su vez por funciones, en esta sección vamos a ir explicando cada una de estasfunciones.

1. Bloques del menú Integrados: Contiene los bloques que componen el lenguaje propiamentedicho. Estos bloques se pueden agrupar en las siguientes funciones:

a) Control: De color marrón, corresponden a estructuras para controlar la secuencia deacciones en el programa, dentro de este grupo podemos encontrar los siguientes tipos:

• Condicionales: Son bloques que permite tomar decisiones, van a ejecutar unconjunto de bloques cuando se cumpla una condición, dentro de este grupo están lassentencias: si entonces, si entonces sino, si entonces sino si entonces.

• Bucles: Permite repetir un conjunto de bloques un número determinado de vecesestablecido por el programador como los bloques por cada número, por cadaelemento en la lista o bien en función de que se cumpla una determinada condicióncomo los bloques mientras comprobar … ejecutar.

• Otras: Dentro de este grupo tenemos desde sentencias de control que permitenejecutar un conjunto de sentencias en función de una condición y devolver un valortras la ejecución para su posterior comprobación como la sentencias si entoncessino (no confundir con las instrucciones condicionales que no retornan valores),abrir otra pantalla, cerrar pantalla, cerrar la aplicación.

b) Bloques del menú Lógica: Permite definir valores booleanos cierto, falso, operacionesde comparación igual y distinto (permite comparar números, cadenas de caracteres ylistas) y operaciones lógicas como y, o, no.

c) Bloques del menú Matemática: Permite definir valores numéricos, operacionescomparativas como mayor, menor, mayor o igual, menor o igual, igual y distinto,operaciones matemáticas de sumas, restas, multiplicaciones, divisiones, potencias …

d) Bloques del menú Texto: Permite definir y realizar operaciones con cadenas de

https://sites.google.com/site/aprendeappinventor/documentacion


caracteres como unir, longitud, está vacío, comparar textos …

e) Bloques del menú Listas: Permite definir y realizar operaciones con listas como crearlista vacía, construye lista, añadir elementos a la lista …

f) Colores: Permite definir colores para distintos elementos como botones, pantallas,cuadros de texto o textos.

g) Variables: Permite definir y realizar operaciones con variables, Una variable es unespacio de memoria RAM en la que el programador puede almacenar valores para poderutilizarlos en sus programas.

h) Procedimientos: Permite definir y realizar operaciones con funciones o procedimientos.Una función o procedimiento está formado por un conjunto de bloques al que se leasocia un nombre común. Mediante su nombre podemos invocar (llamar) a este conjuntode instrucciones tanta veces como necesitemos sin necesidad de volver a escribirlo. Ladiferencia entre un procedimiento y una función es que el procedimiento ejecuta unconjunto de instrucciones y no devuelve ningún valor y la función ejecuta un conjuntode instrucciones y devuelve o retorna un valor al programa desde el que ha sido llamado.

2. Bloques del menú Screen: Tal y como hemos explicado en este menú se van a mostraraquellos procedimientos y eventos asociados a los elementos que hayamos incluido en laventana con la que estemos trabajando. El contenido de este menú irá variando por tanto enfunción de los elementos que hayamos incluido en nuestro diseño.

3. Bloques del menú Cualquier componente: Esta ventana se utiliza para modificar propiedades a elementos comunes dentro de la pantalla, por ejemplo el color de todos los botones que hayamos incluido en una misma ventana.

Para una descripción detallada de todas las instrucciones las podemos encontrar en Inglés en lasiguiente dirección http://appinventor.mit.edu/explore/ai2/support/blocks/control.html y en Españolen la siguiente dirección http://codigo21.educacion.naEvarra.es/autoaprendizaje/descripcion-de-los-bloques-integrados-de-app-inventor-2/.

Solución de problemas mediante secuencias de instrucciones

La programación consiste en dividir un problema complejo en varios problemas mas sencillos deresolver, pero que al completarnos nos den la solución del problema que habíamos planteadooriginalmente, es decir, la programación se basa en el principio del “Divide y Vencerás”.

En nuestro primer ejemplo vamos programar una sencilla calculadora en la que solo vamos a podersumar, restar y multiplicar. Con la realización de este programa vamos a aprender los siguientesconceptos:

• Colocar elementos en pantalla con los bloques de disposición: Por defecto App Inventorsolo nos permite colocar los elementos en pantalla uno debajo de los otros, para poderrealizar otra distribución de objetos en pantalla deberemos emplear los bloques Distribuciónde la Paleta. Dentro de este grupo podremos encontrar bloques para realizar unadistribución horizontal, una distribución vertical o una distribución tabular en la que

http://codigo21.educacion.navarra.es/autoaprendizaje/descripcion-de-los-bloques-integrados-de-app-inventor-2/


http://appinventor.mit.edu/explore/ai2/support/blocks/control.html


podremos definir el número de filas y el número de registros, que corresponderá con elnúmero de columnas.

Imagen de las propiedades de la distribución tabular

• Funcionamiento de los objetos Etiquetas, Campo de texto y Botón: En este programavamos a utilizar etiquetas para dar información al usuario, campos de texto para introducirdatos al programa y mostrar resultados al usuario, lo que en programación tradicionalllamamos variables, y botones para introducir las operaciones de nuestra calculadora.

• Realizar operaciones matemáticas: Los bloques matemáticos nos van a permitir realizaroperaciones como suma, resta, multiplicación, división, … . En este ejemplo vamos autilizar solo las operaciones sumar, restar y multiplicar.

El entorno de programación App Inventor obliga al programador a realizar el diseño del programaen dos pasos distintos y bien diferenciados que son los siguientes:

1) Creación de la interfaz de usuario: Este proceso se realiza en la pantalla de Diseño yconsiste en añadir a una o varias ventanas todos los elementos necesarios para la ejecucióndel programa. Todo programa App Inventor se ejecuta dentro de una ventana, la primeraacción de un programa en App Inventor es inicializar dicha ventana. Es posible crear más deuna ventana para un mismo programa. Cada ventana debe tener un nombre diferente pero laprimera ventana con la que comienza el programa debe siempre llamarse “Screen1”.Durante el diseño el programador deberá crear las ventanas que el programa necesite para suejecución e incluir en ellas todos los elementos necesarios como etiquetas, botones, cuadrosde texto, etc. Debemos tomarnos el tiempo suficiente para diseñar nuestra interfaz y esbastante conveniente realizar un boceto previo de la misma. Un mal diseño de la interfaz nospuede obligar a tener que replantear todo el proceso de programación.A la hora del diseño de la interfaz será necesario ir nombrando todos aquellos elementos quevayamos incluyendo en la pantalla, los nombres de los elementos deben permitir reconocerclaramente el elemento al que hacen referencia y distinguirlo del resto, ya que en la pantallade diseño, donde deberemos programar su comportamiento, no podremos ver el contenidode la interfaz. Es conveniente establecer unas normas a la hora de nombrar los elementos yrespetarlas. Los nombres de los elementos en pantalla no deben tener acentos, ni espacios,ni la letra ñ, para evitar problemas posteriores en el funcionamiento del programa.


2) Creación de las instrucciones para programar la interfaz: Este proceso se realiza en lapantalla de bloques y consiste en programar el comportamiento de cada uno de loselementos que hemos incluido en la interfaz para que el programa funcione correctamente.En esta pantalla no podremos ver el contenido de la interfaz, de ahí que sea tan importanteseguir unas normas que nos permitan distinguir por su nombre cada uno de los elementosque aparecen en pantalla.

En este primer ejemplo vamos a crear un programa que muestre una ventana como la que semuestra en la imagen:

Imagen ejemplo1

El funcionamiento del programa será el siguiente:

• Campos de texto numero1 y numero2: Será utilizados por el usuario para introducir losvalores con los que vayamos a operar. Sólo podrán almacenar números, esta condición laestableceremos marcando la opción “Solo números” que aparece en la ventana depropiedades de los campos de texto.

• Campo de texto resultado: Estará bloqueado para edición, es decir, solo lo utilizaremos paramostrar texto, no podremos introducir texto en él. Para programar este comportamientodesmarcaremos la opción “Habilitado” que aparece en la venta de propiedades de loscampos de texto.

• Etiqueta1: Aunque no se ve, porque inicialmente está vacía almacenará la operación quevayamos a realizar, es decir, almacena un + si sumamos, un – si restamos …

• Etiqueta2: Este campo almacena el signo = y solo la vamos a utilizar para mostrar este valorpor pantalla.

• Botones +, - , x: Al hacer clic sobre estos botones almacenaremos el signo correspondienteen la variable Etiqueta1, realizará la operación correspondiente y mostrará el resultadoutilizando el campo de texto resultado. En la imagen siguiente podemos ver la secuencia de instrucciones, es decir, el orden en elque se deben colocar los bloques para que los botones realicen la función correcta:

Bloques del programa calculadora


Si miramos con atención la imagen veremos un primer bloque asociado a la ventana Screen1,“Cuando Screen1.Inicializar”, este es el primer evento que se va a realizar al ejecutar el programa.En este caso hemos utilizado este bloque para inicializar a cero o blanco todos los valores de loselementos que tenemos en pantalla para asegurarnos de una ejecución limpia del programa, es decir,que no mantiene valores de ejecuciones anteriores.Como podemos ver también hemos deshabilitado el campo resultado para que no se puede escribiren él ya que también es posible cambiar los valores de la ventana propiedades de un elemento entiempo de ejecución mediante la inclusión del bloque correspondiente.

Tomamos decisiones y Creamos variables (comprobamos si un número es par o impar)

• Definir variables:Las variables son posiciones de memoria en las que podemos guardarinformación. Muchos de los elementos que incluimos en la interfaz como las etiquetas,campos de texto, selector de lista, … pueden utilizarse para almacenar valores y por tantofuncionan como variables, pero en ocasiones necesitamos almacenar información que no vaa aparecer en pantalla, o cuyo valor no conocemos previamente, en estos casos seránecesario definir variables en tiempo de ejecución del programa mediante la inclusión de subloque correspondiente. Como en casi todos los lenguajes de programación App nos permitedefinir dos tipos de variables:

1) Variables globales: Se crean cuando se carga el programa, es decir, se reserva el espaciode memoria para ellas cuando el programa se crea y no se destruyen hasta que elprograma no ha finalizado, por lo que podremos acceder a su contenido desde cualquierparte del programa. Este tipo de variables se definen cuando va a ser necesario mantenerun valor durante toda la ejecución de un programa, no se debe abusar de su uso puestoque aumentan mucho el espacio necesario en memoria para la ejecución del programa.

2) Variables locales: Se crean dentro de un bloque de código, es decir, se reserva el espaciode memoria para ellas en el momento en el que se ejecuta el bloque y se destruyencuando el bloque termina su ejecución. Esto supone que no podremos acceder a sucontenido desde fuera de ese bloque. Este tipo de variables se definen para ahorrarespacio de memoria en ejecución.

Para nuestro programa vamos a necesitar una variable que almacenará el valor del resto de


la división entera entre el número que ha introducido el usuario por pantalla y el número 2.Si el resto es cero el número es par, si no lo es el número es impar. Esta variable será global,es decir, existirá durante todo el proceso de ejecución y para definirla utilizaremos el bloqueInicializar global xxx como donde xxx será el nombre que hayamos elegido para identificarla variable. Para recuperar el valor que almacena una variable utilizaremos el bloque tomarpara cambiar el valor que almacena una variable utilizaremos el bloque poner.

• Tomamos decisiones: Como hemos indicado en el párrafo anterior será necesario evaluar elcontenido de la variable que almacena el resto de la división entera y realizar un conjunto deacciones diferentes según su valor, es decir, tendremos que tomar diferentes decisiones enfunción del valor que tome la variable. La toma de decisiones en programación se realizautilizando la sentencia condicional “si, sino”. Este bloque se encuentra dentro del bloque decontrol y su funcionamiento se muestra en la siguiente imagen:

Imagen ejemplo 2

La sentencia si-sino se puede anidar, es decir, colocar unas dentro de otras creando así unaestructura que permita tomar múltiples decisiones en función de un conjunto de valores. En elsiguiente ejemplo hemos creado un programa que convierte una nota numérica en sucorrespondiente nota alfanumérica. El diseño de la pantalla se muestra en la imagen siguiente:

El funcionamiento del programa se muestra en la siguiente imagen:Imagen ejemplo3


Repitiendo acciones utilizando bucles (calculamos una tabla de multiplicar)

En ocasiones es necesario repetir una secuencia de acciones un número determinado de veces omientras se cumpla una determinada condición, este tipo de acciones se realizan en programaciónutilizando los bucles. En App Inventor disponemos de varios tipos de bucles, en este ejemplo vamosa utilizar el bucle “por cada” y el bucle “mientras”. En el bucle por cada se repite una acción comenzando en el valor inicial, terminando con el valorfinal y con un incremento indicado en este campo. Todos los valores desde el inicial hasta el final sevan almacenando en una variable local que por defecto tiene el valor número. En este tipo de buclesel programador conoce previamente el número de iteraciones que se van a producir y el bloque seencarga de aumentar el valor de la variable contador en los incrementos que hayamos especificado.En la imagen siguiente se muestra como calcular la tabla de multiplicar utilizando este bucle.

Imagen ejemplo 4

En el bucle mientras se repite una acción mientras se cumple la condición que hayamos indicado.En el ejemplo siguiente hemos implementado mismo cálculo que en el ejemplo anterior de la tabla


de multiplicar pero utilizando un bucle mientras. En este caso el programador debe ocuparse deinicializar el contador al inicio del bucle, ir controlando su valor durante la ejecución del bucle eincrementar el valor en cada iteración.

Imagen ejemplo 5

Como podemos ver esta segundo forma de calcular la tabla da mucho más trabajo al programador.El bucle mientras está pensado para cuando el programador no conoce de primeras el número deveces que se va a repetir una acción y obliga a ejecutar el bloque de instrucciones que se encuentranen su interior hasta que se cumpla la condición que hemos establecido.

En el ejemplo siguiente se muestra un programa que calcula el factorial de un número. Elprogramador no sabe cuantas veces va a tener que ejecutar el bucle hasta que el usuario introduce elvalor por pantalla, esto hace imposible implementar este ejemplo con un bucle para cada y portanto será necesario implementarlo con un bucle while.

Imagen ejemplo 6 Imagen de la interfaz de usuario


Para el desarrollo de la interfaz necesitaremos los siguientes elementos:Label1: Etiqueta que muestra “Introduce un número”.E_numero: Campo de texto para que el usuario introduzca el número.HorizontalArrangement: Para colocar dos botones horizontalmente.B_cacular: Botón para hacer los cálculosB_reiniciar: Botón para vaciar el campo de textoDisposiciónHorizontal1: Disposición en la que colocar una etiqueta y un campo de textoEfactorial: Etiqueta que muestra “El valor del factorial es”Tfactorial: Campo de texto en la que se muestra el valor de factorial calculado.E_error: Etiqueta que muestra un error si el número es menor que 1.

Los bloques necesarios para programar este ejercicio se muestran en la imagen siguiente:

Creación de listas, ampliamos la potencia de cálculo de nuestrosbucles

Las listas nos permiten agrupar un conjunto de datos u objetos bajo un nombre común. Enmatemáticas una lista se corresponde con el concepto de vector. Las listas se pueden indexarutilizando bucles de forma que podremos recorrer una lista completa con un conjunto deinstrucciones que se repita desde el primer hasta el último elemento de la lista.Para crear una lista en App Inventor deberemos crear una variable local o global y asociarle losbloques “crear una lista vacía” o “construye una lista”. Una vez que hemos creado la listapodremos añadir elementos, eliminar elementos, comprobar si la lista está vacía, …

Podremos visualizar los elementos de la lista uno a uno en un campo de texto o etiqueta, perotambién podemos visualizar la lista completa utilizando los elementos selector de lista, visor delista y desplegable que tenemos disponibles en los elementos de la interfaz de usuario.

En este ejemplo vamos a pedir al usuario un conjunto de valores que almacenaremos en una lista.En cualquier momento podremos visualizar los elementos que vamos introduciendo mediante el


visor de lista y al pulsar el botón calcular mostraremos el mayor y el menor valor introducido por elusuario en la lista. En la siguiente imagen se muestra los elementos que necesitamos para crear la interfaz de ususario:

Etitulo:Muestra el título de la aplicación.Tamaño 16, centrada,negrita y cursiva.DisposicionHorizontal1: Ancho ajustar al contenedor.Eintroduce: Etiqueta que muestra mensaje al usuario.CampoDeTexto1: Caja de texto para almacenar valores en lalista. Hemos marcado la opción para que solo pueda almacenarnúmeros.DisposicionHorizontal2: Ancho ajustar al contenedor.Bañadir: Botón para añadir un valor a la lista.Bvaciar: Botón para vaciar la listaBcalcular: Botón para calcular el mayor y el menor valor de lalistaDisposicionTabular1: Columnas 2, Registros 2, Ancho ajustaral contenedor.Emayor: Etiqueta que muestra mensaje al usuarioEmayorvalor: Etiqueta que muestra el mayor valor de la listaEmenor: Etiqueta que muestra mensaje al usuarioEmenorvalor: Etiqueta que muestra el menor valor de la listaVLnumeros: Visor de lista que muestra los valores de la lista.

Interfaz de usuario para manejar listas. Ejemplo 7

Los bloques necesarios para programar la interfaz se muestran en la imagen siguiente:

listadenumeros: variable global que va a almacenar la lista de números.


mayor: variable global que va a almacenar el mayor valor de la lista de númerosmenor: variable global que va a almacenar el menor valor de la lista de números.

Cuando Bañadir.clic: Es el bloque en el que programamos como se van a añadir los valores a lalista. Hemos incluido un bloque condicional Si para que solo se añadan elementos cuando el usuariohaya escrito algo en el campo de texto CampodeTexto1. Cada vez que añadimos un elemento a lalista se vacía el campo de texto CampodeTexto1.

Cuando Bvaciar.clic: Es el bloque en el que programamos como se va a vaciar la lista de númerosque hemos creado. Como podemos ver lo que hacemos es inicializar la variable a una lista vacía yasignar la lista al visor.

Cuando Bcalcular.clic: Es el bloque que recorre la lista completa y selecciona el mayor valor de lalista y el menor valor de la lista. Necesitamos una variable local indice que nos va a permitiracceder a los elementos individuales de la lista. En un primer momento la variable mayor y menoralmacenan el primer elemento de la lista, posteriormente recorremos la lista entera con el bucle“por cada elemento en la lista” y con los condicionales comprobaremos si el valor que hemosalmacenado es mayor o menor que el valor que estamos recorriendo en la lista, si se cumple lacondición cambiaremos el valor de las variables mayor y menor. Al final del bucle incrementamosla variable indice para que en la siguiente repetición comprobemos el siguiente elemento de la lista.

Cadenas de caracteres

Las cadenas de caracteres son uno de los tipos de datos más utilizados ya que como usuariostransmitimos la mayor parte de la información que generamos en este formato. App Inventorincluye bloques específicos para el tratamiento de las cadenas de caracteres dentro del grupoTextos. Para entender cómo funcionan estos bloques vamos a desarrollar un ejemplo en el que levamos a pedir una cadena de caracteres al usuario y vamos a contar el número del palabras, elnúmero de letras y muestre la cadena separada por palabras en un visor de lista. Para realizar esteejemplo necesitaremos la siguiente interfaz de usuario.

Tcadena: Campo de texto para queel usuario pueda introducir unacadena de caracteres, hemosmarcado la opción multilínea en suspropiedades para que permitaintroducir saltos de línea que nospermitan separar el texto enpárrafos.

Bcalcular: Botón para realizar lasoperaciones.

Bsalir: Botón para salir delprograma.

Enumeropalabras: Etiqueta quemuestra el total de palabras denuestra cadena.


Enumeroletras: Etiqueta que muestra el total de letras de nuestra cadena.

Ereves: Etiqueta que muestra la cadena escrita del revés.

Etienemayusculas: Etiqueta que nos dice si la cadena de caracteres contiene alguna mayúscula.

Vpalabras: Visor de lista que va a mostrar la cadena separada por palabras.

Los bloques necesarios para construir este ejemplo se muestran en la imagen siguiente.

Creamos dos variables globales:listadepalabras: variable tipo lista que va aalmacenar la cadena separada por palabras

listamayusculas: lista que contiene todas lasletras mayúsculas de nuestro abecedario.

Como podemos ver el bloque cuando_Bsalir.Clic finaliza la ejecución del programa, todas lasoperaciones se realizan en el bloque cuando_Bcalcular.Clic.

En primer lugar comprobamos si la cadena que ha introducido el usuario está vacía, en ese casonuestra cadena tendrá 0 palabras, 0 letras, escrita al revés estará en blanco y no contendrámayúsculas, la lista que contiene el número de palabras estará vacía, conjunto de instrucciones quese ejecuta en la primera parte del bloque si.


Si nuestra cadena no está vacía realizamos el siguiente conjunto de acciones:

1º) Llenamos la lista con todas las palabras que contiene la cadena, para eso empleamos el bloquedividir por espacios.

2º) Calculamos el número de palabras de nuestra cadena, indicando la longitud de la lista quecontiene las palabras de nuestra cadena.

3º)Calculamos el número de letras de nuestra cadena utilizando el bloque longitud, que nosdevuelve la longitud total de la cadena que ha introducido el usuario, incluyendo los espacios enblanco y los saltos de línea.

4º) Escribimos la cadena al revés utilizando el bloque reverse

5º) Montamos un bucle que por cada elemento de la lista que contiene las mayúsculas compruebe siese carácter se encuentra en nuestra cadena, es decir, primero comprueba si tiene la A, luego la B,así sucesivamente hasta llegar a la Z, para ello utilizamos el bloque contienetexto, que nos devuelveun valor cierto si nuestra cadena contiene el texto almacenado en el parámetro texto, ojo que estebloque tiende a confundir ya que la cadena en la que queremos buscar debe colocarse en elparámetro texto y el texto que queremos buscar debe colocarse en el parámetro cadena.

Creando nuestros propios bloques de sentencias: Los procedimientos

En ocasiones podemos encontrar que sea necesario repetir un conjunto de sentencias en distintaspartes de un programa o bien que queramos separar un grupo de sentencias para mantener laclaridad del programa, en estos casos App nos permite agrupar un grupo de sentencias bajo unmismo nombre para poder invocarlo en cualquier parte del programa, este grupo de sentencias seconoce como procedimiento.

Para crear un procedimiento utilizamos el bloque “como procedimiento ejecutar”, colocaremos ensu interior el conjunto de instrucciones que queremos que incluya y posteriormente llamaremos aeste procedimiento en todas las partes del programa en la que lo consideremos necesario.

Para entender mejor como funcionan los procedimientos volvamos al ejemplo de la calculadora quehemos realizado en apartados anteriores. Completamos el diseño inicial añadiendo un “botón cero”,es decir, el botón que reinicia la calculadora a un estado inicial. Si comprobamos la programaciónque ya tenemos hecha, este conjunto de acciones ya está incluido en la primera acción del programa“Cuando Screen1.Inicializar”. Lo que vamos a hacer es sacar ese conjunto de instrucciones ycolocarlo sobre un procedimiento que vamos a llamar “vacía” al que llamaremos al principio delprograma y cuando el usuario pulse el “botón cero”. En las siguientes imágenes se muestran comoquedan el diseño de la interfaz y la programación de los bloques incluyendo la definición delprocedimiento.


Imagen ejemplo 8

Con la definición de procedimientos conseguimos ahorrar líneas de programación y tambiénmejorar la comprensión del código de un programa.

Ejercicios del tema 1. Diseña la interfaz de un programa que incluya los siguientes elementos:

a) Una etiqueta que muestre el texto: “Introduce el valor del radio:” b) Un campo de texto para almacenar el valor del radio. (Introduce solo valores positivos,

aún no hemos aprendido a controlar que no se puedan introducir valores negativos. Loaprenderemos en ejercicios posteriores.)

c) Una etiqueta que muestre: “La longitud de la circunferencia vale:”. d) Un campo de texto para mostrar el valor de la longitud de la circunferencia. (bloquea

este campo de texto para que no se pueda escribir en él) e) Una etiqueta que muestre: “El área del círculo vale:”. f) Un campo de texto para mostrar el valor del área del círculo. (bloquea este campo de

texto para que no se pueda escribir en él) g) Un botón para calcular la longitud de la circunferencia. h) Un botón para calcular el área del círculo. i) Un botón para vaciar todos los campos de texto.

2. Diseña un programa que calcule él área de un triángulo partiendo de su base y de su altura.Debes incluir una disposición horizontal para incluir la imagen “triangulos.jpg” comoimagen de pantalla y una disposición tabular para colocar el resto de elementos de pantalladebajo de la imagen. Cambia el nombre de la pantalla a “Triángulos”. Incluye todos loselementos de la interfaz de usuario que creas necesarios para que el programa funcione de laforma más completa posible. En la siguiente imagen se muestra un ejemplo de lo que se ospide en este ejercicio.


3. Completa el ejercicio anterior para que al ejecutar el programa por primera vez aparezcanocultos la etiqueta y el campo de texto que muestran el resultado y solo se muestren cuandoel usuario pulse el botón calcular. Deberán ocultarse cuando el usuario pulse el botónreiniciar. (BI.C1)

4. Diseña un programa que permita convertir de pesetas a euros y viceversa. La pantalla delprograma se muestra en la imagen siguiente.

5. Modifica los ejercicios 1, 2, 3 y 4 para que solo admita valores positivos para el radio de lacircunferencia, la base y la altura del triángulo, el valor en euros y el valor en pesetas. Encaso que el usuario introduzca un valor negativo cambiaremos a rojo el color del campo detexto y mostraremos en pantalla un mensaje al usuario advirtiendo de que se ha introducidoun valor no válido. El mensaje desaparecerá de pantalla al introducir un valor correcto.

6. Diseña un programa que pida por pantalla al usuario un número comprendido entre el 1 y el10, el programa mostrará un mensaje por pantalla indicando si es mayor menor o igual alnúmero a adivinar. El número a adivinar se generará de forma aleatoria al pulsar el botónreiniciar el juego. La pantalla se muestra en la imagen siguiente.

Disposición horizontal con una imagen de fondo. Incluye una etiqueta y un campo de texto alineado abajo.

Disposición tabular para colocar el resto de elementos en pantalla


7. Diseña un programa calculadora como el que se muestra en la siguiente imagen.

8. Diseña a tu gusto la interfaz de un programa que pida los tres coeficientes para una ecuaciónde segundo grado y muestre la solución de la ecuación. Debemos comprobar que el valor decoeficiente de la x2 no sea cero y que el valor del radicando no sea menor que cero (yasabemos que en estos casos la ecuación de segundo grado no tiene solución). (BI-C2)

9. Diseña un programa que compruebe si un número es primo partiendo de la siguientepremisa: Un número es primo si no es divisible por ningún número menor que él, iremoscomprobando desde el 2 hasta la raíz cuadrada del número que estamos comprobando.(implementar con un bucle para cada)

10. Diseña un programa que realice las siguientes acciones: a) Pida al usuario los datos siguientes: Nombre, Dirección, Provincia, la elegirá de una lista

desplegable, población, la elegirá de una lista desplegable que se rellenará con laspoblaciones que correspondan a la provincia seleccionada.

b) Muestre un botón para dar de alta al usuario: Comprobará que los campos nombre ydirección no estén en blanco, en caso contrario mostrará un mensaje de aviso al usuarioy cambiará el color del texto de la etiqueta correspondiente al campo que esté en blanco.

c) Muestre un botón para borrar los datos: Dejará todos los campos en blanco, borra elmensaje de error si lo hubiese y vuelva a poner las etiquetas de los campos de texto encolor negro,

La siguiente pantalla puede ayudarte a realizar este ejemplo.


11. Modifica el programa que calcula el factorial de un número para que vaya añadiendo cada unade las operaciones realizadas en una lista que se muestre por pantalla. La siguiente imagen te puedeayudar a realizar este ejercicio.

13.- Diseña un programa que permita al usuario crear una lista de la compra. Los artículos deberáseleccionarlos de una lista, la cantidad deberá rellenarla en un campo de texto. Podrá añadir y borrarelementos individuales de la lista y visualizar y borrar la lista completa. El visor de la lista estaráoculto en pantalla y solo se mostrará cuando el usuario pulse el botón “Mostrar Lista”. La imagensiguiente puede ayudarte a realizar este ejercicio. (BI-C3)

14.- Crea un programa que pida al usuario un nombre de usuario y una contraseña, que sealmacenará en un campo específico de contraseña. El programa solo aceptará contraseñas de almenos 8 caracteres que contengan números y letras, al menos una mayúscula y al menos uno de lossiguientes caracteres especiales: “_”, “-”.

15.- Modifica el programa de la calculadora completa (incluye suma, resta, multiplicación ydivisión) para que cada operación se realice en un procedimiento independiente del programaprincipal para posteriormente llamarlo cuando el usuario haga clic en el correspondiente botón.¿Qué mejoras has encontrado al escribir el código del programa de esta manera?


16.- Diseña un programa que muestre un desplegable con las siguientes opciones:1.- Calcular la longitud de una circunferencia.2.- Calcular el área de un círculo.3.- Calcular el área de un triángulo.

En función de la selección que el usuario realicen en pantalla se mostrará una disposición horizontaldiferente (que en principio están ocultas) en la que se piden los datos necesarios para realizar cadauno de los cálculos y un botón “Calcular” y otro botón “Reiniciar”. El botón “Calcular” mostrará elresultado del cálculo, el botón “Reiniciar” ocultará la disposición horizontal con los datos y dejarála pantalla disponible para que el usuario realice otra selección desde el desplegable.Cada uno de los cálculos se realizará en un procedimiento independiente que posteriormente seráinvocado cuando el usuario haga clic en el botón “Calcular”. La imagen siguiente puede ayudarte arealizar este ejercicio:

Observa en la imagen que aparece marcado el campo mostrar componentes ocultos en pantalla.(BI-C4)

BibliografíaInstalación de App Inventor. https://sites.google.com/site/appinventormegusta/instalacion.

Guía de Iniciación a App Inventor. 2015. Raúl C. (@raulconm)

Descripción de los componentes de la paleta de App Inventor 2. https://sites.google.com/site/aprendeappinventor/documentacion/componentes-basicosDescripción de bloques integrados de App Inventor 2. http://codigo21.educacion.navarra.es/autoaprendizaje/descripcion-de-los-bloques-integrados-de-app-inventor-2/.



https://sites.google.com/site/aprendeappinventor/documentacion/componentes-basicos

https://sites.google.com/site/appinventormegusta/instalacion

Programación en Android con APP Inventor€¦ · código como APP Inventor. IDEs para Android En...

Documents

Transcript of Programación en Android con APP Inventor€¦ · código como APP Inventor. IDEs para Android En...