Mi primera aplicación en App Inventor.Para crear una aplicación con App Inventor debemos realizar tres tareas básicas:

1. Crear el aspecto visual de la aplicación utilizando el Diseñador de Componentes que nos permitirá seleccionar los botones, cajas de texto, imágenes y otros componentes que van a aparecer en la pantalla del teléfono cuando la aplicación se ejecute.

2. Modificar las propiedades de esos componentes y3. Establecer el comportamiento de esos componentes utilizando para ello el Editor de Bloques.

Crear la interfaz de usuario.

Empezaremos con un ejemplo sencillo: una aplicación que, permita al usuario introducir un número entero y a continuación muestre el cuadrado de ese número. Para generar la aplicación debemos ingresar a la herramienta App Inventor utilizando nuestra cuenta de Google:

http://beta.appinventor.mit.edu

A continuación vamos a crear un proyecto. En la ventana hacemos clic en el botón New.

Figura 1: Crear un proyecto.

Figura 2: Escribir el nombre del proyecto.

Se mostrará una ventana de diálogo que nos solicitará el nombre del proyecto al que denominaremos: DobleNumero (el nombre no lleva espacios). Después de introducir el nombre del proyecto hacemos clic en el botón OK. Con la acción anterior se crea nuestro proyecto y entonces podemos observar el Diseñador de Componentes:

En el lado izquierdo de la ventana tenemos la Paleta de Componentes que podemos utilizar en nuestras aplicaciones. Al lado derecho de la Paleta de Componentes tenemos el Visor, una superficie que simula una pantalla del teléfono que aparecerá cuando se ejecuten nuestras aplicaciones. Para dibujar la interfaz de nuestras aplicaciones simplemente arrastramos el componente de la Paleta de Componentes y lo colocamos en el Visor. Para empezar a crear nuestra aplicación, necesitaremos dos componentes: una caja de texto y un botón. Estos componentes los ubicamos en la sección Basic de la Paleta de Componentes y lo que tenemos que hacer es arrastrarlos y colocarlos en el Visor.

Figura 3: Diseñador de Componentes.

Figura 4: La Paleta de Componentes y el Visor.

Cada componente que se encuentra en el Visor aparecerá en la sección de Componentes a la derecha delVisor. Por defecto, a cada componente se le asigna un nombre que incluye su tipo y un número (por ejemplo TextBox1, Button1).

Propiedades de los componentes.

Podemos seleccionar un componente en la sección Components y cambiar sus propiedades en la sección Properties.

Para la caja de texto vamos a dejar vacía la propiedad Text y escribimos en la propiedad Hint el texto: “Introduce un Número”.

Figura 5: El Visor y sus Componentes.

Figura 6: Componentes y sus propiedades.

Realizamos el mismo procedimiento para el botón (Button1), lo seleccionamos de Componentes y en Propiedades modificamos la propiedad Text con el texto: “Calcular”.

Programar el comportamiento de la aplicación.

Para programar el comportamiento de la aplicación hacemos clic en el botón que lleva por título: “Open the Blocks Editor”.

A continuación se nos solicita descargar en nuestra computadora un archivo de Java con extensión de jnlp. Hacemos clic en el botón Aceptar.

Figura 8: Propiedad Text de un Botón.

Figura 9: Abrir el Editor de bloques.

Figura 7: Propiedad Hint de la caja de texto.

Una vez descargado el archivo lo ejecutamos para iniciar el Editor de Bloques. Nos mostrará una advertencia de seguridad. Hacemos clic en el botón Ejecutar.

El Editor de Bloques se compone de dos pestañas: Built-In y My Blocks. En Built-In tenemos los bloques de programación disponibles. Utilizaremos la sección My Blocks para agregar funcionalidad de nuestra aplicación (observa que los elementos de las pestañas se identifican por colores).

Figura 10: Descargar archivo para iniciar el Editor de Bloques.

Figura 11: Antes de iniciar el Editor de Bloques.

Vamos a seleccionar de la pestaña de My Blocks el componente Button1.

Figura 12: El Editor de Bloques con sus pestañas Built-In y My Blocks.

Figura 13: Eventos disponibles para el Button1.

A continuación vamos a seleccionar el evento Click y lo arrastramos en el área de bloques del programa.

Este bloque significa lo siguiente: “cuando el usuario hace un clic sobre el botón, hacer ...”. En nuestro caso, cuando el usuario haga un clic sobre el botón, la aplicación debe recuperar el contenido de la caja de texto, realizar calcular el doble del número y a continuación asignar el resultado de nuevo a la caja de texto. Primero vamos a realizar el cálculo aritmético, seleccionamos de la pestaña Built-In la opción Math y a continuación seleccionamos el bloque para multiplicar.

Figura 14: Evento Click del botón.

Figura 15: Editor de Bloques, opción Math.

Lo colocamos en el área de trabajo:

De la pestaña My Blocks seleccionamos la caja de texto con el componente TextBox1.Text de el bloque TextBox1:

Luego lo ensamblamos (colocamos) en el componente para multiplicar:

Para poder multiplicar el contenido de la caja de texto con el valor 2 seleccionamos el bloque number ymodificamos el texto por omisión (123) por el valor de 2:

Figura 16: Componentespara multiplicar.

Figura 17: El componente TextBox1.

Figura 18: Componentes.

Lo ensamblamos al componente de la multiplicación:

Para mostrar el resultado del cálculo agregamos el bloque TextBox1.Text de TextBox1:

A TextoBox1.Text le asociamos el resultado del calculo aritmético:

Figura 19: Sección Math, componente para un número.

Figura 21: TextBox1.Text de TextBox1.

Figura 20: La multiplicación de TextBox1 y number.

Finalmente asociamos las operaciones definidas anteriormente con el evento Click del botón:

Ejecutar la aplicación.

Para ejecutar nuestra aplicación en App Inventor tenemos que crear un emulador del teléfono. Para ellotenemos que hacer un clic en el botón que dice New emulator.

Figura 24: New Emulator.

Figura 22: Ensamblado de componentes.

Figura 23: Asociar las operaciones con el evento Click de Button1.

Antes de iniciar la ejecución del emulador App Inventor nos mostrará la siguiente ventana indicándonos que el proceso de carga puede durar de 2 a 3 minutos:

Una vez que el emulador está listo obtenemos una ventana simulando un teléfono. Lo que sigue es conectar nuestra aplicación con el emulador. Para ello seleccionamos el botón Connect to Device: emulator -5554.

En el lado derecho nos aparecerá un indicador en amarillo. Una vez que este en color verde tenemos nuestra aplicación en el emulador y podemos interactuar con ella.

Figura 25: Emulador.

Figura 26: Conectar al emulador.

Si obtienes una ventana similar a la mostrada anteriormente: ¡Felicidades!, acabas de crear tu primera aplicación en App Inventor.

Figura 27: La aplicación DobleNumero.

Superficie de un triángulo.

Construya un programa tal, que dadas la base y la altura de un triángulo, calcule e imprima su superficie.