Thunkable: Una mirada más cercana

  • Conozca la programación basada en eventos
  • Comprender los diferentes tipos de bloques de la plataforma Thunkable

É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 es cuando el usuario hace clic. Y el código que se ejecuta cuando ocurre ese evento se llama 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.
chicas discutiendo

Empecemos por examinar las distintas partes de la plataforma Thunkable.

Thunkable tiene dos ventanas que usas para construir tu aplicación. Al hacer clic en Diseño en la barra de menú superior (parte superior izquierda 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.

VENTANA DE DISEÑO THUNKABLE

Ventana de diseño Thunkable
1

Lista de componentes

Todos los componentes que ha añadido a su aplicación aparecen aquí, organizados jerárquicamente por pantalla.

3

Espacio de trabajo

Arrastre 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.

2

Añadir componentes

Los componentes visuales se arrastran desde este panel al espacio de trabajo. 

4

Panel de propiedades

El panel Propiedades permite establecer las propiedades de cada componente. Propiedades son diferentes características que puede establecer para cada componente, como su anchura, altura y color. Seleccione un componente en la maqueta y, a continuación, puede cambiar cualquiera de sus propiedades en el panel 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 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.

Editor de bloques Thunkable
1
Paleta de bloques

A la izquierda, encontrará 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.

4

Espacio de trabajo de codificació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.

2

Bloques básicos

Los bloques principales son bloques de codificación estándar para utilizar en tu aplicación. Están clasificados según su tipo y codificados por colores.

3

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.

MANIPULADORES DE EVENTOS

Los bloques manejadores de eventos en Thunkable 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.

Bloque de eventos de clic de botón Thunkable

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.

Bloque de eventos de clic en elementos del visor de listas Thunkable

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.

La pantalla Thunkable abre el bloque de eventos

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

Funciones son bloques de código que hacen algo. Se pueden ejecutar muchas veces dentro de una aplicación. En Thunkable, los bloques de funciones son de color púrpura. Algunos lenguajes se refieren a las funciones como métodos o procedimientos. Hacen algo, así que puedes pensar en ellos como bloques de acción.

bloques de funciones

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 del componente. 

Los bloques de color verde claro se denominan gettersporque se obtiene el valor de la propiedad.

Bloques getter Thunkable

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. 

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.

Bloques configuradores Thunkable

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.

IntervaloMilisegundos del Temporizador1
IntervalMilliseconds de Timer1 (la frecuencia con la que se apaga) se establece en 3000, o 3 segundos.

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.

A estilizada, logotipo de AmeriCorps en azul marino

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.

bloques matemáticos tronchables

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, en la sección del núcleo de la paleta de bloques.

bloque de texto thunkable

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 sección Núcleo de la paleta de bloques.

bloques booleanos thunkables

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

Tiempo estimado: 45 minutos

Siga el tutorial de video

Descargue los archivos multimedia aquí (para más información, consulte la página de Dave video )
Luego sigue el video de Dave a continuación para usar Event Handlers y Functions para reproducir discursos en tu aplicación.

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: 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:

¿Qué componentes necesitará para su aplicación?
¿Qué eventos necesitarán controladores en tu aplicación?
¿Cuáles son las acciones que se llevarán a cabo cuando se activen los eventos en 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

Echa un vistazo a más tutoriales Thunkable de Dave Wolber en draganddropcode.com

Meenakshi Nair, embajadora de los estudiantes Thunkable de Meenakshi Nair de Meenakshi Nair en Udemy.