- Conozca la programación basada en eventos
- Comprender los distintos tipos de bloques de la plataforma MIT App Inventor
Éstas 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 de arriba abajo. Algunos programas se limitan a ejecutar todo su código a la vez, pero las aplicaciones móviles funcionan en función 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.
PARAR Y DEBATIR
¿Se te ocurren algunas formas de interactuar con tu teléfono y lo que hace? Aquí tienes algunas para empezar:
- Al hacer clic en el icono de una aplicación, ésta se abre.
- Cuando pulsas "enviar" para 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 Diseñadordonde se diseña la interfaz de usuario. La interfaz de usuario 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.
APP INVENTOR ESCAPARATE DE DISEÑO
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
Arrastre sus componentes al Visor. Los componentes se añaden de arriba abajo, a la izquierda. Tiene que utilizar Componentes de diseño y alineación para tener más control sobre dónde aparecen exactamente sus componentes.
Lista de componentes
Esta lista le ofrece una lista jerárquica de los elementos de su pantalla. Puede seleccionarlos haciendo clic sobre ellos en el Visor o en esta lista.
Panel de propiedades
El panel 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 toda la codificació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 categorías/dibujadores 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 su aplicación tiene su propio conjunto de bloques. Haga clic en en el componente para ver los bloques que puede arrastrar al área de trabajo.
MANIPULADORES DE EVENTOS
Los bloques manejadores de eventos en App Inventor son de color dorado y tienen forma de bloque abierto, por lo que puedes encajar bloques dentro de él. Esos bloques se ejecutan sólo cuando ocurre ese evento.
Al pulsar un 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 púrpura. Algunos lenguajes 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.Hablar
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.
Sonido.Reproducir
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 gettersporque se obtiene el valor de la propiedad.
Setters son de color verde más oscuro, y se pueden encajar, con una ranura abierta en el extremo. Esto le 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ón1
El Texto del Botón1 está configurado con las palabras "I love coding". Las palabras "I love coding" 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 del tutor
Buenas prácticas: Recuerda a los alumnos que esto es exactamente igual que la codificación real. El vocabulario extraño (funciones, getters, setters) que estamos utilizando es exactamente el que usan los programadores.
Preguntas orientativas para los alumnos: ¿Se te ocurren algunas de las funciones cotidianas que realizas? (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 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 Texto de la paleta 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 RESONANCIA
Siga el tutorial de video
y siga las instrucciones de Dave en video más abajo.
Tenga en cuenta que video comienza en 1:11 para saltarse las instrucciones de carga. Estas instrucciones no son necesarias si ha cargado el proyecto de inicio utilizando el enlace anterior.
DESAFÍO
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 Soundboard.
Cuando el usuario hace clic en cualquier imagen para reproducir el discurso asociado, cambiar el fondo fondo 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.
Sugerencia: Compruebe el cajón Color y busque el botón 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 su 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 su aplicación
- Evento - algo que ocurre y desencadena la ejecución de un código
- Manejador 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
Consulte más tutoriales para principiantes de Dave Wolber en App Inventor . appinventor.org
