使用 Visual Studio 與 Azure App Service 建置雲端 Web 與 Mobile Apps 服務

App Service 概述

Azure App Service 是將過去單獨存在的 Web Site 服務,延伸整合 Mobile Apps 服務(過去稱為 Mobile Services)、API Apps 服務以及 Logic Apps 服務而形成的一項整合性服務。透過 Azure App Service 可以快速建構所需的 Web 網站應用程式以及行動應用服務,除了使用 .NET 語言之外亦支援可以使用像是Node.JS、PHP、Python 或 Java 等開發語言。在 Azure Mobile Apps 服務方面,使用者應用端程式不論是要建置原生的 iOS、Android、Windows App 或是跨平台的 Xamarin 與 Cordova 類型的App,Azure Mobile Apps均提供原生的 SDK,可以讓開發人員可以快速整合單一登入、離線同步、推播通知功能,而伺服器端則提供 .NET 與 Node.js 的 SDK 用來建立 Mobile Apps 伺服器端應用程式。Azure App Service 內的 Web Apps 與 Mobile Apps 會建立在相同在容器資源內執行,因此您甚至可以使用 Web Job 建立連續性批次作業程序,或者您也可以建立自定義的 CName,藉由 Azure App Service 這樣的整合性服務可以讓您在建置 Web 與 Mobile 服務時更易於管理與擴展。

Web Apps 建立與部署

作為開發人員最佳夥伴的 Visual Studio 2015 開發工具,除了開發本地端 Web 應用之外,在整合 Azure App Service 開發上也著實提供最佳的開發體驗。首先開發者必須安裝 Azure SDK for .NET (下載位置),完成後可以直接由 Visual Studio 2015 新增 Web 應用程式專案,開發完成後可以直接透過 Visual Studio 2015 遠端發行的方式直接部署至 Azure App Service。

1

過程中會要求您登入 Azure 帳戶以進行驗證及帳戶連結,而接下來的發行過程中包含二個主要作業流程,首先會在 Azure 環境中建立 Azure App Service 並且完成所指定的設定,例如所在區域、資源群組、App Service 方案等,待 Azure App Service 建立完成後緊接著就會直接進行發行部署作業。

2

此外若已先行在 Azure Portal 管理介面建立完成 Azure App Service 時,透過 Visual Studio 2015 進行專案部署時亦可以選擇已存在的 Azure App Service 來進行發行,發行過程中就會省略第一道建立 Azure App Service 的作業流程而直接進行檔案的發行部署,而除了 Web 部署方式之外也提供 FTP 或檔案部署可供選擇。

3

Cloud Explorer 是一套整合在 Visual Studio 2015 裡的擴充套件,透過 Cloud Explorer 套件開發人員可以直接在 Visual Studio 2015 瀏覽在 Azure 上的資源,甚至可以直接取得檔案進行線上即時的修改,不過要提醒的是當您進行線上修改並儲存,此時所變更的檔案是處於遠端 Azure App Service 上的實體檔案,因此若您重新以本機端專案再進行發行部署,則會覆蓋掉原本已變更的檔案。

4 5

Mobile Apps 後端建立與部署

Azure App Service 除了可以建立一般廣為熟知的網站服務外,也可以用來建立服務行動應用所需的伺服器端程式,使用 Visual Studio 2015 建立 Azure Mobile Apps 相當簡單,只要在新增 -> 專案 -> 選擇 Web 類型 -> ASP.NET Web 應用程式,接著就可以看到內建的 Azure Mobile Apps 專案範本,該專案範本裡已包含了所有需要的相關 SDK 參考,因此開發人員可以直接專注在伺服器端服務邏輯的程式碼撰寫,迅速的建立 Mobile Apps 伺服器端的應用程式。若您選擇以 Node.js 來建立 Azure Mobile Apps 伺服器端應用程式,則可以選擇先下載安裝 Node.js Tools 1.1 for Visual Studio 延伸模組,就可以整合 Visual Studio 2015 開發環境介面來開發 Node.js 應用程式。

6 7

Azure Mobile Apps 伺服器端應用程式,其架構是採用 Web API 為基礎,以 .NET Azure Mobile Apps 專案範本為例,在預設上我們可以看到依開發慣例所提供的 Controllers、DataObjects、Models 目錄規劃,當然您也可以依團隊開發規範建立所需的目錄並撰寫程式碼。

8

當開發完成後要部署至 Azure 時,其部署方式與 Azure Web Apps 是相同的,同樣是直接透過 Visual Studio 2015 遠端發行的方式直接部屬至 Azure App Service 服務上,當發佈成功後透過瀏覽器導覽至 Azure Mobile Apps 服務網址時,您會看到表示成功的歡迎頁面。

9

Mobile Apps 離線儲存

一個使用者體驗良好的行動應用,在開發上需考慮到在連線狀態不良或是離線情況下 App仍可以正常作業,Azure Mobile Client SDK 提供開發人員可以建立離線資料同步處理的機制,當 App 應用程式處於離線模式時,使用者仍然可以建立和修改資料,而這些變更將會儲存於本機存放區。當 App 恢復連線能力時,即可將本機的變更與您的 Azure Mobile Apps 伺服器端應用程式進行資料同步化的處理。
Azure Mobile Apps 除了提供 .NET Client SDK 外,針對 iOS、Android 及跨平台的Xamarin 與 Cordova 均提供 Client SDK,因此我們可以依照 APP 類型選擇使用相對應的Client SDK 來開發 Azure Mobile Apps 使用端的應用。以開發 Windows App 為例,透過Visual Studio 2015 的 NuGet 封裝管理員可以輕鬆的取得 .NET Client SDK 並加入至目前專案參考中,日後若專案所參考的 SDK 版本有發行新版本時,NuGet 封裝管理員介面也會有所通知。

10

在開發過程中,Visual Studio 2015 的程式碼智能感知功能(IntelliSense),可以讓開發人員更容易的了解如何使用 Azure Mobile Apps Client SDK。舉例來說透過MobileServiceClient.SyncContext 物件與 IMobileServiceSyncTable 介面在需要同步處理本機儲存區與伺服器資料時,呼叫 IMobileServiceSyncTable.PullAsync 及 MobileServiceClient.SyncContext.PushAsync 方法,有了程式碼智能感知功能(IntelliSense)的幫忙,可以顯示出該方法所需的參數及功用說明。

11 12

Mobile Apps 使用者驗證

現代化的行動應用整合社群或第三方身分識別是必備基礎的設計,Azure App Service 提供一套現成的解決方案,透過少許的步驟設定,就可以馬上為您的行動應用提供整合社群或第三方的驗證程序,目前 Azure App Service 提供了 Azure Active Directory、Facebook、Google、Twitter 和 Microsoft Account 共5種身份驗證。

13

透過 Azure App Service 來整合身份驗證的優點在於,開發者在撰寫行動應用身份驗證的程式碼邏輯時,藉由 Azure Mobile Apps Client SDK 可以呼叫相同的 API 方法,因此程式碼具有高度的一致性。試想如果您的行動應用程式想同時提供 Facebook、Google、 Microsoft Account 三種身份驗證,可能需要自行針對 Facebook、Google、 Microsoft 三個服務商所提供的 API 來撰寫不同的程式碼,但如果是透過 Azure App Service,以Windows App 為例,就只要呼叫  .LoginAsync(MobileServiceAuthenticationProvider.Facebook)  方法,面對不同服務商只需要調整 MobileServiceAuthenticationProvider 名稱即可,是不是顯得相對的簡潔容易了許多呢。針對開發原生行動應用的開發人員,Azure Mobile Apps Client SDK 除了提供 .NET 的 SDK 版本外,對於 iOS Objective-C & Swift 語言以及 Android Java 語言也有提供相對應開發語言的 SDK 版本。

14

Mobile Apps 推播通知服務

即時的推播通知在行動應用中相當常見,然而不同平台間的推播實作卻是不盡相同,此外推播通知的呈現方式亦不相同,例如在 Windows 平台上有所謂的動態磚,而這些平台間的差異也增加了開發人員在程式開發上的複雜度。透過 Azure App Service 的 Mobile Apps 內建整合 Azure Notification Hubs (Azure 通知中樞) 推播通知服務,可以在 Mobile Apps 伺器端應用程式中將通知傳送至 Azure Notification Hubs 上,再由這個共同的介面服務來自動處理各平台間的推播作業管理,同時也具備了雲端高擴充性可應付數百萬個裝置的需求。目前除了支援 Apple (APNS)、Google (GCM) 、Windows (WNS)、Windows Phone (MPNS) 之外,還增加了Amazon (ADM) 與 Baidu (Android China)。

15

由 Mobile Apps 伺器端應用程式發送推播通知,以 .NET 伺服器端應用程式為例,透過 Visual Studio 2015 的 NuGet 封裝管理員加入 Microsoft.Azure.NotificationHubs 參考。

16

接著在程式碼中開發人員只要呼叫各平台專屬的推播發送方法,並給予推播訊息格式內容的參數,例如針對 Apple (APNS),其推播發送方法為 SendAppleNativeNotificationAsync,Google (GCM) 為 SendGcmNativeNotificationAsync,而 Windows (WNS) 則為 SendWindowsNativeNotificationAsync,就可以輕鬆將推播訊息發送至各平台裝置上。

17

 

18

結語

Visual Studio 2015 針對微軟 Azure 雲端服務的整合性可說是相當的完整,除了原本就有的強大程式碼智能提示、測試與專案套件管理之外,在部署方面提供 Click One 一鍵部署的精靈式作業流程,再加上可以透過擴充套件的輔助,能更有效的幫助團隊在雲端專案上的開發可以更加快速方便。

參考資料:
Azure App Service - 建置智慧型 Web 和行動應用程式
開始使用 Visual Studio 2015 開發吧!