Tutorial 3 Mit App Inventor

Tercera parte de la aplicación

Paso 7. En este documento realizaremos la parte de la suma de dos números con comando de voz. a.

Ahora demos click en el botón Designer  Designer  para regresar el editor e integrar nuevos componentes. Vease parte superior derecha de la Figura 8. b. Ubica en la sección de Palette el apartado de User Interface y da click. Figura 15

Figura 15

c.

Agregaremos un Button. Pueden modificar y diseñar este botón a su gusto usando la sección de Properties una Properties una vez que seleccionaron su botón. Figura 16 d. Generaremos cuatro TextBox y en sus propiedades les sugiero que configuren el tamaño de cada caja de texto de 50 pixeles x 50 pixeles (Width x Height). Figura 17 e. Así mismo dos Label. Label. Una de estas etiquetas es para la leyenda Suma de dos números  y la otra es para la leyenda Resultado =. (parte 9 y 11 respectivamente, Figura 1)

Figura 16

f.

Figura 17

Selecciona Layout  en la sección de Palette, esto nos permitirá agregar unos elementos para dar una presentación y orden a los elementos visibles de nuestra aplicación. Figura 18.

TextBox 1,2 y3

TextBox 4

Figura 18 g. Arrastramos un elemento TableArrangement  a nuestra aplicación. h. Con nuestro elemento TableArrangement   seleccionado configuraremos sus propiedades para establecer una tabla con res columnas y un renglón. Figura 19. i. Ahora se deberán colocar tres de los c uatro TextBox es esta tabla, véase Figura 18.

 j.

Repetimos los puntos g y h para generar una segunda tabla solo que esta tendrá dos columnas y un renglón. Figura 20

Figura 19 k. l.

Figura 20

En la segunda tabla se colocarán la etiqueta Label con la leyenda de Resultado=  y el TextBox4. Como lo muestra la Figura 18. Las separaciones que se indican en los indicadores 2, 4, 6 y 10 de la Figura 1 se pueden insertar con el elemento HorizontalArrangenment   de Layout. Solo arrastre este elemento cada que quiera una separación y configure su tamaño como se muestra en la Figura 21.

Figura 21 m. Una vez se tenga una interfaz ordenada con la ubicación y características de los elementos visibles de nuestra aplicación se puede ir visualizando en nuestro dispositivo móvil. n. Para terminar de agregar los elementos que integraran nuestra aplicación debemos arrastrar de la sección de Media en la Palette dos SpeechRecognizer  y dos TextToSpeech hacia el visor de nuestra aplicación. Quedando integrados como se muestra en la parte inferior de la Figura 18 o. Regresamos a la ventana de Bloques dando click en el botón Blocks. Vease punto 5 de la Figura 6.

p. Observe en la Figura 22 que aparece en la sección de Blocks los nuevos elementos que se acaban de ingresar, seleccionando cada uno de ellos con un click se extenderán las funciones para cada elemento. q. Siguiendo el orden de los bloques de código mostrado en la Figura 22 copie las mismas funciones en su aplicación.

Figura 22

r. s.

Repite las acciones u, v, así mismo la w del paso 5 para actualizar tu aplicación en el dispositivo móvil. Prueba su aplicación ahora además de realizar las acciones de la primera y segunda parte de este tutorial deberá realizar la suma de dos números que deberá de pedirle uno por uno con comandos de voz y así mismo Ud., se los proporcionará con voz y al final le proporcionará el resultado de la suma.

Paso 8 Una vez que quede satisfecho con su aplicación podrá generarla y descargarla permanentemente a su dispositivo dando los siguientes pasos: a.

En la barra de menús seleccione - < App (provide QR code for .apk)

b. Al terminar la compilación se generará un código QR con el que descargarán su aplicación en su dispositivo móvil. Figura 23.

Figura 23 Listo nuestra aplicación esta completa y luce de la siguiente manera:

Figura 24. Foto real de la aplicación