- Aprenderás sobre la programación basada en eventos
- Entenderás los distintos tipos de bloques de la plataforma Thunkable
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 Thunkable.
Thunkable tiene dos ventanas que utilizarás para construir tu aplicación. Si haces clic en Diseño en la barra de menú superior (parte superior izquierda de la pantalla), accederás a la ventana Diseñadordonde 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 DE THUNKABLE
Lista de componentes
Todos los componentes que has añadido a tu aplicación aparecen aquí, organizados jerárquicamente por pantalla.
Espacio de trabajo
Tu arrastras los componentes al teléfono en este espacio de trabajo central. Tienes control sobre dónde se colocan los componentes, así como sobre su tamaño.
Añadir componentes
Los componentes visuales se arrastran desde este panel al espacio de trabajo.
Panel de propiedades
El panel Propiedades permite establecer las propiedades de cada componente. Las propiedades son diferentes características que puedes establecer para cada componente, como su anchura, altura y color. Selecciona un componente en el modelo y, a continuación, puedes cambiar cualquiera de tus propiedades en el panel de Propiedades.
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 la paleta de bloques. En la parte superior están los componentes de la interfaz de usuario. Cada componente de tu aplicación tiene su propio conjunto de bloques. Haz clic en el componente para ver los bloques que puedes arrastrar al área de trabajo.
Espacio de programación
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 principales
Los bloques principales son bloques estándar de programación que puedes utilizar en tu aplicación. Están clasificados según su tipo y color.
Características de la aplicación
Son funciones invisibles que puedes añadir a tu aplicación. Puedes hacer clic en una para añadirla y, a continuación, establecer propiedades y arrastrar bloques de código para esa función.
CONTROLES DE EVENTOS
Los bloques de control de eventos en Thunkable son de color dorado y tienen forma de bloque abierto, por lo que puedes encajar bloques dentro de ellos. Esos bloques se ejecutan sólo 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 hace clic en un elemento de ListViewer
Un ListViewer es como un menú desplegable, por lo que este evento ocurre cuando el usuario elige un elemento de la lista. La aplicación debe hacer algo con el elemento sobre el que se hace clic.
Cuando se abre una pantalla
Este evento se utiliza cuando quieres hacer algo cuando la aplicación se inicia por primera vez o la aplicación cambia a otra pantalla. Puedes establecer variables o actualizar información desde la nube.
FUNCIONES
Las funciones son bloques de código que hacen algo. Pueden ejecutarse muchas veces dentro de una aplicación. En Thunkable, los bloques de funciones son de color morado. Algunos lenguajes de programación se refieren a las funciones como métodos o procedimientos. Hacen algo, así que puedes pensar en ellos como bloques de acción.
Decir
Esta función permite a la aplicación decir o pronunciar el texto que quieras.
Inicio del temporizador y reproducción del sonido
El componente Temporizador puede iniciar el conteo. Y la aplicación puede reproducir un sonido.
SETTERS Y GETTERS
Los bloques verdes se refieren a las propiedades de componentes.
Los bloques de color verde claro se denominan gettersporque se obtiene el valor de la propiedad.
Texto del Botón1
El texto se obtiene y se guarda en la variable numberChoice.
Tiempo del temporizador1 en segundos
El valor de los segundos del temporizador se obtiene y se almacena en el texto de Lablel1, por lo que el valor se muestra en la etiqueta.
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 de Button1
El Texto del Botón1 está configurado con las palabras "¡Haz clic en mí!".
Etiqueta1.Texto
El texto de Label1 es el tiempo en segundos de Timer1.
IntervalMilliseconds de Timer1
IntervalMilliseconds de Timer1 (la frecuencia con la que se apaga) se establece en 3000, o 3 segundos.
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 de Matemáticas, en la sección del núcleo 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 sección del Núcleo 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
Luego, sigue el video de Dave para usar Event Handlers y Functions para reproducir discursos en tu app.
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: consulta el cajón color para ver cómo obtener un color aleatorio.
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 de Thunkable en draganddropcode.com
El curso gratuito de Thunkable de la embajadora de estudiantes Meenakshi Nair en Udemy es otro gran recurso.
