1.2.5 Frame.io和Workfront Fusion

在上一個練習中，您設定了案例--aepUserLdap-- - Firefly + Photoshop並設定了傳入webhook以觸發案例，以及在案例成功完成時設定webhook回應。 然後您使用Postman來觸發該情境。 Postman是絕佳的測試工具，但在實際商業案例中，商業使用者不會使用Postman來觸發案例。 相反地，他們會使用另一個應用程式，並期望其他應用程式在Workfront Fusion中啟動情境。 在本練習中，您將會使用Frame.io做的事情正是如此。

1.2.5.1必要條件

在繼續此練習之前，您必須先完成您的Adobe I/O專案的設定，包括將​ Frame.io API ​新增至您的Adobe I/O專案，而且您還需要設定應用程式以與API互動，例如Postman或PostBuster。

1.2.5.2正在存取Frame.io

移至https://next.frame.io/。

按一下執行個體圖示，確認您目前登入的執行個體。 選擇您已獲得存取權的執行個體，應為--aepImsOrgName--。

按一下​ +新專案，在Frame.io中建立您自己的專案。

選取​ Blank ​範本，然後為您的專案輸入名稱--aepUserLdap--。 按一下​ 建立新專案。

然後，您將在左側選單中看到您的專案。 按一下​ + ​圖示，然後選取​ 新增資料夾。

輸入名稱CitiSignal Fiber Campaign，然後按兩下資料夾以開啟它。

按一下​ 上傳。

在先前的練習中，您下載了citisignal-fiber.psd。 選取該檔案並按一下​ 開啟。

然後，您新建立的資料夾中將可以使用​ citisignal-fiber.psd ​檔案。

1.2.5.3 Workfront Fusion和Frame.io

在上一個練習中，您建立了案例--aepUserLdap-- - Firefly + Photoshop，該案例以自訂webhook開始，以webhook回應結束。 接著，我們使用Postman測試了Webhook的使用情況，但很顯然，這種情況的要點是由外部應用程式呼叫。 如前所述，Frame.io將是該練習，但在Frame.io和--aepUserLdap-- - Firefly + Photoshop之間需要另一個Workfront Fusion案例。 您現在將設定該案例。

移至https://experience.adobe.com/。 開啟​ Workfront Fusion。

在左側功能表中，移至​ 案例 ​並選取您的資料夾--aepUserLdap--。 按一下​ 建立新情境。

使用名稱--aepUserLdap-- - Frame IO Custom Action V4。

按一下畫布上的​ 問號物件。 在搜尋方塊中輸入文字webhook，然後按一下​ Webhooks。

按一下​ 自訂webhook。

按一下​ [新增]以建立新的webhook url。

對於​ Webhook名稱，請使用--aepUserLdap-- - Frame IO Custom Action Webhook。 按一下​ 儲存。

您應該會看到此訊息。 將此熒幕保持開啟且未觸控，因為您會在下一個步驟中需要它。 您必須按一下​ 將地址複製到剪貼簿，在下一個步驟中複製webhook URL。

1.2.5.4 Frame.io V4自訂動作API

移至Postman並開啟要求​ POST — 取得集合 Adobe IO - OAuth 中的存取權杖。 驗證​ 引數 ​下的欄位​ 領域。 欄位​ 範圍 ​應包含範圍frame.s2s.all。 如果遺失，請新增它。 接著，按一下[傳送]，要求新的​ access_token。​

接著，開啟要求​ GET — 列出集合 Frame.io V4 — 技術內部人士​ 中的帳戶。 按一下​ 傳送。

之後，您應該會看到包含一或多個帳戶的類似回應。 檢閱回應，並找到您正在使用的Frame.io V4帳戶的欄位​ id。 您可以在Frame.io V4使用者介面中找到帳戶的名稱：

複製欄位​ id ​的值。

在左側功能表中，移至​ 環境 ​並選取您正在使用的環境。 尋找變數​ FRAME_IO_ACCOUNT_ID，並在​ 初始值 ​資料行和​ 目前值 ​資料行中，貼上您從先前要求取得的​ id。 按一下​ 儲存。

在左側功能表中，返回​ 集合。 開啟請求​ GET — 列出集合 Frame.io V4 — 技術內部人士​ 中的Workspace。 按一下​ 傳送。

之後，您應該會看到包含一或多個帳戶的類似回應。 檢閱回應，並找到您正在使用的Frame.io V4 Workspace的欄位​ id。 複製欄位​ id ​的值。

在左側功能表中，移至​ 環境 ​並選取您正在使用的環境。 尋找變數​ FRAME_IO_WORKSPACE_ID，並在​ 初始值 ​資料行和​ 目前值 ​資料行中，貼上您從先前要求取得的​ id。 按一下​ 儲存。

在左側功能表中，返回​ 集合。 開啟集合​ Frame.io V4 - Tech Insidets ​中的請求​ POST — 建立自訂動作，資料夾​ 自訂動作。

前往請求的​ 內文。 將欄位​ name ​變更為--aepUserLdap-- - Frame.io Custom Action V4，然後將欄位​ url ​變更為您從Workfront Fusion複製的Webhook URL值。

按一下​ 傳送。

您的Frame.io V4自訂動作現已建立。

返回https://next.frame.io/，並移至您在專案--aepUserLdap--中建立的資料夾​ CitiSignal Fiber Campaign。 重新整理頁面。

重新整理頁面後，按一下資產​ citisignal-fiber.psd ​上的3個點​ …，然後開啟​ 自訂動作 ​功能表。 之後，您應該會看到先前建立的自訂動作出現在顯示的功能表中。 按一下自訂動作--aepUserLdap-- - Frame IO Custom Action Fusion V4。

您應該會看到類似的​ 自訂動作 ​快顯視窗。 此快顯視窗是Frame.io與Workfront Fusion之間通訊的結果。

將畫面變更回Workfront Fusion。 您現在應該會看到​ 已成功判定 ​出現在自訂Webhook物件上。 按一下​ 「確定」。

按一下​ 執行一次 ​以啟用測試模式，然後再次測試與Frame.io的通訊。

返回Frame.io，然後再次按一下自訂動作--aepUserLdap-- - Frame IO Custom Action Fusion V4。

將畫面切換回Workfront Fusion。 您現在應該會看到綠色核取記號，以及顯示​ 1 ​的泡泡。 按一下泡泡圖示以檢視詳細資訊。

泡泡圖的詳細檢視畫面會顯示從Frame.io收到的資料。 您應該會看到各種ID。例如，欄位​ resource.id ​會顯示資產​ citisignal-fiber.psd ​之Frame.io中的唯一ID。

現在，Frame.io與Workfront Fusion之間的通訊已建立，您可以繼續設定。

1.2.5.5提供對Frame.io的自訂表單回應

在Frame.io中叫用自訂動作時，Frame.io預期會收到來自Workfront Fusion的回應。 如果您回想一下您在上一個練習中建立的情境，則需要多個變數來更新標準Photoshop PSD檔案。 這些變數會在您使用的裝載中定義：

{
    "psdTemplate": "citisignal-fiber.psd",
    "xlsFile": "placeholder",
    "prompt":"misty meadows",
    "cta": "Buy this now!",
    "button": "Click here to buy!"
}

因此，為了成功執行案例--aepUserLdap-- - Firefly + Photoshop，需要​ prompt、cta、button ​和​ psdTemplate ​等欄位。

前3個欄位(prompt、cta、button)需要使用者輸入，當使用者叫用自訂動作時，需要在Frame.io中收集這些輸入。 因此，在Workfront Fusion中首先需要做的就是檢查這些變數是否可用，如果不可用，Workfront Fusion應回傳給Frame.io，要求輸入這些變數。 要達到此目的，請在Frame.io中使用表單。

返回Workfront Fusion並開啟您的案例--aepUserLdap-- - Frame IO Custom Action。 將游標暫留在​ 自訂webhook ​物件上，然後按一下​ + ​圖示以新增另一個模組。

搜尋Flow Control並按一下​ 流量控制。

按一下以選取​ 路由器。

您應該會看到此訊息。

按一下​ ？ ​物件，然後按一下以選取​ Webhooks。

選取​ Webhook回應。

您應該會看到此訊息。

複製下列JSON程式碼並將其貼到欄位​ 內文。

{
  "title": "What do you want Firefly to generate?",
  "description": "Enter your Firefly prompt.",
  "fields": [
    {
      "type": "text",
      "label": "Prompt",
      "name": "Prompt",
      "value": ""
    },
    {
      "type": "text",
      "label": "CTA Text",
      "name": "CTA Text",
      "value": ""
    },
    {
      "type": "text",
      "label": "Button Text",
      "name": "Button Text",
      "value": ""
    }
  ]
}

按一下圖示以清理和美化JSON程式碼。 然後，按一下​ 確定。

按一下[儲存]儲存變更。​

接下來，您需要設定篩選器，以確保此情境路徑僅在沒有提示可用時執行。 按一下​ 扳手 ​圖示，然後選取​ 設定篩選器。

設定下列欄位：

按一下​ 「確定」。

您應該會看到此訊息。 先按一下​ 儲存 ​圖示，然後按一下​ 執行一次 ​以測試您的情境。

您應該會看到此訊息。

返回Frame.io，然後再次按一下資產​ citisignal-fiber.psd ​上的自訂動作--aepUserLdap-- - Frame IO Custom Action Fusion。

您現在應該會在Frame.io中看到提示。 尚未填寫欄位且尚未提交表單。 系統會根據您剛設定的Workfront Fusion回應顯示此提示。

切換回Workfront Fusion，然後按一下​ Webhook回應 ​模組上的泡泡。 您會在​ INPUT ​下看到包含表單之JSON裝載的主體。 再按一下​ 執行一次。

您應該會再次看到此專案。

返回Frame.io並按指示填寫欄位。

按一下​ 提交。

接著，您應該會在Frame.io中看到類似以下的快顯視窗。

切換回Workfront Fusion，然後按一下​ 自訂webhook ​模組上的泡泡。 在作業1的​ 輸出 ​下，您現在可以看到新的​ 資料 ​物件，其中包含​ 按鈕文字、CTA文字 ​和​ 提示字元 ​等欄位。 有了這些可在您的情境中使用的使用者輸入變數，您就有足夠的空間繼續您的設定。

1.2.5.6從Frame.io擷取檔案位置

如前所述，此情境需要​ prompt、cta、button ​和​ psdTemplate ​等欄位才能運作。 前3個欄位現在已可供使用，但仍遺失要使用的​ psdTemplate。 psdTemplate ​現在會參考Frame.io位置，因為檔案​ citisignal-fiber.psd ​是在Frame.io中託管。 為了擷取該檔案的位置，您需要在Workfront Fusion中設定和使用Frame.io連線。

返回Workfront Fusion並開啟您的案例--aepUserLdap-- - Frame IO Custom Action V4。 將游標暫留在​ 上？ ​模組，按一下​ + ​圖示以新增另一個模組並搜尋frame。 按一下​ Frame.io。

按一下​ Frame.io。

按一下​ 進行自訂API呼叫。

若要使用Frame.io連線，您必須先進行設定。 按一下​ [新增]即可執行這個動作。

選取​ 連線型別 IMS伺服器到伺服器，並輸入名稱--aepUserLdap-- - Adobe I/O - Frame.io S2S。

接下來，您必須輸入您設定為​ 快速入門 ​模組一部分之Adobe I/O專案的​ 使用者端識別碼 ​和​ 使用者端密碼。 您可以在這裡找到您Adobe I/O專案的​ 使用者端識別碼 ​和​ 使用者端密碼。

返回Workfront Fusion中的案例。 在連線設定視窗中，將​ 使用者端識別碼 ​和​ 使用者端密碼 ​的值貼到其各自的欄位中。 按一下​ 繼續。 您的連線現在將由Workfront Fusion測試。

如果連線測試成功，就會自動顯示在​ 連線 ​下。 您現在已成功連線，而且您必須完成設定，才能從Frame.io取得所有資產詳細資訊，包括檔案位置。 若要這麼做，您必須使用​ 資源識別碼。

欄位​ 資源ID ​由Frame.io共用給Workfront Fusion，做為初始​ 自訂webhook ​通訊的一部分，可以在​ resource.id ​下找到。

針對模組​ Frame.io — 進行自訂API呼叫，使用URL： /v4/accounts/{{1.account_id}}/files/{{1.resource.id}}。

接著，按一下​ 查詢字串 ​下的​ +新增專案。

輸入這些值，然後按一下​ 新增。

您現在應該擁有此專案。 按一下​ 「確定」。

接下來，您需要設定篩選器，以確保此情境路徑僅在沒有提示可用時執行。 按一下​ 扳手 ​圖示，然後選取​ 設定篩選器。

設定下列欄位：

按一下​ 「確定」。

您現在應該會看到此訊息。 儲存您的變更，然後按一下​ 執行一次 ​以測試您的情境。

返回Frame.io，然後再次按一下資產​ citisignal-fiber.psd ​上的自訂動作--aepUserLdap-- - Frame IO Custom Action Fusion V4。

您現在應該會在Frame.io中看到提示。 尚未填寫欄位且尚未提交表單。 系統會根據您剛設定的Workfront Fusion回應顯示此提示。

切換回Workfront Fusion。 再按一下​ 執行一次。

返回Frame.io並按指示填寫欄位。 按一下​ 提交。

切換回Workfront Fusion，然後按一下​ Frame.io — 進行自訂API呼叫 ​模組。

在​ OUTPUT > Body > 資料 ​下方，您現在可以看到許多有關特定資產​ citisignal-fiber.psd ​的中繼資料。

此使用案例所需的特定資訊是檔案​ citisignal-fiber.psd ​的位置URL，您可以向下捲動至​ media_links > Original > download_url ​欄位，找到該檔案。

您現在擁有此使用案例運作所需的所有資訊（prompt、cta、button ​和​ psdTemplate）。

1.2.5.7叫用Workfront情境

在上一個練習中，您已設定情境--aepUserLdap-- - Firefly + Photoshop。 您現在需要對該情境進行微幅變更。

在另一個索引標籤中開啟案例--aepUserLdap-- - Firefly + Photoshop，然後按一下第一個​ Adobe Photoshop — 套用PSD編輯 ​模組。 您現在應該會看到輸入檔案已設定為使用Microsoft Azure中的動態位置。 基於此使用案例，輸入檔案不再儲存在Microsoft Azure中，而是使用Frame.io儲存，因此您需要變更這些設定。

將​ 儲存體 ​變更為​ 外部，並變更​ 檔案位置 ​以僅使用從傳入​ 自訂webhook ​模組取得的​ psdTemplate ​變數。 按一下[確定]​ ​，然後按一下[儲存]​ ​ ​儲存您的變更。

按一下​ 自訂webhook ​模組，然後按一下​ 將地址複製到剪貼簿。 您需要複製URL，因為您需要在其他案例中使用它。

返回您的案例--aepUserLdap-- - Frame IO Custom Action V4。 將游標暫留在​ Frame.io — 進行自訂API呼叫 ​模組，然後按一下​ + ​圖示。

輸入http，然後按一下​ HTTP。

選取​ 提出要求。

在欄位​ URL ​中貼上自訂webhook的URL。 將​ 方法 ​設定為​ POST。

將​ 主體型別 ​設定為​ 原始，並將​ 內容型別 ​設定為​ JSON (application/json)。
將下列JSON裝載貼到欄位​ 要求內容 ​中，並啟用​ 剖析回應 ​的核取方塊。

{
    "psdTemplate": "citisignal-fiber.psd",
    "xlsFile": "placeholder",
    "prompt":"misty meadows",
    "cta": "Buy this now!",
    "button": "Click here to buy!"
}

您現在已設定靜態裝載，但需要使用先前收集的變數將其變成動態。

針對欄位​ psdTemplate，將靜態變數​ citisignal-fiber.psd ​取代為變數​ Body > data > media_links > original > download_url。

對於欄位​ prompt、cta ​和​ button，請以Frame.io傳入的webhook要求插入情境中的動態變數來取代靜態變數，這些欄位是​ data.Prompt、data.CTA Text ​和​ data.Button Text。

此外，請啟用​ 剖析回應 ​的核取方塊。

按一下​ 「確定」。

按一下[儲存]儲存變更。​

1.2.5.8在Frame.io中儲存新資產

叫用另一個Workfront Fusion案例後，即可使用新的Photoshop PSD範本。 該PSD檔案需要儲存回Frame.io，這是此情境中的最後一個步驟。

將游標暫留在​ HTTP上 — 提出要求 ​模組並按一下​ + ​圖示。

選取​ Frame.io。

選取​ 進行自訂API呼叫。

系統將會自動選取您的Frame.io連線。

針對模組​ Frame.io — 進行自訂API呼叫，使用URL： /v4/accounts/{{1.account_id}}/folders/{{4.body.data.parent_id}}/files/remote_upload。

將欄位​ 方法 ​變更為​ POST。

將下列JSON程式碼片段複製並貼到欄位​ 內文。

{
  "data": {
    "name": "citisignal-fiber-{{timestamp}}.psd",
    "source_url": "{{6.data.newPsdTemplate}}"
  }
}

按一下​ 「確定」。

按一下[儲存]儲存變更。​

1.2.5.9測試您的端對端使用案例

在您的情境--aepUserLdap-- - Frame IO Custom Action中按一下​ 執行一次。

返回Frame.io，然後再次按一下資產​ citisignal-fiber.psd ​上的自訂動作--aepUserLdap-- - Frame IO Custom Action Fusion V4。

您現在應該會在Frame.io中看到提示。 尚未填寫欄位且尚未提交表單。 系統會根據您剛設定的Workfront Fusion回應顯示此提示。

切換回Workfront Fusion。 在您的情境--aepUserLdap-- - Frame IO Custom Action V4中按一下​ 執行一次。

在Workfront Fusion中，開啟案例--aepUserLdap-- - Firefly + Photoshop，然後按一下該案例中的​ 執行一次。

返回Frame.io並按指示填寫欄位。 按一下​ 提交。

1-2分鐘後，您應該會在Frame.io中看到自動顯示的新資產。 按兩下新資產以將其開啟。

現在，您可以清楚看到所有使用者輸入變數均已自動套用。