第 24 章　與Web API通信

移動技術(shù)再加上無所不在的網(wǎng)絡(luò)，已經(jīng)完全改變了我們生活的這個世界。如今坐在公園里就可以打理你的銀行賬戶，或者在亞馬遜書店搜索你正在閱讀的圖書的評論，或者查閱Twitter，看看世界上其他公園里的人們都在想些什么。手機只能打電話發(fā)短信的時代已經(jīng)過去，它可以讓你隨時隨地訪問世界各地的數(shù)據(jù)。

雖然用手機瀏覽器可以訪問互聯(lián)網(wǎng)，但由于屏幕太小，而且速度受到限制，因此使用者會感覺不適。如果能夠定制應(yīng)用，有針對性地從網(wǎng)絡(luò)上提取少部分信息，以適應(yīng)手機終端的特點，就可以獲比瀏覽器得更具吸引力的替代方案。

本章我們將領(lǐng)略從網(wǎng)絡(luò)獲取信息的各類應(yīng)用，首先創(chuàng)建一個顯示游戲排行榜的（圖表）應(yīng)用，然后以Yahoo財經(jīng)頻道的股票數(shù)據(jù)為例，討論如何使用TinyWebDB從網(wǎng)上獲取任意類型的信息（不只是圖像），最后討論如何創(chuàng)建屬于自己的網(wǎng)絡(luò)信息源，以用于App Inventor應(yīng)用。

創(chuàng)新就是對這個世界的重組，以一種新奇的方式將舊的觀念和內(nèi)容組合在一起。埃米納姆（Eminem，美國說唱歌手）的單曲Slim Shady追隨了AC/DC（最著名的澳大利亞搖滾樂隊）與Vanilla Ice（美國白人說唱歌手）的風(fēng)格，并使這種混搭的音樂風(fēng)行一時。這一類的“模仿”非常普遍，以至于許多藝術(shù)家，包括Girl Talk（專攻混搭及數(shù)字音樂的美國音樂家）及Negativland（來自美國加州的一個實驗音樂樂隊），都致力于將舊的內(nèi)容融入某種新的風(fēng)格。

無獨有偶，在網(wǎng)絡(luò)及移動世界中，網(wǎng)站及應(yīng)用混合了來自各種渠道的數(shù)據(jù)及內(nèi)容，而且很多網(wǎng)站在設(shè)計理念上遵循了互聯(lián)互通原則（interoperability）。一個典型的混搭網(wǎng)站的例子就是Housing Maps（http://www.housingmaps.com），如圖24-1，它從網(wǎng)站Craigslist（http://www.craigslist.org）上采集房屋租賃信息，并與谷歌地圖API結(jié)合起來，提供一種新型的信息服務(wù)。

圖 24-1　住房地圖（Housing Maps）應(yīng)用將Craigslist的房屋信息與谷歌地圖信息疊加起來

谷歌地圖不僅僅是可供訪問的網(wǎng)站，同時也提供相應(yīng)的應(yīng)用程序接口服務(wù)（web service API)，這使得“住房地圖”這類混搭應(yīng)用成為可能。我們普通人只能通過瀏覽器訪問http://maps.google.com來查看地圖，但像“住房地圖”這樣的應(yīng)用可以訪問谷歌地圖API來實現(xiàn)機器與機器之間的通信。混搭應(yīng)用處理并組合來自不同站點（如Craislist及Google Maps）的數(shù)據(jù)，并將它們以一種更有意義的方式呈現(xiàn)出來。

現(xiàn)在，幾乎所有流行的網(wǎng)站都提供這種備選方案：機器對機器的訪問。提供數(shù)據(jù)的一方稱為網(wǎng)絡(luò)服務(wù)（web service），而客戶端應(yīng)用與網(wǎng)絡(luò)服務(wù)之間的通信協(xié)議則稱為應(yīng)用程序接口，或API。事實上，術(shù)語API已經(jīng)成為網(wǎng)絡(luò)服務(wù)（web service）的代名詞。

亞馬遜網(wǎng)絡(luò)服務(wù)（Amazon Web Service，即AWS）是最早的網(wǎng)絡(luò)服務(wù)之一，由于亞馬遜公司向第三方應(yīng)用開放了它的業(yè)務(wù)數(shù)據(jù)，最終導(dǎo)致圖書銷量的增加。同樣，當(dāng)2007年Facebook發(fā)布了它的API時，也吸引了無數(shù)人的眼球。Facebook的數(shù)據(jù)不同于圖書廣告，那么為什么它甘愿讓其他應(yīng)用“偷走”它的數(shù)據(jù)，同時也可能拉走它的用戶呢（還有廣告收入?。渴聦嵣?，開放把facebook從一個網(wǎng)站變成了一個平臺，這意味著像快樂農(nóng)場這樣的第三方程序，也可以運行在這個平臺上，并利用平臺的部分功能?，F(xiàn)在，沒有人能質(zhì)疑Facebook的成功。到2009年Twitter發(fā)布時，API訪問已經(jīng)是意料之中的事情，果然，Twitter也如此行事。現(xiàn)在，如圖24-2所示，大多數(shù)的網(wǎng)站都同時提供人機訪問接口。

圖 24-2　大多數(shù)網(wǎng)站同時具備供人類訪問的界面及供客戶端應(yīng)用訪問的API

對于我們普通人來說，網(wǎng)絡(luò)就是一個可供訪問的為數(shù)眾多的網(wǎng)站，而對于程序員來說，它卻是一個世界上最大也最豐富的信息數(shù)據(jù)庫。在網(wǎng)絡(luò)世界里，機器對機器的通信量正在超過人機之間的通信量。

訪問生成圖像的網(wǎng)絡(luò)API

提示：谷歌圖表API現(xiàn)已廢棄。在本例中仍可使用它，但總有一天將不可用。盡管如此，本例仍不失為解釋URL(鏈接地址)即其參數(shù)的好例子?！驹髡呓o出的網(wǎng)址確已廢棄，譯者給出了新的網(wǎng)址，現(xiàn)在可用?！?/p>

正如在第13章（亞馬遜掌上書店）中所見，大多數(shù)API都會接受以URL形式發(fā)來的數(shù)據(jù)請求，并會返回數(shù)據(jù)（通常以標(biāo)準(zhǔn)格式返回數(shù)據(jù)，如XML[Extensible Markup Language，擴展的標(biāo)記語言]、JSON[JavaScript Object，JavaScript對象表示法]）?？梢允褂肨inyWebDB組件與這些API進行通信，本章稍后將詳細(xì)討論這一重點話題。

不過也有些API返回的結(jié)果不是數(shù)據(jù)，而是圖像。本節(jié)將討論如何與生成圖像的API進行通信，來拓展App Inventor的用戶界面能力。

谷歌圖表API就是這樣一類服務(wù)。通過在URL地址中加入某些數(shù)據(jù)，向API發(fā)出請求，API將返回一個圖表，你的應(yīng)用負(fù)責(zé)顯示這些圖表。該服務(wù)可以生成多種圖表，包括條狀圖、餅狀圖、地圖及文氏圖（Venn Diagram，用封閉曲線所包圍的面積來表示集合及其關(guān)系的圖形）。谷歌圖表API成為網(wǎng)絡(luò)服務(wù)（web service）互聯(lián)互通原則的一個典范，它的目的在于增強其他網(wǎng)站的能力。由于App Inventor沒有提供多少所謂的可視化組件，因此能夠借用谷歌圖表這樣的API，對App Inventor來說是至關(guān)重要的。

首先要理解發(fā)給API的URL地址的格式。訪問谷歌圖表API網(wǎng)站（https://google-developers.appspot.com/chart/interactive/docs/gallery），你將看到如圖24-3的頁面。

圖 24-3　谷歌圖表API生成的各類圖表

網(wǎng)站提供了完整的說明文檔及操作向?qū)В梢越换ナ降貏?chuàng)建圖表，并探究如何書寫URL地址。向?qū)Х浅：糜?，可以通過表單來定義各種類型的圖標(biāo)，并能自動生成你需要的URL地址，你還可以反過來用自己的數(shù)據(jù)驗證這個地址的有效性。讓我們開始吧，訪問網(wǎng)站，跟隨向?qū)韯?chuàng)建圖表，然后仔細(xì)分析生成這些圖表的URL地址的格式?？聪旅娴睦樱跒g覽器中輸入以下URL地址：

http://chart.apis.google.com/chart?cht=bvg&chxt=y&chbh=a&chs=300x225&chco=A2C180&chtt=Vertical+bar+chart|(垂直條狀圖)&chd=t:10,50,60,80,40,60,30

你將獲得圖24-4所示的圖表。

圖 24-4　谷歌圖表API根據(jù)URL地址生成了這個圖表

要想理解之前輸入的URL地址，就需要了解URL地址的作用。你會發(fā)現(xiàn)其中包含了問號(?)及and符號(&)。其中的?標(biāo)志著第一個參數(shù)的出現(xiàn)，而&號將后續(xù)的各個參數(shù)分隔開。每個參數(shù)都由名稱、等號及值組成，因此在上面調(diào)用圖表API（http://chart.apis.google.com/chart）的例子中，使用了七個參數(shù)，其具體內(nèi)容如表24-1所示。

表24-1 圖表API中使用的帶參數(shù)的URL地址

譯者提醒：表格中圖表標(biāo)題一項換行符“|”后的內(nèi)容與瀏覽器中輸入的“(垂直條狀圖)”不同，這是因為App Inventor對中文字符進行了編碼的緣故。從瀏覽器地址欄中復(fù)制完整地址，然后粘貼到塊編輯器的文本塊中，就會自動將中文字變成表格中的字符。如果你強行在文本塊中輸入“(垂直條狀圖)”，最終在應(yīng)用測試時，手機上應(yīng)該顯示中文字符的位置會顯示“?”。提醒完畢。

通過修改參數(shù)，可以生成不同的圖形。想了解更多的圖表類型，請查閱下面的API文檔：

http://code.google.com/apis/chart/index.html

為圖表API設(shè)置Image.Picture屬性

在瀏覽器中輸入上述例子中的URL地址，就可以看到圖表API生成的圖表，如果想在手機上顯示該圖表，就需要將Image組件的Picture屬性設(shè)置為上述的URL。具體操作如下：

1. 創(chuàng)建一個新應(yīng)用，將Screen1的Title屬性設(shè)置為“圖表應(yīng)用舉例”；

2. 添加Image組件，設(shè)置其Width屬性為“Fill parent”，Height屬性為300；

3. 將Image1.Picture屬性設(shè)置為上述URL()。在組件設(shè)計器中無法Picture屬性，因為這一屬性只接受加載的文件，因此需要在塊編輯器中進行設(shè)置，如圖24-5所示，添加Screen1.Initialize事件處理程序，并在其中設(shè)置Image1.Picture屬性。

圖 24-5　應(yīng)用啟動時，設(shè)置image組件的picture屬性為一個圖表API的URL

在手機或模擬器中將顯示圖24-6所示的圖像。

圖 24-6　手機應(yīng)用中顯示的圖表

動態(tài)生成圖表API的URL地址

前面的例子顯示了如何在應(yīng)用中生成一個圖表，不過例子中的URL使用的是固定數(shù)據(jù)（10,50,60,80,40,60,30）。通常我們需要用動態(tài)數(shù)據(jù)來生成圖表，即，數(shù)據(jù)保存在變量中。例如，在一個游戲應(yīng)用中，用戶之前的成績保存在變量Scores中，我們要顯示這些成績。

要創(chuàng)建這樣的動態(tài)圖表，同樣需要為圖表API生成一個URL，并將變量中的數(shù)據(jù)植入其中。前面例子的URL中，用于生成圖表的數(shù)據(jù)是固定的，并用參數(shù)chd來聲明（chd代表圖表數(shù)據(jù)）：

chd=t:10,50,60,80,40,60,30

要生成動態(tài)的成績圖表，參數(shù)定義的開頭是一樣的，chd=t；之后的數(shù)據(jù)要從Scores列表中讀取，并將成績用逗號逐個連接起來。如圖24-7中顯示的最終的方案。

圖 24-7　向圖表API發(fā)送動態(tài)生成的URL

我們來詳細(xì)研究一下些塊暗藏機關(guān)的塊，其中大部分我們之前都使用過。

1. 為了便于理解，我們先編造一組數(shù)據(jù)，假設(shè)之前用戶有三次游戲的成績，保存在列表變量Scores中，分別為35、85、60。

2. 定義了變量chdPara，用來保存URL中列表數(shù)據(jù)的部分。在showChartButton.Click事件處理程序中，第一行將變量chdPara初始化為“chd=t:”。

3. 定義了變量scoreIndex，用于在foreach循環(huán)中跟蹤當(dāng)前正在處理的列表項，在Click事件處理程序中的第二行將其初始化為1；

4. 隨后是一個判斷，看列表Scores中是否包含列表項（length of list ＞ 0），如果包含列表項，則執(zhí)行foreach循環(huán)：

• 針對Scores列表中的每一項（成績值），用參數(shù)chdPara的當(dāng)前值與列表項連接；

• 然后又是一個判斷——檢查當(dāng)前正在處理的列表項是否不為列表的最后一項，如果不是最后一項，則在參數(shù)chdPara后面添加一個逗號,如果是最后一項，則不添加任何字符。

• 在循環(huán)的最后一行，將變量scoreIndex的值+1，以便在下一次循環(huán)中用于判斷列表的最后一項。

5. 循環(huán)結(jié)束后，將Image1的Picture屬性設(shè)置為最終的URL，其中第一部分為：http://chart.apis.google.com/chart?cht=bvg&chxt=y&chbh=a&chs=300x225&chco=A2C180&chtt=Vertical+bar+chart|(%E5%9E%82%E7%9B%B4%E6%9D%A1%E7%8A%B6%E5%9B%BE)&，第二部分為變量chdPara。

6. 這里為了跟蹤參數(shù)值，添加了一個名為chdParaLable的標(biāo)簽，用于顯示最終生成的參數(shù)。

到此為止，我們生成了動態(tài)的URL，這樣的方式具有普遍的適用性，例如，假設(shè)用戶在成績列表中新增了若干項，那么這個程序也是好用的。圖24-8顯示了在手機中應(yīng)用運行的結(jié)果。

圖 24-8　應(yīng)用在手機中運行的效果

你可以在任何游戲或應(yīng)用中，采用本例中的方法來顯示各種圖表，也可以與其他API進行通信，將更多地內(nèi)容植入到自己的應(yīng)用中，其中的關(guān)鍵是App Inventor提供了可以獲取網(wǎng)絡(luò)圖片的Image組件。

與網(wǎng)絡(luò)數(shù)據(jù)API通信

提示：App Inventor現(xiàn)在提供了一個web組件，可以更容易地訪問API數(shù)據(jù)，雖然下述的TinyWebDB方案仍然有效，但建議查看以下鏈接中使用web組件的例子：

http://www.appinventor.org/stockmarket-steps

谷歌圖表API可以接受請求并返回圖片，不過更常見的是返回數(shù)據(jù)的API，在應(yīng)用中可以對這些數(shù)據(jù)進行處理，并根據(jù)需要加以利用。例如，在第13章“亞馬遜掌上書店”的應(yīng)用中，返回的數(shù)據(jù)是圖書的列表，其中每項數(shù)據(jù)包含了書名、最低售價以及書號（ISBN）。

使用App Inventor應(yīng)用于API通信，并不需要像在圖表API的例子中那樣，要自己來創(chuàng)建URL，而是更像使用一個網(wǎng)絡(luò)數(shù)據(jù)庫（見第22章）：只需要在TinyWebDB.GetValue中使用相關(guān)的標(biāo)簽即可，實際上是TinyWebDB組件負(fù)責(zé)生成了訪問API的URL。

不過，TinyWebDB并不能訪問所有的API，即使是那些返回標(biāo)準(zhǔn)數(shù)據(jù)的API，如RSS。TinyWebDB只能訪問那些“披著App Inventor外衣”的網(wǎng)絡(luò)服務(wù)，并遵從特定的通信協(xié)議。幸運的是，已經(jīng)創(chuàng)建了許多這樣的服務(wù)，并且還會有更多的服務(wù)隨之而來。網(wǎng)站http://appinventorapi.com上提供了一些這樣的服務(wù)。

探索API的網(wǎng)絡(luò)接口

本節(jié)將學(xué)習(xí)使用TinyWebDB獲取股票價格信息，信息來源于一個App Inventor兼容的API，網(wǎng)址是http://yahoostocks.appspot.com。訪問該網(wǎng)址，將看到一個如圖23-9所示的web接口（人類可訪問的）。

圖 24-9　App Inventor兼容的雅虎金融API的web接口

在Tag輸入框中輸入“IBM”或其他股票的代碼，網(wǎng)頁上將返回股票信息列表，每一項代表一個不同的信息，后面將解釋這些數(shù)據(jù)的含義。

不過，在web頁面上查找股票信息并不是什么新鮮事，它的真實目的是為程序員提供一個機器對機器的訪問接口，從而實現(xiàn)與API之間的底層通信。

通過TinyWebDB訪問API

創(chuàng)建股票查詢應(yīng)用的第一步是在組件設(shè)計器中拖入一個TinyWebDB組件，該組件只有一個屬性可以設(shè)置，即ServiceURL，如圖24-10所示，它的默認(rèn)值為：http://appinvtinywebdb.appspot.com，指向默認(rèn)的web數(shù)據(jù)庫。而這里我們要訪問的雅虎股票API，因此將其設(shè)置為http://yahoostocks.appspot.com，與你之前在瀏覽器地址欄中輸入的URL相同。

圖 24-10　將ServiceURL屬性設(shè)置為http://yahoostocks.appspot.com

下一步是調(diào)用TinyWebDB.GetValue，向網(wǎng)站請求數(shù)據(jù)。這個操作可以放在一個Button.Click事件中：當(dāng)用戶在手機的應(yīng)用界面中輸入股票代碼并點擊“提交”按鈕時，執(zhí)行此調(diào)用；或者將其放在Screen.Initialize事件中，在應(yīng)用啟動時，自動獲取某個股票的信息。無論哪種情況，都需要為GetValue設(shè)置tag——某個股票的代碼，如圖24-11所示，就像在網(wǎng)站http://yahoostocks.appspot.com上的操作一樣。

圖 24-11　請求股票信息

在第10章的“出題”應(yīng)用中，我們已經(jīng)討論過數(shù)據(jù)庫組件TinyWebDB，它的通信方式是異步的：應(yīng)用中調(diào)用TinyWebDB.GetValue請求數(shù)據(jù)，之后程序?qū)⒗^續(xù)運行，必須為這次請求提供另一個事件TinyWebDB.GotValue的處理程序，當(dāng)請求的數(shù)據(jù)從網(wǎng)絡(luò)服務(wù)端返回時，來接收并處理這些數(shù)據(jù)。通過在用戶界面http://yahoostocks.appspot.com上的操作，我們已經(jīng)知道返回的數(shù)據(jù)為列表，每個列表項代表股票的不同信息（如，第二項代表股票的收盤價）。

客戶端的應(yīng)用可以利用網(wǎng)絡(luò)所提供的部分或全部信息，如，如果你想顯示股票的當(dāng)前價格，并與開盤價進行比較，你就可以按照圖24-12的方式來組織數(shù)據(jù)。

圖 24-12　使用GotValue時間來處理從Yahoo返回的數(shù)據(jù)

如果從網(wǎng)頁http://yahoostocks.appspot.com上直接向API提交請求，你會看到返回列表的第2項的確是股票的當(dāng)前價格，而第5想是當(dāng)前價格與當(dāng)天開盤價之間的差。這個例子只是簡單地從API的返回值中提取部分信息，并用兩個label顯示出來：PriceLabel與ChangeLabel，如圖24-13所示。

圖 24-13　股票應(yīng)用的運行效果

創(chuàng)建自己的App Inventor兼容的API

在終端應(yīng)用與網(wǎng)絡(luò)之間，TinyWebDB起到了橋梁的作用。App Inventor程序員只需要依照GetValue內(nèi)置的簡單的tag-value協(xié)議，就可以實現(xiàn)應(yīng)用與網(wǎng)絡(luò)服務(wù)之間的通信。這種方式讓程序員免于親手處理那些標(biāo)準(zhǔn)格式的數(shù)據(jù)，如XML或JSON。

這種方便的代價是，用App Inventor開發(fā)的應(yīng)用只能與少數(shù)網(wǎng)絡(luò)服務(wù)通信，這些網(wǎng)絡(luò)服務(wù)遵從TinyWebDB所設(shè)定的協(xié)議，協(xié)議中要求返回特殊格式的數(shù)據(jù)，因此API不得不提供對應(yīng)格式的數(shù)據(jù)，如XML或JSON。如果找不到可用的與App Inventor兼容的API，那么就要靠那些有能力的程序員來創(chuàng)建。

從前，創(chuàng)建API是一件非常困難的事情，不但需要了解編程及網(wǎng)絡(luò)協(xié)議，還要搭建服務(wù)器來運行自己創(chuàng)建的服務(wù)，另外還需要建立數(shù)據(jù)庫來保存數(shù)據(jù)。但現(xiàn)在這件事變得容易多了，你可以借助于云計算工具，如谷歌公司的應(yīng)用引擎（Google's App Engine）以及亞馬遜公司的彈性計算云（Amazon's Elastic Compute Cloud），來部署自己創(chuàng)建的網(wǎng)絡(luò)服務(wù)。這些平臺不僅可以接受委托管理你的服務(wù)，還能在不必支付費用的情況下，讓數(shù)以千計的用戶訪問你的服務(wù)?？梢韵胂螅@些平臺為創(chuàng)新提供了巨大的支持。

定制的模板代碼

編寫API看似令人望而生畏，但令人欣慰的是你不必從零做起。利用某些現(xiàn)成的模板程序讓創(chuàng)建App Inventor兼容的API變得非常容易。這些程序由python語言編寫，并使用了谷歌應(yīng)用引擎（App Engine）。模板程序提供了一段樣板代碼，可以將數(shù)據(jù)編輯成App Inventor所需要的格式，還提供了一個函數(shù)get_value，你可以按自己的需要進行修改。

下載模板程序及使用說明，并將其部署到谷歌應(yīng)用引擎服務(wù)器上，網(wǎng)址是http://appinventorapi.com/using-tinywebdb-to-talk-to-an-api/。你會發(fā)現(xiàn)這個鏈接與第21章創(chuàng)建定制數(shù)據(jù)庫時使用的網(wǎng)址都指向了相同的appinventorapi.com。實際上創(chuàng)建API類似與創(chuàng)建定制數(shù)據(jù)庫，只是不必保存及提取數(shù)據(jù)，而是通過調(diào)用其他服務(wù)來獲取所需要的數(shù)據(jù)。

為了創(chuàng)建自己的API，要先下載模板程序，并對幾個關(guān)鍵代碼做出修改，再上傳到谷歌應(yīng)用引擎。創(chuàng)建一個用TinyWebDB可以訪問的API只是幾分鐘的事情。

以下是從模板程序中選出的一段代碼，需要對其進行修改（不必理會那些“#”號后面的文字，它們就像App Inventor中的注釋一樣，用來說明接下來的代碼的功能）：

def get_value(self, tag):
    #在這個簡單的例子中，僅返回hello:tag，其中的tag來自于客戶端應(yīng)用
    value="hello:"+tag
    value = "\""+value+"\""
    # 如果value由多個單詞組成，為其添加引號
    if self.request.get('fmt') == "html":
        WriteToWeb(self,tag,value )
    else:
        WriteToPhone(self,tag,value)

這段代碼屬于一個名為get_value的函數(shù)（與App Inventor中的procedure相同）,當(dāng)你使用TinyWebDB.GetValue函數(shù)調(diào)用某個API時，需要調(diào)用這個函數(shù)。tag是函數(shù)的參數(shù)，并于GetValue中發(fā)送的tag相對應(yīng)。

黑體字的代碼是需要修改的部分。默認(rèn)情況下，該函數(shù)從發(fā)來的請求中提取tag，并返回“hello：tag”。（也就是說，如果在調(diào)用該函數(shù)時使用的tag為“joe”，那么函數(shù)將返回“hello：joe”）。通過設(shè)定變量value的值就可以實現(xiàn)這一點，隨后value值將傳遞給另一個函數(shù)：如果請求來自于web，則傳給函數(shù)WriteToWeb，如果請求來自手機，則傳給WriteToPhone。