Sumando números en android.
Después de crear el hola mundo interactivo (puedes verlo aquí), ahora se creara una aplicación que permita hacer la suma de dos números, que serán introducidos por el usuario mediante una caja de texto, cuando se pulse el botón de “sumar” se muestre en una etiqueta el resultado de la suma.Para llevar esto acabo se va a requerir:
Requisitos
- Un proyecto nuevo.
- Un par de cuadro de textos.
- Una etiqueta.
- Un botón
- Un Texto a voz.
Bueno, se debe de crear un proyecto nuevo como es costumbre, para ello se debe de estar ya autenticado en la web de appinventor. Luego hay que ir al menú Proyecto opción comenzar un proyecto nuevo. El elemento nuevo en esta práctica es la etiqueta esta se puede localizar dentro debajo de la posición número cuatro debajo del botón (vea imagen 1).
Una vez que ya se tiene identificado cada uno de los componentes, que se mencionan en los requisitos. Es momento de seleccionar cada uno de ellos y arrastrarlo al lienzo de trabajo, le debe de quedar una algo similar a lo que se muestra en la imagen 2.
Ya que se tiene la interfaz de usuario, es hora de ir a la sección de bloques. En la sección de los bloques se creará unas variables que son necesarias para realizar, esta operación matemática. Se creará tres variables globales para ello se debe de ir a los controles en el apartado de “variables” se encuentra de color naranja. Vea imagen 3.
Se deberá de seleccionar tres bloques de “inicializar global nombre como“, al final debe de quedar algo como lo que se aprecia en la imagen 4. Observe que las variables se generan con el nombre texto “nombre1, nombre2, nombre 3” para cambiar esos nombres de variables solo debe de hacer doble clic sobre el texto “nombre1” y escribir el nombre de la variable que desee, para este ejercicio, las variables que se usaran son a, b, c. Donde a y b son los números que ha introducido el usuario y c es el que tiene el valor de la suma.
Ya creada las variables es hora de inicializar esas variables, para hacer esta operación hay que ir a los controles de matemática (color azul), se usará estos, porque la operación que se va a realizar es una suma, si fueran variables de tipo texto o cadena y se quisiera iniciar las variables con cadenas vacías se iría a la opción texto. Al pulsar sobre la opción de matemática se mostrará una serie de bloques como los que se pueden ver en la imagen 5.
El bloque que se debe de elegir es el primero el que tiene un cero. Hasta el momento se debe de tener algo como lo que se ve en la imagen 6, teniendo en cuenta que se llevan tres acciones:
- Crear tres variables globales.
- Cambiarle el nombre a: a, b, c.
- Seleccionar tres inicializadores en cero, del bloque de matemáticas.
Ya con las variables declaradas, es hora de ir al componente botón y pulsar sobre el bloque clic, se mostrara los bloques disponibles pero se ejecutará el que dice “clic”. se debe de tener algo como lo que se muestra en la imagen 7.
Lo que hay que hacer es pasar los valores de los cuadros de textos a las variables, para hacer esto se regresará a los controles en la opción de variables y se debe de buscar el bloque que dice “poner”, regularmente se encuentra en la tercera posición, vea imagen 8. Se deberá de seleccionar tres bloques que tienen el texto de “poner lista desplegable a” vea imagen 9.
Ahora llega el momento de que se indique de donde se tomará los valores para las variables que se han declarado y asignado. Es decir, hay que indicar que la variable “a” obtendrá los datos del “Campo de texto1”, la variable “b” del “campo de texto2”, para hacer esto, hay que seleccionar el componente “Campo de texto1” y pulsar sobre el bloque que dice algo como “CampodeTexto1. Texto” y se debe de hacer lo mismo para el campo de texto dos.
Como se puede observar en la imagen 10, la variable “c” no tiene ningún bloque eso es por que en en ella se va a guardar el resultado de la suma, para hacer eso hay que ir por el bloque de matemáticas (color azul) donde se va a buscar el bloque que realiza la operación de sumar. Vea imagen 11
Ahora va el turno del componente “etiqueta” en el, se va a mostrar el resultado de la suma. Para hacer esto se hará un clic sobre el componente etiqueta, y se debe de mostrar una serie de bloques como los que se pueden observar en la imagen 12. Se deberá de elegir el bloque que inicie con “poner Etiqueta1.Texto como“
Ahora como lo que se quiere es mandar al componente “Etiqueta1” la frase: “El resultado de la suma es: “+ c. Recuerde que c es la variable donde se esta almacenando la suma de los dos números, para ello se va a ir a los controles integrados y se va a elegir la opción de concatenar donde se tendrá que tomar el bloque de texto vacío. Vea imagen 13.
Es el momento de tomar el valor de la variable c y que se muestre en la etiqueta. Para ello se debe de ir al componente integrado de nombre variable (color naranja) y seleccionar el bloque “tomar” se puede notar que en un momento marca error pero solo hay que hacer un clic sobre la lista desplegable que tiene y seleccionar la opción “Global c“, eso hace referencia a que se tomara el valor de la variable c. Vea imagen 14.
Una vez que se tiene todos los bloques de los componentes que se requieren es hora de integrarlo, Su integración será de la siguiente forma:
- La declaración e inicialización de las variables. Vea imagen 17.
- Asignar los valores a las variables, sumarlo y asignar ese valor a la variable c. Vea imagen 18
- Ahora hay que escribir la leyenda: “El resultado de la suma es: ” y mediante el bloque de unir, concatenarlo con el valor de la variable c. Vea imagen 19
- Toca el turno al componente de texto de voz, lo único que hay que hacer es embonar el bloque de texto del componente de etiqueta1 al de llamar del componente de textoavoz. Vea imagen 20.
- Por último hay que integrar los bloques necesarios en el botón, es decir, todas las acciones que al pulsar el botón deben de realizarse. como la asignación del valor de cada texto a cada variable declarada, la unión entre la frase y el resultado de la suma, así como la lectura de lo que contiene la etiqueta 1. Vea imagen21.
En el vídeo 1, se puede visualizar toda la interfaz gráfica de usuario, así como la interconexión realizada con los bloques y componentes. En el vídeo 2, se puede apreciar la ejecución de lo que se realizo. Se espera que con ello sea más fácil poder recrear esta práctica e iniciarse en la creación de aplicaciones móviles, por el momento para android. Espero sus comentarios.
2 Comments
Astrid Guadalupe
Está interesante. Intenté hacer algunos ejercicios de ese modo pero no hallé como, pero con esto pues ya tengo la duda un poco aclarada.
Alfredo de Jesús Gutiérrez Gómez
Es un gusto, Astrid que se disipará más la duda.