Depurar el código en App Inventor

Consejos para depurar el código y corregir errores en MIT App Inventor

¿QUÉ ES LA DEPURACIÓN?

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 CODIFICACIÓN

perro mirando el ordenador

La depuración suele ser la parte más frustrante y lenta de la programación, así que es muy importante dedicarle tiempo.

Y también a tener paciencia.

TROZOS PEQUEÑOS

A veces, los programadores tienen la tentación de codificar 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 la codificación de su aplicación en pequeñas partes. 

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 su 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. Pasar al segundo botón
  4. Repite.

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

app con 5 botones

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, puede 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.

Hay dos formas de guardar diferentes versiones en App Inventor, utilizando "guardar como" y "punto de control".

El "Punto de control"guardará una copia con el nombre que le des, pero seguirás trabajando en la original. La idea es "checkpoint" esa versión que funciona y continuar tu desarrollo en la versión principal del proyecto.

Menú Proyecto, punto de control seleccionado

En "Guardar proyecto como" creará una copia del código en el que estás trabajando y lo guardará con un nuevo nombre. Cualquier edición que realices aparecerá en la nueva copia.

menú proyecto, guardar como seleccionado

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 los bloques, haga clic con el botón derecho del ratón sobre ellos y seleccione Expandir bloque.

Expandir un bloque de App Inventor

Los bloques colapsados lo comprimirán 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 bloqueos.

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 bloques que hayas utilizado sólo para pruebas, como los Notificadores.

Hay dos formas de desactivar los bloques en App Inventor

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. Siempre puedes volver a insertarlos para utilizarlos.

bloque desactivado al arrastrarlo fuera del bloque de eventos

También puede hacer clic con el botón derecho en un bloque o grupo de bloques y elegir "Desactivar bloque". Los bloques aparecerán en gris para indicar que no se ejecutarán. De esta forma puedes desactivar un conjunto completo de bloques.

Para volver a habilitar los bloques, basta con hacer clic con el botón derecho del ratón y elegir "Habilitar bloque".

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, 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, da clic con el botón derecho en los bloques y selecciona "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.

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

Ha habido muchas ocasiones en las que un codificador 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 los alumnos: ¿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.

A estilizada, logotipo de AmeriCorps en azul marino

CONSEJOS DE DEPURACIÓN

NOTIFICADORES Y ETIQUETAS

El componente notificador puede ayudarte a averiguar por qué tu código no está funcionando. 

Para colocar un notificador en su aplicación App Inventor, arrástrelo desde la paleta de la interfaz de usuario.

Ejemplo de ShowAlert

La forma más sencilla de utilizar el Notificador es añadir bloques ShowAlert con información para que veas que ciertos bloques se han ejecutado (o no).

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

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

Por ejemplo, es posible que quieras 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.

"HAZLO"

 En Hazlo es otra gran herramienta para la depuración.

Mientras pruebas en vivo tu aplicación, ya sea con un teléfono y la aplicación AI Companion, o con el emulador, tienes acceso a un nuevo comando, "Hazlo".

El comando aparece en gris hasta que te conectas a un teléfono o al emulador a través del menú Conectar.

"Hazlo" te permite ejecutar un bloque sin tener que interactuar con la propia aplicación, para que puedas ver el valor actual de una variable o elemento. 

 

Simplemente arrastra un bloque de variables "get global" y haz clic con el botón derecho. Selecciona ""Hazlo"" en el menú desplegable y ese bloque de código se ejecutará.

"Hazlo" en el menú desplegable

Aparecerá un recuadro amarillo de "Hazlo" encima del recuadro con el resultado. Esto también puede funcionar para cualquier propiedad del componente.

"Hazlo" resultado del bloque

También puedes utilizar "Hazlo" para cambiar algo en tu aplicación. Por ejemplo, puedes cambiar un elemento de una lista. Arrastra el bloque para hacerlo y selecciona "Hazlo". No verás el resultado, pero la lista se actualizará en tu aplicación.

 

establecer un valor de lista con "Hazlo"

También puedes ejecutar un bloque de código existente en tu aplicación. 

Por ejemplo, aquí los elementos ListView se actualizarán utilizando "Hazlo". Esto se reflejará en la aplicación. El ListView mostrará los nuevos elementos establecidos con el comando "Hazlo" .

actualizar un listview con "Hazlo"

UTILIZAR LOS DATOS DE LA 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 probado y funcionando, 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 programando un juego. La posición de un sprite no se ve bien en tu teléfono cuando se está ejecutando.

Durante las pruebas en directo, puede

  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: ARREGLAR EL FALLO

Tiempo estimado: 20 minutos

Corrección de errores en la aplicación Temporizador

Este Temporizador tiene un par de fallos.

  1. Cargue la aplicación en App Inventor
  2. Conéctate al emulador o al dispositivo para probar la aplicación.
  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ÑADIR UN COMENTARIO

Tiempo estimado: 10 minutos

Añada un comentario a su proyecto App Inventor

Si has iniciado tu aplicación final para Technovation, utiliza esa aplicación para esta actividad. De lo contrario, utiliza la aplicación Timer 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 cortesía de DKJS Franziska Schmitt
Codificar no es fácil.
Es muy probable que tu aplicación no funcione perfectamente al principio.
Código 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 - guarda versiones de trabajo de tu aplicación a medida que avanzas
  • Datos de prueba - un conjunto de datos más sencillo que puedes utilizar para asegurarte de que tu aplicación funciona correctamente.
  • Comentarios - texto que se incluye en el código para explicar lo que hace

RECURSOS ADICIONALES