文件AEMAEM 教學課程AEM Headless 教學課程

使用者端應用程式整合

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

建立對象：

  • undefined
  • undefined

在上一章中，您使用GraphiQL Explorer建立和更新持久查詢。

本章會逐步引導您使用現有​ React元件 ​內的HTTPGET要求，將持續性查詢與WKND使用者端應用程式（亦稱為WKND應用程式）整合在一起。 此外，您可選擇挑戰應用AEM Headless學習內容，以編碼專業知識增強WKND使用者端應用程式。

先決條件 prerequisites

本檔案是多部分教學課程的一部分。 在繼續本章之前，請確定已完成前面的章節。 WKND使用者端應用程式連線至AEM發佈服務，因此您​ 發佈下列內容至AEM發佈服務 ​非常重要。

  • 專案設定
  • GraphQL 端點
  • 內容片段模型
  • 編寫的內容片段
  • GraphQL持續查詢

本章中的​ IDE熒幕擷取畫面來自Visual Studio Code

第1-4章解決方案套件（選填） solution-package

可安裝的解決方案套件可完成第1-4章的AEM UI中的步驟。 如果前幾章已完成，則此封裝​ 不需要。

  1. 下載Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip。
  2. 在AEM中，瀏覽至​ 工具 > 部署 > 封裝 ​以存取​ 封裝管理員。
  3. 上傳並安裝上一步驟中下載的套件（zip檔案）。
  4. 將套件復寫至AEM Publish服務

目標 objectives

在本教學課程中，您將瞭解如何使用適用於JavaScript的AEM Headless Client，將持續性查詢的請求整合到範例WKND GraphQL React應用程式中。

複製並執行範例使用者端應用程式 clone-client-app

為加速教學課程，我們提供入門版React JS應用程式。

  1. 複製adobe/aem-guides-wknd-graphql存放庫：

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. 編輯aem-guides-wknd-graphql/advanced-tutorial/.env.development檔案並將REACT_APP_HOST_URI設定為指向您的目標AEM發佈服務。

    如果連線到作者執行個體，請更新驗證方法。

    code language-plain 
    # Server namespace
REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com

#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=

# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=

# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json

# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
REACT_APP_BASIC_AUTH_USER=
REACT_APP_BASIC_AUTH_PASS=

    React應用程式開發環境

    note note
    NOTE
    上述指示是將React應用程式連線至​ AEM Publish服務，但若要連線至​ AEM作者服務，請取得目標AEM as a Cloud Service環境的本機開發權杖。
    也可以使用基本驗證，使用AEMaaCS SDK🔗將應用程式連線到本機作者執行個體。

  3. 開啟終端機並執行命令：

    code language-shell 
    $ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start

  4. 新的瀏覽器視窗應載入http://localhost:3000

  5. 點選​ 露營 > Yosemite Backpacking ​以檢視Yosemite Backpacking冒險詳細資料。

    Yosemite揹包熒幕

  6. 開啟瀏覽器的開發人員工具並檢查XHR請求

    POSTGraphQL

    您應該會看到對GraphQL端點的GET個要求，其中包含專案設定名稱(wknd-shared)、持續查詢名稱(adventure-by-slug)、變數名稱(slug)、值(yosemite-backpacking)和特殊字元編碼。

IMPORTANT
若您想知道為什麼GraphQL API要求是針對http://localhost:3000而非AEM Publish Service網域提出，請檢閱基礎教學課程中的🔗。

檢閱程式碼

在基本教學課程 — 使用AEM的GraphQL API建置React應用程式步驟中，我們已檢閱並增強一些重要檔案，以獲得實際操作的專業知識。 增強WKND應用程式之前，請先檢閱重要檔案。

檢閱Adventures React元件

WKND React應用程式的主要檢視是所有冒險清單，您可以根據​ 露營、騎腳踏車 ​之類的活動型別篩選這些冒險。 此檢視由Adventures元件轉譯。 以下是主要實作詳細資料：

  • src/components/Adventures.js呼叫useAllAdventures(adventureActivity)連結，而其中adventureActivity引數為活動型別。

  • 已在src/api/usePersistedQueries.js檔案中定義useAllAdventures(adventureActivity)連結。 根據adventureActivity值，它決定要呼叫哪個持續查詢。 如果不是null值，它會呼叫wknd-shared/adventures-by-activity，否則會取得所有可用的冒險wknd-shared/adventures-all。

  • 掛接使用透過aemHeadlessClient.js將查詢執行委派給AEMHeadless的主要fetchPersistedQuery(..)函式。

  • 此掛接也只會從response.data?.adventureList?.items的AEM GraphQL回應傳回相關資料，允許Adventures React檢視元件與父JSON結構無關。

  • 成功執行查詢後，Adventures.js的AdventureListItem(..)轉譯器函式會新增HTML元素，以顯示​ 影像、旅行長度、價格和標題 ​資訊。

檢閱AdventureDetail React元件

AdventureDetail React元件會呈現冒險的詳細資訊。 以下是主要實作詳細資料：

  • src/components/AdventureDetail.js呼叫useAdventureBySlug(slug)連結，而這裡slug引數是查詢引數。

  • 如上所述，useAdventureBySlug(slug)連結定義於src/api/usePersistedQueries.js檔案中。 它透過aemHeadlessClient.js委派給AEMHeadless來呼叫wknd-shared/adventure-by-slug持續查詢。

  • 成功執行查詢後，AdventureDetail.js中的AdventureDetailRender(..)轉譯器函式會新增HTML元素以顯示冒險詳細資料。

增強程式碼

使用adventure-details-by-slug持久查詢

在上一章中，我們建立了adventure-details-by-slug持續查詢，它提供其他冒險資訊，例如​ 位置、instructorTeam和管理員。 讓我們將adventure-by-slug取代為adventure-details-by-slug持續查詢，以呈現此額外資訊。

  1. 開啟src/api/usePersistedQueries.js。

  2. 尋找函式useAdventureBySlug()並將查詢更新為

 ...

 // Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
 response = await fetchPersistedQuery(
 "wknd-shared/adventure-details-by-slug",
 queryParameters
 );

 ...

顯示其他資訊

  1. 若要顯示其他冒險資訊，請開啟src/components/AdventureDetail.js

  2. 找到函式AdventureDetailRender(..)並將傳回函式更新為

    code language-javascript 
    ...

return (<>
    <h1 className="adventure-detail-title">{title}</h1>
    <div className="adventure-detail-info">

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

  3. 同時定義對應的轉譯器函式：

    位置資訊

    code language-javascript 
    function LocationInfo({name}) {

    if (!name) {
        return null;
    }

    return (
        <>
            <div className="adventure-detail-info-label">Location</div>
            <div className="adventure-detail-info-description">{name}</div>
        </>
    );

}

    位置

    code language-javascript 
    function Location({ contactInfo }) {

    if (!contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-location'>
                <h2>Where we meet</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
            </div>
        </>);
}

    講師團隊

    code language-javascript 
    function InstructorTeam({ _metadata }) {

    if (!_metadata) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-team'>
                <h2>Instruction Team</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
            </div>
        </>);
}

    管理員

    code language-javascript 
    function Administrator({ fullName, contactInfo }) {

    if (!fullName || !contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-administrator'>
                <h2>Administrator</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Name: {fullName}</div>
                <div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
            </div>
        </>);
}

定義新樣式

  1. 開啟src/components/AdventureDetail.scss並新增下列類別定義

    code language-css 
    .adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}

.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}
TIP
更新的檔案可在​ AEM Guides WKND - GraphQL ​專案下取得，請參閱進階教學課程區段。

完成上述增強功能後，WKND應用程式看起來如下所示，瀏覽器的開發人員工具顯示adventure-details-by-slug個持續的查詢呼叫。

增強型WKND應用程式

增強功能挑戰（選購）

WKND React應用程式的主要檢視可讓您根據活動型別（例如​ 露營、循環）篩選這些冒險活動。 不過，WKND業務團隊想要額外的​ 位置 ​篩選功能。 需求為

  • 在WKND應用程式的主檢視上，在左上角或右上角新增​ 位置 ​篩選圖示。
  • 按一下​ 位置 ​篩選圖示應該會顯示位置清單。
  • 從清單中按一下所需的位置選項時，應該只會顯示相符的「冒險」。
  • 如果只有一個相符的Adventure，則會顯示Adventure詳細資料檢視。

恭喜

恭喜！您現在已完成整合，並將持續性查詢實作到範例WKND應用程式中。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4