CPSC 110-08: Computing with Mobile Phones

Software Engineering Principles

CS Principles

• VC21: Students will see how to features of App Inventor's development environment to locate and correct errors in the programs, understand better how the program functions.
• VC22: Students will be introduced to an iterative, step-wise approach to building a program and to the importance of documentation and debugging.

Introduction

In this lesson we will focus on software engineering principles -- i.e., the art and science of designing and building an app. We will briefly describe some best practices aimed at instilling good coding habits. If you adopt these ideas, you will find programming much more enjoyable and less frustrating.

At the end of the lesson we will try to debug a buggy version of the FairCoin app that we developed last time.

Design for Real People

User-centered design is the practice of involving the end-users in the app development process.

Apps should solve real problems for real people. It only rarely happens (mostly in movies) that "If you build it they will come."

Design Before Coding

• What is the app going to do?

• What components are needed?

• What will make up its user interface and how will the user interact with them?

• What types of data (variables, properties) does it need?

• How can it be broken up into procedures?

• What algorithms does it need?

Use the design we developed in the Fair Coin Experiment as a model.

Build a Prototype

Build a simple prototype that you can show to end-users and advisers. Ask for feedback.

Incremental Development -- Stepwise Refinement

The following steps should be repeated on very small -- 1 or 2 statements -- portions of your app.

Design
1. Code
2. Test
3. Repeat

The biggest mistake that beginners make is writing too much code and then getting overwhelmed with the bugs that result.

If you write a tiny bit of code, it is easy to find where the bug -- it's in that tiny bit of code!

Divide and Conquer

Break your app up into procedures. This will help:

• Encapsulate important functions into named building blocks.
• Localize bugs and erros.
• Avoid duplication of the same code segment in multiple places.
• Simplify the process of revising the code.

Trace Your Code By Hand

Just as we have done on several occasions already, it is often useful to trace your code by hand. Write down a table with columns for each of the variables that you want to keep track of. Then trace step-by-step through your code and compare the result with the expected result.

Document Your Code with Comments

Use comments to clarify and document your code. App Inventor lets you "Add a Comment" to any code block by right-clicking on it.

NOTE: This is a requirement. Part of your project grade will be based on how well you document your code.

Debugging Your App

Program bugs are just a fact of life. They exist in all programs and they are created even by the greatest and most experienced programmers.

Detective work: Finding and fixing bugs can be an enjoyable activity if you approach it like a detective:

• Think logically.
• Observe what's going on in your variables.
• Trace the steps the suspects looking for evidence.
• Set up models to test your hunches (hypotheses).
• Consult with others when you get in a rut.

Watching Variables and Testing Blocks

App Inventor lets you watch variables and lets you test indiidual blocks (do it). Just right click on the block or the variable.

NOTE: You have to have the app connected to the emulator or a phone for this to work.

Inclass Exercise: Let's Play Detective