top of page

Pensamiento computacional: App Inventor

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

En esta sesión realizaremos una CALCULADORA simple.

De nueva cuenta, ingresa a http://appinventor.mit.edu

e inicia un nuevo proyecto. Asígnale el nombre  de CALCULADORA.

CAL01.png

DISEÑO.

Antes de iniciar, cambia la configuración del App Inventor a Español

CAL02.png

Ahora, desde Interfaz de usuario agrega una Etiqueta:

CAL03.png

Esta Etiqueta deberá tener las siguientes Propiedades:

Texto: Calculadora de 2 números

Tamaño de la letra: 24

PosiciónDelTexto: Centro

Ancho: Ajustar al contenedor

ColorDeFondo: Negro

ColorDeTexto: Blanco

CAL04.png

De la Paleta agrega cuatro Disposiciones horizontales:

CAL05.png

Todas estas disposiciones tendrán las siguientes 

Propiedades:

Ancho: Ajustar al contenedor

DispHorizontal: Centro

DispVertical: Centro

CAL06.png

En cada una de las tres primeras Disposiciones agrega una Etiqueta junto con un CampoDeTexto. Y en la última, agrega 4 botones.

CAL07.png

Para cada uno de los botones agrega las siguientes Propiedades: 

Cambia los nombres de los botones por: btn_Suma, btn_Resta, btn_Mult y btn_Div ya que los utilizaremos para llevar a cabo operaciones en nuestra calculadora.

Letra: Negrita

Ancho: 40 pixeles

Texto: (símbolo según corresponda, +, -, *, / )

CAL08.png

En la misma Disposición, agrega un quinto  botón con el fin de borrar los datos ingresados anteriormente. Este botón tendrá las siguientes propiedades: 

Nombre: btn_Borrar

Letra: Negrita

Ancho: Automático

Texto: Borrar

CAL09.png

Cambia los nombres de CampoDeTexto1CampoDeTexto2 y CampoDeTexto3 por txt_A, txt_B y txt_Resultado, esto con el fin de denotar que estos serán los Número1, Número2 y Resultado que utilizaremos para hacer alguna operación.

Cambia respectivamente las siguientes Propiedades

Etiqueta: Número A

                Número B

                Resultado

Activar: Negrita

Pista: Número 1 a operar

          Número 2 a operar

          Resultado de la operación

Activar: SóloNúmeros

Posición del texto: Derecha

Sólo para el resultado, cambia el tamaño de texto a 18.0

CAL10.png

PROGRAMACIÓN DE EVENTOS.

Todo el proceso de la Calculadora se realizará haciendo clic en los botones, para ello basta ilustrarlo con uno de ellos y duplicarlo en los demás cambiando sus características específicas. Para esto trabajaremos sobre el botón suma:

Inicializar el texto resultado en blanco:

Desde

txt_Resultado, elige: 

poner.txt_Resultado.como y agrega texto en blanco " "

Desde

btn_Suma, elige: 

cuando.btn_suma.Clic

-> ejecutar

Desde

txt_Resultado, elige: 

poner.txt_Resultado.como

Desde

Matemáticas, elige: 

Suma de dos números

Desde

txt_A y txt_B , elige: 

txt_A.Texto txt_B.Texto

Duplica  el bloque y haz los cambios necesarios para programar las otras operaciones:

CAL11.png
CAL12.png

Ahora ya solo falta programar las acciones del botón Borrar, que lo único que hará es poner en blanco txt_A, txt_B y txt-Resultado:

CAL13.png

Genera el código QR y haz pruebas con las diferentes operaciones.

CONCLUSIÓN DEL PROGRAMA DE PING-PONG.

DISEÑO.

Ahora concluiremos el programa de Ping-Pong que habíamos dejado pendiente.

Abre desde tu aplicación el programa designado.

Ahora descarga los siguientes sonidos.

GAME-OVER:

REBOTE:

Carga los tres sonidos a la biblioteca de medios:

PP01.png

Hay que activar los sonidos y asignar el Sonido1 para cuando la bola colisione en las barras  y asignar el Sonido2 para cuando el juego termine:

PP02.png

PROGRAMACIÓN DE EVENTOS.

Ahora haremos que se sumen los puntos y haya sonido cada vez que se toquen las barras. Para ello te recomiendo que regreses la configuración al idioma Inglés.

En el bloque When.Ball1.CollidedWith.to

agrega lo siguiente 

Desde 

Variables, elige: 

set_____.to y agrega de ahí mismo  "global Points"

Desde

Math, suma: 

get.global Points + 1

Desde

Screen1, elige: 

set.Screen1.Title.to y agrega:

Desde

Text -> join 

"Puntos : " +

get.global Points

Desde

Sonido1, elige: 

call.Sonido1.Play

PP03.png

Prueba los nuevos cambios en tu móvil. Deberán contarse los puntos que realices y escucharse el sonido en cada colisión a las barras. Mientras se esté ejecutando cambia el tipo de sonido para que elijas el que más sea de tu agrado.

Para crear la programación de fin del juego y resetear, completa el bloque When.Ball1.EdgeReached.do de la siguiente forma:

PP04.png

Lo único que nos falta es poder reiniciar el juego solo con  tocar la pantalla. Construye el siguiente bloque:

PP05.png

Puedes hacer pruebas aumentando la velocidad de la pelota.

Tarea Semana 9

Productos y actividades solicitadas en clase:

  • T14. Participación activa en clase

  • T15. Ejercicio de pensamiento computacional con las especificaciones solicitadas.

Productos DE TAREA A ENTREGAR:

  • T16. Conclusiones del corte publicadas en Facebook.

  • T17. Autoevaluación del corte.

  • T18. Comentario del Capítulo 08 en Facebook

bottom of page