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

Justin-Liu發表於2015-06-12
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啦：）



相關文章