ACS-1805 Introduction to Programming (with App Inventor)

Transcription

1 ACS-1805 Introduction to Programming (with App Inventor) Chapter 2 9/6/2018 1

2 HelloPurr The counterpart of the Hello World the typical very first program in the traditional programming Instead of displaying this sentence it will meow and purr To get you started building apps What You ll Learn in this chapter Building apps by selecting components and specifying their behavior Using the Component Designer to select components Adding media (sounds and images) to apps by uploading them from your computer Using the Blocks Editor to assemble blocks that define the components behavior Testing apps with App Inventor s live testing This lets you see how apps will look and behave on the device, step by step, even as you re building them Packaging the apps you build and downloading them to a device 9/6/2018 2

3 The App Inventor Environment The environment Web browser Connect to ai2.appinventor.mit.edu This opens the newer version App Inventor vs. App Inventor Classic Or some people call them App Inventor 2 vs. App Inventor (like in our textbook) 9/6/2018 3

4 The App Inventor Environment The environment has three key parts The Component Designer You use it to select components for your app and specify their properties. The Blocks Editor You use it to specify how the components will behave An Android device You can actually run and test your app as you are developing it Or the Android emulator If you don t have an Android device handy 9/6/2018 4

5 The App Inventor Environment Likely the first stop is the Projects page Where you can start a new project save your project or perform any other tasks that deal with your project(s) The App Inventor is a cloud computing tool So your app is stored on an online server, among many, instead of on your local computer You can access it anywhere, as long as you have an Internet connection 9/6/2018 5

6 Component Designer You will land here when you first get into App Inventor In this window you deal with components Components The elements you combine to create apps like ingredients in a recipe Some are quite simple label, button, etc. Some are more elaborate drawing canvas, accelerometer, or others that bring up actions, etc. 9/6/2018 6

7 Component Designer The component designer is divided into several areas The Viewer In the center This is where you place components and arrange them to match the design of your app (ROUGHLY!) The Palette To the left A list of components from which you can select It is divided into sections The Components list To the right It lists the components in your project Any component that you drag into the Viewer will also show up in this list The Media Under the Components list It is an area that shows the media like pictures and sound in the project 9/6/2018 7

8 Component Designer The Properties To the far right It shows the Properties of components when you click a component in the Viewer Properties are details about each component that you can change 9/6/2018 8

9 Making the App Make a label Drag from the Palette to the Viewer You might need to open the drawer to select the desired component Now go to the Properties window Change the property called Text in its box for the label s text Change the property called BackgroundColor to blue Change the property called TextColor to yellow 9/6/2018 9

10 Making the App Add a button For the kitty Drag a button from the Palette to the Viewer Place it under the label Obtain a picture of the kitty Click the area under the property called image Upload the kitty picture you have obtained After the image uploads, the picture should be listed as an option for the image property of the button Click OK to choose it 9/6/

11 Making the App Add the meow sound Obtain the sound file And upload it, like what you did to the picture of the kitty Now go to the Media section in the Palette Drag a sound component from the Palette to the Viewer Go to the property of the sound component called Source then go through the steps to upload and choose the sound file 9/6/

12 Live Testing Testing the app under development in an incremental manner Best practice that can save you hours of work There are three options for live testing Build apps with an Android device and Wi-Fi Connection No Wi-Fi but with an Android device use a USB Cable to connect it Don t have an Android device Use the Emulator 9/6/

13 Live Testing If all goes well you should see the HelloPurr app running on your device including all of the components you added As you make changes in the App Inventor Designer or Blocks Editor, those changes will also appear on the device as well 9/6/

14 Blocks Editor Now it s time to assign some behaviors to the components In this example the button We need to use Blocks Editor for this job You can jump to the Blocks Editor by clicking Blocks in the top right of the Component Designer In the Blocks Editor you instruct the components what to do and when to do it In the Blocks Editor There is a column in the top left window beneath the Blocks header A Built-in drawer A number of drawers for each component you created in the Designer When you click a drawer, you get a bunch of options (blocks) for that component that you can use to build the button s behavior 9/6/

15 Blocks Editor Event Handler There can be the word when included on a block Blocks including the word when are called event handlers They specify what components should do when some particular event happens 9/6/

16 Making the Kitty Meow Program what will happen in response to that event Click Sound1 to open the drawer for the sound component Then drag out the call Sound1.Play block App Inventor is set up so that only certain blocks fit together By this way you always know you re connecting blocks that actually work together you can also hear a snapping sound when the two blocks are put together By this way App Inventor shows the behaviors you re trying to create in a plain and understandable fashion 9/6/

17 Making the Kitty Purr We can simulate the purr by making the device vibrate Vibration is a core device functionality App Inventor helps you to easily put your hands on it You just need to add a second function call block to the button click in the Blocks Editor Go to the Blocks Editor and click Sound1 to open the drawer Select call Sound1.Vibrate and drag it under the call Sound1.Play block in the Button1.Click slot 9/6/

18 Making the Kitty Purr Notice that the call Sound1.Vibrate block includes the text millisecs at the lower right, and alongside it is an open socket? An open socket in a block means that you need to plug something into it to specify more about how the behavior should work You need to specify the time period here in thousandths of a second (milliseconds) Grab a number block from the Math drawer Enter 500 Plug the 500 number block into the socket on the right side of call Sound1.Vibrate 9/6/

19 Shaking the Device Add another element that employs another cool feature of Android Making the kitty meow when you shake the device It uses a component called AccelerometerSensor This component can sense when you shake or move the device around How to do this Expand the Sensors area in the Palette components list and drag out an AccelerometerSensor It will stay in the Non-visible components section at the bottom of the Viewer 9/6/

20 Shaking the Device Treat shaking the device as a different and separate event from the button click This means that you need a new event handler. Open the drawer for AccelerometerSensor1 in the Blocks Editor Drag out the AccelerometerSensor1.Shaking block Drag out a call Sound1.Play block and fit it into the gap in AccelerometerSensor1.Shaking 9/6/

21 The Finished Project 9/6/

22 Downloading the App to Your Android Device The app you develop won t be available on your device after you disconnect your device if the app is not downloaded and installed on your device To make the app available anytime and to any device you must download and install the app to that device After it s installed you will see an icon in the list of apps on your device Select the Screen component in the Designer Click its Icon property Then upload an image file as the icon (the kitty picture)round 9/6/

23 Downloading the App to Your Android Device You need to ensure that your device allows apps to be downloaded from places other than the Android Market (Google Play) For most Android devices, you do this by going to Settings, depending the version of your android system then checking the box next to Unknown sources 9/6/

24 Downloading the App to Your Android Device Now start building the app In the Designer click Build select App (provide QR code for.apk) You should see a Progress Bar message in the window This process could take up to a minute Scan the QR Code for the finished app onto your device with a Barcode Scanner app When the QR code is displayed After scanning the QR Code, the device might prompt you to enter your password for your Google account When you finish entering your password your app will begin downloading to your device You ll see a download icon in your device s notifications 9/6/

25 Downloading the App to Your Android Device Go to your notifications, wait until the download completes, and then choose the app to install it Now the app is available on your device Sharing the App Download your project to your computer 9/6/