articulo

Estructuras de control (if-else) en AppInventor

En esta entrada se aborda el tema de la estructura de control, particularmente el de if-else (si – entonces) en el appinventor para una aplicación en android. El ejercicio es que la aplicación pueda identificar si un número dado es par o impar. Esto se hará de la siguiente manera:

Descripción

La actividad consiste en que el usuario escriba un número en un cuadro de texto, al pulsar el botón, se muestre en una etiqueta la leyenda: «El número es par» o «El número es impar» y posteriormente se escuche mediante un texto a voz, lo que tiene escrito la etiqueta. Para ello se va a necesitar los siguiente:

Requisitos

Para poder llevar acabo esta práctica se requiere de lo siguiente:

  1. Una cuenta en el appinventor.
  2. Crear un nuevo proyecto en el appinventor.
  3. Un cuadro de texto.
  4. Un botón.
  5. Un texto a voz.

Partiendo de que ya se tiene creado el proyecto nuevo en el appInventor, y que se tiene una interfaz de usuario similar a la que se muestra en la imagen 1. Se ira a la sección de bloques. Si no recuerdas como hacer un nuevo proyecto puedes ir al menú «proyecto» hacer clic en la opción «comenzar un nuevo proyecto» se mostrará una ventana donde se solicita el nombre del nuevo proyecto, para este ejercicio se escribió el nombre de «parImpar» se puede escribir el que quieras. Luego pulsas en aceptar o en enter (en el teclado) y después arrastras los objetos Cuadro de texto, botón, etiqueta y texto a voz, y lo se suelta en el lienzo de trabajo.

Imagen 1. UI para resolver el ejercicio par e impar. Fuente: tumblr.com

Creación de bloques

Lo primero que se va a realizar es la declaración de las variables que se van a utilizar, para esta práctica se requiere dos variables una que va a contener el valor numérico que introduce el usuario y la que va a guardar el valor de la operación que determina si un número es par o impar. Para determinar si un número es par o impar se utilizará el siguiente proceso:

  1. El número dado se dividirá entre dos
  2. El residuo se evaluara si es cero, el número que se dividió es par, sino es impar

Para crear las dos variables se va a los componentes integrados se pulsara sobre la opción «integrados» y se va a elegir el bloque que dice «Inicializar global como nombre » se debe de tener dos bloques (ya que, son dos variables que se van a utilizar). Después se debe de ir al componente de «mátematicas» donde se elija el bloque que tiene un cero. Vea imagen 2.

Imagen 2. Variables en appInventor para el ejercicio Par-Impar. Fuente tumblr.com

Ahora sigue el procesamiento de ese número dado para identificar si es par o impar. Para ello se pulsara sobre el componente de variable y se selecciona el bloque que dice «poner a», después se regresará a los componentes de cuadro de texto y se elige el bloque que dice: «campo de texto1 . texto». Al final debe de quedar algo similar como lo que se muestra en la imagen 3.

Imagen 3. Asignar el valor que introduce el usuario. Fuente: tumblr.com

Ahora que ya se tiene el valor que ha introducido el usuario, hay que regresar a la sección de «Variables» donde se va a eligir nuevamente un bloque que diga «poner a», posteriormente se debe de ir a los bloques de matemáticas en donde se debe de seleccionar el bloque que dice «modulo de «. Recordad que la obtención del residuo en regularmente se hace con el símbolo de porcentaje (%). Ahora llega el turno de tomar de los bloques de variable el que lleva el nombre de «tomar » y como la operación que se va a realizar es con una constante hay que tomar del bloque de matemáticas el que tiene un cero. Finalmente en su lienzo de bloques se debe de tener algo como lo que se muestra en la imagen 4.

Imagen 4. Bloques para el calculo del par e impar. Fuente: tumblr.com

Ahora llega el turno de la evaluación del calculo que se ha realizado, para ello se hará clic sobre la opción de «logica» (tiene un color verde) se encuentra en los controles de interfaz de la columna de Bloques. Y se debe de pulsar sobre el que tiene el símbolo de igual. Luego hay que ir a buscar el bloque que tiene el texto de «tomar» que se encuentra en la sección de variables, posteriormente se debe de colocar el bloque que tiene el texto «cero», que es con lo que se va a comparar para evaluar el residuo de la operación. Y finalmente hay que ir a los bloques de control (tiene un color amarillo) y al pulsar sobre el se podrá notar que se tiene una gran variedad de controles que van desdee el if, if-else, switch y ciclos. Si todo ha ido bien se debe de tener una pantalla como la que se muestra en la imagen 5.

Imagen 5. Evaluación del modulo. Fuente: tumblr.com

Una vez que se ha evaluado corresponde enviar los resultados a la etiqueta, para los casos en que sea par o impar el número. Para ello se va a ir los bloques del componete «Etiqueta» y se debe de elegir el que dice: «poner etiqueta1.texto como» se va a necesitar dos así como dos uniones, para poder concatenar el número y la leyenda «Es par» o en su caso «es impar» si se quisiera que la leyenda dijera «El número es par», se debe de notar que se esta haciendo tres uniones, que son: «el» + número + «es par» por lo que se necesitaría dos uniones para cada caso. Por el momento se dejará de la forma sencilla: número `+ «es par». Finalmente si todo ha salido bien se debe de tener un lienzo similar como lo que se ve en la imagen 6.

Imagen 6. Resultados de la evaluación Par o impar. Fuente: tumblr.com

Es momento de agregar el bloque de texto a voz, este va a permitir que se lea lo que dice la etiqueta. para ello se hará clic en el componente Texto a voz, y se debe de elegir el bloque que dice: «llamar textoAVoz1. hablar mensaje» (es de color morado), y del componente etiqueta se va a requerir el bloque que tiene un texto como : «Etiqueta1.texto». Debe de quedar un lienzo como el que se muestra en la imagen 7.

Imagen 7. Texto a voz, Par-Impar. Fuente: tumblr.com

Se puede agregar dos bloques de texto a voz para que se ejecute en cada caso. Incluso podría usarse una variable que contenga el resultado y después de pasar la evaluación enviarla a la etiqueta, esto optimizaría el código en no usar al rededor de seis bloques.

Finalmente es hora de agregar el bloque que contendrá a todos los demás bloques, el del botón, que cuando se pulse debe de ejecutar todo los bloques, para ello hay que ir al componente «boton» y agregar el bloque que dice «clic». Debe de tenerse algo como lo que se muestra en la imagen 8.

Imagen 8. Bloque del Botón. Fuente: tumblr.com

Ahora es momento de introducir «código» a los bloques y de conectarlos. Los códigos que se introducirá son: El nombre de las variables y los textos a mostrarse en la etiqueta. Las variables que se usaran son las siguientes:

  • num, para guardar el número que introdujo por el cuadro de texto el usuario.
  • rpi, que guardara el resultado del residuo o modulo de la división entre dos.
Imagen 9. Ensamble de los bloques. fuente: tumblr.com
Imagen 10. Optimizando bloques. Fuente: tumblr.com

En la imagen 9 se aprecia todo el ensamble que se hizo para crear la «inteligencia» y funcionalidad de que la app, pueda identificar que número es par o impar. Sin embargo en la imagen 10 se observa, en la parte de arriba el resultado final del armado de los bloques y en la parte de abajo se nota la «optimización» al usar una variable que guarde el texto completo en vez de enviarlo directo a la etiqueta. La misma operación que se hizo con la variable (las concatenaciones) se puede hacer con la etiqueta y el texto a voz.

Vídeo 1. Creación de IU,ensamble de bloques. Fuente: youtube.com
Vídeo 2. Ejecución del código generado en appinventor. Fuente: youtube.com

Para cerrar esta entrada, en el vídeo 1 se muestra la creación del proyecto, la generación de interfaz de usuario, y el ensamble de los bloques el entorno del appinventor. El vídeo 2 muestra la ejecución de lo que se creo en dicho entrono. Espero que la recreación de esta praáctica sea mucho mas fácil y aporte a sus conocimiento. Espero sus comentarios.

Dejar una respuesta

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