使用者端應用程式整合

在上一章中,您使用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.jsAdventureListItem(..)轉譯器函式會新增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