Box Platform API 學習筆記(一) 建立第一個 Box 應用程式

Box 比其他雲端硬碟(例如:Dropbox、GoogleDrive、OneDrive、百度雲)更厲害的地方,就是對於應用程式開發者來說,Box 提供了相當完整的 API 及 SDK,讓企業可將暨有的應用附加上 Box 的很多功能。甚至可以直接利用BOX API打造一個自己專屬的BOX系統及介面。BOX Platform API 能研究的東西實在太多了,這一篇主要先談如何在自己的應用裡面嵌入BOX的功能。 以下是幾種整合BOX功能至應用系統及服務的方式:

  • 獨立應用程式 具有 Box 內容服務的Web應用程式。例如:直接在應用裡面嵌入BOX介面、直接調取BOX檔案預覽功能預覽應用程式裡的檔案,或啟用及控制使用者權限及共同作業功能。
  • 企業整合功能 使用程式與後端整合功能來擴展你的 Box 功能。範例整合功能包含使用者、群組,和事件管理功能。
  • 合作夥伴整合功能 允許使用者在您的協力廠商應用程式中存取、編輯與儲存 Box 內容,並提供如電子簽名或專案管理服務等功能。

試想如果要在自己的一個應用系統裡面嵌入類似 Box 或 DropBox 這樣雲端硬碟功能,會是一件多蠻複雜的工程。這樣的系統至少要有以下幾個功能:

  1. 目錄結構
  2. 權限管控
  3. 檔案線上預覽
  4. 上傳及下載檔案

每個功能,光是要把它實作出來,就不知道要花多久的時間,所以 Box 有提供了現成的 Box UI 元件可供開發人員直接調用使用。 本文先以獨立Web應用程式作為一個開始,建立你第一個Box應用。最終你可以瞭解如何將Box的功能及UI元件直接嵌入到你的Web應用程式中:

Step 1: 建立 Box 應用程式

要開始開發BOX應用,首先要先登入 Box 帳號 ,要是沒有 Box 帳號,可以依照註冊免費box帳號的說明,註冊一個免費的 Box 帳號,然後點選 Box Developers 網站 右上方的 Console 連結,登入 Box 開發人員主控台 接下來進入開發人員主控台後,點選建立新應用程式 選擇自訂應用程式 選擇使用 OAuth 2.0 搭配 JWT 方式進行驗證 為應用程式取一個名字,按下建立應用程式 應用程式建立好之後。畫面上會出現如下圖的畫面。 你可以直接使用 curl 指令( Mac有內建,Windows要另外裝)測試 Box API 是否可以運作。要注意 curl 指令中的 Authorization: Bearer [憑證] ,憑證中的32字元字串是開發人員專用的暫時憑證,60分鐘就會到期。在開發階段,你可以先不用實作 OAuth 2.0 JWT 的 SSO ,只要先用暫時憑證,就可以測試應用程式了。暫時憑證的取得方式會在下一步驟Step 2說明。 接下來,點選檢視您的應用程式,進入應用程式組態的畫面


Step 2: 設定 Box 應用程式組態

進入應用程式組態設定畫面後,會看到開發人員憑證的欄位,現在可以 Copy 下來,或等下再回來 Copy 讓你的應用程式使用 到畫面下方,在CORS 網域欄位中,填入你的 Web Server 網域名稱,若是要先在本機測試,填入 http://localhost 再來按下儲存變更


Step 3: 撰寫HTML code

若是你使用 Mac 內建的 Apache server 做測試,先到 Apache 根目錄 /Library/WebServer/Documents/ 建立一個新的 HTML 檔 (例如: boxdemo.html),於 boxdemo.html 中使用下面的 html code

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"></meta>

<title>Box Content Explorer Demo</title>

<!-- polyfill.io only loads the polyfills your browser needs -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
<!-- Latest version of the explorer css for your locale -->

<link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/1.1.0/en-US/explorer.css"></link>
</head>

<body>
<div class="container" style="height:600px"></div>

<!-- Latest version of the explorer js for your locale -->
<script src="https://cdn01.boxcdn.net/platform/elements/1.1.0/en-US/explorer.js"></script>

<script>
var folderId = '0'; var accessToken = 'xxxxxxxxxxx';
var contentExplorer = new Box.ContentExplorer();
contentExplorer.show(folderId, accessToken, { container: '.container' });
</script>
</body>
</html>

 

要注意 html code 第19行中的 accessToken,要使用 Step 2中你自己的開發憑證。通常要是最後網頁跑不出來,不是因為憑證有問題(要記得,憑證效期只有60分鐘,要記得去取得新的憑證),就是因為 CORS 網域沒設定對


Step 4:完成

使用瀏覽器,打開 Step 3所製作的網頁,可以看到Box UI元件直接嵌入你的Web應用程式中。網頁中直接列出你的Box account中,根目錄的所有檔案。你也可以直接瀏覽檔案,或是對檔案進行任何你有權限進行的處理。 如果進一步,你想修改畫面左上方的 Logo,可參考這篇文件說明


Box有提供幾種UI元件可供開發者嵌入至自己的應用中,提供使用者在使用你應用的同時也可以同時享有使用Box中檔案及資料夾的使用體驗。 Box提供給應用程式開發人員的UI元件如下:

  • Box Content Preview – 檔案Viewer,開發者可利用此元件,提供給使用者多達130種檔案(例如:Microsoft Office、PDF、Adobe Photoshop、Adobe AI、各種圖片檔及影像檔)線上的預覽功能
  • Box Content Pickers – 讓使用者可以選擇其Box account中特定的檔案或是資料夾
  • Box Content Explorer – 讓使用者可以搜尋及瀏覽檔案及資料夾
  • Box Content Uploader – 讓使用者可以直接上傳檔案或使用drag-and-drop上傳檔案

Box UI 元件可以單獨使用,也可以合併再一起使用。例如上傳檔案後在線上預覽檔案。 詳細的Box UI Elements的說明文件及範例可以參考 https://developer.box.com/v2.0/docs/box-ui-elements 也可參考 github https://github.com/box/box-ui-elements-demo or https://github.com/box/box-content-preview-demo

Facebook Comments
2 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *