1. Creating Mobile Apps with App Inventor! Day 4 Google search Kris Gordon Ludlow for links

2. Day 4’s Topics 1.Some fun components –Barcode Scanner –SpeechRecognizer –TextToSpeech –Location Sensor –Orientation Sensor –Accelerometer Sensor 2.Lab 4

3. Components Components –Elements you combine to create apps’ like all ingredients in a recipe. Component examples –Label component: shows text on the screen –Button component: tap to initiate an action –Drawing Canvas: to hold still images or animations. Components we will work with today –Barcode scanner –Accelerometer –motion sensor

4. Barcode Scanner This component scans barcodes. –Bookland/EAN codes on the back of books, –UPC commercial barcodes at the store –All kinds of barcodes. It also reads QR codes. –Often used to provide links to download apps.

5. 1. In Designer, you need a button with the word scan and a label with no text. 2. From the sensors drawer retrieve a Barcode Scanner component.

6. 3. Switch to the Blocks Editor. We are going to click the button to scan a barcode. What Block should you choose? When I click button1 do What will the program do when we click the button? Call the barcode scanner to do the scan After the barcode is scanned we need a result. What Block should we choose? When barcoderscanner1 has a result /set the label text to/ barcodescanner1 result

7. Lab 4 part 1 Your turn

8. Speech Recognizer The SpeechRecognizer component allows your device to understand speech.

9. 1.In Designer: –button –label-fill parent in width and automatic in height (so that it can scroll) 2. SpeechRecognizer (Media drawer) 3.Clock component (User Interface drawer) to provide time stamping. Steps

11. Steps 3. In the Blocks Editor: Button1.Click1 framework SpeechRecognizer1.GetText block SpeechRecognizer1.AfterGettingText set label1.text to (label drawer) 4. We'll build our display of each voice in the AfterGettingText.

12. 5. Get Label1.Text from the Label1 drawer. Use a make a list block from Built- In/Lists drawer. Basically, we join new notes to the existing text, automatically adding the new note's date and time, putting in carriage returns (line breaks or \n).

14. Lab 4 part 2 Let’s implement a voice note taker app.

15. Sensors Among the several features that make smartphones so powerful are onboard sensors—those being devices telling the phone various things about its environment. The three main built-in device sensors (accessed by components in Design's Sensor drawer) that we can use in our apps are: 1. AccelerometerSensor: allows our apps to determine and perform tasks based on how fast the device is moving. 2. LocationSensor: lets the app know where the device is located and do things related to that data. 3. OrientationSensor: vertical, horizontal, tilted, and so on—our apps know in what orientation the device is being held and can process and use that data also.

16. Location Sensor Here are two basic methods of the location sensor's operation: 1. Network: using the network method, the locat‍‍ion sensor triangulates (a way of calculating position from two or more sources) from the nearest cell towers available. If there's only one, the result might be off by hundreds of yards/meters or even further. 2. GPS: accessing available Global Positioning Satellites with the device's built-in GPS antenna, the location sensor under good conditions can locate the device to within 10-20 feet anywhere on Earth. If you are in a building, GPS signals can't be received. the most reliably accessible method is network, and GPS the most accurate.

17. Location App 1. Drop a button, three label, and a LocationSensor component onto the screen in the Designer.

18. 2. In the Blocks Editor, set up the button as shown below.

19. Lab 4 part 3 Let’s implement a location app.

20. Orientation Sensor Use an orientation sensor component to determine the phone's spatial orientation. An orientation sensor is a non-visible component that reports the following three values, in degrees: Roll : 0 degree when the device is level, increasing to 90 degrees as the device is tilted up onto its left side, and decreasing to −90 degrees when the device is tilted up onto its right side. Pitch : 0 degree when the device is level, increasing to 90 degrees as the device is tilted so its top is pointing down, then decreasing to 0 degree as it gets turned over. Similarly, as the device is tilted so its bottom points down, pitch decreases to −90 degrees, then increases to 0 degree as it gets turned all the way over. Azimuth : 0 degree when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc.

21. Compass Example The OrientationSensor can be used as a compass to find out which direction (north/south, east/west) the phone is pointing. The OrientationSensor provides the OrientationChanged event, which is triggered every time the orientation changes. The Azimuth reading is useful for this type of orientation. Azimuth is always between 0 and 360 degrees, with 0 being north; 90, east; 180, south; and 270, west. So a reading of 45 means the phone is pointing northeast, 135 means southeast, 225 means southwest, and 315 means northwest. A simple compass app that displays in text which direction the phone is pointing.

22. Steps 1. In the Designer, do the following as shown below.

23. Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

24. Lab 4 part 4 Let’s implement a compass app.

25. Roll Example The OrientationSensor is used for game-like apps in which the user controls the action by tilting the device. Now let’s use the Roll Parameter to make an app to move an image left or right on the screen based on the user tilting the device, like you might do in a shooting or driving game.

26. Steps 1. In the Designer, drag out a orientation sensor. Drag out a Canvas and set the Width and the Height to “Fill parent”. Then add a Ball within the Canvas, and add two Labels display roll and pitch value, as shown below.

27. Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

28. Lab 4 part 5 Let’s implement a roll app.

29. Accelerometer Sensor This component senses the Android device's accelerometer, which detects shaking and measures acceleration in three dimensions. Acceleration is measured in SI units (m/s 2 ). If the device is a rest lying flat on its back, the Z acceleration will be about 9.8. The component produces three values. XAccel : Positive when the device is tilted to the right (that is, its left side is raised), and negative when the device is tilted to the left (its right size is raised). YAccel : Positive when its bottom is raised, and negative when its top is raised. ZAccel : Positive when the display is facing up, and negative when the display is facing down.

30. Shake and TextToSpeech Example The OrientationSensor can be used as a compass to find out which direction (north/south, east/west) the phone is pointing. The OrientationSensor provides the OrientationChanged event, which is triggered every time the orientation changes. The Azimuth reading is useful for this type of orientation. Azimuth is always between 0 and 360 degrees, with 0 being north; 90, east; 180, south; and 270, west. So a reading of 45 means the phone is pointing northeast, 135 means southeast, 225 means southwest, and 315 means northwest. A simple compass app that displays in text which direction the phone is pointing.

31. Steps 1. In the Designer, do the following as shown below.

32. Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

33. Lab 4 part 6 Let’s implement a shake and speak app.

34. References 1.http://beta.appinventor.mit.edu/learn/refere nce/components/sensors.html#LocationSen sorhttp://beta.appinventor.mit.edu/learn/refere nce/components/sensors.html#LocationSen sor 2.Ralph Roberts, Google App Inventor, Packt Publishing, 2011