- Aprenderás sobre la programación basada en eventos
- Entenderás los distintos tipos de bloques de la plataforma MIT App Inventor
Estas son las actividades para esta lección:
EVENTOS
Las aplicaciones móviles se basan en la programación dirigida por eventos.
La programación dirigida por eventos se basa en eventos, en lugar de ejecutar el código desde arriba hacia abajo. Algunos programas se limitan a ejecutar todo su código a la vez, pero las aplicaciones móviles funcionan dependiendo de cómo interactúa el usuario con ellas.
Las aplicaciones móviles funcionan en función de eventosque son cosas que ocurren para que se ejecute el código. Un ejemplo sería - el usuario hace clic en un botón. El evento se produce cuando el usuario hace clic. Y el evento desencadena la ejecución de un código, llamado controlador de eventos.
PARA Y COMENTA
¿Se te ocurren algunas formas de interactuar con tu teléfono y lo que hace? Aquí tienes algunas ideas para empezar:
- Al hacer clic en el icono de una aplicación, ésta se abre.
- Cuando pulsas "enviar" un mensaje de texto, éste se envía y emite un sonido.
- Cuando intentas iniciar sesión en una aplicación, ésta te pide una contraseña.
Empecemos por examinar las distintas partes de la plataforma App Inventor.
App Inventor tiene dos ventanas que puedes utilizar para crear tu aplicación. Haciendo clic en el botón Diseñador (parte superior derecha de la pantalla) se accede a la ventana. El Diseñadores donde se diseña la interfaz de usuario. La interfaz de usuario es todo aquello en tu aplicación con lo que el usuario puede interactuar. Pueden ser botones, barras de navegación, cuadros de texto, imágenes, etc.
VENTANA DE DISEÑO EN APP INVENTOR
Paleta
Se eligen componentes de la paleta para añadirlos al visor, que se encuentra en el centro de la ventana. Hay varios cajones de componentes para explorar y utilizar.
Visor
Tu arrastras tus componentes al visor. Los componentes se añaden de arriba a abajo, a la izquierda. Tienes que utilizar los componentes de diseño y alineación para tener más control sobre dónde aparecen exactamente los componentes.
Lista de componentes
Esta lista te ofrece una lista jerárquica de los elementos de tu pantalla. Puedes seleccionarlos haciendo clic sobre ellos en el visor o en esta lista.
Panel de propiedades
El panel de propiedades permite establecer las propiedades de cada componente, como el tamaño de letra, la alineación, el color, etc.
Componentes no visibles
Los componentes no visibles no aparecen en la pantalla, pero siguen formando parte de la aplicación. Aparecen debajo de la pantalla al arrastrarlos y soltarlos.
Cuando alguien utilice tu aplicación, interactuará con tu interfaz de usuario; pulsando botones, introduciendo texto, etc. A ti te corresponde decidir qué debe hacer tu aplicación y programarla para que lo haga.
EDITOR DE BLOQUES
Haciendo clic en "Bloques" se accede al editor de bloques donde se realiza todo el trabajo de programación. Los bloques se arrastran desde el panel de la izquierda al espacio de trabajo situado en el centro de la pantalla.
A la izquierda encontrarás los bloques que puedes arrastrar al espacio de trabajo. Están en las categorías como Control y Lógica.
Visor
Este es tu espacio de trabajo, donde arrastras todos tus bloques. Puedes moverlos y encajarlos entre sí. También puedes eliminar los bloques que no necesites.
Bloques de componentes
Cada componente de tu aplicación tiene su propio conjunto de bloques. Haz clic en en el componente para ver los bloques que puedes arrastrar al área de trabajo.
CONTROLES DE EVENTOS
Los bloques de control de eventos en App Inventor son de color dorado y tienen forma de bloque abierto, por lo que puedes encajar bloques dentro de él. Estos bloques sólo se ejecutan cuando ocurre ese evento.
Cuando se pulsa el botón
Esto ya lo has utilizado. Cuando el usuario pulsa un botón concreto, quieres que la aplicación haga algo, como abrir otra pantalla o enviar un mensaje.
Cuando se cambia la orientación de la pantalla
Si el usuario cambia la orientación de su teléfono de vertical a horizontal, es posible que desee hacer algo, como cambiar el diseño de la pantalla o el tamaño de los componentes.
Cuando se cambia la posición del deslizador
Un deslizador permite al usuario arrastrarlo para elegir algún valor a lo largo del mismo. Esto puede provocar un cambio en otro componente. Por ejemplo, puede aumentar el tamaño del lápiz en una aplicación de dibujo utilizando un control deslizante.
FUNCIONES
Funciones son bloques de código que hacen algo. Pueden ejecutarse muchas veces dentro de una aplicación. En App Inventor, los bloques de funciones son de color morado. Algunos lenguajes de programación se refieren a las funciones como métodos o procedimientos. De hecho, App Inventor suele referirse a ellas como procedimientos. Hacen algo, así que puedes pensar en ellos como bloques de acción.
TextToSpeech.Speak
El componente TextToSpeech puede decir o pronunciar cualquier texto que quieras que pronuncie.
Camera.TakePicture
El componente Camera puede tomar una foto con el teléfono.
Sound.Play
El componente Sound puede reproducir un sonido.
SETTERS Y GETTERS
Los bloques verdes se refieren a los componentes y sus propiedades.
Los bloques de color verde claro que pueden ajustarse a otro bloque se denominan "getters"porque obtienen el valor de la propiedad.
Los "setters" son de color verde más oscuro, y se pueden encajar, con una ranura abierta en el extremo. Esto te permite establecer el valor de la propiedad.
Texto del Botón1
El Texto del Botón1 se obtiene y almacena en la variable global saludo.
Texto del botón 1
El texto del botón 1 es "I love programación". Las palabras "I love programación" aparecerán en el botón.
Texto de la etiqueta1
El Texto de la Etiqueta1 se ajusta a la Fuente del Sonido1. Esto significa que el nombre del archivo de sonido se mostrará en la Etiqueta1.
Fuente de Sound1
La fuente de Sound1 (el nombre del archivo de sonido) se obtiene y se almacena en la propiedad Text de Label1. Al establecer el texto de una etiqueta, esencialmente se muestra el valor en la etiqueta, por lo que el nombre del archivo de sonido aparecería en Label1.
Texto de Label1
TextToSpeech obtiene el contenido del Texto de Label1 y lo pronuncia. Cualquier texto que se muestre en Label1 será pronunciado.
Consejo de los mentores
Buenas prácticas: Recuerda a las estudiantes que esto es exactamente como es en realidad programación. El extraño vocabulario (funciones, getters, setters) que estamos utilizando es exactamente el que usan los programadores.
Preguntas orientativas para estudiantes: ¿Se te ocurren algunas de las funciones que realizas a diario? (Por ejemplo: hacer una tarta, lavarse los dientes... cualquier cosa que tenga pasos repetibles). Las funciones son muy parecidas a los algoritmos.
Los consejos de los mentores se proporcionan gracias al apoyo de AmeriCorps.
BLOQUES DE DATOS
Cuando utilices bloques "setter", es posible que utilices algunos otros bloques incorporados que representan datos, o información que se puede utilizar en tu aplicación. A continuación se muestran algunos ejemplos de bloques de datos que se pueden utilizar.
Números
Los valores numéricos pueden utilizarse como datos en una aplicación. Estos bloques se encuentran en el cajón de Matemáticas de la paleta de bloques.
Texto o cadenas
El texto, a veces llamado cadenas, puede utilizarse como datos. Se trata de letras, palabras y frases que pueden utilizarse en una aplicación. Los bloques se encuentran en el cajón de Texto de la paleta de Bloques.
Booleano
Este tipo de datos sólo tiene dos valores posibles: verdadero o falso. Estos bloques pueden establecer o comprobar el "estado" de algo y se utilizarán en los condicionales, sobre los que aprenderás más.
ACTIVIDAD: TUTORIAL DE LA CAJA DE SONIDOS
Sigue el siguiente tutorial
y sigue las instrucciones de Dave en el video de aquí abajo.
Ten en cuenta que video comienza en el minuto 1:11 para saltarse las instrucciones de carga. Estas instrucciones no son necesarias si ya has cargado el proyecto de inicio utilizando el enlace anterior.
RETO
En la actividad, has utilizado:
- Bloques de control de eventos
- Bloques de funciones
Intentemos utilizar algunos bloques setter y getter añadiéndolos a tu aplicación de la caja de sonidos.
Cuando el usuario haga clic en cualquier imagen para reproducir el discurso asociado, cambiar elfondo de la pantalla.
Puedes cambiarlo a un color concreto, pero entonces no podrás volver a cambiarlo fácilmente al color inicial, el negro, así que en su lugar, cambia el fondo de la pantalla a un color aleatorio.
Pista: Comprueba el cajón de color y busca el botón para hacer un bloque de color. Luego busca en el cajón de matemáticas un bloque de números enteros aleatorios. Los colores se componen de 3 números, RGB para rojo, verde, azul, que van de 0-255.
REFLEXIÓN
Ahora que has aprendido un poco más sobre los diferentes bloques de código, piensa en la solución de tu aplicación:
REVISIÓN DE TÉRMINOS CLAVE
- Interfaz de usuario - todo aquello con lo que el usuario puede interactuar en tu aplicación
- Diseñador - donde puedes añadir componentes a tu aplicación y diseñar su aspecto.
- Editor de bloques - ventana donde se codifican los bloques para tu aplicación
- Evento - algo que ocurre y desencadena la ejecución de un código
- Controlador de eventos- bloques de código que indican a tu aplicación qué hacer cuando se produce un evento
- Programación basada en eventos - programación basada en eventos, en lugar de ejecutar todo el código de arriba abajo
- Funciones - un bloque de código que se ejecuta y puede ejecutarse varias veces
RECURSOS ADICIONALES
Consulta más tutoriales de Dave Wolber en los tutoriales para principiantes de App Inventor enappinventor.org
