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

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

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

   

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

   

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

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

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

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

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

例如，如果分支名稱為 main，存放庫為 wefinance，而所有者為 wkndforms，則網站會在 https://main--wefinance--wkndforms.aem.page <! 啟動並運作。–(https://main–wefinance–wkndform.aem.page)–>

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

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

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

{width="50%"}

{width="50%"}

將範例內容複製到您的資料夾。若要複製：

1. 解壓縮已下載的資料夾並複製內容。

   

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

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

   

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

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

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

2. 在根資料夾中新增 fstab.yaml 檔案。

3. 將您與 AEM 使用者 (forms@adobe.com) 共用的資料夾路徑新增作為參考。

   

   如果您使用 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 建置問題」。

   

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

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

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

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

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

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

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

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

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

https://<branch>--<repository>--<owner>.aem.live

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

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

例如，如果您的專案存放庫名為 "wefinance" (位於帳戶所有者 "wkndform" 下面)，並且您使用的是 "main" 分支，表單名稱為 enquiry，則 URL 為：https://main--wefinance--wkndform.aem.live/enquiry。
<!–(https://main–wefinance–wkndform.aem.live/enquiry).–>

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

    npm install -g @adobe/aem-cli

原地複製您的 GitHub 專案：使用以下命令，從 GitHub 原地複製您的專案存放庫，以存放庫所有者取代 <owner> 並以存放庫名稱取代 <repo>：

git clone https://github.com/<owner>/<repo>

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

cd <repo>
aem up

導覽至本機系統上的 AEM 專案存放庫資料夾。

從 AEM Forms 範本複製下列資料夾和檔案，並貼到您的 AEM 專案中：

• 表單區塊資料夾
• form-editor-support.js 檔案
• form-editor-support.css 檔案

導覽至 AEM 專案中的 /scripts/editor-support.js 檔案，並使用 AEM Forms 範本中 editor-support.js 檔案來更新檔案

導覽至 AEM 專案中的 /models/_section.json，並將「form」和「embed-adaptive-form」附加至 filters 物件的元件陣列：

    "filters": [
    {
  "id": "section",
  "components": [
    .
    .
    .
    "form",
    "embed-adaptive-form"
  ]
 }]

(選用) 導覽至 AEM 專案中的 /.eslintignore，並新增下列數行程式碼：

blocks/form/rules/formula/*
blocks/form/rules/model/*
blocks/form/rules/functions.js
scripts/editor-support.js
scripts/editor-support-rte.js

(選用) 導覽至 AEM 專案中的 /.eslintrc.js，並在 rules 物件中新增下列數行程式碼：

'xwalk/max-cells': ['error', {
  '*': 4, // default limit for all models
  form: 15,
  wizard: 12,
  'form-button': 7,
  'checkbox-group': 20,
  checkbox: 19,
  'date-input': 21,
  'drop-down': 19,
  email: 22,
  'file-input': 20,
  'form-fragment': 15,
  'form-image': 7,
  'multiline-input': 23,
  'number-input': 22,
  panel: 17,
  'radio-group': 20,
  'form-reset-button': 7,
  'form-submit-button': 7,
  'telephone-input': 20,
  'text-input': 23,
  accordion: 14,
  modal: 11,
  rating: 18,
  password: 20,
  tnc: 12,
}],
'xwalk/no-orphan-collapsible-fields': 'off', // Disable until enhancement is done for Forms properties

開啟終端機並執行下列命令：

npm i
npm run build:json

認可和推播這些變更至 GitHub 的 AEM 專案存放庫。