微软开发平台体验营

微软开发平台体验营企业级行动

App

开发实战多奇数位创意有限公司

行动开发工程师Vulcan

李进兴课程大纲1.使用Xamarin进行跨平台开发2.

跨平台开发需要那些技术3.使用

Azure

Mobile

Apps

开发企业应用程序4.

行动测试与发布工具31.使用Xamarin进行跨平台开发•

Xamarin

开发平台介绍•

如何选择合适的

Xamarin

技术•

需要具备的软硬件需求•

行动开发项目必备功能探讨4为什么我要选择Xamarin

工具来开发企业内部App•

我是

C#

.NET

开发者•想要只使用一个程式语言做出跨平台App•想要只使用一套UI设计做出跨平台App•

具备原生SDK

UI与效能•可以使用所有原生SDK提供的功能•

做到最大程度的共享开发策略5每开发一个平台应用程序都要*安装平台专属SDK*学习原生SDK的程序语言

*学习原生SDK的生命周期*学习UI设计工具*设计商业逻辑跨平台开发上的困境*重复学习*重复做出相同的事情*不易维护在没有Xamarin

之前要开发跨平台原生应用程序6何谓

Xamarin

?使用.NET

C#

进行开发跨平台应用程序•是一个行动专案开发工具包(Toolkit)•

开发出原生

Android/iOS/

UWP

行动用程序•使用

C#

程序语言与所有

.NET

存在的技术•

可以呼叫与执行所有原生API•

具有原生应用程序的执行效能•任何可以使用原生SDK

API做到的功能，您都能够

使用

C#/Xamarin来完成•Xamarin

程序库几乎与原生SDK同时升级•

可以采用共享程序码方式开发7何谓

Xamarin各别产生每个平台的AppiOS应用程序Android应用程序UWP应用程序8•

用来开发出原生

iOS

应用程序•

无须学习

Objective-C

与

Xcode

，就可以开发出

一样UI控制项的

iOS

原生应用程序。•

UI设计方法如何原生SDK一样•可以使用丰富功能的

.NET

基础类别库(BCL)•使用

Visual

Studio/Xamarin

Studio

IDE

开发Xamarin.iOS何谓9何谓Xamarin.Android•

用来开发出原生

iOS

应用程序•无须学习

Java

，就可以开发出一样UI控制项的

Android

原生应用程序。•

UI设计方法如何原生SDK一样•可以使用丰富功能的

.NET

基础类别库(BCL)•使用

Visual

Studio/Xamarin

Studio

IDE

开发10何谓Xamarin.Forms•提供一个跨平台UI工具包(Toolkit)•使用一套UI设计方法，共享于不同平台上•

各平台使用相对应原生UI来呈现•各平台的应用程序皆为原生应用程序•

UI设计使用

XAML•使用

Visual

Studio/Xamarin

Studio

IDE

开发11iOS

C#

UI共享

C#

程序码Android

C#

UI

WindowsC#

UIXamarin.Forms共享

C#

程序码Xamarin

开发平台介绍只需要使用

XAML宣告UI一次每个平台都要刻UI共享商业逻辑Xamarin.iOSXamarin.AndroidXamarin.Forms

采用开发方式采用开发方式12Xamarin

产生原生应用程序方法所以，Xamarin开发出来的应用程序

都是采用原生UI与

APIXamarin.iOS

使用Ahead

of

Time(AOT)技术，将.NET原始码编译成为

Apple

Store

ARM

需要用到ARM

码。Xamarin.Android

使用.NET

Just

InTime(JIT)技术，实时产生Android平台需要用到的执行码。13Xamarin

家族•

Xamarin.iOS–

产生

iOSApp•

Xamarin.Android–

产生

AndroidApp•

Xamarin.Forms–

使用XAML产生跨平台App•

XamarinStudio–

在Mac计算机开发Xamarin•

XamarinforVisual

Studio–

在视窗计算机开发Xamarin•

XamarinTestCloud–透过云端服务，在不同实体装置上进行测试App•HocKeyApp–

开发、散发行动应用程序14如何选择合适的Xamarin工具•

选择

Xamarin.Forms–

资料输入

LOB

类型应用–

需要共享商业逻辑与UI–

共享程序码比起客制UI重要–

不会用到过多专属平台功能•选择

Xamarin.iOS

/

Xamarin.Android–

需要提供专属互动机制–

使用大量原生平台专属API–

具有丰富变化的UI设计–

客制UI比起共享程序码重要多媒体影音

游戏客制地图虚拟/扩增实境导航

表单标签•

其他–

各平台开发者账号(Apple

Developer/Google

Play

Store/WindowsDeveloper)–

社群账号–

Azure

账号–XamarinAccount–XamarinTest

Cloud–

HocKeyApp

•模拟器–

iOS

Simulator–Android

Emulator–Win

10

Mobile

Emulator•

Xamarin

Studio4.2•

Xcode

8.0

•

装置–

iOS手机或平板Android手机或平板–Windows10

或

Windows

手机需要具备的软硬件需求•

Visual

Studio2015

Update3–

Mac

计算机•

软硬件–Windows

计算机16iPhone

SimulatorXamarin

MacAgentiPhone手机Mobile

10手机MacOSXYosemite(10.10)

&

aboveAndroid模拟器Mobile

10模拟器Android手机Xamarin.Forms

开发环境示意图使用Visual

Studio

IDEVisual

Studio

2015XcodeXamarinStudioWindows10MacXamarinMacAgent使用SSH

存取17Android手机Android模拟器iPhone手机iPhone

SimulatorMacOSXYosemite(10.10)

&

aboveXamarin.Forms

开发环境示意图使用Xamarin

Studio

IDEXamarinStudio仅能够在Mac

计算机上执行XcodeXamarinStudio18Mac•

Mac

计算机需求–

作业系统需求：

MacOSXYosemite(10.10)

或以上版本–

需要安装最新版本的

Xcode

与

iOS

SDK•

/devcenter/ios/index.action#do

wnloads–

安装最新版本的

Xamarin

Studio•

http://xa/download•

Windows

计算机需求–

作业系统需求：Windows10

Profession–

需要启动

Hyper-V服务–

安装

Visual

Studio2015计算机软硬件需求

rVi本内前的版Studion

到isu的

Xama如何恢复19行动开发项目必备功能探讨使用者登入与验证

硬件功能存取

数据库存取

UI

自

统计图型讯息推播

平台客制

手势操作

档案存取

系统偏好纪录切图与套版

记录使用者登入Token取得装置ID

不同实体手机测试

Web服务存取导航面板

相依服务注入

Azure行动应用

视觉套版照相与摄影

产生不同平台AppGPS定位地图功能

图片下载

讯息推播

图片上传布署与上架

显示Font

Awesome字体

不同荧幕视觉设计

标签页面社群身分验证

资料清单

Web

API呼叫输入表单

背景执行

UI自动测试MQTT

在线与离线资料播放声音

支援CI

程序码保护

社群分享

多样版面配置页面切换与资料传递

加解密资料

手机与平板动测试播放影片系统效能量测

Pop-up视觉

MVVM启动画面

使用者控制项

讯息中心条形码产生与扫描

万年历控制项抢鲜版散发开发共享CRUD纪录操作

异常回报建立Xamarin专案、执行与除错Demo21练习情境Xamarin.Android原生项目练习OK按钮

标签文字

文字输入盒

显示所输入的文字22练习情境Xamarin.iOS原生项目练习OK按钮

标签文字

文字输入盒

显示所输入的文字23练习情境使用Code

Behind开发方法Xamarin.Forms原生项目练习OK按钮

标签文字

文字输入盒

显示所输入的文字24练习情境使用Prism+MVVM开发方法Xamarin.Forms原生项目练习OK按钮

标签文字

文字输入盒

显示所输入的文字25原生

UWP

项目原生项目与核心PCL

呼叫问题核心

PCL原生

Android项目原生

iOS

项目262.跨平台开发需要那些技术•

C#/XAML/原生SDK•

多荧幕视觉画面设计与套版•

MVVM

框架与其开发方式

(以

Prism

为例)•

行动应用版面配置与UI

控制项•Xamarin.Forms

核心开发技术27如何学习Xamarin

开发程序技术•

C#•

Visual

Studio

IDE•

XAML•

MVVM•

Prism•

各种应用套件与插件•

基本了解

Android

SDK•

基本了解

iOS

SDK28型号尺寸分辨率缩放PPI设计iPhone64.7”750667iPhone6+5.5”1080x19203401360x640iPhone54”640x11362326320x668iPhone5C4”620x11362326310x668iPhone4S3.5”640x9602326320x480HTC

D6104.7”540x9601.5234360x640Sam.G

S45.0”1080x19203441360x640HTC

One4.7”1080x19203469360x640Sam.G

S55.1”1080x19203432360x640Sam.G

Note

II5.5”720x12802267360x640Sam.G

Note5.3800x12802285400x640多荧幕视觉画面设计与套版检测页面是否有跑版的测试结果

29Android

平台量测不同装置的设计尺寸5”

720x1280

项目原始码•

https://gith/vulca

nlee/xamarin-forms-develop-notes-example/tree/master/XF

MeasureScreen30MVVM

框架与其开发方式(以

Prism

为例)•

何谓

Prism•

MVVM

清晰架构31何谓

Prism•

由微软Patterns

&

Practices团队开发(开放原始码)•帮助开发者构建松散耦合、更灵活、更易于维护•是一个以MVVM设计方式为基础开发框架•

Prism使用依赖注入(

Unity),可选择其他产品•具有弹性与可测试的导航页面功能–

使用URI进行深度导航•可取代Xamarin.Forms提供的讯息中心–

非静态，使用弱参考，避免存储器遗失问题http://bit.ly/2k2QYVM32Prism

for

Xamarin.Forms五大

MVVM

开发支援应用•

ViewModelLocator–

自动指定与使用ViewModel•

Navigation

Service–

页面导航/切换服务•

Page

Dialog

Service–

基本讯息对话窗•

DependencyService–

相依性注入服务•

Event

Aggregator–

跨页面、组件之异步讯息通讯机制33使用

Prism来开发Xamarin.FormsDemo34练习情境Prism

项目样板

页面导航

MVVM传入内容

主页面

下一页

回上一页Next

Page输入内容传入内容35MVVM/en-u

.a相关处理spxViewModel只负责s/library/ff798384https://msdn.m/en-us/library/hh848246.aspx/Events/TechEd/NorthAmerica/2011/DPR305ViewModelModelViewView只负责页面要显示的

样貌与内容。不做任何逻辑定义，例如，甚么状态下要显示甚么颜色程序逻辑，并不在乎在哪个

页面与哪个控制项中使用。属性变更通知NotifyPropertyChanged资料系结

Data

BindingMVVM•ViewModel

不会知道被哪View使用•不同View可以使用同个ViewModel•在View的Code

Behind可以取得所使用的

ViewModel–

可以存取ViewModel的属性–

可以呼叫ViewModel的方法•ViewModel可以使用委派方法，执行Code

Behind的程序码38http://bit.ly/2lnpmH3

http://bit.ly/2kGXxuc

http://bit.ly/2kS9NKq数值转换器.NET

PropertyElementAttribute资料系结

Data

Bindinghttp://bit.ly/2ljSzqI要实作INotifyPropertyChanged要继承

BindableObjectDataBinding绑定Target目的XAML

宣告标记档案绑定Sorce来源检视模型C#档案资料系结可以是

单向或双向命令集合资料Converter39行动应用版面配置与UI

控制项页面

Pages内容页面

导航抽屉导航页面标签页面样板页面旋转木马页面行动应用版面配置与UI

控制项版面配置

Layout43行动应用版面配置与UI

控制项控制项

Controls当在不同原生平台执行的时候，会自动对应与显示原生平台的控制项因此，同样的Xamarin.Forms

UI设计，每个平台呈现样貌会有所不同44客制专属平台的控制项视觉ElementRendererNative

Element

UIKit.UIButtonAndroid.Widget.ButtonSystem.Windows.Controls.ButtonXamarin.Forms.ButtonButtonRendererButtonRendererButtonRendererhttp://bit.ly/2k4JMJ245客制专属平台的控制项视觉必学Xamarin.Forms

核心开发技术•

应用程序与页面生命周期•

页面导航•

平台特色–

Device

类别/

定时器•

讯息中心(MessengingCenter)–

Prism

:

事件聚合器

(EventAggregator)•相依性服务注入(DependencyService)•

控制项

Renderer•

绑定属性与附加属性47Xamarin

迷失与看法•

我会C#，就会开发

Xamarin

项目–

MVVM/XAML/原生API•

因为有

.

NET

，所以效能有问题–

真的有需要，那就POC吧–

Xamarin.Forms

在今年将会有效能大幅改善•我需要做到

??

功能，要如何做到呢?–

区分是要在

.NET/XAML/原生项目

内来处理–

寻找适当的套件来简化开发•一套UI设计，真的可以适应所有机种吗–

在

Xamarin.Forms

使用页面设计尺寸48Xamarin

迷失与看法•

我要使用

XAML

或

C#来定义视觉•我要使用Windows

或

Mac

来开发

Xamarn•为什么没有

Checkbox/

Radio

button

控制项•

如何做到页面标题文字要置中•所有画面，在不同平台都要长的一样•Xamarin.Forms真的什么都可以做到吗•为什么一定要有Mac才能开发iOS49Xamarin

迷失与看法•

如何呼叫

Web

API•

我要如何下载网络图片档案•

如何结束程序执行•

如何装置内的其他应用程序•要使用模拟器还是实体机来进行开发•

我该使用

Code

Behind

或者

MVVM

来开发•Xamarin东西这么多，我该如何学习–

做中学、学中做50Xamarin

迷失与看法•

开发Xamarin.Forms的方法选择–

全部使用C#–

XAML+code

behind–

XAML+ViewModel•

了解您的疑惑，准备开始使用

Xamarin

吧513.

使用

Azure

MobileApps

开发企业应用程序•

多方身分验证•

串接网站或内部

API•

离线资料存取•

推播通知服务52什么是行动应用程序？Azure

Mobile

App?离线同步资料存取档案存取平台讯息平台讯息平台讯息通知中心FB验证谷歌验证行动平台53为何选择行动应用程序？•AzureApp

Service

中的「行动应用程序」具有高扩充性且可供全球使用，是專為企業開發人員與系統整合人員設计的行动应用程序开发

平台，能提供一组丰富的功能给行动应用程序开发人员。•

建置原生和跨平台应用程序

-不论您要建置原生

iOS、Android

和

Windows

应用程序或跨平台Xamarin

或

Cordova

(Phonegap)

应用程式，都可以利用採用原生

SDK

的

AppService。•

连接到您的企业系统

-利用行动应用程序，您可以在短短几分钟内新

增公司标志，并连接至企业内部部署或云端资源。•

建置具有资料同步功能的可离线应用程序

-建置可离线运作的应用程

式，并在出现与任何企业资料来源或

SaaSAPI

的连线时，使用MobileApps在背景同步处理资料，让您的行动工作力更具生产力。•

在数秒内推播通知给数百万人

-在任何装置上利用实时推播通知与客

户联系，依照其需求将推播通知个人化并且适时传送。–

PushtoSync/

Pushto

Refresh54Azure

行动应用程序功能•

资料存取–

提供了已连结至

SQLAzure或内部部署

SQLServer且适合行动用途的

ODatav3

资料来源•

离线同步处理–

可与后端资料自动同步处理的离线资料集运作

(包括冲突解决支援)。•

验证和授权–

适用于企业验证的

AzureActive

Directory、

Facebook、Google、

Twitter和

Microsoft

账户等社交提供者)清单中选取。•

推播通知–

与

Azure通知中枢的注册功能紧密整合，可让您将推播通知同时传送给数百万个使用者。•

用户端

SDK–

提供一组完整的用户端

SDK，涵盖原生开发

(iOS、Android和Windows)、跨平台开发

(适用于

iOS和

Android

的

Xamarin、Xamarin

Forms)和混合式应用程序开发

(ApacheCordova)。55建立Azure

行动应用服务•

建立行动应用服务

–

+

新增–

Web

+

行动–

MobileApp•

建立后端数据库–

快速入门–

Xamarin.Forms–

连结数据库–

SQL

Database56建立Azure行动应用服务Azure仪表板>+

新增>Web+

行动>

MobileApp57建立后端资料存取来源58串接网站或内部API•连结至

SQL

Azure

或内部部署

SQL

Server

且适

合行动用途的

OData

v3资料来源59建立新的数据库资料表•

启用

Code

First

Migration

功能–

依据项目内的资料模型–

进行自动调整远端数据库内的纲要•

建立资料传输物件

(DTO)

类别–

继承

EntityData•建立

Azure

行动应用程序资料表控制器•

本地端执行与测试•

发布到

Azure

上60在现有项目中使用Azure

行动应用上的资料表•

所有项目都安装–

Microsoft.Azure.Mobile.Client

套件•

宣告与定义

MobileServiceClient•使用

IMobileServiceTable

取得远端资料表–

MobileServiceClient.GetTable

<BusinessTripExpense>()•Azure

数据库上的资料表

CRUD

操作–

查询

差旅费用Table.OrderByDescending(x

=>x.

出差

日期).ToListAsync();–

新增

InsertAsync–

修改

UpdateAsync–

删除

DeleteAsync61离线资料存取•

当您的应用程序处于离线模式时，您仍然可以建

立和修改资料，所做的变更会储存至本机存放区。•当应用程序回到在线时，即可将本机变更与您的

Azure

行动应用程序后端同步处理。62在现有项目中使用Azure

行动应用上的离线资料表•

所有项目都安装–

Microsoft.Azure.Mobile.Client.SQLiteStore

套件•

进行离线数据库初始化–store

=

new

MobileServiceSQLiteStore(offlineDbPath);–MobileServiceClient.SyncContext.InitializeAsync(store)•使用

IMobileServiceSyncTable

取得离线资料表–

请假纪录Table

=GetSyncTable

<LeaveRecord>();•Azure

数据库上的资料表

CRUD

操作

–

同步await

MobileServiceClient.SyncContext.PushAsync();63多方身分验证•适用于企业验证的

Azure

Active

Directory•

社群身分验证–

Facebook、Google、Twitter

和

Microsoft•

使用「服务器流程」进行验证–

不使用提供者

SDK进行验证的运作方式64身分验证设定后台•

申请社群

OAuth2

认证–

Facebookfor

Developers•https://developers.–

GoogleAPI

Console•

https://console.developers./?hl=zh-tw•

Azure

行动应用绑定•

后台控制项加入

[Authorize]65加入Azure

行动应用的身分验证行动应用程序>验证/授权66身分验证设定Xamarin.Forms•

定义

IAuthenticate

界面•

各原生平台实作

Iauthenticate•

登入–

MobileServiceClient.LoginAsync67推播通知服务•Azure

通知中枢提供一种易用、多平台、向外延

展的推播基础结构•可让您将行动推播通知从任何后端

(在云端或内部

部署)传送到任何行动平台。68所有平台都使用类似推播讯息架构69为什么要使用

Azure

通知中枢70建立Azure行动应用的通知中枢714.

行动测试与发布工具•Xamarin

Test

Recorder

录制

UI

测试脚本•

本地端

UI

自动化测试•Xamarin

Test

Cloud

(测试云)

进行实机测试•

HockeyApp

布署行动应用、收集意见回应与损毁

报告72建立可用于UI自动测试项目•

加入

UITestApp

(Xamarin.UI.Test

|Cross-Platform)

项目•

修改

AppInitializer

的

StartApp–

使用

ApkFile

指定

AndroidApp档案来源•Archive

Android

项目

(请在

Release

模式下)•

将

.apk

档案复制到指定路径内•

显示测试总管视窗•

执行要测试的工作73XamarinTest

Recorder录制

UI

测试脚本•

将您操作App的过程，录制成为

UITest

脚本•

请安装

Xamarin

Test

Recoder

扩充功能–

https://www.xamarin.com/test-cloud/recorder74XamarinTest

Recorder

录制

UI

测试脚本•安装扩充功能–amarin

Test

Recorder

2015•在

TestFixture

启动UI操作测试纪录指令75/test-cloud/recorderhttps://visualstudiogallery.msd/f9171f80-291e-480c-8003-8bf5c575f2dc•在新测试方法内，选择适当操作/guides/testcloud/uitest/working-with/repl//api/type/Xamarin.UITest.IApp//guides/testcloud/uitest/intro-to-uitest/Read-Eval-Print-Loop

读取-评估-打印-循环UITest

的

REPL76UITest

的

REPL

命令•

查看整个页面的物件–

tree•

在控制项中输入文字–

app.EnterText(c

=>c.Marked("enyAccount"),

"Vulcan")•

点击控制项–

app.Tap(c

=>c.Marked("btnLoginCommand"))•

荧幕截图–

app.Screenshot("账号与密码输入错误")•

更多指令–

/api/type/Xamarin.UIT

est.IApp/77本地端

UI

自动化测试•

透过测试脚本，进行App

UI测试•

批次进行不同手机、作业系统版本、不同荧幕大小测试•

透过UI测试过程，试图找出–

荧幕画面是否有跑版–

在不同硬件规格下，所发生的各种不同状况–

找出那些厂牌/规格手机会有异常问题78本地端

UI

自动化测试•设定原生项目的

Archive

并产生可布署档案–

切换为

Release，并修改项目属性•

建立

UITest

项目•

修正

UITest

项目•

开始进行

UITest

的

REPL–

app.Repl();•

使用测试总管来进行测试•

查看测试结果与截图http://bit.ly/2kRsw9d79XamarinTest

Cloud

(测试云)

进行实机测试•

在远端实体手机上进行UI测试–

可选择不同作业系统

Android/iOS–

不同作业系统版本–

不同手机厂牌与型号•

可以自订执行

Script•

完整性报告可以检视测试结果•

提交到测试云–

将

Android

项目加入到

UITest参考内–

鼠标右击

UITest

项目

>

Run

InTestCloud测试云实作说明http://bit.ly/2kRjZT