Cross App Development

Cross-platform App Development

跨平台App開發

常見App開發類型

• Native app (原生)

• Web-based app (網頁)

• Hybrid app (原生+網頁)

Native app (原生) _1/2

針對特定手機平台所編譯出的專用app。

iOS

使用Objective-C、Swift語言在Xcode等IDE上開發app，透過AppStore發佈或企業發佈。

Android

使用Java、Kotlin語言在Eclipse/IntelliJ IDEA/Android Studio等IDE上開發，透過Google Play發佈。

Native app (原生) _2/2

擁有最佳的效能、最多樣性的功能、最佳的使用者介面與體驗(UI/UX)。

若app需要支援多手機平台，需投入較多人力進行開發與維護 (多種開發語言+多種開發環境+多種作業系統版本+上架議題)。

可透過跨平台app開發工具解決部分問題。

Web-based app (網頁)

就是網頁程式(HTML5, CSS, JavaScript)、瀏覽器是載體。

開發速度最快(WORA - write once, run anywhere)、維護最即時(改server端網頁程式)。

效能較差、功能性受限(先天限制+客戶端瀏覽器版本眾多)、使用者體驗相對較差。

可透過Progressive Web Apps (PWA)設計解決部分問題。

Hybrid app (原生+網頁)

Native App中包含Web容器(aka WebView) 。

常見設計方式

(A) Native View與Web View交替使用

將Web容器視為獨立View(Activity)，

需要時再進行Native View、Web View間的切換。

(B) 以Web View為主 

Native code僅用來擴增功能性。

(C) 混和使用

依不同的設計方式，有不同的優缺點。

跨平台app開發

透過跨平台app開發工具，使用同一份CODE(或同一種語言)，編譯出不同平台專用app。

跨平台app開發工具

Xamarin (Microsoft)

Flutter (Google)

React Native (Facebook)

MobileFirst (IBM)

Cordova (Apache)

PhoneGap (Adobe)

...

使用Mac + Xamarin進行跨平台app開發 _1/2

開發環境 (Mac)

*Visual Studio 2019 for Mac (安裝時需勾選 Xamarin相關套件 )

*macOS HighSierra 10.13或以上版本

*Xcode 10.0或以上版本 (for iOS app)

使用Mac + Xamarin進行跨平台app開發 _2/2

多平台(Xamarin.Forms)

共享UI Code (xaml + c# code) / xaml允許Hot reload (熱載入)

指定iOS平台(Xamarin.iOS)

使用C#開發iOS native app / UI可以透過Xcode Interface Builder 或 Visual Studio iOS Designer編輯

指定Android 平台(Xamarin.Android)

使用C#開發Android native app / UI可以透過內建設計工具進行視覺化編輯(或直接修改layout\.xml)

使用Mac + Flutter進行跨平台app開發 _1/2

開發環境 (Mac)

*Android Studio 4.1.1 for Mac (Plugins安裝Flutter & Dart套件)

*macOS Yosemite 10.10或以上版本

*Xcode (for iOS app)

*Flutter SDK

*安裝時若遇到障礙，請關掉防毒軟體試試看....

使用Mac + Flutter進行跨平台app開發 _2/2

使用Dart語言開發

目前無原生UI編輯工具

(可用flutter.app進行線上編輯，產生Dart code)

*編譯時若遇到障礙，請關掉防毒軟體試試看....

Q&A

Multiple Select

Q1. 比起Web-based app ，下列何者不是Native app的優點?

• 較佳的效能

• 較多樣性的功能

• 較佳的使用體驗

• 維護最即時

Multiple Select

Q2.

• AAAA

• BBB

• CCC

• DDD