1. 跨平台 Hybrid App 開發簡介 - 使用 Visual Studio Tool for Apache Cordova + HTML/JavaScript
陳葵懋 （Ian）

3. 講師介紹 陳葵懋 （Ian） HTML5 & JavaScript 程式開發實戰 微軟最有價值專家 (ASP.NET)
遠綠資訊科技
資深軟體開發工程師
App 開發愛好者
微軟最有價值專家 (ASP.NET)
2012 ~ 2014
Study4.tw

4. Windows Phone
Android

5. 這堂課會聽到 Multi-Device Hybrid Apps Cordova in Visual Studio 2013
9/9/2017
這堂課會聽到
Multi-Device Hybrid Apps
Cordova in Visual Studio 2013
Some Demos
Azure Mobile Service
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. 行動開發技術慨況 Windows – C#、XAML iOS - Objective-C、 Swift Android - Java
Multi Device
Native
Web
Windows – C#、XAML
iOS - Objective-C、 Swift
Android - Java
Xamarin +
Visual Studio
HTML5
JavaScript
CSS
Responsive Web Design
Mobile Web
Cordova +
Visual Studio

7. Multi-Device Hybrid Apps

8. 如果您希望跨平台開發……..
學習成本 效能 上架
Hybrid App

9. Native vs Hybrid vs Web Native Hybrid Web 技術困難度 高 低 效能 快速 中->快速 慢
支援原生功能 可
可 (各平台API支援度不同) 無
上架市集 離線
跨平台

10. Hybrid App 效能..... UI Render – 依Device本身WebView Engine
外部資源 – 引入外部資源愈多，效能會有所下降
Native API – 依所使用的API不同，也會有影響

11. Cordova in Visual Studio 2013

12. Cordova是….. 2011年10月4日，Adobe收購 PhoneGap開發團隊 PhoneGap中所抽離出來的核心 – 開放原始碼
以JavaScript語言透過擴充Plugin API 訪問行動設備原生功能

13. Cordova是….. 跨平台支援 Windows Phone、 Windows Store、iOS、Android、 Blackberry
以HTML+CSS+JavaScript 實現開發上架Store的原生APP

14. Cordova是….. CSS HTML JavaScript Native WebView Engine
Plugin -> Native API
Native WebView Engine
CSS
HTML
JavaScript

15. WinJS , jQuery Mobile , AngularJS….
HTML & CSS
Front-End Frameworks
WinJS , jQuery Mobile , AngularJS….
使用者介面
JavaScript or
TypeScript
應用邏輯
Camera
Geolocation
File System
行動裝置平台
……..
Azure Mobile Services
Web API
Office 365…..
Services

16. One Project before after iOS Mac - Xcode Visual Studio Android Eclipse
9/9/2017
One Project
before
after
iOS
Mac - Xcode
Visual Studio
Android
Eclipse
Windows Phone (Windows Store)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. Cordova in Visual Studio 2013 開發環境與安裝

18. 目前版本 2014.5 CTP 1.1 - Cordova 3.4.0版本 + Visual Studio 2013 Update 2

19. 支援平台版本 Android 4.0 later (4.4 provides the best developer experience)
iOS 6 and iOS 7
Windows 8 (Windows Store)(相容於 8.1)
Windows Phone 8 (相容於 8.1)
Visual Studio 2013 Update 3 (Professional , Ultimate, or Premium) 
Windows Phone emulators - Hyper-V
iOS Simulator - Mac computer
Windows 7 (以上）

20. iOS , Android SDK
相關語言庫套件
Ripple模擬器

21. 專案路徑不能有空白 專案路徑不能有中文字 開發注意事項
C:\Users\Ian\Documents\Visual Studio \Projects
專案路徑不能有空白
專案路徑不能有中文字

22. Demo Cordova 專案範本及架構 9/9/2017 1.Project template
2. Using merges to Customize Each Platform
3.Plugin 管理 （add/remove/update version )
4.模擬器
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

23. Cordova in Visual Studio 2013 開發與測試

24. Plugin Selected & Build - install the plugins
9/9/2017
Plugin
Selected & Build - install the plugins
UnSelected & Rebuild - remove a plugin
各平台支援度 不同
Add Plugin
Remove Plugin
Update Plugin version (手動更新指定版號)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25. Plugin 目前Cordova官方共有372個Plugin （http://plugins.cordova.io/#/viewAll）
9/9/2017
Plugin
目前Cordova官方共有372個Plugin （
開發者視需求修改專案config.xml加入 所需Plugin
Add Plugin
Remove Plugin
Update Plugin version (手動更新指定版號)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26. Demo 3rd Library - Chart Cordova Camera API Cordova Geo API

27. Run and Test Windows Phone - Windows Phone emulator 、Device
9/9/2017
Run and Test
Windows Phone - Windows Phone emulator 、Device
Windows Store - Local machine、Simulator、Device
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. Run and Test Android - Ripple emulator 、 Android emulator 、 Device
9/9/2017
Run and Test
Android - Ripple emulator 、 Android emulator 、 Device
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

29. Run and Test iOS - Ripple emulator 、 Device (remote)
9/9/2017
Run and Test
iOS - Ripple emulator 、 Device (remote)
Debugging an iOS app from Visual Studio is not currently supported.
Visual Studio deploys the app to the iOS Simulator on your Mac.
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

30. Cordova in Visual Studio 2013 Package Hybrid App

31. Package Windows Phone - Visual Studio support Windows Store Android
9/9/2017
Package
Windows Phone
- Visual Studio support
Windows Store
Android
- 須先行制作.keystore檔
iOS
- Mac
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

32. Azure Mobile Service

33. Azure Mobile Service 快速建立APP後端服務 資料儲存 身份驗證
9/9/2017
Azure Mobile Service
快速建立APP後端服務
資料儲存
身份驗證 推播
REST API
client for Azure Mobile Services /
Mobile Services
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

34. Demo Cordova +Bootstrap + Mobile Service

35. JavaScript | TypeScript
Summary
CSS | HTML
JavaScript | TypeScript
Focus HTML 、 CSS 、JavaScript Skill
One Project Multi Device App
Front-End Framework
Support Native APIs
Black Box

36. 我想試……但環境…….. Azure 會是你的好伙伴 9/9/2017
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

37. MSDN 免費 Azure + Visual Studio Online 權益 開發/測試在雲端 立即啟用 – http://aka
每個月 Azure 免費額度 (NT 1,600 ~ 4,700 元，依 MSDN 版本 Pro、 Premium、Ultimate 不同)
MSDN 獨享 - 從 Azure VM Gallery 中快速建立 VM，也可額外安裝 MSDN 下載的軟體
Visual Studio Online 雲端團隊開發 平台 – 版本管控、工作單及專案管 理、壓力測試、自動化建置
Visual Studio Online 免費使用
3 VM 每天 16 小時
80 VM 20 小時壓力測試 +
100 網站 + 1 個 SQL

38. 最後升級日立即行動 – 請參考 http://aka.ms/net-upgrade
終止支援意味著 – 資安風險及高維護成本
最後升級日立即行動 – 請參考
.NET 3.5 SP1 前 應用程式 (執行於 Windows Server 2003) : 2015/7/14 前
.NET 4.0 ~ 應用程式 : 2016/1/12 前

39. Resources Multi-Device Hybrid Apps (Preview)
9/9/2017
Resources
Multi-Device Hybrid Apps (Preview)
Getting Started with Multi-Device Hybrid Apps Using HTML and JavaScript
Apache Cordova
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.