Design Your Life

SyntaxHighlight

2013-06-20

WP8開發: Live Connect Single Sign-On (SSO)

相信大家一定常遇到有App會讓你用別的帳號登入(Google, Twitter, Facebook, Windows Live),而這種模式叫做OAuth,這種模式對使用者跟開發者來說都是很方便的。




但如果你每次開這個App都要重新取得授權,那真會讓人火都燒起來了,而解決這樣的問題我們必須用到一個技巧Single Sign-On,意思就是使用者只要授權一次,再來就可以不用一直確認,App可以持續使用該授權。

[問題]

然而在WP8上用Live Id登入有相當多的資訊,其中這篇算是最接近的(因為我用起來還是沒有SSO),其中的問題在於 InitializeAsync 這個 function 起不了作用,即便是正常執行還是沒有拿到Session

//錯誤寫法
LiveAuthClient liveIdClient = new LiveAuthClient("YOUR CLIENT ID GOES HERE");
var scope = new[] { "wl.emails", "wl.basic", "wl.signin", "wl.offline_access" };
LiveLoginResult result = await liveIdClient.InitializeAsync(scope);
if(rsult.Session==null){
    //未授權
}else{
    //取得授權
}

其中Scope的部分請參考Live Connect網頁,他各代表不同權限。

[主要核心Scope]

wl.basic – 使用者基本個人檔案資訊的讀取權。同時也會啟用使用者連絡人清單的讀取權。
wl.offline_access – 應用程式隨時讀取和更新使用者資訊的能力。如果沒有這個領域,應用程式只能在使用者登入 Live Connect 且使用您的應用程式時才能存取使用者資訊。
wl.signin – 單一登入行為。使用「單一登入」,當使用者登入 Live Connect 時也會登入到您的網站。


[解決方式]

用InitializeAsync()嘗試取得授權,若不成功在用LoginAsync(scope)取得。

LiveAuthClient liveIdClient = new LiveAuthClient(""YOUR CLIENT ID GOES HERE"");
var scope = new[] { "wl.emails", "wl.basic", "wl.signin", "wl.offline_access" };

//嘗試取得授權
LiveLoginResult result = await liveIdClient.InitializeAsync();
if(rsult.Session==null){
    //未授權, 再次取得授權
    result = await liveIdClient.LoginAsync(scope);
}else{
    //取得授權
}

if(result.Status == LiveConnectSessionStatus.Connected)
{
    LiveConnectClient client = new LiveConnectClient(result.Session);
    LiveOperationResult meResult = await client.GetAsync("me");
}

其中wl.offline_access這個scope是絕對不能少的,如果你沒加到這項也會沒辦法SSO。



2013-06-09

[筆記] 用DropBox同步你的Sublime Text 2 Packages

Sublime Text 2是許多Developer喜愛的工具,強大的套件管理讓我們可以根據需求去安裝需要的套件,一切看來非常美好,但是...如果你有多個開發環境? 家裡一台PC,公司一台PC,又有一台筆電,可怕的是有的Windows OS也有Mac OS!! 總不可能要我記得我今天早上安裝過什麼Package再慢慢裝到其他電腦上吧...

那就讓他們同步吧!


Sublime Text 2的Packages最主要是由3個Packages組成:
1. Installed Packages
2. Packages
3. Pristine Packages

步驟一:在DropBox資料夾中建立Sublime的新家

(p.s. 若已經建立過則可以跳過此步驟)

1.在DropBox中建立一個資料夾準備給Sblime用

Ex. D:\Dropbox\Sublime

2.把你的Sublime Text Package資料夾複製到該資料夾

[Windows] C:\Program Files\Sublime Text 2\
[Mac] /Users/{user}/Library/Application Support/Sublime Text 2/

或是從Sublime裡面去打開
Sublime Text 2 -> Preferences -> Browse Packages

3.接著把這三個資料夾複製到Sublime的新家
複製[Installed Packages] [Packages] [Pristine Packages] 到 D:\Dropbox\Sublime

4.就可以把舊家給賣了

(p.s. 如果不放心可以複製一份到別的地方去備份)
刪除原本的三個Packages


步驟二:把舊家連結到新家去

1. 開啟Cmd並且到舊家所在位置去

2. 建立連結

[Windows]

mklink /D "Installed Packages" "{新家地址}\Installed Packages" 
mklink /D "Packages" "{新家地址}\Packages" 
mklink /D "Pristine Packages" "{新家地址}\Pristine Packages" 

[Mac]

ln -s "{新家地址}\Installed Packages" "Installed Packages"
ln -s "{新家地址}\Packages" "Packages"
ln -s "{新家地址}\Pristine Packages" "Pristine Packages"


接下來你不論在哪個開發環境安裝Packages都會自動同步囉

皆大歡喜!


2013-05-14

Windows 8 開發: 動態更新圖片閃爍 Image update flicker.


這個問題其實遇到蠻久的但一直沒時間好好解決,一直到前陣子開發WP8版本的時候終於"痛定思痛"的好好把它給搞定,其實一部份也是誤打誤撞XD
先來談談我遇到的問題,因為任務的關係,我需要動態更新畫面上的Image,直覺的處理方式如下:

[方法A] Url更新 → 更新Image的來源

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
timerImage.Source = new BitmapImage(new Uri(ImageUrl));
但是可怕的事情發生了,圖片竟然會一閃一閃的,花特?

發生了什麼事情? 就過去的開發經驗是Image在繪圖過程中需要時間,所以需要用技巧雙重緩衝來幫助讓Image畫好才顯示到畫面上。

[方法B] Url更新 → 更新背景Image → 更新Image

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
var BackgroundImage = new BitmapImage(new Uri(ImageUrl));
timerImage.Source = BackgroundImage;
Image照樣給我在那邊閃阿閃的,彷彿在說,打我啊笨蛋XD (背景音樂:一閃一閃亮晶晶)
我不是已經用了雙重緩衝了嗎???
後來查了資料後(但我忘記把網址留下來),資料上說.NET會自動優化Image最後真的要呈現的時候才會把圖片載入到記憶體裡面去,意思就是說,我沒有辦法預載圖片來解決目前畫面圖片閃爍的問題。

經此挫敗只好上論壇拜神,請求各界神人的指導,其中給予指引,不是有DownloadCompleted可以用嗎? 傻傻的,看看這精美的MSDN,你要的一切都在這阿。

但....為什麼我的.NET沒有這個event可以用? 喔~原來是被拿掉了阿!? 只剩下一個Bitmap.ImageOpended可以用...但它同樣也是要圖片載入到記憶體之中才會觸發...

等等,我好像有想法了!

[方法C]如果我用一個看不見的圖片當作緩衝,再把它畫到另一張圖片上呢?

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
Image NotVisibleImage = new BitmapImage(new Uri(ImageUrl));
timerImage.Source = NotVisibleImage.Source;

圖片他還是會閃.........此時我已經快氣絕身亡了

最後的最後,我用了一個Image,並且綁定ImageOpended事件,再把它用Brush的方式畫到Grid上(當作Grid的背景圖片呈現),才解決了直這個問題XD

最後獻上Source Code與論壇文

2013-03-28

WP8送審加入測試帳號


如果你的App也是需要認證(登入)才能使用的App,你可以在Upload XAP這一頁的右邊找到More XAP options,就可以輸入測試用的帳號密碼啦,千萬不要跟我朋友一樣傻傻等5天,然後再收到App認證失敗的通阿,我絕對不會承認我就是我朋友XD



2013-03-24

Windows 8 and WP8 圖檔需求

不知道開發過開發Windows App的朋友們是也覺得每次都要整理資料再跟設計師提需求,然後就e-mail來來回回無形中也浪費了一些時間,下面資料列出W8與WP8 app需要的圖檔需求供大家參考

Windows 8 Store app

*使用建議檔名把圖檔整理好後,放到目錄/Assets/
隨意檔名 限定檔名(建議使用) 圖檔大小(Width x Height)
Logo標誌 W8_Logo_270x270.png Logo150x150.scale-180.png 270x270
W8_Logo_210x210.png Logo150x150.scale-140.png 210x210
W8_Logo_150x150.png Logo150x150.scale-100.png 150x150
W8_Logo_120x120.png Logo150x150.scale-80.png 120x120
Wide Logo 寬標誌 W8_WideLogo_558x270.png WideLogo310x150.scale-180.png 558x270
W8_WideLogo_434x210.png WideLogo310x150.scale-140.png 434x210
W8_WideLogo_310x150.png WideLogo310x150.scale-100.png 310x150
W8_WideLogo_248x120.png WideLogo310x150.scale-80.png 248x120
Small Logo 小標誌 W8_SmallLogo_256x256.png SmallLogo.targetsize-256.png 256x256
W8_SmallLogo_54x54.png SmallLogo.scale-180.png 54x54
W8_SmallLogo_48x48.png SmallLogo.targetsize-48.png 48x48
W8_SmallLogo_42x42.png SmallLogo.scale-140.png 42x42
W8_SmallLogo_30x30.png SmallLogo.scale-100.png 30x30
W8_SmallLogo_24x24.png SmallLogo.scale-80.png 24x24
W8_SmallLogo_32x32.png SmallLogo.targetsize-32.png 32x32
W8_SmallLogo_16x16.png SmallLogo.targetsize-16.png 16x16
Store Logo 市集標誌 W8_StoreLogo_90x90.png StoreLogo.scale-180.png 90x90
W8_StoreLogo_70x70.png StoreLogo.scale-140.png 70x70
W8_StoreLogo_50x50.png StoreLogo.scale-100.png 50x50
Badge Logo 徽章標誌 W8_BadgeLogo_43x43.png BadeLogo.scale-180.png 43x43
W8_BadgeLogo_34x34.png BadeLogo.scale-140.png 34x34
W8_BadgeLogo_24x24.png BadeLogo.scale-100.png 24x24
SplashScreen 啟動顯示畫面 W8_SplashScreen_1116x540.png SplashScreen620x300.scale-180.png 1116x540
W8_SplashScreen_868x420.png SplashScreen620x300.scale-140.png 868x420
W8_SplashScreen_620x300.png SplashScreen620x300.scale-100.png 620x300

WP8

Logo標誌

WP8_Logo300x300.png

Large Tile 大型動態磚

WP8_LargeTile_691x336.png

Medium Tile 中型動態磚

WP8_MediumTile_336x336.png

Small Tile 小型動態磚

WP8_SmallTile_158x158.png



相信大家看到這裡還是覺得很麻煩,一堆檔案要建立,別擔心,這裡已經幫你整理好了,包括圖檔名稱與影像檔實際大小都搞定,就差你的圖檔覆蓋過去。
以後開發新的App或者Logo改版可以請設計師一次搞定再整包拿來XD

2013-03-17

回鍋心得 Android vs. Windows 8 dev.


前言

能有機會去上課真是不錯,一方面強迫自己動手做,另一方面重新熟悉Android的開發,說真的一堆東西都忘的差不多了,畢竟上一次碰Android是在碩士班的時候了,當初是為了論文收集使用者的動態簽名資料而寫的一個Android app。

連這一次上課已經遇到這個老師三次了,第一次是在上iOS課程遇到,第二次是在微軟,還有這一次,這位老師感覺很不簡單

2013-02-26

WP8下拉式清單ListPicker


WP8沒有ComboBox?

繼續鬼打牆的WP8開發之旅,就在今天又碰到一個可怕的東西"下拉式清單"? 如果各位有開發過W8的話一定會直覺的想,不就用ComboBox就好了嗎? 沒錯,我一開始也是這樣想的...請各位繼續看下去...