Code 7: Debugging

Code 7

Debugging Your App

Learning Objectives:

In this unit, you will learn…

  • Tips for debugging your code

Debugging Tips

You have taken your ideas and translated them into code. But you are encountering bugs. Agh!

We are so reliant on software that we can’t even imagine life without it anymore. In many ways, software has made our lives easier: we write emails, chat with friends on Facebook, play games and search for information on Google. Software is just about everywhere so we don’t even know we’re using it, for example in cars, traffic lights, TVs, washing machines, and hearing aids. We’re so used to having software that we expect it to function all the time!

So why doesn’t it? Why do we get bugs in the first place? As it turns out, writing software is not always easy. Software isn’t a physical product, so we can’t just look at it to see if it’s correct.

Debugging is the name for the process that coders use to figure out why their code isn’t working. When you did the Code Challenges, you may have already ran into something that forced you to go back over your code and figure out where you made a mistake. This is the essence of debugging and this next section will provide you with tips on how to make debugging easier for you.

Sometimes you may already know how to code something but it will still take you a very long time to do it! Great coders still make mistakes, even when they know exactly what they are doing, so it’s important to build a toolbox of debugging techniques that can help you out when you aren’t sure what went wrong. Everyone has a different method for debugging their code and you’ll figure out what yours is after you practice a bit. Debugging can often be the most time-consuming part of coding, so it’s really important to leave plenty of time for it!

Check out this video to learn about some of the errors that you may encounter in your code and how App Inventor helps you spot them!


If you have questions that are specific to App Inventor while you are debugging, there is an App Inventor Forum you can join here, and then post your question. Although the larger App Inventor community is usually quite helpful and responsive to questions, try searching the forum first to see whether your question has already been asked and answered. This will save you time.

Using test data

If you have a lot of really complicated data to use in your app it can be helpful to use test data. Test data is a simpler set of data that you’ll only use to test your app and make sure it is working correctly.

As an example, let’s say you are making an app that shows the user where the closest restaurant is to them. You want to use fusion tables to store the names of restaurants, the location data, and phone numbers. To get started building your app, you don’t need to have an entire list of restaurants ready in your fusion tables to start coding your app. You can just put in one or two test restaurants and get your app working before adding the real data.

“It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free. ”


–Steve McConnell, software engineering expert and author

Using the Notifer

Let’s say your app is getting stuck and you’re not sure why! You can use the notifier to pinpoint where your code is broken. To put a notifier in your app drag it over from the user interface palette. It will appear as a non-visible component like this:


You can then use these alerts to tell you where your app is getting stuck. For example, let’s say you were using an if statement in your app to carry out a procedure. When you select Option 1 from the spinner you expect Procedure1 to happen. However when you test our your app nothing is happening! Your code looks like this:


You aren’t sure if the problem is with Procedure1, or if it is with the conditional statement you set up. Your problem could also be with the elements that are in the spinner! There’s a lot of things to check so using the notifier can help you narrow down your options and figure out where your mistake is. You add an alert to each part of your conditional statement like this:


When you test your app now you get an alert that says “This app isn’t doing anything!” Now you know that the problem is with your conditional statement, not with Procedure1. The conditional statement is carrying out the code in the else section instead of the if section. Now you can check your conditional statement and see if there are any typing mistakes or if there is a mistake with the elements in your spinner.

If you had tested the app and gotten an alert saying “This app is doing option1” then you would know that the conditional statement is working correctly and that there is an error with Procedure1 not doing what it is supposed to. You could then check the code in Procedure1. Here’s some other scenarios when this method of testing may be helpful:

  • To resolve problems with a loop getting stuck
  • To test if a screen is loading or getting stuck


Collapsing and Disabling Blocks

Two things that may help you are disabling and collapsing blocks you are not using. If you right click on the a block App Inventor will give you the option to collapse or disable a block:


Collapsing the block will compress it down to one bar on your screen like this:image16

This can be helpful when you have a lot of code on your screen and don’t need to see certain parts of it that you are not working on. To expand your block again you need to right click on them.


You can also disable blocks. This will keep them on your screen but prevent them from doing anything. This can be very useful if you have a chunk of code that is not working and you want to test your app without it. You can also do this if you have a notifier block that you were only using for testing purposes but you don’t want to delete it yet. Disabled blocks look like this:


To enable your blocks again,  right click on them and click “Enable Block”.



Good programmers often leave comments in their code to explain what it does. Comments can be helpful when other people are looking at your code, such as teammates, mentors, and judges. Comments can also help if  you return to your code later and have forgotten what parts of it do. To add a comment in App Inventor, right click on the blocks and select “add comment”:


After that a blue question mark will appear in the corner of block and you can add text. You can view the comment by clicking on the question mark.


“By learning to create technology, girls learn to speak up."


–Regina Agyare, Founder of Soronko Solutions

Version Control

Let’s say you have one part your app built and working. When you build and test a second part of your app, everything has stopped working including the part the used to work! You try to delete the blocks you just added but your whole app still isn’t working! Now you aren't sure what went wrong and wish you had an "undo" button.

To avoid scenarios like this it can be helpful to create different versions of your app.  These different versions will save your code exactly as it is so that if you make a mistake later on and don’t know how to fix it, you can go back to the last working version you saved. You can also use version control if you are experimenting with features for your app and you’re not sure if you want to keep them. There are two ways to save different versions in App Inventor, using “save as” and “checkpoint”.

save as

The “save project as” option allows you to create a copy of the code you are working and save it under a new name.

For example let’s say the project you are working on is called “test”. You can save the project you are working on as “test_version2” and keep adding code to it. If you mess something up you can go back to your project called “test”.


The “checkpoint” option lets you save your code as it is under a new name.

For example let’s say the project you are working on is called “test”. Checkpoint will save your current code as a project called “test_checkpoint1”. Then you can keep working and if you mess something up you can go back to the project called “test_checkpoint1”.

Watch this video to learn more about version saving in App Inventor.


Congratulations! You are almost done building an app that is ready to submit to Technovation. We are excited that you have made it this far, and know it has been very hard work for your team.

If this is the first time you have created an app or used code, you've undoubtedly learned a lot and overcome frustration. Some teams even overcame language barriers and limitations to resources that made getting started very difficult.

We are proud of you, and hope you are just as proud for yourself. You have persevered, worked hard, and learned from each other. You are an inspiration to us, and many more.

Additional Resources

كود 7 تصحيح أخطاء التطبيق الخاص بك

أهداف التعليم:

في هذه الوحدة، سوف تتعلمين…

نصائح لتصحيح الأخطاء البرمجية الخاصة بك
نصائح تصحيح الأخطاء
لقد أخذتي أفكارك وقمتي بترجمتها الى كود(تعليمات برمجية). ولكنكِ قد واجهتِ أخطاء. أخ!

نحن نعتمد كثيرا على البرمجيات بحيث أننا لا يمكن أن نتخيل حياتنا بدونها بعد الآن. من عدة نواحي، البرمجيات جعلت حياتنا أسهل: نحن نكتب الايميلات, ندردش مع الأصدقاء على الفيسبوك, نلعب الألعاب ونبحث عن المعلومات على جوجل. البرمجيات هي فقط في كل مكان فنحن حتى لا ندرك أننا نستخدمها, مثلا في السيارات, إشارات المرور, أجهزة التلفاز, الغسالات, والوسائل السمعية. نحن اعتدنا على وجود البرمجيات التي نتوقع منها أن تعمل دائما!

اذا لماذا هي ليست كذلك؟ لماذا نحصل على الأخطاء من البداية؟ كما تبين, كتابة البرمجيات ليست دائما أمرا سهلا. البرمجيات ليست منتج صلب, لذلك نحن لا نستطيع أن ننظر اليه لنرى ان كان صحيحا.

تصحيح الأخطاء هو اسم العملية التي يستخدمها المبرمجون لاكتشاف السبب في كون الكود الخاص بهم لا يعمل. عندما تقوم بعمل تحديات الكود, قد تكون قد واجهت بالفعل أمرا أجبرك على العودة الى الكود ومعرفة أين خطؤك. هذا هو جوهر التصحيح والقسم التالي سوف يقدم لك نصائح لجعل عملية التصحيح أسهل لك.

أحيانا قد تكوني بالفعل تعلمين كيف تبرمجين شيئا ولكن لا يزال يأخذ الكثير من الوقت للقيام بذلك! حتى المبرمجين العظيمين قد يقومو بالأخطاء, حتى عندما يكونو يعلمون ماذا يفعلون بالضبط, لذلك من المهم بناء مجموعة أدوات من تقنيات التصحيح التي يمكن أن تساعدك على الخروج بحل عندما لا تكوني متأكدة أين الخطأ. كل مبرمج لديه طريقة مختلفة في تصحيح الأخطاء وستعلمين طريقتك الخاصة بعد التدريب قليلا. تصحيح الأخطاء قد يكون أكثر جزء مستهلك للوقت من البرمجة, لذلك من المهم حقا ترك الكثير من الوقت لذلك.

تفحصي هذا الفيديو لتتعلمي عن بعض الأخطاء التي يمكن أن تواجهيها في الكود وكيف App Inventor يساعد في تحديدها

اذا كان لديك أسئلة خاصة ب App Inventor أثناء تصحيح الأخطاء, يوجد منتدى App Inventor يمكنك الانضمام هنا, ثم انشري سؤالك. بالرغم من أن مجتمع App Inventor الكبير هو بالعادة مفيد جدا ولديه استجابة للأسئلة, حاولي البحث في المنتدى لتري ان كان سؤالك موجود بالفعل وتمت الإجابة عليه. هذا سيوفر وقتك.

استخدام بيانات الاختبار

اذا كان لديك الكثير من البيانات المعقدة حقا لاستخدامها في تطبيقك سيكون من المفيد استعمال بيانات الاختبار.بيانات الاختبار هو مجموعة أبسط من البيانات التي ستقومين فقط باستخدامها لتتأكدي من أن تطبيقك يعمل بشكل صحيح..

كمثال, لنقل بأنك تنشئين تطبيق يظهر للمستخدم أين توجد أقرب المطاعم له. تريدين استعمال جداول الانصهار(fusion) لتخزين أسماء المطاعم, معلومات الموقع, أرقام الهواتف. للبدء ببناء تطبيقك, لست بحاجة لقائمة كاملة متكاملة من المطاعم جاهزة في جداول الانصهار لبدء برمجة تطبيقك. يمكنك فقط أن تستخدمي واحد أو اثنان من المطاعم كاختبار وجعل تطبيقك يعمل قبل ادخال المعلومات الحقيقية.

“انه من الصعب كفاية ايجاد خطأ في كودك عندما تكون تبحث عنه, وهو أصعب أكثر عندما تفترض أن كودك خالي من الأخطاء”

– Steve McConnell, خبير هندسة برمجيات ومؤلف

استخدام منبه

لنقل بأن تطبيقك عالق ولست متأكدة من السبب! يمكنك استعمال المنبه ليحدد بدقة أين الكود معطوب. لوضع منبه في تطبيقك اسحبه من لوحة واجهة المستخدم. سوف يظهر كمكون غير مرئي مثل هذا:


ثم يمكنك استعمال هذه المنبهات لاخبارك اين تطبيقك عالق. مثلا, لنقل بأنك تستخدمين جمل if في تطبيقك لتنفيذ إجراء. عندما تختارين Option 1 من السبنر تتوقعين حدوثProcedure1 على كل حال, عندما تختبرين تطبيقك لا شيء يحدث! تطبيقك سيبدو كذالك:


أنتي لست متأكدة ان كانت المشكلة من Procedure1, أو اذا كانت من الجمل الشرطية التي قمت بإنشائها. مشكلتك يمكن أن تكون من العناصر الموجودة في السبنر! يوجد الكثير من الأشياء لفحصها لذلك استخدام المنبه يمكن أن يساعدك على تضييق احتمالاتك ومعرفة أين هو خطؤك. تضيفين منبه لكل جزء من جملك الشرطية بهذه الطريقة:


عندما تفحصين تطبيقك الآن تحصلين على رسالة تنبيه تقول ” هذا التطبيق لا يفعل شيئا!” الآن أنت تعلمين أن المشكلة من الجمل الشرطية, وليس من Procedure1. الجمل الشرطية تقوم بتنفيذ الكود الموجود في جزء ال else بدلا من الجزء if . الآن يمكنك فحص جملك الشرطية لتري ان كان يوجد أي أخطاء طباعية أو ان كان هناك خطأ بالعناصر في سبنر الخاص بك.

اذا قمت باختبار تطبيقك وحصلت على رسالة تنبيه تقول ” هذا التطبيق ينفذ option1″ بالتالي سوف تعلمين أن الجمل الشرطية تعمل بشكل صحيح ويوجد خطأ في Procedure1 ولا تعمل ما يفترض بها أن تعمل. هنا يمكنك أن تفحصي الكود في Procedure1 not doing what it is supposed to. You could then check the code in Procedure1. هنا بعض السيناريوهات الأخرى التي يمكن لهذه الطريقة من الفحص أن تكون مفيدة:

  • To resolve problems with a loop getting stuck
  • لفحص ان كانت الشاشة تحمل أو عالقة
انهيار وتعطيل الكتل

هناك أمران يمكن أن يساعداك وهما تعطيل وانهيار الكتل التي لا تقومين باستعمالها. اذا قمت بالضغط بزر الفارة الايمن على block App Inventor سيعطيكي خيار to collapse or disable a block لتعطيل وانهيار الكتلة


انهيار الكتلة سوف يضغطها الى شريط واحد على شاشتك بهذا الشكل:image16

هذا يمكن أن يكون مساعدا عندما يكون لديك الكثير من الكود على شاشتك ولست بحاجة لرؤية مجموعات معينة منها والتي لا تعملين عليها. لتوسيع الكتلة مرة أخرى تحتاجين للضغط عليها بزر الفأرة الأيمن.


يمكنك أيضا تعطيل الكتل. هذا سيبقيهن على الشاشة ولكنه يمنعهن من فعل أي شيء. هذا يمكن أن يكون مفيدا جدا عندما يكون لديك جزء من الكود لا يعمل وتريدين تجريب تطبيقك من دونه. ويمكنك أيضا فعل ذلك اذا كان لديك كتلة للتنبيه وكنت تستعمليها لأهداف الفحص فقط ولا تريدين حاليا حذفها. تعطيل الكتل يبدو كذلك:


لتفعيل الكتلة مرة أخرى بالضغط عليها بالزر الايمن للفأرة, اختيار تغعيل الكتلة “enable block” .



المبرمجون الجيدون بالعادة يتركون تعليقات على الكود لشرح ماذا يفعل. التعليقات يمكن أن تكون مفيدة عندما ينظر أشخاص آخرون للكود الخاص بك, مثلا أعضاء الفريق, الموجهون, والحكام. التعليقات تساعدك أيضا عند عودتك للكود فيما بعد وقد نسيتي ماذا تفعل بعض الأجزاء منه. لاضافة تعليق في App Inventor اضغطي بالزر الايمن على الكتلة واختاري “add comment” اضافة تعليق.


بعد ذلك علامة سؤال زرقاء سوف تظهر في زاوية الكتلة ويمكنك اضافة نص. يمكنك اظهار التعليق بالضغط على علامة السؤال.


“من خلال تعلم خلق التكنولوجيا, الفتيات يتعلمن التحدث”

– Regina Agyare, مؤوسسة Soronko Solutions.

التحكم بالنسخ

لنقل أنه لديك جزء من التطبيق قمت ببناءه ويعمل بشكل صحيح. عندما تنشئين وتفحصين الجزء الثاني من تطبيقك, كل شيء يتوقف عن العمل بما في ذلك الجزء الذي كان يعمل من قبل! تحاولين أن تحذفي الأجزاء التي قمت باضافتها ولكن كل التطبيق ما زال لا يعمل! والآن أنت لست متأكدة ما الخطأ وتتمنين لو كان هناك زر للتراجع.

لمنع مثل هذه السيناريوهات سيكون من المفيد انشاء مجموعة نسخ مختلفة من تطبيقك. هذه النسخ المختلفة ستحفط كودك تماما كما هو وبالتالي اذا قمت بأي خطأ فيما بعد ولا تعلمين كيف تصلحينه, يمكنك العودة لآخر نسخة من العمل قمت بحفظها. يمكنك أيضا استعمال التحكم بالنسخ اذا كنت تجربين المميزات لتطبيقك ولست متأكدة ان كنت تريدين الاحتفاظ بها. هاتان طريقاتان لحفظ نسخ مختلفة في App Inventor , استخدام “save as” و “checkpoint”.

save as

خيار “save project as” يسمح لك بإنشاء نسخة من الكود الذي تعملين عليه وحفظه تحت اسم آخر.

مثلا لنقل بأن المشروع الذي تعملين عليه يسمى “test”. يمكنك حفظ المشروع الذي تعملين عليه ك “test_version2” والاستمرار بإضافة الكود إليه. اذا أخطأت في أمر يمكنك العودة لمشروعك المسمى “test” .


The “checkpoint” option lets you save your code as it is under a new name.

خيار “checkpoint” يسمح لك بتخزين الكود كما هو تحت اسم جديد. مثلا لنقل أن المشروع الذي تعملين عليه اسمه “test” . Checkpoint سوف يحفظ كودك الحالي كمشروع يسمى “test_checkpoint1” . ثم يمكنك الاستمرار بالعمل واذا أخطأت في أمر يمكنك العودة الى المشروع المسمى “test_checkpoint1” .

شاهدي هذا الفيديو لتتعلمي أكثر عن حفظ النسخ في App Inventor.


تهانينا ! أنت تقريبا انتهيتي من بناء تطبيق جاهز لتسجيل الدخول ل Technovation. نحن متحمسون لوصولك لهذه المرحلة, ونعلم أنه كان جهدا كبيرا لفريقك.

اذا كانت هذه هي المرة الأولى التي تبنين فيها تطبيقا أو تستخدمين الكود, فأنت بلا شك قد تعلمت الكثير وتغلبت على الاحباط. بل إن بعض الفرق تغلبت على حواجز اللغة و القيود المفروضة على الموارد والتي تجعل من البداية صعبة جدا.

نحن فخورون بك, ونتمنى أنك فخورة بنفسك أيضا. لقد ثابرت, عملت جاهدة, وتعلمت من بعضكم البعض. أنت إلهام لنا, وأكثر.

مصادر إضافية