Fundamentos de programación para la creación de materiales educativos
Lección 2
Programación básica con App Inventor
Índice de contenido
Introducción...3
Elementos básicos...3
Layouts... 4
Ejemplo 1: Calculadora... 5
Diseño de la interfaz de usuario... 5
Añadir funcionalidad a la aplicación... 6
Ejemplo 2: Cumbres de Sierra Nevada... 7
Ejemplo 3: Conversor de Moneda... 10
Añadir funcionalidad a la aplicación... 11
Avanzado: añadir conversiones personalizadas...13
Ejemplo 4: Cronómetro... 17
En la próxima lección... 20
Introducción
En la lección anterior hemos desarrollado el programa ¡Hola Mundo! como introducción al App Inventor. Esta aplicación era muy simple, y en su interfaz de usuario sólo había un botón y un mensaje de texto. Sin embargo, casi todas las aplicaciones “reales” cuentan con muchos más elementos:
• Cuadros de texto para que el usuario introduzca información
• Listados para elegir una o varias opciones
• Casillas de verificación mara marcar alguna opción
• Imágenes
En lo que sigue, veremos varios ejemplos de aplicaciones que nos permitirán aprender a utilizar todos estos elementos. Concretamente, en esta lección veremos algunos de los elementos de la paleta básica y el uso de layouts para ordenar los controles en la ventana:
Elementos básicos
En la paleta de elementos básicos tenemos tenemos los controles más utilizados en las aplicaciones:
• Button: cuando el usuario pulsa un botón (o pulsación larga) podemos realizar alguna acción en el programa.
• Canvas: es un lienzo donde podemos pintar o representar gráficos
• Checkbox: se puede marcar para especificar alguna opción en el programa.
• Clock: Un reloj es una herramienta muy potente en un programa, que permite tareas de manera periódica. Además, el elemento Clock nos permite conocer la fecha y hora actual.
• Image: Este elemento sirve para visualizar una imagen.
• Label: es una etiqueta para representar un mensaje de texto (no editable).
• ListPicker: nos permite elegir un elemento entre una lista.
• PasswordTextBox: este cuadro se utiliza para introducir contraseñas (texto oculto).
• TextBox: uno de los elementos más básicos para interaccionar con el usuario: un cuadro para introducir texto.
• TinyDB: es una sencilla base de datos sonde podemos guardar información de nuestro programa.
Layouts
Todas las ventanas tienen dos propiedades, AlignHorizontal y AlignVertical, que nos permiten establecer cómo queremos que se alineen los elementos a lo largo de la pantalla. Sin embargo, en muchas ocasiones, vamos a querer que un grupo de elementos tenga un orden diferente al establecido en la ventana. Para tal caso, usamos los layouts:
• HorizontalArrangement: sirve para especifica que un grupo de controles se ordenen de forma horizontal a lo largo de la ventana.
• TableArrangement: este layout permite ordenar un conjunto de elementos en forma de cuadricula.
• VerticalArrangement: con este layout ordenados un grupo de elementos de forma vertical.
Ejemplo 1: Calculadora
Vamos a hacer una sencilla aplicación que nos permita realizar operaciones básicas entre dos números. Creamos un proyecto nuevo, y lo llamamos Calculadora. A continuación, lo abrimos con el editor para diseñar su interfaz de usuario.
Diseño de la interfaz de usuario
La calculadora va a consistir en tres cuadros de texto, dos para los operandos y otro para el resultado, y una serie de botones para realizar los cálculos. Vamos a comenzar poniendo los operandos: arrastramos layout TableArrangment hacia la ventana, y dentro de este layout insertamos:
• A la izquierda, dos Labels con el texto Primer número y Segundo número (propiedad Text),
• A la derecha, alineados con sus respectivas etiquetas, dos cuadros de texto. Para que sólo se puedan insertar números, nos aseguramos de marcarles la propiedad NumbersOnly.
Los botones de operaciones los vamos a insertar justo debajo. En este caso arrastramos un HorizontalAlignment y dentro de éste colocamos cuatro botones, con el texto “+”, “-”,
“x” y “/”.
Para el resultado, ponemos un label con el texto Resultado, y justo debajo un label sin texto donde mostraremos el resultado.
Tras esto, podemos ir ajustando otras propiedades como el tamaño de los elementos, el tipo de letra, el color de texto etc... También le podemos poner a la ventana un nombre:
Calculadora.
La siguiente imagen muestra un aspecto de un posible diseño de la aplicación:
Como se puede apreciar en el árbol de elementos, hemos cambiado los nombres por defecto de algunos elementos por algo más descriptivo. Así, por ejemplo, a los botones le hemos puesto el prefijo boton, seguido de la operación que realiza. Conviene seguir una práctica parecida para evitar confusiones.
Si queremos ejecutar la aplicación, podemos abrir el Block editor y usar Connect to device como ya vimos anteriormente.
Añadir funcionalidad a la aplicación
Ha llegado el momento de darle funcionalidad a la calculadora usando el block editor:
• Al pulsar el botón “+”, se deben sumar los números y mostrar el resultado en la etiqueta labelResultado.
• Al pulsar el botón “-”, se deben restar los números y mostrar el resultado en la etiqueta labelResultado.
• Al pulsar el botón “/”, se deben multiplicar los números y mostrar el resultado en la etiqueta labelResultado.
• Al pulsar el botón “x”, se deben dividir los números y mostrar el resultado en la etiqueta labelResultado.
El bloque correspondiente al botón sumar tiene que tener este aspecto:
Los bloques utilizados han sido:
• botonSumar.Click que se encuentra en My Blocks – botonSumar.
• set labelResultado.Text que se encuentra en My Blocks – labelResultado.
• El bloque + que está en Built-in – Math
• El bloque textoNumero1.Text que está en My Blocks – textNumero1 y el bloque textNumero2.Text, de My Blocks – textNumero2.
Es normal que al principio, hasta que no estemos más familiarizados con la herramienta, nos cueste encontrar algunos de los bloques que necesitamos para los programas. Para ayudarnos, App Inventor suele tener un color para cada categoría. Además, el color azul se reserva para bloques que establecen algún valor, mientras que el gris azulado corresponde con los bloques de lectura de valores.
El bloque que corresponde al botón para restar sería el siguiente:
Se deja como ejercicio para el alumno completar las dos operaciones que faltan.
Ejemplo 2: Cumbres de Sierra Nevada
Ahora vamos a ver cómo hacer una pequeña aplicación usando también imágenes. La aplicación va a consistir en un mapa de sierra nevada donde, al pulsar un botón con el nombre de una cumbre, se marcará con una flecha en el mapa:
En primer lugar creamos un nuevo proyecto, llamado CumbresSierraNevada, y lo abrimos con el editor de App Inventor. A continuación, vamos a añadir al proyecto las imágenes que usaremos en el programa. Éstas se pueden encontrar en el fichero ImagenesCumbres.zip en moodle. Descomprimimos el fichero y, en el cuadro Media del editor, pulsamos Upload new...
App Inventor nos mostrará un cuadro de diálogo para seleccionar el archivo que queremos subir. De los archivos de ImagenesCumbres.zip, seleccionamos sierranevada.jpg. Repetimos el proceso para todos los archivos JPG:
Si necesitamos borrar algún archivo, al pulsar sobre él, podremos ver el menú con la opción Delete...
Ahora vamos a diseñar la interfaz de la aplicación. En primer lugar, vamos a insertar un elemento Image, de la pestaña Basic. Si inspeccionamos las propiedades del elemento
Image, encontraremos una llamada Picture, en la que especificamos la imagen que mostrará. En nuestro caso seleccionamos sierranevada.jpg:
A continuación, vamos a añadir una etiqueta para mostrar información, y cuatro botones con los nombres de las cumbres: “Alcazaba”, “Mulhacén”, “Machos”, “Veleta”. Se propone, para que quede más compacto el diseño, usar un HorizontalArrangement para los botones.
Un posible diseño puede ser el siguiente:
Ahora vamos a añadir la funcionalidad al programa: cada vez que el usuario pulse un botón mostraremos la imagen correspondiente:
Como vemos ver, para cambiar la imagen tenemos que cambiar la propiedad Picture, indicando el nombre del archivo a utilizar.
Para terminar el ejemplo, vamos a hacer que en la etiqueta se muestre el nombre del pico seleccionado y su altura en metros. El bloque de abajo muestra cómo se haría para un botón (el alumno debe completar el resto):
Ejemplo 3: Conversor de Moneda
Para ver cómo utilizar listas en App Inventor, vamos a hacer un sencillo conversor de moneda. El proyecto Conversor.zip de Moodle contiene un posible diseño para la aplicación. Se recomienda que el alumno estudie las propiedades de cada elemento:
A partir del diseño, podemos hacernos una idea de cómo va a funcionar la aplicación:
1. El usuario introduce una cantidad a cambiar en el cuadro de texto superior.
2. A continuación, selecciona el tipo de cambio a partir de una lista de posibles. Para mostrar la lista, se debe pulsar el botón “Pulsa para cambiar”.
3. El usuario pulsará el botón “Convertir” para realizar la conversión, que se mostrará en el cuadro de texto inferior (no editable).
El botón “Pulsa para cambiar” es un elemento de tipo ListPicker, que muestra una lista para seleccionar un item de ésta. Los elementos se especifican, separados por comas, en la propiedad ElementsFromString. En el conversor, usamos la cadena “Euro a Dólar, Dólar a Euro, Libra a Euro, Euro a Libra” que corresponde a una lista de cuatro posibles cambios de moneda. App Inventor asigna a cada elemento un índice que indica su posición en la lista: Euro a Dolar tiene índice 1, y así sucesivamente.
Podemos ejecutar la aplicación para ver qué aspecto tiene la lista:
Añadir funcionalidad a la aplicación
Para realizar una conversión de moneda debemos multiplicar la cantidad de entrada por un factor de conversión. El primer paso va a consistir en añadir todos los factores de conversión a utilizar (http://www.xe.com/es):
El bloque factores, es una variable mediante la cual asignamos el nombre a la lista.
Podemos encontrar este bloque en Definition. Con make a list (categoría Lists) especificamos todos los factores de conversión, que son tipos de datos numéricos (categoría Math). Se puede observar que los factores están en el mismo orden que los elementos de la lista de la interfaz de usuario.
Cuando se seleccione un elemento de la lista, queremos que se muestre en la etiqueta (labelCambioActual). Esto lo podemos hacer usando el bloque listCambios.AfterPicking, que se encuentra en My Blocks – listaCambios. Dicho bloque dice qué debe hacer la aplicación después de que el usuario seleccione un elemento:
Asignamos a la etiqueta listcaCambios.Selection, el texto del elemento seleccionado.
A continuación, vamos a añadir la funcionalidad del botón “Convertir”:
El primer bloque declara una variable factorActual donde guardaremos el factor que hay que utilizar ( un tipo de dato numérico).
En botonConvertir.Click, lo primero que hacemos es obtener el factor actual. Para ello, hacemos uso del bloque select list item. En este caso, el bloque devuelve de la lista factores el elemento que ocupa la posición listaCambios.SelectionIndex, que coincide con la del tipo de cambio seleccionado por el usuario.
Una vez que tenemos el factor actual, lo que hacemos es calcular la conversión. Para multiplicar usamos el bloque “x” de la categoría Maths.
Aquí podemos ver como ha quedado el Block Editor:
Ejemplo de la aplicación ejecutándose:
Avanzado: añadir conversiones personalizadas
Vamos a dar la posibilidad de que el usuario pueda especificar un factor de conversión.
Para ello, en el ListPicker añadimos un nuevo elemento “Personalizado”:
En el caso de que el usuario seleccione la conversión personalizada, mostraremos un cuadro de texto donde introducir la conversión:
El nuevo diseño de la aplicación se muestra en la siguiente captura:
El layout grupoPersonalizado sólo podrá estar visible cuando el usuario seleccione el tipo de conversión personalizada. Para ello, en el Block editor, añadimos:
En este bloque estamos especificando que, antes de que aparezca la ventana de la aplicación, debemos ocultar el layout grupoPersonalizado y todos los elementos que este contiene. El bloque false se encuentra en Built-in - Logic.
Cuando se seleccione una conversión, también tenemos que mostrar u ocultar grupoPersonalizado:
Con este bloque especificamos que si el elemento seleccionado tiene un índice 5 (conversión personalizada), debemos mostrar el grupoPersonalizado. En caso contrario, lo ocultamos. Volveremos al bloque ifelse en las próximas lecciones.
Por último, vamos a cambiar el comportamiento del botón convertir:
Lo que estamos diciendo con el bloque anterior es que, en el caso de se haya seleccionado la conversión personalizada ( SelectionIndex = 5), el factor que utilizaremos será el que ha puesto el usuario. En caso contrario, seguimos usando el factor que corresponda de la lista de factores.
La siguiente captura muestra la aplicación en ejecución:
Ejemplo 4: Cronómetro
Para terminar esta lección vamos a ver una utilidad básica del elemento Clock haciendo un Cronómetro (proyecto Cronómetro.zip en Moodle).
Su interfaz de usuario:
El reloj insertado, Clock1, tiene 3 propiedades interesantes:
• TimerInterval: los relojes, cada cierto intervalo de tiempo, pueden ejecutar alguna tarea. Esta propiedad sirve para indicar dicho intervalo, en milisegundos. Por defecto, vale 1000 por lo que el reloj se activa una vez por segundo.
• TimerEnabled: indica si está activo. Nosotros, la dejamos sin marcar, ya que el cronómetro está desactivado al comienzo.
• TimerAlwaysFires: esta propiedad tiene un uso avanzado: permite que el reloj siga ejecutándose aunque la aplicación la dejemos en segundo plano en nuestro móvil.
Vamos añadir funcionalidad. En primer lugar, vamos a añadir las siguiente variables para guardar el valor del contador:
En el caso del botón, tiene el siguiente comportamiento:
• Si el cronómetro está parado, se activará el reloj. Además, se reinicia el contador y se le cambia el texto al botón para que ponga “Detener”.
• Si el cronómetro está activo, lo detenemos y dejamos el valor de la etiqueta congelado para que el usuario vea el tiempo. Además, volveremos a poner el texto
“Comenzar” en el botón.
Ahora tenemos que decir qué tiene que ocurrir cada tic de reloj. Para ello, tenemos que crear el bloque Clock1.Timer:
Como vemos, en bloque estamos sumando un segundo a nuestro contador, pero asegurándonos que también se actualizan los minutos y las horas.
Para terminar el boque Clock1.Timer tendríamos que hacer que se muestre el valor del contador. Para ello, construimos un texto usando el bloque “make text”:
El resultado final de la aplicación es el siguiente:
En la próxima lección...
Durante este tema, hemos visto algunas de las posibilidades que ofrece App Inventor para hacer aplicaciones.
Saber utilizar correctamente el editor de diseños de App Inventor es un fundamental. Sin embargo, también es necesario dominar el Block Editor para programar la funcionalidad de nuestra aplicación:
• Hay que añadir variables para almacenar valores
• Usar bloques como ifelse para controlar qué ocurre en el programa.
• Especificar el comportamiento de la aplicación frente a la entrada del usuario.
• …..
En la próxima lección veremos los fundamentos de la programación de aplicaciones, comunes a casi todos los lenguajes de programación. Los ejemplos serán poco atractivos desde el punto de vista visual. Sin embargo, es crítico que se comprendan, ya que de ello dependerá que podamos añadir funcionalidad compleja en nuestra aplicaciones.
