文件AEM as a Cloud Service使用手冊

快速入門 - 開發人員教學課程

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined

身處今日數位時代，任何組織都需要建立對使用者友善的表單。AEM Forms Edge Delivery Services (EDS) 可讓您使用 Google Docs 和 Microsoft Office 等熟悉的工具建立表單。

這些表單可直接提交資料至 Microsoft Excel 或 Google Sheets 檔案，讓您能夠使用由 Google Sheets、Microsoft Excel 和 Microsoft SharePoint 等強大 API 建構的活躍生態系統，以便輕鬆處理提交的資料或啟動現有的業務工作流程。

AEM Forms 會提供一個區塊 (名為最適化表單區塊)，協助您輕鬆建立表單來擷取和儲存擷取的資料。您可以建立預先設定最適化表單區塊的新 AEM 專案，或可以將最適化表單區塊新增至現有 AEM 專案。

此 AEM Forms 教學課程將引導您使用新的 Adob​​e Experience Manager (AEM) Forms 專案建立、預覽和發佈您自己的自訂表單。

先決條件

  • 您擁有 GitHub 帳戶，並且了解 Git 基本知識。
  • 您擁有 Google 或 Microsoft SharePoint 帳戶。
  • 您了解 HTML、CSS 和 JavaScript 的基本知識。
  • 您已安裝 Node/npm 可進行本機開發。

請注意！ 本教學課程使用 macOS、Chrome 和 Visual Studio Code。雖然這些步驟可調整以適用於其他設定，但螢幕擷圖和特定 UI 元素可能會根據您選擇的作業系統、瀏覽器和程式碼編輯器而有所不同。

建立一個預先設定最適化表單區塊的新 AEM 專案

AEM Forms 範本可協助您很快開始使用預先設定最適化表單區塊的 AEM 專案。這是遵守 AEM 最佳實務進行，且是直接開始建立表單的最快、最簡單的方法。

開始使用 AEM Forms 範本的存放庫範本

  1. 為您的 AEM 專案建立 GitHub 存放庫。若要建立存放庫：

    1. 前往 https://github.com/adobe-rnd/aem-boilerplate-forms 。

      AEM Forms 範本

    2. 按一下「使用此範本」選項，然後選取「 建立新存放庫」選項。建立新存放庫畫面會開啟。

      使用 AEM Forms 範本建立新存放庫

    3. 在建立新存放庫畫面上，選取「所有者」，並指定「存放庫名稱」 。Adobe 建議將存放庫設定為 「公開」。因此，選取「公開」選項，然後按一下「建立存放庫」。

    將存放庫設定為公開

  2. 在您的存放庫上安裝 AEM Code Sync GitHub 應用程式。若要安裝：

    1. 前往 https://github.com/apps/aem-code-sync/installations/new 。
    2. 在「安裝 AEM Code Sync」畫面上，選取「僅選取存放庫」選項，然後選取您新建立的存放庫。按一下「儲存」。

    將存放庫設定為公開

    note note
    NOTE
    如果您使用有 IP 篩選功能的 GitHub Enterprise，可以將下列 IP 新增至允許清單：3.227.118.73

    恭喜！您有一個在 https://<branch>--<repo>--<owner>.hlx.page/ 上執行的新網站。

    • <branch>是指 GitHub 存放庫的分支。
    • <repository>表示您的 GitHub 存放庫。
    • <owner>是指託管 GitHub 存放庫的 GitHub 帳戶使用者名稱。

    例如，如果分支名稱為 main，則存放庫為 wefinance、所有者為 wkndforms，網站將在 https://main–wefinance–wkndforms.hlx.page/ 啟動並運作。

連結您自己的內容來源

您新建立的 GitHub 存放庫指向儲存在 Google Drive 資料夾的範例內容。此唯讀內容是建立您表單的最佳起點。隨時可將內容複製到您自己的 Google Drive 中，並根據您的需求來自訂內容。

Google Drive 上的範例內容

若要將範例內容複製到您自己的內容資料夾，並將 GitHub 存放庫指向您自己的內容資料夾：

  1. 在 Google Drive 或 Microsoft SharePoint 中專為您的 AEM 內容建立一個新資料夾。本文件是使用建立在 Microsoft SharePoint 的資料夾。

  2. 與 Adob​​e Experience Manager 使用者 (helix@adobe.com) 共用該資料夾。

    使用「管理存取」選項與 AEM 使用者共用資料夾 - SharePoint

    使用「管存」取,選項與 AEM 使用者共用資料夾 - Google Drive

    確保您已向 Adob​​e Experience Manager 使用者提供該資料夾的編輯權限。

    與 AEM 使用者共用資料夾，提供編輯權限-SharePoint

    與 AEM 使用者共用資料夾，提供編輯權限 - Google Drive

  3. 將儲存在 Google Drive 資料夾中的範例內容複製到您的資料夾中。若要複製：

    1. 下載全部檔案或下載個別檔案。

      下載範例內容

      nav 和 footer 檔案是定義頁面的基本版面，並且在整個專案中很少有變動。檔案還具有與大多數其他內容檔案不同的特定結構。檢視這些檔案即可了解 AEM 專案中的內容是如何組織。

    2. 將這些檔案上傳到 Microsoft SharePoint 或 Google Drive 資料夾。

      Google Drive 上的範例內容

      確保您將範例內容的enquiry工作表複製至 Google Drive 或 Microsoft SharePoint 上的資料夾。 此工作表含有範本表單的結構。

  4. 現在您已經設定了內容資料夾，您應該可將資料夾連結到先前使用 AEM Forms 範本在 GitHub 建立的專案。 若要連接：

    1. 前往您先前使用 AEM Forms 範本建立的 GitHub 存放庫。

    2. 開啟 fstab.yaml 進行編輯。

    3. 將現有參照更換為您與 AEM 使用者共用的資料夾路徑 (helix@adobe.com)。

      Google Drive 上的範例內容

      如果您使用 Microsoft SharePoint，則資料夾路徑採用下列格式：

      code language-html 
      https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

      例如，

      code language-html 
      https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

      如需更多有關在 Microsoft SharePoint 中管理檔案的資訊，請參閱「如何使用 Adobe SharePoint」。

    4. 您更新參照且一切看起來沒問題，就可提交更新的 fsatb.yaml 檔案。 如果您遇到任何建置問題，請參閱「解決 GitHub 建置問題」。

      提交更新的 fsatab.yaml 檔案

      這樣即可將您的內容資料夾連接到您的網站。 更新參照後，您最初可能會遇到「404 Not Found」錯誤。 這是因為您的內容還沒過預覽。 下一部分將介紹如何開始製作和預覽內容。

預覽和發佈您的內容

完成最後一個步驟之後，您的新內容來源並非空值，但在前進至預覽或上線階段之前，在您的網站上不會看到此內容。 目前，這可能會導致 404 錯誤。

若要預覽未發佈的內容：

  1. 安裝名為 AEM Sidekick 的 Chrome 擴充功能 。

    安裝 AEM SideKick

    安裝擴充功能至 Chrome 後，記得要釘選以便輕鬆找到。

    釘選 AEM Sidekick

  2. 若要設定 Sidekick Chrome 擴充功能，請前往先前共用的 Google Drive 或 Microsoft SharePoint 資料夾，然後按滑鼠右鍵點選瀏覽器工具列中的擴充功能圖示，然後選取「Add this project」。

    AEM Sidekick - 新增專案

    安裝擴充功能並新增專案後，您就可以預覽並發佈 Google Drive 的內容。

  3. 選取 Microsoft SharePoint 或 Google Drive 資料夾中的所有文件。 您可以在點選時長按 Ctrl 鍵 (Windows/Linux) 或 Cmd 鍵 (Mac) 以選擇多個文件。

    選取所有檔案

  4. 按一下釘選至 Chrome 擴充功能列的 AEM Sidekick 圖示。 螢幕上會出現一個工具列。 您可以選擇預覽或發佈您的內容。

    如果您複製index、nav、footer和enquiry檔案過來，這些都是有其個別預覽和發佈週期的文件，因此請確保預覽 (和發佈) 所有這些檔案。

    預覽檔案後，新的瀏覽器標籤會顯示這些文件。 若要預覽範例表單，請前往以下 URL：

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.live
    • <branch>是指 GitHub 存放庫的分支。
    • <repository>表示您的 GitHub 存放庫。
    • <owner>是指託管 GitHub 存放庫的 GitHub 帳戶使用者名稱。

    https://<branch>--<repo>--<owner>.hlx.page/enquiry URL.

    例如，如果您的專案存放庫名為 “wefinance” (位於帳戶所有者 “wkndforms” 下面)，並且您使用的是「主要」分支，URL 如下：

    https://main–wefinance–wkndforms.hlx.page.

建立表單

範例內容包含一個「查詢」工作表，這是「查詢」表單的範本。 工作表的每一列代表一個表單欄位，且欄標題定義欄位屬性。 使用此範例表單，讓您在建立表單上佔有優勢。

查詢表單

讓我們從更新欄位標籤開始。 開啟「查詢」表進行編輯，將提交按鈕的標籤變更為Let's Chat，並使用 AEM Sidekick 預覽和發佈檔案。

查詢表單

當您預覽或發佈檔案時，該檔案的 JSON 版本將顯示在新標籤中。 複製檔案的預覽 (.hlx.page) 或發布 (.hlx.live) URL。

表單試算表的 JSON

開啟 enquiry 檔案，並將表單區塊中的 URL 更換為上一個步驟中複製的檔案 URL。 確保 URL 是超連結。

有試算表 URL 的 .json URL 的查詢檔案

使用 AEM Sidekick 預覽和發佈查詢文件。

有試算表 URL 的 .json URL 的查詢檔案

若要預覽更新後的查詢表單，請往下列 URL：

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

提交按鈕的標籤更新為 Let's Chat。

查詢表單

若需要建立和發佈新表單的詳細資訊，請參閱「建立表單」指南。

開始開發樣式和功能

若要立即啟動並運作本機 AEM 開發環境：

  1. 安裝 AEM CLI：AEM CLI 簡化了開發任務。讓我們使用 npm 進行全域安裝：

    code language-bash 
        npm install -g @adobe/aem-cli

  2. 複製您的 GitHub 專案：使用以下命令從 GitHub 原地複製您的專案存放庫，更換為 存放庫所有者和 存放庫名稱：

    code language-none 
    git clone https://github.com/<owner>/<repo>

  3. 啟動您的本機環境：導覽至專案目錄並使用單一命令來啟動本機 AEM 執行個體：

    code language-none 
    cd <repo>
aem up

最適化表單區塊 blocks/form 資料夾是您設定表單樣式和程式碼的場域！編輯此目錄中的任何 .css 或 .js 檔案，這些變更會立即反映在您的瀏覽器中。

準備好展示您的創作了嗎？使用 Git 提交並推播您的變更。這將更新可在這些 URL 存取的預覽和生產環境 (將預留位置更換為您的專案詳細資訊)：

預覽：https://<branch>--<repo>--<owner>.hlx.page/
生產：https://<branch>--<repo>--<owner>.hlx.live/

恭喜！您已成功設定本機開發環境並部署好您的變更。

將最適化表單區塊新增至您現有的 AEM 專案

https://video.tv.adobe.com/v/3427789

如果您有現有的 AEM 專案，則可以將最適化表單區塊整合至目前專案中並開始建立表單。

NOTE
此步驟適用於使用 AEM 範本建置的專案。如果您使用 AEM Forms 範本建立 AEM 專案，則可以省略此步驟。

若要整合：

  1. 將最適化表單區塊存放庫：https://github.com/adobe-rnd/aem-boilerplate-forms 原地複製到您的電腦。

  2. 在下載的資料夾中，找到 blocks/form 資料夾。複製此資料夾。現在，導覽至 AEM 專案的本機 blocks 資料夾，並將複製的表單資料夾貼至此處。

  3. 提交這些變更並推播至 GitHub 上的 AEM 專案。

就是這樣！最適化表單區塊現在是您 AEM 專案的一部分。您可以開始建立表單並將其新增至 AEM 頁面。

疑難排解 GitHub 建置問題

解決潛在問題以確保 GitHub 建置過程順利進行：

  • 解決模組路徑錯誤：
    如果遇到「無法解決 "…/…/scripts/lib-franklin.js" 模組的路徑」錯誤，請導覽至 [EDS Project]/blocks/forms/form.js 檔案。透過將 lib-franklin.js 檔案更換為 aem.js 檔案來更新匯入語句。

  • 處理 Linting 錯誤：
    如果您遇到任何 linting 錯誤，您可以略過不予處理。開啟 [EDS Project]/package.json 檔案並將 "lint" 指令碼從 "lint": "npm run lint:js && npm run lint:css" 修改為 "lint": "echo 'skipping linting for now'"。儲存檔案並將變更提交至您的 GitHub 專案。

另請參閱

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab