第188期 / June 5, 2013

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

Windows Azure Mobile Services-讓行動應用程式(APP)開發更簡單

作者/張竣皓

[發表日期:2013/6/5]

前言

微軟(Microsoft)去年發佈了Windows Azure Mobile Services,給予行動應用程式(Mobile Application)的開發人員,在雲端架構後端服務上多了一種新的選擇。除了一開始提供自家平台Windows 8、Windows Phone 8與iOS平台的SDK支援,就在上個月也釋出了在Apache 2.0底下的Android Client SDK。讓開發人員不論是要開發哪種平台的應用程式,都可以輕鬆地在雲端儲存資料並快速整合推播通知。

一、雲端儲存資料

你不用再煩惱後端儲存服務的基礎架構問題,交給Windows Azure,讓你輕鬆地在雲端儲存資料。


《圖一》


二、整合身份驗證

你不用再撰寫、設定和使用者驗證管理方案的需求,能夠輕鬆地將Facebook、Twitter、Microsoft或Google帳戶併入使用者認證。


《圖二》


三、整合推播通知

你不必再撰寫或管理後端基礎架構程式碼,只需要撰寫伺服器端的指令碼,就可以透過Mobile Services將推播通知傳送給應用程式。


《圖三》


在此篇文章中將示範如何使用Windows Azure Mobile Services增加以雲端架構後段服務的HTML應用程式。在此範例中,將建立一個簡單的待辦事項(To do list)應用程式,並讓應用程式中的資料儲存於新建立的Mobile Services,如下圖示。


《圖四》


事前準備

在這之前,你必須先擁有Windows Azure 帳戶並啟用Windows Azure Mobile Services。若尚未申請帳號,請參考 Windows Azure Free Trial,幾個步驟就可以申請免費的試用帳號。若已經擁有帳號,但尚未啟用Windows Azure Mobile Services 請參考 Enable Windows Azure preview features 來開啟服務。

此外,你還需要一個支援HTML5的瀏覽器與被下載腳本(downloaded scripts)所支援的web servers,例如: IIS Express、Python。

建立一個新的行動服務(Mobile Service)

一、登入Windows Azure的管理入口網站(Management Portal)。

二、在導覽窗格的最底下,點選 +新增(+NEW)。

《圖五》


三、點選 計算(Compute)→行動服務(Mobile Service)→建立(Create),將會顯示新的行動服務(New Mobile Service) 的對話視窗。

《圖六》


四、在建立行動服務(Create a mobile service)頁面中的URL文字框,輸入新mobile service子網域名字並等待系統驗證完成。在驗證完成之後,點選右箭頭的按鈕進入下一個指定資料庫設定(Specify database settings)頁面。

《圖七》


這步驟將會產生一個新的SQL資料庫物件與伺服器,你可以重複利用他或將他給予其他的SQL資料庫物件使用。若在同一個區域內,已經有可以給行動服務使用的資料庫,也可以直接選擇 使用現有的SQL Database (Use existing Database) 來指派給他。若是不同區域的資料庫,因為長距離的線路將造成多餘的頻寬耗費與較高的延遲,所以並不推薦使用。

五、在名稱(Name) 的文字框輸中入新增的資料庫名字,接著在 伺服器登入名稱(Login name) 的文字框輸入資料庫系統管理者的登入ID,輸入並確認密碼,最後點選勾勾按鈕來完成動作。

《圖八》


當你提供的密碼與確認的密碼不匹配或不滿足密碼的最低需求時,將會顯示警告訊息提醒。建議將你的帳號密碼記錄下來,在未來重複利用此資料庫時,你將需要這些資訊。

《圖九》


建立一個新的HTML應用程式

現在你已經建立好你的行動服務了,你可以簡單幾個步驟,在Windows Azure管理入口網站的快速開始(Quick-start),新增或修改存在的HTML應用程式來連接你的行動服務。

一、在Windows Azure管理入口網站,點選行動服務(Mobile Services),然後再選取剛剛新增的行動服務。

二、在Quick-start的頁籤點選HTML後,在選擇平台(Choose platform)下展開 建立新的HTML應用程式(Create a new HTML app)。


《圖十》


這將顯示三個步驟來如何代管HTML應用程式在你的行動服務上。

《圖十一》


三、點選 建立TodoItems 資料表(Create TodoItems table),來建立儲存應用程式資料的資料表。

四、在下載及執行您的應用程式(Download and run app) 下,點選下載(Download),下載網站上所提供的待辦事項範例程式,來連接至你的行動服務。

代管(host)並執行你的HTML應用程式

一、瀏覽你儲存壓縮的位置,解壓縮檔案並在server的子目錄中執行下列的command files。

launch-windows (Windows computers)
launch-mac.command (Mac OS X computers)
launch-linux.sh (Linux computers)

若在Windows的環境中,當PowerShell詢問你是否執行script時,請輸入'R'確認執行。或你的網頁瀏覽器可能會警告你不要執行此script,因為這是從網際網路中下載下來的。若發生此警告,請務必同意讓瀏覽器讀入此script。這動作將在你的本機電腦上開始一個web server,來代管新的應用程式。

二、開啟瀏覽器網址列 http://localhost:8000/ 來啟動這應用程式。

三、在應用程式Enter new task輸入事項文字,點選Add新增代辦事項。


《圖十二》


這動作會送出POST request給代管在Windows Azure上的行動服務,而request的資料將插入在 TodoItem 的資料表上,儲存在資料表的item再被行動服務回傳回來,並更新顯示在應用程式中的欄位上。你可以在資料夾下的app.js檔案中,查看此範例存取行動服務並查詢插入資料的程式碼。

四、回到Windows Azure管理入口網站行動服務下的 資料 頁籤,點選 TodoItems 資料表,來瀏覽插入在應用程式表格中的資料。


《圖十三》


替你的應用程式註冊身份識別

現在要在應用程式中,使用身份識別提供者(Identity Provider, IDP),新增認證的功能。在成功地經由Mobile Services審定身分認證後,其使用者ID將會顯示在應用程式中上。

一、登入Windows Azure管理入口網站,在行動服務(Mobile Services)中選擇一開始建立的行動服務。

二、選擇 儀表板(Dashboard) 頁籤,並記下行動服務URL(Site URL)的內容。或許在註冊你應用程式時,你會需要提供這個內容給IDP使用。

《圖十四》


三、挑選下列的 IDP並跟著連結內的步驟註冊你的應用程式。記得,記下IDP所產生的客戶端ID與密鑰。注意,這裡產生的密鑰是非常重要的憑證,請不要在你的應用程式中輕易地分享或散佈出去。

Microsoft Account
Facebook login
Twitter login
Google login

四、回到Windows Azure管理入口網站,點選 識別(Identity) 頁籤,輸入剛剛從IDP提供的客戶端ID與密鑰,並點選儲存(Save)。這樣,你的行動服務與應用程式皆已經設定好,來使用你選擇的IDP認證了。

《圖十五》


替你的應用程式設置權限限制

一、在Windows Azure管理入口網站,選擇行動服務中的 資料(Data) 頁籤,並點選TodoItem 資料表。

二、選擇 權限(Permissions) 頁籤,將權限全都設置成 僅限驗證的使用者(Only authenticated users) 後點選儲存。因為其他匿名使用者並未被授權任何的權限,這將確保TodoItem資料表,只會被authenticated user操作。


《圖十六》


三、在應用程式server的子目錄中執行下列的command files。

launch-windows (Windows computers)
launch-mac.command (Mac OS X computers)
launch-linux.sh (Linux computers)

四、開啟瀏覽器網址列 http://localhost:8000/ 來啟動這應用程式。你會發現資料表會讀取失敗,因為剛剛已經替TodoItem資料表設置了權限,但應用程式現在仍是使用未認證過的使用者來向Mobile Services存取資料表。

下一步你將更新程式碼,讓應用程式在向Mobile Services request之前,先認證使用者的身分。

替你的應用程式增加身分認證

因為很多瀏覽器都會禁止直接彈出登入視窗,所以這裡在 button click事件發生後,才會呼叫登入的函式。

一、打開專案中的index.html檔案,在

Mobile Services

底下加入下列程式碼,這將在這頁面使用啟用Mobile Services登入功能。

《圖十七》


二、在app.js檔案中,將程式碼最底下的refreshTodoItems() 函式替換成底下的程式碼。這一組函式將會來處理認證的程序,讓使用者能Microsoft帳戶認證登入。若你想用Microsoft帳戶以外的IDP,只需要將login函式中的參數置換成facebook、twitter、google其中一個。

《圖十八》


三、回到你應用程式執行的瀏覽器並重新整理頁面,在你成功的登入後,就可以正常的與Mobile Services更新資料表內容了。


《圖十九》


結語

Windows Azure Mobile Services 提供了 App 開發許多常見的基礎建設,如: 資料儲存、身份驗證、推播通知等等。你可以使用Mobile Services用簡單、直接的方式在雲端存放結構化資料,除了直接建立新的SQL Database,也可以連接到現有的資料庫。
而Mobile Services也免除您要撰寫、設定和測試自訂驗證和使用者管理方案的需求。你可以輕鬆地併入 Facebook、Twitter、Microsoft 或 Google 帳戶的使用者驗證。讓不同台開發者無須憂心基礎架構的問題,能夠將心力投注於打造核心體驗。

參考資料

http://www.windowsazure.com/zh-tw/
http://studyhost.blogspot.tw/2012/09/techdays-2012.html