Ejercicios con App Inventor

Actividad 1: Calculadora

Objetivo del Ejercicio:

Ser capaces de realizar una aplicación personalizada para realizar cálculos
matemáticos.

Resultado final:
Con este ejercicio vamos a ser capaces de diseñar una calculadora en app Inventor. En
la que podamos sumar, dividir, restar y multiplicar números.

Funciones usadas:
En el ejercicio vamos a utilizar las opciones de los bloques: Etiqueta, Campo de texto,
disposición horizontal, botón.

Materiales necesarios:
Ninguno

Dificultad:
Baja

Procedimiento
1. El primer pasó una vez accedidos con nuestra cuenta de Gmail a app inventor.
1.1. Hacemos clic en comenzar un proyecto nuevo.
1.2. Al que llamaremos calculadora y damos clic en aceptar.

2. Primero vamos a arrastrar todos los elementos que conforman la aplicación.

2.1. En la parte del diseñador.
2.2. Antes de arrastrar los bloques damos clic en Screem1 de la columna
componentes.
2.3. En sus propiedades, ponemos que la disposición sea centrada.

1
Ejercicios con App Inventor

3. Arrastramos de la sección Interfaz de usuario

3.1. Al visor 2 etiqueta y 2 campos de texto.
3.2. Intercalando unos con otros. Como queda en la imagen.

4. Seleccionamos el componente Etiqueta 1

4.1. En sus propiedades en la casilla Texto
4.2. Escribimos Primer Número
4.3. En la columna componentes damos clic en Cambiar Nombre
4.4. Lo renombramos por Primer Número

2
Ejercicios con App Inventor

5. Seleccionamos de la columna de componentes

5.1. Campo de texto 1.
5.2. En sus componentes en la casilla ancho
5.3. Marcamos la opción ajustar al contenedor
5.4. Y la casilla pista borramos el texto escrito por defecto.

6. Repetimos estos pasos con el segundo añadido de etiqueta

6.1. Nombraremos segundo número y con el segundo campo de texto.

7. Ahora pasamos a la sección Disposición

7.1. Arrastramos al visor 3 disposiciones horizontales.

3
Ejercicios con App Inventor

8. En las propiedades de los tres componentes.

8.1. Marcamos en propiedades el ancho ajustar al contenedor.

9. Arrastramos tres Botones

9.1. De la sección interfaz
9.2. Al interior del primer Disposición horizontal.

10. En las otras dos disposiciones horizontales añadimos un botón en cada una.

4
Ejercicios con App Inventor

11. A los botones de la primera disposición horizontal les cambiaremos por

11.1.Sumar, Restar, Multiplicar, Dividir.
11.2.Al texto para botón 5
11.3.Lo llamaremos raíz cuadrada del primer número.
11.4.Al texto para botón 6
11.5.Lo llamaremos raíz cuadrada del segundo número.
11.6.Para ello hay que realizarlo seleccionando cada componente y darle el
nombre indicado en sus propiedades.

12. Arrastramos al visor un campo de texto.

12.1.En las propiedades de este componentes
12.2.Volvemos a ajustar el ancho al contenedor.
12.3.En sus propiedades des marcamos el recuadro de Habilitar que por defecto
estará marcada.
12.4.Y borramos el texto de la casilla pista, cambiamos el nombre por Texto
resultado

5
Ejercicios con App Inventor

13. A continuación arrastramos un nuevo botón,

13.1.Al que llamaremos Limpiar.

14. Seguido arrastramos al visor una Disposición Horizontal

14.1.Con las propiedades de ancho al contenedor y disposición horizontal
derecha.

15. Arrastramos un botón

15.1.Dentro de la última disposición horizontal.
15.2.Con el nombre salir.
Ya tendremos todos los elementos que conforma la parte visible de la aplicación.

6
Ejercicios con App Inventor

16. Ahora dando clic en la opcion Bloques, pasamos a dar las funciones que se
realizaran en la parte vible de la aplicación.
16.1.Para ir configurando los distintos elementos de la aplicación
16.2.Damos clic sobre el boton salir lo marcamos.
16.3.En los bloques que sugen seleccionamos es el primero de todos.

17. Ir a la sección de bloques control

17.1.Encajar en el bloque anterior el bloque llamado cerrar aplicación.

18. Pasamos a dar funciones al botón Limpiar

18.1.Seleccionamos el botón limpiar.
18.2.Seleccionamos el bloque de la imagen

19. Seleccionamos el componente Texto_Resultado.

19.1.En los bloques que surgen seleccionamos el que se ve en la imagen verde
19.2.Lo encajamos al bloque anterior.

20. Ir la sección de bloques Texto

20.1.Encajar el primer bloque de la lista al final del bloque verde.

21. Pasamos a configurar todos los botones de operaciones.

21.1.Empezamos por el botón sumar
21.2.Seleccionamos el primer bloque.

7
Ejercicios con App Inventor

22. Marcar el componente Texto_Resultado

22.1.Seleccionar el bloque verde de la imagen dentro del bloque anterior.

23. Ir a la sección de bloques llamada Matemáticas

23.1.Encajar al final del bloque verde, el bloque que pertenece a la operación de
sumar.

24. Ir Seleccionar el componente Texto_Número_1

24.1.De las opciones de bloques que surgen seleccionar el de la imagen.
24.2.Para encajarlo en el primer hueco del bloque azul de sumar.

25. En la Seleccionar el componente Texto_Número_2

25.1.De las opciones de bloques que surgen, seleccionar el de la imagen.
25.2.Para encajarlo el segundo hueco del bloque azul de sumar.

26. Repetir estos pasos para las otras operaciones matemáticas.

26.1.Cambiando el bloque azul por el de la operación que le corresponda de restar,
dividir y multiplicar.
27. Restar:

28. Multiplicar:

29. Dividir:

8
Ejercicios con App Inventor

30. Ir Seleccionar el componente Raíz_cuadrada_del_Primer_Número

30.1.Seleccionamos el primer bloque de la lista que surge.

31. Seleccionamos el mismo componente Texto resultado

31.1.Encajamos el bloque verde de la imagen.

32. Ir a la sección de bloques Matemáticas

32.1.Encajar al final del bloque verde, el bloque raíz cuadrada.

33. Seleccionar el componente Texto_Número_1

33.1.Arrastrar al final del bloque azul el bloque verde claro de la imagen.

34. Repetir los pasos para configurar las opciones de Raiz cuadrada del segundo
numero.

De esta manera tendremos configurada nuestra aplicación. Podemos comprobar la

aplicación con el emulador o la app para móviles Android.