Friend2Call 撥號練習 Android and OpenSocial Example

練習的情境 :

2008 某一天，你的朋友突然失蹤不知去向，你想要從某幾個支援 OpenSocial 中查到朋友的朋友電話(先假設有)，手機上有一個 Android 平台可以用，上網後將這些電話條列，然後一個個打過去問。

因為這個練習跟之前做的練習有關連，很多地方省略掉，建議參照著一起看：

1. My OpenSocial Gold App 一友一兩金
2. 三年等待結束，Dojo 1.0 與 OpenSocial 練習曲
3. Cross Domain Ajax and OpenSocial 跨域資料源
4. Android and OpenSocial 開放社會的變形金剛

兩種作法，一種是如 Dan Morrill 下面示範 Video 中所進行，寫個 HelloAndroid 的 App，用 XML 組成應用的 UI 使用者介面，利用 java.net.URL 取得 container.json 或是 container.data.xml 資料後轉給 Intent，然後使用 Intent.CALL_ACTION 以及 startActivity(intent) 來達成打電話的目的，程式碼大約樣子如下：

URL url = new URL("http://your.opensocial.container/container.json");
URLConnection urlconn = url.openConnection();
// handle http response
Intent i = new Intnet(Intent.CALL_ACTION);
i.setData(Phones.CONTENT_URI.addId(your_friend_phone));
startActivity(i);

但這方法要實現練習的情境有點問題，就是目前陽春的容器沒有實現 People Data API Developer's Guide: Protocol，所以 container.json 或是 container.data.xml 還沒辦法照 OpenSocial API 的規定提供，目前只有支援 OpenSocial 的 JavaScript API 而已。

所以還是採用另外一種作法，實做一個 OpenSocial 的 App 稱作 Friend2Call，使用 Android 的 browser 來當 JavaScript 執行平台，直接跑 OpenSocial API 抓出朋友資料，輸出 tel:規格的連結如下面的樣子。

href="tel:(886)123456778"

這次實做比較單純，因為資料不需要像Cross Domain Ajax and OpenSocial 跨域資料源這篇一樣跨網域，朋友資料都可以在 conatiner 中找到，所以不需要使用 dojo.io.script.get。

可以用瀏覽器直接看 OpenSocail Container Friend2Call，但是那個按連結功能需要 Android browser 模擬器才可以運作。程式碼 Source Code 可以到樂連LinkXD Download下載。

執行時請注意，這種作法必需要用下面的按鍵啟動撥電話功能，不能直接使用點選模式。接下來可以考慮加入練習的是 Grid (1.0) | The Dojo Toolkit部份，這部份可以參考Simple Dojo Grids來實做。

雖然最終沒有開發 Android UI 的應用，不過練習過程中發現幾個可以注意的事項：

1. 用 Eclipse 跑之前，最好先開好 emulator.exe，不然有時候程式跑不出來。
2. R.java 自動化資源編號太省事了，xml 資源越來越多卻不會越來越難找，用 R.補字就找到，比較不會錯掉。

Dan Morrill 示範 Android 開發的影像



去部落格曬曬陽光
LinkXD

Android and OpenSocial 開放社會的變形金剛

Android SDK 釋出 Gphone 的變形金剛後，就有模擬器可以看看之前做的練習 Cross Domain Ajax and OpenSocial 跨域資料源跑起來如何。

這個練習中有 OpenSocial 的陽春型容器一個，附加一個換算朋友數的應用，這些都是用 dojo 來幫忙完成。

Android SDK 跑出來的圖，看起來 XmlHttpRequest(dojo.xhrGet) 和 Cross Domain Ajax 的 script 方式(dojo.io.script.get)沒有問題，另外特別的是 firebug.xd.js 也可以支援，算是令人驚訝。

就目前模擬器結果看起來，這個瀏覽器應該可以支援目前既有桌面型瀏覽器上的眾多 Ajax 應用，而不需要太多改變。例如這個圖中的 Cross Domain Ajax and OpenSocial 跨域資料源就是一行沒改，沒有改 Container 也沒改 App 端，結果就像你用 Firefox 看到的一樣。

去部落格曬曬陽光
LinkXD

Cross Domain Ajax and OpenSocial 跨域資料源

如果練習過 My Dojo 1.0 XDomian and OpenSocial 跨域議題，應該會注意到資料來源的位置沒有改變，下面 firebug 圖可以看出 app.json 還是掛在 Container 的網站上，這次打算將這個部份也移到 linkxd.com 網域之下。

和上次 My Dojo 1.0 XDomian and OpenSocial 跨域議題的差別在於上次只是移動 app.js，而這次要移動 app.json 到 linkxd.com/gold 目錄下，仔細觀察之下，應會發現 Cross domain 資料源 app.json 無法存取的問題，因為 app 提供的 callback 其實是 containerB.js 呼叫下載，這時候 app 的 dojo.xhrGet 其實是在 Container 中呼叫，導致要取 http://linkxd.com/gold/app.json出現 Cross Domain Ajax 問題。

app.json 一般是由資料庫動態產出的資料，這些資料至通常放在應用端，如何讓 containerB.js 取得？ 一般的作法是 containerB 需要提供某種 proxy 機制來轉接這個 http://linkxd.com/gold/app.json，這樣作法代表需要動態網頁支援的網站，或是本身容器有提供，像是 Google Gadgets 就有這個機制。

這個問題可以在 Interacting with our existing codebase and date? 看到更多建議，如果狀況許可，例如金價等資料，這是只用一次的，可以考慮將原來的 app.json 包在 app.js 之中一起輸出。問題是 Ajax 通常是會一直發出新的需求，不太可能一開始就載入。

這裡要採用的方法可以參考Web Services + JSON = Dump Your Proxy或是 On-Demand Javascript - Ajax Patterns，可以自己參照網頁寫出來，不過這裡打算用現成的 Alternate Transports | The Dojo Toolkit來做。利用 dojo.io.script.get 來產出動態的 script 標籤，同時載入 app3json.js 的內容，這樣並不需要額外的服務端支援。

dojo.io.script.get(
{url: 'http://linkxd.com/gold/app3json.js'}
);

app3json.js 會有資料包在一個 callback 的呼叫裡面。

linkxdApp.mycallback({
'usdGold' : 788,
'usdOil' : 95,
'usdTwd' : 32.5,
'eurTwd' : 46.9
})

輸出的結果請參考Container B3，這時候資料的輸出已經移到 linkxd.com，完成這次的練習。程式碼可以到樂連LinkXD Download網頁下載。

去部落格曬曬陽光
LinkXD

My Dojo 1.0 XDomian and OpenSocial 跨域議題

這次要做的練習是 Dojo 1.0 XDomain，這種方式可以讓客戶端載入應用網站上的 dojo 以及 app.js，而不使用 OpenSocial 容器網站提供的 dojo。

一開始做了 OpenSocial 練習 My OpenSocial Gold App 一友一兩金，當時是採用 dojo 0.9 的XDomain Build 模式，這種跨網站網域的作法有其特別好處，一是採用端程式碼非常少，二是不需要上傳一堆 dojo 的程式碼，很適合拿來給急著要嘗鮮的人用，可以快速上手練習一番。

不知道你是否注意到，這類作法會讓你的 App 或是你的容器相依在 Dojo and AOL 這個 XDomain 服務之下，對於不想依賴在別的網站服務的人來說，這樣並不適合，剛好Dojo 1.0 出來，，於是稍微練了三年等待結束，Dojo 1.0 與 OpenSocial 練習曲一下，不過那是改個 1.0 版沾沾醬油而已，這次想要沾多一點 dojo，便想要改為 Cross Domain (XDomain) Builds 模式試試，一來是想看看語法是否有啥差異。

先談談為何要弄個 Cross Domain (XDomain) Builds ，之前可以先看Using dojo for orkut.com OpenSocial has loading module issues 這個疑問，跨 domain 資源下載的問題會是需要將 js 放在客戶端或是容器端執行需要面對的議題，做個 My OpenSocial Gold App 一友一兩金 之類的 App，因為它完全將東西放在容器端，簡單好處理，慢慢地你打算移出去，往往會需要建制這種資源處理模式。

這裡沒有太多說明，因為打字很累，講一萬行也不如你自己玩一下，體驗一次。

你需要的是有 src 的 dojo 檔，請在release-1.0.0下載。解開後到 util/buildscripts/profiles 可以看到五個預設的設定檔，你可以直接拿來練習看看。

1. base.profile.js
2. layers.profile.js
3. cometd.profile.js
4. offline.profile.js
5. standard.profile.js
   

接下來 cd util/buildscripts 後，下指令建制 base 就好，其他功能沒用到先不要建。這樣大小約 3MB。

build profile=base loader=xdomain xdDojoPath=http://linkxd.com/gold action=release

接下來到 src/release 去找它做出來的東西上傳到 gold/dojo 目錄就好。

src="http://linkxd.com/gold/dojo/dojo.xd.js"

接下來就是改個容器檔，這裡沿用 B 容器做出 Container B2，如果 OK 就代表你的 xdomain 已經建制完成。

需要程式碼的朋友可以到樂連LinkXD Download頁面下載參考。

接下來如果要進一步練習，可以考慮將 app.js 變成一個模組，可參考 Creating Your Own Modules | The Dojo Toolkit，建議採用放在 dojo 目錄旁邊的作法。寫完模組後寫個 linkxd.profile.js 檔來將 mygold/app.js 納入。

build profile=linkxd loader=xdomain xdDojoPath=http://linkxd.com/gold action=release

去部落格曬曬陽光
LinkXD

三年等待結束，Dojo 1.0 與 OpenSocial 練習曲

以為還會很久才會看到，沒想到 0.9 出了之後沒多久，就看到這個Dojo 1.0 | The Dojo Toolkit 消息。

有新東西，當然要嚐個鮮，延續之前的My OpenSocial Gold App 一友一兩金 的練習，只是改為使用新的 Dojo 1.0.0 available on AOL CDN，沒有異動其他部份，Container A 與Container B 看起來沒有啥問題。

新的版本我最感興趣的部份是Grid (1.0) | The Dojo Toolkit ，接下來應該會玩一下這個部份。



圖片源自 Grid (1.0) | The Dojo Toolkit

另外之前既然玩過Rich Text Editor in LinkXD 用來編寫 HTML，細節參閱 LinkXD: LinkXD 0.4.0 Release 釋出 ，這次Editor | The Dojo Toolkit 雖說是實驗功能，也會列入練習考量。

去部落格曬曬陽光
LinkXD

My OpenSocial Gold App 一友一兩金

日前出爐的 OpenSocial - Google Code 看起來很有趣，加上之前的你有多少黃金 ? LinkXD 0.4.2 Gold Release也玩出一點意思，於是就混搭出這個「一友一兩金」東西出來。

一友一兩金是個 OpenSocial - Google Code 的概念式實做，注重在鳥瞰一下整個流程與瞭解 OpenSocial 應用的全貌，不講理論，只是動手做看看。

動手做第一個問題是目前可測試的容器太少，目前線上的社群網站有支援 OpenSocial 要它開給你測試也不太可能，簽了Orkut Sandbox Sign Up 也還沒得到許可，於是只好先自己做一部分，這裡試著實做部份 OpenSocial API 來提供兩個 Container A 與 Container B 給 Gold App 掛上去，讓想要看看 OpenSocial 應用的朋友嚐個鮮，這個應用只是用來展示整個流程，所以不會有很花俏的輸出介面，只是把字秀出來而已。

請注意，這只是小部份 OpenSocial Container 實做，並非完整的實做，只是供參考用。練習一下你會發現為何這個東西有機會吸引那麼多互相競爭的網站願意加入實做。

第一個原因在於它雖然是 G 提出的規格，卻可以完全不用 G 的服務，也就是完全沒有綁在一起，你可以各做各的，像這裡就做了兩個陽春到不行的 Container，你可以下載上傳到任何網頁空間去跑，雖然這兩個容器放在 G 的網頁服務裡，但是 ContainerA/ContainerB/Gold App 是跟 G 服務不相依的，你可以搬到你要的地方。

另一個原因就是 App 的大量出現，如果你的社群網路可以加入，又不怕被綁，又可以得到一大堆新的 App 可以吸引使用者，自然會讓這些網站願意加入，反正也不會有啥大損失，又是用 Html + JavaScript 這種基本技術，要轉接一下介面，不會太費工。

示範有兩個容器 Container 以及一個應用 Gold App，該 Gold App 會利用 OpenSocial API 取出你在該容器的朋友數，以一個朋友值一英兩黃金計算方式，由 Gold App 去取回當時即時報價資料(目前為模擬檔案)，然後輸出到該 Container 的頁面，你的朋友價值將以新台幣、美元、歐元或是值幾桶原油方式呈現。同一隻 app.js 可以跨到 ContainerB 也不用改，這是 OpenSocial API 的最大好處。

有一點請注意，為了方便， Container A 與 Container B 還有 Gold App 的 app.js 原來應該分別放在三個網站，而不是目前掛在同一目錄的樣子，這一點一定要先弄清楚。

這裡使用The Dojo Toolkit | The JavaScript Toolkit來幫忙做 ajax 的功能，你也可以用純的 JavaScript 或是其他Ajax framework - Wikipedia來做，全憑你喜歡。

這裡不討論登入與使使用者權限的問題，那個部份目前細節太少，所以目前只是先看看一整個流程，有個概念就好，你可以直接觀看線上兩個 Container A 與 Container B 的原始檔，或是到樂連LinkXD Download(蠻下面的)這裡下載 zip 檔案，解開後就可以用 Firefox 試看看，也可以傳到 Google Page Creator 上面，就像示範的 Container A 與 Container B 一樣。

另一個可以關注的議題是安全的部份，目前雖然尚未有太多的實做或是資訊可以參考，仍然有人可以找到漏洞，參閱 First OpenSocial Application Hacked Within 45 Minutes，可見的將來，這個開放的平台將受到更多的檢驗與測試，如果可以越來越安全，目前的初期漏洞被揭露也不見得是壞事。

還有一個可以關注焦點是台灣的社群網站何時支援應對 OpenSocial，那個第一時間接上這個突然冒出來的源源不絕的超大 App 水龍頭的網站，應該會讓會員用的很爽吧，畢竟維護程式以及請工程師也是很貴的。

也許有機會的話，你可以很快看到 LinkXD Gold App 修的美美的，出現在你的社群首頁也不一定。

圖片來自OpenSocial - Google Code，根據其Creative Commons Attribution 2.5 Generic授權引用。


參考連結

OpenSocial, Google’s Open Answer to Facebook « GigaOM

Google Announces API Connecter For Social Networks | WebProNews

Six Apart - News and Events: OpenSocial, Killer Apps and Regular People

[補充更新]

Surprise–OpenSocial is alpha code

LinkXD

去部落格曬曬陽光