Explore the Blocks Page - INTRO TO APP INVENTOR - AGTECH

1. Click on “Blocks” in the top right corner of your computer screen.
2. You are now on the "Blocks" page of App Inventor. This is where we build the code that determines how your app behaves.
3. The "Blocks" page has 2 sections, “Blocks” and “Viewer”.
4. The “Blocks” section is where to find the blocks of codes needed to control your app.
5. The “Viewer” section is where to place the blocks to build your code.
6. In the "Blocks" section, there are built-in sections of blocks as well as blocks for each component we added on the design page. This is why properly naming the components will be helpful!

STEM Connections

When we write code for Arduino, we use line coding. App Inventor uses a different style of coding called Block coding. Block coding uses building blocks to create codes. It has puzzle-like pieces that snap together to show where pieces can go in your code. Students tend to have fewer errors in block coding since the blocks click together and don’t typically require typing.

Understanding the sections of App Inventor will make it much easier moving forward as you begin to add more components and change their properties. The more you use App Inventor, the easier it will get.

If students are working in pairs and one student completed the "Designer" page, they should now switch roles so that the other student can complete the "Blocks" page.

Display the App Inventor "Blocks Page" and use it to highlight the different sections and their use. Below is an example script of what to say and write when presenting the "Blocks" page of App Inventor.

1. “This is the Blocks page of App Inventor” (Draw an arrow to Blocks in top right corner)
2.  “The blocks section is where you find all of the available blocks to control your app (Draw a box around Blocks). Some blocks are built-in functions (for example, control, logic, math, and text) (Underline or arrow to these functions) and other blocks are based on the components you added on the design page (Draw an arrow to the set of Appear, Image, Grow, Shrink, and Disappear)
3. “The viewer section is where you drop your blocks to build your code” (Write ‘coding blocks go here’ in the viewer).
4. “Notice that there is a warning pop-up in the bottom left corner of the viewer (Circle the warnings), this is where you can see if there are any errors in your code, similar to the error messages you receive in Arduino but here you can see them before you test your code.”
5. “Also notice the trash can in the bottom right corner of the viewer (Circle the trash can). This is where you can delete any blocks of code that you do not want.”
6. “Lastly, notice the backpack in the top right corner of the viewer (Circle the backpack). This is where you can put blocks of code that you don’t need but might want to use later. For example, if you want your button to perform a different action but do not want to lose the old action, put the old set of blocks in the backpack.”

Don’t see the 2 sections mentioned on the screen

1. Ensure that you are on the "Blocks" page and not on the "Designer Page". In the top right corner of the screen, you should see the words “Designer” and “Blocks”. Click on “Blocks” to ensure that you are on the correct page.

Components are labeled differently than the video

1. If your components are labeled "Button1", "Button2", and so forth, go back to the "Designer" page to rename them. Properly naming your components will help when building your code because it will make it easier to tell which component you are coding.