Depuración del código en Thunkable

Obtendrás consejos para depurar tu código y corregir errores en Thunkable

¿QUÉ ES LA DEPURACIÓN?

La depuración es el proceso que utilizan los programadores para averiguar por qué su código no funciona, y luego arreglarlo para que funcione.

El término depuración procede de la almirante Grace Hopper, pionera de la informática. Estaba trabajando en el ordenador Mark II de la Universidad de Harvard en los años 40 y una polilla se quedó atascada en el ordenador e impidió que funcionara.

Al deshacerse de la polilla, dijo que estaban "depurando" el sistema. Los programadores utilizan ahora este término para referirse a "corregir errores en mi código".

Grace Hopper

CONSEJOS DE PROGRAMACIÓN

perro mirando el ordenador

La depuración puede ser a menudo la parte más frustrante y lenta de programación, por lo que es muy importante dejar tiempo suficiente para ello.

¡Y también tener paciencia!

TROZOS PEQUEÑOS

A veces, los programadores tienen la tentación de programar toda la aplicación de una sola vez y luego probarla.

¡¡¡No caigas en esa tentación!!!

Si algo no funciona correctamente, lo cual es probable, es difícil saber por dónde empezar siquiera para intentar solucionar el error. 

trozos de chocolate

Divida tu código de programación en pequeños fragmentos. 

Haz que una cosa funcione antes de empezar con la siguiente. 

Codifica un poco, prueba un poco, confirma que funciona, luego codifica un poco más, prueba un poco más, etc. 

Por ejemplo, si tu aplicación tiene 5 botones que hacen cosas diferentes,

  1. Codifica la acción para el primer botón
  2. A continuación, prueba para asegurarte de que funciona.
  3. Pasa al segundo botón
  4. Repite.

Es mejor arreglar el código en un sitio que volver atrás y arreglarlo en 5 sitios si hay un error en tu código.

5 botones en una aplicación

CONTROL DE VERSIONES

empezó como un error

Digamos que sigues la regla de los "trozos pequeños" y tienes una parte de tu aplicación construida y funcionando.

Añades un código nuevo y, de repente, todo deja de funcionar. 

¡OH, NO!

Intentas borrar el nuevo código, pero tu aplicación sigue sin funcionar. No estás seguro de qué ha ido mal y desearías tener un botón de "deshacer".

Para evitar situaciones como ésta, puedes guardar versiones de tu aplicación a medida que consigas que las partes funcionen. 

Así, si cometes un error y no sabes cómo arreglarlo, puedes volver a la última versión funcional que guardaste.

También puedes utilizar el control de versiones para experimentar con nuevas funciones sin preocuparte de romper tu aplicación en funcionamiento.

La versión gratuita de Thunkable tiene un límite de 10 proyectos, por lo que si llegas a tu límite de proyectos, puedes borrar las versiones más antiguas antes de guardar una nueva. 

Para hacer una copia de tu proyecto:

  1. haz clic en los 3 puntos de la esquina superior derecha de la pantalla
  2. Selecciona "Duplicar proyecto" en el menú desplegable.
  3. Cambia el nombre de tus copias guardadas para no perderlas de vista. Usa la numeración v1, v2 ya que funciona bien.
captura de pantalla del menú thunkable duplicate project

BLOQUES COLAPSABLES

Colapsar bloques es una forma de mantener tu código organizado, ya que tu espacio de trabajo de código empieza a llenarse de bloques.

Si haces clic con el botón derecho en un bloque, verás una opción para contraerlo.

Para volver a expandir tus bloques, haz clic con el botón derecho del ratón sobre ellos y selecciona en expandir bloque.

la pantalla abre el bloque que se está colapsando
bloque colapsado en expansión

Los bloques colapsados comprimirán todo su código hasta una barra en tu pantalla.

Siguen funcionando igual que los bloques normales, sólo que ocupan menos espacio. Esto puede ser útil si tienes bloques que ya no necesitas editar y quieres limpiar tu pantalla.

bloque colapsado

DESACTIVAR BLOQUES

También puedes desactivar los bloques.

Permanecen en tu pantalla pero no se ejecutan en la aplicación.

Con los bloques desactivados, puedes probar tu aplicación sin determinados bloques de código. Puedes habilitarlos más tarde y se ejecutarán.

También puedes desactivar los bloques que hayas utilizado sólo para pruebas, como las Alertas.

bloque de alerta desactivado

Simplemente arrastrando bloques fuera de un bloque manejador de eventos los deshabilitará y evitará que se ejecuten. Como no forman parte de ningún evento, no hay forma de que se ejecuten. Aparecerán en gris. Siempre puede volver a insertarlos para habilitarlos de nuevo.

COMENTARIOS

Los programadores suelen dejar comentarios en su código para explicar lo que hace. 

Los comentarios pueden ser útiles cuando otras personas están mirando tu código, como compañeros de equipo, mentoras y mentores, y jueces.

Los comentarios también pueden ser útiles si vuelves al código más tarde y has olvidado lo que hacen algunas partes.

Para añadir un comentario, haz clic con el botón derecho en los bloques y seleccione "Añadir comentario".

Después, aparecerá un signo de interrogación en la esquina del bloque y podrás añadir texto. Puedes ver el comentario haciendo clic en el signo de interrogación.

cuadro de comentarios sobre el bloque de código

Mejores prácticas prácticas: Los comentarios son lo más útil en programación.

Ha habido muchas ocasiones en las que un programador ha codificado algo y luego se ha ido a dormir y ha vuelto a la mañana siguiente sin tener ni idea de lo que estaba haciendo la noche anterior. ¡Escribe siempre comentarios!

It’s also a great way to check your knowledge, because if your coding blocks are easy to comment on then you must understand them really well! Another thing to be aware of is that <, >, =, ≤, ≥ are hard for students for the first time (and for programmers who are years into their careers). When we set a math statement to < when it should be ≤ this is called an “off by one” error and this is a problem that happens to developers with 20 years of experience 😛 It is a very popular problem so be on the lookout for that. 

El mejor tipo de depuración es la "depuración en patito de goma". Es cuando estás realmente atascado en tu código y no tiene sentido. Quieres tomarte un tiempo para hablarlo con otra persona y ver si puede detectar el problema, pero por desgracia no hay nadie cerca. Así que tienes un patito de goma en tu escritorio y le explicas el problema en voz alta a tu amigo pato. Pero tienes que hacerlo en términos muy sencillos para que lo entienda y, después, ¡tú mismo encontrarás el problema! Todos mis compañeros de trabajo tenemos patos de goma en nuestras mesas y hacemos esto muy a menudo.

Preguntas orientativas para estudiantes: ¿Cuánto tiempo crees que tardan los programadores experimentados en depurar errores? Se podría pensar que lo hacen muy rápido, pero todos los grandes sitios web tienen páginas dedicadas a ver cuánto tiempo duran los errores(Facebook, por ejemplo) y también muestran si alguna de sus páginas está caída/rota y si la están depurando en ese momento(ejemplo de Facebook).

¿Cómo se encuentran los errores? (¡muchas, muchas pruebas!) ¿Cuántas pruebas crees que deberías hacer? ¿Cuántas pruebas deberías encargar a otras personas?

¿Cómo saber si has encontrado un error? A veces te pasas una eternidad haciendo clic en una imagen sólo para darte cuenta de que el botón en el que se supone que tienes que hacer clic está debajo de la imagen. ¿Es eso un error? Es una decisión de diseño del fabricante de la aplicación y ellos no creen que sea un error, pero tú sí.

Los consejos de los mentores se proporcionan gracias al apoyo de AmeriCorps.

stylized A, AmeriCorps logo in navy

CONSEJOS DE DEPURACIÓN

ALERTAS Y ETIQUETAS

Puedes utilizar componentes, como Alertas y Etiquetas, para mostrar información mientras realizas las pruebas. Una vez que haya probado completamente la aplicación, puede eliminarlos.

Añade una Alerta en la ventana de bloques haciendo clic en el signo + situado junto a alertas en la paleta.

código para alertas

Configura el mensaje de alerta con la información que deseas rastrear. 

A continuación, utiliza Alert.Show en tu código para mostrar cuando se produce un evento.

Además de los mensajes, puedes mostrar información como el valor de una variable o la posición de un Sprite.

También puedes añadir Etiquetas para mostrar información actual en tu aplicación. 

Por ejemplo, es posible que desees conocer el valor de una variable cuando se producen determinados eventos durante la ejecución de la aplicación. 

Puedes poner en Label.Text lo que quieras saber y se mostrará en tu aplicación. 

Una vez que hayas depurado el error, puedes hacer que la etiqueta sea invisible o eliminarla por completo de tu aplicación.

UTILIZAR LOS DATOS DE PRUEBA

Si tienes mucha información que utilizar en tu aplicación, puede ser útil utilizar datos de prueba. Los datos de prueba son un conjunto más sencillo y reducido de datos que puedes utilizar para asegurarte de que tu app funciona correctamente.

Supongamos que estás creando una aplicación que muestra los restaurantes cercanos. Utilizas Google Sheets para almacenar la información de los restaurantes.

Puedes empezar con uno o dos restaurantes de prueba y probar tu aplicación para asegurarte de que funciona.

Una vez que esté probado y funcione, puedes añadir el conjunto completo de datos del restaurante a tu hoja de Google.

CAMBIAR PROPIEDADES

Si estás probando en vivo tu aplicación, puedes cambiar el valor de una propiedad en el diseñador mientras ejecutas la aplicación y ver sus efectos.

A veces esto puede ayudar a descubrir un problema.

Por ejemplo, puedes estar programación un juego. La posición de un sprite no te parece correcta en tu teléfono cuando se está ejecutando.

Durante las pruebas en vivo, puedes

  1. Ir al diseñador
  2. cambiar los valores X e Y del sprite
  3. La posición del sprite en la pantalla de la aplicación en ejecución cambiará. 

Utilízalo para comprobar y comprender las coordenadas de tu pantalla.

juego con sprites

ACTIVIDAD 1: ARREGLA EL FALLO (BUG)

Tiempo estimado: 20 minutos

Corrección de errores en la aplicación del temporizador

Esta app de temporizador tiene un par de fallos.

  1. Copia el proyecto.
  2. Previsualiza la aplicación para ejecutarla.
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. Prueba a introducir 0 o un número negativo para el número de segundos. ¿Qué ocurre?
  5. Corrige los errores mediante bloques condicionales

ACTIVIDAD 2: AÑADE UN COMENTARIO

Tiempo estimado: 10 minutos

Añade un comentario a tu proyecto en Thunkable

Si ya has empezado tu aplicación final para Technovation, utiliza esa aplicación para esta actividad. De lo contrario, utiliza la aplicación del temporizador de la Actividad 1.

Añade al menos un comentario a tu aplicación explicando qué hace un grupo de bloques. Escoge un grupo de bloques que creas que es el más difícil de entender porque esos bloques probablemente serían los más difíciles de entender para otra persona, como un miembro del equipo.

REFLEXIÓN

Estos consejos pueden ayudarte a codificar tu aplicación móvil para tu proyecto de Technovation.

Pero recuerda...

Fotografía por cortesía de DKJS Franziska Schmitt
La programación no es fácil.
Es muy probable que tu aplicación no funcione perfectamente al principio.
Programa en trozos pequeños.
Celebra cuando consigas que una pequeña parte de tu aplicación funcione.
Tómate un descanso. A veces, alejarte del ordenador durante unos minutos puede darte la perspectiva fresca que necesitas.

REVISIÓN DE TÉRMINOS CLAVE

  • Depuración - proceso que utilizan los programadores para averiguar por qué su código no funciona y solucionarlo.
  • Control de versiones - guardar versiones de trabajo de tu aplicación a medida que avanzas
  • Datos de prueba - un conjunto de datos más sencillo que puede utilizar para asegurarse de que tu aplicación funciona correctamente.
  • Comentarios - texto que se incluye en el código para explicar lo que hace

RECURSOS ADICIONALES

Aquí tiene más recursos de depuración en Thunkable.