Update App Inventor in your phone

• Go to android play store in your phone:

• Update “MIT App Inventor 2”

• Agenda

– Learn how to manipulate lists

– Learn how conditional statements work

• (“if”, “else”, “for each”)

– Learn how to create and use a function

– Working with Google API (i.e. sharing data)

– Troubleshoot issues

Create a List

• App Inventor uses “lists” to store data.• Lists can be used to store your mock/example data

• Lists can be used to compare data (i.e. “I have a list of addresses but the data does not include postal code. I want my app to automatically add the postal code for certain addresses”)

• Example of how to create & manipulate lists:

– http://www.imagnity.com/tutorials/app-inventor/list-blocks-on-app-inventor/

Modifying MapIt Tutorial

• Orginal MapIt does not have a pre-populated list of addresses

• “We want to create a pre-populated pick list”. How can we do this?

• What do we want to do?

– Let us enable the “select location” button when the app is first opened

– Create a pre-populated list of addresses

– Add postal code for known addresses

Original MapIt Code(initialize)

Modified Code

Create a New List

Enable Button

Pre-populate List

Uppercase/Lowercase

Modified Code

Create a New List

Enable Button

Pre-populate List

Uppercase/Lowercase

Modified Code

Create a New List

Enable Button

Pre-populate List

Uppercase/Lowercase

Modified Code

Create a New List

Enable Button

Pre-populate List

Uppercase/Lowercase

Code for appending postal code

We know the postal codes for 3255 and 1000 Riverside Dive. We don’t know the postal code for any other address.

Sample Data:

List1 (Original List)Index Data

1 – 3255 RIVERSIDE DRIVE, OTTAWA2 – 1000 RIVERSIDE DRIVE, OTTAWA3 – 3333 riverside drive, ottawa4 – 55 riverside drive, ottawa

List1(After running appendPostalAddressCheck):Index Data

1 – 3255 RIVERSIDE DRIVE, OTTAWA, K2D 8R92 – 1000 RIVERSIDE DRIVE, OTTAWA, L2K 2K23 – 3333 riverside drive, ottawa, Postal Unknown4 – 55 riverside drive, ottawa, Postal Unknown

Updated to Append Postal Code

Created New Function(this “Call” can be doneanywhere in code)

Convert Text to Uppercase

Convert Text to Lowercase

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”

Replace old text in list with appended postal code

Function Name

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”

Replace old text in list with appended postal code

Function Name

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”

Replace old text in list with appended postal code

Function Name

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), then append “unknown”

Replace old text in list with appended postal code

Function Name

elementInList1=“foo bar 1”

IF “foo” is in elementInList1 THENmake elementInList1 = elementInList1 join “, K2D 8R9”(elementInList1=“foo bar 1, K2D 8R9”)

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”Replace old text in list with

appended postal codeInc Counter

Function Name

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”

Replace old text in list with appended postal code

Function Name

Initialize Counter

“for each” will walk through each element one by one

Compare Text

If Found, update with postal code

If not found(“else”), the append “unknown”

Replace old text in list with appended postal code

Inc Counter

Function Name

RIVERSIDE is not the same as Riverside or riverside

• How can we reuse the appendPostalAddressCheckcode when the user enters a new address?

• What is missing?

– Check if the postal code has already been appended. If it has been, then don’t append a postal code

Using Google API

• MIT App Inventor may not have all the features/components you are looking for

• An API (application programming interface) is a set of third party routines, procedures, that MIT App Inventor can access/call to provide you with additional features/functions that you may need

• You might get lucky if an API exists for the feature you are looking for. Some APIs can be difficult to use

• TIP: Search in Google or Youtube for the following terms:“App Inventor Google API <calendar, fusion, ext..>”

MIT App Inventor Components

Third Party API

Your Application

API Access

Google APIFusion Table

TABLE_IDTABLE_URLAPI_KEY

Using Google API

• Creating A Calendar:– https://groups.google.com/forum/#!topic/app-inventor-

developers-library/x4GBw8wVI0I

• Working with Google Fusion(tables)– http://appinventor.mit.edu/explore/ai2/pizzaparty.html

• Other Interesting Links(might not use Google API)– code snippets - https://puravidaapps.com/snippets.php– Stock Quote Example -

http://beta.appinventor.mit.edu/learn/tutorials/stockquotes/stockquotes.html

– GPS/Coordinates: http://puravidaapps.com/coordinates.php, https://groups.google.com/forum/#!topic/ai4a/6BjEKN70j9U

Fusion Table App

• “This App lets people enter food orders for a pizza party. Orders are stored in a Fusion Table, providing one easy to access place for the data. By reading from the table, the app can easily display the orders that have been entered.”

• “A Fusion Table is a Google service to support the gathering, managing, sharing, and visualizing of data.”

http://appinventor.mit.edu/explore/ai2/pizzaparty.html

Working With Fusion Tables

• http://appinventor.mit.edu/explore/ai2/pizzaparty.html

• https://www.google.com/drive/

• Edit > Change Columns.

• You'll rename the four default columns to Date(type=Date), Name (type=Text), Pizza (type=Text), Drink(type=Text).

• Click save and then add a fifth column by going to the Edit > Add Column. Name this fifth column Comment(type=Text).

• “In order to use the FusiontablesControl Component you need to acquire a Google Applications Programming Interface (API) key, an API Key. To get an API key, follow these instructions:”

– https://code.google.com/apis/console/

• API_KEY: AIzaSyD0i8nHcMe_jKxTUg

Go Back To Fusion Table Page

• After “save”. Then click on blue “done” button

• TABLE_URL: https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4+from+1BZQ3LfP6jFwn

TABLE_ID: 1BZQ3LfP6jFwn3PxuQAv3Ol5bGA4

Add a single space

This constructs a “SQL” statement: you can learn more about SQL at

http://www.w3schools.com/sql/

INSERT INTO 1BZQ3LfP6jFwn3PxuQAv3Ol5bGA4tN31xxxxxxxx (Date, Name, Pizza, Drink, Comment) VALUES ('Mar 1, 2015 12:11:39 PM', ‘MyName', ‘Cheese', ‘Coke', ‘This is a comment')

Other Resources for Help

• https://groups.google.com/forum/#!searchin/mitappinventortest/

• Post questions in the forum. Be detailed. Take screen captures of your code blocks. Mention you are new to programming.