Appli peinture : Rétroconcpetion et documentation

Durée estimée: 45 minutes


In this lesson we won’t add new functionality to the Paint Pot app. Instead, we will revise the code, leaving the app’s behavior unchanged. This process is called refactoring and programmers do this to improve the quality of their code in various ways -- e.g., to simplify its design, make it easier to read and easier to maintain.

In this case we will introduce the concept of a programmer-defined procedure that will help reduce the complexity of our code and make it easier to read and maintain. This is an example of procedural abstraction, a very important concept and practice in programming.

Objectives: The objectives of this lesson are:

  • to continue learning how to navigate the App Inventor online programming platform;
  • to introduce the concept of a programmer-defined procedure.

Refactoring to Improve Code

Open App Inventor with the Paint Pot Refactor template in a separate tab and follow along with the video tutorial. After the project opens, use the Save As option to rename your project PaintPotWithProcedure.


Documenting Code by Adding Comments

An important feature of every programming language, including App Inventor, is the ability to add comments to the code. A comment is a non-executable block of text that can be added to a program to provide clarification and documentation of the code. Adding comments to one’s code is a standard practice that programmers employ to help others (and themselves) understand their code.

In App Inventor, each non-collapsed block comes with the capability of having a comment added to it. To access this capability you must right-click on the block and choose the Add Comment option. This will add a small comment-icon, a blue circle with a question mark, to block (as shown here).

To add or edit the comment, simply click on the comment-icon and type in your comment, as shown here:

Good Commenting Practice

A good practice to follow is to provide comments in the following situations:

  • To document every procedure that you define, as shown in this example here.
  • To clarify a complex algorithm that isn’t clearly obvious.


Not yet started
1 point
What does refactoring mean?

1 point  
1 point  

Reflection: For Your Portfolio

Create a page named Paint Pot Refactor under the Creative Projects category of your portfolio and give brief answer to the following question:

  1. This Wikipedia article on refactoring talks about code smell as one motivation for engaging in refactoring. What is code smell? Describe briefly two examples of 'code smell' and how refactoring would eliminate them.