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

  • Article

想瞭解有關使用 .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 秒開始）。

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