Apprenez des astuces pour déboguer votre code et corriger les erreurs dans MIT App Inventor.
Voici les activités de cette leçon :
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".
CONSEILS DE CODAGE
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.
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,
- Coder l'action pour le premier bouton
- Ensuite, testez-le pour vous assurer qu'il fonctionne.
- Passez au deuxième bouton
- 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.
CONTRÔLE DES VERSIONS
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.
Il existe deux façons d'enregistrer différentes versions dans App Inventor, en utilisant "enregistrer sous" et "point de contrôle".
Le "Point de contrôle"enregistre une copie sous le nom que vous lui donnez, mais vous continuez à travailler dans la version originale. L'idée est de faire un "checkpoint" de la version qui fonctionne et de continuer votre développement dans la version principale du projet.
Le projet "Enregistrer le projet sous crée une copie du code sur lequel vous travaillez et l'enregistre sous un nouveau nom. Toutes les modifications apportées seront intégrées à la nouvelle copie.
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'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.
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 notificateurs.
Il existe deux façons de désactiver les blocs dans App Inventor
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. Vous pouvez toujours les remettre en place pour les utiliser.
Vous pouvez également cliquer avec le bouton droit de la souris sur un bloc ou un groupe de blocs et choisir "Désactiver le bloc". Les blocs apparaîtront en gris pour indiquer qu'ils ne s'exécuteront pas. Vous pouvez ainsi désactiver tout un ensemble de blocs.
Pour réactiver vos blocs, il vous suffit de cliquer avec le bouton droit de la souris et de choisir "Activer le bloc".
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.
Conseil du mentor
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.
CONSEILS DE DÉBOGAGE
NOTIFICATEURS ET ÉTIQUETTES
Le Notificateur peut vous aider à comprendre pourquoi votre code est cassé.
Pour placer un Notificateur dans votre application App Inventor, faites-le glisser depuis la palette de l'interface utilisateur.
La manière la plus simple d'utiliser le Notificateur est d'ajouter des blocs ShowAlert avec des informations vous permettant de voir si certains blocs ont été exécutés (ou non).
Outre les messages, vous pouvez afficher des informations telles que la valeur d'une variable ou la position d'un ImageSprite.
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.
FAIRE
Le do itest un autre outil très utile pour le débogage.
Lorsque vous testez votre application en direct, soit avec un téléphone et l'application AI Companion, soit avec l'émulateur, vous avez accès à une nouvelle commande, "Do It".
La commande est grisée jusqu'à ce que vous vous connectiez à un téléphone ou à l'émulateur via le menu Connecter.
Do it vous permet d'exécuter un bloc sans avoir à interagir avec l'application elle-même, ce qui vous permet de voir la valeur actuelle d'une variable ou d'un élément.
Il suffit de faire glisser un bloc de variables "globales" et de cliquer avec le bouton droit de la souris. Sélectionnez "Do It" dans le menu déroulant et ce bloc de code s'exécutera.
Une case jaune "Do It" apparaît au-dessus de la case avec le résultat. Cette méthode peut également s'appliquer à n'importe quelle propriété de composant !
Vous pouvez également utiliser Do It pour modifier quelque chose dans votre application. Par exemple, vous pouvez modifier un élément d'une liste. Faites glisser le bloc correspondant et sélectionnez Do It. Vous ne verrez pas le résultat, mais la liste sera mise à jour dans votre application.
Vous pouvez également exécuter un bloc de code existant dans votre application.
Par exemple, ici, les éléments ListView seront mis à jour à l'aide de Do It. Cela se reflétera dans l'application. Le ListView affichera les nouveaux éléments définis par la commande Do It.
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
- Aller au concepteur
- modifier les valeurs X et Y du Sprite
- 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.
ACTIVITÉ 1 : RÉPARER LE BUG
Correction de bugs dans l'application Timer
- Chargez l'application dans App Inventor.
- Connectez-vous à l'émulateur ou à l'appareil pour tester l'application.
- Try pressing Start without typing anything into the textbox. What happens?
- Essayez d'entrer 0 ou un nombre négatif pour le nombre de secondes. Que se passe-t-il ?
- Corrigez les bugs à l'aide de blocs conditionnels !
ACTIVITÉ 2 : AJOUTER UN COMMENTAIRE
Ajouter un commentaire à votre projet App Inventor
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...
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 pour App Inventor.
