office 2013 和 sharepoint 2013...
TRANSCRIPT
1 / 51
Office 2013 和 SharePoint 2013 的全新企業開發應用
曹祖聖台灣微軟資深講師[email protected]://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
red
green
blue
red rojo
green verde
blue 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 Point
Site 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('Document
s')/fields/getByTitle('Name')http://sps2013/_api/web/lists('<guid>')/fields/getByI
d('<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 requ
ested 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 cli
ent 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?templ
ate="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('i
mageName')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.3
0319\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#ultimat
e
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-2013-developer-tools-on-the-visual-studio-2012-rtm
80 / 51
SharePoint 伺服器與開發工具安裝
5. 下載 Microsoft SharePoint Server 2013 Preview http://technet.microsoft.com/en-us/evalcenter/hh9
73397.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 Sh
arePoint': 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\admi
nistrator" $appPoolSubSvc = New-SPServiceApplicationPool -
Name SettingsServiceAppPool -Account $account $appPoolAppSvc = New-SPServiceApplicationPool -
Name AppServiceAppPool -Account $account
86 / 51
解法 3/5
• 建立 Subscription Settings Service 執行個體 $appSubSvc = New-SPSubscriptionSettingsServiceA
pplication –ApplicationPool $appPoolSubSvc –Name SettingsServiceApp –DatabaseName SettingsServiceDB
$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy –ServiceApplication $appSubSvc
87 / 51
解法 4/5
• 建立 App Management Service 執行個體 $appAppSvc = New-SPAppManagementServiceAppli
cation -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB
$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc
88 / 51
解法 5/5
• 建立 App Management Service 執行個體 $appAppSvc = New-SPAppManagementServiceAppli
cation -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB
$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc
• 指定 tenant name Set-SPAppSiteSubscriptionName -Name "app" -Conf
irm:$false
89 / 51
問題 #2: 使用者驗證不通過
• 如果在啟用 App 時一直要求輸入帳號密碼，卻又過不了
• 解法 :在以下機碼加入一個 DWORD 值
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa
DisableLoopbackCheck = 1
然後重新開機參考 : http://support.microsoft.com/kb/896861