articulo

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).

Imagen 1. Componente Etiqueta. Fuente: tumblr.com

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.

Imagen 2. Interfaz de usuario para la suma de dos números. Fuente: Tumblr.com

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.

Imagen 3. AppInventor Bloques de Variables. Fuente: tumblr.com

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.

Imagen 4. Creando tres variables en appinventor. Fuente: tumblr.com

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.

Imagen 5. Bloque Matemática, inicializar variable en cero. Fuente: tumblr.com

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.
Imagen 6. Declarando variables e inicializaodres. Fuente: tumblr.com

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.

Imagen 7. Bloque del botón. Fuente: tumblr.com

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.

Imagen 8. Bloque para asignarle valor a una variable. Fuente: tumblr.com
Imagen 9. Asignando variables. Fuente: tumblr.com

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.

Imagen 10. Campo de Texto, Eligiendo el texto. Fuente: tumblr.com

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

Imagen 11. Tomando el vaor de las variables para sumar. Fuente: tumblr.com

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«

Imagen 12. Bloques del componente etiqueta. Fuente: tumblr.com

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.

Imagen 13. Componentes Integrados Textos, Bloques unir y vacio. Fuente: Tumblr.com

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.

Imagen 14. Variable Global c. fuente: tumblr.com
Imagen 15. Componente TextAVoz, bloque llmaar. Fuente: Tumblr.com
Imagen 16. Componente Etiqueta, bloque texto. Fuente: tumblr.com

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:

  1. La declaración e inicialización de las variables. Vea imagen 17.
  2. Asignar los valores a las variables, sumarlo y asignar ese valor a la variable c. Vea imagen 18
  3. 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
  4. 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.
  5. 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.
Imagen 17. Integración bloques declaración e inicializar variables. Fuente: tumblr.com

Imagen 18. Integración de bloques para realizar una suma. fuente: tumblr.com
Imagen 19. Integrando bloques del resultado de la suma.
Imagen 20. Integrando bloque de texto de la etiqueta1 al de textoavoz. Fuente: tumblr.com
Imagen 21. Integración de bloques del botón. Fuente:tmblr.com
Vídeo 1. Suma de dos números ne andorid usando Appinventor. Fuente: Youtube.com
Vídeo 2. Ejecución de la suma de dos números en android. Fuente: youtube.com

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 Comentarios

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *