App Inventor Overview App Inventor is an Integrated Development Environment (IDE) that you access through a web browser. An IDE provides all of the tools you need to develop in one application. App Inventor (AI) has three different sections. 1. Projects View A list of all of your projects. 2. Designer View The default view when you create a project. This is where you ll add user interface (UI) objects to your project s screens. You ll also use the Designer to add non-ui objects that your project will use, such as networking, database, clock, etc. 3. Blocks View This is where you will do all of your coding. You will access App Inventor from your web browser by going to: http://appinventor.mit.edu. In order to access AI, you ll have to provide a Google Account. If you have projects associated with your account, AI will open the last project you worked on. If not, you will see the Projects View, where you can create a new project or import a project. Samsung Mobile App Academy 1
Learn to Code Projects View The Projects View is simply a list of all of your projects. We re going to click on the New Project button. We ll name the project TestProject and click OK. Samsung Mobile App Academy 2
Learn to Code Designer View This is where you ll add user interface (UI) objects to your project s screens. You ll also use the Designer to add non-ui objects that your project will use, such as networking, database, clock, etc. Our new TestProject will open in Designer View. You can see the name of the project on the left. Also, you ll notice that the Designer button is disabled since we re in the Designer View. The Designer View has five sections. We ll give a quick overview of each section now, then go into more detail later. 1. Palette 2. 3. 4. 5. Viewer Components Properties Media Samsung Mobile App Academy 3
Palette The Palette is your toolbox of components that may be added to your project. There are three types of components: visual components such as Buttons and Labels; components that add capabilities (but are not visible) such as Clock and Accelerometer- Sensor; the last set is comprised of coded components such as the Camera and Notifier (coded components are not initially visible, but they will add a coded UI feature to your app). Viewer The Viewer is a canvas where you will add UI and other toolbox objects. Components The Components section is simply a list of all of the objects you have added to the Viewer. Some objects may contain other objects; you can see the nesting relationship of objects in the Components section. This is also where you may rename objects. Properties Most components have configurable settings, or Properties. The Properties for whichever object is selected in the Components section will be displayed. Media The Media section allows you to upload images, audio files, video files, icons, etc. Any media you have uploaded will be listed here. Simple App We ll explain each of these sections in some more detail later on. For now, let s dive in and drag some objects from the Palette onto the Viewer. Then we ll rename them in the Components section and configure some of their settings in the Properties section. We ll create a simple app that allows a user to type their name in a TextBox, push a Button, and save the name in the TinyDB (the app s database). Samsung Mobile App Academy 4
Create Simple App We ll start a new project by clicking on Project, Start new project We ll name the project SimpleApp. Project names must start with a letter and can contain only letters (uppercase and lowercase), numbers, and underscores. Samsung Mobile App Academy 5
Adding Objects to the Project All new projects start with only one object in their Viewer, a screen named Screen1, which is also the only thing listed in the Components section. There will always be a one-to-one relationship between items in the Viewer and items in the Components section. All objects your project uses are added by first finding the object in the Palette section, then dragging the object onto the Viewer. HorizontalArrangement Label TextBox Button TinyDB Simple App is going to need a few objects: HorizontalArrangement can be found in the Layout section of the Palette. TinyDB is found in the Storage section. The rest of the objects are found in the User Interface section. Go ahead and drag all of the objects out onto the Viewer. Samsung Mobile App Academy 6
Here s the Viewer and Components after adding all of our objects: Notice that in the Viewer, TinyDB1 shows up at the bottom in the Non-visible components section, and that in the Components section, all of the objects we added are indented under Screen1. Let s rename the objects. Samsung Mobile App Academy 7
Renaming an Object Renaming an object is simple. Select the object in the Components section, then click the Rename button. We ll rename all of our objects except for TinyDB1. Rename: HorizontalArrangement1 to NameHorizontalArrangement Label1 to NameLabel TextBox1 to NameTextBox Button1 to SubmitNameButton Samsung Mobile App Academy 8
Changing Properties NameHorizontalArrangement should fill the width of Screen1. NameLabel should display Name: instead of Text for Label1. SubmitNameButton s text should be Submit Name, not Text for Button1. Let s fix these and a few other properties. Note that TinyDB1 does not have any properties. Screen1 Change the Title property from Screen1 to Simple App. Samsung Mobile App Academy 9
NameLabel NameHorizontalArrangement We ll change its Width property from Automatic to Fill parent. Change the Text property to Name:. Samsung Mobile App Academy 10
NameTextBox Change the Hint property from Hint for TextBox1 to Enter Your Name. Change the Width property from Automatic to Fill parent. SubmitNameButton Change FontSize to 20, Text to Submit Name, Width to Fill parent, and Height to 60 pixels. Samsung Mobile App Academy 11
Arrange Objects NameLabel should be on the same line as NameTextBox. On the Viewer, drag NameLabel and NameTextBox into NameHorizontalArrangement. Notice that, in the Components section, NameLabel and NameTextBox are now indented under NameHorizontalArrangement. We ll now take a look at the Blocks View. Samsung Mobile App Academy 12
Blocks View Blocks View is where we do all of our programming. Switch to the Blocks View by clicking the Blocks button. The Blocks View has three sections: 1. Blocks 2. Viewer 3. Media Blocks Palette This is where you ll find all of your programming blocks. Just like on the Designer View, you ll find a block and drag it out onto the Viewer. Viewer The Viewer is where you ll configure your blocks. This is where all the programming is done. Media The Media section is a duplicate of the Media section on the Designer View. Let s take a look at the Blocks section. Samsung Mobile App Academy 13
Blocks View Blocks Palette Here s what the Blocks section looks like. There are Built-in blocks, blocks associated with Screens and their objects, and blocks associated with Any component. We won t go into any more detail about the Any component section in this overview. Notice that all of the objects we added in Designer View appear under Screen1. This section of the Blocks palette will always match the Components section of the Designer View. Samsung Mobile App Academy 14
Blocks Drawer If you click on any item in Blocks, a drawer of available blocks will appear. Here s the NameLabel s drawer of available blocks. To use a block in our code, we simply drag it from the drawer to the Viewer. Drag out the first two blocks: NameLabel.BackgroundColor set NameLabel.BackgroundColor to Samsung Mobile App Academy 15
Properties Setters and Getters Notice the first block looks like a puzzle piece that can fit into another piece. And the second block looks like a puzzle piece that can receive another piece. The first block gets a property s value (in this case the BackgroundColor property) and passes it along to whichever block it is connected. The second block sets a property s value to the value it receives from whatever block is connected to it. This will make more sense with some examples. Setter Let s set NameLabel s BackgroundColor property to black. All we do is drag out a BlackColor Block and attach it to the set NameLabel.BackgroundColor to Block. Getter Let s get the current value of NameLabel s BackgroundColor property and store it in a variable. Samsung Mobile App Academy 16
Compare Blocks to Object s Properties Sticking with our Label example, let s take a look at the properties we can configure in code and the properties we can configure in the Designer View. Notice that most of the properties we can configure in the Designer, we can also set or get in code. BackgroundColor, FontSize, Height, Text, TextColor, Visible, and Width are accessible both in Blocks and in the Designer Properties section. Whereas FontBold, FontItalic, FontTypeface, and TextAlignment may be set only in the Designer Properties section. Each object is different so be sure to check out their Properties both in Designer and in Blocks. Samsung Mobile App Academy 17
Object s Control and Procedure Blocks We already saw Setter and Getter blocks associated with objects. Now we ll look at two other types of blocks that may be connected to objects. Let s look at the blocks drawer for NameTextBox. Control Blocks.GotFocus and.lostfocus are Control Blocks. When the user clicks into the NameTextBox, whatever code is in the.gotfocus block will be executed. When the user leaves the Name- TextBox, whatever code is in the.lostfocus block will be executed. Procedures.HideKeyboard is a procedure that can be called. Procedures associated with objects are pieces of code that are included with the App Inventor system. In this example, the.hide- Keyboard procedure is system code that will hide the onscreen keyboard. You can only call system procedures. You can t modify them in any way. Later on we ll learn about custom procedures that you can create. Samsung Mobile App Academy 18
Blocks Finding Help If you hover over a built-in block with your mouse pointer, you ll see a description of the block. Blocks Palette Built-in It s important to understand where to look for blocks. Under Built-in there are eight sections: Control Logic Math Text Lists Colors Variables Procedures Each Built-in section is color coded all of the blocks within the section are the same color as the square next to the section s title. Now we re going to build out our Simple App. As we add blocks to the Viewer we ll specify which section the blocks come from. Later in this Overview, we ll go into more detail about each section. Samsung Mobile App Academy 19
Simple App Simple App will allow a user to type his or her name into the NameTextBox and press the SubmitNameButton. It will then save the name to TinyDB1. Also, when Screen1 is initialized, it will check TinyDB1 for the user s name and load it into the NameTextBox, if found. There are two Control points in this app: 1) when Screen1 initializes (loads for the first time), and 2) when the user clicks the SubmitNameButton. Let s start with what happens when the user clicks SubmitNameButton. SubmitNameButton.Click In the Blocks palette, click on SubmitNameButton; its blocks drawer will appear. Drag out the first block when SubmitNameButton.Click do. The only thing we have to do is save whatever text is in NameTextBox to TinyDB1. Click on TinyDB1 and drag out the call TinyDB1.StoreValue tag valuetostore block. Drag this block to the do section of the SubmitNameButton.Click block. It will snap in place. The TinyDB1.StoreValue procedure requires two parameters. The first one, tag, is simply a name we ll give the data so that we can access it later using the same name. Let s call our data UserName. We ll drag out a Text constant block and type UserName. The Text constant block is the first block in the Text section under Built-in. Samsung Mobile App Academy 20
Now we ll attach the Text constant to our existing code by dragging it next to the tag parameter. We re almost done. All we have to do is get the Text value of the NameTextBox. In the Blocks palette, click on NameTextBox and drag out the NameTextBox.Text block. Now we ll attach the Text getter to our existing code. That s it, we re done Now when the user clicks the SubmitNameButton the text that is in the NameTextBox will be saved to the database with the tag UserName. Screen1.Initialize When the program launches, it initializes Screen1 before it is displayed for the first time. In the Blocks palette, click on Screen1, then drag out the when Screen1.Initialize do block. This is the block of code that will be executed every time Screen1 initializes. We want to add code to this block that will read the user s name from the database and put it in the NameTextBox. We ll need a NameTextBox.Text setter as well as a procedure to read data from TinyDB1. Samsung Mobile App Academy 21
Click on NameTextBox and find the set NameTextBox.Text to block. Drag it to the do section of the Screen1.Initialize block. Now click on TinyDB1 and find the call TinyDB1.GetValue tag valueiftagnotthere block. Drag it to the to link of the NameTextBox.Text block. All that s missing is the tag parameter. We ll use the same Text constant block we used when we saved the value to TinyDB1. Use copy and paste to create a copy of the UserName Text constant. Click on the block you want to copy, press Command+C on Macs or Control+C on Windows, then press Command +V on Macs or Control+V on Windows. Samsung Mobile App Academy 22
You ll see a copy of the UserName Text constant floating just under the original. Drag it to the tag link. That s it, we re done with Simple App Next, we ll see what it looks like on an Android device or the Android emulator. Samsung Mobile App Academy 23
Connect to Device Over WiFi To connect your Android device to App Inventor over WiFi you ll need to install the AI Companion application on your Android device. From your Android s web browser, open this URL: http://appinventor.mit.edu/explore/ai2/setup.html. Once AI Companion is installed, launch it, then, on your computer, select AI Companion under the Connect menu. A popover will be displayed with a QR code and a six-letter code. On your device, you can simply select the Scan QR Code option to connect. Or you can type the six-letter code in the space provided on the device. Samsung Mobile App Academy 24
Resetting AI Companion Connection If AI Companion on your device stops responding to your code updates, you may have to reset the connection. On your device, close AI Companion by pushing and holding the Home button. Your recent apps will be displayed. Find AI Companion, then swipe it off the screen to close it. Now relaunch AI Companion. On your computer, under the Connect menu, choose Reset Connection. Then connect to AI Companion as per the instructions above. Samsung Mobile App Academy 25
Running on an Emulator If you don t have an Android device, you can still test your app on your computer using an Android emulator. Select the Emulator option under the Connect menu. A separate window will open with an Android emulator. It could take a minute for the emulator to open and start up completely. Samsung Mobile App Academy 26
Building Your App AI Companion and the Emulator are both great for testing your app while you re developing it. But when you re done you will want to install your app on your device and maybe even share it with your friends. To do this, you ll need to build the app. Under the Build menu you have two options: 1) App (provide QR code for.apk); and 2) App (save.apk to my computer). Provide QR Code for.apk The first option is useful for installing on your own device. It creates a QR code that you can scan with the AI Companion app or most other QR-scanning apps. The QR code links to the.apk file on the Internet for direct download to your device. Save.APK to my Computer The second option will download the.apk file to your computer. You can then email it to your friends or even upload it to the Google Play store. Samsung Mobile App Academy 27
Designer and Blocks Now that you got your feet wet by building Simple App, let s revisit the Designer View and the Blocks View. This document is not intended to be a complete guide to all of the objects and blocks available in App Inventor. Instead, it will give you enough of an orientation so that you can get started with the app tutorials. Designer and Blocks Media The Media section appears on both the Designer and Blocks Views. It allows you to upload images, audio files, video files, icons, etc. Any media you have uploaded will be listed here. Here s a screenshot of the Media section in a project that doesn t have any media files yet. After uploading two image files, we see the files listed in the Media section. Samsung Mobile App Academy 28
Designer View Palette All of the objects available in the Palette are grouped into nine categories. User Interface Layout Media Drawing and Animation Sensors Social Storage Connectivity Palette Finding Help Notice the pop-up. to the right of each object. Clicking it will display a help Samsung Mobile App Academy 29
Designer View Exploring the Palette You don t have to memorize where every object in your toolkit is found, but being familiar with the organizational structure of the Palette is useful. In this section, we ll show you each of the Palette s groups and point out some of the most frequently used objects. The best way to become familiar with the Palette and its objects is to build apps and play with the different objects. Palette User Interface We ll be using many of the objects in the User Interface section to build our apps. We ve highlighted some of the most frequently used UI components. Palette Layout We ll place other objects within Layout objects, which will allow us to arrange objects on the screen and group objects. We ll regularly use all three Layout objects. Samsung Mobile App Academy 30
Palette Media Media objects control playing and recording sound and images, including text-to-speech and speech recognition. Palette Drawing and Animation Ball and ImageSprite objects must be placed on a Canvas object. Palette Sensors The sensor objects allow you to access some of the devices sensors such as the accelerometer, GPS, orientation, etc. Palette Social The objects in the Social section make interacting with other people easier. Samsung Mobile App Academy 31
Palette Storage Storage objects allow you to save and retrieve data stored on the device (TinyDB) or on the Internet (FusiontablesControl and TinyWebDB). Palette Connectivity Connectivity objects allow you to connect to other applications on the device, other devices using Bluetooth, and Web pages. Samsung Mobile App Academy 32
Blocks View Exploring the Blocks Palette Control Blocks Control blocks affect the flow of the app. They re used for: Branching doing one thing or another based on a logic test Looping doing the same block of code repeatedly Changing Screens opening another screen or closing the current screen We ve highlighted several of the blocks you ll use more frequently. Samsung Mobile App Academy 33
If Then Block Let s take a closer look at the if then block. You ll be using this block in every program you write. Notice the blue icon to the left of the word if. If you click on the blue icon a callout will appear that will allow you to configure the if then block. Let s add an else section by dragging the else block on the left to the if block on the right. An if then block may only have one else section but it could have any number of else if sections. Samsung Mobile App Academy 34
Logic Blocks All Logic blocks evaluate to a Boolean value, either true or false. The binary simplicity of true or false is the foundation of all computer programming. We ll use most of the Logic blocks frequently when we program. Notice the blocks with a drop-down arrow. You can change the functionality of these blocks. Math Blocks Here are some of the Math blocks with the most popular ones highlighted. Notice that some of them have blue icons to allow you to modify the blocks and some have drop-down arrows. Also, notice that the first block, the one with a 0 in it, can be modified by typing in any number to create a Number Constant block. Samsung Mobile App Academy 35
Text Blocks Here are some of the Text blocks. Notice again the blue icon on the join block and the drop-down arrows. Also, the first block the one with the quote marks is similar to the first block in the Math section. You can type any text in the block to create a Text Constant block. Notice the drop-down on the compare texts blocks. We will frequently check for text equality, but to do so you ll have to use the drop-down list to choose the equal sign. Samsung Mobile App Academy 36
Lists Blocks Here are some of the Lists blocks. Lists are a way of storing many objects in a single variable. For example, here s a simple list: cat dog fish You can access items in a list by their index numbers. Here s our simple list with index numbers: 1. cat 2. dog 3. fish Notice that index numbers in App Inventor start at 1. If you have some programming experience with other languages, this may be different than what you re used to. In other programming languages. Lists may be called Arrays or Vectors. Samsung Mobile App Academy 37
Colors Blocks There are 13 preconfigured color blocks along with a block that allows you to make any color using red, green, and blue values. There s also a block that splits a color into its RGB values. Variables Blocks Variables store a value to be accessed by other program blocks. The value stored can be almost any object, but the most common objects to store in variables are numbers, Booleans (true or false), Text strings (words, sentences or any combination of characters), Lists, and Colors. There are only two things you can do with a Variable: set a value and get a value. The very first time you use a variable you initialize it by setting a value. The blocks used to set and get Variable values are called setters and getters. There are two types of Variables: global and local. Global Variables can be accessed by any block on the current screen. Local Variables are initialized at the start of a code block; they exist only within that code block. Samsung Mobile App Academy 38
Global Variables Let s initialize a Global Variable called score then access it in a code block that updates a ScoreLabel. We drag out an initialize global block. The variable s name defaults to name. Let s rename it to score and set its initial value to 0. All global variables are initialized when a Screen is loaded, before the Screen s Initialize block is called. Drag out a Number Constant block from the Math section. We create a block that sets the ScoreLabel s Text to a Text string formed by joining the word Score: and some other value. The other value will be the global score variable s content. There are two ways to drag out a getter block: 1) You can drag a get block from the Variables drawer, then select global score from the drop-down list. 2) You can hover over the variable s name in its initializer. A popover will appear with the variable s setters and getters. Drag off the getter and attach it to the ScoreLabel s Text setter. Samsung Mobile App Academy 39
Local Variables Local Variables are convenient for holding calculated values. Let s create a code block that calculates a test grade then displays one of two messages. We ll create a Local Variable to hold the grade. Drag out a local variable block. Its name will default to name. Rename it to grade. Now we ll initialize grade; calculate the grade by dividing the number of correct responses by the total number of responses and multiplying by 100. Our make-believe test has bonus questions but we won t allow grades over 100, so the first thing we ll do is check if grade is over 100. If it is we ll set it to 100. To drag off a setter and a getter, hover over the word grade in the initializer then drag out the get grade block and the set grade block. If we try to access local grade outside of the block, we ll get an error. Samsung Mobile App Academy 40
Procedures Blocks Procedures allow a block of code to be executed from multiple places in your program. A Procedure may return a result value, but the type of Procedure we ll use most frequently does not return a value. Procedures may have input values passed to them. Let s create a Procedure that updates a score label with an input value. We ll first click on the blue icon to add an input. The first input, by default is called x. Let s rename the input to score. Just click on the x and you will be able to edit it. We ve added the code to set the ScoreLabel s Text to a string created by joining the Text Score: with something else. That something else will be the score input passed to the procedure. Samsung Mobile App Academy 41
If you hover over the score input, you ll see the setter and getter for score. We ll drag the get score block out and attach it to the join block. Now that you are familiar with the App Inventor tools, you are ready to build some actual apps Samsung Mobile App Academy 42