let's talk about office...

光岩資訊 www.isRock.com.tw

Microsoft Office Apps之應用、開發、與上架

Office Apps

董大偉 [email protected]

光岩資訊技術總監

微軟最有價值專家(MVP)

台灣微軟 MSDN講座講師

Let's talk about



講員：董大偉 [email protected]

http://blog.studyhost.tw

光岩資訊技術總監

集英信誠資深顧問

斯歌科技(K2)資深顧問微軟最有價值專家(MVP)

台灣微軟MSDN講座資深講師

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) 上架到 OfficeStore，給全球運行於各種平台上的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 時，與用戶互動

協助完成信件、提供範本、資訊

連結外部系統

擴充系統功能

…



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



App for Office結構

發佈至:• Office Store• Internal SharePoint

Site• Shared network

location

可發佈至任何WebSite(需要支援https)



有哪些開發方式?

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 Subscriptionfree 30-day trialOffice 365 Developer account ($99.0/y)

http://aka.ms/OfficeDevToolsForVS2013

https://portal.microsoftonline.com/Signup/MainSignUp.aspx?OfferId=6881A1CB-F4EB-4db3-9F18-388898DAF510&DL=DEVELOPERPACK

https://portal.microsoftonline.com/Signup/MainSignUp.aspx?OfferId=C69E7747-2566-4897-8CBA-B998ED3BAB88&DL=DEVELOPERPACK



Task Pane apps出現在文件右方窗格

提供UI互動

提供、查找資訊(透過WS)

檢查文件

建立版型

…



建立新App

進入Napa

Add New Project

選擇Task App

https://www.napacloudapp.com

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

用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






建立新Content App



App架構說明

其實都一樣…



Demo

股價查詢Content AppC:\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

function (asyncResult) { //如果設定成功//取得自訂的綁定id,

//對其Hook BindingDataChanged的事件處理常式Office.select("bindings#MyBinding").addHandlerAsync

(Office.EventType.BindingDataChanged, onBindingDataChanged);

}

);

}

取得特定ID的Binding

對選取區建立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

C:\TFS\StockCheck

Just do it…



基本概念

上哪個架?Office Store,

App Catalog (Organization)

Shared Folder

用戶如何使用?Web, Desktop, Mobile…

不同的App有何差別?Pane, Content, Mail…

給世人用給自己人用

給網路上的朋友用



App for Office結構

改名叫 Office Add-ins



建置、佈署、封裝與打包App

透過VS2013

封裝與打包

佈署App(HTML)

上傳(XML)




App Manifest XML

App顯示名稱，版本編號

App圖示

需要的權限

起始頁面




支援的Application




選取Publish

設定要將HTML佈署到哪一個Web Site

佈署

封裝manifest



Demo封裝與打包

注意https



企業內部App上架(O365)

建立組織App目錄

封裝與發佈

使用App - Web

使用App - Desktop




上傳什麼?



使用-Desktop

別只是設定，還要登入，Office也要重開



使用-Desktop



Demo上架App到O365

在Desktop Office中使用

在Web Office中使用



上架到Office Store-發佈送審申請SellerDashboard帳號

https://sellerdashboard.microsoft.com

建立App

準備相關資料

決定應用程式名稱、類別

96x96圖示、支援文件URL、隱私權文件URL、manifest.xml

上傳送審審核條件 https://msdn.microsoft.com/library/jj220035.aspx

注意，是用Live ID申請，不是組織ID

https://sellerdashboard.microsoft.com/

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 時，與用戶互動

協助完成信件、提供範本、檢核資訊

連結外部系統(資訊)

擴充(延伸)系統功能

…



注意事項

用Live ID開發Mail App需要申請帳號

不然，你就用O365 Developer Site

和Task, Content不同, Mail App測試階段直接佈署到O365 Outlook (Exchange) Server

下載到VS開發測試，也是連回Server

正式環境則是透過O365Outlook『管理應用程式』來設定

request a Developer Preview Account for Outlook.com

https://msdn.microsoft.com/EN-US/library/office/jj220072.aspx#Prerequisites

http://aka.ms/outlookdeveloperpreview

http://aka.ms/outlookdeveloperpreview



建立專案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



參考資料Dev Center

David's blog

http://dev.office.com/getting-started


http://dev.office.com/getting-started

http://blog.studyhost.tw/



結論

Office everywhere, your app too.

Write once, Run everywhere.

Enhance Your tools, Improve your efficiency.



講員：董大偉 [email protected]


let's talk about office...

Documents