Start by creating a new project and naming it appropriately. You should see something like this:

Transcription

1 Using AppInventor to create apps to populate Google Fusion Tables Daniel Sheehan January 29, 2013 Introduction This short tutorial is intended to guide you through your first AppInventor project, a tool for adding data to a Google Fusion table. This document assumes that you have a Google account and you created a Fusion table before starting. You will also need to install the Barcode Scanner on your phone. This document also assumes that you set up your laptop using the instructions at: You will use the location sensor to get your current latitude and longitude and then add addition information that will then be loaded as a record in your Fusion table. Getting started creating a new project Start by creating a new project and naming it appropriately. You should see something like this: From here you can add tools for gathering information to load into your Fusion table. First, add a location sensor from the Sensors section of the Palette to your screen (called Screen1). Rename the sensor to GISdata. This does not appear within the screen but is visible just below the 1

2 screen. Now add a TableArrangement from the Screen Arrangement section of the Palette to your screen. Change the number of rows for the TableArrangement to 8. Now start to add basic elements from the Basic section of the Palette. You will need to a latitude label and a text field for the latitude and a longitude label and a text field for the longitude. You can rename the fields to lbllat (for label latitude) and txtlat (for the actual latitude) and similar names for longitude (lbllon and txtlon). You should change the text for the labels to Latitude and Longitude and you can set the initial latitude and longitude text fields to It should look like this: First use of the blocks editor Now add the latitude and longitude to the text fields. You will need to open the blocks editor. A Java file will be downloaded to your computer. Depending on your browser, you may need to accept the file and click on it when the download is complete. You should see an empty window like this: 2

3 You can add actions in this window. Here we will populate the latitude and longitude text fields based on the current location from the location sensor (GISdata). To do this click on My Blocks on the left side of the window then click on GPSdata. You should see several options, including When GPSdata.LocationChanged. Select this, which adds it to your block editor. You will need to then click on txtlat and select the set txtlat.text to block and drop it in the do section of the GPSdata.LocationChanged block. You should do the same for txtlon and drop it below the set txtlat.text block. Now add the GPSdata.Latitude block in the to link in the set txtlat.text block. Do the same for txtlon.txt but use GPSdata.Longitude. Now let s see how this works on the phone. First, you need to change a setting on your phone. Look for Applications and then check the box for Unknown Sources (allow installation of non-market applications). You should be sure to uncheck this when you are not working with AppInventor. For testing the latitude and longitude, you should change the Location setting so that you are using wireless networks to get a latitude and longitude. Optimally, you should use the wireless network when downloading APK files. Getting the app on your phone To get this on your phone, use the Show Barcode option under Package for Phone. Once the Barcode is visible, you should be able to scan it. When you get to the web page where it is accessible to you, you will need to login to your Google account the APK file, which is what runs on your Android phone, is downloadable only by you. You can download it to your computer where you can send it to other people. When the download is complete, check your notifications and click on the download to install it. You then can open it. You should see the latitude and longitude, as determined by wireless, wifi, or your GPS unit (which won t work well in the GIS Lab). 3

4 Adding a quit button (and other widgets) When closing the new app, you will notice that you didn t add a close button. Do that next. On the web page, add a new button (two rows below the longitude label and text. Change the name of the button to btnquit and change the text to Quit. Now go back to the blocks editor. Click on btnquit and select the when btnquit.click block and drag it on to your canvas. Now under Built-in, look for call close application in the Control section. Drag this into the when btnquit.click block. Now you will have a working quit button. Now add two new widgets to the screen on the web page a label called lbldescription and a text field called txtdescription. Place these below the longitude label and field. The Insert (into Fusion Table) command Now let s try to insert this into a Google Fusion table. From the Google Developers page: Here is the insert statement: 4

5 INSERT INTO <table_id> (<column_name> {, <column_name>}*) VALUES (<value> {, <value>}*) { {;INSERT INTO <table_id> (<column_name> {, <column_name>}*) VALUES (<value> {, <value>}*)}* ;} To complete the statement, you need to find the Encrypted ID for your table (look in the File menu for your Fusion table and select About this table. My ID looks like this: 1IT1UOfOWTiMl9z4FDEYNZEYxv86JfegHnyaLuts I have three columns called Latitude, Longitude, and Description. Remembering my text fields, my insert statement will look something like this: INSERT INTO 1IT1UOfOWTiMl9z4FDEYNZEYxv86JfegHnyaLuts (Latitude, Longitude, Description) VALUES (txtlat.text, txtlon.text, txtdescription.text) Now you have to set up your Screen on the web page to work with Fusion tables and create a button to start the Insert process. On the web page, look for Not ready for prime time on the Palette and drag FusiontablesControl onto your screen. Change the name to Fusion. You will need to get a Fusion Table API key and add this to the properties of Fusion. Follow the instructions on the pop window that appears when you press the? button next to Fusion Control in the Palette. Copy the API key to the properties window. Next, add a button from the Basic section of the Palette and rename it to btninsert and change the text to Insert. Next, go to the blocks editor and get the when btninsert.click block and add the set Fusion.Query and call Fusion.SendQuery blocks to it. It should look like this: Now you need to construct the text for the insert statement. Use the Built-In Text block call Make Text and add it to your canvas. You should use the Built-In text blocks to add text, like INSERT INTO ) and your blocks to get the values from the form you created. Notice that I enclose the latitude and longitude in quotes. They are numbers and you are trying to create a text field with the call Make Text block. Fusion tables will recognize these as numbers when the Insert is run. Be careful to put spaces around 5

6 words that occur in different text blocks. Any text fields in your values should be surrounded by single quotes. Your blocks should look like this: Checking your results You should also add a label called lblresponse in your screen that will handle the response from Fusion. The blocks would look like this: You can find the value result block under My Definitions in the My Blocks section. 6

7 The completed design Your screen should look like this: And your blocks should look like this: 7

8 The hardest part of this process is the string processing adding single quotes around text fields and including spaces between words that occur in separate text blocks. You should get the column number of any errors that occur using the Fusion.GotResult block. 8