文件AEM as a Cloud Service使用手冊

通用編輯器的SecurBank範例應用程式 securbank

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

建立對象：

  • 管理員
  • 開發人員

透過使用SecurBank應用程式來瞭解具有實作體驗的通用編輯器，該應用程式旨在展示Universal Editor加速內容建立的強大功能、靈活性和可用性。

先決條件 prerequisites

  • 您必須指派給​ AEM系統管理員 產品設定檔，才能安裝SecurBank應用程式。
  • 您必須安裝Node.js版本20或更新版本，才能進行本機開發。

安裝SecurBank installation

SecurBank應用程式的安裝很簡單，但由於涉及AEM as a Cloud Service的許多領域，因此需要執行許多步驟。 以下是主要步驟的概觀。

  1. 在Cloud Manager中建立沙箱計畫。
  2. 複製計畫的Git存放庫並更新SecurBank AEM專案內容。
  3. 執行管道以部署SecurBank AEM專案。
  4. 擷取Cloud Manager認證，用於本機Web應用程式開發。
  5. 下載及設定SecurBank網頁應用程式。
  6. 執行SecurBank網頁應用程式。

以下小節詳細說明所需的個別工作。

在Cloud Manager中建立沙箱計畫。 create-sandbox-program

您需要新的Cloud Manager程式，才能安裝SecurBank。

  1. 在 my.cloudmanager.adobe.com 登入 Cloud Manager，並選取適當的組織。

  2. 為SecurBank應用程式建立新的沙箱計畫。

    • 選取​ 解決方案和附加元件 ​時使用預設選項。
    • 如需有關如何建立沙箱計畫的詳細資訊，請參閱檔案建立沙箱計畫。

複製計畫的Git存放庫並更新SecurBank AEM專案內容。 clone-and-update

  1. 建立程式後，請開啟該程式，並在​ 存放庫 ​索引標籤上，點選或按一下​ 存取存放庫資訊 ​按鈕，以開啟​ 存放庫資訊 ​對話方塊，並檢視存取沙箱環境的Git存放庫所需的認證。

    • 如需有關如何存取存放庫資訊的詳細資訊，請參閱檔案存取存放庫。

  2. 使用​ 存放庫資訊 ​對話方塊中的認證，在本機電腦上複製存放庫。

  3. 找出本機複製的資料夾，將其開啟並刪除隱藏/點檔案以外的所有內容。

  4. 按一下​ 代碼，然後在下拉式清單中按一下​ 下載ZIP，以從https://github.com/Adobe-Marketing-Cloud/summit-2024-l425-securbank的GitHub擷取最新的SecurBank AEM專案代碼。

  5. 將您本機檔案系統上的zip檔案內容解壓縮，並將其移至沙箱程式本機複製的現成空白資料夾。

  6. 使用終端機，切換到複製專案的資料夾並提交所有內容並將其推送到Git。

    1. git add --all
    2. git commit -m "Adding SecurBank app code"
    3. git push

執行管道以部署SecurBank AEM專案。 run-pipeline

SecurBank的AEM專案已送交沙箱存放庫後，便可隨管道部署。

  1. 返回Cloud Manager中沙箱程式的​ 總覽 ​標籤，並執行完整棧疊非生產管道。

    • 取消勾選管道執行的所有選項。
    • 如需有關執行管道的詳細資訊，請參閱檔案管理管道。

擷取Cloud Manager認證，用於本機Web應用程式開發。 retrieve-credentials

在執行SecurBank應用程式之前，您需要先取得Cloud Manager憑證，才能將應用程式連線至Cloud Manager。

  1. 管道執行時，請返回Cloud Manager中的​ 總覽 ​標籤，然後點選或按一下環境名稱旁的省略符號按鈕，並選取​ Developer Console。

  2. 在Developer Console中，選取「整合」標籤，然後選取「本機權杖」標籤，然後點選或按一下「取得本機開發權杖」。

  3. 使用存取權杖產生JSON檔案。 僅將權杖本身（剩餘的JSON不需要複製）複製到安全位置，以便在關閉Developer Console並返回Cloud Manager之前的未來步驟中使用。

  4. 返回Cloud Manager，在​ 總覽 ​標籤上，以滑鼠右鍵按一下環境的URL以複製並將其儲存在安全位置，以供日後步驟使用。

下載及設定SecurBank網頁應用程式。 download-web-app

現在您可以下載並設定SecurBank網頁應用程式。

  1. 按一下​ 代碼，然後在下拉式清單中按一下​ 下載ZIP，從GitHub https://github.com/Adobe-Marketing-Cloud/summit-2024-l425/tree/ue-z-final-with-events擷取最新的SecurBank應用程式代碼。

  2. 解壓縮本機檔案系統上的zip檔案內容。

  3. 啟動您偏好的程式碼編輯器，並在summit-2024-l425-ue-z-final-with-events/react-app/.env的SecurBank應用程式專案中開啟隱藏的環境檔案。

  4. 對.env檔案進行下列變更並儲存變更。

    • 針對REACT_APP_HOST_URI，貼上您環境先前複製的URL值。
    • 針對REACT_APP_DEV_TOKEN，貼上先前複製的本機開發權杖的值。

執行SecurBank網頁應用程式。 run-web-app

在Cloud Manager和本機中設定所有專案，您就能執行SecurBank網頁應用程式。

  1. 在本機電腦的命令列上，導覽至您下載並解壓縮之SecurBank應用程式專案的react-app資料夾。

  2. 在您的react-app資料夾中使用node -i命令安裝SecurBank應用程式。

  3. 安裝後，使用npm start命令啟動SecurBank應用程式。

  4. 如果安裝及啟動成功，您將會看到：

  • 終端機中的下列輸出。

    code language-text 
    Compiled successfully!

You can now view securbank in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://192.168.1.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

    • 而且瀏覽器視窗會開啟至URL https://localhost:3000。

      • 請注意，這是為了開發目的，因此不提供有效的憑證。 因此，您可能需要通知瀏覽器，允許其存取頁面。

恭喜！您現在應該會看到SecurBank應用程式在瀏覽器中成功執行。

如果內容尚未顯示，請確定您執行的​ 部署至開發 ​管道已成功完成。

瀏覽器中的 SecurBank應用程式

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