(AIS) Programming Your App Lesson

Programming Your App

Now that you have the User Interface completed, you are ready to program your app.  

The Blocks Editor

interface: MyBlocks Screen⚫ Add Screen Blocks Viewer Contre Logie Math Text Colors Variables Procedures Screen1 Any component (large blank screen on the right side of image)

When you go from Design View to the Blocks Editor, you should see the built-in blocks on the left as well as the components you have created.

Each of the components is an individual element that has a function. Programming is taking those individual elements and grouping them together in a logical way to solve a problem and create the intended behaviors.

Flow charting is a way to logical sequence the events in your program.  This is an example of a flow chart for the Paint Pot program in App Inventor.

Paint Pot Flow Chart with the following information: Paint Pot App Flowchart Start Take picture Select color Poke screen Press and drag Draw lines Select circle size Draw circles Small dot Big dot

Once you have the flow of your program, you can start to create the algorithms which are the step by step instructions for the specific events. Algorithms are written in English pseudocode. Then it can be transferred to creating the blocks in the blocks.

Designing the Algorithms

Good programmers design the algorithms or logic for these actions or events first and then write the code from the algorithm. Below are examples of writing the desired action in English and then creating the blocks using the components.

Algorithm & Code Example when a color button is clicked set the canvas paint color to appropriate color code block: when ButtonHead.Click do set DrawingCanvas.PaintColor to (red) when canvas is touched draw a circle at that location code block: when DrawingCanvas.Touched x y touchedAnySprite do ? call DrawingCanvas.DrawCircle centerX get x centerY get y radius 5 fill true when wipe button is clicked clear canvas code block: when ButtonWipe.Click do call DrawingCanvas.Clear

Refer to the programming requirements sheet for this project for specific programming requirements.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION