Let's talk about Office Apps 董大偉 David@isRock.com.tw 技術總監微軟最有價值專家 (MVP) 台灣微軟 MSDN 講座講師
講員 : 董大偉 David@isRock.com.tw 技術總監集英信誠資深顧問斯歌科技 (K2) 資深顧問 微軟最有價值專家 (MVP) 台灣微軟 MSDN 講座資深講師 http://blog.studyhost.tw Windows Phone / Silverlight / Visual Studio 上市發表會巡迴講座講師 台灣微軟 TechED, TechDays 2007~2014 講師 China TechED 2013 講師
Office VBA Office 365 Office 365 API App for Office 啊? Office Add-Ins SharePoint Add-Ins
過去 你的 Office 是運行在 Windows 上的 可以透過 VBA 來客製化你的 Office
現在 你的 Office 是運行在 Windows 上的 你的 Office 也運行在平板 (ipad, Android, Windows) 手機 (iphone, Android, Windows) 網頁 (Office Web, Office 365) PC(Windows, MAC) 而且還免費
因此, 你需要 在跨平台的狀況下客製化你的 Office, 或提供用戶擴充功能 與服務器端的 Office 365 溝通或整合 ( 存取 O365 資訊 ) 在 Office 365(SharePoint) 中建立 Apps 佈署與管理你的 Office Apps
現在, 你可以 將你的應用 (Apps) 上架到 Office Store, 給全球運行於各種平台上的 Office 用戶, 下載 ( 付費購買或免費 ) 使用 發佈到組織內的 App 目錄, 供企業內部的用戶使用
透過這技術, 可以達成 以用戶熟悉的工具, 開發或整合企業內應用 幫助用戶建立文件 ( 範本 小工具 ) 幫助用戶確認文件 ( 檢核 ) 提高生產力
典型情境 Translation wizard Chart creation Third-party service integration Rich mash-ups Spec validation Kicking off work flows Order details surfaced in context
有哪幾種 Office Apps Task Pane app Content app Mail app 正名為 Office Add-ins
有哪幾種 SharePoint Apps SharePoint-Hosted App Provider-Hosted App 正名為 SharePoint Add-ins
Task Pane apps 出現在文件右方窗格提供 UI 互動提供 查找資訊 ( 透過 WS) 檢查文件建立版型
Content apps 內崁在文件當中可加強文件內容可透過 WS 整合外部資訊 ( 圖表 影片 遠端資料庫 ) 可提供 UI 與用戶互動
Mail apps 功能強大, 可提供 UI 在用戶檢視或撰寫 email / Appointment 時, 與用戶互動協助完成信件 提供範本 資訊連結外部系統擴充系統功能
改名叫 Office Add-ins App for Office 結構
App for Office 結構 發佈至 : Office Store Internal SharePoint Site Shared network location 可發佈至任何 WebSite ( 需要支援 https)
有哪些開發方式? VS2013 Napa
有哪些開發方式? VS2013 Napa
佈署與上架位置 Office Store( 公開上架 ) Apps for Office catalog on SharePoint Exchange catalog Network shared folder app catalog 直接上傳使用
開發前準備 安裝 Office Developer Tools for Visual Studio 2013 申請 Office 365 Developer Subscription free 30-day trial Office 365 Developer account ($99.0/y)
Task Pane apps 出現在文件右方窗格提供 UI 互動提供 查找資訊 ( 透過 WS) 檢查文件建立版型
建立新 App 進入 Napa Add New Project 選擇 Task App https://www.napacloudapp.com
建立新 App 進入 Napa Add New Project 選擇 Task App
建立新 Task Pane App(Add-ins)
接下來的 Demo 使用 Napa 建立第一個 Office App 透過 NAPA 執行 應用程式架構說明 下載程式碼到 VS 透過 VS 執行 不要急, 先看完 slide 再做...
進入 NAPA https://www.napacloudapp.com 用 Live ID 登入
進入 NAPA 莫急莫慌莫害怕, 放心按下去
進入 NAPA Source Code 儲存在這裡
進入 NAPA - App.js 沒啥特別, 不過就是建立個 NotificationBox
進入 NAPA Home.html 主頁面進入點 注意引入的 js 主頁面邏輯
進入 NAPA manifest.xml 從這邊設定 主頁面進入點 ( 重要 )
進入 NAPA manifest.xml 測試環境
進入 NAPA Home.html 就他 主頁面進入點 就一個按鈕 注意 https
進入 NAPA Home.js 主頁面邏輯 Hook 按鈕的 Click 事件 注意非同步 取得選取範圍資料
Run 看看 Upload 到? Run 看看
Run 看看
Run 看看 選擇在 Excel Online 中編輯
Run 看看
Demo 使用 Napa 建立第一個 Office App 透過 NAPA 執行 應用程式架構說明 下載程式碼到 VS 透過 VS 執行 OK, 來做做看
Content apps 內崁在文件當中可加強文件內容可透過 WS 整合外部資訊 ( 圖表 影片 遠端資料庫 ) 可提供 UI 與用戶互動
建立新 App 進入 Napa Add New Project 選擇 Content App https://www.napacloudapp.com
建立新 App 進入 Napa Add New Project 選擇 Content App
建立新 Content App
App 架構說明 其實都一樣
Demo 股價查詢 Content App C:\TFS\StockCheck
Demo 透過 Napa 建立 Basic Content App 透過 http get 查詢股票 建立 Cell Binding 不要急, 先看完 slide 再做...
首頁 -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>
首頁 -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).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.Text, { id: 'MyBinding' }, // 設定綁定 id } ); 注意 Binding function (asyncresult) { // 如果設定成功 // 取得自訂的綁定 id, // 對其 Hook BindingDataChanged 的事件處理常式 Office.select("bindings#MyBinding").addHandlerAsync (Office.EventType.BindingDataChanged, onbindingdatachanged); } 取得特定 ID 的 Binding 對選取區建立 Binding 自訂 ID
首頁 -Binding // 當繫結對象資料改變時... function onbindingdatachanged(eventargs) { 取得資料 // 取得繫結對象的資料 Office.select("bindings#MyBinding").getDataAsync (function (asyncresult) { if (asyncresult.value!== "") { // 更新股價資訊 showstockdata(asyncresult.value); } }); 顯示股價 }
首頁 - 透過 http get 抓取股價 // 顯示股價資訊 function showstockdata(symbol) { // Yahoo YQL - http://developer.yahoo.com/yql/ var yql = 'select * from yahoo.finance.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.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 而已
Demo 透過 Napa 建立 Basic Content App 透過 http get 查詢股票建立 Cell Binding Just do it C:\TFS\StockCheck
基本概念 上哪個架? Office Store, App Catalog (Organization) Shared Folder 用戶如何使用? Web, Desktop, Mobile 給世人用 不同的 App 有何差別? Pane, Content, Mail 給自己人用 給網路上的朋友用
改名叫 Office Add-ins App for Office 結構
建置 佈署 封裝與打包 App 透過 VS2013 封裝與打包佈署 App(HTML) 上傳 (XML)
建置 佈署 封裝與打包 App App 顯示名稱, 版本編號 起始頁面 App Manifest XML App 圖示 需要的權限
建置 佈署 封裝與打包 App 支援的 Application
建置 佈署 封裝與打包 App 設定要將 HTML 佈署到哪一個 Web Site 佈署 選取 Publish 封裝 manifest
Demo 封裝與打包注意 https
企業內部 App 上架 (O365) 建立組織 App 目錄封裝與發佈使用 App - Web 使用 App - Desktop
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄
建立組織 App 目錄 上傳什麼?
使用 -Desktop 別只是設定, 還要登入, Office 也要重開
使用 -Desktop
Demo 上架 App 到 O365 在 Desktop Office 中使用在 Web Office 中使用
上架到 Office Store- 發佈送審 申請 SellerDashboard 帳號 https://sellerdashboard.microsoft.com 注意, 是用 Live ID 建立 App 申請, 不是組織 ID 準備相關資料決定應用程式名稱 類別 96x96 圖示 支援文件 URL 隱私權文件 URL manifest.xml 上傳送審審核條件 https://msdn.microsoft.com/library/jj220035.aspx
上架到 Office Store- 發佈送審
Demo 上架到 Office Store 發佈送審
你得先知道 有兩種 SharePoint-hosted Provider-hosted 主體在內 主體在外 要先建立開發人員網站注意, 這不是 應用程式目錄 網站
如何建立開發人員網站
如何建立開發人員網站
第一次進入
透過 Napa 建立 SharePoint App
Demo-List Editor 建立可維護清單 (List) 的 App 用 Napa 建立下載到 VS 中編輯測試 不要急, 先看完 slide 再做...
基本概念 給世人用 上哪個架? Office Store, App Catalog (Organization) Shared Folder 給自己人用 如何打包與上架? 用戶如何使用?
Demo 透過 Napa 建立一個 SharePoint app 下載到 VS 測試執行打包封裝上傳到 SharePoint App Catalog 在 SharePoint Site 中使用 Just Do It
Mail apps 功能強大, 可提供 UI 在用戶檢視或撰寫 email / Appointment 時, 與用戶互動協助完成信件 提供範本 檢核資訊連結外部系統 ( 資訊 ) 擴充 ( 延伸 ) 系統功能
注意事項 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 管理應用程式 來設定
建立專案 Mail App UI 分兩大塊 Read Form Compose Form 可以用在兩種模式 EMail Messages Appointments
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, 要特別注意
Demo 從 O365 Napa 建立基本的 Mail App
使用 Mail App Desktop/Web
使用 Mail App Desktop/Web
使用 Mail App Desktop/Web
使用 Mail App Desktop/Web
使用 Mail App Desktop/Web
參考資料 Dev Center http://dev.office.com/getting-started David's blog http://blog.studyhost.tw
結論 Office everywhere, your app too. Write once, Run everywhere. Enhance Your tools, Improve your efficiency.
講員 : 董大偉 David@isRock.com.tw http://blog.studyhost.tw