1 / 51 office 2013 和 sharepoint 2013 的全新企業開發應用 曹祖聖...

1 / 51

Office 2013 和 SharePoint 2013 的全新企業開發應用曹祖聖台灣微軟資深講師jimycao@syset.comhttp://teacher.syset.comMCP, MCP+I, MCSA, MCSE, MCDBA, MCAD, MCSD, MCTS, MCITP, MCPD, MCT, MVP

OSP304

2 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

3 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

4 / 51

什麼是 App for Office ?

5 / 51

Office / SharePoint App 架構

Office.js SP.js

Office Web Apps

6 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

7 / 51

Office 365 Development Tools (Napa)

• 它是一隻在雲端執行的開發工具https://www.napacloudapp.com

• 讓開發人員可以線上開發 Office App 和 SharePoint App

8 / 51

Demo

建立並測試 Napa 專案

9 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

10 / 51

使用 Napa 開發 Office App

• 應用程式頁面中要引用以下項目 :

• 其中 office.js 是 Office 的 JavaScript Client Object Model

<link rel="stylesheet" type="text/css" href="../Content/Office.css" /><link rel="stylesheet" type="text/css" href="../Content/App.css" /><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script><script src="https://az88874.vo.msecnd.net/api/1.0/office.js "></script><script src="../Scripts/App.js"></script>

11 / 51

Office.initialize 事件• 當 office.js 載入並初始化完成時會執行

• 你可以在這個事件中使用 API 來存取 Office 文件、或者註冊事件

Office.initialize = function (reason) {

};

12 / 51

讀取目前儲存格的值• 所有動作都是非同步的

Office.context.document.getSelectedDataAsync( Office.CoercionType.Text, { valueFormat: "unformatted", filterType: "all" }, function (asyncResult) { $("#output").val(asyncResult.value); });

Document 參考 : http://msdn.microsoft.com/en-us/library/fp142295(v=office.15) CoercionType 參考 : http://msdn.microsoft.com/en-us/library/fp161141(v=office.15).aspx

13 / 51

設定目前儲存格的值

• Office.CoercionType.Matrix

Office.context.document.setSelectedDataAsync( '[["red", "rojo"],["green", "verde"],["blue", "azul"]]', function (asyncResult) { if (asyncResult.status === "failed") { $("#result").text(asyncResult.error.message); } });

14 / 51

Matrix Data Structure

• [["red","green","blue"]]

• [["red"],["green"],["blue"]]

• [["red", "rojo"],["green", "verde"],["blue", "azul"]]

red green blue

redgreenblue

red rojogreen verdeblue azul

15 / 51

文件事件處理Office.context.document.addHandlerAsync( Office.EventType.DocumentSelectionChanged, updateApp);

Office.EventType 對應事件字串值 事件DocumentSelectionChanged "documentSelectionChanged" Document.SelectionChanged

BindingSelectionChanged "bindingSelectionChanged" Binding.SelectionChanged

BindingDataChanged "bindingDataChanged" Binding.DataChanged

NodeDeleted "nodeDeleted" CustomXmlPart.nodeDeleted

NodeInserted "nodeInserted" CustomXmlPart.nodeInserted

NodeReplaced "nodeReplaced" CustomXmlPart.nodeReplaced

SettingsChanged "settingsChanged" Settings.settingsChanged

16 / 51

資料繫結Office.context.document.bindings.addFromSelectionAsync( Office.BindingType.Text, { id: 'MyBinding' }, if (asyncResult.status === "failed") { $("#result").text(asyncResult.error.message); } else { Office.select("bindings#MyBinding").addHandlerAsync( Office.EventType.BindingDataChanged, onBindingDataChanged ); } });

Bindings 參考 : http://msdn.microsoft.com/en-us/library/fp160966(v=office.15)

17 / 51

資料繫結function onBindingDataChanged(eventArgs) { Office.select("bindings#MyBinding").getDataAsync( { coercionType: "matrix" }, function (asyncResult) { if (asyncResult.value != "") { $("#result").val(asyncResult.value); } } );}

18 / 51

Demo

Excel Content App

儲存格存取與事件處理

19 / 51

Mail App Activation Rules

• ItemType : 指定項目類型• EntityType: 指定內容值包含類型

<Rule xsi:type="RuleCollection" Mode="And" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"> <Rule xsi:type="ItemIs" ItemType="Message" /> <Rule xsi:type="ItemHasKnownEntity" EntityType="Address" /></Rule>

20 / 51

Mail App Activation Rules• Office.MailboxEnums.ItemType

MessageAppointment

• Office.MailboxEnums.EntityType AddressContact EmailAddress MeetingSuggestion PhoneNumber TaskSuggestion URL

21 / 51

取得郵件內容var item = Office.context.mailbox.item;$('#subject').text(item.subject);$('#from').text(item.from.displayName);$('#to').text(item.to[0].displayName);

var entities = item.getEntities();var addressesArray = entities.addresses;

for (var i = 0; i < addressesArray.length; i++) {htmlText += "Address : " + addressesArray[i] + "<br/>";

}

$("#SectionContent").replaceWith(htmlText);

Message 參考 : http://msdn.microsoft.com/en-us/library/fp161175(v=office.15)

22 / 51

Demo

Mail App

地址過濾 / Youtube 影片預覽

23 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

24 / 51

VS2012 + Office Development Tools

25 / 51

Demo

Office Development Toolsfor Visual Studio 2012

開發 Office App

26 / 51

SharePoint 程式類型

27 / 51

SharePoint Client Side Object Model

Microsoft Office 365 應用程式開發 : http://teacher.syset.com/viewtopic.mspx?t=5540

28 / 51

Demo

Napa

開發 SharePoint App (CSOM)

29 / 51

SharePoint REST Service

Area Acccess PointSite http://sps2013/_api/site

Web http://sps2013/_api/web

User Profile http://sps2013/_api/SP.UserProfiles.PeopleManager

Search http://sps2013/_api/search

Publishing http://sps2013/_api/publishng

30 / 51

COM 與 REST URI 對應• 以下兩個 URI 是一樣的

http://sps2013/_vti_bin/client.svc/web/lists http://sps2013/_api/web/lists

Client Object Model REST URI

ClientContext.Web.Lists http://sps2013/_api/web/lists

ClientContext.Web.Lists[guid] http://sps2013/_api/web/lists('guid')

ClientContext.Web.Lists.GetByTitle("Title") http://sps2013/_api/web/lists/getbytitle('Title')

31 / 51

REST 參數指派• 帶單一參數

http://sps2013/_api/web/lists/getByTitle('Documents')/fields/getByTitle('Name')

http://sps2013/_api/web/lists('<guid>')/fields/getById('<guid>')

• 帶多個參數http://sps2013/_api/web/

getAvailableWebTemplates(lcid=1033,includeCrossLanguage=true)

32 / 51

複雜型別參數• 帶到 HTTP Request 的 Body 中

{'__metadata': { 'type': 'SP.List' },'AllowContentTypes': true,'BaseTemplate': 100, 'ContentTypesEnabled': true, 'Description': 'My list description','Title': listName

}

ListCollection.Add ListCreationInformation

33 / 51

SharePoint REST API 支援動作

HTTP 動詞 資料操作GET 取得資料POST 建立新項目

PUT 修改項目 ( 所有欄位，沒有指定值的欄位會使用預設值 )

DELETE 刪除項目MERGE 修改項目中的指定欄位值

34 / 51

使用 jQuery 呼叫 REST API

$.ajax({ url: "../_api/web/lists", type: "POST", data: JSON.stringify({ … }), headers: { … }, success: function(data) { }, error:function (xhr, options, err){ alert(xhr.status); alert(err); } }); 參考 : http://msdn.microsoft.com/en-us/library/jj164022(v=office.15).aspx

35 / 51

使用 REST API 做資料變動• Request Header 中要包含以下項目 :

headers: { "accept": "application/json;odata=verbose", "content-type": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val(), "X-HTTP-Method": "DELETE 或 MERGE", "IF-MATCH": "*",}

36 / 51

跨網站取得 Request Digest

$.ajax({ url: "../_api/contextinfo", type: "POST", contentType: "application/x-www-url-encoded", dataType: "json", success: function (data) { digest = data.d.GetContextWebInformation .FormDigestValue; },});

37 / 51

Demo

使用 SharePoint REST API

SharePointRestApp

38 / 51

SharePoint Chrome Control

• 如果你的 App 不套用 SharePoint 的主版頁面，那麼就無法具有該網站的導覽列與外觀樣式

• 這時就可以使用 Chrome Control

$(document).ready(function () { $.getScript(scriptbase + "SP.UI.Controls.js", function() { var options = ....;

var nav = new SP.UI.Controls.Navigation( "chrome_ctrl_placeholder", options); nav.setVisible(true); })});

39 / 51

SharePoint Chrome Controlvar options = { "appIconUrl": scriptbase + "images/siteicon.png", "appTitle": "Chrome control app", "appHelpPageUrl": "Help.html?" + document.URL.split("?")[1], "settingsLinks": [ { "linkUrl": "Account.html?" + document.URL.split("?")[1], "displayName": "Account settings" }, { "linkUrl": "Contact.html?" + document.URL.split("?")[1], "displayName": "Contact us" } ]}; 參考 : http://msdn.microsoft.com/en-us/library/fp179916(v=office.15).aspx

40 / 51

Demo

Napa

Chrome Control

41 / 51

SharePoint App Hosting 架構

42 / 51

如何擇 SharePoint 的擴充方式與 APIs

43 / 51

大綱• 什麼是 Office/SharePoint App ?• Office 365 Napa 開發環境介紹• 使用 Napa 開發 Office 365 App• 使用 Visual Studio 2012 開發 App• 部署 Office App

44 / 51

部署 Office App

• 建立一個放置 Office App 的 IIS 網站

45 / 51

Office App manifest XML 設定檔• xsi:type="TaskPaneApp"• xsi:type="ContentApp"

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ContentApp">

::

46 / 51

上傳 Manifest 檔• App 的 manifest 檔可以放置在

Office Store (taskpane, content, mail, sharepoint app)Exchange 伺服器 (mail app)共用資料夾 (taskpane, content app)App Catalog (taskpane, content, sharepoint app)

• Manifest 要修改以下兩個值 :

<IconUrl DefaultValue=" 圖示的網址 " />

<SourceLocation DefaultValue=" 應用程式頁面網址 " />

47 / 51

SharePoint App Catalog

• 是一個 SharePoint 文件庫• 放置 TaskPane 與 Content App 的 manifest

檔• 信任該 App Catalog 的 Office 用戶端可以在

文件中插入 App Catalog 中的 Office App• 每一個 SharePoint Web Application 只能有一

個 App Catalog

48 / 51

部署到 Exchange 2013 伺服器• 開啓 Exchange Admin Center (EAC)

https://<exchange server>/ecp/?p=installed• 開啓 App Manager• 上傳 App 的 manifest 檔• 也可以用 PowerShell 來安裝

New-App –URL:"http://<manifest 檔的 URL>"

參考 : http://msdn.microsoft.com/en-us/library/fp142256(v=office.15).aspx

49 / 51

設定 Office 用戶端信任 App Catalog

• File > Options > Trust Center > Trust Center Settings > Trusted App Catalogs

50 / 51

Demo

部署 Office App

SharePoint App Catalog共用資料夾Exchnage 伺服器

51 / 51

結論• Office / SharePoint App 使用到的技術

HTML5 / CSS3 / JavaScriptOffice.js / SP.jsoAuth, oData / REST

與 Windows 8 App 開發方式相似支援 App 軟體市集

52 / 51

免費活動• 活用 HTML5 與 CSS3 的標準於行動網站

時間 : 10/25 5:00pm 歡迎到二樓 E02 巨匠電腦攤位報名

53 / 51

Resources

Connect. Share. Discussshttp://www.microsoft.com/taiwan/techdays2012/

Microsoft Certification & Training Resources

http://www.microsoft.com/learning/zh/tw/

Resources for IT Professionalshttp://social.technet.microsoft.com/Forums/zh-tw/categories

/

Resources for Developershttp://social.msdn.microsoft.com/Forums/zh-tw/categories

/

54 / 51

55 / 51

• 請協助完成「本課程問卷」，並在離開教室時交給工作人員！

• 填妥大會背包中的大會問卷，可於活動第三天兌換問卷禮哦！

感謝您的合作。

56 / 51

57 / 51

設定 SharePoint App Catalog

• SharePoint 管理中心

58 / 51

App Catalog Site

59 / 51

Office 365 Preview 申請• http://msdn.microsoft.com/en-us/library/

office/apps/fp179924(v=office.15)

60 / 51

管理 SharePoint 網站• http://portal.microsoftonline.com

61 / 51

連上 SharePoint Online 安裝 Napa

62 / 51

使用 Napa 建立 Office 365 專案

63 / 51

部署 Mail App 發生以下錯誤• 錯誤訊息 :

The caller has not assigned any of the RBAC roles requested in the management role header.

• 原因 缺少 role-based access control (RBAC) 設定

• 解決方法 :使用 PowerShell 遠端連線到 Outlook Online 加上

以下角色原則指派 :Role : "My Custom Apps"Policy: "Default Role Assignment Policy"

64 / 51

設定 RBAC 角色原則指派# 要求輸入 Office 365 使用者帳號密碼$LiveCred = Get-Credential# 取得遠端 PowerShell 連線$Session = New-PSSession -ConfigurationName Microsoft.Exchange -ConnectionUri https://ps.outlook.com/powershell/ -Credential $LiveCred -Authentication Basic –AllowRedirection# 匯入遠端連線Import-PSSession $Session# 啓用 Outlook 組織自訂Enable-OrganizationCustomization# 加入角色原則指派New-ManagementRoleAssignment -Role "My Custom Apps" -Policy "Default Role Assignment Policy"# 移除遠端連線Remove-PSSession $Session

65 / 51

使用 iframe 內嵌另一個頁面• 使用 jQuery 的 .load 方法

<button onclick='$("#SectionContent").load("MyAppPage.html");'> 載入 MyAppPage.html</button>

<div id="SectionContent"></div>

66 / 51

SharePoint App 和 Solution 不同的地方• 讓使用者方便尋找、下載、 安裝 – App Marketplace• 提供安全的 SharePoint 擴充方式• 透過 App Marketplace 銷售你的程式• 提供未來更新的彈性• 延伸既有非 SharePoint 的軟體開發技能• 整合雲端開發資源 (Office 365, Windows Azure ...)• 區隔 App 的權限和使用者的權限• 支援跨平台技術 (HTML, REST, OData, JS, OAuth, ...)• 使用 JavaScript 存取 SharePoint• Security Token Service (OAuth 相容 )• 擴充 SharePoint Online 和 SharePoint 網站

67 / 51

SharePoint App 和 Solution 不同的地方• 觀點– App 是針對使用者– Farm Solutions 是針對管理人員

• App 存取 SharePoint 方式– SharePoint REST/OData service – SharePoint JavaScript, Silverlight, or .NET Framework

client object models– SharePoint Windows Phone object model

• Apps for SharePoint 不可以安裝在以下等級– site collection, web application, farm

68 / 51

SharePoint App 其它議題• Custom Web Parts (App Parts)

– http://msdn.microsoft.com/en-us/library/fp179921(v=office.15).aspx

• Event receivers / Feature receivers– http://msdn.microsoft.com/en-us/library/jj220048(v=office.15).aspx

• 自訂欄位型別– 可以使用現有欄位型態來定義欄位，也可以用計算欄位– 計算欄位公式 :

• http://msdn.microsoft.com/en-us/library/bb862071(v=office.15).aspx

• 自訂 Web 服務供 App 呼叫– 可以使用 solution 方式部署在 SharePoint 上

69 / 51

SharePoint REST URI 語法• http://sps2013/_api/site• http://sps2013/_api/web

70 / 51

Odata 查詢語法支援 1/2

71 / 51

Odata 查詢語法支援 2/2

72 / 51

REST 參數別名• 以下三者是一樣的

http://sps2013/_api/web/applyWebTemplate?template="STS#0"

http://sps2013/_api/web/applyWebTemplate("STS#0")

http://sps2013/_api/web/applyWebTemplate(title=@template)?@template="STS#0"

• 但是別名參數的值不可以是複雜型別 !

73 / 51

呼叫靜態方法或屬性• 用法 :

http://sps2013/_api/SP.Utilities.Utility.getImageUrl('imageName')

http://sps2013/_api/SP.Utility.assetsLibrary/id• 但是不可以這樣用 :

http://sps2013/_api/getList(~SP.Utility/assetsLibrary/id)

74 / 51

SharePoint 2013 開發環境建置• 網域名稱 : contoso.com• OS: Windows Server 2008 R2 SP1 Enterprise

DC: 網域控制站 + Office Web Apps Server這一台請不要裝 Office 2013 !

SPS2013: SharePoint 2013 + Office 2013 + VS2012ES: Exchnage 2013 Preview

_autodiscover._tcp.contoso.com SRV es.contoso.com

• 請先都做過完整的 Microsoft Updates

75 / 51

DC 上安裝 Office Apps Server Preview

1. 下載並安裝 .NET Framework 4.5– http://www.microsoft.com/zh-tw/download/

details.aspx?id=30653

2. 下載並安裝 Windows PowerShell 3.0– http://www.microsoft.com/en-us/download/

details.aspx?id=29939

3. 下載並安裝 KB2592525– http://www.microsoft.com/en-us/download/

details.aspx?id=27929

76 / 51

DC 上安裝 Office Apps Server Preview

4. 打開 PowerShell 3.0 Import-Module ServerManager Add-WindowsFeature Web-Server,Web-

WebServer,Web-Common-Http,Web-Static-Content,Web-App-Dev,Web-Asp-Net,Web-Net-Ext,Web-ISAPI-Ext,Web-ISAPI-Filter,Web-Includes,Web-Security,Web-Windows-Auth,Web-Filtering,Web-Stat-Compression,Web-Dyn-Compression,Web-Mgmt-Console,Ink-Handwriting,IH-Ink-Support

77 / 51

DC 上安裝 Office Apps Server Preview

5. 下載並安裝 Microsoft Office Web Apps Server Preview http://www.microsoft.com/en-us/download/

details.aspx?id=30358

6. 打開 PowerShell 3.0 Import-Module OfficeWebApps New-OfficeWebAppsFarm –InternalURL http://DC –

AllowHttp –EditingEnabled

78 / 51

DC 上安裝 Office Apps Server Preview

7. 安裝 ASP.NET %systemroot%\Microsoft.NET\Framework64\

v4.0.30319\aspnet_regiis.exe -iru iisreset /restart /noforce

8. 打開 IE 測試以下網址，如果有看到傳回一份 XML 文件代表成功 ! http://servername/hosting/discovery

79 / 51

SharePoint 伺服器與開發工具安裝1. 下載並安裝 Office 2013 Preview

http://www.microsoft.com/en-gb/officepreview

2. 下載並安裝 SharePoint Designer 2013 Preview http://www.microsoft.com/en-us/download/details.aspx?

id=30346

3. 下載並安裝 Visual Studio 2012 Ultima ttp://www.microsoft.com/visualstudio/11/zh-tw/

downloads#ultimate

4. 下載並安裝 Microsoft Office Developer Tools for Visual Studio 2012

http://go.microsoft.com/fwlink/?LinkID=261869 http://nikspatel.wordpress.com/2012/09/09/installing-sharepoint-2013-and-office-201

3-developer-tools-on-the-visual-studio-2012-rtm

80 / 51

SharePoint 伺服器與開發工具安裝5. 下載 Microsoft SharePoint Server 2013

Preview http://technet.microsoft.com/en-us/evalcenter/

hh973397.aspx 序號 : 6RNT8-XV26M-GWH36-VMGQH-94MMH

6. 如果是中文版 Windows ，請下載並安裝 SQL Server 2008 R2 SP1 Native Client http://www.microsoft.com/zh-tw/download/

details.aspx?id=26728 下載並安裝 1028\x64\sqlncli.msi

81 / 51

SharePoint 伺服器與開發工具安裝7. 確定有連上 Internet8. 安裝 prerequisites9. 安裝 SharePoint 2013 Preview

使用 Stand-alone 方式安裝10.執行 SharePoint Products Configuration

Wizard

82 / 51

設定 SharePoint 使用 Office Apps Server

1. 打開 SharePoint 2013 Management Shell New-SPWOPIBinding -ServerName DC –AllowHTTP Set-SPWopiZone –zone "internal-http"

2. 在文件庫中上傳一份 Office 文件，看看能否在 IE 上直接編輯

83 / 51

問題 #1: 無法安裝 App

• 在執行 App for SharePoint 專案時發生無法安裝 App 的錯誤 !Error occurred in deployment step 'Install App for

SharePoint': Failed to install App for SharePoint.• 原因

未啓動 AppManagementService 服務未啓動 SubscriptionService 服務沒有 tenant name

84 / 51

解法 1/5

• 開啓 SharePoint 2012 Management Shell net start spadminv4 net start sptimerv4 Set-SPAppDomain "sps2013" Get-SPServiceInstance | where{$_.GetType().Name

-eq "AppManagementServiceInstance" -or $_.GetType().Name -eq "SPSubscriptionSettingsServiceInstance"} | Start-SPServiceInstance

85 / 51

解法 2/5

• 取得管理帳號並建立應用程式集區 $account = Get-SPManagedAccount "contoso\

administrator" $appPoolSubSvc = New-SPServiceApplicationPool -

Name SettingsServiceAppPool -Account $account $appPoolAppSvc = New-SPServiceApplicationPool -

Name AppServiceAppPool -Account $account

86 / 51

解法 3/5

• 建立 Subscription Settings Service 執行個體 $appSubSvc = New-

SPSubscriptionSettingsServiceApplication –ApplicationPool $appPoolSubSvc –Name SettingsServiceApp –DatabaseName SettingsServiceDB

$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy –ServiceApplication $appSubSvc

87 / 51

解法 4/5

• 建立 App Management Service 執行個體 $appAppSvc = New-

SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB

$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc

88 / 51

解法 5/5• 建立 App Management Service 執行個體

$appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB

$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc

• 指定 tenant name Set-SPAppSiteSubscriptionName -Name "app" -

Confirm:$false

89 / 51

問題 #2: 使用者驗證不通過• 如果在啟用 App 時一直要求輸入帳號密碼，卻又過不了

• 解法 :在以下機碼加入一個 DWORD 值

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa

DisableLoopbackCheck = 1然後重新開機參考 : http://support.microsoft.com/kb/896861