Share via


從現代化診所的例子看微軟的開發及雲端技術: (4) 跨平台開發 Android 以及 iOS 應用程式:使用 Xamarin 或 Apache Cordova 技術

想瞭解有關使用 .NET 技術開發原生應用程式,請看上集:從現代化診所的例子看微軟的開發及雲端技術: (3) 

系統架構

整個 HealthClinic.biz 的設計架構如圖所示:

整個系統後端由 ASP.NET Core 技術處理 Web 以及資料庫的操作,並且部署至 Microsoft Azure 雲端平台;而各個 client 端應用程式搭配不同的使用情境,但都是呼叫系統後端提供的 API 來存取資料。

目錄

這系列會分成 5 個部份來介紹這個範例所展示出來的開發技術

  1. ASP.NET Core 跨平台的 Web 開發及運行技術
  2. 從 Node 應用程式看 TypeScript 以及 Visual Studio 與現代開發工具的整合
  3. 使用 .NET 技術開發原生應用程式:傳統桌面應用程式、Universal Windows Apps
  4. 跨平台開發 Android 以及 iOS 應用程式:使用 Xamarin 或 Apache Cordova 技術
  5. 資料處理應用程式

專案角色

在第三部份的文章中,我們介紹了這個範例專案使用通用 Windows 應用程式(UWP app)來製作病患使用的應用程式,但是這個診所的病患不可能只用 Windows 裝置,所以也要想辦法開發適用於 Android 以及 iOS 的應用程式,而為了讓這個為病患使用情境所設計的程式碼能重複運用,通用 Windows 應用程式是用 .NET 開發的,所以在這個範例中選用 Xamarin 技術 ,簡單地說,使用 Xamarin 技術可以用 .NET/C# 來撰寫應用程式並且編譯成 Android 或是 iOS 的應用程式,如此一來,就能夠把病患使用應用程式的程式邏輯(不包含使用者介面)設計成共用的 .NET 函式庫,共用在三個平台的應用程式中。

值得一提的是,Microsoft 前幾天確認收購 Xamarin 公司,未來可望有更深入的整合。

圖:Xamain 技術架構

像這樣跨平台應用程式開發,在這個範例中也有另外一種情境使用另外一個技術來做示範,那就是醫生所使用的應用程式(架構圖中的左下角)。在這個範例中是使用 Apache Cordova 的技術 ,讓開發人員可以一次就用 JavaScript/HTML5 寫出用於 Windows/iOS/Android 的應用程式,而有別於 Xamarin 的部份,除了使用的程式語言不同之外,用 Xamarin 開發 Android 及 iOS 的專案是分開且獨立的,而 Apache Cordova 則是一個專案根據需要建置出不同平台的應用程式。所以如果想要進行跨平台開發的規劃,可以評估開發團隊是對於 C#/.NET 的掌握度高還是比較熟悉 JavaScript/HTML5 的技術,以此來決定要選擇 Xamarin 還是 Apache Cordova。

圖: Apache Cordova 的技術架構

使用 Xamarin 開發的病患應用程式

在 HealthClinic.biz 的專案目錄中開啟 04_Demos_NativeXamarinApps.sln 就可以開啟這個範例中用 Xamarin 開發的相關專案,您可以看到:

  • MyHealth.Client.Core: 在第三部份介紹過,這個專案是使用 .NET 撰寫的可攜式類別函式庫(portable class library),這個可攜式類別函式庫除了能讓 Windows 應用程式使用之外,因為 Xamarin 的技術也是基於 .NET,所以也能使用這個函式庫。
  • MyHealth.Client.Droid: 使用 Xamarin 技術所開發的原生 Anroid 應用程式,雖然是用 C#/.NET 寫的程式碼,但 Xamarin 的技術就會將它編譯成 Android 原生的程式碼,所以跟直接使用 Android SDK 開發出來的應用程式是相同的,當然也可以部署至您原本(如果有的話)的 Android 環境。
  • MyHealth.Client.iOS: 使用 Xamarin 技術所開發的原生 iOS 應用程式,不過與 Xamarin 處理 Android 應用程式的方式略有不同 —— 在建置 iOS 應用程式時需要運用一台 Mac 電腦來協助編譯建置的工作,您可以在 Visual Studio 中寫程式,或是在程式執行起來時在 Visual Studio 中除錯,但就是在編譯時,需要透過網路連接到另外一台 Mac 電腦來完成編譯與建置。
  • MyHealth.Client.iOSWatchKitApp, MyHealth.Client.iOSWatchKitExtension: 使用 Xamarin 技術所開發的 iOS 手錶應用程式,同上。

從專案的結構便可以看出使用 Xamarin 技術 1) 可以共用 .NET 的可攜式類別函式庫  2) Android 與 iOS 是不同的專案

圖:在 Visual Studio 中使用 C# 寫 Android 應用程式,並且用 Visual Studio Emulator for Android 來測試

使用 Apache Cordova 開發的醫生應用程式

Apache Cordova 是一個開源專案,是從 PhoneGap 專案演化而來的,而 Microsoft 的角色就是在 Visual Studio 中整合 Apache Cordova 專案的相關建置、安裝 plugin 等工作,甚至也將這些整合的技術衍生出另一個開源專案:TACO(Tools for Apache Cordova),透過這個專案,即使是從 Visual Studio 中建立的 Apache Cordova 專案,拿到 Mac OSX 下使用 TACO 工具一樣可以繼續工作。而與 Xamarin.iOS 相似,在建置成 iOS 應用程式時也需要將專案傳到 Mac 上建置(如果本來就是在 Mac 上開發的話就直接建置了),這個遠端編譯的技術也是由 TACO 來處理的。

  圖: 使用 Apache Cordova 技術所開發的 Android 應用程式,在 Visual Studio Emulator for Android 上進行測試

而在第二部份中也介紹過 Visual Studio 大量整合現代的前端開發工具,在這個醫生的應用程式中也用了 TypeScript 以及 Angular JS 來開發應用程式的介面,當然也運用了不少前端工具來管理套件以及執行相關打包的工作。

圖:在 Mac 上用 TACO 編譯並執行 Apache Cordova 開發出來的 iOS 應用程式

更多 Xamarin 與 Apache Cordova 專案的展示,可以參考我在 mini Connect() 中的影片(53 分 36 秒開始)。

原始文章發佈於「開發者之魂」部落格