Embed Size (px)
Citation preview
Windows 10Universal Windows Apps開發介紹
蔡孟儒 (Raymond)台灣微軟 DX 資深協理
• 建國中學、輔仁大學應用數學系、交通大學工業工程研究所。 1999年於南加大取得 M.S. Degree in Computer Science 後，留美由一間小新創公司的 Java 軟體工程師開始職涯，後歷任 US. Interactive Inc. 資深工程師、 Sierra Systems 技術主管。
• 2005 年返台並加入台灣微軟，目前擔任「開發體驗暨平台推廣事業部」資深協理；負責最新或未上市的微軟技術，於新創公司及學界的導入及應用。
• 具多年協助大型企業及新創公司導入新一代技術平台之經驗，如 Microsoft Azure 公有雲解決方案、企業搜尋解決方案、企業單一入口及 Windows Apps 、 Kinect 、 Windows 10 等。
關於我
Contoso, Ltd.
8x increase in purchases through carrier billing
Updated ad SDK with video ads and install tracking
Subscriptions
Affiliate referrals
微軟 Windows 10 擴展策略
全球
242 個市場
15 億可升級 Windows
一年內 Windows 10 免費升級(Windows 7/8/8.1 適用 )
Microsoft Office Division | Microsoft Confidential, For Internal Use Only
Microsoft Office Division | Microsoft Confidential, For Internal Use Only
HoloLens
Microsoft Office Division | Microsoft Confidential, For Internal Use OnlyMicrosoft Office Division | Microsoft Confidential, For Internal Use Only
HoloLens is Windows 10 & 3D & IoT
9
Windows 10 開發平台Universal Windows Platform (UWP)
- 從頭到尾寫出你的第一個 Windows 10 App
- 如何取得公共資料平台資料- 發想你們的 Hackathon 題目
今天早上你會學到什麼 ?
C# 程式設計手冊 https://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx
你最好的朋友 : Google 搜尋引擎
暖身題：寫出一個計算 BMI 的程式
1. 啟動 Visual Studio 2015 後，選擇 [ 新增專案 ] 。
2. 在左窗格中， [Visual C#] > [Windows] ，然後選取 [ 通用 ] 。
3. 在中央窗格，選取 [ 空白應用程式 (Windows 通用 )] 範本。可以建立能夠編譯、執行的最基本 UWP 應用程式，但不包含使用者介面控制項或資料。
4. 在 [ 名稱 ] 文字方塊中，輸入 您的專案名稱 (optional) 。
5. 按一下 [ 確定 ] 來建立專案。 Visual Studio 會建立您的專案，然後在 [ 方案總管 ] 中顯示。
在 Visual Studio 中建立新專案
MainPage.xaml 是預設的起始頁面
在 MainPage.xaml 檔案中定義應用程式的 UI 。您可以使用 XAML 標記直接新增元素，或是使用 Visual Studio 提供的設計工具。
MainPage.xaml.cs 是 MainPage.xaml 的程式碼後置頁面。其正是您新增應用程式邏輯和事件處理常式的位置。
左側「工具箱」中 - 所有 UI 控制項
由工具箱中拖拉 UI 控制項到 MainPage.xaml 設計頁面中
TextBlock
TextBox
TextBoxButton
TextBlock
有三種方式讓你編輯 UIXAML 設計頁面
XAML 程式碼屬性
以 x:Name 幫控制項取個名字
Ctrl-Shift-B: Compile
F5- 開始偵錯
跑跑看吧 ! (Compile & Run)
你可以透過各種模擬方式作測試
( 你知道 BMI 怎麼算嗎 ? 請 Google 搜尋 )
雙擊 Button 控制項，然後貼入以下程式碼 :
來寫程式吧 !
double fBMI;double fHeight;double fWeight;fHeight = Convert.ToDouble(textHeight.Text.ToString());fWeight = Convert.ToDouble(textWeight.Text.ToString());
fBMI = fWeight / (fHeight * fHeight);
textBMI.Text = fBMI.ToString();
Tips: 請經常 Ctrl-Shift-B (Compile) 及 F5 作測試
設定中斷點 (Break point)
按 F5 後，以 F10 逐行執行，監看各變數值的變化。
如何 Debug
有人找到 bug 嗎 ?
We have another way to do this:
Fix the bug
fBMI = fWeight / ((fHeight * fHeight) /10000);
fBMI = fWeight / Math.Pow(fHeight / 100, 2);
如果使用者亂填怎麼辦 ? Try-Catch 的使用try{ double fBMI; double fHeight; double fWeight; fHeight = Convert.ToDouble(textHeight.Text.ToString()); fWeight = Convert.ToDouble(textWeight.Text.ToString());
//fBMI = fWeight / ((fHeight * fHeight) /10000);
fBMI = fWeight / Math.Pow(fHeight / 100, 2);
textBMI.Text = fBMI.ToString();}catch(Exception){ await new MessageDialog("請確認輸入的身高體重要是整數或小數 ").ShowAsync();}
暖身完畢：一個計算 BMI 的 App
更多控制項介紹WebViewImageMediaElement
WebView: 可以裝載 (host) 應用程式中的 HTML 內容。
Image: 可以呈現圖片
內建影片控制項 (播放、停止、暫停、音量 )
- AreTransportControlsEnabled="True"
全螢幕
- IsFullWindow="True"
自動播放
- AutoPlay
MediaElement: 播放影片或音效於專案內，或是在網路上
休息一下
進階題：取得公共資料平台資料
政府資料開放平台 - 以 Data.Taipei 為例
資料提供方式 (PDF, XML, Excel, JSON)
• JSON（ JavaScript Object Notation）是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。
• 儘管 JSON 是 Javascript的一個子集，但 JSON 是獨立於語言的文字格式，並且採用了類似於 C語言家族的一些習慣。
• JSON 最開始被廣泛的應用於 WEB 應用的開發，隨著Web2.0 的方興未艾， JSON 在 WEB 資料傳輸領域占有重要的地位。
What’s JSON? Why JSON?
台北市政府資料開放平台 - 「 OK認證-游泳場所業」http://data.taipei.gov.tw/opendata/apply/NewDataContent?oid=7BB7304F-2DCB-483E-B3B3-7A4838E585E3
App 目的 :使用台北市政府資料開放平台提供的合格游泳池場所 JSON 資料；顯示選擇場所的附近地圖 ;進而取得由所在位置出發的路線規劃。
在 MainPage.xaml.cs 中宣告我們需要的各項變數 :
開始 Coding!
JsonValue jsonValue;
public string[] listArray;public string[] telArray;public string[] addrArray;
string strSelectedList = "";string strSelectedAddress = "";string strSelectedTel = "";
Geolocator geo = null;string strDirFlg = "r";
Tips: 利用開發工具提示直接修復問題
實作一個取得 JSON 資料的方法 (method) private async Task GetJSON() { string strURI = "http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz";
var http = new HttpClient(); http.MaxResponseContentBufferSize = Int32.MaxValue; var response = await http.GetStringAsync(strURI);
jsonValue = JsonValue.Parse(response.ToString()); int arraySize = jsonValue.GetArray().Count;
this.listArray = new string[arraySize]; this.telArray = new string[arraySize]; this.addrArray = new string[arraySize];
for (int i = 0; i < arraySize; i++) { IJsonValue element = jsonValue.GetArray()[i]; string strName = element.GetObject().GetNamedString("name"); listArray[i] = strName; string strTel = element.GetObject().GetNamedString("tel"); telArray[i] = strTel; string strAddr = element.GetObject().GetNamedString("poi_addr"); addrArray[i] = strAddr; } }
根據 JSON 資料結構的不同，要取得裡面資料的方式就會不同。
新增一個 ListBox 控制項 (準備列出所有游泳池名稱 )
在 MainPage.xaml.cs 中，新增一個 OnNavigatedTo 方法 protected async override void OnNavigatedTo(NavigationEventArgs e) { await GetJSON(); for (int i = 0; i < listArray.Length; i++) { listBox1.Items.Add(listArray[i].ToString()); } }
練習：使用中斷點+F5+F10觀看變數
顯示選擇場所的附近地圖
指定其名稱為 webView
新增一個 WebView 控制項 (準備呈現使用者點選的游泳池地圖 )
什麼是事件 (event)? 使用者與你的 App 互動後，你的程式要如何因應 ?
在 ListBox 新增一個 Tapped 的事件 (event)
實作如何處理 tapped 事件 strSelectedList = listBox1.SelectedValue.ToString(); strSelectedAddress = addrArray[listBox1.SelectedIndex].ToString(); strSelectedTel = telArray[listBox1.SelectedIndex].ToString();
webView.Source = new Uri(Uri.EscapeUriString("https://maps.google.com/?q=" + strSelectedAddress));
取得由所在位置出發的路線規劃
新增一個 Button 及三個 RadioButton
<Button Content="路線規劃 ( 從目前位置 )" HorizontalAlignment="Left" Margin="505,557,0,0" VerticalAlignment="Top" Click="Button_Click_1" Width="333"/><RadioButton Content=" 開車 " GroupName="group1" HorizontalAlignment="Left" Margin="380,528,0,0" VerticalAlignment="Top" IsChecked="true" Checked="RadioButton_Checked_1"/><RadioButton Content=" 大眾運輸 " GroupName="group1" HorizontalAlignment="Left" Margin="380,599,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_2"/><RadioButton Content="步行 " GroupName="group1" HorizontalAlignment="Left" Margin="380,563,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_3"/>
實作「路線規劃」 Button if (strSelectedAddress.Length > 0) { if (geo == null) { geo = new Geolocator(); } try { Geoposition pos = await geo.GetGeopositionAsync(); string strSADDR = pos.Coordinate.Point.Position.Latitude.ToString() + "," + pos.Coordinate.Point.Position.Longitude.ToString(); webView.Source = new Uri(Uri.EscapeUriString("https://maps.google.com/?num=1&saddr=" + strSADDR + "&q=" + strSelectedAddress + "&dirflg=" + strDirFlg)); } catch (Exception) { await new Windows.UI.Popups.MessageDialog(" 您的機器沒有定位服務 (GPS) 或目前服務是關閉的，請透過「設定」快速鍵重新開啟。 \nYour location services are currently turned off. Use the Settings charm to turn them back on.").ShowAsync(); } }
實作三個 RadioButton private void RadioButton_Checked_1(object sender, RoutedEventArgs e) { strDirFlg = "d"; }
private void RadioButton_Checked_2(object sender, RoutedEventArgs e) { strDirFlg = "r"; }
private void RadioButton_Checked_3(object sender, RoutedEventArgs e) { strDirFlg = "w"; }
Package.appxmanifest -> 功能 -> 位置
打開你的 App 存取「位置」狀態的權限
最後完成圖
Let’s get our hands dirty!
如果我要用不同的公開資料，程式會一樣嗎 ?
台北市 OK認證游泳業http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz private async Task GetJSON() { string strURI = "http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz";
var http = new HttpClient(); http.MaxResponseContentBufferSize = Int32.MaxValue; var response = await http.GetStringAsync(strURI);
jsonValue = JsonValue.Parse(response.ToString()); int arraySize = jsonValue.GetArray().Count;
this.listArray = new string[arraySize]; this.telArray = new string[arraySize]; this.addrArray = new string[arraySize];
for (int i = 0; i < arraySize; i++) { IJsonValue element = jsonValue.GetArray()[i]; string strName = element.GetObject().GetNamedString("name"); listArray[i] = strName; string strTel = element.GetObject().GetNamedString("tel"); telArray[i] = strTel; string strAddr = element.GetObject().GetNamedString("poi_addr"); addrArray[i] = strAddr; } }
根據 JSON 資料結構的不同，要取得裡面資料的方式就會不同。
台北市今日施工資訊http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=201d8ae8-dffc-4d17-ae1f-e58d8a95b162
//string strURI = "http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz"; string strURI = "http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=201d8ae8-dffc-4d17-ae1f-e58d8a95b162";
var http = new HttpClient(); http.MaxResponseContentBufferSize = Int32.MaxValue; var response = await http.GetStringAsync(strURI);
JsonObject jsonObject = JsonObject.Parse(response.ToString()); int arraySize = jsonObject.GetNamedObject("result").GetNamedArray("results").Count;
//jsonValue = JsonValue.Parse(response.ToString()); //int arraySize = jsonValue.GetArray().Count;
根據 JSON 資料結構的不同，要取得裡面資料的方式就會不同。
http://data.gov.tw
為你的 App 設計 Logo (無關 Coding)
執行後點選 Universal ，拉入圖片，按下” Create Icons”
下載 : http://bit.ly/storelogomaker (作者是日本微軟的員工 )
將Windows 8.1 及 Windows Phone 8.1 資料夾中， scale 100 的圖片全選後，拉入 Assets 資料夾中
至 Package.appxmanifest 中檢查
- 從頭到尾寫出你的第一個 Windows 10 App1. BMI 計算器2. WebView, Image, MediaElement 控制項
- 如何取得公共資料平台資料1. 爬梳 JSON 格式資料2. 取得所在位置 Geolocation3. 活用 WebView ( 以 Google Map 為例 )
今天早上你學到什麼 ?
休息一下
你在 Azure 上有建立網站了嗎 ?如何將網站快速轉為 App?
Native vs Hybrid vs Web? It’s all about balance
Web Hybrid Native App
技術困難度 低 低 高效能 慢 中 ->快速 快速支援原生功能 無 可
(各平台 API支援度不同 )
可
上架市集 無 可 可離線 無 可 可跨平台 可 可 無
Web .NET & Win32Android
Java/C++iOS
Objective C
1 BillionWindows 10 Devices
Windows StoreUniversal Windows Platform
• 現代網站通常已經採用 Responsive Web Design ( 響應式網頁設計 ) ，可以同時支援大螢幕 (PC 、筆電、平板瀏覽模式 ) ，加上 HTML5 規範裡也有包含 Offline Storage 、 Index DB 等離線資料處理技術，現代網站能達到的功能已經跟 App 越來越接近。
• Project Westminster 專案就是讓網頁開發者可以極快速地將網站變成一個 App ，進而還能發佈到Windows 市集，並且充分運用 Windows 10 平台的系統功能。
造橋計劃 (Project Westminster)
「極快速」將網站轉為 Windows 10 App以比爾蓋茲網站為例 : http://www.gatesnotes.com/
步驟一：在 Visual Studio 中建立新 JavaScript 專案
1. 將起始頁改為 : http://www.gatesnotes.com
2. 在「內容 URI 」中加入 http://www.gatesnotes.com並將 WinRT存取設爲「全部」 :
步驟二：打開 Package.appxmanefist
沒有第三步…完成了 !
- 從頭到尾寫出你的第一個 Windows 10 App1. BMI 計算器2. WebView, Image, MediaElement 控制項
- 如何取得公共資料平台資料1. 爬梳 JSON 格式資料2. 取得所在位置 Geolocation3. 活用 WebView ( 以 Google Map 為例 )
- 如何將網站轉為 App
- 發想你們的小黑客松專案
今天早上你學到什麼 ?
最困難的，不是 coding…
而是創意
再加上永遠可以更好的使用者經驗 (UX)
© 2015 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.
THANK YOU!
Universal Windows PlatformWherever your code was born, you can bring it to Windows
Universal Windows Platform (UWP)
