1. 程式人生 > >SharePoint 2013 開發——開發並部署第一個APP

SharePoint 2013 開發——開發並部署第一個APP

本篇我們開始對開發APP應用程式進行了解。

本篇基於本地SharePoint環境(如果是Office 365的話會方便許多),需要配置一下APP的環境,具體參照霖雨大神的Blog

開發APP的第一步,建立一個開發者網站集,操作方法跟我們建立其他的網站集幾乎一樣,選擇好開發者網站的模版即可,我將在我的81埠下的Web應用程式下建立。

在管理中心選擇應用程式管理->建立網站集,選擇81埠下的Web應用程式,模版選擇開發人員網站,點選建立。

接下來我們開始建立我們第一個APP,是的,Hello World,它沒有什麼實際的功能所以沒有Bug,只是讓我們對整個過程有個大致地瞭解和掌握

開啟Visual Studio 2015 RC(新裝的系統,所以VS也安裝了最新的版本,感受感受),新建專案,選擇Office/SharePoint分類下的應用程式,選擇SharePoint應用程式進行建立。

點選確定按鈕之後,在彈出的除錯網站位置填寫我們剛建立的開發人員網站的URL,選擇SharePoint託管,點選下一步會提示輸入憑據進行身份驗證,輸入完後點擊確定,接下來選擇應用版本,是2013還是O365,我們這裡選擇SharePoint 2013,點選完成。

專案建立好之後結構如下圖所示。

我們可以看到創建出來的APP的ASPX頁面並沒有後臺頁面檔案,因為APP是不支援服務端程式碼的。

我們定位到主內容部分(PlaceHolderMain),它下面有一個DIV,上面註釋了“執行該應用程式時會將以下內容替換為使用者名稱 - 請參閱 App.js”,在Scripts資料夾中可以看到APP.js這個檔案:

'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()
{
    var context = SP.ClientContext.get_current();
    var user = context.get_web().get_currentUser();

    // 此程式碼在 DOM 準備就緒時執行,並且可以建立使用 SharePoint 物件模型所需的上下文物件
    $(document).ready(function () {
        getUserName();
    });

    // 此函式準備、載入然後執行 SharePoint 查詢以獲取當前使用者資訊
    function getUserName() {
        context.load(user);
        context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
    }

    // 如果上述呼叫成功,則執行此函式
    // 此函式將“message”元素的內容替換為使用者名稱
    function onGetUserNameSuccess() {
        $('#message').text('Hello ' + user.get_title());
    }

    // 將在上述呼叫失敗時執行此函式
    function onGetUserNameFail(sender, args) {
        alert('Failed to get user name. Error:' + args.get_message());
    }
}

它做了一個簡單的使用者名稱的查詢,並顯示到頁面的P標籤上。

本篇中我們只想顯示我們的Hello,不對物件模型做過多介紹。在div節點的下面新增一個P標籤,文字內容填寫“This is our first SharePoint app!”。完成之後Main中的程式碼如下所示:

<div>
        <p id="message">
            <!-- 執行該應用程式時會將以下內容替換為使用者名稱 - 請參閱 App.js -->
            initializing...
        </p>
    </div>
    <p>This is our first sharepoint APP!</p>

在執行我們第一個APP之前,我們先來了解一下SharePoint應用程式專案模版的結構:

Features資料夾

跟以往的版本一樣,內有清單檔案和Feature定義檔案,用來定義SharePoint的Feature。

Package資料夾

全新的SharePoint 2013應用程式包設計器,跟Feature設計器很相似,包含一個manifest清單檔案定義SharePoint應用程式的細節,實際上跟以往的版本也並無太大差異。

Content資料夾

包含預設的APP.css樣式檔案和一個清單定義檔案。新的樣式檔案等內容可以新增到此處。

Images資料夾

顧名思義,用來存放圖片。

Pages和Scripts資料夾

同樣,看名即懂,用來存放頁面和指令碼檔案。

最後兩個是AppManifest.xml和packages.config檔案。其中,雙擊AppManifest.xml檔案會開啟一個設計器,用來配置APP。

回到之前,我們完成的Hello World應用程式,按下F5進行部署,會收到如下的錯誤:

因為我們使用的是場使用者(系統賬戶),SharePoint不允許使用系統賬戶進行APP的安裝和解除安裝操作。在域控中新建一個使用者,將該使用者新增到開發機的本地管理員組,並新增到場管理員組。

這個問題困擾了我一整天,Google到的解決方案都是以域內伺服器為基礎的,但是我的SharePoint在VM中,而Visual Studio在本機域外,這裡有一篇很詳細的排錯過程,如果域內伺服器開發遇到了問題可以進行參照

很遺憾域外部署如何處理我還沒有找到辦法,後來仔細回味一下也許是行不通的吧,按照上面的排錯過程在SharePoint域內伺服器開發是可以部署的,F5啟動瀏覽器之後,頁面無法顯示,或者顯示404 Not Found,這個或許由於SharePoint APP開發環境沒有配置正確,我在第一次配置的時候不小心將CNAME指向了AD伺服器而不是SP的伺服器。仔細檢查一下配置,修正後再次按F5就可以看到我們開發的APP的頁面了,同樣只在域內伺服器可以訪問,我在本機域外訪問就提示該頁無法顯示。

注:本篇只是從技術角度闡述實現APP的一種方式,並不完全適用於實際應用,如應用程式目錄等內容本篇並沒有提及。

鑑於本地伺服器的做起來略麻煩,下一篇可能會考慮基於O365啦:)