Introducing app inventor

Activity 1.2.2 Introducing App Inventor

Introduction

As computers advanced during the 1960s, they were the size of a car and were only used by computer specialists. One of the first computer languages, COBOL, was created by computer scientist Grace Hopper in 1959. She wanted non-specialists to be able to create their own programs to harness the new power of computers. Still, there were few people who imagined that the average person would one day program their own computer. Steve Wozniak took the computing industry by surprise when he created the Apple computer for the hobbyist. Revealed by Wozniak in 1976 at a meeting of Silicon Valley’s Homebrew Computer Club, the device allowed non-professionals to program in unprecedented masses. Have you ever wished your phone or tablet had an app that doesn’t seem to exist yet? Maybe it’s time to brew one yourself!

en.wikipedia.org/wiki/File:Pdp7-oslo-2005.jpeg en.wikipedia.org/wiki/File:Apple_I.jpg

Equipment

·       Android device or emulator

·       Computer with Google Chrome™

Procedure

1.       Form pairs as directed by your teacher. Practice professional skills by greeting your partner and establishing team norms.

2.      You will be developing an Android app in this activity. You will be provided with starter code, and you will complete the code for the app. Observe the starter and complete versions, either by experimenting with them on an Android device, observing your teacher demonstrate them, or watching the video in the PLTW learning management system on this activity’s page.

3.      Launch App Inventor 2 as follows. Each team member can do this individually.

a.      Use Google Chrome to browse to http://ai2.appinventor.mit.edu  

b.      The App Inventor website will redirect you to a secure Google webpage to sign in to your Google account. If you do not have a Google account, your teacher will have you create one. Make sure you sign out before leaving your computer. Before providing your Google email address and Gmail password, verify the following to protect your identity.

                                                              i.      Check the protocol in the web address (known as a URL). The protocol is the procedure for retrieving the web page. It is specified at the beginning of the URL before the double slash “//”.

The protocol should be “https”. The “s” in that acronym stands for “secure” and indicates your password will be sent with encryption. Encryption is protection by secret code known only to the website owners.

                                                           ii.      Check the domain name, which is shown in the second part of the URL, after the double slash in “https://” and before the next slash. The domain name should end with “google.com”. This is an assurance that the secure connection is with Google and not an imposter.

      

c.       The splash screen will suggest that you use the AI2 Companion on your Android device in order to use a wireless connection for transferring Android programs. Unless directed otherwise by your teacher, click Continue on the splash screen.

4.      The starting screen for App Inventor is called “My Projects,” shown below at left. To start the project, you will upload some code as follows.

a.      In the PLTW learning management system, download the starter code “color_chooser_stage1.aia” linked on this activity’s page. Save the file and note where you save it.

b.      In the browser’s page for App Inventor, choose Project > Import project (.aia) from my computer … as shown at right.

    

c.     Click Choose File. In the Windows Explorer dialog box that opens, browse to the file “color_chooser_stage1.aia” that you saved in Part a of this step. Select the file and click Open as shown below on the left. In the web browser, select OK as shown below on the right.

    

5.     Once the file has uploaded, App Inventor should take you directly to the color_chooser_stage1 project, and you will be looking at App Inventor’s GUI Designer screen. This screen shows the components you can add to your GUI. There are already four components that have been added to this app’s GUI. Three of them (a label, a slider, and a canvas component) are placed within the fourth component (a vertical arrangement component).

6.      In the components panel, click on the Label1 component as shown below on the left. The properties panel will show all the properties of that Label1 component. The BackgroundColor property, for example, has a value of None, as shown below on the right.

                              

a.      What is the value of the Text property of the Label component?

b.      What is the value for each property of the red_Slider1 component? Fill in the table below with the values and your guesses as to what they might mean.

Properties of the slider component red_Slider1
Property	Value	Meaning
ColorLeft	red	Color on left side of the UI element
ColorRight	black	Color on right side of the UI element
MaxValue	255	Maximum position of UI element
MinValue	0	minimum position of UI element
ThumbPosition	127	the current slider position
Visible	showing	Showing the UI element
Width	Fill parent	The width of the UI element

7.      Click on Blocks to move to the Blocks editor. The Blocks editor is the third screen of App Inventor’s three views. This is where you program the components. Note that you can navigate among the three screens by clicking on either the Designer or Blocks button at right or by selecting Project > My Projects.

The purpose of the three screens is as follows.

	The My Projects screen shows all of the apps that you’ve worked on.
	The GUI Designer screen allows you to place components into your GUI and manipulate their starting properties.
	The Blocks editor is where you program components to respond to events.

8.     In App Inventor, a program is described partly in the GUI Designer and partly in the Blocks editor. Explore the Blocks editor as follows.

a.      The Blocks panel shows many categories for the blocks. There are eight built-in categories and one category for each component that you have placed in your app in the GUI Designer. Name two of the categories:

-control

-math

b.      To see the palette of blocks in a category, click the category. Name a block in the Variables category:

get

c.       Click each category and scroll through the blocks available in each category. Some documentation may be made available by holding the mouse over a block. If you click the block, it will place the block in the scripts Viewer. You can use the delete key on your keyboard to delete a block from the scripts Viewer. Hover over a block that looks unfamiliar and read its documentation. Describe what the block does:

Trim: returns a copy of its text string arguments with any leading or trailing spaces removed

d.      Some blocks have drop down menus, as shown here. Name a block with a drop down menu.

set

e.      Some blocks have mutators, as shown here. You will use block mutators in the next activity. For now, just find a block with a mutator. What block did you find?

min

9.      Consider all three screens available in App Inventor. In what ways do you notice that this environment is similar to Scratch™ programming language?

The use of blocks is very similar to scratch, the different catagories look like what scratch uses

10.  To modify the code for the app so that the user can control the green content of the circles with a second slider as demonstrated in the final stage, add a slider component and program it as follows.

a.      Click on Designer to return to the GUI Designer view.

b.      Drag a slider from the Palette to the Viewer. Place it just below the red_Slider1.

c.       Click Rename in the Components panel. Change the slider’s name to green_Slider1. We will always insert a descriptive name for a component, but keep the old part of the name as well. We do this because it makes it easy to see what types of components are in the component list.

d.      In the Properties panel, set the properties of the green-Slider1 component as follows:

ColorLeft = Green

ColorRight = Black

MaxValue = 255

MinValue = 0

ThumbPosition = 127

Visible = Showing

Width = Fill parent…

e.      In the Blocks editor, choose the Variables category and select the “initialize global” block shown below on the left. Rename the variable to green as shown below on the right. When the app is launched, this pair of blocks will create a global variable named “green”. A global variable is one that can be used in any part of the program.

f.        From the Math category, select the “0” block. Change its value to 127 and attach it to the block from step e. The result is pictured below.

g.      Find the blocks pictured below. This chunk of blocks sets the canvas component’s paint color.  

What do you think the three elements in the list are used for?

Setting the paint color

h.     From the variables category, select the “get” block. Change the variable to “global green”. You will use this value as the second item in the list pictured in the previous step. Delete the “127” block that comes loose by selecting it and pressing delete. The result is pictured below.

i.        In the blocks area, find the “when red_Slider1.PositionChanged” event handler shown below. What do you think the function of this event handler is?

j.        Create a similar event handler for the green Slider as follows.

                                                              i.      Use Ctrl-C to copy it and Ctrl-V to paste a duplicate copy of the red Slider event handler pictured in the previous step.

                                                           ii.      Use one of the dropdown menus on the copy of the event handler to change the component from red_Slider1 to green_Slider1.

                                                         iii.      Use the dropdown menu of the “set” block to change the variable being set to “global green”. The result is shown below.

11.   Transfer the program from the App Inventor website to your Android device as directed by your teacher: by wireless with QRC, by live connection through a USB cable, by sideloading through a US cable, by email, or even by using the emulator instead of a device. The email option, with images for a Nexus 7 running Android 4.3, is as follows:

a.      Choose Build > App (save .apk to my computer).

b.      Use another tab in the browser to email yourself and attach the app to the email. The downloaded file to attach ends in “apk”. It will probably be available in your downloads folder.

c.       On the Android device, allow installation of apps from sources other than Google Play Store™ as follows.

                                                              i.      From the Apps screen, select Settings.

                                                           ii.      Select PERSONAL-Security.

                                                         iii.      Place a check mark next to DEVICE ADMINISTRATION-Unknown Sources.

d.      Access your Gmail on the Android device as follows. Be certain to follow the steps for removing your account from the Android device at the end of this activity

                                                              i.      In the Apps screen, select Settings.

                                                           ii.      Select ACCOUNTS-Add account.

                                                         iii.      Choose Google. Then choose Existing and sign in with your Gmail credentials.

e.      Open the attachment on the Android device as follows.

                                                              i.      In the Apps screen, select email.

                                                           ii.      Open the email containing the app attachment.

                                                         iii.      Click the attachment at the bottom of the email message.

                                                          iv.      Click Install.

12.  After establishing that the additional slider for green content works, add a slider for blue coloring. Follow step 11 parts a, b, and e to test the final program on your device.

13.  Add a Button component to clear the canvas. To do so will require you to add a new component and set its initial properties in the GUI Designer, and then create an event handler for when the button is pressed in the Blocks editor. Before beginning, discuss your strategy with your partner and agree on expectations for driver/navigator roles.

14.  Before returning the Android device to your teacher, be certain to remove your Gmail account from the device as follows:

a.      In the Apps menu, select Settings.

b.      Select ACCOUNTS – Google.

c.       Select your Google account.

d.      Select the “action overflow” button in the upper right (the stack of three squares) and then select Remove account and confirm Remove account.

Conclusion

1.       Step 8 mentions, “In App Inventor, a program is described partly in the GUI Designer and partly in the Blocks Editor.” How is this similar to Scratch? What information about a program in Scratch is not shown in Scratch’s scripts area? Where is it shown?

In App Inventor because with this there is the GUI designer, as opposed to scratch which relies entirely on the blocks.

2.      The lead creator of the App Inventor project is Hal Abelson, an M.I.T. professor who is also the lead author of the book Blown to Bits (www.bitsbook.com/excerpts). Abelson says that we are entering a new era of personal mobile computing in which the average person can program their own mobile device. Abelson asserts that “personal mobile computing” is an important stage beyond the era of “personal computing” that was initiated by Apple’s Steve Jobs and Steve Wozniak in 1976.

In what ways will mobile devices and the opportunity for the average person to program them change society?

People being able to create their own apps will lead the way to people having more control of the world around them.  And with people creating their own things, meaning that not all apps are made by large companies, this gives more power to the masses instead of everything being controlled by the large and rich.

Do some pre-writing in which you collect your thoughts on this question. Pre-writing is written evidence of brainstorming and outlining that precedes a first draft.