Metro Style App (6) Sharing 分享功能

image

Metro Style App 在 API 分享的功能(Sharing ),使用 Sharing 將資訊分享到 Facebook ,Twitter….。不同於其他的 App 如果你要將資訊 PO 到 Facebook 上面,那必須直接去呼叫 Facebook 的 API ,可以被分享的 Target 實在太多了,雖然說 API 大部分都依循著同一套規則,但是實務上還是必須一個一個測試,而且對於使用者來說他不一定同時使用這麼多的平台,假設使用者只有 Facebook 帳號沒有 Google+,那麼 Google+ 的分享按鈕對使用者來說就是沒有意義又浪費版面造成混淆的功能,而且當開發愈想抓住更多平台而串接了更多分享 API ,也就造成這個問題愈來愈嚴重。難道這個問題沒有好的解決方法嗎,如果開發功能還需要利用微積分取得因為分享而加入以及因為太多分享而離開的使用者最大值,那麼也太累了一些。

Microsoft 在 Windows 8 提出了一種解決方案,分享的時候並不是直接呼叫服務的 API 而是呼叫 Windows 8 的 WinRT,而 WinRT 會找尋機器上被設定為可以 Sharing Target 的 App 來做 Sharing 的動作。這是什麼意思呢?就是說如果安裝了 Facebook 的 Metro App 則你的分享就可以分享到 Facebook 上,如果安裝了 Twitter 就可以分享到 Twitter 上,而如果今天有安裝這個 Google+ 這個 App 則使用者應該也就是 Google+ 的使用者。Microsoft 大餅畫得很圓,看起來正是一勞永逸的作法,讓大家的事情都可以做的很少就完工,不過唯一的問題就是 Windows 8 的使用人數能不能推得起來,如果人數太少到大型平台都不願意花費時間來開發 Metro App,那這個 Sharing 可能就只能寄 Email 了。

加入 Sharing content target app sample

為了避免只有 mail 能被分享的窘境,而且可以看到最完整的欄位設定,在 Sharing content target app sample 可以下載到微軟建立作為分享目標的範例 App ,用 VS11 開啟之後在 Local Machine 用 Debug 執行起來之後既可以當作分享的目標了。

image

在 App 中實作分享功能

要實作這個功能,主要是註冊 DataTransferManager 的 DataRequested Event Handler ,並且設定 Request 物件的屬性,讓 Sharing 的功能知道你想要分享的資訊是哪個部分。主要的重點就是取得 Sharing 的事件,在事件中把要分享的資訊整理好設定,Windows 8 的設定功能就會把這些資訊送給 Sharing Target ,接下來的事情就是 Sharing Target 要去煩惱了。

設定文字分享訊息

在 itemDetail.js 的 ready function 加入

var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

dtm.addEventListener("datarequested", function (e) {
var request = e.request;
request.data.properties.title = item.title;

// Share recipe text
var recipe = "INGREDIENTSrn";

//設定要分享的資訊
recipe += item.content + "rn";

recipe += ("rnDIRECTIONSrn" + item.directions);
request.data.setText(recipe);

設定圖片分享資訊

// Share recipe image
var image = document.querySelector(".item-image");
var uri = image.getAttribute("src");

// 抓取圖片資訊
if (uri.indexOf("http://") == 0)
uri = new Windows.Foundation.Uri(image.src); // Remote image
else
uri = new Windows.Foundation.Uri("ms-appx:///" + image.getAttribute("src")); // Local images

var reference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
var deferral = request.getDeferral();
// 圖片讀進 request.date 裡面
request.data.setBitmap(reference);
deferral.complete();

最後的結果從 Sharing content target app sample 查看的話應該會類似這樣,不同的 Sharing Target 抓取的欄位可能也不盡相同。

image


Sharing content target app sample 分享目標微軟範例

Sharing content source app sample 分享來源微軟範例

API reference for Windows Runtime and Windows Library for JavaScript

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *