Rapid Prototypingwith

MIT App Inventor

Workbook

1: What is MIT App Inventor?

Google created App Inventor for Android in 2010 as a near-magical way of building Android-based mobile applications in a visual, code-free environment. Targeted at new developers drawn by the appeal of mobile apps, App Inventor for Android sent waves of excitement across the geek community. Then, for very typically Google reasons, they decided to close up the project and move on.

Fortunately, in 2011 the Massachusetts Institute of Technology (MIT) rescued the App Inventor, negotiating for Google to donate the source code to them so that they could breathe new life into the project as a new tool for teaching computer science to high-school students. They have promised to open source the rebranded MIT App Inventor this year, ensuring a long and stable life for the tool.

That’s Great, But...What Is It?MIT App Inventor is an application—built in Java, like Android itself—that runs in a web browser and lets you create Android mobile applications without writing a single line of code or hacking a single esoteric configuration file. As you design the application and add behaviour to it, you can test your changes in real time in the Android Emulator. And when you’re ready to try it out on an actual phone, one click creates an .APK application file that you can simply drag to your Android phone’s app directory.

MIT App Inventor is an outstanding tool for teaching computer science theory to high-school students. It abstracts away most of the ‘cruft’ usually associated with mobile development, and simplifies development intentionally, and visually, into the basic

“I live again!”

1

building blocks of computer science. As students learn, they see their skills reflected as actual, working mobile applications.

App Inventor is made up of three main components:

1. the Designer;

2. the Blocks editor; and

3. the Android Device Emulator

The Designer

The App Inventor Designer interface

The Designer is where you create the user interface of your application, by dragging and dropping components like buttons, labels, media, or even sensors (like accelerometers or GPS units) onto your interface.

The Designer has simple tools for configuring the components’ contents and their basic look and feel, as well as layout tools for arranging them horizontally or vertically in the interface.

Eventually you’re going to want to do more than just have a goofy screen, though: the fun is all in the behaviour. For that you need the Blocks editor.

2

The Blocks Editor

The Blocks Editor, for creating app behaviour.

The blocks editor is a greatly simplified way of visualising program behaviour (the part traditionally represented by code). To create behaviour for your application, you drag out and clip together puzzle-piece shaped ‘blocks’ of behaviour. There are blocks representing common Android-app behaviour and many of the basic computer-science logical elements such as iteration, decision-making, and variables. Each block has hints for what sort of blocks may be attached to it to build behaviour sequences.

Better, for each user-interface element you created in the Designer, there are blocks representing what you can do with it. For example, getting a button to do something is as

A block hooked up on a Submit Button’s “Click” handler.

3

simple as dragging out the MyButton.Click block and dropping the block(s) for whatever you want to happen inside of it.

The Android Device EmulatorAs you work in the Designer or the Blocks Editor, your changes are seamlessly reflected in real-time inside the Android Device Emulator, which is a virtual version of an Android smartphone including touch-screen, hardware keys, and typical functions. It’s a great way of building and testing an app: make a change to your design or blocks, and then switch to the emulator and test the results immediately.

4

An App Inventor application running inside the Device Emulator.

2: Hello Kitty TutorialIn this tutorial, you’ll build your first, very simple application: a kitty-themed photograph that responds when you pet it. The goal of this first tutorial is to guide you through logging into and getting familiar with the App Inventor interface. Since all the prerequisite software is already installed on the computers here we won’t cover that part in this tutorial.

The content for this tutorial is located at:

http://eait-appinventor-test.appspot.com/learn/setup/hellopurr/hellopurremulatorpart1.html

A Quick Note on App Inventor InstancesIf you want to set up your own computer to connect to UQ’s App Inventor instance, follow the instructions here to set up your computer:

http://eait-appinventor-test.appspot.com/learn/setup/index.html#setupComputer

And if you want to run an instance of App Inventor at your school, grab MIT’s release and follow the instructions here:

http://appinventoredu.mit.edu/developers-blogs/andrew/2011/nov/running-your-own-app-inventor-service

5

3: Paint Pot TutorialIn this tutorial, we introduce handling gestures, and holding onto settings in variables, by making a simple three-colour painting application.

The content for this tutorial is located at:

http://eait-appinventor-test.appspot.com/learn/tutorials/paintpot/paintpot-part1.html

6

4: Group QuizThis final tutorial is a bit more in-depth: it consists of multiple screens of content, and makes use of a simple database to allow a class (or a teacher and some students) to quiz each other with their phones. The app consists of two halves: a quiz question maker, and a quiz taker.

Both halves of the application share a common database to store the questions and answers.

Part A: Make QuizzGetting StartedFirst, create the user interface for the quiz maker half of the application. This should be old hat to you by now, but there are a few components we haven’t touched before.

1. Create a new application and call it MakeQuizz, opening the designer.

2. Lay out the interface as it appears below. We’ve listed the required components in a table.

• Make note of the new non-visible component, “QuizzDB”. This is a TinyWebDB component (available under the ‘other’ tab in the palette), and is the database our two applications will share.

7

The Quiz Maker user interface

Component Type Palette Group

Name Purpose

TextBox Basic QuestionText You’ll enter your question here.

TextBox Basic AnswerText You’ll enter the correct answer to your question here.

HorizontalArrangement Screen Layout HorizontalArrangement1

For displaying the two buttons on the same line.

Button Basic SubmitButton You tap this to submit the question-answer pair to the quiz database

Button Basic ClearButton This will clear out all of the current questions from the database, making way for a new quiz.

Label Basic QuestionAnswersLabel

The current list of questions and correct answers will list here.

TinyWebDB Other QuizDB This is the database component. The Make Quiz and Take Quiz apps will both connect to this database to share questions.

8

3. Configure the properties of the elements as follows:

• Set the hint of QuestionText to “enter a question” and the hint of AnswerText to “enter an answer”.

• Set the text of SubmitButton to “Submit” and the text of ClearButton to “Clear”

• Set the text of QuestionAnswersLabel to “Questions and Answers”.

• Drag SubmitButton and ClearButton into the Horizontal Arrangement component so they are on the same line.

Adding BehaviourOpen the Blocks editor if it isn’t already open. First we need to create a way to store the questions and answers in the application.

1. Create two variable definitions (from the Definitions drawer), renaming the first QuestionList and the second AnswerList.

2. Drag out two make a list components from the List drawer and connect one to each of the variables you’ve created.

Your blocks should look like the image above. You’ll notice that the make a list components are currently empty. As your users enter questions and answers into the application, you’ll store them dynamically in each of these components. You’ll also populate them from the database when the app loads, if there are questions there.

Now you want to create a click handler for the SubmitButton. When the user clicks the submit button, you’ll read the value from the QuestionText and AnswerText boxes, and store them into the QuestionList and AnswerList respectively.

9

3. Open the My Blocks drawer, select SubmitButton, and, drag out the SubmitButton.Click block.

4. Drag out two add items to list blocks from the Lists drawer and snap them into the SubmitButton.Click block.

5. For the first add items to list block, drag out the QuestionList global definition from the My Definitions panel, and snap it to the list input. Drag out the QuestionText.Text block—from the My Blocks > QuestionText drawer—and snap it to the item input.

6. Do the same for the second add items to list component, with AnswerList and AnswerText.Text.

Your block should look like the image above. Add items to list components work by taking the item (or items) connected to them and adding to the end of their connected list.

Now, each time a user clicks the Submit button in the app, the values they’ve entered into the question and answer fields will be stored inside your list components, added to the end of the QuestionList and AnswerList respectively.

You can test it out in the emulator if you like, but you’ll see that nothing visibly happens when you click the submit button. This is because we’re not displaying the contents of the lists on screen yet.

Display QAs ProcedureTo display the questions and answers in the label we created in our user interface, we will work with a new concept: a procedure. A procedure at its simplest is a sequence of behaviour that we’ve given a name so that we can reuse it easily. Procedures can also take dynamic and return outputs (operating as ‘functions’ and ‘methods’, which you covered this morning), but we won’t be doing anything so complex here.

All the procedure we’re creating here does is iterate through the question and answer lists we’ve got, and print their items out into the QuestionAnswerLabel in a nicely formatted way.

For reference, the final result you’re aiming for should look like this. Don’t be intimidated! We’ll build it up piece by piece:

10

First,

7. Drag out a procedure from the Built-In > Definitions drawer and rename it to displayQAs.

8. In order to display each question and answer side by side in the label, you’ll need to print out each question and answer in turn. In other words, you need to iterate over your question and answer lists. Fortunately, there’s a block to do just this. Drag out the Control > foreach block and snap it into the displayQAs procedure.

11

9. A foreach iterator is designed to iterate over each item in a list. Each time it iterates through, the variable attached to the top will contain one item in the list. Attach the QuestionList variable as the list, and rename the variable from ‘var’ to something more appropriate:

10.Now we’re iterating over the QuestionList. For now, let’s just get the questions printing out into the label, each on a new line. Connect the blocks as shown below:

12

Inside the loop, you’re setting the QuestionAnswerLabel.Text to a new value each time, determined by the Text > make text component attached to it. Note that the first thing this make text component does is add in the existing text of QuestionAnswerLabel. This means you’ll reprint what was there, and just add the new value to the end.

Then, the make text component adds a static text item ‘\n’. This string is a special character which tells the label to print whatever is following on a new line.

Finally, the make text component adds the current question to the bottom of the label.

Just one quick step left to test it out:

11.At the bottom of the SubmitButton.Click handler, drag in your newly defined procedure displayQAs from the My Blocks > My Definitions drawer.

Now test it out in the Android Emulator!

When you enter a question and answer and click the Submit button, you’ll see just the question appear in the label. If you enter a new question and click submit again, however, you’ll see that your first question is duplicated. This is because we are re-using the content of the question label each time we use Make Text inside the procedure, but we forgot to clear the label out before we started printing. Fortunately, this is an easy fix:

12.Add a new QuestionLabel.Text set block to the top of the procedure, before the loop. Attach a new Text > text block to it, and delete its content so that it’s blank.

13

If you test the app now by submitting a new question, you shouldn’t see duplicates anymore.

Printing out AnswersNow, we will enhance our displayQAs procedure to print out the answer alongside the question on each line. Because the foreach block is only designed to iterate over a single list and we have two, we have to get a bit tricky to access both the question and answer lists in the same loop. To do that, we’ll introduce a couple of new variables:

13.Define a new variable answer containing a text block (its contents doesn’t matter: you’ll be overwriting it with each iteration of the loop).

14.Define another variable answerIndex containing a number block, setting its initial value to 1.

14

15. In the body of the loop, first reset the answerIndex variable to 1 (this is so it always starts at the beginning of the answer list each time you click submit).

16.Then, inside the body of the foreach block we need to dynamically set the value of the answer variable by pulling the correct value out of AnswerList. To do that, we attach to the answer setter a Lists > select list item block, which lets us select an item at a specific index in the list.

At the bottom of the foreach block we also need to increment the answerIndex variable. Otherwise, the answerIndex will always remain 1, and we’ll only print the same answer each time.

17.Drag a set answerIndex block to inside the bottom of the foreach block. Drag on a + block from the Built-in > Math drawer, and set its contained blocks to answerIndex and the number 1. This means you’ll add one to the answerIndex each time you’re finished with the loop.

15

The result will be that each time you iterate, answerIndex will be one greater, which means you’ll grab using the next answer in AnswerList select list item the, correctly corresponding to the question.

The last thing remaining is to print that answer out alongside its question. To do that, we simply need to modify the make text block to include the newly populated answer variable, as shown:

16

Now, test your app! Each time you submit a new question, that question should be added to the list of questions and answers, and all of the questions and answers should be nicely formatted below.

RefinementsThere are a few small tweaks we can make before we hook the app up to the database to share it with the Take Quizz app.

Firstly, it would be nice to clear the contents of the question and answer field after we click submit, so that entering a new question doesn’t require users to tediously delete previous content each time. To do this, modify the SubmitButton.Click handler to simply clear out the text fields as below:

17

Again, note that we simply set the fields to an empty text value, which clears them after we’ve read their values into the QuestionList and AnswerList.

We’ll also create a simple click handler for the ClearButton, to empty the quiz so you can start a new one. Later, this will also clear the database. Configure the handler as shown below:

18

This handler simply sets QuestionList and AnswerList to be new, empty lists, and then calls displayQAs to clear the question and answers from the display label.

Saving (and Sharing) the Quiz QuestionsThe final step in the Make Quiz application is to connect it to the TinyWebDB component we defined way back in the Design phase. By sharing our content on a web-hosted database, we kill two birds with one stone: first it means that the quiz questions will be saved between runs of the application (at the moment everything is simply stored in the phone’s memory, and lost when you quit), and secondly it means we can share these quizzes with the Take Quiz application we’ll make next.

Fortunately, the TinyWebDB component is very simple to use. First, lets save the contents of the AnswerList and :

1. From My Blocks > Quiz DB drag out a QuizDB.StoreValue component and drop it into the bottom of the SubmitButton.Click handler (above the displayQAs call). Set the tag value to a text called “cs4hsquiz-questions’, and the valueToStore value to QuestionList.

2. Repeat this step for AnswerList, with the tag value of ‘cs4hsquiz-answers’.

19

So what’s this all about? The StoreValue block stores the specified object (in this case the QuestionList or AnswerList) in the database under a unique key. When you want to get the value back out, you pass this key to the database and it will return the value. So, if we later pass ‘cs4hsquiz-questions’ to QuizDB, it will return us the last version of QuestionList that we saved, even if we saved it long ago and quit the application.

When connected to the same database, even another app (for example the Take Quiz) app can get access to this same data by simply passing in the same unique tag as a key. This is how we’ll connect the two apps.

A Note on the Tag ValuesThis key can be any text value, but it’s a good idea to try to be a bit unique about it (hence the ‘cs4hsquiz’ junk rather than simply using the tag ‘questions’). The current implementation of App Inventor shares one database with every person who uses App Inventor, so if you happen to use the same tags you’ll start overwriting each others’ data...very nasty. Fortunately, MIT plans to make running your own instance of TinyWebDB simple in the near future.

20

Loading the Quiz QuestionsNow we’ll implement the behaviour to load the saved list of questions from the database component when the application loads.

1. First, we need to add a new handler for application load. This handler is fortunately defined for you by your Screen object (the top level screen in the designer holding all of your elements). Select My Blocks > Screen1 and drag out Screen1.Initialize.

2. This handler gets called when your screen first loads. Drop in two My Blocks > QuizDB > QuizzDB.GetValue blocks and set their tag value to the same two keys you specified when saving the QuestionList and AnswerList: ‘cs4hsquiz-questions’ and ‘cs4hsquiz-answers’

3. This retrieves the Lists, but you also need to tell your application what to do with those lists when you load them...in this case populate the values of the (empty to begin with) QuestionList and AnswerList. QuizDB has a built-in handler for just this scenario: drag out a My Blocks > QuizDB > QuizDB.GotValue block onto the canvas.

21

4. You’ll note that this handler comes with two built-in variables: tagFromWebDB and valueFromWebDB. This handler handles all GetValue calls from the database, so we need some way of doing the right thing conditionally, based on the tag we asked for. We can use a conditional ifelse block for this purpose: drag out a Built-in > Control > ifelse block into the body of the handler.

22

5. Ifelse blocks consist of three parts: a test statement (which must be some comparison that produces a true or false result), a then-do section (called only if the statement returns true), and an else-do section (called otherwise). Since we’re testing between two tags, we can use this statement simply as follows:

6. This test simply asks if the tag we ‘got’ from QuizDB is equal to ‘cs4hsquiz-questions’. Since we know that it will either be this tag or the answers tag, we can populate the correct list with the contents of valueFromWebDB based on whether this statement is true or false.

23

7. Finally, we hook it up so that we’ll display the question and answer list once both lists have been loaded from the database. We do this using another conditional:

In this case, if the lists from the database are the same length we display them, otherwise we assume the other list is still loading and do nothing.

Enhancing “Clear Quiz”We lastly need to enhance the Clear Quiz function so that it removes the stored values of QuestionList and AnswerList from the database:

24

Again, in this case we’re simply storing a new empty list into the database under the respective question and answer tags.

Done!And that’s it for the Make Quizz app! Try it out in the emulator: to test that your application saves questions and answers between launches, reselect the connected emulator from the ‘Connect to a Device...’ field in the Blocks editor, which will ask you if you want to reset the device and relaunch the application.

If you want to test the app on an Android phone, switch to the designer and select ‘Package for Phone’ > ‘Download to Connected Phone’ from the top level navigation menu.

25

Part B: Quiz TakerThe final app we’ll build in this workshop is the Quiz Taker application, which lets students or others connect to quizzes made in Quiz Maker and work through them, testing their knowledge.

Designing the InterfaceThe first step is to design and lay out the interface. It’s similar in layout to the Quiz Maker application, with a few key differences.

The Quiz Taker interface in the Designer

The user interface elements you’ll require are:

Component Type Palette Group

Name Purpose

Label Basic QuestionLabel The current question will display here

TextBox Basic AnswerText You’ll enter the answer to the question here.

Label Basic ResultLabel This label will display whether the submitted answer was correct or incorrect.

26

Component Type Palette Group

Name Purpose

HorizontalArrangement Screen Layout HorizontalArrangement1

For displaying the two buttons on the same line.

Button Basic SubmitButton Tapping this button will check the provided answer against the real answer and provide the result.

Button Basic NextButton Tapping this button will move to the next question in the quiz.

TinyWebDB Other QuizDB This is the database component. This will be the same database that MakeQuizz added the list of questions and answers to.

Set up these elements as follows:

1. Set the hint for the AnswerText text box to “Enter an answer here”

2. Set the text for the SubmitButton to “Check Answer” and the text for the NextButton to “Next Question”.

3. Drag the SubmitButton and NextButton into the HorizontalArrangement so that they lay out side by side.

Getting Started with the Application BehaviourNow, as before, open the Blocks editor (if it isn’t already open), launch and connect to the Emulator (if it’s not already connected).The first step here is to create an equivalent set of variables to store the question and answer lists into, and a variable to help you remember which question you’re currently displaying.

1. Create two variables called QuestionList and AnswerList. Just as before, connect an empty Built-in > Lists > make a list component to each of these.

2. Create another variable called questionIndex. Set its content to the number 1 (since we’ll start on the first question).

27

Loading the Questions from the TinyWebDBBefore we can take any quizzes, we need to get our list of questions as created in the Make Quiz app. To do this, we’ll connect to the TinyWebDB database (which we’ve named QuizDB in our app) and load them using the same tags as keys.

1. Drag out the My Blocks > Screen1 > Screen1.Initialize handler block onto the canvas.

2. Just as before, the first thing to do is to ask the QuizDB to fetch the values for our two tags: ‘cs4hsquiz-questions’ and ‘cs4hsquiz-answers’. Drag two My Blocks > QuizDB > QuizDB.GetValue blocks into the handler, and supply the tags:

3. Just as before, we also need to create a handler to process the values as they’re fetched from the database (in this case storing them in our variables). There’s nothing new here, simply set it up as in Make Quiz:

28

4. Similar to the displayQAs procedure in Make Quiz, we’ll also create a new procedure, displayQuestion, to display one question at a time in the interface. This procedure will make use the questionIndex variable we defined earlier to decide which question to display. To start, drag out a Built-in > Definition > procedure block onto the canvas, and rename it to displayQuestion.

5. Inside the procedure, we simply set the value of our QuestionLabel.Text to be the content of the question in QuestionList specified by questionIndex. Use the My Blocks > set QuestionLabel.Text block, and attach a Built-in > List > select list item block to it, configuring it as below.

6. Now that we have the procedure defined, modify the QuizDB.GotValue handler to display the first question with displayQuestion after we know the QuestionList is loaded. Notice that we’re using the Built-in > Math > > (greater-than) operator to test that the Question List has at least one item in it before we try to display a question.

29

Enabling Users to Step Through QuestionsIn order to enable our users to see more than just the first question in our quiz, we need to hook up the NextButton.Click handler. This handler simply increments our questionIndex variable and calls displayQuestion, with a few subtleties.

1. First, drag out the My Blocks > NextButton > NextButton.Click handler.

2. First we simply increment the questionIndex variable and call displayQuestion:

3. If you test this in the emulator, tapping the Next button, this will work. But eventually you’ll get an error! This is because we only have a finite number of questions, and

30

eventually our questionIndex will be bigger than that list. To fix that, let’s simply reset the counter so when we get to the last question, we go back to the first. After we’ve incremented the counter, but before we call displayQuestion, insert a quick conditional Built-in > Control > if statement:

4. This statement simply checks if questionIndex has been incremented to a number greater than the size of the QuestionList, and if so, resets questionIndex to 1. Now displayQuestion will never receive a value it can’t handle.

We’re nearly done! Just one step to go.

Checking AnswersThe final handler we have to hook up is the SubmitButton.Click handler, to check the result users enter into the AnswerText field against the real answer loaded from QuizDB.

1. Drag out the My Blocks > SubmitButton > SubmitButton.Click handler onto the canvas.

2. Inside this handler, we need to compare the value of AnswerText.Text against the value stored in the AnswerList for this question. We’re using conditionals again, and we’ll use the questionIndex variable again, as follows:

31

3. At this point, we probably want to make sure we clear the value of ResultLabel each time we display a new question. Add a blank text for ResultLabel.Text to the top of the displayQuestion procedure:

We’re Done!That’s it! If you test this app on the emulator, you should be able to browse through and try to answer the questions posted by everyone in who has been testing Make Quizz.

Extending Group QuizIf you’re interested, you could get creative extending Group Quiz yourself or with your class. Here are a few ideas to get your started:

• Including images with the questions: this would let you do things like testing recognition of organic compounds, or anything you could think of showing!

• In the Designer, images can be added as a Media > Image component, and the content of this component can be set dynamically from the Block editor.

• It’s a bit trickier storing these images in the database, but it can be done - check out the reference documentation at http://eait-appinventor-test.appspot.com/learn/reference/index.html for a summary of what’s possible in App Inventor.

• Calculate a quiz score as you answer questions correctly or incorrectly.• Combine the app to allow your students to propose quiz questions to the rest of the

class!

32

AcknowledgementsThe University of Queensland would like to thank Justin Marrington for preparing this workshop document, and volunteers from Google and MIT who produced the original tutorial content it is based on.

For further information and other workbooks go to: www.uq.edu.au/ict/outreach-material

CRICOS Provider No. 00025B

School of Information Technology and Electrical Engineering General Purpose South Building The University of Queensland Brisbane QLD 4072 AUSTRALIA

Phone: +61 7 3365 4777 Email: enquiries@itee.uq.edu.au Web: www.itee.uq.edu.au