Déboguer votre code avec Thunkable

Apprenez des astuces pour déboguer votre code et corriger les erreurs dans Thunkable

QU'EST-CE QUE LE DÉBOGAGE ?

Le débogage Le débogage est le processus utilisé par les codeurs pour comprendre pourquoi leur code ne fonctionne pas, puis pour le corriger afin qu'il fonctionne.

Le terme "débogage" vient de l'amiral Grace Hopper, pionnière de l'informatique. Elle travaillait sur l'ordinateur Mark II à l'université de Harvard dans les années 1940 et un papillon de nuit s'est coincé dans l'ordinateur et l'a empêché de fonctionner.

Se débarrassant du papillon de nuit, elle a déclaré qu'ils étaient en train de "déboguer" le système. Les programmeurs utilisent aujourd'hui ce terme pour signifier "réparer les erreurs dans mon code".

Grace Hopper

CONSEILS DE CODAGE

chien regardant l'ordinateur

Le débogage est souvent la partie la plus frustrante et la plus fastidieuse du codage, il est donc très important d'y consacrer beaucoup de temps !

Et aussi d'être patient !

PETITS MORCEAUX

Les programmeurs sont parfois tentés de coder l'intégralité de leur application en une seule fois, puis de la tester.

Ne succombez pas à cette tentation !!!

Si quelque chose ne fonctionne pas correctement, ce qui est probable, il est difficile de savoir par où commencer pour essayer de corriger l'erreur. 

morceaux de chocolat

Divisez le codage de votre application en petits morceaux. 

Faites fonctionner une chose avant de passer à la suivante. 

Coder un peu, tester un peu, confirmer que cela fonctionne, puis coder un peu plus, tester un peu plus, etc. 

Par exemple, si votre application comporte 5 boutons qui ont tous des fonctions différentes,

  1. Coder l'action pour le premier bouton
  2. Ensuite, testez-le pour vous assurer qu'il fonctionne.
  3. Passez au deuxième bouton
  4. Répéter.

Il est préférable de corriger le code à un seul endroit plutôt que de revenir en arrière et de le corriger à cinq endroits s'il y a une erreur dans votre code.

5 boutons dans une application

CONTRÔLE DES VERSIONS

tout a commencé par une erreur

Supposons que vous suiviez la règle des "petits morceaux" et qu'une partie de votre application soit construite et fonctionne.

Vous ajoutez un nouveau code et, soudain, tout cesse de fonctionner. 

OH NON !

Vous essayez de supprimer le nouveau code, mais votre application ne fonctionne toujours pas. Vous n'êtes pas sûr de ce qui s'est passé et vous aimeriez avoir un bouton "annuler".

Pour éviter ce genre de scénario, vous pouvez enregistrer les versions de votre application au fur et à mesure que vous faites fonctionner certaines parties. 

Ainsi, si vous faites une erreur et que vous ne savez pas comment la corriger, vous pouvez revenir à la dernière version de travail que vous avez sauvegardée.

Vous pouvez également utiliser le contrôle de version pour expérimenter de nouvelles fonctionnalités sans craindre de casser votre application en cours.

La version gratuite de Thunkable a une limite de 10 projets, donc si vous atteignez votre limite de projets, vous pouvez supprimer les versions les plus anciennes avant d'en enregistrer une nouvelle. 

Pour faire une copie de votre projet :

  1. cliquer sur les 3 points dans le coin supérieur droit de l'écran
  2. Sélectionnez "Dupliquer le projet" dans la liste déroulante.
  3. Renommez vos copies sauvegardées pour en garder la trace. La numérotation v1, v2 fonctionne bien.
capture d'écran du menu du projet dupliqué de thunkable

RÉDUIRE LES BLOCS

La réduction des blocs est un moyen de garder votre code organisé, car votre espace de travail commence à être encombré de blocs.

Si vous cliquez avec le bouton droit de la souris sur un bloc, vous verrez une option permettant de le réduire.

Pour développer à nouveau vos blocs, cliquez dessus avec le bouton droit de la souris et sélectionnez Développer le bloc.

l'écran s'ouvre le bloc étant réduit
expansion d'un bloc réduit

L'effondrement des blocs les réduira à une barre sur votre écran.

Ils fonctionnent de la même manière que les blocs normaux, mais ils prennent moins de place. Cela peut être utile si vous avez des blocs que vous n'avez plus besoin de modifier et que vous souhaitez nettoyer votre écran.

bloc effondré

BLOCS DÉSACTIVÉS

Vous pouvez également désactiver les blocs.

Elles restent affichées à l'écran mais ne s'exécutent pas dans l'application.

Avec les blocs désactivés, vous pouvez tester votre application sans certains blocs de code. Vous pouvez les activer plus tard et ils fonctionneront.

Vous pouvez également désactiver les blocs que vous avez utilisés à des fins de test uniquement, comme les alertes.

bloc d'alerte désactivé

Le simple fait de faire glisser des blocs hors d'un bloc de gestion d'événements les désactivera et les empêchera de s'exécuter. Comme ils ne font partie d'aucun événement, ils ne pourront jamais s'exécuter. Ils apparaîtront grisés. Vous pouvez toujours les remettre en place pour les réactiver.

COMMENTAIRES

Les programmeurs laissent souvent des commentaires dans leur code pour expliquer ce qu'il fait. 

Les commentaires peuvent être utiles lorsque d'autres personnes examinent votre code, comme des coéquipiers, des mentors ou des juges.

Les commentaires peuvent également s'avérer utiles si vous revenez plus tard sur votre code et que vous avez oublié ce que font certaines parties de celui-ci.

Pour ajouter un commentaire, cliquez avec le bouton droit de la souris sur les blocs et sélectionnez "Ajouter un commentaire".

Ensuite, un point d'interrogation apparaît dans le coin du bloc et vous pouvez ajouter du texte. Vous pouvez consulter le commentaire en cliquant sur le point d'interrogation.

boîte de commentaires au-dessus du bloc de code

Meilleures pratiques : Les commentaires sont l'élément le plus utile de la programmation.

Il est arrivé à plusieurs reprises qu'un codeur ait codé quelque chose, qu'il se soit endormi et qu'il soit revenu le lendemain matin sans avoir la moindre idée de ce qu'il avait fait la veille. Écrivez toujours des commentaires !

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. 

Le meilleur type de débogage est le débogage à l'aide d'un canard en caoutchouc! C'est le cas lorsque vous êtes vraiment bloqué dans votre code et qu'il n'a aucun sens. Tu veux prendre le temps d'en parler avec quelqu'un d'autre pour voir s'il peut repérer le problème, mais malheureusement il n'y a personne ! Vous avez donc un fidèle canard en caoutchouc à votre bureau et vous expliquez le problème à haute voix à votre ami canard. Tu dois le faire en termes très simples pour qu'il comprenne et ensuite, tu trouveras le problème toi-même ! Tous mes collègues ont un canard en caoutchouc sur leur bureau et font cela très souvent !

Questions directrices à poser aux élèves : Combien de temps pensez-vous qu'il faut à des codeurs expérimentés pour déboguer des bogues ? On pourrait penser qu'ils sont très rapides, mais chaque grand site a des pages consacrées à la durée d'existence des bogues(Facebook par exemple) et ils indiquent également si l'une de leurs pages est en panne ou cassée et s'ils sont en train de la déboguer(exemple de Facebook).

Comment trouver les bogues ? (beaucoup de tests !) Combien de tests pensez-vous devoir faire ? Quelle quantité de tests devriez-vous faire faire à d'autres personnes ?

Comment savoir si vous avez trouvé un bug ? Parfois, vous passez une éternité à cliquer sur une image pour vous rendre compte que le bouton sur lequel vous êtes censé cliquer se trouve sous l'image. S'agit-il d'un bug ? C'est un choix de conception que le fabricant de l'application a fait et il ne pense pas qu'il s'agisse d'un bug, mais c'est peut-être le cas pour vous.

Les conseils des mentors sont fournis grâce au soutien de l'AmeriCorps.

A stylisé, logo AmeriCorps en bleu marine

CONSEILS DE DÉBOGAGE

ALERTES ET ÉTIQUETTES

Vous pouvez utiliser des composants tels que les alertes et les étiquettes pour afficher des informations lors de vos tests. Une fois l'application entièrement testée, vous pouvez simplement les supprimer

Vous ajoutez une alerte dans la fenêtre Blocs en cliquant sur le signe + à côté de Alertes dans la Palette.

code pour les alertes

Réglez le message d'alerte sur l'information que vous souhaitez suivre. 

Utilisez ensuite Alert.Show dans votre code pour l'afficher lorsqu'un événement se produit.

En plus des messages, vous pouvez afficher des informations telles que la valeur d'une variable ou la position d'un Sprite.

Vous pouvez également ajouter Étiquettes pour afficher des informations courantes dans votre application. 

Par exemple, vous pouvez vouloir connaître la valeur d'une variable lorsque certains événements se produisent pendant l'exécution de l'application. 

Vous pouvez définir le texte de l'étiquette (Label.Text) sur ce que vous voulez savoir et il s'affichera sur votre application. 

Une fois l'erreur détectée, vous pouvez rendre l'étiquette invisible ou la supprimer de votre application.

UTILISER LES DONNÉES DE TEST

Si vous avez beaucoup d'informations à utiliser dans votre application, il peut être utile d'utiliser des données de test. Les données de test sont un ensemble de données plus simples et plus petites que vous pouvez utiliser pour vous assurer que votre application fonctionne correctement.

Supposons que vous créez une application qui affiche les restaurants à proximité. Vous utilisez Google Sheets pour stocker les informations relatives aux restaurants.

Vous pouvez commencer avec un ou deux restaurants d'essai et tester votre application pour vous assurer qu'elle fonctionne.

Une fois qu'il a été testé et qu'il fonctionne, vous pouvez ajouter l'ensemble des données relatives aux restaurants à votre feuille Google.

MODIFIER LES PROPRIÉTÉS

Si vous testez votre application en direct, vous pouvez modifier la valeur d'une propriété dans le Designer pendant que vous exécutez l'application et en voir les effets.

Cela permet parfois de mettre en évidence un problème.

Par exemple, vous pourriez être en train de coder un jeu. La position d'un sprite ne vous semble pas correcte sur votre téléphone lorsqu'il est en cours d'exécution.

Pendant les tests en direct, vous pouvez

  1. Aller au concepteur
  2. modifier les valeurs X et Y du Sprite
  3. La position du Sprite sur l'écran de l'application en cours d'exécution sera modifiée. 

Utilisez-le pour tester et comprendre les coordonnées sur votre écran.

jeu avec sprites

ACTIVITÉ 1 : RÉPARER LE BUG

Durée estimée : 20 minutes

Correction de bugs dans l'application Timer

cela Application de minuterie comporte quelques bugs.

  1. Copier le projet.
  2. Prévisualisez l'application pour l'exécuter.
  3. Try pressing Start without typing anything into the textbox. What happens?
  4. Essayez d'entrer 0 ou un nombre négatif pour le nombre de secondes. Que se passe-t-il ?
  5. Corrigez les bugs à l'aide de blocs conditionnels !

ACTIVITÉ 2 : AJOUTER UN COMMENTAIRE

Durée estimée : 10 minutes

Ajouter un commentaire à votre projet Thunkable

Si vous avez commencé votre application finale pour Technovation, utilisez-la pour cette activité. Sinon, utilisez l'application "Timer" de l'activité 1.

Ajoutez au moins un commentaire à votre application pour expliquer ce que fait un groupe de blocs. Choisissez un groupe de blocs que vous pensez être le plus difficile à comprendre parce que ces blocs seraient probablement les plus difficiles à comprendre pour quelqu'un d'autre, comme un membre de l'équipe.

RÉFLEXION

Ces conseils peuvent vous aider à coder votre application mobile pour votre projet Technovation.

Mais n'oubliez pas...

Photo courtoisie DKJS Franziska Schmitt
Le codage n'est pas facile.
Il y a de fortes chances que votre application ne fonctionne pas parfaitement au départ !
Code en petits morceaux.
Félicitez-vous lorsqu'une petite partie de votre application fonctionne.
Faites des pauses ! Parfois, le simple fait de s'éloigner de l'ordinateur pendant quelques minutes peut vous apporter le regard neuf dont vous avez besoin.

RÉVISION DES TERMES CLÉS

  • Débogage - Processus utilisé par les codeurs pour comprendre pourquoi leur code ne fonctionne pas et le corriger.
  • Contrôle de version - enregistrer des versions de travail de votre application au fur et à mesure que vous progressez
  • Données de test - un ensemble de données plus simples que vous pouvez utiliser pour vous assurer que votre application fonctionne correctement.
  • Commentaires - texte inclus dans le code pour expliquer ce qu'il fait

RESSOURCES SUPPLÉMENTAIRES

Voici d'autres ressources de débogage de Thunkable.