靜宜大學資管系 楊子青 1

Working with Databases (II)

靜宜大學資管系 楊子青

2014.12.10.

靜宜大學資管系 楊子青 2

Fusion Tables

• 參考實例： Pizza Party with Fusion Tables for App Inventor 2– http://appinventor.mit.edu/explore/ai2/pizzaparty.html

• A Fusion Table is a Google service to support the gathering, managing, sharing, and visualizing of data. Data are stored in multiple tables on Google‘s cloud (Google Drive 雲端硬碟 ).

• Individual tables can be merged if they contain a common column, and they can be easily visualized on maps and in various kinds of charts and graphs.

靜宜大學資管系 楊子青 3

1. Creating your own Fusion Table

• Creating your own Fusion Tables is as easy as creating a Google document. ( 請自行根據說明練習 )1. On the web, login to your Gmail account or any other Goo

gle service (e.g., Drive, YouTube).2. Go to Google Drive and click the red Create button, you w

ill see Fusion Table in the list of choices. Click Fusion Table. (If you do not see Fusion Table in the Google Drive Create menu, click Connect more apps. Scroll down until you find Fusion Table and click on it. Click the + Connect button, then click ok. Now, when you click on the Create button, Fusion Table should appear. If not, then you may need to contact your school's network administrator. See Troubleshooting section at the bottom of this page.)

3. You will be given a few different options for the new table. Select Create an empty table.

靜宜大學資管系 楊子青 4

Creating your own Fusion Table

4. You will see that the new table automatically comes with four columns. Change the column names for your Pizza app by going to 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). .

5. Leave this window open so that you can come back and get the URL, which you'll need when you set up the properties of the WebViewer component in your app.

6. Click on the Share button (top right) to modify the table's permissions. For this tutorial, you can specify a few friends who will use the app. Only people who are explicitly given permission will be able to enter pizza party preferences through your app. (See note box immediately below this.)

靜宜大學資管系 楊子青 5

練習：建立以下 Fusion Table

靜宜大學資管系 楊子青 6

2. Determining your Fusion Table URL and Table ID

• To find your Fusion Table's URL:1. In your browser, navigate to the new Fusion

Table you just created.

2. Go to the menu and select Tools > Publish.

3. You'll see a notice saying: "This table is private and will not be visible". Click the blue link that says "Change Visibility".

4. In the list of "Who Has Access", click the blue "Change..." link next to "Private - Only people listed below..."

靜宜大學資管系 楊子青 7

Determining your Fusion Table URL and Table ID

5. Choose"Public on the Web" or "Anyone with the link". Either of these settings will work for this tutorial. In the future, you should decide this setting based on the sensitivity of your data.

6. Click the green Save button, then the blue Done button.

7. Back on the Fusion Table page, go to the menu bar and select Tools > Publish. Select the URL from the top text box (labeled "Send in an email or IM"), copy the URL and return to App Inventor. You will paste the URL into the definition block for the TABLE_URL (see below).

8. You can find the Table ID by browsing to your table, then selecting File>About this table in the menu.

靜宜大學資管系 楊子青 8

練習：讀取 Fusion Table 網址

靜宜大學資管系 楊子青 9

練習：讀取 Fusion Table ID

靜宜大學資管系 楊子青 10

利用 WebViewer 元件查看 Fusion Table 內容

靜宜大學資管系 楊子青 11

程式碼及執行結果

Fusion Table 網址

靜宜大學資管系 楊子青 12

3. Getting an API Key

• In order to use the FusiontablesControl Component you need to acquire a Google Applications Programming Interface (API) key, an API Key. 1. Go to your Google APIs Console (

http://code.google.com/apis/console ) and log in with a google account if not already logged in.

2. On the left-hand menu, select the APIs & auth item. The top sub-item "APIs" should be selected. If not, select it.

3. In the list of APIs, scroll down to find the Fusion Tables API and click the toggle button to "on" (if it already says "on" then leave it as is.)

4. If prompted, read and agree to the terms of service. On the Devlopers Console API page you'll see that the on/off switch next to Fusion Tables API is now "On" and green.

靜宜大學資管系 楊子青 13

APIs: Fusion Tables API: ON ( 舊版 )

靜宜大學資管系 楊子青 14

APIs: Fusion Tables API: ON ( 新版 )

靜宜大學資管系 楊子青 15

Getting an API Key

5. Go back to the menu on the left of the screen and select the Credentials sub-item under "APIs & auth.

6. Your API key will show up under "Public API Access". If you do not see an API key, click the red button "Create New Key" and then click the "Android Key" button in the popup box. Don't worry about the pop-up box asking about SHA keys. Just click the "Create" button. Your API Key will be show up under "Key for Android applications". You will need set the "API Key" property of the Fusiontables Control component in any app that you make that uses Fusion Tables. (More info below.)

靜宜大學資管系 楊子青 16

API Key

靜宜大學資管系 楊子青 17

新增資料至 Fusion Table

靜宜大學資管系 楊子青 18

初始設定程式碼

ForgetLogin() Method:Discards the user's account name, forcing them to re-authenticate when accessing a Fusion Table. This will prompt the user to login to their Google account and give permission to the app to access the Fusion Table. This authentication step will happen only once when the app first tries to access the Fusion Table.

靜宜大學資管系 楊子青 19

新增資料程式碼

靜宜大學資管系 楊子青 20

用行動裝置測試，並使用自己的 Gmail 帳號登入，到雲端硬碟看 Table

靜宜大學資管系 楊子青 21

判斷是否新增資料成功

靜宜大學資管系 楊子青 22

判斷是否新增資料成功

如果成功， result 第一行為 rowid

靜宜大學資管系 楊子青 23

重新用行動裝置測試，並使用其他的 Gmail 帳號登入，則新增失敗

靜宜大學資管系 楊子青 24

增加個別使用者可以進行編輯

靜宜大學資管系 楊子青 25

將使用者輸入的資料新增到資料庫

靜宜大學資管系 楊子青 26

SQL 改用變數之程式碼

靜宜大學資管系 楊子青 27

資料庫查詢

靜宜大學資管系 楊子青 28

資料庫查詢程式碼，用行動裝置測試

靜宜大學資管系 楊子青 29

補充：如果要讓任何人都可異動資料• http://ai2.appinventor.mit.edu/reference/comp

onents/storage.html– When using a Service Account, end-users do not n

eed to login to use Fusion Tables, your service account authenticates all access.

• you create credentials and a special "Service Account Email Address" which you obtain from the Google APIs Console.

• You then tell the Fusion Table Control the name of the Service Account Email address and upload the secret key as an asset to your application and set the KeyFile property to point at this file.

• Finally you check the "UseServiceAuthentication" checkbox in the designer.

靜宜大學資管系 楊子青 30

建立 Service Account

靜宜大學資管系 楊子青 31

Service Account email及自動下載公開金鑰檔案 (.p12)

靜宜大學資管系 楊子青 32

至 App Inventor 2 ，加入 .p12 檔，並設定 FusionTableControl 元件的 KeyFile

靜宜大學資管系 楊子青 33

設定 FusionTableControl 元件的 ServiceAccountEmail

及勾選 UseServiceAuthentication