Pensamiento computacional: 

Introducción al ambiente de programación app

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

Actividad de consolidación.

App Mentimeter

(6072 8322)

MENTIMETER.jpg
qr.png
35.jpg

 

AVISO IMPORTANTE:

Previo al inicio a esta clase, es de vital importancia instalar en el equipo móvil a utilizar, la app  

MIT AI2 Companion disponible en Play Store 

para realizar las pruebas de los programas a desarrollar.

 

App inventor

Iniciaremos esta clase hablando de la historia del App inventor y posteriormente describiremos el entorno para el desarrollo de aplicaciones.

Fue concebido por Google en 2011 y posteriormente, por diversos motivos no muy claros, fue "abandonado". A partir de ese momento su desarrollo lo retomó el MIT (Instituto Tecnológico de Massachusetts) y aunque aún está en su versión beta (de prueba), ya cuenta con muchas características funcionales.

App inventor es una aplicación distribuida, es decir, una aplicación donde sus componentes se ejecutan en diferentes plataformas conectadas a través de una red.

Para acceder a él hay que ir a la siguiente dirección electrónica: http://appinventor.mit.edu/

01.jpg

La aplicación se basa en desarrollo visual a través de su editor, por lo que no son necesarios grandes conocimientos de programación, pero sí, el entendimiento del desarrollo de pensamiento computacional ya que las aplicaciones que desarrollaremos se realizan mediante la composición de elementos y bloques que utilizan estructuras de control, tema que ya tuviste oportunidad de revisar en el curso de TIC III.

Para acceder a la plataforma Web es necesario contar con una cuenta de Gmail (recuerda que tu cuenta del Colegio está ligada a Gmail, por lo que podrás utilizarla sin problema:

02.jpg
03.jpg

La primera vez que ingreses te mostrará un mensaje referido a los Términos del servicio y te pedirá que aceptes los mismos:

05.jpg

A continuación te mostrará un mensaje de bienvenida que podrás deshabilitar para que en siguientes ocasiones que ingreses no se vuelva a mostrar. Da clic en continuar:

04.jpg

Con el fin de dar apoyo a los iniciados se muestra el ejemplo de 3 tutoriales:

06.jpg

En nuestro caso realizaremos nuestros propios programas, así que hay que darle clic en CLOSE. Con ello estaremos listos  listos para iniciar nuestros programas:

16.jpg

Convenientemente, la primera tarea que hay que realizar es cambiar al idioma Español:

07.jpg

Para crear un nuevo proyecto hay que dar clic en Comenzar un proyecto nuevo... Los proyectos se almacenan en la propia plataforma y la información se guarda de manera automática y en cualquier momento podremos recuperar un proyecto anterior. 

17.jpg

En nuestro primer proyecto utilizaremos el ACELERÓMETRO[1] del celular para que cada vez que lo agitemos cambie la pantalla a un color aleatorio. Denomina el programa con el nombre de COLORES.

09.jpg

Una vez determinado el proyecto, la plataforma nos dirige a la pantalla del diseñador App Inventor:

10.jpg

La interfaz del editor Web se divide en varias secciones, en la parte central tenemos el editor de pantallas de nuestra aplicación (Visor).

 

Por defecto, la aplicación solo tiene una pantalla/ventana (Screen 1), pero se pueden agregar más.

DISEÑO.

Desde Paleta del Diseñador, escoge la opción Sensores e incluye el sensor Acelerómetro.

11.jpg

En Componentes y Propiedades, es posible cambiar la sensibilidad que tenga nuestro sensor. Te recomiendo que la dejes en moderada.

12.jpg

Con lo anterior ya tenemos lista nuestra pantalla.

 

 

 

PROGRAMACIÓN DE EVENTOS.

Ahora, en la sección Bloques programaremos las accciones. Primeramente, escoge del componente Screen1 la opción Poner.Screen1.ColorDeFondo.como con la que se definirá el color de la pantalla.

13.jpg
14.jpg

Ahora del componente Accelerómetro1 escoge la opción Cuando.Acelerómetro1.Agitar que determinará lo que va a suceder cuando agites el dispositivo.  

15.jpg

Construiremos ahora la sección que permitirá el cambio de colores al agitar el móvil. Del componente Colores elije la opción crear color

18.jpg

La resolución que ofrece App Inventor para los colores es de 8 bits para los componentes RGB, esto significa que hay solo una gama de colores determinada que pueden mostrarse en la pantalla cada vez que agites el móvil. Por lo tanto, para esta resolución de 8 bits será necesario crear números aleatorios desde 0 hasta 255.

 

Del componente Math elige la opción random.integer.from y cambia el rango de números aleatorios de 0 a 255.

19.jpg
20.jpg
21.jpg

Con esto ya tenemos el programa terminado y podemos probarlo. Desde la pantalla Diseñador hay que dar clic en la opción del menú principal Conectar y elegir la la primera opción Al Companion: 

22.jpg

Esta acción te generará un código QR que deberás escanear desde la aplicación App Inventor 2 instalada en tu móvil:

qr.jpg
36.jpg

Después de que se establece la conexión entre la aplicación y tu móvil...

37.jpg

...podrás ver su funcionamiento directamente en pantalla, es decir, cada que la agites se mostrará un color diferente.

23.jpg
24.jpg
25.jpg

Tarea Semana 4

Productos y actividades solicitadas en clase:

  • T14. Participación activa en clase

  • T15. Ejercicio de pensamiento computacional con las especificaciones solicitadas. Para esto, descarga el programa realizado con extensión .aia y este será el archivo a entregar

26.jpg

Productos DE TAREA A ENTREGAR:

  • T16. Conclusiones del corte publicadas en Facebook.

  • T17. Autoevaluación del corte.

  • T18. Comentario del Capítulo 04 en Facebook

[1] El acelerómetro del móvil consta de una parte móvil que se mueve dependiendo de la aceleración que le apliques, y de otra fija que interpreta el voltaje resultante de este movimiento para determinar la velocidad a la que lo hace y su orientación.