PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

徵守松
5 years ago
Views:

1 Let's talk about Office Apps 董大偉技術總監微軟最有價值專家 (MVP) 台灣微軟 MSDN 講座講師

2 講員 : 董大偉 David@isRock.com.tw 技術總監集英信誠資深顧問斯歌科技 (K2) 資深顧問微軟最有價值專家 (MVP) 台灣微軟 MSDN 講座資深講師 Windows Phone / Silverlight / Visual Studio 上市發表會巡迴講座講師台灣微軟 TechED, TechDays 2007~2014 講師 China TechED 2013 講師

4 Office VBA Office 365 Office 365 API App for Office 啊? Office Add-Ins SharePoint Add-Ins

5 過去你的 Office 是運行在 Windows 上的可以透過 VBA 來客製化你的 Office

6 現在你的 Office 是運行在 Windows 上的你的 Office 也運行在平板 (ipad, Android, Windows) 手機 (iphone, Android, Windows) 網頁 (Office Web, Office 365) PC(Windows, MAC) 而且還免費

7 因此, 你需要在跨平台的狀況下客製化你的 Office, 或提供用戶擴充功能與服務器端的 Office 365 溝通或整合 ( 存取 O365 資訊 ) 在 Office 365(SharePoint) 中建立 Apps 佈署與管理你的 Office Apps

8 現在, 你可以將你的應用 (Apps) 上架到 Office Store, 給全球運行於各種平台上的 Office 用戶, 下載 ( 付費購買或免費 ) 使用發佈到組織內的 App 目錄, 供企業內部的用戶使用

9 透過這技術, 可以達成以用戶熟悉的工具, 開發或整合企業內應用幫助用戶建立文件 ( 範本小工具 ) 幫助用戶確認文件 ( 檢核 ) 提高生產力

10 典型情境 Translation wizard Chart creation Third-party service integration Rich mash-ups Spec validation Kicking off work flows Order details surfaced in context

12 有哪幾種 Office Apps Task Pane app Content app Mail app 正名為 Office Add-ins

13 有哪幾種 SharePoint Apps SharePoint-Hosted App Provider-Hosted App 正名為 SharePoint Add-ins

14 Task Pane apps 出現在文件右方窗格提供 UI 互動提供查找資訊 ( 透過 WS) 檢查文件建立版型

15 Content apps 內崁在文件當中可加強文件內容可透過 WS 整合外部資訊 ( 圖表影片遠端資料庫 ) 可提供 UI 與用戶互動

16 Mail apps 功能強大, 可提供 UI 在用戶檢視或撰寫 / Appointment 時, 與用戶互動協助完成信件提供範本資訊連結外部系統擴充系統功能

17 改名叫 Office Add-ins App for Office 結構

18 App for Office 結構發佈至 : Office Store Internal SharePoint Site Shared network location 可發佈至任何 WebSite ( 需要支援 https)

19 有哪些開發方式? VS2013 Napa

20 有哪些開發方式? VS2013 Napa

21 佈署與上架位置 Office Store( 公開上架 ) Apps for Office catalog on SharePoint Exchange catalog Network shared folder app catalog 直接上傳使用

22 開發前準備安裝 Office Developer Tools for Visual Studio 2013 申請 Office 365 Developer Subscription free 30-day trial Office 365 Developer account ($99.0/y)

25 Task Pane apps 出現在文件右方窗格提供 UI 互動提供查找資訊 ( 透過 WS) 檢查文件建立版型

26 建立新 App 進入 Napa Add New Project 選擇 Task App

27 建立新 App 進入 Napa Add New Project 選擇 Task App

28 建立新 Task Pane App(Add-ins)

29 接下來的 Demo 使用 Napa 建立第一個 Office App 透過 NAPA 執行應用程式架構說明下載程式碼到 VS 透過 VS 執行不要急, 先看完 slide 再做...

30 進入 NAPA 用 Live ID 登入

31 進入 NAPA 莫急莫慌莫害怕, 放心按下去

32 進入 NAPA Source Code 儲存在這裡

33 進入 NAPA - App.js 沒啥特別, 不過就是建立個 NotificationBox

34 進入 NAPA Home.html 主頁面進入點注意引入的 js 主頁面邏輯

35 進入 NAPA manifest.xml 從這邊設定主頁面進入點 ( 重要 )

36 進入 NAPA manifest.xml 測試環境

37 進入 NAPA Home.html 就他主頁面進入點就一個按鈕注意 https

38 進入 NAPA Home.js 主頁面邏輯 Hook 按鈕的 Click 事件注意非同步取得選取範圍資料

39 Run 看看 Upload 到? Run 看看

40 Run 看看

41 Run 看看選擇在 Excel Online 中編輯

42 Run 看看

44 Demo 使用 Napa 建立第一個 Office App 透過 NAPA 執行應用程式架構說明下載程式碼到 VS 透過 VS 執行 OK, 來做做看

46 Content apps 內崁在文件當中可加強文件內容可透過 WS 整合外部資訊 ( 圖表影片遠端資料庫 ) 可提供 UI 與用戶互動

47 建立新 App 進入 Napa Add New Project 選擇 Content App

48 建立新 App 進入 Napa Add New Project 選擇 Content App

49 建立新 Content App

50 App 架構說明其實都一樣

51 Demo 股價查詢 Content App C:\TFS\StockCheck

52 Demo 透過 Napa 建立 Basic Content App 透過 http get 查詢股票建立 Cell Binding 不要急, 先看完 slide 再做...

53 首頁 -body <table> <tr> <td> <button id="get-text" style="width: 100px;"> 取得儲存格 </button> </td> <td> <button id="bind-text" style="width: 100px;"> 綁定儲存格 </button> </td> </tr> <tr> <td> <input id="input" style="width: 100px;" /> </td> <td> <button id="add-text" style="width: 100px;"> 設定儲存格 </button> </td> </tr> </table>

54 首頁 -body <h1><div id="stock-name"></div></h1> <table border="true"> <tr> <td> <table> <tr> <td>prev close:</td> <td id="prev-close"></td> </tr> <tr> <td>open:</td> <td id="open"></td> </tr> <tr> <td>bid:</td> <td id="bid"></td> </tr> <tr> <td>ask:</td> <td id="ask"></td> </tr> <tr> <td>1y Target Est:</td> <td id="target-est"></td> </tr> <tr> <td>days range:</td> <td id="days-range"></td> </tr> </table> </td> <td> <table> <tr> <td>volume:</td> <td id="volume"></td> </tr> <tr> <td>avg daily volume:</td> <td id="avg-volume"></td> </tr> <tr> <td>market capitalization:</td> <td id="market-cap"></td> </tr> <tr> <td>pe Ratio:</td> <td id="pe-ratio"></td> </tr> <tr> <td>earnings p share:</td> <td id="earnings"></td> </tr> <tr> <td>dividend yield:</td> <td id="yield"></td> </tr> </table> </td> </tr> </table>

首頁 -initialize (function () { 'use strict'; // The initialize function must be run each time a new page is loaded Office.initialize = function (reason) { $(document).

55 首頁 -initialize (function () { 'use strict'; // The initialize function must be run each time a new page is loaded Office.initialize = function (reason) { $(document).ready(function () { //hook 事件 $('#get-text').click(gettextfromdocument); $('#add-text').click(settexttodocument); $('#bind-text').click(addbindingfromselection); //addhandlerasync 選取時的行為 Office.context.document.addHandlerAsync(Office.EventType.DocumentSel ectionchanged, updateapp); }); } })(); 來看比較特別的這你剛才都看過了

首頁 -Binding // 建立繫結 function addbindingfromselection() 物件 { // 設定綁定 - 從選取區 Office.context.document.bindings.addFromSelectionAsync( Office.BindingType.

56 首頁 -Binding // 建立繫結 function addbindingfromselection() 物件 { // 設定綁定 - 從選取區 Office.context.document.bindings.addFromSelectionAsync( Office.BindingType.Text, { id: 'MyBinding' }, // 設定綁定 id } ); 注意 Binding function (asyncresult) { // 如果設定成功 // 取得自訂的綁定 id, // 對其 Hook BindingDataChanged 的事件處理常式 Office.select("bindings#MyBinding").addHandlerAsync (Office.EventType.BindingDataChanged, onbindingdatachanged); } 取得特定 ID 的 Binding 對選取區建立 Binding 自訂 ID

57 首頁 -Binding // 當繫結對象資料改變時... function onbindingdatachanged(eventargs) { 取得資料 // 取得繫結對象的資料 Office.select("bindings#MyBinding").getDataAsync (function (asyncresult) { if (asyncresult.value!== "") { // 更新股價資訊 showstockdata(asyncresult.value); } }); 顯示股價 }

$quotes where symbol in (\'' + symbol + '\')'; // 注意 https restful query var queryurl = 'https://query.yahooapis.com/v1/public/yql?q=' + yql + '&format=json&env=http%3a%2f%2fdatatables.org%2falltables.$

58 首頁 - 透過 http get 抓取股價 // 顯示股價資訊 function showstockdata(symbol) { // Yahoo YQL - var yql = 'select * from yahoo.finance.quotes where symbol in (\'' + symbol + '\')'; // 注意 https restful query var queryurl = ' + yql + '&format=json&env=http%3a%2f%2fdatatables.org%2falltables.env&callback=?'; // 取回 JSON $.getjson(queryurl, function (results) { if (results.query.count > 0) { } } }); 注意呼叫的是 var quotes = results.query.results.quote; // 填入資料 $('#stock-name').text(quotes.name); ( 略 ) $('#yield').text(quotes.dividendyield); 就一個 getjson 而已

59 Demo 透過 Napa 建立 Basic Content App 透過 http get 查詢股票建立 Cell Binding Just do it C:\TFS\StockCheck

61 基本概念上哪個架? Office Store, App Catalog (Organization) Shared Folder 用戶如何使用? Web, Desktop, Mobile 給世人用不同的 App 有何差別? Pane, Content, Mail 給自己人用給網路上的朋友用

63 改名叫 Office Add-ins App for Office 結構

64 建置佈署封裝與打包 App 透過 VS2013 封裝與打包佈署 App(HTML) 上傳 (XML)

65 建置佈署封裝與打包 App App 顯示名稱, 版本編號起始頁面 App Manifest XML App 圖示需要的權限

66 建置佈署封裝與打包 App 支援的 Application

67 建置佈署封裝與打包 App 設定要將 HTML 佈署到哪一個 Web Site 佈署選取 Publish 封裝 manifest

68 Demo 封裝與打包注意 https

70 企業內部 App 上架 (O365) 建立組織 App 目錄封裝與發佈使用 App - Web 使用 App - Desktop

71 建立組織 App 目錄

72 建立組織 App 目錄

73 建立組織 App 目錄

74 建立組織 App 目錄

75 建立組織 App 目錄

76 建立組織 App 目錄

77 建立組織 App 目錄

78 建立組織 App 目錄上傳什麼?

79 使用 -Desktop 別只是設定, 還要登入, Office 也要重開

80 使用 -Desktop

81 Demo 上架 App 到 O365 在 Desktop Office 中使用在 Web Office 中使用

83 上架到 Office Store- 發佈送審申請 SellerDashboard 帳號注意, 是用 Live ID 建立 App 申請, 不是組織 ID 準備相關資料決定應用程式名稱類別 96x96 圖示支援文件 URL 隱私權文件 URL manifest.xml 上傳送審審核條件

84 上架到 Office Store- 發佈送審

85 Demo 上架到 Office Store 發佈送審

87 你得先知道有兩種 SharePoint-hosted Provider-hosted 主體在內主體在外要先建立開發人員網站注意, 這不是應用程式目錄網站

88 如何建立開發人員網站

89 如何建立開發人員網站

90 第一次進入

91 透過 Napa 建立 SharePoint App

92 Demo-List Editor 建立可維護清單 (List) 的 App 用 Napa 建立下載到 VS 中編輯測試不要急, 先看完 slide 再做...

94 基本概念給世人用上哪個架? Office Store, App Catalog (Organization) Shared Folder 給自己人用如何打包與上架? 用戶如何使用?

95 Demo 透過 Napa 建立一個 SharePoint app 下載到 VS 測試執行打包封裝上傳到 SharePoint App Catalog 在 SharePoint Site 中使用 Just Do It

Mail apps 功能強大, 可提供 UI 在用戶檢視或撰寫 email / Appointment

97 Mail apps 功能強大, 可提供 UI 在用戶檢視或撰寫 / Appointment 時, 與用戶互動協助完成信件提供範本檢核資訊連結外部系統 ( 資訊 ) 擴充 ( 延伸 ) 系統功能

98 注意事項 request a Developer Preview Account for Outlook.com 用 Live ID 開發 Mail App 需要申請帳號不然, 你就用 O365 Developer Site 和 Task, Content 不同, Mail App 測試階段直接佈署到 O365 Outlook (Exchange) Server 下載到 VS 開發測試, 也是連回 Server 正式環境則是透過 O365 Outlook 管理應用程式來設定

99 建立專案 Mail App UI 分兩大塊 Read Form Compose Form 可以用在兩種模式 Messages Appointments

100 Mail App 開發都從 Office 物件開始都是非同步方法可以透過 Office.context.mailbox.userProfile 取得當前用戶資料 Office.context.mailbox.item.itemType 可取得類型 (Message or Appointment) 可以透過 Office.cast.item.toXXXXX 將 Office.context.mailbox.item 轉換 (Case) 成正確物件 (tomessage or toappointment or toitemcompose ) 如果你的 App 想同時支援 Message & Appointment, 要特別注意

101 Demo 從 O365 Napa 建立基本的 Mail App

102

103 使用 Mail App Desktop/Web

104 使用 Mail App Desktop/Web

105 使用 Mail App Desktop/Web

106 使用 Mail App Desktop/Web

107 使用 Mail App Desktop/Web

108

109 參考資料 Dev Center David's blog

110 結論 Office everywhere, your app too. Write once, Run everywhere. Enhance Your tools, Improve your efficiency.

111 講員 : 董大偉 David@isRock.com.tw

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio